feat:全局代码优化

src/components/XIcon.vue

@@ -14,28 +14,35 @@
     export default defineComponent({
         name: 'XIcon',
         props: {
+            // 图标名称
             name: {
                 type: String,
                 default: '',
             },
+            // 图标尺寸
             size: {
                 type: [String, Number],
                 default: 14,
             },
+            // 是否为自定义SVG图标
             svg: {
                 type: Boolean,
                 default: false,
             },
+            // 图标颜色
             color: {
                 type: String,
                 default: 'inherit',
             },
         },
         setup(props) {
+            // 自定义SVG唯一标识
             const symbolId = computed(() => `#icon-${props.name}`);
+            // 补全图标尺寸
             const size = computed(() =>
                 Number.isNaN(new Number(props.size).valueOf()) ? props.size : props.size + 'px'
             );
+            // 判断是remix图标还是element-plus图标
             const isRemix = computed(() => !Object.keys(icons).includes(props.name));
             return {
                 symbolId,

src/configs/index.js

@@ -1,4 +1,14 @@
 export default {
+    /**
+     * 接口请求地址前缀
+     */
     baseURL: import.meta.env.VITE_BASE_URL,
+    /**
+     * 接口请求超时时间
+     */
     requestTimeout: import.meta.env.VITE_REQUEST_TIMEOUT,
+    /**
+     * 是否使用本地路由
+     */
+    useLocalRouter: false,
 };

src/layouts/components/aside.vue

@@ -16,6 +16,7 @@
     const asideList = computed(() => store.getters['layout/asideList']);
     const activeAside = computed(() => store.state.layout.activeAside);
 
+    // 当前激活侧边导航改变时重设菜单列表
     watch(
         () => activeAside,
         (value) => {
@@ -26,6 +27,7 @@
         },
         { immediate: true, deep: true }
     );
+
     const handleClick = (item) => {
         store.commit('layout/setActiveAside', item.name);
     };

src/layouts/components/header.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="layout-header">
         <div class="header-left">
-            <XIcon :name="collapseAside ? 'menu-unfold-fill' : 'menu-fold-fill'" size="16" @click="handleCollapse" />
+            <XIcon :name="collapseMenu ? 'menu-unfold-fill' : 'menu-fold-fill'" size="16" @click="handleCollapse" />
             <LayoutBreakcrumb />
         </div>
         <div class="header-right">
@@ -16,9 +16,9 @@
     import LayoutProfile from './profile.vue';
     import LayoutOperation from './operation.vue';
     const store = useStore();
-    const collapseAside = computed(() => store.getters['layout/collapseAside']);
+    const collapseMenu = computed(() => store.getters['layout/collapseMenu']);
     const handleCollapse = () => {
-        store.commit('layout/setCollapseAside', !unref(collapseAside));
+        store.commit('layout/setCollapseMenu', !unref(collapseMenu));
     };
 </script>
 

src/layouts/components/menu.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-scrollbar class="layout-menu" :class="{ collapse: collapseAside }">
+    <el-scrollbar class="layout-menu" :class="{ collapse: collapseMenu }">
         <div class="title">马士兵严选后台管理平台</div>
         <el-divider>{{ activeAsideName }}</el-divider>
         <el-menu unique-opened :default-active="activeMenu" @select="handleSelect">
@@ -15,7 +15,7 @@
     const activeAsideName = computed(() => store.getters['layout/activeAsideName']);
     const menuList = computed(() => store.state.layout.menuList);
     const activeMenu = computed(() => store.state.layout.activeMenu);
-    const collapseAside = computed(() => store.getters['layout/collapseAside']);
+    const collapseMenu = computed(() => store.getters['layout/collapseMenu']);
     const handleSelect = (index) => {
         // TODO 支持外链
         router.push({ name: index });

src/layouts/components/tabs.vue

@@ -35,6 +35,7 @@
     const store = useStore();
     const activeTab = computed(() => store.state.layout.activeTab);
     const tabList = computed(() => store.state.layout.tabList);
+    // 标签列表变化时如果激活标签不存在则跳转到第一个标签
     watch(
         () => unref(tabList),
         (value) => {

src/plugins/element-plus.js

@@ -1,6 +1,16 @@
+import { ElNotification } from 'element-plus/es/components/notification/index';
+import 'element-plus/es/components/notification/style/css';
 import { ElMessage } from 'element-plus/es/components/message/index';
 import 'element-plus/es/components/message/style/css';
+import { ElMessageBox } from 'element-plus/es/components/message-box/index';
+import 'element-plus/es/components/message-box/style/css';
+import { ElLoading } from 'element-plus/es/components/loading/index';
+import 'element-plus/es/components/loading/style/css';
+// 只需要引用带有全局方法的组件，其他组件插件会自动按需引入
 export default (app) => {
+    app.use(ElNotification);
     app.use(ElMessage);
+    app.use(ElMessageBox);
+    app.use(ElLoading);
 };
-export { ElMessage };
+export { ElNotification, ElMessage, ElMessageBox, ElLoading };

src/router/index.js

@@ -27,11 +27,45 @@ Object.values(modules).forEach((mod) => {
     dynamicRoutes.push(...mod.default);
 });
 
-export const routes = [];
+// 本地路由
+export const routes = [
+    ...globalRoutes,
+    {
+        path: '/',
+        name: 'App',
+        redirect: { name: 'Home' },
+        component: () => import('@/layouts/default.vue'),
+        meta: {
+            layout: true,
+        },
+        children: [
+            {
+                path: '/home',
+                name: 'Home',
+                component: () => import('@/views/home/index.vue'),
+                meta: {
+                    title: '首页',
+                    icon: 'home-fill',
+                },
+            },
+        ],
+    },
+    ...dynamicRoutes,
+    {
+        path: '/:pathMatch(.*)*',
+        redirect: '/404',
+        name: 'NotFound',
+        meta: {
+            global: true,
+        },
+    },
+];
+
+import config from '@/configs';
 
 const router = createRouter({
     history: createWebHistory(),
-    routes,
+    routes: config.useLocalRouter ? routes : [],
 });
 
 import store from '@/store';
@@ -44,8 +78,12 @@ router.beforeEach(async (to, from, next) => {
     }
     if (store.state.local.token) {
         if (!store.state.auth.permission.length) {
-            await store.dispatch('auth/getUserInfo');
-            await store.dispatch('auth/getPermission');
+            if (config.useLocalRouter) {
+                store.commit('auth/setPermission', routes);
+            } else {
+                await store.dispatch('auth/getUserInfo');
+                await store.dispatch('auth/getPermission');
+            }
             next({ ...to, replace: true });
         } else {
             console.info(`[router] from ${from.name} to ${to.name}`);
@@ -75,11 +113,10 @@ router.beforeEach(async (to, from, next) => {
 export default router;
 
 export const reset = (routers) => {
-    const flat = (arr) => arr.flatMap((item) => [item, item.children || []]);
     router.getRoutes().forEach((item) => {
         router.removeRoute(item.name);
     });
-    flat([
+    routers = [
         ...globalRoutes,
         ...routers,
         {
@@ -90,6 +127,7 @@ export const reset = (routers) => {
                 global: true,
             },
         },
-    ]).forEach(router.addRoute);
+    ];
+    routers.forEach(router.addRoute);
     console.info('[router] reset', router.getRoutes());
 };

src/store/modules/auth.js

@@ -1,6 +1,7 @@
 import { getUserInfo, getPermission, sendSmsCode, login } from '@/api/auth';
 import { ElMessage } from '@/plugins/element-plus';
 import router, { reset as resetRoutes } from '@/router';
+import config from '@/configs';
 const viewComponents = import.meta.glob('../../views/**/*.vue');
 const state = () => ({
     userInfo: null,
@@ -52,7 +53,7 @@ const mutations = {
                 return route;
             });
         };
-        state.permission = convert(data);
+        state.permission = config.useLocalRouter ? data : convert(data);
         resetRoutes(state.permission);
     },
 };

src/store/modules/layout.js

@@ -1,7 +1,7 @@
 import router from '@/router';
 const state = () => ({
     activeAside: null,
-    collapseAside: false,
+    collapseMenu: false,
     activeMenu: null,
     menuList: [],
     tabList: [],
@@ -14,11 +14,11 @@ const getters = {
             arr.flatMap((item) => (item.meta?.layout ? deep(item.children || []) : item.meta?.global ? [] : item));
         return deep(rootState.auth.permission);
     },
-    collapseAside: (state) => state.collapseAside || state.menuList.length < 2,
+    collapseMenu: (state) => state.collapseMenu || state.menuList.length < 2,
     activeAsideName: (state, getters) => getters.asideList.find((item) => item.name === state.activeAside)?.meta.title,
 };
 const mutations = {
-    setCollapseAside: (state, data) => (state.collapseAside = data),
+    setCollapseMenu: (state, data) => (state.collapseMenu = data),
     setActiveAside: (state, data) => (state.activeAside = data),
     setMenuList: (state, data) => (state.menuList = data),
     setActiveMenu: (state, data) => (state.activeMenu = data),