# shrimp-admin

Shrimp 框架前端 —— 一种**经典解决方案**(不是框架本身),消费 [shrimp-server](http://git.zeromvc.com/wc24/shrimp-server) 暴露的 `ShrimpServer` 路由契约 + `ShrimpTable` 数据形状契约,基于 **Vue 3 + Element Plus** 实现一套可直接用的后台壳。

如果你想换 UI 库或者换前端技术栈,直接照 shrimp-server 的约定再写一份就行,不依赖本包。

## 安装

```bash
npm i git+http://git.zeromvc.com/wc24/shrimp-admin.git#v0.3.0
```

shrimp-admin 是**源码 ship**(.ts + .vue 直接发),由消费侧 Vite 编译。

## 使用

```ts
// main.ts
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({
    config: {
        API_URL: '/admin-api',
        TIMEOUT: 10000,
    },
    locales: { 'zh-cn': zhCn, en },
    sources: import.meta.glob('./shrimp/**/*.vue'),
}))
app.mount('#app')
```

## 唯一约定: `sources` 路径后缀覆盖

消费侧把所有要交给框架的 .vue 通过单个 `sources` 入口注入(`import.meta.glob` 必须由消费侧自己调用,vite 静态扫描相对调用文件)。框架按**文件路径后缀**匹配,同后缀消费侧优先,内置兜底。

```
项目/
└── src/shrimp/                       消费侧目录,可任意命名
    ├── components/
    │   ├── login.vue                 覆盖框架内置 login 页
    │   ├── topbar.vue                覆盖顶栏
    │   └── fields/
    │       └── FieldRelativeTime.vue 注册字段类型 relativeTime
    └── module/
        ├── product.vue               业务模块,routed by moduleKey
        └── user/
            └── orders.vue            子模块,parent=user
```

### 框架内置 slot(可覆盖,suffix 列表)

```
components/login.vue           components/404.vue            components/layout.vue
components/logo.vue            components/navMenu.vue        components/sideM.vue
components/topbar.vue          components/userbar.vue
components/ShrimpLangSwitch.vue           components/ShrimpPowerTree.vue
components/ShrimpTable.vue                components/ShrimpEditDrawer.vue
components/ShrimpFilterDrawer.vue         components/ShrimpFilterTrigger.vue
components/ShrimpSearchInput.vue
components/fields/Field{String,Boolean,Date,Json,Number,Password,Relation,Select,Tab,Textarea,RelativeTime}.vue
```

### 字段类型注册

`components/fields/Field<X>.vue` 自动注册类型 `<x>`(首字母小写):

| 文件                     | type 注册键        |
| ------------------------ | ------------------ |
| `FieldString.vue`        | `string`           |
| `FieldRelativeTime.vue`  | `relativeTime`     |
| 你自己的 `FieldMyType.vue` | `myType`         |

后端 moduleInfo 里 `field.type === 'myType'` 时就用你这个组件。

### 业务模块

`components/X.vue` 命中 `moduleKey === 'X'` 的路由,自动作为内容页。子表用嵌套目录(`module/<parent>/<sub>.vue`)。

## 消费的契约

参见 shrimp-server README `## 约定` 章节。本包消费以下条件契约:

- **ShrimpTable**: list 响应 `{list,total,page,pageSize,totalPages}` / 字段 type 枚举 / populate `${key}_label`
- **ShrimpServer**: HTTP 路由 / JWT Bearer / IUserAccessor 返回的 powers