perf: 优化示例代码

locales/en.yaml

@@ -22,9 +22,9 @@ menus:
   hshome: Home
   hslogin: Login
   hssysManagement: System Manage
-  hsBaseinfo: Base Info
+  hsUser: User Manage
   hsDict: Dict Manage
-  hsPost: Post Manage
+  hsRole: Role Manage
   hsDept: Dept Manage
   hseditor: Editor
   hserror: Error Page

locales/zh-CN.yaml

@@ -22,9 +22,9 @@ menus:
   hshome: 首页
   hslogin: 登陆
   hssysManagement: 系统管理
-  hsBaseinfo: 基础信息
+  hsUser: 用户管理
   hsDict: 字典管理
-  hsPost: 岗位管理
+  hsRole: 角色管理
   hsDept: 部门管理
   hseditor: 编辑器
   hserror: 错误页面

mock/asyncRoutes.ts

@@ -9,31 +9,33 @@ const systemRouter = {
     icon: "setting",
     title: "menus.hssysManagement",
     i18n: true,
-    rank: 6
+    rank: 11
   },
   children: [
+    // {
+    //   path: "/system/dict/index",
+    //   name: "dict",
+    //   meta: {
+    //     title: "menus.hsDict",
+    //     i18n: true,
+    //     keepAlive: true
+    //   }
+    // },
     {
       path: "/system/user/index",
       name: "user",
       meta: {
-        title: "menus.hsBaseinfo",
+        icon: "flUser",
+        title: "menus.hsUser",
         i18n: true
       }
     },
     {
-      path: "/system/dict/index",
+      path: "/system/role/index",
-      name: "dict",
+      name: "role",
       meta: {
-        title: "menus.hsDict",
+        icon: "peoples",
-        i18n: true,
+        title: "menus.hsRole",
-        keepAlive: true
-      }
-    },
-    {
-      path: "/system/post/index",
-      name: "post",
-      meta: {
-        title: "menus.hsPost",
         i18n: true
       }
     },
@@ -41,6 +43,7 @@ const systemRouter = {
       path: "/system/dept/index",
       name: "dept",
       meta: {
+        icon: "office-building",
         title: "menus.hsDept",
         i18n: true
       }

mock/system.ts

@@ -2,7 +2,7 @@ import { MockMethod } from "vite-plugin-mock";
 
 export default [
   {
-    url: "/system",
+    url: "/role",
     method: "post",
     response: () => {
       return {

package.json

@@ -30,7 +30,7 @@
     "@ctrl/tinycolor": "^3.4.0",
     "@logicflow/core": "0.7.1",
     "@logicflow/extension": "0.7.1",
-    "@pureadmin/components": "^1.0.3",
+    "@pureadmin/components": "^1.0.6",
     "@vueuse/core": "^8.2.0",
     "@vueuse/motion": "^2.0.0-beta.12",
     "@vueuse/shared": "^8.2.0",
@@ -74,6 +74,7 @@
     "@iconify-icons/ep": "^1.2.4",
     "@iconify-icons/fa": "^1.2.2",
     "@iconify-icons/fa-solid": "^1.2.2",
+    "@iconify-icons/fluent": "^1.2.5",
     "@iconify-icons/ri": "^1.2.1",
     "@iconify-icons/uil": "^1.2.1",
     "@iconify/vue": "^3.2.0",

pnpm-lock.yaml

@@ -8,13 +8,14 @@ specifiers:
   "@iconify-icons/ep": ^1.2.4
   "@iconify-icons/fa": ^1.2.2
   "@iconify-icons/fa-solid": ^1.2.2
+  "@iconify-icons/fluent": ^1.2.5
   "@iconify-icons/ri": ^1.2.1
   "@iconify-icons/uil": ^1.2.1
   "@iconify/vue": ^3.2.0
   "@intlify/vite-plugin-vue-i18n": ^3.3.1
   "@logicflow/core": 0.7.1
   "@logicflow/extension": 0.7.1
-  "@pureadmin/components": ^1.0.3
+  "@pureadmin/components": ^1.0.6
   "@pureadmin/theme": ^0.0.1
   "@types/element-resize-detector": 1.1.3
   "@types/js-cookie": ^3.0.1
@@ -108,7 +109,7 @@ dependencies:
   "@ctrl/tinycolor": 3.4.0
   "@logicflow/core": 0.7.1
   "@logicflow/extension": 0.7.1
-  "@pureadmin/components": 1.0.3_vue@3.2.31
+  "@pureadmin/components": 1.0.6_vue@3.2.31
   "@vueuse/core": 8.2.0_vue@3.2.31
   "@vueuse/motion": 2.0.0-beta.12_vue@3.2.31
   "@vueuse/shared": 8.2.0_vue@3.2.31
@@ -152,6 +153,7 @@ devDependencies:
   "@iconify-icons/ep": 1.2.4
   "@iconify-icons/fa": 1.2.2
   "@iconify-icons/fa-solid": 1.2.2
+  "@iconify-icons/fluent": 1.2.5
   "@iconify-icons/ri": 1.2.1
   "@iconify-icons/uil": 1.2.1
   "@iconify/vue": 3.2.0_vue@3.2.31
@@ -988,6 +990,15 @@ packages:
       "@iconify/types": 1.1.0
     dev: true
 
+  /@iconify-icons/fluent/1.2.5:
+    resolution:
+      {
+        integrity: sha512-PMPrhYTl8hJ2vVQdLHr1zHvCF14U9kCLMY+CqwX+tCLUvUFct+NT6NphT2MgUmzk7J2BdyHsmjtPWmPVfdxZUw==
+      }
+    dependencies:
+      "@iconify/types": 1.1.0
+    dev: true
+
   /@iconify-icons/ri/1.2.1:
     resolution:
       {
@@ -1230,10 +1241,10 @@ packages:
       }
     dev: false
 
-  /@pureadmin/components/1.0.3_vue@3.2.31:
+  /@pureadmin/components/1.0.6_vue@3.2.31:
     resolution:
       {
-        integrity: sha512-+FYkSYma0qUXtqjy81Y3aIafIzoRveTOtPqxGkFqU2Ku1bnrPRjdKnJzn42pJyA5/OQ9WBvaDTKfldOFqEUuIg==
+        integrity: sha512-k+ZF/vsnLAZDkTGpBqZ44s9LTPZsCDFRnfNNXlGy7+TXInarzopuVWeQHGsPbHB3LPHcNd2/4MBjOq4NKYglpw==
       }
     peerDependencies:
       vue: ^3.2.0

src/api/system.ts

@@ -1,17 +1,17 @@
 import { http } from "../utils/http";
 
-interface postType extends Promise<any> {
+interface ResponseType extends Promise<any> {
   data?: object;
   code?: number;
   msg?: string;
 }
 
-// 获取岗位管理列表
+// 获取角色管理列表
-export const getPostList = (data?: object): postType => {
+export const getRoleList = (data?: object): ResponseType => {
-  return http.request("post", "/system", { data });
+  return http.request("post", "/role", { data });
 };
 
 // 获取部门管理列表
-export const getDeptList = (data?: object): postType => {
+export const getDeptList = (data?: object): ResponseType => {
   return http.request("post", "/dept", { data });
 };

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -101,6 +101,12 @@ addIcon("import", Import);
 addIcon("export", Export);
 addIcon("density", ArrowsShrinkV);
 
+// fluent
+import Peoples from "@iconify-icons/fluent/people-swap-28-filled";
+import FlUser from "@iconify-icons/fluent/person-12-filled";
+addIcon("peoples", Peoples);
+addIcon("flUser", FlUser);
+
 // Iconify Icon在Vue里离线使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
 export default defineComponent({
   name: "IconifyIcon",

src/layout/components/sidebar/sidebarItem.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, PropType, nextTick, computed, CSSProperties } from "vue";
 import path from "path";
 import { useNav } from "../../hooks/nav";
 import { childrenType } from "../../types";
 import { transformI18n } from "/@/plugins/i18n";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+import { ref, PropType, nextTick, computed, CSSProperties } from "vue";
 
 const { pureApp } = useNav();
 const menuMode = ["vertical", "mix"].includes(pureApp.layout);

src/layout/hooks/nav.ts

@@ -9,6 +9,8 @@ import { storageSession } from "/@/utils/storage";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 
+const errorInfo = "当前路由配置不正确，请检查配置";
+
 export function useNav() {
   const pureApp = useAppStoreHook();
   // 用户名
@@ -59,6 +61,7 @@ export function useNav() {
   }
 
   function resolvePath(route) {
+    if (!route.children) return console.error(errorInfo);
     const httpReg = /^http(s?):\/\//;
     const routeChildPath = route.children[0]?.path;
     if (httpReg.test(routeChildPath)) {
@@ -77,6 +80,7 @@ export function useNav() {
     }
     // 找到当前路由的信息
     function findCurrentRoute(indexPath: string, routes) {
+      if (!routes) return console.error(errorInfo);
       return routes.map(item => {
         if (item.path === indexPath) {
           if (item.redirect) {

src/router/modules/nested.ts

@@ -9,7 +9,7 @@ const nestedRouter = {
     title: $t("menus.hsmenus"),
     icon: "histogram",
     i18n: true,
-    rank: 11
+    rank: 6
   },
   children: [
     {

src/views/system/role/index.vue

@@ -1,16 +1,16 @@
 <script lang="ts">
 export default {
-  name: "post"
+  name: "role"
 };
 </script>
 
 <script setup lang="ts">
 import dayjs from "dayjs";
 import { loadingSvg } from "../load";
-import { getPostList } from "/@/api/system";
+import { getRoleList } from "/@/api/system";
 import { FormInstance } from "element-plus";
-import { Switch } from "@pureadmin/components";
+import { ElMessageBox } from "element-plus";
-import { successMessage } from "/@/utils/message";
+import { Switch, message } from "@pureadmin/components";
 import { reactive, ref, onMounted, computed } from "vue";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
@@ -22,7 +22,7 @@ const form = reactive({
 });
 const buttonRef = ref();
 const tooltipRef = ref();
-let postList = ref([]);
+let roleList = ref([]);
 let pageSize = ref(10);
 let totalPage = ref(0);
 let checkList = ref([]);
@@ -67,25 +67,45 @@ function handleSelectionChange(val) {
 }
 
 function onChange(checked, { $index, row }) {
-  switchLoadMap.value[$index] = Object.assign({}, switchLoadMap.value[$index], {
+  ElMessageBox.confirm(
-    loading: true
+    `确认要<strong>停用</strong><strong style='color:var(--el-color-primary)'>${row.name}</strong>角色吗?`,
-  });
+    "系统提示",
-  setTimeout(() => {
+    {
-    switchLoadMap.value[$index] = Object.assign(
+      confirmButtonText: "确定",
-      {},
+      cancelButtonText: "取消",
-      switchLoadMap.value[$index],
+      type: "warning",
-      {
+      dangerouslyUseHTMLString: true,
-        loading: false
+      draggable: true
-      }
+    }
-    );
+  )
-    successMessage("已成功修改岗位状态");
+    .then(() => {
-  }, 300);
+      switchLoadMap.value[$index] = Object.assign(
+        {},
+        switchLoadMap.value[$index],
+        {
+          loading: true
+        }
+      );
+      setTimeout(() => {
+        switchLoadMap.value[$index] = Object.assign(
+          {},
+          switchLoadMap.value[$index],
+          {
+            loading: false
+          }
+        );
+        message.success("已成功修改角色状态");
+      }, 300);
+    })
+    .catch(() => {
+      row.status === 0 ? (row.status = 1) : (row.status = 0);
+    });
 }
 
 async function onSearch() {
   loading.value = true;
-  let { data } = await getPostList();
+  let { data } = await getRoleList();
-  postList.value = data.list;
+  roleList.value = data.list;
   totalPage.value = data.total;
   setTimeout(() => {
     loading.value = false;
@@ -111,10 +131,10 @@ onMounted(() => {
       :model="form"
       class="bg-white w-99/100 pl-8 pt-4"
     >
-      <el-form-item label="岗位编码：" prop="code">
+      <el-form-item label="角色编码：" prop="code">
         <el-input v-model="form.code" placeholder="请输入" clearable />
       </el-form-item>
-      <el-form-item label="岗位名称：" prop="user">
+      <el-form-item label="角色名称：" prop="user">
         <el-input v-model="form.user" placeholder="请输入" clearable />
       </el-form-item>
       <el-form-item label="状态：" prop="status">
@@ -145,10 +165,10 @@ onMounted(() => {
       element-loading-svg-view-box="-10, -10, 50, 50"
     >
       <div class="flex justify-between w-full h-60px p-4">
-        <p class="font-bold">岗位列表</p>
+        <p class="font-bold">角色列表</p>
         <div class="w-220px flex items-center justify-around">
           <el-button type="primary" :icon="useRenderIcon('add')"
-            >新增岗位</el-button
+            >新增角色</el-button
           >
           <!-- <el-button type="success" :icon="useRenderIcon('import')"
             >导入</el-button
@@ -245,7 +265,7 @@ onMounted(() => {
         border
         table-layout="auto"
         :size="size"
-        :data="postList"
+        :data="roleList"
         :header-cell-style="{ background: '#fafafa', color: '#606266' }"
         @selection-change="handleSelectionChange"
       >
@@ -262,10 +282,10 @@ onMounted(() => {
           align="center"
           width="60"
         />
-        <el-table-column label="岗位编号" align="center" prop="id" />
+        <el-table-column label="角色编号" align="center" prop="id" />
-        <el-table-column label="岗位编码" align="center" prop="code" />
+        <el-table-column label="角色编码" align="center" prop="code" />
-        <el-table-column label="岗位名称" align="center" prop="name" />
+        <el-table-column label="角色名称" align="center" prop="name" />
-        <el-table-column label="岗位排序" align="center" prop="sort" />
+        <el-table-column label="角色排序" align="center" prop="sort" />
         <el-table-column label="状态" align="center" prop="status">
           <template #default="scope">
             <Switch