docs(README): 覆盖颗粒度限定到 3 个入口 + 加 login 覆盖示例

- 删掉 "components/* 都可覆盖" 的误导清单(框架内 peer 引用是硬编码静态 import)
- 明确 3 类入口: router targets / module routes / field registry
- 加完整可跑的 login.vue 覆盖例子

README.md

@@ -7,8 +7,7 @@ Shrimp 框架前端 —— 一种**经典解决方案**(不是框架本身),消
 ## 安装
 
 ```bash
-# 推荐 HTTP
+npm i git+http://git.zeromvc.com/wc24/shrimp-admin.git#v0.3.0
-npm i git+http://git.zeromvc.com/wc24/shrimp-admin.git#v0.1.0
 ```
 
 shrimp-admin 是**源码 ship**(.ts + .vue 直接发),由消费侧 Vite 编译。
@@ -20,6 +19,8 @@ shrimp-admin 是**源码 ship**(.ts + .vue 直接发),由消费侧 Vite 编译
 import { createApp } from 'vue'
 import { createShrimpAdmin, App } from 'shrimp-admin'
 import 'shrimp-admin/style'
+import zhCn from './locales/zh-cn.json'
+import en from './locales/en.json'
 
 const app = createApp(App)
 app.use(createShrimpAdmin({
@@ -27,22 +28,111 @@ app.use(createShrimpAdmin({
         API_URL: '/admin-api',
         TIMEOUT: 10000,
     },
-    moduleSources: import.meta.glob('./module/**/*.vue'),
+    locales: { 'zh-cn': zhCn, en },
-    customFields: import.meta.glob('./module/fields/Field*.vue'),
+    sources: import.meta.glob('./shrimp/**/*.vue'),
 }))
 app.mount('#app')
 ```
 
+## 唯一约定: `sources` 路径后缀覆盖
+
+消费侧把所有要交给框架的 .vue 通过单个 `sources` 入口注入(`import.meta.glob` 必须由消费侧自己调用,vite 静态扫描相对调用文件)。框架按**文件路径后缀**匹配,同后缀消费侧优先,内置兜底。
+
+```
+项目/
+└── src/shrimp/                       消费侧目录,可任意命名
+    ├── components/
+    │   ├── login.vue                 覆盖框架内置 login 页
+    │   ├── layout.vue                覆盖整体布局壳
+    │   └── fields/
+    │       └── FieldRelativeTime.vue 注册字段类型 relativeTime
+    └── module/
+        ├── product.vue               业务模块,routed by moduleKey
+        └── user/
+            └── orders.vue            子模块,parent=user
+```
+
+### 覆盖颗粒度只在 3 个入口
+
+框架内 .vue 之间的 peer 引用是**硬编码静态 import**,override 颗粒度就停在下面这 3 类入口,不会一路传递下去:
+
+| 入口 | 后缀 | 说明 |
+| --- | --- | --- |
+| **router targets** | `components/login.vue`、`components/layout.vue`、`components/404.vue` | vue-router 三个根级路由组件 |
+| **module routes** | `module/<key>.vue`、`module/<parent>/<sub>.vue` | 走 `registerRoute` 的业务模块/子模块 |
+| **field registry** | `components/fields/Field<X>.vue` | 字段类型注册表(文件名首字母小写 = type 键) |
+
+想换更细的部件(比如 layout 里的 topbar)就在消费侧的 `layout.vue` 自己组装 — 框架不再代理任何 peer 切换。
+
+### 字段类型注册
+
+`components/fields/Field<X>.vue` 自动注册类型 `<x>`(首字母小写):
+
+| 文件                       | type 注册键      |
+| -------------------------- | ---------------- |
+| `FieldString.vue`          | `string`         |
+| `FieldRelativeTime.vue`    | `relativeTime`   |
+| 你自己的 `FieldMyType.vue` | `myType`         |
+
+后端 moduleInfo 里 `field.type === 'myType'` 时就用你这个组件。内置类型: `string` / `boolean` / `date` / `json` / `number` / `password` / `relation` / `select` / `tab` / `textarea` / `relativeTime`。
+
+### 业务模块
+
+`module/<key>.vue` 命中 `moduleKey === '<key>'` 的路由,自动作为内容页。子表用嵌套目录(`module/<parent>/<sub>.vue`)。
+
+### 例子: 覆盖 login 页
+
+```vue
+<!-- src/shrimp/components/login.vue -->
+<template>
+    <div class="custom-login">
+        <h2>{{ vueAdmin.adminConfig.title || 'Admin' }}</h2>
+        <el-form :model="form" :rules="rules" @keyup.enter="login">
+            <el-form-item prop="user">
+                <el-input v-model="form.user" :placeholder="$t('login.userPlaceholder')" />
+            </el-form-item>
+            <el-form-item prop="password">
+                <el-input v-model="form.password" :placeholder="$t('login.PWPlaceholder')" show-password />
+            </el-form-item>
+            <el-button type="primary" :loading="info.islogin" @click="login">
+                {{ $t('login.signIn') }}
+            </el-button>
+        </el-form>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { vueAdmin } from 'shrimp-admin'
+
+const { t } = useI18n()
+const info = reactive({ islogin: false })
+const form = reactive({ user: '', password: '' })
+const rules = computed(() => ({
+    user: [{ required: true, message: t('login.userError'), trigger: 'blur' }],
+    password: [{ required: true, message: t('login.PWError'), trigger: 'blur' }],
+}))
+
+function login() {
+    info.islogin = true
+    vueAdmin.fetchLogin({ username: form.user, password: form.password })
+        .then(async (data: any) => {
+            vueAdmin.token = data.token
+            await vueAdmin.loadUserInfo()
+            vueAdmin.router.push(vueAdmin.getFirstMenuPath())
+        })
+        .catch((e: any) => console.warn('[Login]', e.message))
+        .finally(() => { info.islogin = false })
+}
+</script>
+```
+
+只要文件落在 `src/shrimp/components/login.vue`,被 `sources` 的 glob 扫到,框架的 `/login` 路由就会用你这份替换内置版本。
+
 ## 消费的契约
 
 参见 shrimp-server README `## 约定` 章节。本包消费以下条件契约:
 
 - **ShrimpTable**: list 响应 `{list,total,page,pageSize,totalPages}` / 字段 type 枚举 / populate `${key}_label`
 - **ShrimpServer**: HTTP 路由 / JWT Bearer / IUserAccessor 返回的 powers
-- **默认 Field*.vue**: 字段 type 必须是内置枚举之一,或通过 `customFields` 注册
-
-## 扩展点
-
-- `customFields` — 业务字段组件(`Field<Name>.vue`)
-- `moduleSources` — 业务模块组件(`module/<key>.vue` / `module/<parent>/<sub>.vue`)
-- `vueAdmin.registerField(type, comp)` / `overrideField(moduleKey, fieldKey, comp)` — 运行时也可

package.json

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

src/App.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import { vueAdmin } from "../VueAdmin";
+import { vueAdmin } from "./VueAdmin";
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import en from 'element-plus/es/locale/lang/en'
 
@@ -20,5 +20,5 @@ const locale = computed(() => {
 });
 </script>
 <style lang="scss">
-@use "../style/style.scss";
+@use "./style/style.scss";
 </style>

src/VueAdmin.ts

@@ -10,7 +10,22 @@ import { createI18n, I18n } from 'vue-i18n'
 import { IShrimpResponse, ILabel } from './IShrimpType'
 
 import { ShrimpClient, handleShrimpResponse, type IShrimpTipper, type IRouteInfo } from './ShrimpClient'
-import FieldString from './components/fields/FieldString.vue'
+
+// ============== 工具 ==============
+
+/** locale 深合并:嵌套对象按 key 递归 merge,非对象值 src 覆盖 dst。仅服务于 i18n messages,没必要拉 lodash。 */
+function deepMerge(dst: Record<string, any>, src: Record<string, any>): Record<string, any> {
+    const out: Record<string, any> = { ...dst }
+    for (const key in src) {
+        const sv = src[key], dv = out[key]
+        if (sv && typeof sv === 'object' && !Array.isArray(sv) && dv && typeof dv === 'object' && !Array.isArray(dv)) {
+            out[key] = deepMerge(dv, sv)
+        } else {
+            out[key] = sv
+        }
+    }
+    return out
+}
 
 // ============== Options ==============
 
@@ -23,50 +38,65 @@ export interface ShrimpAdminConfig {
     LS_ENCRYPTION_key?: string
 }
 
+type VueLoader = () => Promise<any>
+
 export interface ShrimpAdminOptions {
     config: ShrimpAdminConfig
-    /** 业务模块组件:`import.meta.glob('./module/**\/*.vue')` 的结果 */
+    /**
-    moduleSources?: Record<string, () => Promise<{ default: Component } | Component>>
+     * 消费侧 .vue 源,推荐 `import.meta.glob('./shrimp/**\/*.vue')`。
-    /** 业务字段组件:`import.meta.glob('./module/fields/Field*.vue')`,文件名 FieldXxx → type='fieldXxx' */
+     * - `shrimp/components/<name>.vue` 同后缀覆盖框架内置(login/layout/topbar/ShrimpTable/...)
-    customFields?: Record<string, () => Promise<{ default: Component } | Component>>
+     * - `shrimp/components/fields/Field<X>.vue` 注册字段类型 `<x>`(首字母小写),同名覆盖内置
+     * - `shrimp/module/<key>.vue` 业务模块组件(routed by moduleKey)
+     */
+    sources?: Record<string, VueLoader>
     /** 语言资源,与框架自带的合并(消费侧同 key 覆盖框架默认) */
     locales?: Record<string, any>
     /** 语言列表,默认 [{ lang: 'zh-cn', name: '简体中文' }] */
     langList?: { lang: string; name: string }[]
 }
 
+// ============== 源注册表 ==============
+//
+// 框架在 3 个入口点用消费侧 sources 覆盖内置(按路径后缀同后缀覆盖):
+//   1. router: components/{layout,login,404}.vue
+//   2. registerRoute: module/<key>.vue 等业务模块
+//   3. fieldRegistry: components/fields/Field<X>.vue (按文件名导出的字段类型)
+// 框架内 .vue 之间的 peer 引用是硬编码静态 import,override 颗粒度就停在上面这些"入口"。
+
+const internalSources = import.meta.glob<Component>('./{components,module}/**/*.vue')
+const externalSources: Record<string, VueLoader> = {}
+
+/**
+ * 路径后缀匹配解析: 消费侧优先,内置兜底。
+ * suffix 形如 `components/login.vue` / `module/user.vue` / `module/user/operationLog.vue`。
+ */
+export function resolveVue(suffix: string): VueLoader {
+    const tail = '/' + suffix
+    for (const key in externalSources) {
+        if (key.endsWith(tail)) return externalSources[key]
+    }
+    for (const key in internalSources) {
+        if (key.endsWith(tail)) return internalSources[key] as any
+    }
+    throw new Error(`[shrimp-admin] resolveVue: ${suffix} not found in sources`)
+}
+
 // ============== 字段组件注册表 ==============
+//
+// 约定:`components/fields/Field<X>.vue` → 字段类型 `<x>`(首字母小写)。
+// 后端 moduleInfo 的 field.type 命中这里的 key 就用对应组件,否则回退到 string。
 
 const fieldRegistry = new Map<string, Component>()
-const fieldOverrides = new Map<string, string>()
 
-fieldRegistry.set('string', FieldString)
+function deriveFieldType(path: string): string | null {
-fieldRegistry.set('boolean', defineAsyncComponent(() => import('./components/fields/FieldBoolean.vue')))
+    const m = path.match(/\/components\/fields\/Field([A-Z][A-Za-z0-9]*)\.vue$/)
-fieldRegistry.set('date', defineAsyncComponent(() => import('./components/fields/FieldDate.vue')))
+    if (!m) return null
-fieldRegistry.set('number', defineAsyncComponent(() => import('./components/fields/FieldNumber.vue')))
+    return m[1][0].toLowerCase() + m[1].slice(1)
-fieldRegistry.set('password', defineAsyncComponent(() => import('./components/fields/FieldPassword.vue')))
+}
-fieldRegistry.set('relation', defineAsyncComponent(() => import('./components/fields/FieldRelation.vue')))
-fieldRegistry.set('select', defineAsyncComponent(() => import('./components/fields/FieldSelect.vue')))
-fieldRegistry.set('textarea', defineAsyncComponent(() => import('./components/fields/FieldTextarea.vue')))
-fieldRegistry.set('json', defineAsyncComponent(() => import('./components/fields/FieldJson.vue')))
-fieldRegistry.set('tab', defineAsyncComponent(() => import('./components/fields/FieldTab.vue')))
 
-// 框架自带模块组件 — vite glob 相对本文件解析,扫到的是 shrimp-admin 内部的 module/
+for (const path in internalSources) {
-const internalModules = import.meta.glob<Component>('./module/**/*.vue')
+    const type = deriveFieldType(path)
-
+    if (type) fieldRegistry.set(type, defineAsyncComponent(internalSources[path] as any))
-// 业务模块由消费侧通过 createShrimpAdmin({ moduleSources }) 注册
-const externalModules: Record<string, () => Promise<any>> = {}
-
-function resolveModuleComponent(componentPath: string): (() => Promise<any>) | null {
-    const suffix = `/module/${componentPath}.vue`
-    // 业务优先(允许覆盖同名内置)
-    for (const key in externalModules) {
-        if (key.endsWith(suffix)) return externalModules[key]
-    }
-    for (const key in internalModules) {
-        if (key.endsWith(suffix)) return internalModules[key] as any
-    }
-    return null
 }
 
 // ============== LocalData ==============
@@ -94,20 +124,8 @@ export class VueAdmin extends ShrimpClient {
     config: ShrimpAdminConfig
     langList: { lang: string; name: string }[]
 
-    registerField(type: string, comp: Component) { fieldRegistry.set(type, comp) }
+    getFieldComponent(_moduleKey: string, type: string, _fieldKey?: string): Component {
-
+        return fieldRegistry.get(type) || fieldRegistry.get('string')!
-    overrideField(moduleKey: string, fieldKey: string, comp: Component) {
-        const registryKey = `__override_${moduleKey}_${fieldKey}`
-        fieldRegistry.set(registryKey, comp)
-        fieldOverrides.set(`${moduleKey}.${fieldKey}`, registryKey)
-    }
-
-    getFieldComponent(moduleKey: string, type: string, fieldKey?: string): Component {
-        if (fieldKey) {
-            const override = fieldOverrides.get(`${moduleKey}.${fieldKey}`)
-            if (override && fieldRegistry.has(override)) return fieldRegistry.get(override)!
-        }
-        return fieldRegistry.get(type) || FieldString
     }
 
     state = reactive({ isMobile: false })
@@ -145,15 +163,11 @@ export class VueAdmin extends ShrimpClient {
         this.config = opts.config
         this.langList = opts.langList || [{ lang: 'zh-cn', name: '简体中文' }]
 
-        // 业务模块/字段注册
+        if (opts.sources) {
-        if (opts.moduleSources) Object.assign(externalModules, opts.moduleSources)
+            Object.assign(externalSources, opts.sources)
-        if (opts.customFields) {
+            for (const path in opts.sources) {
-            for (const path in opts.customFields) {
+                const type = deriveFieldType(path)
-                const match = path.match(/\/Field(.+)\.vue$/)
+                if (type) fieldRegistry.set(type, defineAsyncComponent(opts.sources[path] as any))
-                if (match) {
-                    const name = 'field' + match[1]
-                    fieldRegistry.set(name, defineAsyncComponent(opts.customFields[path] as any))
-                }
             }
         }
 
@@ -169,14 +183,14 @@ export class VueAdmin extends ShrimpClient {
     }
 
     initI18n(extraLocales?: Record<string, any>) {
-        const merged: Record<string, any> = {
+        // 深合并:框架自带 locale 在底,业务侧叠在上。
-            'zh-cn': { ...zh_cn, ...(extraLocales?.['zh-cn'] || {}) },
+        // 旧版用 spread 浅合并,业务侧只要定义了同名一级键(如 user)就会把框架的 user.* 全部替换,
-            'en': { ...en, ...(extraLocales?.['en'] || {}) },
+        // 表现是控制台 [intlify] Not found 'user.operationLog' key 之类的报错。
-        }
+        const builtins: Record<string, any> = { 'zh-cn': zh_cn, 'en': en }
-        if (extraLocales) {
+        const merged: Record<string, any> = {}
-            for (const key in extraLocales) {
+        const langs = new Set([...Object.keys(builtins), ...Object.keys(extraLocales || {})])
-                if (!(key in merged)) merged[key] = extraLocales[key]
+        for (const lang of langs) {
-            }
+            merged[lang] = deepMerge(builtins[lang] || {}, extraLocales?.[lang] || {})
         }
         this.i18n = createI18n({
             locale: this.localData.get("lang") || 'zh-cn',
@@ -228,8 +242,10 @@ export class VueAdmin extends ShrimpClient {
 
     registerRoute(info: IRouteInfo) {
         const componentPath = info.componentPath || info.moduleKey
-        const importer = resolveModuleComponent(componentPath)
+        let importer: VueLoader
-        if (!importer) {
+        try {
+            importer = resolveVue(`module/${componentPath}.vue`)
+        } catch {
             console.warn(`[shrimp-admin] module component not found: module/${componentPath}.vue`)
             return
         }
@@ -249,17 +265,17 @@ export class VueAdmin extends ShrimpClient {
                 {
                     name: "layout",
                     path: "/",
-                    component: () => import('./views/layout.vue'),
+                    component: resolveVue('components/layout.vue'),
                     children: []
                 },
                 {
                     path: "/login",
-                    component: () => import('./views/login.vue'),
+                    component: resolveVue('components/login.vue'),
-                    meta: { title: "t:login.signIn" }
+                    meta: { title: { t: 'login.signIn' } }
                 },
                 {
                     path: "/:pathMatch(.*)",
-                    component: () => import('./views/404.vue'),
+                    component: resolveVue('components/404.vue'),
                 },
             ],
         })
@@ -327,7 +343,7 @@ export class VueAdmin extends ShrimpClient {
                 }
             },
             (error) => {
-                ElMessage.error(this.t('t:base.netError'))
+                ElMessage.error(this.t({ t: 'base.netError' }))
                 throw error
             }
         )

src/components/ShrimpEditDrawer.vue

@@ -53,7 +53,7 @@ function buildRules(field: IFieldConfig): FormItemRule[] {
     if (field.required) {
         rules.push({
             required: true,
-            message: vueAdmin.t('shrimp.fieldRequired'),
+            message: vueAdmin.t({ t: 'shrimp.fieldRequired', params: { field: field.label } }),
             trigger: 'change',
             ...(field.type === 'string' || field.type === 'textarea' || field.type === 'password' ? { trigger: 'blur' } : {}),
         })

src/components/fields/FieldRelativeTime.vue

@@ -10,7 +10,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { vueAdmin } from '../VueAdmin'
+import { vueAdmin } from '../../VueAdmin'
 
 const { t } = useI18n()
 

src/components/layout.vue

@@ -43,13 +43,13 @@
 </template>
 
 <script lang="ts" setup>
-import SideM from "./sideM.vue";
 import { ref, watch } from "vue";
+import { vueAdmin } from "../VueAdmin";
+import { type IMenuItem } from "../IShrimpType";
+import SideM from "./sideM.vue";
 import navMenu from "./navMenu.vue";
 import Topbar from "./topbar.vue";
 import Userbar from "./userbar.vue";
-import { vueAdmin } from "../VueAdmin";
-import { type IMenuItem } from "../IShrimpType";
 import Logo from "./logo.vue";
 
 // 初始化选中菜单

src/components/login.vue

@@ -33,7 +33,7 @@
 import { vueAdmin } from "../VueAdmin";
 import { reactive, computed, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
-import LangSwitch from "../components/LangSwitch.vue";
+import LangSwitch from "./ShrimpLangSwitch.vue";
 
 vueAdmin.token = null;
 

src/components/sideM.vue

@@ -33,10 +33,10 @@
 </template>
 
 <script lang="ts" setup>
-import navMenu from "./navMenu.vue";
-import Logo from "./logo.vue";
 import { ref } from "vue";
 import { vueAdmin } from '../VueAdmin';
+import navMenu from "./navMenu.vue";
+import Logo from "./logo.vue";
 
 let nav = ref(false);
 function showMobileNav() { nav.value = true; }

src/components/userbar.vue

@@ -21,7 +21,7 @@
 
 <script lang="ts" setup>
 import { vueAdmin } from "../VueAdmin";
-import LangSwitch from "../components/LangSwitch.vue";
+import LangSwitch from "./ShrimpLangSwitch.vue";
 
 function screen() {
 	vueAdmin.fullscreen();

src/index.ts

@@ -47,6 +47,7 @@ export {
     VueAdmin,
     vueAdmin,
     createShrimpAdmin,
+    resolveVue,
     type ShrimpAdminOptions,
     type ShrimpAdminConfig,
 } from './VueAdmin'
@@ -58,14 +59,15 @@ export {
     type IRouteInfo,
 } from './ShrimpClient'
 
-// 框架组件 — 业务页面想直接复用就 import 这些
+// 框架组件 — 业务页面想直接复用就 import 这些。
+// 这些是「静态」导出,拿到的就是框架内置版本,不受消费侧 sources 影响。
 export { default as ShrimpTable } from './components/ShrimpTable.vue'
 export { default as ShrimpEditDrawer } from './components/ShrimpEditDrawer.vue'
 export { default as ShrimpFilterDrawer } from './components/ShrimpFilterDrawer.vue'
 export { default as ShrimpFilterTrigger } from './components/ShrimpFilterTrigger.vue'
 export { default as ShrimpSearchInput } from './components/ShrimpSearchInput.vue'
-export { default as PowerTree } from './components/PowerTree.vue'
+export { default as ShrimpPowerTree } from './components/ShrimpPowerTree.vue'
-export { default as LangSwitch } from './components/LangSwitch.vue'
+export { default as ShrimpLangSwitch } from './components/ShrimpLangSwitch.vue'
 
 // 应用入口视图(消费侧 createApp 用)
-export { default as App } from './views/App.vue'
+export { default as App } from './App.vue'

src/locales/en.json

@@ -25,7 +25,10 @@
     "enabled": "Enabled",
     "pressEnter": "Press Enter to add",
     "expand": "Expand",
-    "collapse": "Collapse"
+    "collapse": "Collapse",
+    "back": "Back",
+    "refresh": "Refresh",
+    "notFound": "Not Found"
   },
   "user": {
     "username": "Username",

src/locales/zh-cn.json

@@ -38,6 +38,7 @@
     "active": "启用状态",
     "createdAt": "创建时间",
     "updatedAt": "更新时间",
+    "menuManage": "用户",
     "operationLog": "操作日志"
   },
   "operationLog": {
@@ -55,6 +56,7 @@
     "powers": "权限",
     "createdAt": "创建时间",
     "updatedAt": "更新时间",
+    "menuManage": "角色",
     "menuList": "角色列表",
     "empty": "暂无角色",
     "addRole": "新增角色",
@@ -91,6 +93,9 @@
     "PWError": "请输入密码"
   },
   "power": {
+    "user": "用户",
+    "role": "角色",
+    "zerobase": "Zero Base",
     "add": "新增",
     "edit": "编辑",
     "delete": "删除",

src/module/role.vue

@@ -28,7 +28,7 @@
                         <el-input v-model="formData.description" type="textarea" :rows="3" />
                     </el-form-item>
                     <el-form-item :label="$t('role.powers')">
-                        <PowerTree :modelValue="formData.powers || []" :allPowers="allPowers" :menuTree="vueAdmin.menuTree"
+                        <ShrimpPowerTree :modelValue="formData.powers || []" :allPowers="allPowers" :menuTree="vueAdmin.menuTree"
                             @update:modelValue="val => formData.powers = val" />
                     </el-form-item>
                 </el-form>
@@ -53,7 +53,7 @@ import { useI18n } from 'vue-i18n'
 import { vueAdmin } from '../VueAdmin'
 import { IRole, IRoleProto, WithId, ILabel } from '../IShrimpType'
 import { ElMessage } from 'element-plus'
-import PowerTree from '../components/PowerTree.vue'
+import ShrimpPowerTree from '../components/ShrimpPowerTree.vue'
 
 interface IPowerItem {
     key: string

src/module/user.vue

@@ -1,13 +1,14 @@
 <template>
-    <ShrimpTable moduleKey="user" />
+    <ShrimpTable moduleKey="user">
+        <template #column-updatedAt="{ row }">
+            <FieldRelativeTime :model-value="row.updatedAt" mode="display" :field="{}" />
+        </template>
+    </ShrimpTable>
 </template>
 
 <script lang="ts" setup>
 import ShrimpTable from '../components/ShrimpTable.vue'
-import { vueAdmin } from '../VueAdmin'
+import FieldRelativeTime from '../components/fields/FieldRelativeTime.vue'
-import FieldRelativeTime from './FieldRelativeTime.vue'
-
-vueAdmin.overrideField('user', 'updatedAt', FieldRelativeTime)
 </script>
 
 <style scoped>

src/module/user/operationLog.vue

@@ -14,8 +14,8 @@
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import ShrimpTable from '../../components/ShrimpTable.vue'
 import { vueAdmin } from '../../VueAdmin'
+import ShrimpTable from '../../components/ShrimpTable.vue'
 
 const route = useRoute()
 const { t } = useI18n()