feat(ui): 新增api.addUiMenu

packages/preset-umi/src/features/ui/ui.ts

@@ -1,7 +1,7 @@
 import { isLocalDev } from '@umijs/utils';
 import fs from 'fs';
 import path from 'path';
-import { IApi } from '../../types';
+import { IApi, IUIModule } from '../../types';
 // @ts-ignore
 import sirv from '../../../compiled/sirv';
 
@@ -88,6 +88,20 @@ export default (api: IApi) => {
     ];
   });
 
+  api.modifyAppData(async (memo) => {
+    const uiModules: IUIModule =
+      (await api.applyPlugins({
+        key: 'addUIModules',
+        initialValue: [],
+      })) ?? [];
+    Object.assign(memo, {
+      ui: {
+        modules: uiModules,
+      },
+    });
+    return memo;
+  });
+
   api.onGenerateFiles(({ isFirstTime }) => {
     if (!isFirstTime) return;
     api.writeTmpFile({
@@ -111,7 +125,6 @@ uiBtn.addEventListener('click', () => {
       `,
     });
   });
-
   api.addEntryImports(() => {
     return [{ source: '@@/core/ui' }];
   });

packages/preset-umi/src/registerMethods.ts

@@ -43,6 +43,7 @@ export default (api: IApi) => {
     'addHTMLScripts',
     'addTmpGenerateWatcherPaths',
     'addOnDemandDeps',
+    'addUIModules',
     'chainWebpack',
     'modifyEntry',
     'modifyHTMLFavicon',
@@ -122,7 +123,6 @@ export default (api: IApi) => {
         const transformIEAR = transformModule.default;
         content = transformIEAR({ content, path: absPath }, api);
       }
-
       if (!existsSync(absPath)) {
         writeFileSync(absPath, content!, 'utf-8');
       } else {

packages/preset-umi/src/types.ts

@@ -81,6 +81,17 @@ export interface IOnGenerateFiles {
   files?: IFileInfo | null;
   isFirstTime?: boolean;
 }
+export interface IUIMenu {
+  path: string;
+  url: string;
+  icon: string;
+  name: string;
+}
+export interface IUIModule {
+  name: string;
+  menus?: IUIMenu[];
+  [key: string]: any;
+}
 export type GenerateFilesFn = (opts: IOnGenerateFiles) => Promise<void>;
 export type OnConfigChangeFn = (opts: {
   generate: GenerateFilesFn;
@@ -111,6 +122,7 @@ export type IApi = PluginAPI &
     addRuntimePlugin: IAdd<null, string>;
     addRuntimePluginKey: IAdd<null, string>;
     addTmpGenerateWatcherPaths: IAdd<null, string>;
+    addUIModules: IAdd<null, IUIModule[]>;
     chainWebpack: {
       (fn: {
         (

ui/app.ts → ui/app.tsx

@@ -1,3 +1,5 @@
+import { PluginContainer } from '@/components/PluginContainer';
+import { IAppData } from '@/hooks/useAppData';
 import { globalCSS } from '@/utils/globalCSS';
 import { createGlobalStyle } from 'umi';
 
@@ -39,3 +41,21 @@ export const reactQuery = {
     },
   },
 };
+
+export async function patchClientRoutes({ routes }) {
+  const {
+    ui: { modules = [] },
+  } = (await fetch('/__umi/api/app-data').then(
+    (res) => res.json() as Promise<IAppData>,
+  )) ?? {
+    ui: {},
+  };
+  const uiMenusAdded = modules.map((module) => module.menus || []).flat();
+
+  routes[0].routes?.unshift(
+    ...uiMenusAdded.map((menu: any) => ({
+      path: menu.path,
+      element: <PluginContainer url={menu.url} name={menu.name} />,
+    })),
+  );
+}

ui/components/Menu.tsx

@@ -1,3 +1,4 @@
+import { useAppData } from '@/hooks/useAppData';
 import { state as globalState } from '@/models/global';
 import { Icon, NavLink, styled, useSnapshot } from 'umi';
 
@@ -23,10 +24,15 @@ const Wrapper = styled.div`
 `;
 
 export function Menu() {
+  const {
+    ui: { modules = [] },
+  } = useAppData().data || { ui: {} };
   const { menus } = useSnapshot(globalState);
+  const uiMenusAdded = modules.map((module) => module.menus || []).flat();
+
   return (
     <Wrapper>
-      {menus.map((menu) => (
+      {menus.concat(uiMenusAdded).map((menu) => (
         <div key={menu.name}>
           <NavLink
             to={menu.path}

ui/components/PluginContainer.tsx

@@ -0,0 +1,3 @@
+export const PluginContainer = (props: { url: string; name: string }) => {
+  return <iframe style={{ width: '100%', height: '100%' }} src={props.url} />;
+};

ui/hooks/useAppData.ts

@@ -103,6 +103,18 @@ export interface IAppData {
   prepare: {
     buildResult: BuildResult;
   };
+  ui: {
+    modules: {
+      name: string;
+      menus?: {
+        path: string;
+        url: string;
+        icon: string;
+        name: string;
+      }[];
+      [key: string]: any;
+    }[];
+  };
 }
 
 export function useAppData() {