diff --git a/src/layout/LayoutColumns/index.vue b/src/layout/LayoutColumns/index.vue
index 31c1580..4687814 100644
--- 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{
diff --git a/src/layout/LayoutHorizontal/HeaderHorizontal/index.vue b/src/layout/LayoutHorizontal/HeaderHorizontal/index.vue
index e119afc..bae598c 100644
--- 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()
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index f408c4a..c02f18f 100644
--- 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"
diff --git a/src/layout/components/SubMenu/Link.vue b/src/layout/components/SubMenu/Link.vue
deleted file mode 100644
index 7673683..0000000
--- a/src/layout/components/SubMenu/Link.vue
+++ /dev/null
@@ -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>
diff --git a/src/layout/components/SubMenu/MenuItem.vue b/src/layout/components/SubMenu/MenuItem.vue
new file mode 100644
index 0000000..80dfb1d
--- /dev/null
+++ 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>
diff --git a/src/layout/components/SubMenu/SubItem.vue b/src/layout/components/SubMenu/SubItem.vue
deleted file mode 100644
index 0578c94..0000000
--- a/src/layout/components/SubMenu/SubItem.vue
+++ /dev/null
@@ -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>
diff --git a/src/layout/components/SubMenu/SubMenu.vue b/src/layout/components/SubMenu/SubMenu.vue
index eac457d..5e09c4a 100644
--- 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>
diff --git a/src/routers/modules/chat.ts b/src/routers/modules/chat.ts
index de179fa..4b63082 100644
--- 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'  }
-        },
+        }
     ]
 }]
 
diff --git a/src/routers/modules/echarts.ts b/src/routers/modules/echarts.ts
index f45476c..e414859 100644
--- 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'}
diff --git a/src/routers/modules/excel.ts b/src/routers/modules/excel.ts
index 747980a..01b4c57 100644
--- 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',}
diff --git a/src/routers/modules/externalLink.ts b/src/routers/modules/externalLink.ts
index 7e421ce..2f06c5b 100644
--- 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'  }
diff --git a/src/routers/modules/form.ts b/src/routers/modules/form.ts
index 92d0c11..71c0fa9 100644
--- 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'}
diff --git a/src/routers/modules/functionPage.ts b/src/routers/modules/functionPage.ts
index d514250..a907017 100644
--- 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'}
diff --git a/src/routers/modules/nested.ts b/src/routers/modules/nested.ts
index a455c1b..2a6e96d 100644
--- 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'}
diff --git a/src/routers/modules/other.ts b/src/routers/modules/other.ts
index 3de83c4..2b082e0 100644
--- 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' }
diff --git a/src/routers/modules/system.ts b/src/routers/modules/system.ts
index a632540..448bdc5 100644
--- 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'}
diff --git a/src/routers/modules/table.ts b/src/routers/modules/table.ts
index d37e445..cfec74f 100644
--- 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'}
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index 4f44c67..864e623 100644
--- 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',
diff --git a/src/utils/routers.ts b/src/utils/routers.ts
index 9c658cc..930c70c 100644
--- 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){
+
+        }
+    })
+}
diff --git a/src/views/home/index.scss b/src/views/home/index.scss
index 079c9d9..197c9c5 100644
--- 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;
   }
 }
diff --git a/src/views/table/EditableProTable/index.vue b/src/views/table/EditableProTable/index.vue
index ea3f0a3..0c048a4 100644
--- 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>