style(system/dict): 优化字典管理页面布局与样式

1. 重构搜索区域为卡片标题栏和内联搜索栏
2. 调整页面内边距与搜索栏间距样式
3. 统一按钮图标插槽写法
4. 移除冗余less语法并简化样式结构

client/src/views/system/dict/index.vue

@@ -1,49 +1,45 @@
 <template>
 	<div class="dict-management">
-		<a-card :bordered="false">
+		<a-card title="数据字典">
-			<a-form layout="inline" :model="queryParams" class="search-form">
+			<template #extra>
-				<a-form-item label="字典类型">
+				<a-button type="primary" @click="handleAdd">
+					<template #icon><PlusOutlined /></template>
+					新增字典
+				</a-button>
+			</template>
+
+			<div class="search-bar">
 				<a-select
 					v-model:value="queryParams.dictType"
-						placeholder="请选择字典类型"
+					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-input
-				<a-form-item label="关键词">
+					v-model:value="queryParams.keyword"
-					<a-input v-model:value="queryParams.keyword" placeholder="字典标签/值" allow-clear style="width: 200px" @pressEnter="handleSearch" />
+					placeholder="字典标签/值"
-				</a-form-item>
+					allow-clear
-				<a-form-item label="状态">
+					style="width: 200px"
-					<a-select v-model:value="queryParams.status" placeholder="请选择状态" allow-clear style="width: 120px">
+					@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-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>
-
-		<div class="table-operations">
-			<a-button type="primary" @click="handleAdd">
-				<template #icon><PlusOutlined /></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;
 }
 
-	.table-operations {
+.search-bar {
 	margin-bottom: 16px;
 	display: flex;
-		justify-content: space-between;
+	justify-content: flex-end;
-		align-items: center;
+	gap: 8px;
+}
+
+:deep(.ant-table) {
+	font-size: 14px;
 }
 
 :deep(.ant-btn-link) {
 	padding: 0 4px;
 }
-}
 </style>