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'],