wc24/shrimp-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.3.0: 单 sources 入口 + 路径后缀覆盖约定

Browse Source 
破坏性重构。框架对外只暴露一个 `sources` glob 入口,消费侧任何 .vue
都按文件路径后缀匹配同后缀覆盖:

- shrimp/components/<name>.vue 同后缀覆盖框架内置(login/layout/topbar/ShrimpTable/...)
- shrimp/components/fields/Field<X>.vue 注册类型 <x>(首字母小写)
- shrimp/module/<key>.vue 业务模块

变更:
- 删除 customFields / moduleSources / overrideField / registerField 旧入口
- 删除 fieldOverrides Map,字段表纯靠 glob 扫描注册
- 框架内 .vue 对可覆盖 peer 改用 defineAsyncComponent(resolveVue(...))
  (login → ShrimpLangSwitch / layout → sideM/navMenu/topbar/userbar/logo /
   ShrimpTable → ShrimpEditDrawer/ShrimpFilterDrawer/...)
- views/ 全部并入 components/,App.vue 上提到 src/ 根
- LangSwitch → ShrimpLangSwitch,PowerTree → ShrimpPowerTree
- module/FieldRelativeTime.vue → components/fields/FieldRelativeTime.vue
- module/user.vue 改用 #column-updatedAt slot 替代旧的 overrideField

字段类型约定从 'field' + Name 改为 lowercase-first(FieldString → 'string'),
内置和消费侧统一。
This commit is contained in:
wc24
2026-05-25 15:05:16 +08:00
parent ac57de97cb
commit 2b33bca681
20 changed files with 165 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/VueAdmin.ts
+57 -60
View File
@@ -10,7 +10,6 @@ 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'
// ============== 工具 ==============
@@ -39,50 +38,62 @@ 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>>
/** 业务字段组件:`import.meta.glob('./module/fields/Field*.vue')`,文件名 FieldXxx → type='fieldXxx' */
customFields?: Record<string, () => Promise<{ default: Component } | Component>>
/**
* 消费侧 .vue 源,推荐 `import.meta.glob('./shrimp/**\/*.vue')`。
* - `shrimp/components/<name>.vue` 同后缀覆盖框架内置(login/layout/topbar/ShrimpTable/...)
* - `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 }[]
}
// ============== 源注册表 ==============
//
// 唯一约定:消费侧把 .vue 源放进 `sources`,框架按文件路径后缀解析。
// 框架内部对可覆盖的 .vue 也用 resolveVue 解析(而不是静态 import),保证 consumer 覆盖在框架内部使用点也生效。
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)
fieldRegistry.set('boolean', defineAsyncComponent(() => import('./components/fields/FieldBoolean.vue')))
fieldRegistry.set('date', defineAsyncComponent(() => import('./components/fields/FieldDate.vue')))
fieldRegistry.set('number', defineAsyncComponent(() => import('./components/fields/FieldNumber.vue')))
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')))
function deriveFieldType(path: string): string | null {
const m = path.match(/\/components\/fields\/Field([A-Z][A-Za-z0-9]*)\.vue$/)
if (!m) return null
return m[1][0].toLowerCase() + m[1].slice(1)
}
// 框架自带模块组件 — vite glob 相对本文件解析,扫到的是 shrimp-admin 内部的 module/
const internalModules = import.meta.glob<Component>('./module/**/*.vue')
// 业务模块由消费侧通过 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
for (const path in internalSources) {
const type = deriveFieldType(path)
if (type) fieldRegistry.set(type, defineAsyncComponent(internalSources[path] as any))
}
// ============== LocalData ==============
@@ -110,20 +121,8 @@ export class VueAdmin extends ShrimpClient {
config: ShrimpAdminConfig
langList: { lang: string; name: string }[]
registerField(type: string, comp: Component) { fieldRegistry.set(type, comp) }
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
getFieldComponent(_moduleKey: string, type: string, _fieldKey?: string): Component {
return fieldRegistry.get(type) || fieldRegistry.get('string')!
}
state = reactive({ isMobile: false })
@@ -161,15 +160,11 @@ export class VueAdmin extends ShrimpClient {
this.config = opts.config
this.langList = opts.langList || [{ lang: 'zh-cn', name: '简体中文' }]
// 业务模块/字段注册
if (opts.moduleSources) Object.assign(externalModules, opts.moduleSources)
if (opts.customFields) {
for (const path in opts.customFields) {
const match = path.match(/\/Field(.+)\.vue$/)
if (match) {
const name = 'field' + match[1]
fieldRegistry.set(name, defineAsyncComponent(opts.customFields[path] as any))
}
if (opts.sources) {
Object.assign(externalSources, opts.sources)
for (const path in opts.sources) {
const type = deriveFieldType(path)
if (type) fieldRegistry.set(type, defineAsyncComponent(opts.sources[path] as any))
}
}
@@ -244,8 +239,10 @@ export class VueAdmin extends ShrimpClient {
registerRoute(info: IRouteInfo) {
const componentPath = info.componentPath || info.moduleKey
const importer = resolveModuleComponent(componentPath)
if (!importer) {
let importer: VueLoader
try {
importer = resolveVue(`module/${componentPath}.vue`)
} catch {
console.warn(`[shrimp-admin] module component not found: module/${componentPath}.vue`)
return
}
@@ -265,17 +262,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' } }
},
{
path: "/:pathMatch(.*)",
component: () => import('./views/404.vue'),
component: resolveVue('components/404.vue'),
},
],
})