From f7ee862e0f5f19b18f00b73adbac2eb68c01e3da Mon Sep 17 00:00:00 2001
From: wc24 <wc24@qq.com>
Date: Mon, 29 Jun 2026 20:19:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(relation):=20=E6=98=BE=E7=A4=BA=E6=94=B9?=
 =?UTF-8?q?=E6=9F=A5=20refs=20=E5=AD=97=E5=85=B8(=E6=9B=BF=E4=BB=A3?=
 =?UTF-8?q?=E9=80=90=E8=A1=8C=20=5Flabel)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

配合 shrimp-server v0.6.7：list 响应带回 refs。
- ShrimpTable: 取 res.refs 并 provide('shrimpRefs')
- FieldRelation.display: inject refs，按 id 查名(单/多选)，去掉 displayLabel 依赖
- ShrimpTable displayLabel 绑定去掉 relation(tab/textarea 仍走 _label)
relation 顶层显示行为不变，只是换了供给方式。
---
 package.json                            |  2 +-
 src/components/ShrimpTable.vue          |  8 ++++++--
 src/components/fields/FieldRelation.vue | 21 +++++++++++++++++----
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 9542995..e5bd71f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "shrimp-admin",
-    "version": "0.3.1",
+    "version": "0.3.2",
     "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 a67a099..569ab96 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 === 'relation' || field.type === 'textarea' || field.type === 'tab' ? { displayLabel: row[field.key + '_label'] } : {}" />
+                                    v-bind="field.type === 'textarea' || field.type === 'tab' ? { displayLabel: row[field.key + '_label'] } : {}" />
                             </slot>
                         </template>
                     </el-table-column>
@@ -78,7 +78,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, useSlots, onMounted, type Component } from 'vue'
+import { ref, computed, useSlots, onMounted, provide, type Component } from 'vue'
 import { ITableCrudProto, IFieldConfig, IModuleInfo, IPageQuery } from '../IShrimpType'
 import { vueAdmin } from '../VueAdmin'
 import { Plus, Delete as DeleteIcon, Download, Upload, Edit, VideoPlay, VideoPause, Operation } from '@element-plus/icons-vue'
@@ -214,6 +214,9 @@ const filterSlotNames = computed(() => Object.keys(slots).filter(name => name.st
 const data = ref<any[]>([])
 const loading = ref(false)
 const total = ref(0)
+// relation 显示名字典 { moduleKey: { id: 名 } }，由 list 响应带回，provide 给表格里的字段组件查名
+const refs = ref<Record<string, Record<string, any>>>({})
+provide('shrimpRefs', refs)
 
 // ---- 对话框状态 ----
 
@@ -501,6 +504,7 @@ async function refresh(query?: Record<string, any>) {
         Object.assign(pageQuery, query)
         const res = await api.list(pageQuery)
         data.value = res.list || []
+        refs.value = res.refs || {}
         total.value = res.total
         currentPage.value = res.page
         currentPageSize.value = res.pageSize
diff --git a/src/components/fields/FieldRelation.vue b/src/components/fields/FieldRelation.vue
index dd1a440..a1bae2c 100644
--- a/src/components/fields/FieldRelation.vue
+++ b/src/components/fields/FieldRelation.vue
@@ -1,7 +1,7 @@
 <template>
     <template v-if="mode === 'display'">
-        <template v-if="field.multiple && Array.isArray(displayLabel)">{{ displayLabel.filter(Boolean).join(', ') || '-' }}</template>
-        <template v-else>{{ displayLabel || modelValue || '-' }}</template>
+        <template v-if="field.multiple">{{ displayNames.join('、') || '-' }}</template>
+        <template v-else>{{ displayName || '-' }}</template>
     </template>
     <el-select
         v-else-if="mode === 'filter'"
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, inject, onMounted, computed, type Ref } from 'vue'
 import { vueAdmin } from '../../VueAdmin'
 import { ITableCrudProto } from '../../IShrimpType'
 
@@ -27,7 +27,6 @@ const props = defineProps<{
     modelValue: any
     mode: 'display' | 'edit' | 'filter'
     disabled?: boolean
-    displayLabel?: string | string[]
 }>()
 
 defineEmits<{
@@ -37,6 +36,20 @@ defineEmits<{
 const options = ref<{ label: string; value: string }[]>([])
 const loading = ref(false)
 
+// 显示用：从 ShrimpTable provide 的 refs 字典按 id 查名（替代旧的 _label）
+const refs = inject<Ref<Record<string, Record<string, any>>>>('shrimpRefs', ref<Record<string, Record<string, any>>>({}))
+const dict = computed(() => refs.value?.[props.field.relation?.moduleKey] ?? {})
+const displayName = computed(() => {
+    const id = props.modelValue
+    if (id == null) return ''
+    return dict.value[String(id)] ?? String(id)
+})
+const displayNames = computed(() =>
+    (Array.isArray(props.modelValue) ? props.modelValue : [])
+        .map((id: any) => dict.value[String(id)] ?? String(id))
+        .filter(Boolean)
+)
+
 /** 统一转为字符串值，解决 ObjectId 与 el-select 的匹配问题 */
 const stringValue = computed(() => {
     // filter 模式强制 multiple，始终返回数组