😎增加vxe-table组件及样式调整优化

Admin.NET/Admin.NET.Core/SeedData/SysConfigSeedData.cs

@@ -32,10 +32,10 @@ public class SysConfigSeedData : ISqlSugarEntitySeedData<SysConfig>
             new SysConfig{ Id=1300000000201, Name="发送异常日志邮件", Code="sys_error_mail", Value="True", SysFlag=YesNoEnum.Y, Remark="是否发送异常日志邮件", OrderNo=110, GroupCode="Default", CreateTime=DateTime.Parse("2022-02-10 00:00:00") },
             new SysConfig{ Id=1300000000211, Name="开启域登录验证", Code="sys_domain_login", Value="False", SysFlag=YesNoEnum.Y, Remark="是否开启域登录验证", OrderNo=120, GroupCode="Default", CreateTime=DateTime.Parse("2022-02-10 00:00:00") },
             new SysConfig{ Id=1300000000221, Name="开启数据校验日志", Code="sys_validation_log", Value="True", SysFlag=YesNoEnum.Y, Remark="是否数据校验日志", OrderNo=130, GroupCode="Default", CreateTime=DateTime.Parse("2022-02-10 00:00:00") },
-            new SysConfig{ Id=1300000000301, Name="系统主标题", Code="sys_web_title", Value="Admin.NET", SysFlag=YesNoEnum.Y, Remark="系统主标题", OrderNo=300, GroupCode="WebConfig", CreateTime=DateTime.Parse("2022-02-10 00:00:00") },
+            new SysConfig{ Id=1300000000301, Name="系统主标题", Code="sys_web_title", Value="Admin.NET.Pro", SysFlag=YesNoEnum.Y, Remark="系统主标题", OrderNo=300, GroupCode="WebConfig", CreateTime=DateTime.Parse("2022-02-10 00:00:00") },
-            new SysConfig{ Id=1300000000311, Name="系统副标题", Code="sys_web_viceTitle", Value="Admin.NET", SysFlag=YesNoEnum.Y, Remark="系统副标题", OrderNo=310, GroupCode="WebConfig", CreateTime=DateTime.Parse("2022-02-10 00:00:00") },
+            new SysConfig{ Id=1300000000311, Name="系统副标题", Code="sys_web_viceTitle", Value="Admin.NET.Pro", SysFlag=YesNoEnum.Y, Remark="系统副标题", OrderNo=310, GroupCode="WebConfig", CreateTime=DateTime.Parse("2022-02-10 00:00:00") },
             new SysConfig{ Id=1300000000321, Name="系统描述", Code="sys_web_viceDesc", Value="站在巨人肩膀上的 .NET 通用权限开发框架", SysFlag=YesNoEnum.Y, Remark="系统描述", OrderNo=320, GroupCode="WebConfig", CreateTime=DateTime.Parse("2022-02-10 00:00:00") },
-            new SysConfig{ Id=1300000000331, Name="水印内容", Code="sys_web_watermark", Value="Admin.NET", SysFlag=YesNoEnum.Y, Remark="水印内容", OrderNo=330, GroupCode="WebConfig", CreateTime=DateTime.Parse("2022-02-10 00:00:00") },
+            new SysConfig{ Id=1300000000331, Name="水印内容", Code="sys_web_watermark", Value="Admin.NET.Pro", SysFlag=YesNoEnum.Y, Remark="水印内容", OrderNo=330, GroupCode="WebConfig", CreateTime=DateTime.Parse("2022-02-10 00:00:00") },
             new SysConfig{ Id=1300000000341, Name="版权说明", Code="sys_web_copyright", Value="Copyright © 2021-present Admin.NET All rights reserved.", SysFlag=YesNoEnum.Y, Remark="版权说明", OrderNo=340, GroupCode="WebConfig", CreateTime=DateTime.Parse("2022-02-10 00:00:00") },
             new SysConfig{ Id=1300000000351, Name="系统图标", Code="sys_web_logo", Value="/Upload/logo.png", SysFlag=YesNoEnum.Y, Remark="系统图标", OrderNo=350, GroupCode="WebConfig", CreateTime=DateTime.Parse("2022-02-10 00:00:00") },
             new SysConfig{ Id=1300000000361, Name="ICP备案号", Code="sys_web_icp", Value="省ICP备12345678号", SysFlag=YesNoEnum.Y, Remark="ICP备案号", OrderNo=360, GroupCode="WebConfig", CreateTime=DateTime.Parse("2022-02-10 00:00:00") },

Web/package.json

@@ -32,6 +32,7 @@
 		"echarts-gl": "^2.0.9",
 		"echarts-wordcloud": "^2.1.0",
 		"element-plus": "^2.7.6",
+		"exceljs": "^4.4.0",
 		"ezuikit": "^1.0.0",
 		"ezuikit-js": "^8.0.5",
 		"gcoord": "^1.0.6",
@@ -67,6 +68,11 @@
 		"vue-signature-pad": "^3.0.2",
 		"vue3-tree-org": "^4.2.2",
 		"vuedraggable": "4.0.3",
+		"vxe-pc-ui": "^4.0.42",
+		"vxe-table": "^4.7.39",
+		"vxe-table-plugin-element": "^4.0.4",
+		"vxe-table-plugin-export-xlsx": "^4.0.4",
+		"xe-utils": "^3.5.27",
 		"xlsx-js-style": "^1.2.0"
 	},
 	"devDependencies": {
@@ -81,7 +87,7 @@
 		"@vitejs/plugin-vue-jsx": "^4.0.0",
 		"@vue/compiler-sfc": "^3.4.31",
 		"code-inspector-plugin": "^0.14.2",
-		"eslint": "^9.5.0",
+		"eslint": "^9.6.0",
 		"eslint-plugin-vue": "^9.26.0",
 		"less": "^4.2.0",
 		"prettier": "^3.3.2",

Web/src/components/highLightKeyword/index.vue

@@ -0,0 +1,19 @@
+<template>
+	<div v-html="highlight"></div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+var props = defineProps({
+	text: { type: String, default: '' },
+	keyword: { type: String, default: '' },
+	color: { type: String, default: 'rgba(0,0,0,0.99)' },
+	background: { type: String, default: '#FFFF00' },
+});
+
+const highlight = computed(() => {
+	let result = props.text;
+	const regExp = new RegExp(props.keyword, 'g');
+	return result.replace(regExp, `<span style="color:${props.color};background-color:${props.background};">${props.keyword}</span>`);
+});
+</script>

Web/src/hooks/dateTimeShortCust.ts

@@ -0,0 +1,25 @@
+/**
+ * 日期时间设置快捷选项
+ * @returns
+ */
+export const useDateTimeShortCust = () => {
+	return [
+		{ text: '今天', value: new Date() },
+		{
+			text: '昨天',
+			value: () => {
+				const date = new Date();
+				date.setTime(date.getTime() - 3600 * 1000 * 24);
+				return date;
+			},
+		},
+		{
+			text: '上周',
+			value: () => {
+				const date = new Date();
+				date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+				return date;
+			},
+		},
+	];
+};

Web/src/hooks/setupVXETableHook.ts

@@ -0,0 +1,109 @@
+import App from '/@/App.vue';
+// VXETable
+import VxeUITable from 'vxe-table';
+import VXETablePluginElement from 'vxe-table-plugin-element';
+import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx';
+// import 'vxe-table/lib/style.css'; // 已在theme/vxe.scss引入
+import 'vxe-table-plugin-element/dist/style.css';
+// Vxe UI 组件库
+import VxeUI from 'vxe-pc-ui';
+import ExcelJS from 'exceljs';
+
+export const setupVXETable = (app: App) => {
+	// 加载插件
+	VxeUITable.use(VXETablePluginElement);
+	VxeUITable.use(VXETablePluginExportXLSX, { ExcelJS: ExcelJS });
+	// VXETable全局配置https://vxetable.cn/v4.7/#/table/start/global
+	VxeUITable.setConfig({
+		theme: 'light', // 主题颜色
+		size: 'mini', // 全局尺寸
+		// i18n: (key, args) => i18n.global.t(key, args),
+		// zIndex: 999, // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡
+		// version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
+		// loadingText: '加载中...', // 全局loading提示内容，如果为null则不显示文本
+		table: {
+			border: true, // 是否带有边框
+			stripe: true, // 是否带有斑马纹
+			// keepSource: false,// 保持原始值的状态，被某些功能所依赖，比如编辑状态、还原数据等（开启后影响性能，具体取决于数据量）
+			showOverflow: true, // 设置所有内容过长时显示为省略号（如果是固定列建议设置该值，提升渲染速度）
+			size: 'mini', // 表格的尺寸[medium, small, mini]
+			autoResize: true, // 自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到）
+			round: false, // 是否为圆角边框
+			emptyText: '暂无数据', //
+			columnConfig: {
+				isCurrent: true, // 当鼠标点击列头时，是否要高亮当前列
+				isHover: true, // 当鼠标移到列头时，是否要高亮当前头
+				resizable: true, // 每一列是否启用列宽调整
+				minWidth: 70, // 每一列的最小宽度(auto, px, %)
+			},
+			rowConfig: {
+				isCurrent: false, // 当鼠标点击行时，是否要高亮当前行
+				isHover: true, // 当鼠标移到行时，是否要高亮当前行
+			},
+			radioConfig: {
+				strict: true, // 严格模式，选中后不能取消
+				highlight: true, // 高亮选中行
+			},
+			checkboxConfig: {
+				strict: true, // 严格模式，当数据为空或全部禁用时，列头的复选框为禁用状态
+				highlight: true, // 高亮勾选行
+				range: true, // 开启复选框范围选择功能（启用后通过鼠标在复选框的列内滑动选中或取消指定行）***全局配置貌似不生效***
+				trigger: 'default', // 触发方式（注：当多种功能重叠时，会同时触发）default（默认）, cell（点击单元格触发）, row（点击行触发）
+			},
+			exportConfig: {
+				remote: false, // 是否服务端导出
+				types: ['xlsx', 'csv', 'html', 'xml', 'txt'], // 可选文件类型列表
+				modes: ['current', 'selected', 'all'], // 输出数据的方式
+			},
+			printConfig: { modes: ['current', 'selected', 'all'] }, // 输出数据的方式
+			tooltipConfig: {
+				showAll: false, // 所有单元格开启工具提示
+				enterable: true, // 鼠标是否可进入到工具提示中
+				theme: 'dark',
+			},
+			customConfig: {
+				// 貌似全局设置不生效，须要单独设置
+				storage: {
+					// 是否启用 localStorage 本地保存，会将列操作状态保留在本地（需要有 id）
+					visible: true, // 启用显示/隐藏列状态
+					resizable: true, // 启用列宽状态
+				},
+			},
+			scrollX: {
+				enabled: true, // 是否默认开启横向虚拟滚动
+				gt: 30, // 指定大于指定列时自动启动横向虚拟滚动
+			},
+			scrollY: {
+				scrollToTopOnChange: true, // 当数据源被更改时，自动将纵向滚动条滚动到顶部
+				enabled: true, // 是否默认开启纵向虚拟滚动
+				gt: 50, // 当数据大于指定数量时自动触发启用虚拟滚动
+			},
+		},
+		grid: {
+			size: 'mini',
+			toolbarConfig: {
+				size: 'mini', // 尺寸 medium, small, mini
+				perfect: false, // 配套的样式
+			},
+			zoomConfig: { escRestore: true }, // 是否允许通过按下 ESC 键还原
+		},
+		pager: {
+			size: 'mini',
+			background: true, // 带背景颜色
+			perfect: false, // 配套的样式
+			autoHidden: false, // 当只有一页时自动隐藏
+			pageSize: 50, // 每页大小
+			pagerCount: 10, // 显示页码按钮的数量
+			pageSizes: [50, 100, 200, 500], // 每页大小选项列表
+			layouts: ['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'PageCount', 'Total'], // 自定义布局
+		},
+	});
+	// 安装UI组件
+	app.use(VxeUI);
+	app.use(VxeUITable);
+	// 给 vue 实例挂载内部对象，例如：
+	// app.config.globalProperties.$XModal = VxeUI.modal
+	// app.config.globalProperties.$XPrint = VxeUI.print
+	// app.config.globalProperties.$XSaveFile = VxeUI.saveFile
+	// app.config.globalProperties.$XReadFile = VxeUI.readFile
+};

Web/src/hooks/vxeTableOptionsHook.ts

@@ -0,0 +1,89 @@
+import { dayjs } from 'element-plus';
+import { reactive } from 'vue';
+import { VxeGridProps, VxeGridPropTypes } from 'vxe-table';
+
+/**
+ * @param {String} id 表格唯一标识，为空时自动随机产生;
+ * @param {String} id name:表格名称，与导出文件名有关;
+ * @param {VxeGridPropTypes.Columns<any>} columns 列配置;
+ * @param {boolean} enableExport 是否显示导出按钮;
+ * @param {boolean} remoteExport 是否为服务器导出;
+ * @param {Function} searchCallback 查询回调方法;
+ * @param {Function} queryAllCallback 查询所有回调方法;
+ * @param {Function} remoteExportCallback 服务器导出回调方法;
+ */
+interface iVxeOption {
+	id?: string;
+	name?: string;
+	columns: VxeGridPropTypes.Columns<any>;
+	enableExport?: boolean;
+	remoteExport?: boolean;
+	searchCallback: Function;
+	queryAllCallback?: Function;
+	remoteExportCallback?: Function;
+}
+
+/**
+ * Vxe表格参数化Hook
+ * @param {iVxeOption} opt 参数
+ * @param {VxeGridProps<RowVO>} extras 要覆盖的参数
+ * @returns
+ */
+export const useVxeTable = <T>(opt: iVxeOption, extras?: VxeGridProps<RowVO> = null) => {
+	// 默认参数
+	opt = Object.assign({ enableExport: true, remoteExport: false }, opt);
+	// 创建tableId,表格id固定才可以记录调整列宽，再次刷新仍有效。
+	opt.id = opt.id ? opt.id : String(new Date().getTime());
+	// console.log(opt);
+	const options = reactive<VxeGridProps>({
+		id: opt.id,
+		height: 'auto',
+		autoResize: true,
+		size: 'mini',
+		loading: false,
+		align: 'center', // 自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到）
+		// data: [] as Array<T>,
+		columns: opt.columns,
+		toolbarConfig: {
+			size: 'small',
+			slots: { buttons: 'toolbar_buttons', tools: 'toolbar_tools' },
+			refresh: {
+				queryMethod: () => opt.searchCallback(),
+			},
+			export: opt.enableExport,
+			print: true,
+			zoom: true,
+			custom: true,
+		},
+		checkboxConfig: { range: true },
+		sortConfig: { trigger: 'cell', remote: true },
+		exportConfig: {
+			remote: opt.remoteExport, // 设置使用服务端导出
+			filename: `${opt.name}导出_${dayjs().format('YYMMDDHHmmss')}`,
+			exportMethod: ({ options }) => {
+				if (opt.remoteExportCallback) opt.remoteExportCallback(options);
+			}, //服务器导出方法
+		},
+		printConfig: { sheetName: '' },
+		proxyConfig: {
+			props: {
+				list: 'data.result.items', // 不分页时
+				// result: 'data.result.items', // 分页时
+				total: 'data.result.total',
+				message: 'data.message',
+			},
+			ajax: {
+				query: () => Promise.resolve(), // 不加会报错
+				queryAll: opt.queryAllCallback,
+			},
+		},
+		customConfig: {
+			storage: {
+				// 是否启用 localStorage 本地保存，会将列操作状态保留在本地（需要有 id）
+				visible: true, // 启用显示/隐藏列状态
+				resizable: true, // 启用列宽状态
+			},
+		},
+	});
+	return extras ? Object.assign(options, extras) : options;
+};

Web/src/layout/component/columnsAside.vue

@@ -283,7 +283,7 @@ watch(
 			width: var(--el-columnsMenuRoundWidth);
 			transform: translateX(-50%);
 			z-index: 0;
-			transition: 0.3s ease-in-out;
+			transition: 0.5s ease-in-out;
 			border-radius: 5px;
 		}
 		.columns-card {

Web/src/layout/footer/index.vue

@@ -1,8 +1,7 @@
 <template>
-	<div class="layout-footer pb15">
+	<div class="layout-footer mb5">
 		<div class="layout-footer-warp">
-			<!-- <div>{{ themeConfig.globalTitle }}</div> -->
+			<div>{{ themeConfig.globalTitle }} {{ themeConfig.copyright }}</div>
-			<div class="mt5">{{ themeConfig.copyright }} {{ themeConfig.globalTitle }}</div>
 		</div>
 	</div>
 </template>

Web/src/layout/lockScreen/index.vue

@@ -205,7 +205,6 @@ const onLockScreenSubmit = async () => {
 			const password = sm2.doEncrypt(state.lockScreenPassword, publicKey, 1);
 			const [err, res] = await feature(getAPI(SysAuthApi).apiSysAuthUnLockScreenPost(password));
 			if (err) {
-				console.log(err);
 				state.message = err.message;
 				state.showMessage = true;
 				state.lockScreenPassword = '';
@@ -245,7 +244,7 @@ onMounted(() => {
 					state.moveDifference = state.moveDifference - 10;
 					onMove();
 					//超过600像素则结束
-					if (state.moveDifference < -600) clearInterval(moveInterval);
+					if (state.moveDifference < -410 && moveInterval) clearInterval(moveInterval);
 				}, 5);
 			}
 			//当显示消息时，按ENTER切到密码输入

Web/src/layout/logo/index.vue

@@ -69,7 +69,7 @@ const onThemeConfigChange = () => {
 	cursor: pointer;
 	animation: logoAnimation 0.3s ease-in-out;
 	&-img {
-		width: 20px;
+		width: 35px;
 		margin: auto;
 	}
 	&:hover {

Web/src/layout/navBars/tagsView/contextmenu.vue

@@ -1,5 +1,5 @@
 <template>
-	<transition name="el-zoom-in-center">
+	<transition name="el-collapse-transition">
 		<div
 			aria-hidden="true"
 			class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu"

Web/src/layout/navBars/tagsView/tagsView.vue

@@ -18,14 +18,10 @@
 					"
 				>
 					<i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont" v-if="isActive(v)"></i>
-					<SvgIcon :name="v.meta.icon" v-if="!isActive(v) && getThemeConfig.isTagsviewIcon" class="pr5" />
+					<SvgIcon :name="v.meta.icon" v-if="getThemeConfig.isTagsviewIcon" class="pr5" :size="18" />
 					<span>{{ setTagsViewNameI18n(v) }}</span>
 					<template v-if="isActive(v)">
-						<SvgIcon
+						<SvgIcon name="ele-RefreshRight" class="ml5 layout-navbars-tagsview-ul-li-refresh" @click.stop="refreshCurrentTagsView($route.fullPath)" />
-							name="ele-RefreshRight"
-							class="ml5 layout-navbars-tagsview-ul-li-refresh"
-							@click.stop="refreshCurrentTagsView($route.fullPath)"
-						/>
 						<SvgIcon
 							name="ele-Close"
 							class="layout-navbars-tagsview-ul-li-icon layout-icon-active"
@@ -153,10 +149,7 @@ const solveAddTagsView = async (path: string, to?: RouteToFrom) => {
 	let current = state.tagsViewList.filter(
 		(v: RouteItem) =>
 			v.path === isDynamicPath &&
-			isObjectValueEqual(
+			isObjectValueEqual(to?.meta?.isDynamic ? (v.params ? v.params : null) : v.query ? v.query : null, to?.meta?.isDynamic ? (to?.params ? to?.params : null) : to?.query ? to?.query : null)
-				to?.meta?.isDynamic ? (v.params ? v.params : null) : v.query ? v.query : null,
-				to?.meta?.isDynamic ? (to?.params ? to?.params : null) : to?.query ? to?.query : null
-			)
 	);
 	if (current.length <= 0) {
 		// 防止：Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.
@@ -177,10 +170,7 @@ const singleAddTagsView = (path: string, to?: RouteToFrom) => {
 	state.tagsViewList.forEach((v) => {
 		if (
 			v.path === isDynamicPath &&
-			!isObjectValueEqual(
+			!isObjectValueEqual(to?.meta?.isDynamic ? (v.params ? v.params : null) : v.query ? v.query : null, to?.meta?.isDynamic ? (to?.params ? to?.params : null) : to?.query ? to?.query : null)
-				to?.meta?.isDynamic ? (v.params ? v.params : null) : v.query ? v.query : null,
-				to?.meta?.isDynamic ? (to?.params ? to?.params : null) : to?.query ? to?.query : null
-			)
 		) {
 			to?.meta?.isDynamic ? (v.params = to.params) : (v.query = to?.query);
 			v.url = setTagsViewHighlight(v);
@@ -601,7 +591,7 @@ watch(
 	background-color: var(--el-color-white);
 	border-bottom: 1px solid var(--next-border-color-light);
 	position: relative;
-	z-index: 1999;
+	z-index: auto;
 	:deep(.el-scrollbar__wrap) {
 		overflow-x: auto !important;
 	}
@@ -692,11 +682,29 @@ watch(
 	.tags-style-five {
 		align-items: flex-end;
 		.tags-style-five-svg {
-			-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+CgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKC0wLjEzMzUwNiA1MC4xMTkyIDUwKSIgaWQ9InN2Z18xIiBkPSJtMTAwLjExOTE5LDEwMGMtNTUuMjI4LDAgLTEwMCwtNDQuNzcyIC0xMDAsLTEwMGwwLDEwMGwxMDAsMHoiIG9wYWNpdHk9InVuZGVmaW5lZCIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjRjhFQUU3Ii8+CiAgPHBhdGggZD0ibS0wLjYzNzY2LDcuMzEyMjhjMC4xMTkxOSwwIDAuMjE3MzcsMC4wNTc5NiAwLjQ3Njc2LDAuMTE5MTljMC4yMzIsMC4wNTQ3NyAwLjI3MzI5LDAuMDM0OTEgMC4zNTc1NywwLjExOTE5YzAuMDg0MjgsMC4wODQyOCAwLjM1NzU3LDAgMC40NzY3NiwwbDAuMTE5MTksMGwwLjIzODM4LDAiIGlkPSJzdmdfMiIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0ibTI4LjkyMTM0LDY5LjA1MjQ0YzAsMC4xMTkxOSAwLDAuMjM4MzggMCwwLjM1NzU3bDAsMC4xMTkxOWwwLDAuMTE5MTkiIGlkPSJzdmdfMyIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z180IiBoZWlnaHQ9IjAiIHdpZHRoPSIxLjMxMTA4IiB5PSI2LjgzNTUyIiB4PSItMC4wNDE3MSIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z181IiBoZWlnaHQ9IjEuNzg3ODQiIHdpZHRoPSIwLjExOTE5IiB5PSI2OC40NTY1IiB4PSIyOC45MjEzNCIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z182IiBoZWlnaHQ9IjQuODg2NzciIHdpZHRoPSIxOS4wNzAzMiIgeT0iNTEuMjkzMjEiIHg9IjM2LjY2ODY2IiBzdHJva2U9Im51bGwiIGZpbGw9Im5vbmUiLz4KIDwvZz4KPC9zdmc+'),
+			mask-image: url('data:image/svg+xml,<svg width="35" height="71" viewBox="0 0 35 71" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M-0.00012207 0.5C-0.00012207 70.5 -5.89311e-05 70.5 34.9999 70.5H-0.00012207V27.7586V0.5Z" fill="black"/></svg>'),
-				url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoLTg5Ljc2MjQgNy4zMzAxNCA1NS4xMjUyKSIgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzEiIGZpbGw9IiNGOEVBRTciIGQ9Im02Mi41NzQ0OSwxMTcuNTIwODZjLTU1LjIyOCwwIC0xMDAsLTQ0Ljc3MiAtMTAwLC0xMDBsMCwxMDBsMTAwLDB6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgogIDxwYXRoIGQ9Im0tMC42Mzc2Niw3LjMxMjI4YzAuMTE5MTksMCAwLjIxNzM3LDAuMDU3OTYgMC40NzY3NiwwLjExOTE5YzAuMjMyLDAuMDU0NzcgMC4yNzMyOSwwLjAzNDkxIDAuMzU3NTcsMC4xMTkxOWMwLjA4NDI4LDAuMDg0MjggMC4zNTc1NywwIDAuNDc2NzYsMGwwLjExOTE5LDBsMC4yMzgzOCwwIiBpZD0ic3ZnXzIiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxwYXRoIGQ9Im0yOC45MjEzNCw2OS4wNTI0NGMwLDAuMTE5MTkgMCwwLjIzODM4IDAsMC4zNTc1N2wwLDAuMTE5MTlsMCwwLjExOTE5IiBpZD0ic3ZnXzMiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxyZWN0IGlkPSJzdmdfNCIgaGVpZ2h0PSIwIiB3aWR0aD0iMS4zMTEwOCIgeT0iNi44MzU1MiIgeD0iLTAuMDQxNzEiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxyZWN0IGlkPSJzdmdfNSIgaGVpZ2h0PSIxLjc4Nzg0IiB3aWR0aD0iMC4xMTkxOSIgeT0iNjguNDU2NSIgeD0iMjguOTIxMzQiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxyZWN0IGlkPSJzdmdfNiIgaGVpZ2h0PSI0Ljg4Njc3IiB3aWR0aD0iMTkuMDcwMzIiIHk9IjUxLjI5MzIxIiB4PSIzNi42Njg2NiIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiA8L2c+Cjwvc3ZnPg=='),
+				url('data:image/svg+xml,<svg width="35" height="70" viewBox="0 0 35 70" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M35 0C35 70 34.9999 70 0 70H35V27.2586V0Z" fill="black"/></svg>'),
 				url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect rx='8' width='100%' height='100%' fill='%23F8EAE7'/></svg>");
-			-webkit-mask-size: 18px 30px, 20px 30px, calc(100% - 30px) calc(100% + 17px);
+			mask-size:
-			-webkit-mask-position: right bottom, left bottom, center top;
+				20px 20px,
+				20px 20px,
+				calc(100% - 29px) calc(100% + 17px);
+			mask-position:
+				right bottom,
+				left bottom,
+				center top;
+			mask-repeat: no-repeat;
+			-webkit-mask-image: url('data:image/svg+xml,<svg width="35" height="71" viewBox="0 0 35 71" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M-0.00012207 0.5C-0.00012207 70.5 -5.89311e-05 70.5 34.9999 70.5H-0.00012207V27.7586V0.5Z" fill="black"/></svg>'),
+				url('data:image/svg+xml,<svg width="35" height="70" viewBox="0 0 35 70" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M35 0C35 70 34.9999 70 0 70H35V27.2586V0Z" fill="black"/></svg>'),
+				url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect rx='8' width='100%' height='100%' fill='%23F8EAE7'/></svg>");
+			-webkit-mask-size:
+				20px 20px,
+				20px 20px,
+				calc(100% - 29px) calc(100% + 17px);
+			-webkit-mask-position:
+				right bottom,
+				left bottom,
+				center top;
 			-webkit-mask-repeat: no-repeat;
 		}
 		.layout-navbars-tagsview-ul-li {
@@ -715,14 +723,14 @@ watch(
 			}
 			&:hover {
 				@extend .tags-style-five-svg;
-				background: var(--el-color-primary-light-9);
+				background: var(--el-color-primary-light-7);
 				color: unset;
 			}
 		}
 		.is-active {
 			@extend .tags-style-five-svg;
-			background: var(--el-color-primary-light-9) !important;
+			background: var(--el-color-primary-light-2) !important;
-			color: var(--el-color-primary) !important;
+			color: var(--next-bg-main-color) !important;
 			z-index: 1;
 		}
 	}

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

@@ -9,7 +9,9 @@
 						<div v-if="v.meta.title">{{ $t(v.meta.title) }}</div>
 						<div v-else>{{ v.meta.tagsViewName }}</div>
 					</span>
-					<a v-else @click.prevent="onBreadcrumbClick(v)"> <SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />{{ $t(v.meta.title) }} </a>
+					<a v-else @click.prevent="onBreadcrumbClick(v)" style="display: flex">
+						<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />{{ $t(v.meta.title) }}
+					</a>
 				</el-breadcrumb-item>
 			</transition-group>
 		</el-breadcrumb>
@@ -122,7 +124,7 @@ onBeforeRouteUpdate((to) => {
 		color: var(--next-bg-topBarColor);
 	}
 	.layout-navbars-breadcrumb-iconfont {
-		font-size: 14px;
+		font-size: 16px;
 		margin-right: 5px;
 	}
 	:deep(.el-breadcrumb__separator) {

Web/src/layout/navBars/topBar/settings.vue

@@ -437,7 +437,7 @@
 		<el-dialog v-model="state.onColorSet">
 			<template #header>
 				<div style="color: #fff">
-					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
+					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-MagicStick /> </el-icon>
 					<span> 中国传统颜色 </span>
 				</div>
 			</template>
@@ -510,9 +510,11 @@ const onColorPickerChange = () => {
 	// 颜色加深
 	document.documentElement.style.setProperty('--el-color-primary-dark-2', `${getDarkColor(getThemeConfig.value.primary, 0.1)}`);
 	document.documentElement.style.setProperty('--el-color-primary', getThemeConfig.value.primary);
+	document.documentElement.style.setProperty('--vxe-ui-font-primary-color', getThemeConfig.value.primary);
 	// 颜色变浅
 	for (let i = 1; i <= 9; i++) {
 		document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(getThemeConfig.value.primary, i / 10)}`);
+		if (i == 3) document.documentElement.style.setProperty('--vxe-ui-font-primary-lighten-color', `${getLightColor(getThemeConfig.value.primary, i / 10)}`);
 	}
 	setDispatchThemeConfig();
 };
@@ -625,8 +627,13 @@ const onAddFilterChange = (attr: string) => {
 // 4、界面显示 --> 深色模式
 const onAddDarkChange = () => {
 	const body = document.documentElement as HTMLElement;
-	if (getThemeConfig.value.isIsDark) body.setAttribute('data-theme', 'dark');
+	if (getThemeConfig.value.isIsDark) {
-	else body.setAttribute('data-theme', '');
+		body.setAttribute('data-theme', 'dark');
+		body.setAttribute('data-vxe-ui-theme', 'dark');
+	} else {
+		body.setAttribute('data-theme', '');
+		body.setAttribute('data-vxe-ui-theme', 'light');
+	}
 };
 // 4、界面显示 --> 开启水印
 const onWatermarkChange = () => {
@@ -906,4 +913,9 @@ defineExpose({
 	left: calc(50% - 10px);
 	top: calc(50% - 10px);
 }
+:deep(#color-box) {
+	.el-dialog__body {
+		padding: 0 !important;
+	}
+}
 </style>

Web/src/layout/navBars/topBar/user.vue

@@ -52,7 +52,7 @@
 				<ele-User />
 			</el-icon>
 		</div>
-		<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
+		<el-dropdown :show-timeout="70" :hide-timeout="50" size="large" @command="onHandleCommandClick">
 			<span class="layout-navbars-breadcrumb-user-link">
 				<el-tooltip effect="dark" placement="left">
 					<template #content>
@@ -65,7 +65,6 @@
 					</template>
 					<img :src="userInfos.avatar" class="layout-navbars-breadcrumb-user-link-photo mr5" />
 				</el-tooltip>
-
 				{{ userInfos.realName == '' ? userInfos.account : userInfos.realName }}
 				<el-icon class="el-icon--right">
 					<ele-ArrowDown />
@@ -74,8 +73,8 @@
 			<template #dropdown>
 				<el-dropdown-menu>
 					<!-- <el-dropdown-item command="/dashboard/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item> -->
-					<el-dropdown-item command="/system/userCenter">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
+					<el-dropdown-item :icon="Avatar" command="/system/userCenter">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
-					<el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
+					<el-dropdown-item :icon="Guide" divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
 				</el-dropdown-menu>
 			</template>
 		</el-dropdown>
@@ -101,6 +100,7 @@ import { clearAccessTokens, getAPI } from '/@/utils/axios-utils';
 import { SysAuthApi, SysNoticeApi } from '/@/api-services/api';
 import Push from 'push.js';
 import { signalR } from '/@/views/system/onlineUser/signalR';
+import { Avatar, Guide } from '@element-plus/icons-vue';
 
 // 引入组件
 const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/topBar/userNews.vue'));

Web/src/layout/navBars/topBar/userNews.vue

@@ -29,7 +29,13 @@
 				</div>
 			</el-tab-pane>
 		</el-tabs>
-		<el-dialog v-model="state.dialogVisible" title="消息详情" draggable width="769px">
+		<el-dialog v-model="state.dialogVisible" draggable overflow width="769px">
+			<template #header>
+				<div style="color: #fff">
+					<el-icon size="16" style="margin-right: 10px; display: inline; vertical-align: middle"> <ele-Bell /> </el-icon>
+					<span>消息详情</span>
+				</div>
+			</template>
 			<p v-html="state.content"></p>
 			<template #footer>
 				<span class="dialog-footer">
@@ -116,4 +122,7 @@ const viewNoticeDetail = async (notice: any) => {
 		justify-content: center;
 	}
 }
+:deep(.el-dialog__body) {
+	min-height: 700px !important;
+}
 </style>

Web/src/layout/navMenu/subItem.vue

@@ -10,10 +10,8 @@
 		<template v-else>
 			<el-menu-item :index="val.path" :key="val.path">
 				<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
-					<div class="theme">
+					<SvgIcon :name="val.meta.icon" />
-						<SvgIcon :name="val.meta.icon" />
+					<span>{{ $t(val.meta.title) }}</span>
-						<span>{{ $t(val.meta.title) }}</span>
-					</div>
 				</template>
 				<template v-else>
 					<a class="w100" @click.prevent="onALinkClick(val)">
@@ -49,9 +47,3 @@ const onALinkClick = (val: RouteItem) => {
 	other.handleOpenLink(val);
 };
 </script>
-
-<style lang="scss" scoped>
-.theme {
-	color: var(--next-bg-menuBarColor);
-}
-</style>

Web/src/main.ts

@@ -5,18 +5,24 @@ import router from '/@/router';
 import { directive } from '/@/directive/index';
 import { i18n } from '/@/i18n/index';
 import other from '/@/utils/other';
-
 import ElementPlus from 'element-plus';
 import '/@/theme/index.scss';
 import VueGridLayout from 'vue-grid-layout';
-
+// 动画库
-import VForm3 from 'vform3-builds'; // VForm3表单设计
+import 'animate.css';
-import 'vform3-builds/dist/designer.style.css'; // VForm3表单设计样式
+// 栅格布局
-import VueSignaturePad from 'vue-signature-pad'; // 电子签名
+import VueGridLayout from 'vue-grid-layout';
-import vue3TreeOrg from 'vue3-tree-org'; // 组织架构图
+// 电子签名
-import 'vue3-tree-org/lib/vue3-tree-org.css'; // 组织架构图样式
+import VueSignaturePad from 'vue-signature-pad';
-import 'animate.css'; // 动画库
+// 组织架构图
-
+import vue3TreeOrg from 'vue3-tree-org';
+import 'vue3-tree-org/lib/vue3-tree-org.css';
+// VForm3 表单设计
+import VForm3 from 'vform3-builds';
+import 'vform3-builds/dist/designer.style.css';
+// Vxe-Table
+import { setupVXETable } from '/@/hooks/setupVXETableHook';
+// 关闭自动打印
 import { disAutoConnect } from 'vue-plugin-hiprint';
 disAutoConnect();
 
@@ -25,4 +31,4 @@ const app = createApp(App);
 directive(app);
 other.elSvg(app);
 
-app.use(pinia).use(router).use(ElementPlus).use(i18n).use(VueGridLayout).use(VForm3).use(VueSignaturePad).use(vue3TreeOrg).mount('#app');
+app.use(pinia).use(router).use(ElementPlus).use(setupVXETable).use(i18n).use(VueGridLayout).use(VForm3).use(VueSignaturePad).use(vue3TreeOrg).mount('#app');

Web/src/stores/themeConfig.ts

@@ -84,15 +84,15 @@ export const useThemeConfig = defineStore('themeConfig', {
 			// 是否开启 Tagsview
 			isTagsview: true,
 			// 是否开启 Breadcrumb 图标
-			isBreadcrumbIcon: false,
+			isBreadcrumbIcon: true,
 			// 是否开启 Tagsview 图标
-			isTagsviewIcon: false,
+			isTagsviewIcon: true,
 			// 是否开启 TagsView 缓存
-			isCacheTagsView: false,
+			isCacheTagsView: true,
 			// 是否开启 TagsView 拖拽
 			isSortableTagsView: true,
-			// 是否开启 TagsView 共用
+			// 是否开启 TagsView 共用 -- 共用详情界面：tagsView只会出现一个；非共用详情界面：tagsView会出现多个
-			isShareTagsView: false,
+			isShareTagsView: true,
 			// 是否开启 Footer 底部版权信息
 			isFooter: true,
 			// 是否开启灰色模式
@@ -100,7 +100,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 			// 是否开启色弱模式
 			isInvert: false,
 			// 是否开启水印
-			isWatermark: false,
+			isWatermark: true,
 			// 水印文案
 			watermarkText: 'Admin.NET.Pro',
 
@@ -111,7 +111,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 			// 定义的值与 `/src/layout/navBars/tagsView/tagsView.vue` 中的 class 同名
 			tagsStyle: 'tags-style-one',
 			// 主页面切换动画: Animate.css
-			animation: 'fadeLeft',
+			animation: 'fadeDown',
 			// 分栏高亮风格：可选值"<columns-round|columns-card>"，默认 columns-round
 			columnsAsideStyle: 'columns-round',
 			// 分栏布局风格：可选值"<columns-horizontal|columns-vertical>"，默认 columns-horizontal
@@ -141,7 +141,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 			// 网站副标题（登录页顶部文字）
 			globalViceTitleMsg: '站在巨人肩膀上的 .NET 通用权限开发框架',
 			// 版权和备案文字
-			copyright: 'Copyright © 2021-present Admin.NET All rights reserved.',
+			copyright: 'Copyright © 2021-Present Admin.NET All rights reserved.',
 			// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
 			globalI18n: 'zh-cn',
 			// 默认全局组件大小，可选值"<large|'default'|small>"，默认 'large'

Web/src/theme/app.scss

@@ -26,6 +26,10 @@
 	//--el-text-color-primary: rgba(0, 0, 0, .75) !important;
 	--el-text-color-regular: rgba(0, 0, 0, 0.99) !important;
 	//--el-text-color-secondary: var(--el-text-color-regular) !important;
+
+	// vxe
+	--vxe-primary-lighten-color: var(--el-color-primary) !important;
+	--vxe-primary-darken-color: var(--el-color-primary) !important;
 }
 
 html,
@@ -58,7 +62,7 @@ body,
 	width: 100%;
 	height: 100%;
 	.layout-pd {
-		padding: 15px !important;
+		padding: 5px !important;
 	}
 	.layout-flex {
 		display: flex;
@@ -245,6 +249,20 @@ body,
 	}
 }
 
+.flex-between {
+	display: flex;
+	flex: 1;
+	flex-wrap: nowrap;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.flex-end {
+	@extend .flex;
+	flex-wrap: nowrap;
+	justify-content: end;
+}
+
 /* cursor 鼠标形状
 ------------------------------- */
 // 默认

Web/src/theme/dark.scss

@@ -61,6 +61,18 @@
 	--el-mask-color: rgb(42 42 42 / 80%);
 	--el-fill-color-lighter: var(--next-color-hover-rgba) !important;
 
+	// vxe
+	--vxe-pager-background-color: var(--next-color-disabled) !important;
+	--vxe-toolbar-background-color: var(--next-color-disabled) !important;
+	--vxe-input-background-color: var(--el-button-bg-color) !important;
+	--vxe-primary-lighten-color: var(--el-color-primary) !important;
+	--vxe-primary-darken-color: var(--el-color-primary) !important;
+	--vxe-font-color: var(--el-button-text-color) !important;
+	--vxe-input-border-color: var(--el-color-primary-light-5) !important;
+	--vxe-pager-perfect-button-background-color: var(--el-color-info) !important;
+	// --vxe-table-header-background-color: var(--el-bg-color) !important;
+	// --vxe-table-body-background-color: var(--el-fill-color-lighter) !important;
+
 	// button
 	.el-button {
 		&:hover {

Web/src/theme/element.scss

@@ -25,6 +25,15 @@
 	max-height: 280px !important;
 }
 
+// InputNumber无控制器时与Input保持一致
+.el-input-number.is-without-controls .el-input__wrapper {
+	padding-left: 7px !important;
+	padding-right: 7px !important;
+	.el-input__inner {
+		text-align: left !important;
+	}
+}
+
 /* Form 表单
 ------------------------------- */
 .el-form {
@@ -311,18 +320,19 @@
 		height: 100%;
 
 		.el-dialog {
+			padding: 0 !important;
 			margin: 0 auto !important;
 			position: absolute;
 
 			.el-dialog__body {
-				padding: 20px !important;
+				padding: 18px !important;
 			}
 		}
 	}
 }
 
 .el-dialog__body {
-	max-height: calc(100vh - 85px) !important;
+	max-height: calc(100vh - 160px) !important;
 	overflow-y: auto;
 	overflow-x: auto;
 }
@@ -333,18 +343,18 @@
 // 	font-weight: 700;
 // }
 .el-dialog__header {
-	margin: -16px -16px 0px -16px;
+	margin-right: 0;
-	padding: 8px 0px 8px 20px;
+	padding: 8px;
 	background: var(--el-color-primary);
 }
-
+.el-dialog__footer {
-// .el-dialog__footer {
+	padding: 15px;
-// 	// border-top: 1px solid var(--el-color-info-light-7);
+	// border-top: 1px solid var(--el-color-primary-light-7);
-// 	padding-bottom: 10px;
+}
-// }
 .el-dialog__headerbtn {
-	margin-top: -5px;
+	height: 37px;
-
+	width: 40px;
+	font-weight: 900;
 	.el-dialog__close {
 		color: #fff;
 	}
@@ -359,6 +369,9 @@
 .el-card__header {
 	padding: 15px 20px;
 }
+.el-card__body {
+	padding: 8px;
+}
 
 /* Table 表格 element plus 2.2.0 版本
 ------------------------------- */
@@ -401,9 +414,10 @@
 // 分页组件靠右显示
 .el-pagination {
 	float: right;
-	margin: 10px 0 -10px 0 !important;
+	margin: 8px 0 0 0 !important;
 }
-//由于index.vue模板中加入了el-select宽度为100%，导致分页组件的下拉框无法正确显示，这里强制给个宽度分页组件可正常显示
+
+// 强制给分页组件的下拉框设置宽度
 .el-pagination--small {
 	.el-select {
 		width: 100px !important;
@@ -445,13 +459,13 @@
 	--el-drawer-padding-primary: unset !important;
 
 	.el-drawer__header {
-		padding: 0 15px !important;
+		padding: 8px !important;
-		height: 50px;
 		display: flex;
 		align-items: center;
 		margin-bottom: 0 !important;
 		border-bottom: 1px solid var(--el-border-color);
-		color: var(--el-text-color-primary);
+		color: var(--el-color-white);
+		background-color: var(--el-color-primary);
 	}
 
 	.el-drawer__body {
@@ -459,6 +473,12 @@
 		height: 100%;
 		overflow: auto;
 	}
+	.el-drawer__footer {
+		padding: 5px;
+	}
+}
+.el-drawer__close-btn:hover .el-drawer__close {
+	color: var(--el-color-danger) !important;
 }
 
 $--el-table-text-color: #fb6d49;
@@ -491,6 +511,7 @@ $--el-table-text-color: #fb6d49;
 			.el-card__body {
 				height: 100%;
 				display: flex;
+				padding: 5px 5px 8px 5px;
 				flex-direction: column;
 				justify-content: space-between;
 

Web/src/theme/index.scss

@@ -8,3 +8,4 @@
 @import './dark.scss';
 @import './iconfont/font_2298093_rnp72ifj3ba.scss';
 @import './font-awesome/font-awesome.scss';
+@import './vxe.scss';

Web/src/theme/vxe.scss

@@ -0,0 +1,69 @@
+@import 'vxe-table/styles/all.scss';
+@import 'vxe-pc-ui/styles/all.scss';
+
+.vxe-toolbar {
+	padding: 0 0 6px 0;
+}
+
+.vxe-tools--operate > .vxe-button.size--mini,
+.vxe-custom--wrapper > .vxe-button.size--mini,
+.vxe-tools--wrapper > .vxe-button.size--mini {
+	height: 24px !important;
+	width: 24px !important;
+	min-width: 24px !important;
+	text-overflow: clip;
+	line-height: unset;
+	padding: 0 0.4em !important;
+}
+
+.vxe-cell {
+	padding-left: 5px !important;
+	padding-right: 5px !important;
+	.el-button {
+		padding: 0 !important;
+	}
+}
+
+.vxe-pager.size--mini {
+	height: 30px;
+	margin-top: 4px;
+}
+
+// 在El-Dialog中的表格存在下拉选择框时，要加这个类 popupClassName: 'zIndex2023' (Vxe4.5.0生效) 否则弹出的下拉容器会被覆盖
+.zIndex2023 {
+	z-index: 2023 !important;
+}
+
+.popper-400 {
+	width: 400px !important;
+}
+
+.popper-400 .el-select-dropdown__list {
+	width: 100% !important;
+}
+
+.popper-400 .el-select-dropdown__option-item {
+	padding: 0 30px 0 10px !important;
+}
+
+// 表格内容颜色
+.vxe-table--render-default {
+	//color: var(--vxe-ui-font-color);
+	color: unset !important;
+}
+
+.vxe-table--header-wrapper {
+	color: unset !important;
+}
+
+// 表格分页颜色
+.vxe-pager {
+	color: unset !important;
+}
+
+:deep(.xGrid-style .vxe-body--row.warning-row) {
+	background-color: var(--el-color-warning-light-9);
+}
+:deep(.xGrid-style .vxe-body--row.success-row) {
+	background-color: var(--el-color-success-light-9);
+}

Web/src/utils/authFunction.ts

@@ -1,5 +1,6 @@
 import { useUserInfo } from '/@/stores/userInfo';
 import { judgementSameArr } from '/@/utils/arrayOperation';
+import { resolveDirective, withDirectives } from 'vue';
 
 /**
  * 单个权限验证
@@ -36,3 +37,30 @@ export function authAll(value: Array<string>): boolean {
 	const stores = useUserInfo();
 	return judgementSameArr(value, stores.userInfos.authBtnList);
 }
+/**
+ * 单个权限验证，是否满足，返回VNode
+ * @param VNode 元素
+ * @param value 权限值
+ * @returns VNode
+ */
+export function hAuth<T extends VNode>(el: T, value: string): T {
+	return withDirectives(el, [[resolveDirective('auth'), value]]);
+}
+/**
+ * 多个权限验证，判断是否满足一个，返回VNode
+ * @param VNode 元素
+ * @param value 权限值
+ * @returns VNode
+ */
+export function hAuths<T extends VNode>(el: T, value: Array<string>): T {
+	return withDirectives(el, [[resolveDirective('auths'), value]]);
+}
+/**
+ * 多个权限验证，判断是否全部满足，返回VNode
+ * @param VNode 元素
+ * @param value 权限值
+ * @returns VNode
+ */
+export function hAuthAll<T extends VNode>(el: T, value: Array<string>): T {
+	return withDirectives(el, [[resolveDirective('auth-all'), value]]);
+}

Web/src/utils/formatTime.ts

@@ -39,8 +39,7 @@ export function formatDate(date: Date, format: string): string {
 		'3': '三',
 		'4': '四',
 	};
-	if (/(W+)/.test(format))
+	if (/(W+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]);
-		format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]);
 	if (/(Q+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 4 ? '第' + quarter[qut] + '季度' : quarter[qut]);
 	if (/(Z+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 3 ? '第' + z + '周' : z + '');
 	for (let k in opt) {

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

@@ -1,6 +1,6 @@
 <template>
 	<div class="sys-onlineUser-container">
-		<el-drawer v-model="state.isVisible" title="在线用户列表" size="60%">
+		<el-drawer v-model="state.isVisible" title="在线用户列表" size="35%">
 			<el-card shadow="hover" :body-style="{ paddingBottom: '0' }" style="margin: 8px">
 				<el-form :model="state.queryParams" ref="queryForm" :inline="true">
 					<el-form-item label="账号" prop="userName">

Web/src/views/system/role/component/baseApi.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="sys-baseApi-container">
-		<el-drawer v-model="state.isVisible" :title="state.drawerTitle" size="35%">
+		<el-drawer v-model="state.isVisible" :title="state.drawerTitle" size="30%">
 			<el-card class="tree-card" shadow="hover" style="height: calc(100vh - 110px)" body-style="height:100%; overflow:auto">
 				<template #header>
 					<div class="card-header">

Web/src/views/system/role/component/grantApi.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="sys-grantApi-container">
-		<el-drawer v-model="state.isVisible" :title="state.drawerTitle" size="35%">
+		<el-drawer v-model="state.isVisible" :title="state.drawerTitle" size="30%">
 			<el-card class="tree-card" shadow="hover" style="height: calc(100vh - 110px)" body-style="height:100%; overflow:auto">
 				<template #header>
 					<div class="card-header">

Web/src/views/system/role/component/grantData.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="sys-grantData-container">
-		<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="450px">
+		<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="500px">
 			<template #header>
 				<div style="color: #fff">
 					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>

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

@@ -1,78 +1,80 @@
 <template>
-	<div class="sys-role-container">
+	<div class="sys-role-container" v-loading="options.loading">
-		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
+		<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
-			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
+			<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" :label-width="'60px'" style="flex: 1 1 0%">
-				<el-form-item label="角色名称">
+				<el-row :gutter="10">
-					<el-input v-model="state.queryParams.name" placeholder="角色名称" clearable />
+					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
-				</el-form-item>
+						<el-form-item label="角色名称" prop="name">
-				<el-form-item label="角色编码">
+							<el-input v-model="state.queryParams.name" placeholder="角色名称" clearable @keyup.enter.native="handleQuery(true)" />
-					<el-input v-model="state.queryParams.code" placeholder="角色编码" clearable />
+						</el-form-item>
-				</el-form-item>
+					</el-col>
-				<el-form-item>
+					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
+						<el-form-item label="角色编码" prop="code">
+							<el-input v-model="state.queryParams.code" placeholder="角色编码" clearable @keyup.enter.native="handleQuery(true)" />
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+
+			<el-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />
+
+			<el-row>
+				<el-col>
 					<el-button-group>
-						<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysRole:page'"> 查询 </el-button>
+						<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysRole:page'"> 查询 </el-button>
 						<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
 					</el-button-group>
-				</el-form-item>
+				</el-col>
-				<el-form-item>
+			</el-row>
-					<el-button type="primary" icon="ele-Plus" @click="openAddRole" v-auth="'sysRole:add'"> 新增 </el-button>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" icon="ele-Link" @click="openBaseApi" plain> 设置基础接口资源 </el-button>
-				</el-form-item>
-			</el-form>
 		</el-card>
 
 		<el-card class="full-table" shadow="hover" style="margin-top: 5px">
-			<el-table :data="state.roleData" style="width: 100%" v-loading="state.loading" border>
+			<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" @sort-change="sortChange">
-				<el-table-column type="index" label="序号" width="55" align="center" fixed />
+				<template #toolbar_buttons>
-				<el-table-column prop="name" label="角色名称" align="center" show-overflow-tooltip />
+					<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysRole:add'"> 新增 </el-button>
-				<el-table-column prop="code" label="角色编码" align="center" show-overflow-tooltip />
+					<el-button type="primary" icon="ele-Link" @click="openBaseApi" plain> 设置基础接口资源 </el-button>
-				<el-table-column label="数据范围" align="center" show-overflow-tooltip>
+				</template>
-					<template #default="scope">
+				<template #toolbar_tools></template>
-						<el-tag effect="plain" v-if="scope.row.dataScope === 1">全部数据</el-tag>
+				<template #empty>
-						<el-tag effect="plain" v-else-if="scope.row.dataScope === 2">本部门及以下数据</el-tag>
+					<el-empty :image-size="200" />
-						<el-tag effect="plain" v-else-if="scope.row.dataScope === 3">本部门数据</el-tag>
+				</template>
-						<el-tag effect="plain" v-else-if="scope.row.dataScope === 4">仅本人数据</el-tag>
+				<template #row_dataScope="{ row }">
-						<el-tag effect="plain" v-else-if="scope.row.dataScope === 5">自定义数据</el-tag>
+					<el-tag v-if="row.dataScope === 1">全部数据</el-tag>
-					</template>
+					<el-tag v-else-if="row.dataScope === 2">本部门及以下数据</el-tag>
-				</el-table-column>
+					<el-tag v-else-if="row.dataScope === 3">本部门数据</el-tag>
-				<el-table-column prop="tenantName" label="租户名称" width="180" align="center" show-overflow-tooltip />
+					<el-tag v-else-if="row.dataScope === 4">仅本人数据</el-tag>
-				<el-table-column prop="orderNo" label="排序" width="70" align="center" show-overflow-tooltip />
+					<el-tag v-else-if="row.dataScope === 5">自定义数据</el-tag>
-				<el-table-column label="状态" width="70" align="center" show-overflow-tooltip>
+				</template>
-					<template #default="scope">
+				<template #row_status="{ row }">
-						<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
+					<el-tag v-if="row.status === 1" type="success">启用</el-tag>
-						<el-tag type="danger" v-else>禁用</el-tag>
+					<el-tag v-else type="danger">禁用</el-tag>
-					</template>
+				</template>
-				</el-table-column>
+				<template #row_record="{ row }">
-				<el-table-column label="修改记录" width="100" align="center" show-overflow-tooltip>
+					<ModifyRecord :data="row" />
-					<template #default="scope">
+				</template>
-						<ModifyRecord :data="scope.row" />
+				<template #row_buttons="{ row }">
-					</template>
+					<el-tooltip content="编辑" placement="top">
-				</el-table-column>
+						<el-button icon="ele-Edit" size="small" text type="primary" @click="handleEdit(row)" v-auth="'sysRole:update'"></el-button>
-				<el-table-column label="操作" width="310" fixed="right" align="center" show-overflow-tooltip>
+					</el-tooltip>
-					<template #default="scope">
+					<el-tooltip content="删除" placement="top">
-						<el-button icon="ele-Link" size="small" text type="primary" @click="openGrantApi(scope.row)" v-auth="'sysRole:grantApi'"> 接口资源 </el-button>
+						<el-button icon="ele-Delete" size="small" text type="danger" @click="handleDelete(row)" v-auth="'sysRole:delete'"></el-button>
-						<el-button icon="ele-OfficeBuilding" size="small" text type="primary" @click="openGrantData(scope.row)" v-auth="'sysRole:grantDataScope'"> 数据范围 </el-button>
+					</el-tooltip>
-						<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditRole(scope.row)" v-auth="'sysRole:update'"> 编辑 </el-button>
+					<el-button icon="ele-Link" size="small" text type="primary" @click="openGrantApi(row)" v-auth="'sysRole:grantApi'"> 接口资源 </el-button>
-						<el-button icon="ele-Delete" size="small" text type="danger" @click="delRole(scope.row)" v-auth="'sysRole:delete'" :disabled="scope.row.sysFlag === 1"> 删除 </el-button>
+					<el-button icon="ele-OfficeBuilding" size="small" text type="primary" @click="openGrantData(row)" v-auth="'sysRole:grantDataScope'">数据范围</el-button>
-					</template>
+				</template>
-				</el-table-column>
+				<template #pager>
-			</el-table>
+					<vxe-pager
-			<el-pagination
+						:loading="options.loading"
-				v-model:currentPage="state.tableParams.page"
+						v-model:current-page="state.tableParams.page"
-				v-model:page-size="state.tableParams.pageSize"
+						v-model:page-size="state.tableParams.pageSize"
-				:total="state.tableParams.total"
+						:total="state.tableParams.total"
-				:page-sizes="[10, 20, 50, 100]"
+						@page-change="pageChange"
-				small
+					/>
-				background
+				</template>
-				@size-change="handleSizeChange"
+			</vxe-grid>
-				@current-change="handleCurrentChange"
-				layout="total, sizes, prev, pager, next, jumper"
-			/>
 		</el-card>
 
-		<EditRole ref="editRoleRef" :title="state.editRoleTitle" @handleQuery="handleQuery" />
+		<EditRole ref="editRoleRef" :title="state.title" @handleQuery="handleQuery" />
 		<GrantData ref="grantDataRef" @handleQuery="handleQuery" />
 		<GrantApi ref="grantApiRef" @handleQuery="handleQuery" />
 		<BaseApi ref="baseApiRef" />
@@ -83,6 +85,9 @@
 import { onMounted, reactive, ref } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { auth } from '/@/utils/authFunction';
+import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
+import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
+
 import EditRole from '/@/views/system/role/component/editRole.vue';
 import GrantData from '/@/views/system/role/component/grantData.vue';
 import GrantApi from '/@/views/system/role/component/grantApi.vue';
@@ -93,58 +98,115 @@ import { getAPI } from '/@/utils/axios-utils';
 import { SysRoleApi } from '/@/api-services/api';
 import { PageRoleOutput } from '/@/api-services/models';
 
+const xGrid = ref<VxeGridInstance>();
 const editRoleRef = ref<InstanceType<typeof EditRole>>();
 const grantDataRef = ref<InstanceType<typeof GrantData>>();
 const grantApiRef = ref<InstanceType<typeof GrantApi>>();
 const baseApiRef = ref<InstanceType<typeof BaseApi>>();
 const state = reactive({
-	loading: false,
-	roleData: [] as Array<PageRoleOutput>,
 	queryParams: {
 		name: undefined,
 		code: undefined,
 	},
 	tableParams: {
 		page: 1,
-		pageSize: 20,
+		pageSize: 50,
+		field: 'id', // 默认的排序字段
+		order: 'aes', // 排序方向
+		descStr: 'desc', // 降序排序的关键字符
 		total: 0 as any,
 	},
-	editRoleTitle: '',
+	visible: false,
+	title: '',
+});
+//表格参数配置
+const options = useVxeTable<PageRoleOutput>({
+	id: 'sysRole',
+	// name: '角色',
+	columns: [
+		// { type: 'checkbox', width: 40, fixed: 'left' },
+		{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
+		{ field: 'name', title: '角色名称', minWidth: 150, showOverflow: 'tooltip' },
+		{ field: 'code', title: '角色编码', minWidth: 150, showOverflow: 'tooltip' },
+		{ field: 'dataScope', title: '数据范围', minWidth: 150, showOverflow: 'tooltip', slots: { default: 'row_dataScope' } },
+		{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
+		{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
+		{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
+		{ title: '操作', fixed: 'right', width: 280, showOverflow: true, slots: { default: 'row_buttons' } },
+	],
+	searchCallback: () => handleQuery(),
+	queryAllCallback: () => fetchData({ pageSize: 99999 }),
 });
 
+// 页面初始化
 onMounted(async () => {
-	handleQuery();
+	await handleQuery();
 });
 
 // 查询操作
-const handleQuery = async () => {
+const handleQuery = async (reset = false) => {
-	state.loading = true;
+	if (reset) state.tableParams.page = 1;
-	let params = Object.assign(state.queryParams, state.tableParams);
+	options.loading = true;
-	var res = await getAPI(SysRoleApi).apiSysRolePagePost(params);
+	var res = await fetchData(null);
-	state.roleData = res.data.result?.items ?? [];
+	await xGrid.value?.loadData(res.data.result?.items ?? []);
 	state.tableParams.total = res.data.result?.total;
-	state.loading = false;
+	options.loading = false;
+};
+
+// 获取表数据
+const fetchData = async (tableParams: any) => {
+	let params = Object.assign(state.queryParams, state.tableParams, tableParams);
+	return getAPI(SysRoleApi).apiSysRolePagePost(params);
 };
 
 // 重置操作
-const resetQuery = () => {
+const resetQuery = async () => {
-	state.queryParams.name = undefined;
 	state.queryParams.code = undefined;
-	handleQuery();
+	state.queryParams.name = undefined;
+	await handleQuery(true);
+};
+
+// 改变页码序号或页面容量
+const pageChange: VxePagerEvents.PageChange = async ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
+	state.tableParams.page = currentPage;
+	state.tableParams.pageSize = pageSize;
+	await handleQuery();
+};
+
+// 列排序
+const sortChange = async (options: any) => {
+	state.tableParams.field = options.field;
+	state.tableParams.order = options.order;
+	await handleQuery();
 };
 
 // 打开新增页面
-const openAddRole = () => {
+const handleAdd = () => {
-	state.editRoleTitle = '添加角色';
+	state.title = '添加角色';
 	editRoleRef.value?.openDialog({ id: undefined, status: 1, orderNo: 100 });
 };
 
 // 打开编辑页面
-const openEditRole = async (row: any) => {
+const handleEdit = async (row: any) => {
-	state.editRoleTitle = '编辑角色';
+	state.title = '编辑角色';
 	editRoleRef.value?.openDialog(row);
 };
 
+// 删除
+const handleDelete = (row: any) => {
+	ElMessageBox.confirm(`确定删角色：【${row.name}】?`, '提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+		.then(async () => {
+			await getAPI(SysRoleApi).apiSysRoleDeletePost({ id: row.id });
+			await handleQuery();
+			ElMessage.success('删除成功');
+		})
+		.catch(() => {});
+};
+
 // 打开授权数据范围页面
 const openGrantData = (row: any) => {
 	grantDataRef.value?.openDialog(row);
@@ -159,31 +221,4 @@ const openGrantApi = (row: any) => {
 const openBaseApi = () => {
 	baseApiRef.value?.openDrawer();
 };
-
-// 删除
-const delRole = (row: any) => {
-	ElMessageBox.confirm(`确定删角色：【${row.name}】?`, '提示', {
-		confirmButtonText: '确定',
-		cancelButtonText: '取消',
-		type: 'warning',
-	})
-		.then(async () => {
-			await getAPI(SysRoleApi).apiSysRoleDeletePost({ id: row.id });
-			handleQuery();
-			ElMessage.success('删除成功');
-		})
-		.catch(() => {});
-};
-
-// 改变页面容量
-const handleSizeChange = (val: number) => {
-	state.tableParams.pageSize = val;
-	handleQuery();
-};
-
-// 改变页码序号
-const handleCurrentChange = (val: number) => {
-	state.tableParams.page = val;
-	handleQuery();
-};
 </script>