From b45c0f4b0804b3f9cd79a850f1a07a9a21b98e16 Mon Sep 17 00:00:00 2001 From: zouzhibing Date: Thu, 2 Mar 2023 10:08:16 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E9=87=8D=E6=9E=84:=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=EF=BC=8C=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/LayoutColumns/index.vue | 11 +-- .../HeaderHorizontal/index.vue | 9 +-- src/layout/components/Sidebar/index.vue | 8 +- src/layout/components/SubMenu/Link.vue | 49 ------------ src/layout/components/SubMenu/MenuItem.vue | 35 ++++++++ src/layout/components/SubMenu/SubItem.vue | 79 ------------------- src/layout/components/SubMenu/SubMenu.vue | 68 +++++++++------- src/routers/modules/chat.ts | 4 +- src/routers/modules/echarts.ts | 10 +-- src/routers/modules/excel.ts | 10 +-- src/routers/modules/externalLink.ts | 4 +- src/routers/modules/form.ts | 8 +- src/routers/modules/functionPage.ts | 10 +-- src/routers/modules/nested.ts | 14 ++-- src/routers/modules/other.ts | 30 +++---- src/routers/modules/system.ts | 10 +-- src/routers/modules/table.ts | 6 +- src/store/modules/permission.ts | 2 +- src/utils/routers.ts | 13 ++- src/views/home/index.scss | 2 +- src/views/table/EditableProTable/index.vue | 2 +- 21 files changed, 147 insertions(+), 237 deletions(-) delete mode 100644 src/layout/components/SubMenu/Link.vue create mode 100644 src/layout/components/SubMenu/MenuItem.vue delete mode 100644 src/layout/components/SubMenu/SubItem.vue 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" > - + @@ -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('/') @@ -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" > - + @@ -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" > - + @@ -24,7 +19,6 @@ - - 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 @@ + + + diff --git a/src/layout/components/SubMenu/SubItem.vue b/src/layout/components/SubMenu/SubItem.vue deleted file mode 100644 index 2d58929..0000000 --- a/src/layout/components/SubMenu/SubItem.vue +++ /dev/null @@ -1,79 +0,0 @@ - - - diff --git a/src/layout/components/SubMenu/SubMenu.vue b/src/layout/components/SubMenu/SubMenu.vue index eac457d..f758e59 100644 --- a/src/layout/components/SubMenu/SubMenu.vue +++ b/src/layout/components/SubMenu/SubMenu.vue @@ -1,43 +1,53 @@ 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 = () => { From 321931f6def7e26614e7dfc1c75d4b640fa52267 Mon Sep 17 00:00:00 2001 From: zouzhibing Date: Thu, 2 Mar 2023 10:10:35 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=80=A7=E8=83=BD:=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=88=A4=E6=96=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/components/SubMenu/SubMenu.vue | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/layout/components/SubMenu/SubMenu.vue b/src/layout/components/SubMenu/SubMenu.vue index f758e59..5e09c4a 100644 --- a/src/layout/components/SubMenu/SubMenu.vue +++ b/src/layout/components/SubMenu/SubMenu.vue @@ -1,10 +1,11 @@