How does the plugin work, exactly :-) ?

[SquirrelDeveloper]

Hi!

I am currently testing the plugin and trying to implement it, but all I got is a blank menu.
Is there any working example I could look at?

For your information, my configuration is:

export default defineConfig({
  plugins: ['umi-plugin-ssr-routes'],
  ssrRoutes: {},
  /**
   * @doc https://umijs.org/docs/api/config#hash
   */
  hash: true,
  /**
   * @doc https://umijs.org/docs/guides/routes
   */
  // umi routes: https://umijs.org/docs/routing
  /**
   * @doc  https://ant.design/docs/react/customize-theme-cn
   * @doc  https://umijs.org/docs/api/config#theme
   */
  theme: {
    'root-entry-name': 'variable',
    token: {
      colorBgSpotlight: '#1d222e',
    },
    components: {
      Modal: {
        contentBg: '#1d222e',
        headerBg: '#1d222e',
      },
    },
  },
  /**
   * @doc https://umijs.org/docs/api/config#ignoremomentlocale
   */
  ignoreMomentLocale: true,
  /**
   * @doc https://umijs.org/docs/guides/proxy
   * @doc https://umijs.org/docs/api/config#proxy
   */
  proxy: proxy[REACT_APP_ENV as keyof typeof proxy],
  fastRefresh: true,
  //============== 以下都是max的插件配置 ===============
  /**
   * @@doc https://umijs.org/docs/max/data-flow
   */
  model: {},
  /**
   * @doc https://umijs.org/docs/max/data-flow#%E5%85%A8%E5%B1%80%E5%88%9D%E5%A7%8B%E7%8A%B6%E6%80%81
   */
  initialState: {},
  /**
   * @name layout
   * @doc https://umijs.org/docs/max/layout-menu
   */
  title: 'Squirrel Servers Manager',
  layout: {
    locale: true,
    ...defaultSettings,
  },
  /**
   * @name moment2dayjs 插件
   * @doc https://umijs.org/docs/max/moment2dayjs
   */
  moment2dayjs: {
    preset: 'antd',
    plugins: ['duration'],
  },

  locale: {
    default: 'en-US',
    antd: true,
    // default true, when it is true, will use `navigator.language` overwrite default
    baseNavigator: false,
  },
  /**
   * @doc https://umijs.org/docs/max/i18n
   */ /**
   * @doc https://umijs.org/docs/max/antd#antd
   */
  antd: {
    theme: {
      token: {
        colorBgElevated: '#1d222e',
        colorBgContainer: '#151921',
      },
      components: {
        Message: {
          contentBg: 'white',
        },
        Modal: {
          contentBg: '#1d222e',
          headerBg: '#1d222e',
        },
        Input: {
          activeBg: '#1d222e',
        },
      },
    },
  },
  /**
   * @doc https://umijs.org/docs/max/request
   */
  request: {},
  /**
   * @doc https://umijs.org/docs/max/access
   */
  access: {},
  headScripts: [
    {
      src: '/scripts/loading.js',
      async: true,
    },
  ],
  //================ pro =================
  presets: ['umi-presets-pro'],
  /**
   * @doc https://pro.ant.design/zh-cn/docs/openapi/
   */
  mfsu: {
    strategy: 'normal',
  },
  esbuildMinifyIIFE: true,
  requestRecord: {},
  clientLoader: {},
  chainWebpack(memo: any) {
    memo.plugin('monaco-editor').use(MonacoEditorWebpackPlugin, []);
    return memo;
  },
  codeSplitting: {
    jsStrategy: 'granularChunks',
  },
});

And part of my app.tsx are:

export async function getServerSideRoutes(): Promise<ServerRouteResponse[]> {
  return [
    {
      path: '/user',
      routes: [
        { name: 'Login', path: '/user/login', component: './User/Login' },
        {
          name: 'FirstTime',
          path: '/user/onboarding',
          component: './User/FirstTime',
        },
      ],
    },
    {
      path: '/',
      name: 'Dashboard',
      icon: 'FundOutlined',
      component: './Dashboard',
    },
    {
      path: '/manage',
      name: 'Manage',
      icon: 'GlobalOutlined',
      hideInBreadcrumb: true,
      routes: [
        {
          name: 'Devices',
          icon: 'table',
          path: '/manage/devices',
          component: './Devices',
        },
        {
          name: 'Containers',
          icon: 'AppstoreOutlined',
          path: '/manage/containers',
          component: './Containers',
        },
        {
          path: '/manage/automations',
          name: 'Automations',
          icon: 'interaction',
          component: './Automations/Automations',
        },
        {
          path: '/manage/security',
          name: 'Security',
          icon: 'SecurityScanOutlined',
          component: './Security/Security',
        },
      ],
    },
    {
      path: '/stack',
      name: 'Stack',
      icon: 'BuildOutlined',
      access: 'canAdmin',
      routes: [
        {
          name: 'Playbooks',
          icon: 'PlaySquareOutlined',
          path: '/stack/playbooks',
          component: './Playbooks',
        },
        {
          name: 'Container Stacks',
          icon: 'ApartmentOutlined',
          path: '/stack/compose',
          component: './ComposeEditor',
        },
      ],
    },
    {
      path: '/admin',
      name: 'Configuration',
      icon: 'crown',
      access: 'canAdmin',
      routes: [
        { path: '/admin', component: './Admin/Inventory' },
        {
          name: 'Inventory',
          icon: 'database',
          path: '/admin/inventory',
          component: './Admin/Inventory',
        },
        {
          path: '/admin/logs',
          name: 'Logs',
          icon: 'UnorderedList',
          component: './Admin/Logs',
        },
        {
          path: '/admin/settings',
          name: 'Settings',
          icon: 'SettingOutlined',
          component: './Admin/Settings/Settings',
        },
      ],
    },
    { path: '/', redirect: '/welcome' },
    { path: '*', component: './404' },
    {
      path: '/admin/inventory/:id',
      component: './Admin/Inventory',
    },
    {
      path: '/manage/playbooks/:id',
      component: './Playbooks',
    },
    {
      path: '/manage/containers/logs/:id',
      component: './Containers/logs/Logs',
    },
    {
      path: '/manage/devices/ssh/:id',
      component: './Devices/DeviceSSHTerminal',
    },
  ];
}

// ProLayout  https://procomponents.ant.design/components/layout
export const layout: RunTimeLayoutConfig = ({
  // @ts-ignore
  initialState,
  // @ts-ignore
  setInitialState,
}) => {
  return {
    logo: Logo,
    actionsRender: () => [
      <DocumentationWidget key="doc" />,
      <DevicesHeaderWidget key="online" />,
      <HealthWidget key="health" />,
      <NotificationsWidget key="notifications" />,
      <UpdateAvailableWidget key={'update'} />,
    ],
    avatarProps: {
      src: initialState?.currentUser?.avatar,
      title: <AvatarName />,
      render: (_: any, avatarChildren: any) => {
        return <AvatarDropdown>{avatarChildren}</AvatarDropdown>;
      },
    },
    menu: { type: 'group' },
    footerRender: () => <Footer />,
    onPageChange: () => {
      // @ts-ignore
      const { location } = history;
      // login
      if (!initialState?.currentUser && location.pathname !== loginPath) {
        history.push(loginPath);
      }
    },
    bgLayoutImgList: [],
    links: [],
    menuHeaderRender: undefined,
    //  403
    // unAccessible: <div>unAccessible</div>,
    //  loading
    childrenRender: (children: any) => {
      // if (initialState?.loading) return <PageLoading />;
      const versionMismatch =
        version != initialState?.currentUser?.settings?.server.version;
      return (
        <>
          <AlertNotification />
          {initialState?.currentUser?.settings?.server.version &&
            versionMismatch && (
              <Alert
                style={{ marginTop: 20, marginLeft: 20, marginRight: 20 }}
                message="Version Mismatch"
                description={`The server version (${initialState?.currentUser?.settings?.server.version}) does not match the client version (${version}). You may need to retry a docker compose pull to update SSM.`}
                type="warning"
                showIcon
                banner
              />
            )}
          {initialState?.currentUser?.devices?.overview &&
            initialState?.currentUser?.devices?.overview?.length === 0 && (
              <NoDeviceModal />
            )}
          {children}
        </>
      );
    },
    ...initialState?.settings,
  };
};

[xXAvoraXx]

Hello, I will review your question when I have time.