perf: update

src/api/routes.ts

@@ -0,0 +1,5 @@
+import { http } from "/@/utils/http";
+
+export const getAsyncRoutes = (data?: object) => {
+  return http.request("get", "/getAsyncRoutes", data);
+};

src/main.ts

@@ -4,6 +4,7 @@ import { setupStore } from "/@/store";
 import { getServerConfig } from "./config";
 import { createApp, Directive } from "vue";
 import { usI18n } from "../src/plugins/i18n";
+import { useTable } from "../src/plugins/vxe-table";
 import { useElementPlus } from "../src/plugins/element-plus";
 import { injectResponsiveStorage } from "/@/utils/storage/responsive";
 
@@ -25,7 +26,7 @@ Object.keys(directives).forEach(key => {
 getServerConfig(app).then(async config => {
   injectResponsiveStorage(app, config);
   setupStore(app);
-  app.use(router).use(useElementPlus).use(usI18n);
+  app.use(router).use(useElementPlus).use(useTable).use(usI18n);
   await router.isReady();
   app.mount("#app");
 });

src/plugins/i18n/config.ts

@@ -2,22 +2,79 @@
 import enLocale from "element-plus/lib/locale/lang/en";
 import zhLocale from "element-plus/lib/locale/lang/zh-cn";
 
+// 导航菜单配置
 // 导航菜单配置
 export const menusConfig = {
   zh: {
     message: {
       hshome: "首页",
+      hssysManagement: "系统管理",
+      hsBaseinfo: "基础信息",
+      hsDict: "字典管理",
+      hseditor: "编辑器",
       hserror: "错误页面",
       hsfourZeroFour: "404",
-      hsfourZeroOne: "401"
+      hsfourZeroOne: "401",
+      hscomponents: "组件",
+      hsvideo: "视频组件",
+      hsmap: "地图组件",
+      hsdraggable: "拖拽组件",
+      hssplitPane: "切割面板",
+      hsbutton: "按钮组件",
+      hscropping: "图片裁剪",
+      hscountTo: "数字动画",
+      hsselector: "选择器组件",
+      hsflowChart: "流程图",
+      hsseamless: "无缝滚动",
+      hscontextmenu: "右键菜单",
+      hsmenus: "多级菜单",
+      hsmenu1: "菜单1",
+      "hsmenu1-1": "菜单1-1",
+      "hsmenu1-2": "菜单1-2",
+      "hsmenu1-2-1": "菜单1-2-1",
+      "hsmenu1-2-2": "菜单1-2-2",
+      "hsmenu1-3": "菜单1-3",
+      hsmenu2: "菜单2",
+      permission: "权限管理",
+      permissionPage: "页面权限",
+      permissionButton: "按钮权限",
+      externalLink: "外链"
     }
   },
   en: {
     message: {
       hshome: "Home",
+      hssysManagement: "System Manage",
+      hsBaseinfo: "Base Info",
+      hsDict: "Dict Manage",
+      hseditor: "Editor",
       hserror: "Error Page",
       hsfourZeroFour: "404",
-      hsfourZeroOne: "401"
+      hsfourZeroOne: "401",
+      hscomponents: "Components",
+      hsvideo: "Video Components",
+      hsmap: "Map Components",
+      hsdraggable: "Draggable Components",
+      hssplitPane: "Split Pane",
+      hsbutton: "Button Components",
+      hscropping: "Picture Cropping",
+      hscountTo: "Digital Animation",
+      hsselector: "Selector Components",
+      hsflowChart: "Flow Chart",
+      hsseamless: "Seamless Scroll",
+      hscontextmenu: "Context Menu",
+      hsmenus: "MultiLevel Menu",
+      hsmenu1: "Menu1",
+      "hsmenu1-1": "Menu1-1",
+      "hsmenu1-2": "Menu1-2",
+      "hsmenu1-2-1": "Menu1-2-1",
+      "hsmenu1-2-2": "Menu1-2-2",
+      "hsmenu1-3": "Menu1-3",
+      hsmenu2: "Menu2",
+      permission: "Permission Manage",
+      permissionPage: "Page Permission",
+      permissionButton: "Button Permission",
+      externalLink: "External Link"
     }
   }
 };

src/plugins/vxe-table/index.ts

@@ -0,0 +1,119 @@
+import "xe-utils";
+import { App } from "vue";
+import { i18n } from "../i18n/index";
+import "font-awesome/css/font-awesome.css";
+import {
+  // 核心
+  VXETable,
+
+  // 表格功能
+  Header,
+  Footer,
+  Icon,
+  Filter,
+  Edit,
+  Menu,
+  Export,
+  Keyboard,
+  Validator,
+
+  // 可选组件
+  Column,
+  Colgroup,
+  Grid,
+  Tooltip,
+  Toolbar,
+  Pager,
+  Form,
+  FormItem,
+  FormGather,
+  Checkbox,
+  CheckboxGroup,
+  Radio,
+  RadioGroup,
+  RadioButton,
+  Switch,
+  Input,
+  Select,
+  Optgroup,
+  Option,
+  Textarea,
+  Button,
+  Modal,
+  List,
+  Pulldown,
+
+  // 表格
+  Table
+} from "vxe-table";
+
+// 全局默认参数
+VXETable.setup({
+  size: "medium",
+  version: 0,
+  zIndex: 100,
+  table: {
+    // 自动监听父元素的变化去重新计算表格
+    autoResize: true,
+    // 鼠标移到行是否要高亮显示
+    highlightHoverRow: true
+  },
+  input: {
+    clearable: true
+  },
+  // 对组件内置的提示语进行国际化翻译
+  // @ts-ignore
+  i18n: (key, args) => i18n.global.t(key, args),
+  // 可选，对参数中的列头、校验提示..等进行自动翻译（只对支持国际化的有效）
+  translate(key, args) {
+    // 例如，只翻译 "message." 开头的键值
+    if (key && key.indexOf("message.") > -1) {
+      return i18n.global.t(key, args);
+    }
+    if (key && key.indexOf("el.") > -1) {
+      return i18n.global.t(key, args);
+    }
+    return key;
+  }
+});
+
+export function useTable(app: App) {
+  app
+    .use(Header)
+    .use(Footer)
+    .use(Icon)
+    .use(Filter)
+    .use(Edit)
+    .use(Menu)
+    .use(Export)
+    .use(Keyboard)
+    .use(Validator)
+
+    // 可选组件
+    .use(Column)
+    .use(Colgroup)
+    .use(Grid)
+    .use(Tooltip)
+    .use(Toolbar)
+    .use(Pager)
+    .use(Form)
+    .use(FormItem)
+    .use(FormGather)
+    .use(Checkbox)
+    .use(CheckboxGroup)
+    .use(Radio)
+    .use(RadioGroup)
+    .use(RadioButton)
+    .use(Switch)
+    .use(Input)
+    .use(Select)
+    .use(Optgroup)
+    .use(Option)
+    .use(Textarea)
+    .use(Button)
+    .use(Modal)
+    .use(List)
+    .use(Pulldown)
+    // 安装表格
+    .use(Table);
+}

src/router/index.ts

@@ -17,6 +17,7 @@ import { usePermissionStoreHook } from "/@/store/modules/permission";
 import homeRouter from "./modules/home";
 import Layout from "/@/layout/index.vue";
 import errorRouter from "./modules/error";
+import remainingRouter from "./modules/remaining";
 // 动态路由
 import { getAsyncRoutes } from "/@/api/routes";
 
@@ -33,8 +34,9 @@ export const ascending = arr => {
 };
 
 // 将所有静态路由导出
-export const constantRoutesArr: Array<RouteComponent> =
-  ascending(constantRoutes);
+export const constantRoutesArr: Array<RouteComponent> = ascending(
+  constantRoutes
+).concat(...remainingRouter);
 
 // 过滤meta中showLink为false的路由
 export const filterTree = data => {

src/views/permission/button/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { storageSession } from "/@/utils/storage";
+
+const auth = ref<boolean>(storageSession.getItem("info").username || "admin");
+
+function changRole(value) {
+  storageSession.setItem("info", {
+    username: value,
+    accessToken: `eyJhbGciOiJIUzUxMiJ9.${value}`
+  });
+  window.location.reload();
+}
+</script>
+
+<template>
+  <div class="app-container">
+    <el-radio-group v-model="auth" @change="changRole">
+      <el-radio-button label="admin"></el-radio-button>
+      <el-radio-button label="test"></el-radio-button>
+    </el-radio-group>
+    <p v-auth="'v-admin'">只有admin可看</p>
+    <p v-auth="'v-test'">只有test可看</p>
+  </div>
+</template>

src/views/permission/page/index.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref, unref } from "vue";
+import { storageSession } from "/@/utils/storage";
+let purview = ref<string>(storageSession.getItem("info").username);
+function changRole() {
+  if (unref(purview) === "admin") {
+    storageSession.setItem("info", {
+      username: "test",
+      accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
+    });
+    window.location.reload();
+  } else {
+    storageSession.setItem("info", {
+      username: "admin",
+      accessToken: "eyJhbGciOiJIUzUxMiJ9.admin"
+    });
+    window.location.reload();
+  }
+}
+</script>
+
+<template>
+  <div class="app-container">
+    <h4>
+      当前角色：
+      <span style="font-size: 26px">{{ purview }}</span>
+      <p style="color: #ffa500">
+        查看左侧菜单变化(系统管理)，模拟后台根据不同角色返回对应路由
+      </p>
+    </h4>
+    <el-button type="primary" @click="changRole">切换角色</el-button>
+  </div>
+</template>