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。
2026-05-23 21:01:33 +08:00
parent b4ee2e4b43
commit 4cb3bb8d75
50 changed files with 6551 additions and 0 deletions
@@ -0,0 +1,120 @@
+<template>
+    <template v-if="mode === 'display'">
+        <span v-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>
+    </template>
+    <div v-else class="field-tab">
+        <el-form-item :label="vueAdmin.t(field.label) + ' - 类型'" :required="field.required">
+            <el-select :model-value="innerValue.type" @update:model-value="onTypeChange" :disabled="disabled">
+                <el-option v-for="tab in field.tabs" :key="tab.key" :label="vueAdmin.t(tab.label)" :value="tab.key" />
+            </el-select>
+        </el-form-item>
+        <div v-if="selectedTab?.fields?.length" class="tab-fields">
+            <template v-for="childField in selectedTab.fields" :key="childField.key">
+                <el-form-item :label="vueAdmin.t(childField.label)" :required="childField.required">
+                    <component :is="vueAdmin.getFieldComponent(moduleKey, childField.type, childField.key)"
+                        :field="childField"
+                        :model-value="innerValue[childField.key]"
+                        @update:model-value="onChildChange(childField.key, $event)"
+                        mode="edit"
+                        :disabled="disabled" />
+                </el-form-item>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, onMounted } 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 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 selectedTab = computed(() => {
+    const type = props.modelValue?.type
+    return props.field.tabs?.find((t: any) => t.key === type)
+})
+
+const innerValue = computed(() => {
+    const val = props.modelValue
+    if (val != null && typeof val === 'object' && Object.keys(val).length > 0) {
+        return val
+    }
+    return initValue()
+})
+
+function initValue() {
+    const firstTab = props.field.tabs?.[0]
+    if (!firstTab) return {}
+    const obj: any = { type: firstTab.key }
+    firstTab.fields?.forEach((f: any) => {
+        if (f.defaultValue !== undefined) {
+            obj[f.key] = typeof f.defaultValue === 'function' ? f.defaultValue() : f.defaultValue
+        }
+    })
+    return obj
+}
+
+function onTypeChange(type: any) {
+    const tab = props.field.tabs?.find((t: any) => t.key === type)
+    const obj: any = { type }
+    tab?.fields?.forEach((f: any) => {
+        if (f.defaultValue !== undefined) {
+            obj[f.key] = typeof f.defaultValue === 'function' ? f.defaultValue() : f.defaultValue
+        }
+    })
+    emit('update:modelValue', obj)
+}
+
+function onChildChange(key: string, value: any) {
+    emit('update:modelValue', { ...innerValue.value, [key]: value })
+}
+
+onMounted(() => {
+    const val = props.modelValue
+    if (val == null || val === '' || (typeof val === 'object' && Object.keys(val).length === 0)) {
+        emit('update:modelValue', initValue())
+    }
+})
+</script>
+
+<style scoped>
+.tab-display {
+    display: inline-block;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.field-tab {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.tab-fields {
+    padding-left: 16px;
+    border-left: 2px solid var(--el-border-color-lighter);
+}
+</style>