initial commit

src/router/menus/index.ts

@@ -0,0 +1,99 @@
+import type { Menu } from '/@/router/types';
+import type { RouteRecordNormalized } from 'vue-router';
+import { appStore } from '/@/store/modules/app';
+import { permissionStore } from '/@/store/modules/permission';
+import { transformMenuModule, flatMenus, getAllParentPath } from '/@/utils/helper/menuHelper';
+import { filter } from '/@/utils/helper/treeHelper';
+import router from '/@/router';
+import { PermissionModeEnum } from '/@/enums/appEnum';
+
+// ===========================
+// ==========module import====
+// ===========================
+import dashboardDemo from './modules/demo/dashboard';
+import exceptionDemo from './modules/demo/exception';
+import iframeDemo from './modules/demo/iframe';
+import compDemo from './modules/demo/comp';
+import permissionDemo from './modules/demo/permission';
+import featDemo from './modules/demo/feat';
+
+const menuModules = [dashboardDemo, featDemo, exceptionDemo, iframeDemo, compDemo, permissionDemo];
+
+// ===========================
+// ==========Helper===========
+// ===========================
+
+const staticMenus: Menu[] = [];
+(() => {
+  menuModules.sort((a, b) => {
+    return (a.orderNo || 0) - (b.orderNo || 0);
+  });
+  for (const menu of menuModules) {
+    staticMenus.push(transformMenuModule(menu));
+  }
+})();
+
+const isBackMode = () => {
+  return appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK;
+};
+
+async function getAsyncMenus() {
+  // 前端角色控制菜单 直接取菜单文件
+  if (!isBackMode()) {
+    return staticMenus;
+  }
+  return permissionStore.getBackMenuListState;
+}
+
+// 获取深层扁平化菜单
+export const getFlatMenus = async () => {
+  const menus = await getAsyncMenus();
+
+  return flatMenus(menus);
+};
+
+// 获取菜单 树级
+export const getMenus = async () => {
+  const menus = await getAsyncMenus();
+  const routes = router.getRoutes();
+  return !isBackMode() ? filter(menus, basicFilter(routes)) : menus;
+};
+
+// 获取当前路径的顶级路径
+export async function getCurrentParentPath(currentPath: string) {
+  const menus = await getAsyncMenus();
+  const allParentPath = await getAllParentPath(menus, currentPath);
+  return allParentPath[0];
+}
+
+// 获取1级菜单，删除children
+export async function getShallowMenus() {
+  const menus = await getAsyncMenus();
+  const routes = router.getRoutes();
+  const shallowMenuList = menus.map((item) => ({ ...item, children: undefined }));
+  return !isBackMode() ? shallowMenuList.filter(basicFilter(routes)) : shallowMenuList;
+}
+
+// 获取菜单的children
+export async function getChildrenMenus(parentPath: string) {
+  const menus = await getAsyncMenus();
+  const parent = menus.find((item) => item.path === parentPath);
+  if (!parent) return [] as Menu[];
+  return parent.children;
+}
+
+// 扁平化children
+export async function getFlatChildrenMenus(children: Menu[]) {
+  return flatMenus(children);
+}
+
+// 通用过滤方法
+function basicFilter(routes: RouteRecordNormalized[]) {
+  return (menu: Menu) => {
+    const matchRoute = routes.find((route) => route.path === menu.path);
+    if (!matchRoute) return false;
+    menu.icon = menu.icon || matchRoute.meta.icon;
+    menu.meta = matchRoute.meta;
+    return true;
+  };
+}

src/router/menus/modules/demo/comp.ts

@@ -0,0 +1,127 @@
+import type { MenuModule } from '/@/router/types.d';
+const menu: MenuModule = {
+  orderNo: 30,
+  menu: {
+    name: '组件',
+    path: '/comp',
+    children: [
+      {
+        path: '/basic',
+        name: '基础组件',
+      },
+      {
+        path: '/icon',
+        name: '图标',
+      },
+      {
+        path: '/click-out-side',
+        name: 'ClickOutSide组件',
+      },
+      {
+        path: '/form',
+        name: '表单组件',
+        children: [
+          {
+            path: '/basic',
+            name: '基础表单',
+          },
+          {
+            path: '/useForm',
+            name: 'useForm',
+          },
+          {
+            path: '/refForm',
+            name: 'RefForm',
+          },
+          {
+            path: '/advancedForm',
+            name: '可收缩表单',
+          },
+          {
+            path: '/ruleForm',
+            name: '表单校验',
+          },
+          {
+            path: '/dynamicForm',
+            name: '动态表单',
+          },
+          {
+            path: '/customerForm',
+            name: '自定义组件',
+          },
+        ],
+      },
+      {
+        path: '/tree',
+        name: '树组件',
+        children: [
+          {
+            path: 'basic',
+            name: '基础示例',
+          },
+          {
+            path: 'editTree',
+            name: '右键示例',
+          },
+          {
+            path: 'actionTree',
+            name: '函数操作示例',
+          },
+        ],
+      },
+      {
+        path: '/scroll',
+        name: '滚动组件',
+        children: [
+          {
+            path: 'basic',
+            name: '基础示例',
+          },
+          {
+            path: 'action',
+            name: '函数操作示例',
+          },
+          {
+            path: 'virtualScroll',
+            name: '虚拟滚动',
+          },
+        ],
+      },
+      {
+        path: '/modal',
+        name: '弹窗扩展',
+      },
+      {
+        path: '/drawer',
+        name: '抽屉扩展',
+      },
+      {
+        path: '/desc',
+        name: '详情组件',
+      },
+      {
+        path: '/verify',
+        name: '验证组件',
+        children: [
+          {
+            path: '/drag',
+            name: '拖拽校验',
+          },
+          {
+            path: '/rotate',
+            name: '图片还原校验',
+          },
+        ],
+      },
+      {
+        path: '/qrcode',
+        name: '二维码组件',
+      },
+      {
+        path: '/strength-meter',
+        name: '密码强度组件',
+      },
+    ],
+  },
+};
+export default menu;

src/router/menus/modules/demo/dashboard.ts

@@ -0,0 +1,15 @@
+import type { MenuModule } from '/@/router/types.d';
+const menu: MenuModule = {
+  orderNo: 10,
+  menu: {
+    name: 'Dashboard',
+    path: '/dashboard',
+    children: [
+      {
+        path: '/welcome',
+        name: '欢迎页',
+      },
+    ],
+  },
+};
+export default menu;

src/router/menus/modules/demo/exception.ts

@@ -0,0 +1,31 @@
+import type { MenuModule } from '/@/router/types.d';
+const menu: MenuModule = {
+  orderNo: 500,
+  menu: {
+    name: '异常页',
+    path: '/exception',
+    children: [
+      {
+        path: '/404',
+        name: '404',
+      },
+      {
+        path: '/500',
+        name: '500',
+      },
+      {
+        path: '/net-work-error',
+        name: '网络错误',
+      },
+      {
+        path: '/page-time-out',
+        name: '页面超时',
+      },
+      {
+        path: '/not-data',
+        name: '无数据',
+      },
+    ],
+  },
+};
+export default menu;

src/router/menus/modules/demo/feat.ts

@@ -0,0 +1,43 @@
+import type { MenuModule } from '/@/router/types.d';
+const menu: MenuModule = {
+  orderNo: 10,
+  menu: {
+    name: '页面功能',
+    path: '/feat',
+    children: [
+      {
+        path: '/tabs',
+        name: '标签页操作',
+      },
+      {
+        path: '/context-menu',
+        name: '右键菜单',
+      },
+      // {
+      //   path: '/img-preview',
+      //   name: '图片预览',
+      // },
+      {
+        path: '/i18n',
+        name: '国际化',
+      },
+      {
+        path: '/copy',
+        name: '剪切板',
+      },
+      {
+        path: '/msg',
+        name: '消息提示',
+      },
+      {
+        path: '/watermark',
+        name: '水印',
+      },
+      {
+        path: '/full-screen',
+        name: '全屏',
+      },
+    ],
+  },
+};
+export default menu;

src/router/menus/modules/demo/iframe.ts

@@ -0,0 +1,23 @@
+import type { MenuModule } from '/@/router/types.d';
+const menu: MenuModule = {
+  orderNo: 1000,
+  menu: {
+    name: '外部页面',
+    path: '/frame',
+    children: [
+      {
+        path: '/antv',
+        name: 'antVue文档(内嵌)',
+      },
+      {
+        path: '/doc',
+        name: '项目文档(内嵌)',
+      },
+      {
+        path: '/docExternal',
+        name: '项目文档(外链)',
+      },
+    ],
+  },
+};
+export default menu;

src/router/menus/modules/demo/permission.ts

@@ -0,0 +1,47 @@
+import type { MenuModule } from '/@/router/types.d';
+const menu: MenuModule = {
+  orderNo: 20,
+  menu: {
+    name: '权限管理',
+    path: '/permission',
+    children: [
+      {
+        path: '/front',
+        name: '基于前端',
+        children: [
+          {
+            path: '/page',
+            name: '页面权限',
+          },
+          {
+            path: '/btn',
+            name: '按钮权限',
+          },
+          {
+            path: '/auth-pageA',
+            name: '权限测试页A',
+          },
+          {
+            path: '/auth-pageB',
+            name: '权限测试页B',
+          },
+        ],
+      },
+      {
+        path: '/back',
+        name: '基于后台',
+        children: [
+          {
+            path: '/page',
+            name: '页面权限',
+          },
+          {
+            path: '/btn',
+            name: '按钮权限',
+          },
+        ],
+      },
+    ],
+  },
+};
+export default menu;