feat:动态路由样式调整

package.json

@@ -20,6 +20,7 @@
   "devDependencies": {
     "@types/node": "^16.11.7",
     "@types/nprogress": "^0.2.0",
+    "@types/path-browserify": "^1.0.0",
     "@vitejs/plugin-vue": "^1.9.3",
     "sass": "^1.43.4",
     "typescript": "^4.4.3",

src/api/system/menu.ts

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 export function getRouteList() {
     return request({
-        url: '/youlai-admin/api/v1/menus/route',
+        url: '/youlai-admin/api/v2/menus/route',
         method: 'get'
     })
 }

src/layout/components/Navbar.vue

@@ -64,7 +64,7 @@ export default {
       return store.state.app.sidebar
     })
     const device = computed(() => {
-      return store.state.app.device.toString()
+      return store.state.app.device
     })
     const avatar = computed(() => {
       return store.state.user.avatar

src/layout/components/Settings/index.vue

@@ -52,7 +52,7 @@ export default defineComponent({
     })
 
     watch(() => state.sidebarLogo, (value) => {
-      store.dispatch('settings/changeSetting', { key: 'showSidebarLogo', value })
+      store.dispatch('settings/changeSetting', { key: 'sidebarLogo', value })
     })
 
     return {

src/layout/components/Sidebar/Link.vue

@@ -1,43 +1,40 @@
 <template>
-  <component :is="type" v-bind="linkProps(to)">
+  <a
+      v-if="isExternal(to)"
+      :href="to"
+      target="_blank"
+      rel="noopener"
+  >
     <slot />
-  </component>
+  </a>
+  <div
+      v-else
+      @click="push"
+  >
+    <slot />
+  </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import { isExternal } from '@/utils/validate'
-
-export default {
+import { useRouter } from 'vue-router'
+export default defineComponent({
   props: {
     to: {
       type: String,
       required: true
     }
   },
-  computed: {
-    isExternal() {
-      return isExternal(this.to)
-    },
-    type() {
-      if (this.isExternal) {
-        return 'a'
-      }
-      return 'router-link'
+  setup(props) {
+    const router = useRouter()
+    const push = () => {
+      router.push(props.to)
     }
-  },
-  methods: {
-    linkProps(to) {
-      if (this.isExternal) {
-        return {
-          href: to,
-          target: '_blank',
-          rel: 'noopener'
-        }
-      }
-      return {
-        to: to
-      }
+    return {
+      push,
+      isExternal
     }
   }
-}
+})
 </script>

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,47 +1,53 @@
 <template>
-  <div v-if="!item.hidden">
-    <template
-        v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <svg-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
-          <span v-if="onlyOneChild.meta && onlyOneChild.meta.title">{{ onlyOneChild.meta.title }}</span>
-        </el-menu-item>
-      </app-link>
-    </template>
-
-    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
-
-      <template slot="title">
-        <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
-        <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
+  <div>
+    <div v-if="!item.meta ||!item.meta.hidden">
+      <!-- 非嵌套路由 -->
+      <template
+          v-if="!item.children||item.children.length==0">
+        <app-link v-if="item.meta" :to="resolvePath(item.path)">
+          <el-menu-item :index="resolvePath(item.path)" :class="{'submenu-title-noDropdown':!isNest}">
+            <svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
+            <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
+          </el-menu-item>
+        </app-link>
       </template>
 
-      <sidebar-item
-          v-for="child in item.children"
-          :key="child.path"
-          :is-nest="true"
-          :item="child"
-          :base-path="resolvePath(child.path)"
-          class="nest-menu"
-      />
-    </el-sub-menu>
+      <!-- 嵌套路由 -->
+      <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+        <template #title>
+          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
+          <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
+        </template>
+
+        <sidebar-item
+            v-for="child in item.children"
+            :key="child.path"
+            :is-nest="true"
+            :item="child"
+            :base-path="resolvePath(child.path)"
+            class="nest-menu"
+        />
+      </el-sub-menu>
+    </div>
   </div>
+
 </template>
 
-<script>
+<script lang="ts">
 import path from 'path-browserify'
+import {defineComponent, PropType} from "vue";
+import {RouteRecordRaw} from 'vue-router'
 import {isExternal} from '@utils/validate'
 import AppLink from './Link.vue'
 import SvgIcon from '@/components/SvgIcon/index.vue';
 
-export default {
+
+export default defineComponent({
   name: 'SidebarItem',
   components: {SvgIcon, AppLink},
   props: {
-    // route object
     item: {
-      type: Object,
+      type: Object as PropType<RouteRecordRaw>,
       required: true
     },
     isNest: {
@@ -53,46 +59,22 @@ export default {
       default: ''
     }
   },
-  data() {
-    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
-    // TODO: refactor with render function
-    this.onlyOneChild = null
-    return {}
-  },
-  methods: {
-    hasOneShowingChild(children = [], parent) {
-      const showingChildren = children.filter(item => {
-        if (item.hidden) {
-          return false
-        } else {
-          // Temp set(will be used if only has one showing child)
-          this.onlyOneChild = item
-          return true
-        }
-      })
-
-      // When there is only one child router, the child router is displayed by default
-      if (showingChildren.length === 1) {
-        return true
-      }
-
-      // Show parent if there are no child router to display
-      if (showingChildren.length === 0) {
-        this.onlyOneChild = {...parent, path: '', noShowingChildren: true}
-        return true
-      }
-
-      return false
-    },
-    resolvePath(routePath) {
+  setup(props) {
+    const resolvePath = (routePath: string) => {
       if (isExternal(routePath)) {
         return routePath
       }
-      if (isExternal(this.basePath)) {
-        return this.basePath
+      if (isExternal(props.basePath)) {
+        return props.basePath
       }
-      return path.resolve(this.basePath, routePath)
+      console.log(props.basePath,routePath)
+      return path.resolve(props.basePath, routePath)
+    }
+
+    return {
+      resolvePath
     }
   }
-}
+})
+
 </script>

src/layout/components/Sidebar/index.vue

@@ -1,29 +1,38 @@
 <template>
   <div :class="{'has-logo':showLogo}">
     <logo v-if="showLogo" :collapse="isCollapse"/>
+
+
+    <!-- :background-color="variables.menuBg"
+          :text-color="variables.menuText"
+          :active-text-color="variables.menuActiveText"-->
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
           :default-active="activeMenu"
           :collapse="isCollapse"
-          :background-color="variables.menuBg"
-          :text-color="variables.menuText"
+          background-color="#304156"
+          text-color="#bfcbd9"
+          active-text-color="#409EFF"
           :unique-opened="false"
-          :active-text-color="variables.menuActiveText"
           :collapse-transition="false"
-          mode="vertical"
-      >
-        <sidebar-item v-for="route in routes" :key="route.path" :item="route"
-                      :base-path="route.path"/>
+          mode="vertical">
+        <sidebar-item
+            v-for="route in routes"
+            :item="route"
+            :key="route.path"
+            :base-path="route.path"
+        />
       </el-menu>
     </el-scrollbar>
+
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import {computed, defineComponent} from "vue";
 import SidebarItem from './SidebarItem.vue'
 import Logo from './Logo.vue'
-import variables from '@styles/variables.scss'
+import variables from '@/styles/variables.scss'
 import {useStore} from '@/store'
 import {useRoute} from 'vue-router'
 
@@ -33,17 +42,11 @@ export default defineComponent({
     Logo
   },
   setup() {
-    const store = useStore()
+    const store = useStore();
     const route = useRoute()
-    const sidebar = computed(() => {
-      return store.state.app.sidebar
-    })
-    const routes = computed(() => {
-      return store.state.permission.routes
-    })
-    const showLogo = computed(() => {
-      return store.state.settings.sidebarLogo
-    })
+    const sidebar = computed(() => store.state.app.sidebar)
+    const routes = computed(() => store.state.permission.routes)
+    const showLogo = computed(() => store.state.settings.sidebarLogo)
     const activeMenu = computed(() => {
       const {meta, path} = route
       // if set path, the sidebar will highlight the path you set
@@ -52,9 +55,7 @@ export default defineComponent({
       }
       return path
     })
-    const isCollapse = computed(() => {
-      return !sidebar.value.opened
-    })
+    const isCollapse = computed(() => !store.state.app.sidebar.opened)
 
     return {
       sidebar,
@@ -62,7 +63,7 @@ export default defineComponent({
       showLogo,
       variables,
       activeMenu,
-      isCollapse
+      isCollapse,
     }
   }
 })

src/layout/index.vue

@@ -9,10 +9,10 @@
       </div>
       <app-main/>
       <!--
-      <right-panel v-if="showSettings">
+        <right-panel v-if="showSettings">
               <settings/>
             </right-panel>
-            -->
+      -->
     </div>
   </div>
 </template>
@@ -23,6 +23,7 @@ import {computed, defineComponent, onBeforeMount, onBeforeUnmount, onMounted, re
 import {AppMain, Navbar, Settings, Sidebar, TagsView} from './components/index.ts'
 import {useStore} from "@store";
 import {useRoute} from "vue-router";
+
 const {body} = document
 const WIDTH = 992
 
@@ -38,14 +39,7 @@ export default defineComponent({
   setup() {
     const store = useStore()
 
-    const device = computed(() => {
-      return store.state.app.device
-    })
-
-    const sidebar = computed(() => {
-      return store.state.app.sidebar
-    })
-
+    const sidebar = computed(() => store.state.app.sidebar)
     const isMobile = () => {
       const rect = body.getBoundingClientRect()
       return rect.width - 1 < WIDTH
@@ -81,7 +75,6 @@ export default defineComponent({
       }
     })
 
-
     const state = reactive({
       handleClickOutside: () => {
         store.dispatch('app/closeSideBar', false)
@@ -90,10 +83,10 @@ export default defineComponent({
 
     const classObj = computed(() => {
       return {
-        hideSidebar: !sidebar.opened,
-        openSidebar: sidebar.opened,
-        withoutAnimation: sidebar.withoutAnimation,
-        mobile: device === 'mobile'
+        hideSidebar:  !store.state.app.sidebar.opened,
+        openSidebar: store.state.app.sidebar.opened,
+        withoutAnimation: store.state.app.sidebar.withoutAnimation,
+        mobile: store.state.app.device === 'mobile'
       }
     })
     const showSettings = computed(() => {
@@ -124,10 +117,10 @@ export default defineComponent({
 
     return {
       classObj,
-      sidebar,
       showSettings,
       needTagsView,
       fixedHeader,
+      sidebar,
       ...toRefs(state)
     }
   }

src/router/index.ts

@@ -2,13 +2,12 @@ import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
 import Layout from '@/layout/index.vue'
 
 
-// 参数配置: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
-
+// 参数说明: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 export const constantRoutes: Array<RouteRecordRaw> = [
     {
         path: '/redirect',
         component: Layout,
-        hidden: true,
+        meta: {hidden: true},
         children: [
             {
                 path: '/redirect/:path(.*)',
@@ -19,22 +18,23 @@ export const constantRoutes: Array<RouteRecordRaw> = [
     {
         path: '/login',
         component: () => import('@/views/login/index.vue'),
-        hidden: true
+        meta: {hidden: true}
     },
     {
         path: '/404',
         component: () => import('@/views/error-page/404.vue'),
-        hidden: true
+        meta: {hidden: true}
     },
     {
         path: '/401',
         component: () => import('@/views/error-page/401.vue'),
-        hidden: true
+        meta:{hidden: true}
     },
     {
         path: '/',
         component: Layout,
         redirect: '/dashboard',
+        meta:{hidden:true},
         children: [
             {
                 path: 'dashboard',
@@ -46,7 +46,6 @@ export const constantRoutes: Array<RouteRecordRaw> = [
     }
 ]
 
-
 const router = createRouter({
     history: createWebHashHistory(),
     routes: constantRoutes

src/store/index.ts

@@ -3,7 +3,7 @@ import {createStore,useStore as baseUseStore ,Store} from 'vuex'
 import {RootStateTypes} from "@store/interface";
 
 // Vite 使用特殊的 import.meta.glob 函数从文件系统导入多个模块
-// see https://cn.vitejs.dev/guide/features.html#glob-import
+// @see https://cn.vitejs.dev/guide/features.html#glob-import
 const moduleFiles = import.meta.globEager('./modules/*.ts')
 const paths:string[]=[]
 

src/store/interface.ts

@@ -9,7 +9,6 @@ export interface UserState {
     perms: string[]
 }
 
-
 export interface AppState {
     device: string,
     sidebar: {
@@ -26,7 +25,6 @@ export interface SettingState {
     sidebarLogo: boolean
 }
 
-
 export interface PermissionState{
     routes:RouteRecordRaw[]
     addRoutes: RouteRecordRaw[]
@@ -41,12 +39,11 @@ export interface TagsViewState{
     cachedViews: (string|undefined)[]
 }
 
-
 // 顶级类型声明
 export interface RootStateTypes {
     user: UserState,
     app: AppState,
-    setting: SettingState,
+    settings: SettingState,
     permission:PermissionState,
     tagsView:TagsViewState
 }

src/store/modules/app.ts

@@ -14,6 +14,7 @@ const appModule: Module<AppState, RootStateTypes> = {
     mutations: {
         TOGGLE_SIDEBAR: state => {
             state.sidebar.opened = !state.sidebar.opened
+            console.log('state.sidebar.opened',state.sidebar.opened)
             state.sidebar.withoutAnimation = false
             if (state.sidebar.opened) {
                 Local.set('sidebarStatus', 1)
@@ -27,6 +28,7 @@ const appModule: Module<AppState, RootStateTypes> = {
             state.sidebar.withoutAnimation = withoutAnimation
         },
         TOGGLE_DEVICE: (state, device) => {
+            console.log('TOGGLE_DEVICE',device)
             state.device = device
         }
     },
@@ -37,7 +39,7 @@ const appModule: Module<AppState, RootStateTypes> = {
         closeSideBar({commit}, {withoutAnimation}) {
             commit('CLOSE_SIDEBAR', withoutAnimation)
         },
-        toggleDevice({commit}, device) {
+       async toggleDevice({commit}, device) {
             commit('TOGGLE_DEVICE', device)
         }
     }

src/styles/variables.scss.d.ts

@@ -0,0 +1,9 @@
+export interface IScssVariables {
+    menuBg: string
+    menuText: string
+    menuActiveText: string
+}
+
+export const variables: IScssVariables
+
+export default variables

src/views/system/user/index.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "index"
+}
+</script>
+
+<style scoped>
+
+</style>

vite.config.ts

@@ -12,6 +12,7 @@ export default ({command, mode}: ConfigEnv): UserConfig => {
 
     return (
         {
+
             plugins: [
                 vue(),
                 viteSvgIcons({
@@ -35,6 +36,7 @@ export default ({command, mode}: ConfigEnv): UserConfig => {
                     }
                 }
             },
+
             resolve: {
                 // Vite2设置别名路径方式一
                 // alias:{