feat: first level menu external link demo

arco-design-pro-vite/package.json

@@ -10,6 +10,7 @@
     "build": "vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts",
     "report": "cross-env REPORT=true npm run build",
     "preview": "npm run build && vite preview --host",
+    "type:check": "vue-tsc --noEmit --skipLibCheck",
     "lint-staged": "npx lint-staged",
     "prepare": "husky install"
   },

arco-design-pro-vite/src/components/menu/useMenuTree.ts

@@ -1,29 +1,17 @@
 import { computed } from 'vue';
-import { useRouter, RouteRecordRaw, RouteRecordNormalized } from 'vue-router';
+import { RouteRecordRaw, RouteRecordNormalized } from 'vue-router';
 import usePermission from '@/hooks/permission';
 import { useAppStore } from '@/store';
+import appClientMenus from '@/router/appMenus';
 
 export default function useMenuTree() {
-  const router = useRouter();
   const permission = usePermission();
   const appStore = useAppStore();
   const appRoute = computed(() => {
     if (appStore.menuFromServer) {
-      return appStore.appServerMenuConfig;
+      return appStore.appAsyncMenus;
     }
-    return router
-      .getRoutes()
-      .filter((el) => el.meta.requiresAuth && el.meta.order !== undefined)
-      .map((el) => {
-        const { name, path, meta, redirect, children } = el;
-        return {
-          name,
-          path,
-          meta,
-          redirect,
-          children,
-        };
-      });
+    return appClientMenus;
   });
   const menuTree = computed(() => {
     const copyRouter = JSON.parse(JSON.stringify(appRoute.value));

arco-design-pro-vite/src/locale/en-US.ts

@@ -40,6 +40,8 @@ export default {
   'menu.profile': 'Profile',
   'menu.visualization': 'Data Visualization',
   'menu.user': 'User Center',
+  'menu.arcoWebsite': 'Arco Design',
+  'menu.faq': 'FAQ',
   'navbar.docs': 'Docs',
   'navbar.action.locale': 'Switch to English',
   ...localeSettings,

arco-design-pro-vite/src/locale/zh-CN.ts

@@ -40,6 +40,8 @@ export default {
   'menu.profile': '详情页',
   'menu.visualization': '数据可视化',
   'menu.user': '个人中心',
+  'menu.arcoWebsite': 'Arco Design',
+  'menu.faq': '常见问题',
   'navbar.docs': '文档中心',
   'navbar.action.locale': '切换为中文',
   ...localeSettings,

arco-design-pro-vite/src/mock/user.ts

@@ -70,7 +70,7 @@ setupMock({
     Mock.mock(new RegExp('/api/user/menu'), () => {
       const menuList = [
         {
-          path: 'dashboard',
+          path: '/dashboard',
           name: 'dashboard',
           meta: {
             locale: 'menu.server.dashboard',
@@ -96,6 +96,14 @@ setupMock({
                 roles: ['admin'],
               },
             },
+            {
+              path: 'https://arco.design',
+              name: 'arcoWebsite',
+              meta: {
+                locale: 'menu.arcoWebsite',
+                requiresAuth: true,
+              },
+            },
           ],
         },
       ];

arco-design-pro-vite/src/router/appMenus/index.ts

@@ -0,0 +1,16 @@
+import { appRoutes, appExternalRoutes } from '../routes';
+
+const mixinRoutes = [...appRoutes, ...appExternalRoutes];
+
+const appClientMenus = mixinRoutes.map((el) => {
+  const { name, path, meta, redirect, children } = el;
+  return {
+    name,
+    path,
+    meta,
+    redirect,
+    children,
+  };
+});
+
+export default appClientMenus;

arco-design-pro-vite/src/router/guard/permission.ts

@@ -4,7 +4,7 @@ import NProgress from 'nprogress'; // progress bar
 import usePermission from '@/hooks/permission';
 import { useUserStore } from '@/store';
 import { isLogin } from '@/utils/auth';
-import appRoutes from '../routes';
+import { appRoutes } from '../routes';
 
 export default function setupPermissionGuard(router: Router) {
   router.beforeEach(async (to, from, next) => {

arco-design-pro-vite/src/router/guard/serverPermission.ts

@@ -17,7 +17,7 @@ export default function setupServerPermissionGuard(router: Router) {
     // Refine the permission logic from the server's menu configuration as needed
     const appStore = useAppStore();
     if (appStore.menuFromServer) {
-      const serverMenuConfig = [...appStore.appServerMenuConfig, ...whiteList];
+      const serverMenuConfig = [...appStore.appAsyncMenus, ...whiteList];
       let exist = false;
       while (serverMenuConfig.length) {
         const element = serverMenuConfig.shift();

arco-design-pro-vite/src/router/index.ts

@@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 import NProgress from 'nprogress'; // progress bar
 import 'nprogress/nprogress.css';
 
-import appRoutes from './routes';
+import { appRoutes } from './routes';
 import createRouteGuard from './guard';
 
 NProgress.configure({ showSpinner: false }); // NProgress Configuration

arco-design-pro-vite/src/router/routes/externalModules/arco.ts

@@ -0,0 +1,10 @@
+export default {
+  path: 'https://arco.design',
+  name: 'arcoWebsite',
+  meta: {
+    locale: 'menu.arcoWebsite',
+    icon: 'icon-link',
+    requiresAuth: true,
+    order: 8,
+  },
+};

arco-design-pro-vite/src/router/routes/externalModules/faq.ts

@@ -0,0 +1,10 @@
+export default {
+  path: 'https://arco.design/vue/docs/pro/faq',
+  name: 'faq',
+  meta: {
+    locale: 'menu.faq',
+    icon: 'icon-question-circle',
+    requiresAuth: true,
+    order: 9,
+  },
+};

arco-design-pro-vite/src/router/routes/index.ts

@@ -1,15 +1,23 @@
-import type { RouteRecordRaw } from 'vue-router';
+import type { RouteRecordNormalized } from 'vue-router';
 
 const modules = import.meta.globEager('./modules/*.ts');
-const appRoutes: RouteRecordRaw[] = [];
-
-Object.keys(modules).forEach((key) => {
-  const defaultModule = modules[key].default;
-  if (!defaultModule) return;
-  const moduleList = Array.isArray(defaultModule)
-    ? [...defaultModule]
-    : [defaultModule];
-  appRoutes.push(...moduleList);
-});
-
-export default appRoutes;
+const externalModules = import.meta.globEager('./externalModules/*.ts');
+
+function formatModules(_modules: any, result: RouteRecordNormalized[]) {
+  Object.keys(_modules).forEach((key) => {
+    const defaultModule = _modules[key].default;
+    if (!defaultModule) return;
+    const moduleList = Array.isArray(defaultModule)
+      ? [...defaultModule]
+      : [defaultModule];
+    result.push(...moduleList);
+  });
+  return result;
+}
+
+export const appRoutes: RouteRecordNormalized[] = formatModules(modules, []);
+
+export const appExternalRoutes: RouteRecordNormalized[] = formatModules(
+  externalModules,
+  []
+);

arco-design-pro-vite/src/store/modules/app/index.ts

@@ -16,7 +16,7 @@ const useAppStore = defineStore('app', {
     appDevice(state: AppState) {
       return state.device;
     },
-    appServerMenuConfig(state: AppState): RouteRecordNormalized[] {
+    appAsyncMenus(state: AppState): RouteRecordNormalized[] {
       return state.serverMenu as unknown as RouteRecordNormalized[];
     },
   },