wc24
4cb3bb8d75
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。
49 lines
1.7 KiB
Markdown
49 lines
1.7 KiB
Markdown
# shrimp-admin
|
|
|
|
Shrimp 框架前端 —— 一种**经典解决方案**(不是框架本身),消费 [shrimp-server](http://git.zeromvc.com/wc24/shrimp-server) 暴露的 `ShrimpServer` 路由契约 + `ShrimpTable` 数据形状契约,基于 **Vue 3 + Element Plus** 实现一套可直接用的后台壳。
|
|
|
|
如果你想换 UI 库或者换前端技术栈,直接照 shrimp-server 的约定再写一份就行,不依赖本包。
|
|
|
|
## 安装
|
|
|
|
```bash
|
|
# 推荐 HTTP
|
|
npm i git+http://git.zeromvc.com/wc24/shrimp-admin.git#v0.1.0
|
|
```
|
|
|
|
shrimp-admin 是**源码 ship**(.ts + .vue 直接发),由消费侧 Vite 编译。
|
|
|
|
## 使用
|
|
|
|
```ts
|
|
// 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)` — 运行时也可
|