creat

Signed-off-by: TIANHE <TIANHE@GMAIL.COM>
2025-12-29 03:06:49 +08:00
commit f43312a858
292 changed files with 103739 additions and 0 deletions
@@ -0,0 +1,134 @@
+路由/菜单说明
+====
+
+
+格式和说明
+----
+
+```ecmascript 6
+const routerObject = {
+  redirect: noredirect,
+  name: 'router-name',
+  hidden: true,
+  meta: {
+    title: 'title',
+    icon: 'a-icon',
+    target: '_blank|_self|_top|_parent',
+    keepAlive: true,
+    hiddenHeaderContent: true,
+  }
+}
+```
+
+
+
+`{ Route }` 对象
+
+| 参数     | 说明                                      | 类型    | 默认值 |
+| -------- | ----------------------------------------- | ------- | ------ |
+| hidden   | 控制路由是否显示在 sidebar                | boolean | false |
+| redirect | 重定向地址, 访问这个路由时,自定进行重定向 | string  | -      |
+| name     | 路由名称, 必须设置,且不能重名           | string  | -      |
+| meta     | 路由元信息（路由附带扩展信息）            | object  | {}     |
+| hideChildrenInMenu | 强制菜单显示为Item而不是SubItem(配合 meta.hidden) | boolean  | -   |
+
+
+`{ Meta }` 路由元信息对象
+
+| 参数                | 说明                                                         | 类型    | 默认值 |
+| ------------------- | ------------------------------------------------------------ | ------- | ------ |
+| title               | 路由标题, 用于显示面包屑, 页面标题 *推荐设置                 | string  | -      |
+| icon                | 路由在 menu 上显示的图标                                     | [string,svg]  | -      |
+| keepAlive           | 缓存该路由                                                   | boolean | false  |
+| target              | 菜单链接跳转目标（参考 html a 标记）                          | string | -  |
+| hidden              | 配合`hideChildrenInMenu`使用，用于隐藏菜单时，提供递归到父菜单显示 选中菜单项_（可参考 个人页 配置方式）_ | boolean | false  |
+| hiddenHeaderContent | *特殊 隐藏 [PageHeader](https://github.com/vueComponent/ant-design-vue-pro/blob/master/src/components/PageHeader/PageHeader.vue#L6) 组件中的页面带的 面包屑和页面标题栏 | boolean | false  |
+| permission          | 与项目提供的权限拦截匹配的权限，如果不匹配，则会被禁止访问该路由页面 | array   | []     |
+
+> 路由自定义 `Icon` 请引入自定义 `svg` Icon 文件，然后传递给路由的 `meta.icon` 参数即可
+
+路由构建例子方案1
+
+路由例子
+----
+
+```ecmascript 6
+const asyncRouterMap = [
+  {
+    path: '/',
+    name: 'index',
+    component: BasicLayout,
+    meta: { title: '首页' },
+    redirect: '/ai-analysis',
+    children: [
+      {
+        path: '/dashboard',
+        component: RouteView,
+        name: 'dashboard',
+        redirect: '/dashboard/workplace',
+        meta: {title: '仪表盘', icon: 'dashboard', permission: ['dashboard']},
+        children: [
+          {
+            path: '/ai-analysis',
+            name: 'Analysis',
+            component: () => import('@/views/dashboard/Analysis'),
+            meta: {title: '分析页', permission: ['dashboard']}
+          },
+          {
+            path: '/dashboard/monitor',
+            name: 'Monitor',
+            hidden: true,
+            component: () => import('@/views/dashboard/Monitor'),
+            meta: {title: '监控页', permission: ['dashboard']}
+          },
+          {
+            path: '/dashboard/workplace',
+            name: 'Workplace',
+            component: () => import('@/views/dashboard/Workplace'),
+            meta: {title: '工作台', permission: ['dashboard']}
+          }
+        ]
+      },
+
+      // result
+      {
+        path: '/result',
+        name: 'result',
+        component: PageView,
+        redirect: '/result/success',
+        meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
+        children: [
+          {
+            path: '/result/success',
+            name: 'ResultSuccess',
+            component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
+            // 该页面隐藏面包屑和页面标题栏
+            meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
+          },
+          {
+            path: '/result/fail',
+            name: 'ResultFail',
+            component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
+            // 该页面隐藏面包屑和页面标题栏
+            meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] }
+          }
+        ]
+      },
+      ...
+    ]
+  },
+]
+```
+
+> 1. 请注意 `component: () => import('..') ` 方式引入路由的页面组件为 懒加载模式。具体可以看 [Vue 官方文档](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)
+> 2. 增加新的路由应该增加在 '/' (index) 路由的 `children` 内
+> 3. 子路由的父级路由必须有 `router-view` 才能让子路由渲染出来，请仔细查阅 vue-router 文档
+> 4. `permission` 可以进行自定义修改，只需要对这个模块进行自定义修改即可 [src/store/modules/permission.js#L10](https://github.com/vueComponent/ant-design-vue-pro/blob/master/src/store/modules/permission.js#L10)
+
+
+附权限路由结构：
+
+![权限结构](https://static-2.loacg.com/open/static/github/permissions.png)
+
+
+第二种前端路由由后端动态生成的设计，可以前往官网文档 https://pro.antdv.com/docs/authority-management 参考
@@ -0,0 +1,9 @@
+import { asyncRouterMap } from '@/config/router.config'
+
+/**
+ * Local-only mode: generate routes from frontend static config.
+ * This removes dependency on legacy PHP `/user/nav`.
+ */
+export const generatorDynamicRouter = token => {
+  return Promise.resolve(asyncRouterMap)
+}
@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import { constantRouterMap } from '@/config/router.config'
+
+// hack router push callback
+const originalPush = Router.prototype.push
+Router.prototype.push = function push (location, onResolve, onReject) {
+  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
+  return originalPush.call(this, location).catch(err => err)
+}
+
+Vue.use(Router)
+
+const createRouter = () =>
+  new Router({
+    mode: 'hash',
+    routes: constantRouterMap
+  })
+
+const router = createRouter()
+
+// 定义一个resetRouter 方法，在退出登录后或token过期后 需要重新登录时，调用即可
+export function resetRouter () {
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher
+}
+
+export default router