feat(tab): 显示搬前端,递归渲染子字段组件(替代后端 _label 串)

FieldTab.display 不再吃 displayLabel 字符串，改为渲染选中分支的子字段(各自 display 组件):
relation 子→查 refs 出可点名、number→数字、嵌套 tab→再递归。配 shrimp-server v0.6.9
的 refs 下钻,嵌套关联名自动有。ShrimpTable displayLabel 绑定去掉 tab。

package.json

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

src/components/ShrimpTable.vue

@@ -29,7 +29,7 @@
                             <slot :name="`column-${field.key}`" :row="row" :field="field">
                                 <component :is="vueAdmin.getFieldComponent(moduleKey, field.type, field.key)" :field="field"
                                     :model-value="row[field.key]" mode="display"
-                                    v-bind="field.type === 'textarea' || field.type === 'tab' ? { displayLabel: row[field.key + '_label'] } : {}" />
+                                    v-bind="field.type === 'textarea' ? { displayLabel: row[field.key + '_label'] } : {}" />
                             </slot>
                         </template>
                     </el-table-column>
@@ -334,8 +334,10 @@ async function handleSave() {
             formFields.value.forEach(field => {
                 if (field.editable === 'readonly') return
                 if (field.editable === 'addOnly') return
-                const newValue = formData.value[field.key]
+                // 清空字段值为 undefined 时，JSON.stringify 会丢键 → 后端收不到、看似"提交无效"。
-                const oldValue = originalData.value[field.key]
+                // 归一成 null：既保证清空能提交(后端置空)，又让"两边都空"不误判为有改动。
+                const newValue = formData.value[field.key] ?? null
+                const oldValue = originalData.value[field.key] ?? null
                 if (newValue === oldValue) return
                 submitData[field.key] = newValue
             })

src/components/fields/FieldRelation.vue

@@ -39,9 +39,10 @@ const emit = defineEmits<{
     'update:modelValue': [value: any]
 }>()
 
-// 编辑态清空：el-select 单选清空发 ''，但 relation 是 ObjectId，存 '' 会 cast 报错 → 归一成 null(取消关联)
+// 编辑态清空：el-select 单选清空发 '' 或 undefined，relation 是 ObjectId、且 undefined 会被
+// JSON.stringify 丢键 → 都归一成 null(取消关联)。多选清空是 []，原样。
 function onEdit(v: any) {
-    emit('update:modelValue', v === '' ? null : v)
+    emit('update:modelValue', v === '' || v == null ? (props.field.multiple ? [] : null) : v)
 }
 
 const options = ref<{ label: string; value: string }[]>([])

src/components/fields/FieldTab.vue

@@ -1,13 +1,15 @@
 <template>
     <template v-if="mode === 'display'">
-        <!-- 表格列展示后端算好的 stringify 文本(displayLabel=${key}_label);本体仍是对象,供编辑/逻辑用 -->
+        <!-- 显示=前端递归渲染:分支标签 + 选中分支的子字段(各自 display 组件,relation 查 refs/可点、嵌套 tab 再递归) -->
-        <el-tooltip v-if="displayLabel" :content="String(displayLabel)" placement="top">
+        <span v-if="!modelValue || typeof modelValue !== 'object'">-</span>
-            <span class="tab-display">{{ displayLabel }}</span>
+        <span v-else class="tab-display">
-        </el-tooltip>
+            <span class="tab-branch">{{ branchLabel }}</span>
-        <span v-else-if="!modelValue || typeof modelValue !== 'object'">-</span>
+            <span v-for="childField in selectedTab?.fields || []" :key="childField.key" class="tab-child">
-        <el-tooltip v-else :content="JSON.stringify(modelValue, null, 2)" placement="top">
+                <span class="tab-child-label">{{ vueAdmin.t(childField.label) }}:</span>
-            <span class="tab-display">{{ displayText }}</span>
+                <component :is="vueAdmin.getFieldComponent(moduleKey, childField.type, childField.key)"
-        </el-tooltip>
+                    :field="childField" :model-value="innerValue[childField.key]" mode="display" />
+            </span>
+        </span>
     </template>
     <div v-else class="field-tab">
         <el-form-item :label="vueAdmin.t(field.label) + ' - 类型'" :required="field.required">
@@ -39,7 +41,6 @@ const props = defineProps<{
     modelValue: any
     mode: 'display' | 'edit' | 'filter'
     disabled?: boolean
-    displayLabel?: string
 }>()
 
 const emit = defineEmits<{
@@ -48,11 +49,9 @@ const emit = defineEmits<{
 
 const moduleKey = inject('shrimpModuleKey', '')
 
-const displayText = computed(() => {
+const branchLabel = computed(() => {
-    if (!props.modelValue || typeof props.modelValue !== 'object') return '-'
+    const tab = selectedTab.value
-    const type = props.modelValue.type
+    return tab ? vueAdmin.t(tab.label) : String(props.modelValue?.type ?? '')
-    const tab = props.field.tabs?.find((t: any) => t.key === type)
-    return tab ? vueAdmin.t(tab.label) : String(type)
 })
 
 const selectedTab = computed(() => {
@@ -105,11 +104,26 @@ onMounted(() => {
 
 <style scoped>
 .tab-display {
-    display: inline-block;
+    display: inline-flex;
-    max-width: 200px;
+    flex-wrap: wrap;
-    overflow: hidden;
+    align-items: center;
-    text-overflow: ellipsis;
+    gap: 4px 10px;
-    white-space: nowrap;
+}
+
+.tab-branch {
+    font-weight: 600;
+    color: var(--el-color-primary);
+}
+
+.tab-child {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.tab-child-label {
+    color: var(--el-text-color-secondary);
+    font-size: 12px;
 }
 
 .field-tab {