feat: add backend dynamic router permission code (#394)

* chore: 大致雏形

* feat: complete permission code

* feat: 修复渲染问题并完善权限代码

* chore: release 0.7.0

* chore: 更新依赖

* chore: fix echarts version

* feat: upgrade dependencies

* chore: mock route map

* chore: hash router

* chore: concat fixed routers

* chore: fix dependencies

* feat: optimize

* chore: remove roles from get menu process

* chore: remain fe permssion code

Co-authored-by: 悠静萝莉 <i@mikuhl.cn>

Author: uyarn

.env

@@ -1,2 +1,2 @@
 # 打包路径 根据项目不同按需配置
-VITE_BASE_URL = /
+VITE_BASE_URL = /

.env.site

@@ -1,2 +1,2 @@
 # 打包路径 根据项目不同按需配置
-VITE_BASE_URL = https://static.tdesign.tencent.com/starter/vue-next/
+VITE_BASE_URL = https://static.tdesign.tencent.com/starter/vue-next/

mock/index.ts

@@ -144,4 +144,174 @@ export default [
       },
     },
   },
+  {
+    url: '/api/get-menu-list',
+    method: 'get',
+    timeout: 2000,
+    response: {
+      code: 0,
+      data: {
+        ...Mock.mock({
+          list: [
+            {
+              path: '/list',
+              name: 'list',
+              component: 'LAYOUT',
+              redirect: '/list/base',
+              meta: {
+                title: '列表页',
+                icon: 'view-list',
+              },
+              children: [
+                {
+                  path: 'base',
+                  name: 'ListBase',
+                  component: '/list/base/index',
+                  meta: {
+                    title: '基础列表页',
+                  },
+                },
+                {
+                  path: 'card',
+                  name: 'ListCard',
+                  component: '/list/card/index',
+                  meta: {
+                    title: '卡片列表页',
+                  },
+                },
+                {
+                  path: 'filter',
+                  name: 'ListFilter',
+                  component: '/list/filter/index',
+                  meta: {
+                    title: '筛选列表页',
+                  },
+                },
+                {
+                  path: 'tree',
+                  name: 'ListTree',
+                  component: '/list/tree/index',
+                  meta: {
+                    title: '树状筛选列表页',
+                  },
+                },
+              ],
+            },
+            {
+              path: '/form',
+              name: 'form',
+              component: 'LAYOUT',
+              redirect: '/form/base',
+              meta: {
+                title: '表单页',
+                icon: 'edit-1',
+              },
+              children: [
+                {
+                  path: 'base',
+                  name: 'FormBase',
+                  component: '/form/base/index',
+                  meta: {
+                    title: '基础表单页',
+                  },
+                },
+                {
+                  path: 'step',
+                  name: 'FormStep',
+                  component: '/form/step/index',
+                  meta: {
+                    title: '分步表单页',
+                  },
+                },
+              ],
+            },
+            {
+              path: '/detail',
+              name: 'detail',
+              component: 'LAYOUT',
+              redirect: '/detail/base',
+              meta: {
+                title: '详情页',
+                icon: 'layers',
+              },
+              children: [
+                {
+                  path: 'base',
+                  name: 'DetailBase',
+                  component: '/detail/base/index',
+                  meta: {
+                    title: '基础详情页',
+                  },
+                },
+                {
+                  path: 'advanced',
+                  name: 'DetailAdvanced',
+                  component: '/detail/advanced/index',
+                  meta: {
+                    title: '多卡片详情页',
+                  },
+                },
+                {
+                  path: 'deploy',
+                  name: 'DetailDeploy',
+                  component: '/detail/deploy/index',
+                  meta: {
+                    title: '数据详情页',
+                  },
+                },
+                {
+                  path: 'secondary',
+                  name: 'DetailSecondary',
+                  component: '/detail/secondary/index',
+                  meta: {
+                    title: '二级详情页',
+                  },
+                },
+              ],
+            },
+            {
+              path: '/frame',
+              name: 'Frame',
+              component: 'Layout',
+              redirect: '/frame/doc',
+              meta: {
+                icon: 'internet',
+                title: '外部页面',
+              },
+              children: [
+                {
+                  path: 'doc',
+                  name: 'Doc',
+                  component: 'IFrame',
+                  meta: {
+                    frameSrc: 'https://tdesign.tencent.com/starter/docs/vue-next/get-started',
+                    title: '使用文档（内嵌）',
+                  },
+                },
+                {
+                  path: 'TDesign',
+                  name: 'TDesign',
+                  component: 'IFrame',
+                  meta: {
+                    frameSrc: 'https://tdesign.tencent.com/vue-next/getting-started',
+                    title: 'TDesign 文档（内嵌）',
+                  },
+                },
+                {
+                  path: 'TDesign2',
+                  name: 'TDesign2',
+                  component: 'IFrame',
+                  meta: {
+                    frameSrc: 'https://tdesign.tencent.com/vue-next/getting-started',
+                    frameBlank: true,
+                    title: 'TDesign 文档（外链）',
+                  },
+                },
+              ],
+            },
+          ],
+        }),
+      },
+    },
+  },
 ] as MockMethod[];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tdesign-vue-next-starter",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "scripts": {
     "dev:mock": "vite --open --mode mock",
     "dev": "vite --open --mode development",
@@ -19,58 +19,59 @@
     "test:coverage": "echo \"no test:coverage specified,work in process\""
   },
   "dependencies": {
-    "axios": "^1.1.3",
-    "dayjs": "^1.10.6",
-    "echarts": "~5.1.2",
+    "@types/nprogress": "^0.2.0",
+    "axios": "^1.2.2",
+    "dayjs": "^1.11.7",
+    "echarts": "5.1.2",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.11",
-    "pinia-plugin-persistedstate": "^3.0.1",
-    "qrcode.vue": "^3.2.2",
-    "qs": "^6.10.5",
+    "pinia": "^2.0.28",
+    "pinia-plugin-persistedstate": "^3.0.2",
+    "qrcode.vue": "^3.3.3",
+    "qs": "^6.11.0",
     "tdesign-icons-vue-next": "^0.1.7",
     "tdesign-vue-next": "^1.0.0",
     "tvision-color": "^1.5.0",
-    "vue": "^3.2.31",
+    "vue": "^3.2.45",
     "vue-clipboard3": "^2.0.0",
-    "vue-router": "~4.1.5"
+    "vue-router": "~4.1.6"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.0.3",
-    "@commitlint/config-conventional": "^17.0.3",
-    "@types/echarts": "^4.9.10",
-    "@types/lodash": "^4.14.182",
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
+    "@types/echarts": "^4.9.16",
+    "@types/lodash": "^4.14.191",
     "@types/qs": "^6.9.7",
-    "@types/ws": "^8.2.2",
-    "@typescript-eslint/eslint-plugin": "^4.29.3",
-    "@typescript-eslint/parser": "^4.29.3",
-    "@vitejs/plugin-vue": "^2.3.1",
+    "@types/ws": "^8.5.3",
+    "@typescript-eslint/eslint-plugin": "^5.47.1",
+    "@typescript-eslint/parser": "^5.47.1",
+    "@vitejs/plugin-vue": "^3.2.0",
     "@vitejs/plugin-vue-jsx": "^1.1.7",
-    "@vue/compiler-sfc": "^3.0.5",
-    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/compiler-sfc": "^3.2.45",
+    "@vue/eslint-config-typescript": "^11.0.2",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.30.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^9.2.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.8.0",
     "eslint-plugin-vue-scoped-css": "^2.2.0",
-    "husky": "^7.0.4",
-    "less": "^4.1.1",
-    "lint-staged": "^12.1.2",
+    "husky": "^8.0.2",
+    "less": "^4.1.3",
+    "lint-staged": "^13.1.0",
     "mockjs": "^1.1.0",
-    "prettier": "^2.4.1",
-    "stylelint": "~13.13.1",
-    "stylelint-config-prettier": "~9.0.3",
-    "stylelint-less": "1.0.1",
-    "stylelint-order": "~4.1.0",
-    "typescript": "~4.8.4",
-    "vite": "^2.7.1",
+    "prettier": "^2.8.1",
+    "stylelint": "~14.9.1",
+    "stylelint-config-prettier": "~9.0.4",
+    "stylelint-less": "1.0.6",
+    "stylelint-order": "~6.0.1",
+    "typescript": "~4.9.4",
+    "vite": "^3.0.3",
     "vite-plugin-mock": "^2.9.6",
-    "vite-svg-loader": "^3.1.0",
-    "vue-tsc": "^1.0.8"
+    "vite-svg-loader": "^4.0.0",
+    "vue-tsc": "^1.0.19"
   },
   "config": {
     "commitizen": {

src/api/model/permissionModel.ts

@@ -0,0 +1,29 @@
+import { defineComponent } from 'vue';
+
+export interface MenuListResult {
+  list: Array<RouteItem>;
+}
+
+export type Component<T = any> =
+  | ReturnType<typeof defineComponent>
+  | (() => Promise<typeof import('*.vue')>)
+  | (() => Promise<T>);
+
+export interface RouteItem {
+  path: string;
+  name: string;
+  component?: Component | string;
+  components?: Component;
+  redirect?: string;
+  meta: RouteMeta;
+  children?: Array<RouteItem>;
+}
+export interface RouteMeta {
+  title: string;
+  icon?: string;
+  expanded?: boolean;
+  orderNo?: number;
+  hidden?: boolean;
+  hiddenBreadcrumb?: boolean;
+  single?: boolean;
+}

src/api/permission.ts

@@ -0,0 +1,12 @@
+import { request } from '@/utils/request';
+import type { MenuListResult } from '@/api/model/permissionModel';
+
+const Api = {
+  MenuList: '/get-menu-list',
+};
+
+export function getMenuList() {
+  return request.get<MenuListResult>({
+    url: Api.MenuList,
+  });
+}

src/constants/index.ts

@@ -40,3 +40,10 @@ export const NOTIFICATION_TYPES = {
   middle: 'warning',
   high: 'danger',
 };
+
+// 通用请求头
+export enum ContentTypeEnum {
+  Json = 'application/json;charset=UTF-8',
+  FormURLEncoded = 'application/x-www-form-urlencoded;charset=UTF-8',
+  FormData = 'multipart/form-data;charset=UTF-8',
+}