feat(filter): 筛选抽屉每个字段可单独清空

每行加 CircleClose 清空按钮(有值才出现),只摘掉该 key、其余条件不动。
比依赖各字段组件自身 clearable 更通用(range/relation/必填字段筛选时也能清)。

package.json

@@ -1,6 +1,6 @@
 {
     "name": "shrimp-admin",
-    "version": "0.7.0",
+    "version": "0.7.8",
     "private": true,
     "description": "Shrimp 框架前端 — 消费 ShrimpServer + ShrimpTable 契约的经典 Vue3 + Element Plus 实现",
     "main": "src/index.ts",

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>

src/components/ShrimpTable.vue

@@ -212,9 +212,24 @@ const formFields = computed(() => {
     return list.filter(f => f.editable !== 'readonly')
 })
 const searchableFields = computed(() => fields.value.filter(f => f.searchable))
+// 递归收集 filterable 字段(含 object/tab 嵌套叶子)，生成 key=点路径的"合成字段"。
+// 这样筛选抽屉/buildFilter/URL 同步全按 field.key 走即可——key 就是 condition.level 这种路径。
+function collectFilterablePaths(list: IFieldConfig[], base: string[], out: any[]) {
+    for (const f of list) {
+        const path = [...base, f.key]
+        if (f.filterable) out.push({ ...f, key: path.join('.') })
+        if (f.type === 'tab' && Array.isArray((f as any).tabs)) {
+            for (const t of (f as any).tabs) collectFilterablePaths(t.fields, path, out)
+        } else if (f.type === 'object' && Array.isArray((f as any).fields)) {
+            collectFilterablePaths((f as any).fields, path, out)
+        }
+    }
+}
 const filterableFields = computed(() => {
     const lockedKeys = new Set(Object.keys(props.baseFilter || {}))
-    return fields.value.filter(f => f.filterable && !lockedKeys.has(f.key))
+    const out: any[] = []
+    collectFilterablePaths(fields.value, [], out)
+    return out.filter(f => !lockedKeys.has(f.key))
 })
 
 const formSlotNames = computed(() => Object.keys(slots).filter(name => name.startsWith('form-')))
@@ -307,8 +322,10 @@ async function handleAdd() {
             formData.value[field.key] = false
         } else if (field.type === 'number') {
             formData.value[field.key] = 0
-        } else if (field.multiple) {
+        } else if (field.type === 'array' || field.multiple) {
             formData.value[field.key] = []
+        } else if (field.type === 'object') {
+            formData.value[field.key] = {}
         } else {
             formData.value[field.key] = ''
         }

src/components/fields/FieldTab.vue

@@ -1,19 +1,21 @@
 <template>
     <template v-if="mode === 'display'">
-        <!-- 显示=前端递归渲染:分支标签 + 选中分支的子字段(各自 display 组件,relation 查 refs/可点、嵌套 tab 再递归) -->
-        <span v-if="!modelValue || typeof modelValue !== 'object'">-</span>
+        <!-- 显示=前端递归渲染:分支标签 + 选中分支子字段。没选 type(清空) → 显示 - -->
+        <span v-if="!modelValue || typeof modelValue !== 'object' || modelValue.type == null">-</span>
         <span v-else class="tab-display">
             <span class="tab-branch">{{ branchLabel }}</span>
             <span v-for="childField in selectedTab?.fields || []" :key="childField.key" class="tab-child">
                 <span class="tab-child-label">{{ vueAdmin.t(childField.label) }}:</span>
                 <component :is="vueAdmin.getFieldComponent(moduleKey, childField.type, childField.key)"
-                    :field="childField" :model-value="innerValue[childField.key]" mode="display" />
+                    :field="childField" :model-value="(modelValue || {})[childField.key]" mode="display" />
             </span>
         </span>
     </template>
     <div v-else class="field-tab">
         <el-form-item :label="vueAdmin.t(field.label) + ' - 类型'" :required="field.required">
-            <el-select :model-value="innerValue.type" @update:model-value="onTypeChange" :disabled="disabled">
+            <!-- 非必填可清空 → 清空后 type=null、整个 tab 置空、下面分支消失 -->
+            <el-select :model-value="modelValue?.type ?? undefined" @update:model-value="onTypeChange"
+                :clearable="!field.required" :disabled="disabled">
                 <el-option v-for="tab in field.tabs" :key="tab.key" :label="vueAdmin.t(tab.label)" :value="tab.key" />
             </el-select>
         </el-form-item>
@@ -22,7 +24,7 @@
                 <el-form-item :label="vueAdmin.t(childField.label)" :required="childField.required">
                     <component :is="vueAdmin.getFieldComponent(moduleKey, childField.type, childField.key)"
                         :field="childField"
-                        :model-value="innerValue[childField.key]"
+                        :model-value="(modelValue || {})[childField.key]"
                         @update:model-value="onChildChange(childField.key, $event)"
                         mode="edit"
                         :disabled="disabled" />
@@ -33,7 +35,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted } from 'vue'
+import { computed, inject } from 'vue'
 import { vueAdmin } from '../../VueAdmin'
 
 const props = defineProps<{
@@ -49,37 +51,18 @@ const emit = defineEmits<{
 
 const moduleKey = inject('shrimpModuleKey', '')
 
-const branchLabel = computed(() => {
-    const tab = selectedTab.value
-    return tab ? vueAdmin.t(tab.label) : String(props.modelValue?.type ?? '')
-})
+const selectedTab = computed(() =>
+    props.field.tabs?.find((t: any) => t.key === props.modelValue?.type)
+)
 
-const selectedTab = computed(() => {
-    const type = props.modelValue?.type
-    return props.field.tabs?.find((t: any) => t.key === type)
-})
-
-const innerValue = computed(() => {
-    const val = props.modelValue
-    if (val != null && typeof val === 'object' && Object.keys(val).length > 0) {
-        return val
-    }
-    return initValue()
-})
-
-function initValue() {
-    const firstTab = props.field.tabs?.[0]
-    if (!firstTab) return {}
-    const obj: any = { type: firstTab.key }
-    firstTab.fields?.forEach((f: any) => {
-        if (f.defaultValue !== undefined) {
-            obj[f.key] = typeof f.defaultValue === 'function' ? f.defaultValue() : f.defaultValue
-        }
-    })
-    return obj
-}
+const branchLabel = computed(() => selectedTab.value ? vueAdmin.t(selectedTab.value.label) : '')
 
 function onTypeChange(type: any) {
+    // 清空(非必填) → 整个 tab 置空：type=null、空状态、分支消失
+    if (type == null || type === '') {
+        emit('update:modelValue', null)
+        return
+    }
     const tab = props.field.tabs?.find((t: any) => t.key === type)
     const obj: any = { type }
     tab?.fields?.forEach((f: any) => {
@@ -91,15 +74,8 @@ function onTypeChange(type: any) {
 }
 
 function onChildChange(key: string, value: any) {
-    emit('update:modelValue', { ...innerValue.value, [key]: value })
+    emit('update:modelValue', { ...(props.modelValue || {}), [key]: value })
 }
-
-onMounted(() => {
-    const val = props.modelValue
-    if (val == null || val === '' || (typeof val === 'object' && Object.keys(val).length === 0)) {
-        emit('update:modelValue', initValue())
-    }
-})
 </script>
 
 <style scoped>