Merge branch 'master' of https://gitee.com/yuanzbz/vue-admin-perfect into vue-i18n

Conflicts: src/layout/components/SubMenu/SubItem.vue
2023-03-02 10:12:43 +08:00 · 2023-03-02 10:12:43 +08:00 · 76cb2b7890
parent 0f5b8e0422 321931f6de
commit 76cb2b7890
21 changed files with 147 additions and 238 deletions
--- a/src/layout/LayoutColumns/index.vue
+++ b/src/layout/LayoutColumns/index.vue
@ -37,10 +37,7 @@
          :collapse-transition="false"
          class="menu-columns"
        >
-          <SubMenu
-            :basePath="basePath"
-            :menuList="subMenus"
-          />
+          <SubMenu :menuList="subMenus" />
        </el-menu>
      </el-scrollbar>
    </div>
@ -64,7 +61,6 @@ import { ref, computed, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import {usePermissionStore} from "@/store/modules/permission"
 import { useSettingStore } from "@/store/modules/setting";
-import SubItem from '../components/SubMenu/SubItem.vue'
 import Footer from '../components/Footer/index.vue'
 import SubMenu from '../components/SubMenu/SubMenu.vue'
 import TagsView from '../components/TagsView/index.vue'
@ -89,9 +85,6 @@ const themeConfig = computed(() =>SettingStore.themeConfig)
 const isCollapse = computed(() =>!SettingStore.isCollapse)
 const activeMenu = computed(() => {
  const { meta, path } = route
-  if (meta.activeMenu) {
-    return meta.activeMenu
-  }
  return path
 })
 const basePath = ref<string>('/')
@ -158,7 +151,7 @@ const handleChangeMenu = (item)=>{
      transition: all .3s ease;
    }
    .active-menu{
-      background: #1890ff;
+      background:  $primaryColor;
      border-radius: 5px;
    }
    .title{
--- a/src/layout/LayoutHorizontal/HeaderHorizontal/index.vue
+++ b/src/layout/LayoutHorizontal/HeaderHorizontal/index.vue
@ -16,12 +16,7 @@
            :collapse-transition="false"
            class="menu-horizontal"
        >
-          <SubItem
-              v-for="route in permission_routes"
-              :key="route.path"
-              :item="route"
-              :base-path="route.path"
-          />
+          <SubMenu :menuList="permission_routes"/>
        </el-menu>
        <HeaderToolRight/>
      </div>
@ -34,7 +29,7 @@
 import Height from '../../components/Header/components/Height.vue'
 import HeaderToolRight from '../../components/Header/ToolRight.vue'
 import TagsView from '../../components/TagsView/index.vue'
-import SubItem from '../../components/SubMenu/SubItem.vue'
+import SubMenu from '../../components/SubMenu/SubMenu.vue'
 import { useRoute } from 'vue-router'
 import {usePermissionStore} from "@/store/modules/permission"
 const PermissionStore = usePermissionStore()
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@ -11,12 +11,7 @@
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
      >
-        <SubItem
-            v-for="route in permission_routes"
-            :key="route.path"
-            :item="route"
-            :base-path="route.path"
-        />
+        <SubMenu :menuList="permission_routes"/>
      </el-menu>
    </el-scrollbar>
  </div>
@ -24,7 +19,6 @@

 <script lang="ts" setup>
 import Logo from './components/Logo.vue'
-import SubItem from '../SubMenu/SubItem.vue'
 import SubMenu from '../SubMenu/SubMenu.vue'
 import {useSettingStore} from "@/store/modules/setting"
 import {usePermissionStore} from "@/store/modules/permission"
--- a/src/layout/components/SubMenu/Link.vue
+++ b/src/layout/components/SubMenu/Link.vue
@ -1,49 +0,0 @@
-<template>
-  <component :is="type" v-bind="linkProps(to)">
-    <slot />
-  </component>
-</template>
-
-<script lang="ts">
-  import { isExternal } from '@/utils/validate.js'
-
-  export default {
-    props: {
-      to: {
-        type: String,
-        required: true,
-      },
-    },
-    computed: {
-      isExternal() {
-        return isExternal(this.to)
-      },
-      type() {
-        if (this.isExternal) {
-          return 'a'
-        }
-        return 'router-link'
-      },
-    },
-    methods: {
-      linkProps(to) {
-        if (this.isExternal) {
-          return {
-            href: to,
-            target: '_blank',
-            rel: 'noopener',
-          }
-        }
-        return {
-          to: to,
-        }
-      },
-    },
-  }
-</script>
-
-<style lang="scss" scoped>
-  a {
-    text-decoration: none;
-  }
-</style>
--- a/src/layout/components/SubMenu/MenuItem.vue
+++ b/src/layout/components/SubMenu/MenuItem.vue
@ -0,0 +1,35 @@
+<template>
+  <el-menu-item
+             :index="subItem.path"
+             @click="handleClickMenu(subItem)">
+    <el-icon>
+      <component :is="subItem?.meta?.icon"></component>
+    </el-icon>
+    <template #title>
+      <span>{{ subItem?.meta?.title }}</span>
+    </template>
+  </el-menu-item>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { isExternal } from "@/utils/validate";
+
+const router = useRouter();
+let props = defineProps({
+  menuList:{
+    type:Array,
+    default:()=>[]
+  },
+  subItem:{
+    type:Object,
+    default:()=>{}
+  },
+})
+
+const handleClickMenu = (subItem) => {
+  if (isExternal(subItem.path)) return window.open(subItem.path, "_blank");
+  router.push(subItem.path);
+};
+</script>
--- a/src/layout/components/SubMenu/SubItem.vue
+++ b/src/layout/components/SubMenu/SubItem.vue
@ -1,81 +0,0 @@
-<template>
-  <template v-if="!item.hidden">
-    <template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)">
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)">
-          <el-icon :size="20">
-            <component :is="onlyOneChild?.meta.icon"></component>
-          </el-icon>
-<!--          <template #title>{{ onlyOneChild.meta && onlyOneChild.meta.title }}</template>-->
-          <template #title>{{ generateTitle(onlyOneChild) }}</template>
-        </el-menu-item>
-      </app-link>
-    </template>
-    <el-sub-menu :index="resolvePath(item.path)" v-else >
-      <template #title>
-        <el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon>
-        <span>{{ generateTitle(item) }}</span>
-      </template>
-      <sub-item
-          v-for="child in item.children"
-          :key="child.path"
-          :item="child"
-          :base-path="resolvePath(child.path)"
-      />
-    </el-sub-menu>
-  </template>
-</template>
-
-<script lang="ts" setup name="subItem">
-import { generateTitle } from '@/utils/i18n'
-import { isExternal } from '@/utils/validate.js'
-import AppLink from './Link.vue'
-import path from 'path-browserify'
-import { ref, computed } from 'vue'
-const props = defineProps({
-  item: {
-    type: Object,
-    required: true,
-  },
-  basePath: {
-    type: String,
-    default: '',
-  },
-})
-
-const onlyOneChild = ref(null)
-const hasOneShowingChild = (children = [], parent) => {
-
-  const showingChildren = children.filter((item) => {
-    // 过滤掉需要隐藏的菜单
-    if (item.hidden) {
-      return false
-    } else {
-      // 临时设置（如果只有一个显示子项，则将使用）
-      onlyOneChild.value = item
-      return true
-    }
-  })
-  // 当只有一个子路由器时，默认情况下会显示该子路由器
-  if (showingChildren.length === 1) {
-    return true
-  }
-  // 如果没有要显示的子路由器，则显示父路由器
-  if (showingChildren.length === 0) {
-    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
-    return true
-  }
-
-  return false
-}
-
-const resolvePath = (routePath) => {
-  if (isExternal(routePath)) {
-    return routePath
-  }
-  if (isExternal(props.basePath)) {
-    return props.basePath
-  }
-  return path.resolve(props.basePath, routePath)
-}
-</script>
--- a/src/layout/components/SubMenu/SubMenu.vue
+++ b/src/layout/components/SubMenu/SubMenu.vue
@ -1,43 +1,54 @@
 <template>
  <template v-for="subItem in menuList" :key="subItem.path">
-    <el-sub-menu v-if="subItem.children && subItem.children.length > 0" :index="subItem.path">
-      <template #title>
-        <el-icon>
-          <component :is="subItem?.meta?.icon"></component>
-        </el-icon>
-        <span>{{ subItem?.meta?.title }}</span>
+    <template v-if="!subItem.hidden">
+      <template v-if="!subItem.alwaysShow&&hasOneChild(subItem.children, subItem)">
+        <MenuItem
+          :subItem="hasOneChild(subItem.children, subItem)"
+        />
      </template>
-      <SubMenu :menuList="subItem.children" :basePath="`${basePath?'/':''}${subItem.path}`"/>
-    </el-sub-menu>
-    <el-menu-item v-else-if="!subItem.hidden" :index="subItem.path" @click="handleClickMenu(subItem)">
-      <el-icon>
-        <component :is="subItem?.meta?.icon"></component>
-      </el-icon>
-      <template #title>
-        <span>{{ subItem?.meta?.title }}</span>
-      </template>
-    </el-menu-item>
+      <el-sub-menu v-else :index="subItem.path">
+        <template #title>
+          <el-icon>
+            <component :is="subItem?.meta?.icon"></component>
+          </el-icon>
+          <span>{{ subItem?.meta?.title }}</span>
+        </template>
+        <SubMenu :menuList="subItem.children" />
+      </el-sub-menu>
+    </template>
  </template>
 </template>

 <script setup lang="ts">
-import { useRouter } from "vue-router";
-import { isExternal } from '@/utils/validate.js'
+import { ref } from "vue";
+import MenuItem from './MenuItem.vue'
+
 let props = defineProps({
  menuList:{
    type:Array,
    default:()=>[]
  },
-  basePath: {
-    type: String,
-    default: '',
-  },
 })

-const router = useRouter();
-const handleClickMenu = (subItem) => {
-  if (isExternal(subItem.path)) return window.open(subItem.path, "_blank");
-  let path = props.basePath+'/'+subItem.path
-  router.push(path);
-};
+const hasOneChild = (children = [], parent) => {
+  const showingChildren = children.filter((item) => {
+    // 过滤掉需要隐藏的菜单
+    if (item.hidden) {
+      return false
+    } else {
+      return true
+    }
+  })
+  // 当只有一个子路由器时，默认情况下会显示该子路由器
+  if (showingChildren.length === 1) {
+   // （如果只有一个显示子项，则将使用）
+    return showingChildren[0]
+  }
+  // 如果没有要显示的子路由器，则显示父路由器
+  if (showingChildren.length === 0) {
+    return parent
+  }
+  return false
+}
+
 </script>
--- a/src/routers/modules/chat.ts
+++ b/src/routers/modules/chat.ts
@ -13,11 +13,11 @@ const chartsRouter = [{
    },
    children: [
        {
-            path: 'index',
+            path: '/chat/index',
            component: () => import('@/views/chat/index.vue'),
            name: 'chatBox',
            meta: { title: '聊天框', icon: 'chat-square'  }
-        },
+        }
    ]
 }]

--- a/src/routers/modules/echarts.ts
+++ b/src/routers/modules/echarts.ts
@ -14,33 +14,33 @@ const echartsRouter = [{
    },
    children: [
        {
-            path: 'migration',
+            path: '/echarts/migration',
            component: () => import('@/views/echarts/migrationMap/index.vue'),
            name: 'migration',
            meta: { title: '迁徙图',  roles:['other'] , icon: 'MenuIcon' }
        },

        {
-            path: 'bar',
+            path: '/echarts/bar',
            component: () => import('@/views/echarts/barEcharts/index.vue'),
            name: 'bar',
            meta: { title: '柱状图', roles:['other'] , icon: 'MenuIcon'}
        },
        {
-            path: 'graph',
+            path: '/echarts/graph',
            component: () => import('@/views/echarts/graphEcharts/index.vue'),
            name: 'graph',
            meta: { title: '雷达图', roles:['other'] , icon: 'MenuIcon'}
        },

        {
-            path: 'pie',
+            path: '/echarts/pie',
            component: () => import('@/views/echarts/pieEcharts/index.vue'),
            name: 'pie',
            meta: { title: '饼图', roles:['other'] , icon: 'MenuIcon'}
        },
        {
-            path: 'simple',
+            path: '/echarts/simple',
            component: () => import('@/views/echarts/simple/index.vue'),
            name: 'echarts-simple',
            meta: { title: '简单图表', roles:['other'] , icon: 'MenuIcon'}
--- a/src/routers/modules/excel.ts
+++ b/src/routers/modules/excel.ts
@ -13,31 +13,31 @@ const excelRouter = [{
    },
    children: [
        {
-            path: 'export-excel',
+            path: '/excel/export-excel',
            component: () => import('@/views/excel/exportExcel/index.vue'),
            name: 'export-excel',
            meta: { title: '导出 Excel', icon: 'MenuIcon'}
        },
        {
-            path: 'export-merge-header',
+            path: '/excel/export-merge-header',
            component: () => import('@/views/excel/exportMergeHeader/index.vue'),
            name: 'export-merge-header',
            meta: { title: '导出 多级表头', icon: 'MenuIcon' }
        },
        {
-            path: 'upload-style-excel',
+            path: '/excel/upload-style-excel',
            component: () => import('@/views/excel/exportStyleExcel/index.vue'),
            name: 'upload-style-excel',
            meta: { title: '自定义样式导出 Excel', icon: 'MenuIcon' }
        },
        {
-            path: 'upload-excel',
+            path: '/excel/upload-excel',
            component: () => import('@/views/excel/uploadExcel/index.vue'),
            name: 'upload-excel',
            meta: { title: '上传 Excel', icon: 'MenuIcon' }
        },
        {
-            path: 'zip',
+            path: '/excel/zip',
            component: () => import('@/views/excel/zip/index.vue'),
            name: 'Zip',
            meta: { title: '导出 Zip', roles:['other'] ,icon: 'MenuIcon',}
--- a/src/routers/modules/externalLink.ts
+++ b/src/routers/modules/externalLink.ts
@ -13,7 +13,7 @@ const externalLink = [{
    },
    children: [
        {
-            path: 'wechat',
+            path: '/external-link/wechat',
            name: 'wechat',
            component: () => import('@/views/externalLinks/wechat/index.vue'),
            meta: { title: '加微信群',  icon: 'MenuIcon' }
@ -35,7 +35,7 @@ const externalLink = [{
            component: () => import('@/views/externalLinks/simple/index.vue'),
        },
        {
-            path: 'iframe',
+            path: '/external-link/iframe',
            component: () => import('@/views/externalLinks/iframe/index.vue'),
            name: 'iframe',
            meta: { title: '内嵌 iframe', icon: 'MenuIcon'  }
--- a/src/routers/modules/form.ts
+++ b/src/routers/modules/form.ts
@ -15,25 +15,25 @@ const formRouter = [{
    },
    children: [
        {
-            path: 'validateForm',
+            path: '/form/validateForm',
            component: () => import('@/views/form/validateForm/index.vue'),
            name: 'validateForm',
            meta: { title: '校验 Form', keepAlive: true , icon: 'MenuIcon'}
        },
        {
-            path: 'advancedForm',
+            path: '/form/advancedForm',
            component: () => import('@/views/form/advancedForm/index.vue'),
            name: 'advancedForm',
            meta: { title: '收缩 Form',  icon: 'MenuIcon'}
        },
        {
-            path: 'appendForm',
+            path: '/form/appendForm',
            component: () => import('@/views/form/appendForm/index.vue'),
            name: 'appendForm',
            meta: { title: '增删 Form', keepAlive: true , icon: 'MenuIcon'}
        },
        {
-            path: 'moreForm',
+            path: '/form/moreForm',
            component: () => import('@/views/form/moreForm/index.vue'),
            name: 'moreForm',
            meta: { title: '多表单验证', keepAlive: true , icon: 'MenuIcon'}
--- a/src/routers/modules/functionPage.ts
+++ b/src/routers/modules/functionPage.ts
@ -14,31 +14,31 @@ const functionPageRouter = [{
    },
    children: [
        {
-            path: 'tools',
+            path: '/function-page/tools',
            component: () => import('@/views/functionPage/tools/index.vue'),
            name: 'tools',
            meta: { title: '工具链集合', keepAlive: true , icon: 'MenuIcon'}
        },
        {
-            path: '404',
+            path: '/function-page/404',
            component: () => import('@/views/errorPages/404.vue'),
            name: 'function-404',
            meta: { title: '404 页面', keepAlive: true , icon: 'MenuIcon'}
        },
        {
-            path: '403',
+            path: '/function-page/403',
            component: () => import('@/views/errorPages/403.vue'),
            name: 'function-403',
            meta: { title: '403 页面', keepAlive: true , icon: 'MenuIcon'}
        },
        {
-            path: 'fullscreen',
+            path: '/function-page/fullscreen',
            component: () => import('@/views/functionPage/fullscreen/index.vue'),
            name: 'fullscreen',
            meta: { title: '元素 全屏', keepAlive: true , icon: 'MenuIcon'}
        },
        {
-            path: 'information-list',
+            path: '/function-page/information-list',
            component: () => import('@/views/functionPage/informationList/index.vue'),
            name: 'informationList',
            meta: { title: '信息列表', keepAlive: true , icon: 'MenuIcon'}
--- a/src/routers/modules/nested.ts
+++ b/src/routers/modules/nested.ts
@ -15,7 +15,7 @@ const nestedRouter = [{
    },
    children: [
      {
-        path: 'menu1',
+        path: '/nested/menu1',
        component: () => import('@/views/nested/menu1/index.vue'),
        name: 'menu1',
        meta: { title: '菜单1', icon: 'MenuIcon' },
@ -23,26 +23,26 @@ const nestedRouter = [{
        redirect: '/nested/menu1/menu1-1',
        children: [
          {
-            path: 'menu1-1',
+            path: '/nested/menu1/menu1-1',
            component: () => import('@/views/nested/menu1/menu1-1/index.vue'),
            name: 'menu1-1',
            meta: { title: '菜单 1-1' , icon: 'MenuIcon'}
          },
          {
-            path: 'menu1-2',
+            path: '/nested/menu1/menu1-2',
            component: () => import('@/views/nested/menu1/menu1-2/index.vue'),
            name: 'menu1-2',
            redirect: '/nested/menu1/menu1-2/menu1-2-1',
            meta: { title: '菜单 1-2' , icon: 'MenuIcon'},
            children: [
              {
-                path: 'menu1-2-1',
+                path: '/nested/menu1/menu1-2/menu1-2-1',
                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1/index.vue'),
                name: 'menu1-2-1',
                meta: { title: '菜单 1-2-1' , icon: 'MenuIcon'}
              },
              {
-                path: 'menu1-2-2',
+                path: '/nested/menu1/menu1-2/menu1-2-2',
                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2/index.vue'),
                name: 'menu1-2-2',
                meta: { title: '菜单 1-2-2' , icon: 'MenuIcon'}
@ -50,7 +50,7 @@ const nestedRouter = [{
            ]
          },
          {
-            path: 'menu1-3',
+            path: '/nested/menu1/menu1-3',
            component: () => import('@/views/nested/menu1/menu1-3/index.vue'),
            name: 'menu1-3',
            meta: { title: '菜单 1-3' , icon: 'MenuIcon'}
@ -58,7 +58,7 @@ const nestedRouter = [{
        ]
      },
        {
-            path: 'menu2',
+            path: '/nested/menu2',
            component: () => import('@/views/nested/menu2/index.vue'),
            name: 'nested-menu2',
            meta: { title: '菜单2', icon: 'MenuIcon'}
--- a/src/routers/modules/other.ts
+++ b/src/routers/modules/other.ts
@ -13,91 +13,91 @@ const othersRouter = [{
  },
  children: [
    {
-      path: 'clipboard',
+      path: '/other/clipboard',
      component: () => import('@/views/other/clipboard/index.vue'),
      name: 'clipboard',
      meta: { title: '剪贴板',  roles:['other'] ,icon: 'MenuIcon',}
    },
    {
-      path: 'editor',
+      path: '/other/editor',
      component: () => import('@/views/other/editor/index.vue'),
      name: 'editor',
      meta: { title: '富文本编辑器', roles: ['other'] , icon: 'MenuIcon'}
    },
    {
-      path: 'code-mirror',
+      path: '/other/code-mirror',
      component: () => import('@/views/other/codeMirror/index.vue'),
      name: 'code-mirror',
      meta: { title: '代码编辑器', roles: ['other'] , icon: 'MenuIcon'}
    },
    {
-      path: 'mark-down',
+      path: '/other/mark-down',
      component: () => import('@/views/other/markDown/index.vue'),
      name: 'mark-down',
      meta: { title: 'markDown', roles: ['other'] , icon: 'MenuIcon'}
    },
    {
-      path: 'print',
+      path: '/other/print',
      component: () => import('@/views/other/print/index.vue'),
      name: 'print',
      meta: { title: '打印' , icon: 'MenuIcon'}
    },
    {
-      path: 'cropper',
+      path: '/other/cropper',
      component: () => import('@/views/other/cropper/index.vue'),
      name: 'cropper',
      meta: { title: '头像裁剪' , icon: 'MenuIcon'}
    },
    {
-      path: 'card-drag',
+      path: '/other/card-drag',
      component: () => import('@/views/other/cardDrag/index.vue'),
      name: 'card-drag',
      meta: { title: '卡片拖拽', icon: 'MenuIcon' }
    },
    {
-      path: 'upload',
+      path: '/other/upload',
      component: () => import('@/views/other/upload/index.vue'),
      name: 'upload',
      meta: { title: '上传图片', icon: 'MenuIcon' }
    },
    {
-      path: 'qrcode',
+      path: '/other/qrcode',
      component: () => import('@/views/other/qrcode/index.vue'),
      name: 'qrcode',
      meta: { title: '生成二维码', icon: 'MenuIcon' }
    },
    {
-      path: 'svgIcon',
+      path: '/other/svgIcon',
      component: () => import('@/views/other/svgIcon/index.vue'),
      name: 'svgIcon',
      meta: { title: 'svg 图标', icon: 'MenuIcon' }
    },
    {
-      path: 'iconfont',
+      path: '/other/iconfont',
      component: () => import('@/views/other/iconfont/index.vue'),
      name: 'iconfont',
      meta: { title: '阿里图标库', icon: 'MenuIcon' }
    },
    {
-      path: 'water-marker',
+      path: '/other/water-marker',
      component: () => import('@/views/other/waterMarker/index.vue'),
      name: 'water-marker',
      meta: { title: '生成水印' , icon: 'MenuIcon'}
    },
    {
-      path: 'right-menu',
+      path: '/other/right-menu',
      component: () => import('@/views/other/rightMenu/index.vue'),
      name: 'right-menu',
      meta: { title: '右键菜单' , icon: 'MenuIcon'}
    },
    {
-      path: 'count',
+      path: '/other/count',
      component: () => import('@/views/other/count/index.vue'),
      name: 'count',
      meta: { title: '数字动画', icon: 'MenuIcon' }
    },
    {
-      path: 'text-clamp',
+      path: '/other/text-clamp',
      component: () => import('@/views/other/textClamp/index.vue'),
      name: 'text-clamp',
      meta: { title: '多行文本省略', icon: 'MenuIcon' }
--- a/src/routers/modules/system.ts
+++ b/src/routers/modules/system.ts
@ -13,31 +13,31 @@ const systemRouter = [{
    },
    children: [
        {
-            path: 'user',
+            path: '/system/user',
            component: () => import('@/views/system/user/index.vue'),
            name: 'user',
            meta: { title: '用户管理' , icon: 'MenuIcon'}
        },
        {
-            path: 'dept',
+            path: '/system/dept',
            component: () => import('@/views/system/dept/index.vue'),
            name: 'dept',
            meta: { title: '部门管理' , icon: 'MenuIcon'}
        },
        {
-            path: 'role',
+            path: '/system/role',
            component: () => import('@/views/system/role/index.vue'),
            name: 'role',
            meta: { title: '角色管理', icon: 'MenuIcon' }
        },
        {
-            path: 'menu',
+            path: '/system/menu',
            component: () => import('@/views/system/menu/index.vue'),
            name: 'menu',
            meta: { title: '菜单管理',  icon: 'MenuIcon'}
        },
        {
-            path: 'dictionary',
+            path: '/system/dictionary',
            component: () => import('@/views/system/dictionary/index.vue'),
            name: 'dictionary',
            meta: { title: '字典管理',  icon: 'MenuIcon'}
--- a/src/routers/modules/table.ts
+++ b/src/routers/modules/table.ts
@ -14,19 +14,19 @@ const tableRouter = [{
    },
    children: [
        {
-            path: 'comprehensive',
+            path: '/table/comprehensive',
            component: () => import('@/views/table/ComprehensiveTable/index.vue'),
            name: 'comprehensive',
            meta: { title: '综合表格', keepAlive: true , icon: 'MenuIcon'}
        },
        {
-            path: 'inlineTable',
+            path: '/table/inlineTable',
            component: () => import('@/views/table/InlineEditTable/index.vue'),
            name: 'inlineTable',
            meta: { title: '行内编辑', keepAlive: true  , icon: 'MenuIcon'}
        },
        {
-            path: 'editableProTable',
+            path: '/table/editableProTable',
            component: () => import('@/views/table/EditableProTable/index.vue'),
            name: 'editableProTable',
            meta: { title: '可编辑表格', keepAlive: true  , icon: 'MenuIcon'}
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@ -1,7 +1,7 @@
 import {defineStore} from 'pinia'
 import { asyncRoutes, constantRoutes,routerArray,notFoundRouter } from '@/routers/index'
 import {hasPermission,filterAsyncRoutes} from "@/utils/routers"
-import {filterKeepAlive} from "../../utils/routers";
+import {filterKeepAlive,filterRoutes} from "@/utils/routers";
 export const usePermissionStore = defineStore({
    // id: 必须的，在所有 Store 中唯一
    id:'permissionState',
--- a/src/utils/routers.ts
+++ b/src/utils/routers.ts
@ -1,4 +1,4 @@
-
+import path from 'path-browserify'
 /**
 * 通过递归过滤异步路由表
 * @param routes asyncRoutes
@ -53,3 +53,14 @@ export function filterKeepAlive(routers){
    deep(routers)
    return cacheRouter
 }
+
+
+
+export function handleRoutes(routers,pathUrl='') {
+    routers.forEach(item=>{
+        item.path = path.resolve(pathUrl,item.path)
+        if(item.children&&item.children.length){
+
+        }
+    })
+}
--- a/src/views/home/index.scss
+++ b/src/views/home/index.scss
@ -45,7 +45,7 @@
  }
 }
 .custom {
-  ::v-deep(.el-card__body) {
+  :deep(.el-card__body) {
    padding: 0;
  }
 }
--- a/src/views/table/EditableProTable/index.vue
+++ b/src/views/table/EditableProTable/index.vue
@ -146,7 +146,7 @@ const config = () => {
 </script>

 <style lang="scss" scoped>
-::v-deep(.el-divider--horizontal) {
+:deep(.el-divider--horizontal) {
  margin: 10px 0;
 }
 </style>