From 945e31290e447d091644cea6e820e4944322eb60 Mon Sep 17 00:00:00 2001 From: zhuoda Date: Sun, 13 Nov 2022 21:21:16 +0800 Subject: [PATCH] =?UTF-8?q?v2.0=20=E6=9B=B4=E6=96=B0vite3.2.3=EF=BC=8C?= =?UTF-8?q?=E9=80=9F=E5=BA=A6=E9=9D=9E=E5=B8=B8=E5=BF=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../javascript-ant-design-vue3/package.json | 7 +- .../components/side-menu/recursion-menu.vue | 4 +- .../layout/components/side-menu/sub-menu.vue | 4 +- .../src/layout/smart-help-doc-layout.vue | 2 +- .../src/layout/smart-side-expand-layout.vue | 16 +++-- .../src/layout/smart-side-layout.vue | 14 ++-- .../src/router/index.js | 70 ++++++++++++------- .../src/theme/index.less | 43 ++++-------- .../javascript-ant-design-vue3/vite.config.js | 5 +- 9 files changed, 83 insertions(+), 82 deletions(-) diff --git a/smart-admin-web/javascript-ant-design-vue3/package.json b/smart-admin-web/javascript-ant-design-vue3/package.json index f32227e9..9291b5b6 100644 --- a/smart-admin-web/javascript-ant-design-vue3/package.json +++ b/smart-admin-web/javascript-ant-design-vue3/package.json @@ -43,7 +43,7 @@ "vue3-json-viewer": "^2.2.2" }, "devDependencies": { - "@vitejs/plugin-vue": "~2.3.3", + "@vitejs/plugin-vue": "^3.2.0", "@vue/compiler-sfc": "~3.2.26", "eslint": "^8.16.0", "eslint-config-prettier": "~8.5.0", @@ -57,10 +57,7 @@ "stylelint-config-prettier": "~9.0.3", "stylelint-config-standard": "~25.0.0", "stylelint-order": "~5.0.0", - "vite": "~2.9.9", - "vite-plugin-mock": "~2.9.6", - "vite-plugin-optimize-persist": "^0.1.2", - "vite-plugin-package-config": "^0.1.1", + "vite": "^3.2.3", "vue-eslint-parser": "~9.0.2" }, "engines": { diff --git a/smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/recursion-menu.vue b/smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/recursion-menu.vue index 4f9e3e60..8f500dc2 100644 --- a/smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/recursion-menu.vue +++ b/smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/recursion-menu.vue @@ -59,8 +59,8 @@ const openKeys = ref([]); // 页面跳转 - function turnToPage(route) { - router.push({ name: route.menuId.toString() }); + function turnToPage(menu) { + router.push({ path: menu.path }); } /** diff --git a/smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/sub-menu.vue b/smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/sub-menu.vue index 2dc9195c..60ccfdc6 100644 --- a/smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/sub-menu.vue +++ b/smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/sub-menu.vue @@ -39,7 +39,7 @@ }); const emits = defineEmits(['turnToPage']); - const turnToPage = (route) => { - emits('turnToPage', route); + const turnToPage = (menu) => { + emits('turnToPage', menu); }; diff --git a/smart-admin-web/javascript-ant-design-vue3/src/layout/smart-help-doc-layout.vue b/smart-admin-web/javascript-ant-design-vue3/src/layout/smart-help-doc-layout.vue index e65eb90b..77e82859 100644 --- a/smart-admin-web/javascript-ant-design-vue3/src/layout/smart-help-doc-layout.vue +++ b/smart-admin-web/javascript-ant-design-vue3/src/layout/smart-help-doc-layout.vue @@ -226,7 +226,7 @@ } .layout-header { - background: @primary-7; + background: @primary-color; padding: 0; z-index: 999; color: white; diff --git a/smart-admin-web/javascript-ant-design-vue3/src/layout/smart-side-expand-layout.vue b/smart-admin-web/javascript-ant-design-vue3/src/layout/smart-side-expand-layout.vue index 59f1b0ce..2a8272f7 100644 --- a/smart-admin-web/javascript-ant-design-vue3/src/layout/smart-side-expand-layout.vue +++ b/smart-admin-web/javascript-ant-design-vue3/src/layout/smart-side-expand-layout.vue @@ -56,13 +56,15 @@ :url="item.meta.frameUrl" /> - - -
- -
- - +
+ + +
+ +
+ + +
diff --git a/smart-admin-web/javascript-ant-design-vue3/src/layout/smart-side-layout.vue b/smart-admin-web/javascript-ant-design-vue3/src/layout/smart-side-layout.vue index 1c1d1932..8386fe0c 100644 --- a/smart-admin-web/javascript-ant-design-vue3/src/layout/smart-side-layout.vue +++ b/smart-admin-web/javascript-ant-design-vue3/src/layout/smart-side-layout.vue @@ -47,13 +47,13 @@ :url="item.meta.frameUrl" /> - - -
- -
- - +
+ + + + + +
diff --git a/smart-admin-web/javascript-ant-design-vue3/src/router/index.js b/smart-admin-web/javascript-ant-design-vue3/src/router/index.js index d5602e1f..74fbf1a7 100644 --- a/smart-admin-web/javascript-ant-design-vue3/src/router/index.js +++ b/smart-admin-web/javascript-ant-design-vue3/src/router/index.js @@ -12,12 +12,13 @@ import 'nprogress/nprogress.css'; import { nextTick } from 'vue'; import { createRouter, createWebHashHistory } from 'vue-router'; import { routerArray } from './routers'; -import { PAGE_PATH_404, PAGE_PATH_LOGIN } from '/@/constants/common-const'; +import { PAGE_PATH_404, PAGE_PATH_LOGIN } from '/@/constants/common-const'; import { HOME_PAGE_NAME } from '/@/constants/system/home-const'; import SmartLayout from '/@/layout/smart-layout.vue'; import { useUserStore } from '/@/store/modules/system/user'; import { clearAllCoolies, getTokenFromCookie } from '/@/utils/cookie-util'; import { localClear } from '/@/utils/local-util'; +import lodash from 'lodash'; export const router = createRouter({ history: createWebHashHistory(), @@ -52,6 +53,18 @@ router.beforeEach(async (to, from, next) => { return; } + // 下载路由对应的 页面组件，并修改组件的Name，如果修改过，则不需要修改 + let toRouterInfo = routerMap.get(to.name); + if (toRouterInfo && lodash.isFunction(toRouterInfo.component) && toRouterInfo.meta.renameComponentFlag === false) { + // 因为组件component 为 lazy load是个方法，所以可以直接执行 component()方法 + toRouterInfo.component().then((val) => { + // 修改组件的name + val.default.name = to.meta.componentName; + // 记录已经修改过 组件的name + toRouterInfo.meta.renameComponentFlag = true; + }); + } + // 是否刷新缓存 // 当前路由是否在tag中 存在tag中且没有传递keepAlive则刷新缓存 let findTag = (useUserStore().tagNav || []).find((e) => e.menuName == to.name); @@ -62,10 +75,10 @@ router.beforeEach(async (to, from, next) => { // 设置keepAlive 或 删除KeepAlive if (to.meta.keepAlive) { if (reloadKeepAlive) { - useUserStore().deleteKeepAliveIncludes(to.name?.toString()); + useUserStore().deleteKeepAliveIncludes(to.meta.componentName); } nextTick(() => { - useUserStore().pushKeepAliveIncludes(to.name?.toString()); + useUserStore().pushKeepAliveIncludes(to.meta.componentName); }); } next(); @@ -77,17 +90,18 @@ router.afterEach(() => { }); // ----------------------- 构建router对象 ----------------------- +const routerMap = new Map(); + export function buildRoutes(menuRouterList) { let menuList = menuRouterList ? menuRouterList : useUserStore().getMenuRouterList || []; /** * 1、构建整个路由信息 * 2、添加到路由里 */ - const resList = []; + const routerList = []; // 获取所有vue组件引用地址 用于构建路由 const modules = import.meta.glob('../views/**/**.vue'); // 获取所有vue组件 用于注入name属性 name属性用于keep-alive - const modulesEager = import.meta.globEager('../views/**/**.vue'); //1、构建整个路由信息 for (const e of menuList) { @@ -97,15 +111,26 @@ export function buildRoutes(menuRouterList) { if (!e.path) { continue; } - if (e.deletedFlag && e.deletedFlag === 1) { + if (e.deletedFlag && e.deletedFlag === true) { continue; } - let menuIdStr = e.menuId.toString(); + let componentName = e.menuId.toString(); + if (e.component) { + let lastIndex = e.component.lastIndexOf('/'); + let fileName = lodash.camelCase(e.component.substring(lastIndex + 1, e.component.length)); + componentName = lodash.camelCase(fileName) + componentName; + componentName = lodash.upperFirst(componentName); + } + let route = { path: e.path.startsWith('/') ? e.path : `/${e.path}`, - // 使用menuId作为name唯一标识 - name: menuIdStr, + // 使用【组件文件名+menuId】作为name唯一标识 + name: e.menuId.toString(), meta: { + // 数据库菜单(页面)id + id: e.menuId.toString(), + // 组件名称 + componentName: componentName, // 菜单展示 title: e.menuName, // 菜单图标展示 @@ -118,27 +143,22 @@ export function buildRoutes(menuRouterList) { frameFlag: e.frameFlag, // 外链地址 frameUrl: e.frameUrl, + // 是否 rename了组件的名字 + renameComponentFlag: false, }, }; if (e.frameFlag) { - route.component = () => import('../components/framework/iframe/route-default-component.vue'); - resList.push(route); - continue; - } - - let componentPath = e.component && e.component.startsWith('/') ? e.component : '/' + e.component; - let relativePath = `../views${componentPath}`; - // eslint-disable-next-line no-prototype-builtins - if (modules.hasOwnProperty(relativePath)) { + route.component = () => import('../components/framework/iframe/iframe-index.vue'); + + } else { + let componentPath = e.component && e.component.startsWith('/') ? e.component : '/' + e.component; + let relativePath = `../views${componentPath}`; + // // eslint-disable-next-line no-prototype-builtins route.component = modules[relativePath]; - // 组件注入name - let eager = modulesEager[relativePath]; - if (eager) { - eager.default.name = menuIdStr; - } } - resList.push(route); + routerList.push(route); + routerMap.set(e.menuId.toString(), route); } //2、添加到路由里 @@ -146,6 +166,6 @@ export function buildRoutes(menuRouterList) { path: '/', meta: {}, component: SmartLayout, - children: resList, + children: routerList, }); } diff --git a/smart-admin-web/javascript-ant-design-vue3/src/theme/index.less b/smart-admin-web/javascript-ant-design-vue3/src/theme/index.less index 149891b3..f4d72f36 100644 --- a/smart-admin-web/javascript-ant-design-vue3/src/theme/index.less +++ b/smart-admin-web/javascript-ant-design-vue3/src/theme/index.less @@ -8,46 +8,31 @@ * @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012 */ -@import '~ant-design-vue/dist/antd.less'; +@import 'ant-design-vue/dist/antd.css'; @import './smart-admin.less'; -@gray-1: #ffffff; -@gray-2: #fafafa; -@gray-3: #f5f5f5; -@gray-4: #f0f0f0; -@gray-5: #d9d9d9; -@gray-6: #bfbfbf; -@gray-7: #8c8c8c; -@gray-8: #595959; -@gray-9: #434343; -@gray-10: #262626; -@gray-11: #1f1f1f; -@gray-12: #141414; -@gray-13: #000000; -@title-color: @heading-color; +/********************************** ant design vue 颜色变量 begin **********************************/ +@primary-color:#1890ff; +@success-color: #52c41a; // 成功色 +@error-color :#f5222d; // 错误色 +@text-color:rgba(0, 0, 0, 0.65); // 主文本色 +@text-color-secondary:rgba(0, 0, 0, 0.45); // 次文本色 +@primary-7: #1890ff; +@base-bg-color: #fff; +@shadow-color:rgba(0, 0, 0, 0.15); -@layout-bg-color: @layout-body-background; -@base-bg-color: @body-background; +/********************************** ant design vue 颜色变量 end **********************************/ + +/********************************** 页面头部 begin **********************************/ @hover-bg-color: rgba(0, 0, 0, 0.025); -@border-color: @border-color-split; - -@hover-bg-color-light: @hover-bg-color; -@hover-bg-color-dark: @primary-7; @hover-bg-color-night: rgba(255, 255, 255, 0.025); -@header-bg-color-dark: @layout-header-background; - @header-light-bg-hover-color: #f6f6f6; @header-height: 80px; @header-user-height: 40px; @page-tag-height: 40px; - -@shadow-down: @shadow-1-down; -@shadow-up: @shadow-1-up; -@shadow-left: @shadow-1-left; -@shadow-right: @shadow-1-right; - @theme-list: light, dark, night; +/********************************** 页面头部 end **********************************/ /********************************** 基础样式 **********************************/ * { diff --git a/smart-admin-web/javascript-ant-design-vue3/vite.config.js b/smart-admin-web/javascript-ant-design-vue3/vite.config.js index 089a7242..4903f04e 100644 --- a/smart-admin-web/javascript-ant-design-vue3/vite.config.js +++ b/smart-admin-web/javascript-ant-design-vue3/vite.config.js @@ -9,9 +9,6 @@ */ import { resolve } from 'path'; import vue from '@vitejs/plugin-vue'; -//提速第一次vite启动速度 -import OptimizationPersist from 'vite-plugin-optimize-persist'; -import PkgConfig from 'vite-plugin-package-config'; const pathResolve = (dir) => { return resolve(__dirname, '.', dir); @@ -42,7 +39,7 @@ export default { host: '0.0.0.0', port: 8081, }, - plugins: [vue(), PkgConfig(), OptimizationPersist()], + plugins: [vue()], optimizeDeps: { include: ['ant-design-vue/es/locale/zh_CN', 'dayjs/locale/zh-cn', 'ant-design-vue/es/locale/en_US'], exclude: ['vue-demi'],