From 35abfd831c56cf93d546c0da2e885092e07d2f93 Mon Sep 17 00:00:00 2001
From: wc24 <wc24@qq.com>
Date: Mon, 29 Jun 2026 21:30:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(tab):=20=E6=98=BE=E7=A4=BA=E6=90=AC?=
 =?UTF-8?q?=E5=89=8D=E7=AB=AF,=E9=80=92=E5=BD=92=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E5=AD=90=E5=AD=97=E6=AE=B5=E7=BB=84=E4=BB=B6(=E6=9B=BF?=
 =?UTF-8?q?=E4=BB=A3=E5=90=8E=E7=AB=AF=20=5Flabel=20=E4=B8=B2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

FieldTab.display 不再吃 displayLabel 字符串，改为渲染选中分支的子字段(各自 display 组件):
relation 子→查 refs 出可点名、number→数字、嵌套 tab→再递归。配 shrimp-server v0.6.9
的 refs 下钻,嵌套关联名自动有。ShrimpTable displayLabel 绑定去掉 tab。
---
 package.json                       |  2 +-
 src/components/ShrimpTable.vue     |  2 +-
 src/components/fields/FieldTab.vue | 52 +++++++++++++++++++-----------
 3 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 6bcad3a..4655b20 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "shrimp-admin",
-    "version": "0.3.8",
+    "version": "0.3.9",
     "private": true,
     "description": "Shrimp 框架前端 — 消费 ShrimpServer + ShrimpTable 契约的经典 Vue3 + Element Plus 实现",
     "main": "src/index.ts",
diff --git a/src/components/ShrimpTable.vue b/src/components/ShrimpTable.vue
index d3701e5..a94b442 100644
--- a/src/components/ShrimpTable.vue
+++ b/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>
diff --git a/src/components/fields/FieldTab.vue b/src/components/fields/FieldTab.vue
index 62ebd32..64521af 100644
--- a/src/components/fields/FieldTab.vue
+++ b/src/components/fields/FieldTab.vue
@@ -1,13 +1,15 @@
 <template>
     <template v-if="mode === 'display'">
-        <!-- 表格列展示后端算好的 stringify 文本(displayLabel=${key}_label);本体仍是对象,供编辑/逻辑用 -->
-        <el-tooltip v-if="displayLabel" :content="String(displayLabel)" placement="top">
-            <span class="tab-display">{{ displayLabel }}</span>
-        </el-tooltip>
-        <span v-else-if="!modelValue || typeof modelValue !== 'object'">-</span>
-        <el-tooltip v-else :content="JSON.stringify(modelValue, null, 2)" placement="top">
-            <span class="tab-display">{{ displayText }}</span>
-        </el-tooltip>
+        <!-- 显示=前端递归渲染:分支标签 + 选中分支的子字段(各自 display 组件,relation 查 refs/可点、嵌套 tab 再递归) -->
+        <span v-if="!modelValue || typeof modelValue !== 'object'">-</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" />
+            </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(() => {
-    if (!props.modelValue || typeof props.modelValue !== 'object') return '-'
-    const type = props.modelValue.type
-    const tab = props.field.tabs?.find((t: any) => t.key === type)
-    return tab ? vueAdmin.t(tab.label) : String(type)
+const branchLabel = computed(() => {
+    const tab = selectedTab.value
+    return tab ? vueAdmin.t(tab.label) : String(props.modelValue?.type ?? '')
 })
 
 const selectedTab = computed(() => {
@@ -105,11 +104,26 @@ onMounted(() => {
 
 <style scoped>
 .tab-display {
-    display: inline-block;
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px 10px;
+}
+
+.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 {