😎1、优化日志页面与主题颜色匹配 2、修复下拉表格选择器组件错误

2025-08-17 17:05:06 +08:00 · 2025-08-17 17:05:06 +08:00 · 07e85a9900
commit 07e85a9900
parent 3dbb59b4db
7 changed files with 417 additions and 379 deletions
--- a/Web/package.json
+++ b/Web/package.json
@ -2,7 +2,7 @@
 	"name": "admin.net.pro",
 	"type": "module",
 	"version": "2.4.33",
-	"lastBuildTime": "2025.08.15",
+	"lastBuildTime": "2025.08.17",
 	"description": "Admin.NET 站在巨人肩膀上的 .NET 通用权限开发框架",
 	"author": "zuohuaijun",
 	"license": "MIT",
@ -26,8 +26,8 @@
 		"@vue-office/excel": "^1.7.14",
 		"@vue-office/pdf": "^2.0.10",
 		"@vueuse/core": "^13.6.0",
-		"@vxe-ui/plugin-export-xlsx": "^4.2.5",
-		"@vxe-ui/plugin-render-element": "^4.0.16",
+		"@vxe-ui/plugin-export-xlsx": "^4.3.0",
+		"@vxe-ui/plugin-render-element": "^4.1.0",
 		"@wangeditor/editor": "^5.1.23",
 		"@wangeditor/editor-for-vue": "^5.1.12",
 		"animate.css": "^4.1.1",
@ -88,7 +88,7 @@
 		"@iconify/vue": "^5.0.0",
 		"@plugin-web-update-notification/vite": "^2.0.1",
 		"@types/lodash-es": "^4.17.12",
-		"@types/node": "^22.17.1",
+		"@types/node": "^22.17.2",
 		"@types/nprogress": "^0.2.3",
 		"@types/sortablejs": "^1.15.8",
 		"@typescript-eslint/eslint-plugin": "^8.39.1",
@ -97,7 +97,7 @@
 		"@vitejs/plugin-vue-jsx": "^5.0.1",
 		"@vue/compiler-sfc": "^3.5.18",
 		"cli-progress": "^3.12.0",
-		"code-inspector-plugin": "^1.1.1",
+		"code-inspector-plugin": "^1.2.0",
 		"colors": "^1.4.0",
 		"dotenv": "^17.2.1",
 		"eslint": "^9.33.0",
--- a/Web/src/components/selector/pulldownSelecter.vue
+++ b/Web/src/components/selector/pulldownSelecter.vue
@ -293,7 +293,8 @@ const setDefaultOptions = (options: any[]) => {

 // 设置查询参数
 const setQueryParams = (query: any, append: boolean = true) => {
-  if (!pagination) { // 不启用分页，则全量显示
+	if (!props.pagination) {
+		// 不启用分页，则全量显示
 		query = Object.assign(query, {
 			page: 1,
 			pageSize: 99999,
@ -320,6 +321,7 @@ defineExpose({
 	setDefaultOptions,
 });
 </script>
+
 <template>
 	<el-select
 		v-model="state.selectedValues"
@ -341,7 +343,13 @@ defineExpose({
 		<el-option style="width: 0; height: 0" />

 		<!-- 默认选项，用于回显数据 -->
-    <el-option v-for="item in (state.defaultOptions ?? []).filter((e) => !state.tableData?.items?.find((e2) => e2[valueProp] === e[valueProp]))" :key="item[valueProp]" :label="labelFormat(item) || item[labelProp]" :value="item[valueProp]" style="width: 0; height: 0" />
+		<el-option
+			v-for="item in (state.defaultOptions ?? []).filter((e) => !state.tableData?.items?.find((e2) => e2[valueProp] === e[valueProp]))"
+			:key="item[valueProp]"
+			:label="labelFormat(item) || item[labelProp]"
+			:value="item[valueProp]"
+			style="width: 0; height: 0"
+		/>

 		<!-- 下拉框内容区域 -->
 		<div class="w100" v-loading="state.loading">
@ -350,7 +358,7 @@ defineExpose({
 					<!-- 查询表单插槽内容 -->
 					<slot name="queryForm" :query="state.tableQuery" :handleQuery="handleQuery"></slot>
 					<!-- 查询和重置按钮 -->
-          <el-button-group style="position: absolute; right: 10px;">
+					<el-button-group style="position: absolute; right: 10px">
 						<el-button type="primary" icon="ele-Search" @click="remoteMethod(state.tableQuery)"> 查询 </el-button>
 						<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
 					</el-button-group>
@ -372,7 +380,7 @@ defineExpose({

 			<!-- 分页组件 -->
 			<el-pagination
-          v-if="props.showPagination"
+				v-if="props.pagination"
 				:disabled="state.loading"
 				:currentPage="state.tableQuery.page"
 				:page-size="state.tableQuery.pageSize"
--- a/Web/src/components/sysDict/sysDict.vue
+++ b/Web/src/components/sysDict/sysDict.vue
@ -16,7 +16,7 @@
 * @constant
 */
 const RENDER_TYPES = ['tag', 'select', 'radio', 'checkbox', 'radio-button'] as const;
-type RenderType = typeof RENDER_TYPES[number];
+type RenderType = (typeof RENDER_TYPES)[number];

 /**
 * 支持的标签类型常量
@ -24,7 +24,7 @@ type RenderType = typeof RENDER_TYPES[number];
 * @constant
 */
 const TAG_TYPES = ['success', 'warning', 'info', 'primary', 'danger'] as const;
-type TagType = typeof TAG_TYPES[number];
+type TagType = (typeof TAG_TYPES)[number];

 /**
 * 字典项数据结构
@ -214,9 +214,7 @@ const props = defineProps({
 * @returns {DictItem[]} - 过滤并格式化后的字典数据
 */
 const formattedDictData = computed(() => {
-  return state.dictData
-      .filter(props.onItemFilter)
-      .map(item => ({
+	return state.dictData.filter(props.onItemFilter).map((item) => ({
 		...item,
 		label: item[props.propLabel],
 		value: item[props.propValue],
@ -234,12 +232,10 @@ const currentDictItems = computed(() => {
 	if (Array.isArray(state.value)) {
 		// 确保回显时也去重
 		const uniqueValues = [...new Set(state.value)];
-    return formattedDictData.value.filter(item =>
-        uniqueValues.includes(item.value)
-    );
+		return formattedDictData.value.filter((item) => uniqueValues.includes(item.value));
 	}

-  return formattedDictData.value.find(item => item.value == state.value) || null;
+	return formattedDictData.value.find((item) => item.value == state.value) || null;
 });

 /**
@ -256,9 +252,7 @@ const getDataList = (): DictItem[] => {
 		}

 		const source = props.isConst ? userStore.constList : userStore.dictList;
-    const data = props.isConst
-        ? source?.find((x: any) => x.code === props.code)?.data?.result ?? []
-        : source[props.code] ?? [];
+		const data = props.isConst ? (source?.find((x: any) => x.code === props.code)?.data?.result ?? []) : (source[props.code] ?? []);

 		return data.map((item: any) => ({
 			...item,
@ -278,7 +272,7 @@ const getDataList = (): DictItem[] => {
 */
 const processNumericValues = (value: any) => {
 	if (typeof value === 'number' || (Array.isArray(value) && typeof value[0] === 'number')) {
-    state.dictData.forEach(item => {
+		state.dictData.forEach((item) => {
 			if (item.value) {
 				item.value = Number(item.value);
 			}
@ -320,11 +314,14 @@ const parseMultipleValue = (value: any): any => {
 		// 处理逗号分隔格式
 		if (props.multipleModel === MultipleModel.Comma && trimmedValue.includes(',')) {
 			// 去重处理
-      return [...new Set(
-          trimmedValue.split(',')
-              .map(item => item.trim())
+			return [
+				...new Set(
+					trimmedValue
+						.split(',')
+						.map((item) => item.trim())
 						.filter(Boolean)
-      )];
+				),
+			];
 		}

 		// 处理单个值情况
@ -349,7 +346,7 @@ const updateValue = (newValue: any) => {
 	// 先对值进行去重处理
 	let processedValue = newValue;
 	if (Array.isArray(newValue)) {
-    processedValue = [...new Set(newValue.filter(v => v !== null && v !== undefined && v !== ''))];
+		processedValue = [...new Set(newValue.filter((v) => v !== null && v !== undefined && v !== ''))];
 	}

 	let emitValue = processedValue;
@ -373,7 +370,7 @@ const updateValue = (newValue: any) => {
 * @returns {TagType} - 合法的标签类型
 */
 const ensureTagType = (item: DictItem): TagType => {
-  return TAG_TYPES.includes(item.tagType as TagType) ? item.tagType as TagType : 'primary';
+	return TAG_TYPES.includes(item.tagType as TagType) ? (item.tagType as TagType) : 'primary';
 };

 /**
@ -412,9 +409,12 @@ const state = reactive({
 });

 // 监听数据变化
-watch(() => props.modelValue, (newValue) => {
+watch(
+	() => props.modelValue,
+	(newValue) => {
 		state.value = parseMultipleValue(newValue);
-});
+	}
+);

 watch(() => [userStore.dictList, userStore.constList], initData, { immediate: true });
 </script>
--- a/Web/src/views/system/log/logmsg/index.vue
+++ b/Web/src/views/system/log/logmsg/index.vue
@ -134,6 +134,10 @@ const state = reactive({
 	logMaxValue: 1,
 });

+// 获取主题颜色变量
+const colors = ['--el-color-primary-light-9', '--el-color-primary-light-7', '--el-color-primary-light-5', '--el-color-primary-light-3', '--el-color-primary-light-1', '--el-color-primary'].map(
+	(variable) => getComputedStyle(document.documentElement).getPropertyValue(variable).trim()
+);
 const echartsOption = ref({
 	title: {
 		top: 30,
@ -148,9 +152,12 @@ const echartsOption = ref({
 	},
 	visualMap: {
 		show: true,
-		// inRange: {
-		// 	color: ['#fbeee2', '#f2cac9', '#efafad', '#f19790', '#f1908c', '#f17666', '#f05a46', '#ed3b2f', '#ec2b24', '#de2a18'],
-		// },
+		inRange: {
+			color: colors,
+		},
+		outOfRange: {
+			color: ['#000000'],
+		},
 		min: 0,
 		max: 1000,
 		maxOpen: {
--- a/Web/src/views/system/log/logop/index.vue
+++ b/Web/src/views/system/log/logop/index.vue
@ -176,6 +176,10 @@ const state = reactive({
 	logMaxValue: 1,
 });

+// 获取主题颜色变量
+const colors = ['--el-color-primary-light-9', '--el-color-primary-light-7', '--el-color-primary-light-5', '--el-color-primary-light-3', '--el-color-primary-light-1', '--el-color-primary'].map(
+	(variable) => getComputedStyle(document.documentElement).getPropertyValue(variable).trim()
+);
 const echartsOption = ref({
 	title: {
 		top: 30,
@ -190,9 +194,12 @@ const echartsOption = ref({
 	},
 	visualMap: {
 		show: true,
-		// inRange: {
-		// 	color: ['#fbeee2', '#f2cac9', '#efafad', '#f19790', '#f1908c', '#f17666', '#f05a46', '#ed3b2f', '#ec2b24', '#de2a18'],
-		// },
+		inRange: {
+			color: colors,
+		},
+		outOfRange: {
+			color: ['#000000'],
+		},
 		min: 0,
 		max: 1000,
 		maxOpen: {
--- a/Web/src/views/system/log/logvis/index.vue
+++ b/Web/src/views/system/log/logvis/index.vue
@ -136,6 +136,10 @@ const state = reactive({
 	logMaxValue: 1,
 });

+// 获取主题颜色变量
+const colors = ['--el-color-primary-light-9', '--el-color-primary-light-7', '--el-color-primary-light-5', '--el-color-primary-light-3', '--el-color-primary-light-1', '--el-color-primary'].map(
+	(variable) => getComputedStyle(document.documentElement).getPropertyValue(variable).trim()
+);
 const echartsOption = ref({
 	title: {
 		top: 30,
@ -150,9 +154,12 @@ const echartsOption = ref({
 	},
 	visualMap: {
 		show: true,
-		// inRange: {
-		// 	color: ['#fbeee2', '#f2cac9', '#efafad', '#f19790', '#f1908c', '#f17666', '#f05a46', '#ed3b2f', '#ec2b24', '#de2a18'],
-		// },
+		inRange: {
+			color: colors,
+		},
+		outOfRange: {
+			color: ['#000000'],
+		},
 		min: 0,
 		max: 1000,
 		maxOpen: {
--- a/Web/src/views/system/weChatPay/index.vue
+++ b/Web/src/views/system/weChatPay/index.vue
@ -1,23 +1,32 @@
 <template>
 	<div class="weChatPay-container">
-		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
-			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
+		<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" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
+				<el-row :gutter="10">
+					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
 						<el-form-item label="订单号">
 							<el-input v-model="state.queryParams.keyword" clearable="" placeholder="请输入订单号" />
 						</el-form-item>
+					</el-col>
+					<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
 						<el-form-item label="创建时间">
 							<el-date-picker placeholder="请选择创建时间" value-format="YYYY/MM/DD" type="daterange" v-model="state.queryParams.createTimeRange" />
 						</el-form-item>
-				<el-form-item>
-					<el-button-group>
-						<el-button type="primary" icon="ele-Search" @click="handleQuery()"> 查询 </el-button>
-						<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
-					</el-button-group>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" icon="ele-Plus" @click="openAddDialog">新增模拟数据</el-button>
-				</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()"> {{ $t('message.list.query') }} </el-button>
+						<el-button icon="ele-Refresh" @click="resetQuery"> {{ $t('message.list.reset') }} </el-button>
+					</el-button-group>
+					<el-button type="primary" icon="ele-Plus" @click="openAddDialog" style="margin-left: 10px">新增模拟数据</el-button>
+				</el-col>
+			</el-row>
 		</el-card>

 		<el-card class="full-table" shadow="hover" style="margin-top: 5px">