feat: shrimp-admin v0.1.0 — 从 hand-admin 抽离的框架前端

Shrimp 框架前端 — 一种消费 ShrimpServer + ShrimpTable 契约的经典 Vue3 +
Element Plus 实现。不是框架本身,只是按 shrimp-server 约定写的一份参考解法。

包含:
- ShrimpClient + VueAdmin(factory:createShrimpAdmin)
- 5 个 Shrimp* 组件 + 10 个内置 Field*.vue + PowerTree + LangSwitch
- 4 个内置模块:user / role / operationLog / FieldRelativeTime
- 完整后台壳 views(layout/login/sideM/topbar/userbar/navMenu/App/404/logo)
- composables/useTableUrlSync, locales(zh-cn/en 框架默认), style 全套

API 改造:
- createShrimpAdmin({ config, moduleSources, customFields, locales }) factory
- vueAdmin 改为 Proxy 单例,createShrimpAdmin 调用前访问会抛错
- import.meta.glob 业务字段/模块由消费侧传入(vite 静态扫描机制限制)
- 框架默认 locales 与消费侧 locales 在 i18n 初始化时合并

源码 ship 不打包,消费侧靠 vite 直接吃 .ts/.vue。

src/components/fields/FieldRelation.vue

@@ -0,0 +1,94 @@
+<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>
+    <el-select
+        v-else-if="mode === 'filter'"
+        :model-value="stringValue"
+        @update:model-value="$emit('update:modelValue', $event)"
+        multiple clearable filterable remote :remote-method="onSearch" :loading="loading"
+        style="width: 100%"
+    >
+        <el-option v-for="opt in options" :key="opt.value" :label="opt.label" :value="opt.value" />
+    </el-select>
+    <el-select v-else :model-value="stringValue" @update:model-value="$emit('update:modelValue', $event)" :disabled="disabled" :multiple="field.multiple" filterable remote :remote-method="onSearch" :loading="loading" style="width: 100%">
+        <el-option v-for="opt in options" :key="opt.value" :label="opt.label" :value="opt.value" />
+    </el-select>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, computed } from 'vue'
+import { vueAdmin } from '../../VueAdmin'
+import { ITableCrudProto } from 'shrimp-server/types'
+
+const props = defineProps<{
+    field: any
+    modelValue: any
+    mode: 'display' | 'edit' | 'filter'
+    disabled?: boolean
+    displayLabel?: string | string[]
+}>()
+
+defineEmits<{
+    'update:modelValue': [value: any]
+}>()
+
+const options = ref<{ label: string; value: string }[]>([])
+const loading = ref(false)
+
+/** 统一转为字符串值，解决 ObjectId 与 el-select 的匹配问题 */
+const stringValue = computed(() => {
+    // filter 模式强制 multiple，始终返回数组
+    if (props.mode === 'filter' || props.field.multiple) {
+        return Array.isArray(props.modelValue) ? props.modelValue.map(String) : []
+    }
+    return props.modelValue != null ? String(props.modelValue) : undefined
+})
+
+async function onSearch(query: string) {
+    if (!props.field.relation) return
+    loading.value = true
+    try {
+        const api = vueAdmin.getModule<ITableCrudProto<any>>(props.field.relation.moduleKey)
+        const listQuery: any = { keyword: query, pageSize: 20 }
+        if (props.field.filter) {
+            listQuery.filter = props.field.filter
+        }
+        const res = await api.list(listQuery)
+        const list = res.list || res as any
+        options.value = list.map((item: any) => ({
+            label: item[props.field.relation.labelKey],
+            value: String(item._id),
+        }))
+    } catch (e) {
+        console.warn('[FieldRelation] search failed', e)
+    } finally {
+        loading.value = false
+    }
+}
+
+onMounted(async () => {
+    if ((props.mode === 'edit' || props.mode === 'filter') && props.field.relation) {
+        await onSearch('')
+        // 确保当前值在选项中
+        const currentValues = props.field.multiple
+            ? (Array.isArray(props.modelValue) ? props.modelValue.map(String) : [])
+            : (props.modelValue ? [String(props.modelValue)] : [])
+        for (const val of currentValues) {
+            if (val && !options.value.some(o => o.value === val)) {
+                try {
+                    const api = vueAdmin.getModule<ITableCrudProto<any>>(props.field.relation.moduleKey)
+                    const current = await api.get(val)
+                    if (current) {
+                        options.value.unshift({
+                            label: (current as any)[props.field.relation.labelKey],
+                            value: String(val),
+                        })
+                    }
+                } catch { }
+            }
+        }
+    }
+})
+</script>