前端框架同步升级v2.4.21

Web/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
 
+## 2.4.21
+
+`2022.12.12`
+
+- 🌟 更新 依赖更新最新版本
+- 🎉 新增 菜单背景高亮颜色可自定义，通过 `布局配置 -> 菜单设置 -> 菜单高亮背景色` 进行设置
+- 🐞 修复 `分栏布局` 二级导航菜单内容多时，无法滚动问题，感谢群友@静雨轩主人
+- 🐞 修复 [!42 修复 工作流无法添加新节点问题](https://gitee.com/lyt-top/vue-next-admin/pulls/42)，感谢[@beta](https://gitee.com/beta_dz)
+- 🎯 优化 `/make/tableDemo` 表头很多时，无法滚动问题，感谢群友@糊涂涂涂
+
 ## 2.4.2
 
 `2022.12.09`

Web/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-next-admin",
-	"version": "2.4.2",
+	"version": "2.4.21",
 	"description": "vue3 vite next admin template",
 	"author": "lyt_20201208",
 	"license": "MIT",
@@ -17,7 +17,7 @@
 		"axios": "^1.2.1",
 		"countup.js": "^2.3.2",
 		"cropperjs": "^1.5.13",
-		"echarts": "^5.4.0",
+		"echarts": "^5.4.1",
 		"echarts-gl": "^2.0.9",
 		"echarts-wordcloud": "^2.1.0",
 		"element-plus": "^2.2.26",
@@ -46,7 +46,7 @@
 		"monaco-editor": "^0.34.1"
 	},
 	"devDependencies": {
-		"@types/node": "^18.11.12",
+		"@types/node": "^18.11.13",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.15.0",
 		"@typescript-eslint/eslint-plugin": "^5.46.0",

Web/pnpm-lock.yaml

@@ -3,7 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@element-plus/icons-vue': ^2.0.10
   '@microsoft/signalr': ^6.0.10
-  '@types/node': ^18.11.12
+  '@types/node': ^18.11.13
   '@types/nprogress': ^0.2.0
   '@types/sortablejs': ^1.15.0
   '@typescript-eslint/eslint-plugin': ^5.46.0
@@ -16,7 +16,7 @@ specifiers:
   axios: ^1.2.1
   countup.js: ^2.3.2
   cropperjs: ^1.5.13
-  echarts: ^5.4.0
+  echarts: ^5.4.1
   echarts-gl: ^2.0.9
   echarts-wordcloud: ^2.1.0
   element-plus: ^2.2.26
@@ -88,7 +88,7 @@ dependencies:
   vue3-tree-org: registry.npmmirror.com/vue3-tree-org/4.1.1_vue@3.2.45
 
 devDependencies:
-  '@types/node': registry.npmmirror.com/@types/node/18.11.12
+  '@types/node': registry.npmmirror.com/@types/node/18.11.13
   '@types/nprogress': registry.npmmirror.com/@types/nprogress/0.2.0
   '@types/sortablejs': registry.npmmirror.com/@types/sortablejs/1.15.0
   '@typescript-eslint/eslint-plugin': registry.npmmirror.com/@typescript-eslint/eslint-plugin/5.46.0_5mle7isnkfgjmrghnnczirv6iy
@@ -100,7 +100,7 @@ devDependencies:
   prettier: registry.npmmirror.com/prettier/2.8.1
   sass: registry.npmmirror.com/sass/1.56.2
   typescript: registry.npmmirror.com/typescript/4.9.4
-  vite: registry.npmmirror.com/vite/4.0.0_73lfsi4xmmmu3zhcuv45qpgb6a
+  vite: registry.npmmirror.com/vite/4.0.0_q6swpjbreachjowkqq6ci4femq
   vite-plugin-vue-setup-extend: registry.npmmirror.com/vite-plugin-vue-setup-extend/0.4.0_vite@4.0.0
   vue-eslint-parser: registry.npmmirror.com/vue-eslint-parser/9.1.0_eslint@8.29.0
 
@@ -855,10 +855,10 @@ packages:
     version: 4.14.191
     dev: false
 
-  registry.npmmirror.com/@types/node/18.11.12:
-    resolution: {integrity: sha512-FgD3NtTAKvyMmD44T07zz2fEf+OKwutgBCEVM8GcvMGVGaDktiLNTDvPwC/LUe3PinMW+X6CuLOF2Ui1mAlSXg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/node/-/node-18.11.12.tgz}
+  registry.npmmirror.com/@types/node/18.11.13:
+    resolution: {integrity: sha512-IASpMGVcWpUsx5xBOrxMj7Bl8lqfuTY7FKAnPmu5cHkfQVWF8GulWS1jbRqA934qZL35xh5xN/+Xe/i26Bod4w==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/node/-/node-18.11.13.tgz}
     name: '@types/node'
-    version: 18.11.12
+    version: 18.11.13
     dev: true
 
   registry.npmmirror.com/@types/nprogress/0.2.0:
@@ -1097,7 +1097,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: registry.npmmirror.com/vite/4.0.0_73lfsi4xmmmu3zhcuv45qpgb6a
+      vite: registry.npmmirror.com/vite/4.0.0_q6swpjbreachjowkqq6ci4femq
       vue: registry.npmmirror.com/vue/3.2.45
     dev: true
 
@@ -3480,10 +3480,10 @@ packages:
     dependencies:
       '@vue/compiler-sfc': registry.npmmirror.com/@vue/compiler-sfc/3.2.45
       magic-string: registry.npmmirror.com/magic-string/0.25.9
-      vite: registry.npmmirror.com/vite/4.0.0_73lfsi4xmmmu3zhcuv45qpgb6a
+      vite: registry.npmmirror.com/vite/4.0.0_q6swpjbreachjowkqq6ci4femq
     dev: true
 
-  registry.npmmirror.com/vite/4.0.0_73lfsi4xmmmu3zhcuv45qpgb6a:
+  registry.npmmirror.com/vite/4.0.0_q6swpjbreachjowkqq6ci4femq:
     resolution: {integrity: sha512-ynad+4kYs8Jcnn8J7SacS9vAbk7eMy0xWg6E7bAhS1s79TK+D7tVFGXVZ55S7RNLRROU1rxoKlvZ/qjaB41DGA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vite/-/vite-4.0.0.tgz}
     id: registry.npmmirror.com/vite/4.0.0
     name: vite
@@ -3511,7 +3511,7 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': registry.npmmirror.com/@types/node/18.11.12
+      '@types/node': registry.npmmirror.com/@types/node/18.11.13
       esbuild: registry.npmmirror.com/esbuild/0.16.4
       postcss: registry.npmmirror.com/postcss/8.4.19
       resolve: registry.npmmirror.com/resolve/1.22.1

Web/src/components/iconSelector/index.vue

@@ -158,6 +158,7 @@ const initModeValueEcho = () => {
 };
 // 处理 icon 类型，用于回显时，tab 高亮与初始化数据
 const initFontIconName = () => {
+	if(props.modelValue == undefined) return 'ele';
 	let name = 'ali';
 	if (props.modelValue!.indexOf('iconfont') > -1) name = 'ali';
 	else if (props.modelValue!.indexOf('ele-') > -1) name = 'ele';

Web/src/components/table/index.vue

@@ -71,26 +71,28 @@
 						<SvgIcon name="iconfont icon-quanjushezhi_o" :size="22" title="设置" />
 					</template>
 					<template #default>
-						<div ref="toolSetRef">
-							<div class="tool-box">
-								<el-tooltip content="拖动进行排序" placement="top-start">
-									<SvgIcon name="fa fa-question-circle-o" :size="17" class="ml11" color="#909399" />
-								</el-tooltip>
-								<el-checkbox
-									v-model="state.checkListAll"
-									:indeterminate="state.checkListIndeterminate"
-									class="ml10 mr1"
-									label="列显示"
-									@change="onCheckAllChange"
-								/>
-								<el-checkbox v-model="getConfig.isSerialNo" class="ml12 mr1" label="序号" />
-								<el-checkbox v-model="getConfig.isSelection" class="ml12 mr1" label="多选" />
-							</div>
-							<div class="tool-item" v-for="v in header" :key="v.key" :data-key="v.key">
-								<i class="fa fa-arrows-alt handle cursor-pointer"></i>
-								<el-checkbox v-model="v.isCheck" class="ml12 mr8" :label="v.title" @change="onCheckChange" />
-							</div>
+						<div class="tool-box">
+							<el-tooltip content="拖动进行排序" placement="top-start">
+								<SvgIcon name="fa fa-question-circle-o" :size="17" class="ml11" color="#909399" />
+							</el-tooltip>
+							<el-checkbox
+								v-model="state.checkListAll"
+								:indeterminate="state.checkListIndeterminate"
+								class="ml10 mr1"
+								label="列显示"
+								@change="onCheckAllChange"
+							/>
+							<el-checkbox v-model="getConfig.isSerialNo" class="ml12 mr1" label="序号" />
+							<el-checkbox v-model="getConfig.isSelection" class="ml12 mr1" label="多选" />
 						</div>
+						<el-scrollbar>
+							<div ref="toolSetRef" class="tool-sortable">
+								<div class="tool-sortable-item" v-for="v in header" :key="v.key" :data-key="v.key">
+									<i class="fa fa-arrows-alt handle cursor-pointer"></i>
+									<el-checkbox v-model="v.isCheck" size="default" class="ml12 mr8" :label="v.title" @change="onCheckChange" />
+								</div>
+							</div>
+						</el-scrollbar>
 					</template>
 				</el-popover>
 			</div>

Web/src/i18n/index.ts

@@ -7,7 +7,7 @@ import { useThemeConfig } from '/@/stores/themeConfig';
 
 /**
  * 说明：
- * 须在 pages 下新建文件夹（建议 `要国际化界面目录` 与 `i18 目录` 相同，方便查找），
+ * 须在 pages 下新建文件夹（建议 `要国际化界面目录` 与 `i18n 目录` 相同，方便查找），
  * 注意国际化定义的字段，不要与原有的定义字段相同。
  * 1、/src/i18n/lang 下的 ts 为框架的国际化内容
  * 2、/src/i18n/pages 下的 ts 为各界面的国际化内容

Web/src/i18n/lang/en.ts

@@ -137,6 +137,7 @@ export default {
 		twoIsTopBarColorGradual: 'Top bar gradient',
 		twoMenuBar: 'Menu background',
 		twoMenuBarColor: 'Menu default font color',
+		twoMenuBarActiveColor: 'Menu Highlight Color',
 		twoIsMenuBarColorGradual: 'Menu gradient',
 		twoColumnsMenuBar: 'Column menu background',
 		twoColumnsMenuBarColor: 'Default font color bar menu',

Web/src/i18n/lang/zh-cn.ts

@@ -137,6 +137,7 @@ export default {
 		twoIsTopBarColorGradual: '顶栏背景渐变',
 		twoMenuBar: '菜单背景',
 		twoMenuBarColor: '菜单默认字体颜色',
+		twoMenuBarActiveColor: '菜单高亮背景色',
 		twoIsMenuBarColorGradual: '菜单背景渐变',
 		twoColumnsMenuBar: '分栏菜单背景',
 		twoColumnsMenuBarColor: '分栏菜单默认字体颜色',

Web/src/i18n/lang/zh-tw.ts

@@ -137,6 +137,7 @@ export default {
 		twoIsTopBarColorGradual: '頂欄背景漸變',
 		twoMenuBar: '選單背景',
 		twoMenuBarColor: '選單默認字體顏色',
+		twoMenuBarActiveColor: '選單高亮背景色',
 		twoIsMenuBarColorGradual: '選單背景漸變',
 		twoColumnsMenuBar: '分欄選單背景',
 		twoColumnsMenuBarColor: '分欄選單默認字體顏色',

Web/src/layout/component/columnsAside.vue

@@ -279,4 +279,8 @@ watch(
 		}
 	}
 }
+
+:deep(.el-scrollbar){
+	height: calc(100% - 50px);
+}
 </style>

Web/src/layout/navBars/breadcrumb/setings.vue

@@ -52,6 +52,12 @@
 						<el-color-picker v-model="getThemeConfig.menuBarColor" size="default" @change="onBgColorPickerChange('menuBarColor')"> </el-color-picker>
 					</div>
 				</div>
+				<!-- <div class="layout-breadcrumb-seting-bar-flex">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoMenuBarActiveColor') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-color-picker v-model="getThemeConfig.menuBarActiveColor" size="default" show-alpha @change="onBgColorPickerChange('menuBarActiveColor')" />
+					</div>
+				</div> -->
 				<div class="layout-breadcrumb-seting-bar-flex mt14">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsMenuBarColorGradual') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
@@ -535,6 +541,7 @@ const onSetLayout = (layout: string) => {
 const initLayoutChangeFun = () => {
 	onBgColorPickerChange('menuBar');
 	onBgColorPickerChange('menuBarColor');
+	onBgColorPickerChange('menuBarActiveColor');
 	onBgColorPickerChange('topBar');
 	onBgColorPickerChange('topBarColor');
 	onBgColorPickerChange('columnsMenuBar');

Web/src/stores/themeConfig.ts

@@ -23,10 +23,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 			isIsDark: false,
 
 			/**
-			 * 菜单 / 顶栏
-			 * 注意：v1.0.17 版本去除设置布局切换，重置主题样式（initSetLayoutChange），
-			 * 切换布局需手动设置样式，设置的样式自动同步各布局，
-			 * 代码位置：/@/layout/navBars/breadcrumb/setings.vue
+			 * 顶栏设置
 			 */
 			// 默认顶栏导航背景颜色
 			topBar: '#FFFFFF',
@@ -34,12 +31,22 @@ export const useThemeConfig = defineStore('themeConfig', {
 			topBarColor: '#000000',
 			// 是否开启顶栏背景颜色渐变
 			isTopBarColorGradual: false,
+
+			/**
+			 * 菜单设置
+			 */
 			// 默认菜单导航背景颜色
 			menuBar: '#FFFFFF',
 			// 默认菜单导航字体颜色
 			menuBarColor: '#000000',
+			// 默认菜单高亮背景色
+			menuBarActiveColor: 'var(--el-color-primary-light-7)',
 			// 是否开启菜单背景颜色渐变
 			isMenuBarColorGradual: false,
+
+			/**
+			 * 分栏设置
+			 */
 			// 默认分栏菜单背景颜色
 			columnsMenuBar: '#2C3A49',
 			// 默认分栏菜单字体颜色
@@ -97,7 +104,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 			// 是否开启水印
 			isWartermark: false,
 			// 水印文案
-			wartermarkText: 'Admin.NET',
+			wartermarkText: '运城市智慧民政',
 
 			/**
 			 * 其它设置

Web/src/theme/dark.scss

@@ -22,6 +22,7 @@
 	--next-bg-topBarColor: var(--next-color-bar) !important;
 	--next-bg-menuBar: var(--next-color-disabled) !important;
 	--next-bg-menuBarColor: var(--next-color-bar) !important;
+	--next-bg-menuBarActiveColor: var(--next-color-hover-rgba) !important;
 	--next-bg-columnsMenuBar: var(--next-color-disabled) !important;
 	--next-bg-columnsMenuBarColor: var(--next-color-bar) !important;
 	--next-border-color-light: var(--next-border-black) !important;

Web/src/theme/element.scss

@@ -68,8 +68,8 @@
 ------------------------------- */
 // 鼠标 hover 时颜色
 .el-menu-hover-bg-color {
-	background-color: var(--el-color-primary-light-7) !important;
-	// border-right: solid 3px var(--el-color-primary);
+	background-color: var(--next-bg-menuBarActiveColor) !important;
+	//background-color: var(--el-color-primary-light-7) !important;
 }
 // 默认样式修改
 .el-menu {
@@ -111,6 +111,11 @@
 	@extend .el-menu-hover-bg-color;
 	color: var(--el-color-primary-dark-2);
 }
+// 鼠标 hover 时背景色
+.el-menu-item:hover {
+	//@extend .el-menu-hover-bg-color;
+	background-color: var(--el-color-primary-light-9);
+}
 .el-sub-menu.is-active.is-opened .el-sub-menu__title {
 	background-color: unset !important;
 }
@@ -118,10 +123,6 @@
 .el-menu-item.is-active {
 	border-right: solid 3px var(--el-color-primary);
 }
-// 鼠标 hover 时背景色
-.el-menu-item:hover {
-	background-color: var(--el-color-primary-light-9)
-}
 // 子级菜单背景颜色
 // .el-menu--inline {
 // 	background: var(--next-bg-menuBar-light-1);
@@ -312,6 +313,10 @@
 		}
 	}
 }
+/*防止分栏布局二级菜单很多时，滚动条消失问题*/
+.layout-columns-warp .layout-aside .el-scrollbar__view {
+	height: unset !important;
+}
 
 /* Pagination 分页
 ------------------------------- */

Web/src/theme/tableTool.scss

@@ -8,18 +8,20 @@
 		height: 40px;
 		align-items: center;
 	}
-	.tool-item {
-		display: flex;
-		box-sizing: border-box;
-		color: var(--el-text-color-primary);
-		height: 35px;
-		align-items: center;
-		padding: var(--el-popover-padding);
-		&:hover {
-			background: var(--el-fill-color-lighter);
-		}
-		i {
-			opacity: 0.7;
+	.tool-sortable {
+		max-height: 303px;
+		.tool-sortable-item {
+			display: flex;
+			box-sizing: border-box;
+			color: var(--el-text-color-primary);
+			align-items: center;
+			padding: 0 12px;
+			&:hover {
+				background: var(--el-fill-color-lighter);
+			}
+			i {
+				opacity: 0.7;
+			}
 		}
 	}
 }

Web/src/types/pinia.d.ts

@@ -5,20 +5,13 @@
 // 用户信息
 declare interface UserInfosState<T = any> {
 	userInfos: {
-		account: string;
-		realName: string;
-		avatar: string;
-		address: string;
-		signature: string;
-		orgId: string;
-		orgName: string;
-		posName: string;
-		roles: string[];
 		authBtnList: string[];
+		photo: string;
+		roles: string[];
 		time: number;
+		userName: string;
 		[key: string]: T;
 	};
-	constList: Array<ConstOutput>;
 }
 
 // 路由缓存列表
@@ -55,6 +48,7 @@ declare interface ThemeConfigState {
 		isTopBarColorGradual: boolean;
 		menuBar: string;
 		menuBarColor: string;
+		menuBarActiveColor: string;
 		isMenuBarColorGradual: boolean;
 		columnsMenuBar: string;
 		columnsMenuBarColor: string;

Web/src/types/views.d.ts

@@ -242,8 +242,6 @@ declare type XyState = {
 };
 
 declare type WorkflowState<T = any> = {
-	workflowRightRef: HTMLDivElement | null;
-	leftNavRefs: HTMLElement[];
 	leftNavList: T[];
 	dropdownNode: XyState;
 	dropdownLine: XyState;

Web/src/views/pages/workflow/index.vue

@@ -12,7 +12,7 @@
 						<el-scrollbar>
 							<div
 								ref="leftNavRefs"
-								v-for="val in leftNavList"
+								v-for="val in state.leftNavList"
 								:key="val.id"
 								:style="{ height: val.isOpen ? 'auto' : '50px', overflow: 'hidden' }"
 								class="workflow-left-id"
@@ -86,6 +86,8 @@ const Drawer = defineAsyncComponent(() => import('./component/drawer/index.vue')
 const Help = defineAsyncComponent(() => import('./component/tool/help.vue'));
 
 // 定义变量内容
+const leftNavRefs = ref([]);
+const workflowRightRef = ref();
 const contextmenuNodeRef = ref();
 const contextmenuLineRef = ref();
 const drawerRef = ref();
@@ -95,8 +97,6 @@ const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
 const { copyText } = commonFunction();
 const state = reactive<WorkflowState>({
-	workflowRightRef: null,
-	leftNavRefs: [],
 	leftNavList: [],
 	dropdownNode: { x: '', y: '' },
 	dropdownLine: { x: '', y: '' },
@@ -151,7 +151,7 @@ const initLeftNavList = () => {
 };
 // 左侧导航-初始化拖动
 const initSortable = () => {
-	state.leftNavRefs.forEach((v) => {
+	leftNavRefs.value.forEach((v) => {
 		Sortable.create(v as HTMLDivElement, {
 			group: {
 				name: 'vue-next-admin-1',
@@ -165,7 +165,7 @@ const initSortable = () => {
 			onEnd: function (evt: any) {
 				const { name, icon, id } = evt.clone.dataset;
 				const { layerX, layerY, clientX, clientY } = evt.originalEvent;
-				const el = state.workflowRightRef!;
+				const el = workflowRightRef.value!;
 				const { x, y, width, height } = el.getBoundingClientRect();
 				if (clientX < x || clientX > width + x || clientY < y || y > y + height) {
 					ElMessage.warning('请把节点拖入到画布中');

Web/src/views/system/server/index.vue

@@ -110,6 +110,7 @@
 		<el-card shadow="hover" header="磁盘信息" style="margin-top: 8px">
 			<el-row>
 				<el-col
+					:span="4"
 					:xs="24"
 					:sm="24 / machineDiskInfo.length"
 					:md="24 / machineDiskInfo.length"