From 09ad43007adae680a6700cbbf3dce9a52edca433 Mon Sep 17 00:00:00 2001
From: wc24 <wc24@qq.com>
Date: Tue, 30 Jun 2026 16:52:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(tab):=20=E7=B1=BB=E5=9E=8B=E5=8F=AF?=
 =?UTF-8?q?=E6=B8=85=E7=A9=BA(clearable=3D!required)+=20=E7=A9=BA=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

FieldTab: 类型 select 非必填可清空 → type=null、整个 tab 置空、分支消失。去掉 innerValue/
initValue/onMounted 那套强制默认(空状态由 isEmpty 配 required 决定)。配合后端递归 isEmpty。
---
 package.json                       |  2 +-
 src/components/fields/FieldTab.vue | 60 +++++++++---------------------
 2 files changed, 19 insertions(+), 43 deletions(-)

diff --git a/package.json b/package.json
index fa63551..ad9f69b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "shrimp-admin",
-    "version": "0.7.5",
+    "version": "0.7.6",
     "private": true,
     "description": "Shrimp 框架前端 — 消费 ShrimpServer + ShrimpTable 契约的经典 Vue3 + Element Plus 实现",
     "main": "src/index.ts",
diff --git a/src/components/fields/FieldTab.vue b/src/components/fields/FieldTab.vue
index 64521af..3a4c0f5 100644
--- a/src/components/fields/FieldTab.vue
+++ b/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>