From cbc0a936b75d52622f3ed226c1f61544419e341d Mon Sep 17 00:00:00 2001
From: andyesfly <35127884@qq.com>
Date: Wed, 19 Aug 2026 15:57:44 +0800
Subject: [PATCH] =?UTF-8?q?style(system/dict):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=AD=97=E5=85=B8=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E4=B8=8E=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 重构搜索区域为卡片标题栏和内联搜索栏
2. 调整页面内边距与搜索栏间距样式
3. 统一按钮图标插槽写法
4. 移除冗余less语法并简化样式结构
---
 client/src/views/system/dict/index.vue | 114 ++++++++++++-------------
 1 file changed, 56 insertions(+), 58 deletions(-)

diff --git a/client/src/views/system/dict/index.vue b/client/src/views/system/dict/index.vue
index c7dd0e2..2620dce 100644
--- a/client/src/views/system/dict/index.vue
+++ b/client/src/views/system/dict/index.vue
@@ -1,49 +1,45 @@
 <template>
 	<div class="dict-management">
-		<a-card :bordered="false">
-			<a-form layout="inline" :model="queryParams" class="search-form">
-				<a-form-item label="字典类型">
-					<a-select
-						v-model:value="queryParams.dictType"
-						placeholder="请选择字典类型"
-						allow-clear
-						style="width: 200px"
-					>
-						<a-select-option v-for="type in dictTypeOptions" :key="type" :value="type">{{ type }}</a-select-option>
-					</a-select>
-				</a-form-item>
-				<a-form-item label="关键词">
-					<a-input v-model:value="queryParams.keyword" placeholder="字典标签/值" allow-clear style="width: 200px" @pressEnter="handleSearch" />
-				</a-form-item>
-				<a-form-item label="状态">
-					<a-select v-model:value="queryParams.status" placeholder="请选择状态" allow-clear style="width: 120px">
-						<a-select-option :value="1">启用</a-select-option>
-						<a-select-option :value="0">禁用</a-select-option>
-					</a-select>
-				</a-form-item>
-				<a-form-item>
-					<a-space>
-						<a-button type="primary" @click="handleSearch">
-							<template #icon><SearchOutlined /></template>
-							搜索
-						</a-button>
-						<a-button @click="handleReset">
-							<template #icon><ReloadOutlined /></template>
-							重置
-						</a-button>
-					</a-space>
-				</a-form-item>
-			</a-form>
-		</a-card>
+		<a-card title="数据字典">
+			<template #extra>
+				<a-button type="primary" @click="handleAdd">
+					<template #icon><PlusOutlined /></template>
+					新增字典
+				</a-button>
+			</template>
 
-		<div class="table-operations">
-			<a-button type="primary" @click="handleAdd">
-				<template #icon><PlusOutlined /></template>
-				新增字典
-			</a-button>
-		</div>
+			<div class="search-bar">
+				<a-select
+					v-model:value="queryParams.dictType"
+					placeholder="字典类型"
+					allow-clear
+					style="width: 200px"
+				>
+					<a-select-option v-for="type in dictTypeOptions" :key="type" :value="type">{{ type }}</a-select-option>
+				</a-select>
+				<a-input
+					v-model:value="queryParams.keyword"
+					placeholder="字典标签/值"
+					allow-clear
+					style="width: 200px"
+					@pressEnter="handleSearch"
+				>
+					<template #prefix><SearchOutlined /></template>
+				</a-input>
+				<a-select v-model:value="queryParams.status" placeholder="状态" allow-clear style="width: 120px">
+					<a-select-option :value="1">启用</a-select-option>
+					<a-select-option :value="0">禁用</a-select-option>
+				</a-select>
+				<a-button type="primary" @click="handleSearch">
+					<template #icon><SearchOutlined /></template>
+					查询
+				</a-button>
+				<a-button @click="handleReset">
+					<template #icon><ReloadOutlined /></template>
+					重置
+				</a-button>
+			</div>
 
-		<a-card :bordered="false">
 			<a-table
 				:columns="columns"
 				:data-source="dataSource"
@@ -66,7 +62,8 @@
 					<template v-else-if="column.key === 'action'">
 						<a-space>
 							<a-button type="link" size="small" @click="handleEdit(record)">
-								<EditOutlined />编辑
+								<template #icon><EditOutlined /></template>
+								编辑
 							</a-button>
 							<a-popconfirm
 								title="确定删除该字典？"
@@ -75,7 +72,8 @@
 								@confirm="handleDelete(record)"
 							>
 								<a-button type="link" size="small" danger>
-									<DeleteOutlined />删除
+									<template #icon><DeleteOutlined /></template>
+									删除
 								</a-button>
 							</a-popconfirm>
 						</a-space>
@@ -346,23 +344,23 @@ async function handleDelete(record: DictItem) {
 }
 </script>
 
-<style scoped lang="less">
+<style scoped>
 .dict-management {
-	padding: 24px;
+	padding: 20px;
+}
 
-	.search-form {
-		margin-bottom: 16px;
-	}
+.search-bar {
+	margin-bottom: 16px;
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+}
 
-	.table-operations {
-		margin-bottom: 16px;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
+:deep(.ant-table) {
+	font-size: 14px;
+}
 
-	:deep(.ant-btn-link) {
-		padding: 0 4px;
-	}
+:deep(.ant-btn-link) {
+	padding: 0 4px;
 }
 </style>