feat!: object/array 字段组件 + 去掉 FieldJson + 版本统一 0.7.0

- 新增 FieldObject.vue(嵌套字段组,display/edit 递归渲染)、FieldArray.vue
  (元素列表,增删 + 每项递归渲染 item;第一版从简:无排序拖拽)。靠 glob 自动注册成 object/array。
- 删 FieldJson.vue(json 类型退场,object 取代)。
- 版本与 shrimp-server 统一为 0.7.0。

package.json

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

src/components/ShrimpTable.vue

@@ -442,7 +442,16 @@ async function handleExport() {
         }
         if (ownerId.value) query.ownerId = ownerId.value
         const list = await api.export(query)
-        const ws = XLSX.utils.json_to_sheet(list)
+        // 后端只发原始对象；xlsx 单元格放不下对象/数组(会变 [object Object])，这里通用地 JSON 序列化
+        // (覆盖 tab 等结构化字段)。import 时这些字符串由后端各类型 reqFilter 还原。
+        const rows = list.map((row: Record<string, any>) => {
+            const out: Record<string, any> = {}
+            for (const [k, v] of Object.entries(row)) {
+                out[k] = (v !== null && typeof v === 'object') ? JSON.stringify(v) : v
+            }
+            return out
+        })
+        const ws = XLSX.utils.json_to_sheet(rows)
         const wb = XLSX.utils.book_new()
         XLSX.utils.book_append_sheet(wb, ws, props.moduleKey)
         XLSX.writeFile(wb, `${props.moduleKey}_export_${Date.now()}.xlsx`)

src/components/fields/FieldArray.vue

@@ -0,0 +1,107 @@
+<template>
+    <!-- 显示：逐元素递归渲染 item 的 display 组件 -->
+    <template v-if="mode === 'display'">
+        <span v-if="!items.length">-</span>
+        <span v-else class="arr-display">
+            <span v-for="(el, i) in items" :key="i" class="arr-chip">
+                <component :is="vueAdmin.getFieldComponent(moduleKey, field.item.type, '')"
+                    :field="field.item" :model-value="el" mode="display" />
+            </span>
+        </span>
+    </template>
+    <!-- 编辑：每项一行(标题 + item 编辑组件 + 删除),底部添加。第一版从简:无排序拖拽 -->
+    <div v-else class="field-array">
+        <div v-for="(el, i) in items" :key="i" class="arr-row">
+            <div class="arr-head">
+                <span class="arr-idx">{{ itemTitle }} #{{ i + 1 }}</span>
+                <el-button type="danger" text size="small" @click="removeAt(i)">删除</el-button>
+            </div>
+            <component :is="vueAdmin.getFieldComponent(moduleKey, field.item.type, '')"
+                :field="field.item" :model-value="el"
+                @update:model-value="setAt(i, $event)" mode="edit" :disabled="disabled" />
+        </div>
+        <el-button type="primary" text @click="addOne" :disabled="disabled">+ 添加{{ itemTitle }}</el-button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue'
+import { vueAdmin } from '../../VueAdmin'
+
+const props = defineProps<{
+    field: any
+    modelValue: any
+    mode: 'display' | 'edit' | 'filter'
+    disabled?: boolean
+}>()
+
+const emit = defineEmits<{ 'update:modelValue': [value: any] }>()
+
+const moduleKey = inject('shrimpModuleKey', '')
+
+const items = computed<any[]>(() => Array.isArray(props.modelValue) ? props.modelValue : [])
+const itemTitle = computed(() => vueAdmin.t(props.field.item?.label) || '项')
+
+function setAt(i: number, value: any) {
+    const arr = items.value.slice()
+    arr[i] = value
+    emit('update:modelValue', arr)
+}
+function removeAt(i: number) {
+    const arr = items.value.slice()
+    arr.splice(i, 1)
+    emit('update:modelValue', arr)
+}
+function addOne() {
+    emit('update:modelValue', [...items.value, defaultOf(props.field.item)])
+}
+
+/** 按 item schema 递归生成一个默认元素 */
+function defaultOf(schema: any): any {
+    if (!schema) return null
+    if (schema.defaultValue !== undefined) return schema.defaultValue
+    if (schema.type === 'object') {
+        const obj: any = {}
+        for (const f of schema.fields || []) obj[f.key] = defaultOf(f)
+        return obj
+    }
+    if (schema.type === 'array') return []
+    if (schema.type === 'number') return 0
+    if (schema.type === 'boolean') return false
+    return null
+}
+</script>
+
+<style scoped>
+.arr-display {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px 12px;
+}
+
+.field-array {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.arr-row {
+    padding: 8px 10px;
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 6px;
+}
+
+.arr-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 6px;
+}
+
+.arr-idx {
+    color: var(--el-text-color-secondary);
+    font-size: 12px;
+    font-weight: 600;
+}
+</style>

src/components/fields/FieldJson.vue

@@ -1,48 +0,0 @@
-<template>
-    <template v-if="mode === 'display'">
-        <el-tooltip v-if="modelValue != null" :content="displayValue" placement="top">
-            <span class="json-display">{{ displayValue }}</span>
-        </el-tooltip>
-        <span v-else>-</span>
-    </template>
-    <el-input
-        v-else
-        :model-value="modelValue"
-        @update:model-value="$emit('update:modelValue', $event)"
-        type="textarea"
-        :rows="4"
-        :disabled="disabled"
-        placeholder="请输入 JSON"
-    />
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-
-const props = defineProps<{
-    field: any
-    modelValue: any
-    mode: 'display' | 'edit' | 'filter'
-    disabled?: boolean
-}>()
-
-defineEmits<{
-    'update:modelValue': [value: any]
-}>()
-
-const displayValue = computed(() => {
-    if (props.modelValue == null) return ''
-    if (typeof props.modelValue === 'string') return props.modelValue
-    return JSON.stringify(props.modelValue, null, 2)
-})
-</script>
-
-<style scoped>
-.json-display {
-    display: inline-block;
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-</style>

src/components/fields/FieldObject.vue

@@ -0,0 +1,69 @@
+<template>
+    <!-- 显示：递归渲染各子字段的 display 组件(relation 子查 refs) -->
+    <template v-if="mode === 'display'">
+        <span v-if="!modelValue || typeof modelValue !== 'object'">-</span>
+        <span v-else class="obj-display">
+            <span v-for="f in field.fields || []" :key="f.key" class="obj-child">
+                <span class="obj-label">{{ vueAdmin.t(f.label) }}:</span>
+                <component :is="vueAdmin.getFieldComponent(moduleKey, f.type, f.key)"
+                    :field="f" :model-value="(modelValue || {})[f.key]" mode="display" />
+            </span>
+        </span>
+    </template>
+    <!-- 编辑：每个子字段一行,递归渲染 edit 组件 -->
+    <div v-else class="field-object">
+        <el-form-item v-for="f in field.fields || []" :key="f.key" :label="vueAdmin.t(f.label)" :required="f.required">
+            <component :is="vueAdmin.getFieldComponent(moduleKey, f.type, f.key)"
+                :field="f" :model-value="(modelValue || {})[f.key]"
+                @update:model-value="onChild(f.key, $event)" mode="edit" :disabled="disabled" />
+        </el-form-item>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue'
+import { vueAdmin } from '../../VueAdmin'
+
+const props = defineProps<{
+    field: any
+    modelValue: any
+    mode: 'display' | 'edit' | 'filter'
+    disabled?: boolean
+}>()
+
+const emit = defineEmits<{ 'update:modelValue': [value: any] }>()
+
+const moduleKey = inject('shrimpModuleKey', '')
+
+function onChild(key: string, value: any) {
+    emit('update:modelValue', { ...(props.modelValue || {}), [key]: value })
+}
+</script>
+
+<style scoped>
+.obj-display {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px 10px;
+}
+
+.obj-child {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.obj-label {
+    color: var(--el-text-color-secondary);
+    font-size: 12px;
+}
+
+.field-object {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding-left: 12px;
+    border-left: 2px solid var(--el-border-color-lighter);
+}
+</style>