From 6b0a6118e0b4beed6c9866a9bf75b3aee1126980 Mon Sep 17 00:00:00 2001
From: wc24 <wc24@qq.com>
Date: Tue, 30 Jun 2026 17:30:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(filter):=20=E7=AD=9B=E9=80=89=E6=8A=BD?=
 =?UTF-8?q?=E5=B1=89=E6=AF=8F=E4=B8=AA=E5=AD=97=E6=AE=B5=E5=8F=AF=E5=8D=95?=
 =?UTF-8?q?=E7=8B=AC=E6=B8=85=E7=A9=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

每行加 CircleClose 清空按钮(有值才出现),只摘掉该 key、其余条件不动。
比依赖各字段组件自身 clearable 更通用(range/relation/必填字段筛选时也能清)。
---
 package.json                          |  2 +-
 src/components/ShrimpFilterDrawer.vue | 52 ++++++++++++++++++++++++---
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index ad9f69b..d14ee6b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "shrimp-admin",
-    "version": "0.7.6",
+    "version": "0.7.8",
     "private": true,
     "description": "Shrimp 框架前端 — 消费 ShrimpServer + ShrimpTable 契约的经典 Vue3 + Element Plus 实现",
     "main": "src/index.ts",
diff --git a/src/components/ShrimpFilterDrawer.vue b/src/components/ShrimpFilterDrawer.vue
index 7d16c42..adbdc0a 100644
--- a/src/components/ShrimpFilterDrawer.vue
+++ b/src/components/ShrimpFilterDrawer.vue
@@ -4,11 +4,18 @@
         <el-form :model="localFilterData">
             <template v-for="field in filterableFields" :key="field.key">
                 <el-form-item :label="vueAdmin.t(field.label)">
-                    <slot :name="`filter-${field.key}`" :field="field" :data="localFilterData">
-                        <component :is="vueAdmin.getFieldComponent(moduleKey, field.type, field.key)" :field="field"
-                            :model-value="localFilterData[field.key]"
-                            @update:model-value="onFieldChange(field.key, $event)" mode="filter" />
-                    </slot>
+                    <div class="filter-field-row">
+                        <div class="filter-field-control">
+                            <slot :name="`filter-${field.key}`" :field="field" :data="localFilterData">
+                                <component :is="vueAdmin.getFieldComponent(moduleKey, field.type, field.key)"
+                                    :field="field" :model-value="localFilterData[field.key]"
+                                    @update:model-value="onFieldChange(field.key, $event)" mode="filter" />
+                            </slot>
+                        </div>
+                        <!-- 单独清空该字段:仅在有值时出现,点了只删这一个 key -->
+                        <el-button v-if="hasValue(field.key)" link :icon="CircleClose" class="filter-clear"
+                            @click="clearField(field.key)" />
+                    </div>
                 </el-form-item>
             </template>
         </el-form>
@@ -21,6 +28,7 @@
 
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
+import { CircleClose } from '@element-plus/icons-vue'
 import { IFieldConfig } from '../IShrimpType'
 import { vueAdmin } from '../VueAdmin'
 
@@ -68,6 +76,21 @@ function onFieldChange(key: string, value: any) {
     localFilterData.value = { ...localFilterData.value, [key]: value }
 }
 
+// 该字段当前是否有筛选值(决定单独清空按钮是否出现);范围 {gte,lte}/数组按内容判空
+function hasValue(key: string): boolean {
+    const v = localFilterData.value[key]
+    if (v == null || v === '') return false
+    if (Array.isArray(v)) return v.length > 0
+    if (typeof v === 'object') return Object.keys(v).length > 0
+    return true
+}
+
+// 单独清空某个字段:只摘掉这一个 key,其余筛选条件不动
+function clearField(key: string) {
+    const { [key]: _, ...rest } = localFilterData.value
+    localFilterData.value = rest
+}
+
 function handleReset() {
     closedByReset.value = true
     localFilterData.value = {}
@@ -101,4 +124,23 @@ function handleConfirm() {
 .shrimp-drawer .el-drawer__body .el-form-item {
     margin-bottom: 20px;
 }
+
+.filter-field-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+}
+
+.filter-field-control {
+    flex: 1;
+    min-width: 0;
+}
+
+.filter-clear {
+    flex: none;
+    padding: 0;
+    font-size: 16px;
+    color: var(--el-text-color-secondary);
+}
 </style>