feat:路由系统

src/api/auth.js

@@ -24,10 +24,11 @@ export function getUserInfo() {
     });
 }
 // 获取权限列表
-export function getPermission() {
+export function getPermission(params) {
     return request({
         url: '/u-admin/uc/ucPermission/listUserMenu',
         method: 'get',
+        params,
     });
 }
 // 退出登录

src/layouts/components/main.vue

@@ -16,9 +16,9 @@
         box-shadow: @layout-shadow;
         :deep(.el-scrollbar__view) {
             width: 100%;
-            min-height: 100%;
+            height: 100%;
             > * {
-                display: inline-block; // 创建BFC
+                // display: inline-block; // 创建BFC
                 width: 100%;
                 height: 100%;
                 padding: @layout-space-large;

src/layouts/components/menu.vue

@@ -40,6 +40,9 @@
                 transition: opacity 0.3s;
             }
         }
+        :deep(*) {
+            white-space: nowrap;
+        }
         .title {
             width: 100%;
             height: @layout-header-height;

src/layouts/components/profile.vue

@@ -3,7 +3,7 @@
         <el-avatar :src="userInfo?.avatar" />
         <el-dropdown size="middle" @command="handleCommand">
             <span class="el-dropdown-link">
-                <span>{{ userInfo?.username }}</span>
+                <span>{{ userInfo?.nickname || userInfo?.username }}</span>
                 <XIcon class="el-icon--right" name="ArrowDown" />
             </span>
             <template #dropdown>
@@ -18,7 +18,7 @@
 
 <script setup>
     const store = useStore();
-    const userInfo = computed(() => store.state.local.userInfo);
+    const userInfo = computed(() => store.state.auth.userInfo);
     const handleCommand = (command) => {
         switch (command) {
             case 'logout':

src/router/index.js

@@ -27,38 +27,7 @@ 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-line',
-                },
-            },
-        ],
-    },
-    ...dynamicRoutes,
-    {
-        path: '/:pathMatch(.*)*',
-        redirect: '/404',
-        name: 'NotFound',
-        meta: {
-            global: true,
-        },
-    },
-];
 
 const router = createRouter({
     history: createWebHistory(),
@@ -69,22 +38,17 @@ import store from '@/store';
 router.onError((error, to) => {
     console.info('[router] error', error, to);
 });
-import debug from '@/utils/debug';
 router.beforeEach(async (to, from, next) => {
     if (!from.matched.length) {
         store.loadCache();
     }
-    // if (!store.state.auth.userInfo) {
+    if (store.state.local.token) {
-    //     await store.dispatch('auth/getUserInfo');
+        if (!store.state.auth.permission.length) {
-    // }
+            await store.dispatch('auth/getUserInfo');
-    // if (!store.state.auth.permission.length) {
+            await store.dispatch('auth/getPermission');
-    //     await store.dispatch('auth/getPermission');
+            next({ ...to, replace: true });
-    // }
-    if (to.matched.length) {
-        console.info(`[router] from ${from.name} to ${to.name}`);
-        if (to.meta.global) {
-            next();
         } else {
+            console.info(`[router] from ${from.name} to ${to.name}`);
             const deep = (route) => {
                 let child = (route.children || []).find((item) => !item.meta?.hidden);
                 return child?.children?.length ? deep(child?.children) : child?.name;
@@ -101,6 +65,10 @@ router.beforeEach(async (to, from, next) => {
                 store.commit('layout/addTab', to);
             }
         }
+    } else if (to.meta.global) {
+        next();
+    } else {
+        next({ name: 'Login' });
     }
 });
 
@@ -111,6 +79,17 @@ export const reset = (routers) => {
     router.getRoutes().forEach((item) => {
         router.removeRoute(item.name);
     });
-    flat(routers).forEach(router.addRoute);
+    flat([
+        ...globalRoutes,
+        ...routers,
+        {
+            path: '/:pathMatch(.*)*',
+            redirect: '/404',
+            name: 'NotFound',
+            meta: {
+                global: true,
+            },
+        },
+    ]).forEach(router.addRoute);
     console.info('[router] reset', router.getRoutes());
 };

src/store/modules/auth.js

@@ -1,23 +1,7 @@
-import { getUserInfo, getPermission } from '@/api/auth';
+import { getUserInfo, getPermission, sendSmsCode, login } from '@/api/auth';
 import { ElMessage } from '@/plugins/element-plus';
-const sms = () => {
-    return new Promise((resolve) => {
-        setTimeout(() => {
-            resolve(true);
-        }, 1000);
-    });
-};
-const login = () => {
-    return new Promise((resolve) => {
-        setTimeout(() => {
-            resolve({
-                token: 'eyJhbGciOiJSUzI1NiJ9.eyJ1aWQiOjEzMjI1LCJwaG9uZSI6IjEzMjAyMDkwNjAxIiwibG9naW5UeXBlIjo1LCJ1c2VyTm8iOiIxMzIyNSIsIm5pY2tuYW1lIjoi5b-D5LmL5omA5ZCRIiwiZGVwdElkIjpudWxsLCJleHAiOjE2Nzg5NzI5NjksInVzZXJuYW1lIjoiTUNBLTMzYTkifQ.bDgxrGWUYW1iGLQidoj3q4lBXTlI0zKMBslIjN5LuvyLE4O8LPfFFYh33nAlevKuey_tqYQSWn0Cvm81Ywuksn70lGyy5-BEBbLUQCXaFKaWXujc2FzWFIvPHzAXfF16aUzyKkCppR5tfLDQz5cimLHAQBw24Ar69UCMiYJjN8E',
-            });
-        }, 1000);
-    });
-};
 import router, { reset as resetRoutes } from '@/router';
-const modules = import.meta.glob('../views/*/*.vue');
+const viewComponents = import.meta.glob('../../views/**/*.vue');
 const state = () => ({
     userInfo: null,
     permission: [],
@@ -40,7 +24,7 @@ const mutations = {
                     },
                 };
                 if (!route.path.startsWith('/')) {
-                    route.path = parent.path + route.path;
+                    route.path = parent.path + '/' + route.path;
                 }
                 route.meta.menu = route.path.replaceAll(/\/:[^?]+\?/g, '');
                 let activeMenu = route.meta.activeMenu;
@@ -52,12 +36,15 @@ const mutations = {
                     if (route.component === 'Layout') {
                         route.component = () => import('@/layouts/default.vue');
                     } else {
-                        let path = `../views/${route.component}`;
+                        let path = `../../views/${route.component}`;
                         if (!path.endsWith('.vue')) {
                             path += '.vue';
                         }
                         let alias = path.replace(/\.vue$/, '/index.vue');
-                        route.component = modules[path] || modules[alias];
+                        route.component = viewComponents[path] || viewComponents[alias];
+                        if (!route.component) {
+                            route.component = () => import('@/views/global/404.vue');
+                        }
                     }
                 }
                 route.children = convert(item.children || [], route);
@@ -66,12 +53,12 @@ const mutations = {
             });
         };
         state.permission = convert(data);
-        // resetRoutes(state.permission);
+        resetRoutes(state.permission);
     },
 };
 const actions = {
     sms: async ({ commit }, data) => {
-        let res = await sms(data);
+        let res = await sendSmsCode(data);
         if (res) {
             ElMessage.success('验证码已发送');
             commit('local/sendMessage', {}, { root: true });
@@ -96,7 +83,7 @@ const actions = {
         router.push({ name: 'Login' });
     },
     getPermission: async ({ commit }) => {
-        let res = await getPermission();
+        let res = await getPermission({ systemCode: 'msb_shop_admin' });
         if (res) {
             commit('setPermission', res);
         } else {

src/store/modules/layout.js

@@ -1,4 +1,4 @@
-import router, { routes } from '@/router';
+import router from '@/router';
 const state = () => ({
     activeAside: null,
     collapseAside: false,
@@ -9,10 +9,10 @@ const state = () => ({
     breakcrumbList: [],
 });
 const getters = {
-    asideList: () => {
+    asideList: (state, getters, rootState) => {
         const deep = (arr) =>
             arr.flatMap((item) => (item.meta?.layout ? deep(item.children || []) : item.meta?.global ? [] : item));
-        return deep(routes);
+        return deep(rootState.auth.permission);
     },
     collapseAside: (state) => state.collapseAside || state.menuList.length < 2,
     activeAsideName: (state, getters) => getters.asideList.find((item) => item.name === state.activeAside)?.meta.title,

src/views/global/404.vue

@@ -54,8 +54,8 @@
 
 <style lang="less" scoped>
     .container {
-        width: 100vw;
+        width: 100%;
-        height: 100vh;
+        height: 100%;
         background: #000 url('~/global/login-bgp.png') center center / 100% 100% no-repeat;
         display: flex;
         justify-content: center;

src/views/home/index.vue

@@ -36,7 +36,7 @@
     const form = reactive({ msg: '123' });
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
     .container {
         height: 2000px !important;
     }

src/views/system/permission/index.vue

@@ -0,0 +1,7 @@
+<template>
+    <div>权限列表</div>
+</template>
+
+<script setup></script>
+
+<style lang="less" scoped></style>

src/views/system/role/index.vue

@@ -0,0 +1,7 @@
+<template>
+    <div>角色列表</div>
+</template>
+
+<script setup></script>
+
+<style lang="less" scoped></style>

src/views/system/user/index.vue

@@ -0,0 +1,7 @@
+<template>
+    <div>用户列表</div>
+</template>
+
+<script setup></script>
+
+<style lang="less" scoped></style>