wc24
f210ce4582
- 拷 shrimp-server/src/IShrimpType.ts 到 src/IShrimpType.ts,头改 @syncedFrom shrimp-server contract 1.0.0 - 全部内部 import 'shrimp-server/types' → 本地 './IShrimpType'(各文件按相对路径) - src/index.ts 加上类型契约的 re-export(ShrimpCode/ShrimpError/枚举/全部 interface),消费侧从 'shrimp-admin' 一处拿到 - 删 dependencies.shrimp-server,前端 bundle 不再牵 mongoose/express 为什么不直接 import 'shrimp-server': shrimp-server v0.6.0 收单入口后,入口含 mongoose/express,前端会被 vite 牵进 bundle。 契约副本 + 版本号对照是低频改动场景的更干净选择。
shrimp-admin
Shrimp 框架前端 —— 一种经典解决方案(不是框架本身),消费 shrimp-server 暴露的 ShrimpServer 路由契约 + ShrimpTable 数据形状契约,基于 Vue 3 + Element Plus 实现一套可直接用的后台壳。
如果你想换 UI 库或者换前端技术栈,直接照 shrimp-server 的约定再写一份就行,不依赖本包。
安装
# 推荐 HTTP
npm i git+http://git.zeromvc.com/wc24/shrimp-admin.git#v0.1.0
shrimp-admin 是源码 ship(.ts + .vue 直接发),由消费侧 Vite 编译。
使用
// main.ts
import { createApp } from 'vue'
import { createShrimpAdmin, App } from 'shrimp-admin'
import 'shrimp-admin/style'
const app = createApp(App)
app.use(createShrimpAdmin({
config: {
API_URL: '/admin-api',
TIMEOUT: 10000,
},
moduleSources: import.meta.glob('./module/**/*.vue'),
customFields: import.meta.glob('./module/fields/Field*.vue'),
}))
app.mount('#app')
消费的契约
参见 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)— 运行时也可