feat: 添加layout

src/constants/index.ts

@@ -12,7 +12,7 @@ export const WHITE_LIST = ['/login']
 export const LOGIN_URL: string = '/login'
 
 // 首页地址（默认）
-export const HOME_URL: string = '/home/index'
+export const HOME_URL: string = '/home'
 
 // 默认设置
 export const DEFAULT_SETTING = {

src/directives/modules/auth.ts

@@ -9,7 +9,7 @@ const auth: Directive = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
     const { value } = binding
     const all_permission = '*:*:*'
-    const permissions = useUserStore().permissions
+    const permissions = useUserStore().permissionCodes
 
     if (value && value instanceof Array && value.length > 0) {
       const permissionFlag = value

src/layouts/container/AppTransverse/index.scss

@@ -0,0 +1,60 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+  :deep(.el-header) {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 55px;
+    padding: 0 15px 0 0;
+    background-color: var(primary-color);
+    border-bottom: 1px solid var(--el-header-border-color);
+    .logo {
+      width: 210px;
+      margin-right: 30px;
+      .logo-img {
+        width: 28px;
+        object-fit: contain;
+        margin-right: 6px;
+      }
+      .logo-text {
+        font-size: 21.5px;
+        font-weight: bold;
+        color: var(--el-header-logo-text-color);
+        white-space: nowrap;
+      }
+    }
+    .el-menu {
+      flex: 1;
+      height: 100%;
+      overflow: hidden;
+      border-bottom: none;
+      .el-sub-menu__hide-arrow {
+        width: 65px;
+        height: 55px;
+      }
+      .el-menu-item.is-active {
+        color: #ffffff !important;
+      }
+      .is-active {
+        background-color: var(--el-color-primary) !important;
+        border-bottom-color: var(--el-color-primary) !important;
+        &::before {
+          width: 0;
+        }
+        .el-sub-menu__title {
+          color: #ffffff !important;
+          background-color: var(--el-color-primary) !important;
+          border-bottom-color: var(--el-color-primary) !important;
+        }
+      }
+    }
+  }
+
+  @media screen and (width <= 730px) {
+    .logo {
+      display: none !important;
+    }
+  }
+}

src/layouts/container/AppTransverse/index.vue

@@ -13,4 +13,7 @@
     <el-footer></el-footer>
   </el-container>
 </template>
-<script lang="tsx" setup></script>
+<script lang="tsx" setup name="LayoutTransverse"></script>
+<style lang="scss">
+@use './index';
+</style>

src/router/modules/authRouts.ts

@@ -9,6 +9,7 @@ export const setupAuthRoutes = () => {
   router.beforeEach(async (to, from, next) => {
     const userStore = useUserStore()
     const authStore = useAuthStore()
+
     start()
 
     if (to.path.toLocaleLowerCase() === LOGIN_URL) {
@@ -17,6 +18,7 @@ export const setupAuthRoutes = () => {
       return next()
     }
     if (WHITE_LIST.includes(to.path)) return next()
+
     if (!userStore.token) return next({ path: LOGIN_URL, replace: true })
 
     if (!authStore.getMenuList.length) {

src/router/modules/dynamicRouter.ts

@@ -12,19 +12,14 @@ const modules = import.meta.glob('@/views/**/*.vue')
 export const initDynamicRouter = async () => {
   const userStore = useUserStore()
   const authStore = useAuthStore()
+
   try {
     if (authStore.isLoaded) return
     await authStore.setMenuList()
     await authStore.setLoaded()
-    if (!authStore.getMenuList.length) {
-      userStore.setToken('')
-      router.replace(LOGIN_URL)
-      return Promise.reject('No permission')
-    }
 
     // 3.添加动态路由
     authStore.flatMenuListGet.forEach((item: Menu.MenuOptions) => {
-      console.log('item', item)
       if (item.children) delete item.children
       if (item.component && typeof item.component == 'string') {
         item.component = modules['/src/views' + item.component + '.vue']

src/stores/modules/user.ts

@@ -27,6 +27,7 @@ export const useUserStore = defineStore('eco-user', {
           .then(({ code, data, msg }) => {
             if (code === 200) {
               const { accessToken, user, roleCodes, permissionCodes, expireIn } = data
+              this.setToken(accessToken)
               this.token = accessToken
               this.user = user
               this.roleCodes = roleCodes
@@ -79,7 +80,8 @@ export const useUserStore = defineStore('eco-user', {
     setToken(tokenStr: string) {
       this.token = tokenStr
     }
-  }
+  },
+  persist: true
 })
 export const useUserStoreWithOut = () => {
   return useUserStore(pinia)

vite.config.ts

@@ -52,7 +52,8 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
         'element-plus/es/components/container/style/css',
         'element-plus/es/components/footer/style/css',
         'element-plus/es/components/main/style/css',
-        'element-plus/es/components/header/style/css'
+        'element-plus/es/components/header/style/css',
+        'element-plus/es/components/message/style/css'
       ]
     }
   }