# 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.vue`) - `moduleSources` — 业务模块组件(`module/.vue` / `module//.vue`) - `vueAdmin.registerField(type, comp)` / `overrideField(moduleKey, fieldKey, comp)` — 运行时也可