docs: 精简 README,细节拆分到 docs/
README 仅保留概览/结构/基础设施/安装/开发命令; 架构、新增页签、子模块管理细节移至 docs/ 下三个 md: - docs/architecture.md:模块注册/PageShell/KeepAlive/存活校验 - docs/add-module.md:新增页签步骤 + 元数据字段速查 + 常见变体 - docs/submodule-timeTableFix.md:submodule 升级/clone/移除/独立访问
This commit is contained in:
112
docs/add-module.md
Normal file
112
docs/add-module.md
Normal file
@@ -0,0 +1,112 @@
|
||||
# 新增一个项目页签
|
||||
|
||||
新增页签 = 新建 `src/modules/<新项目>/` 文件夹,无需改动导航或路由代码。注册表自动收集并生成页签与路由。
|
||||
|
||||
## 步骤
|
||||
|
||||
### 1. 建模块文件夹与元数据
|
||||
|
||||
复制 `src/modules/timetable/`(最简范式)或 `whiteboard/`(带存活校验)为 `src/modules/<新项目>/`。
|
||||
|
||||
`index.js` 默认导出元数据(字段含义见 [architecture.md](./architecture.md#模块注册表扩展点核心)):
|
||||
|
||||
```js
|
||||
export default {
|
||||
id: 'my-project', // 必填:唯一标识,同时作路由 path / KeepAlive 匹配名
|
||||
tabKey: 'tabs.myProject', // 必填:i18n 键
|
||||
order: 4, // 可选:页签排序,缺省 999
|
||||
component: () => import('./MyProject.vue') // 必填:懒加载组件
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 实现组件,用 PageShell 包裹
|
||||
|
||||
组件内 `defineOptions({ name: <id> })`(KeepAlive 匹配用),并用 `<PageShell>` 统一容器宽度与标题:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
defineOptions({ name: 'my-project' })
|
||||
import PageShell from '../../components/ui/PageShell.vue'
|
||||
import { useLocale } from '../../composables/useLocale.js'
|
||||
const { t } = useLocale()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageShell title-key="tabs.myProject">
|
||||
<!-- 页面内容 -->
|
||||
</PageShell>
|
||||
</template>
|
||||
```
|
||||
|
||||
PageShell props:
|
||||
- `titleKey`:i18n 键,渲染页面标题;不传则无标题
|
||||
- `fluid`:true 突破 1080px 全宽(如日历页)
|
||||
- `padded`:false 去掉默认上下间距(页面自管布局时用)
|
||||
- `#actions` 具名插槽:标题旁的操作区(如白板切换表单)
|
||||
|
||||
### 3. 加 i18n 文案
|
||||
|
||||
在 `src/i18n/locales/zh-CN.js` 与 `en.js` 的 `tabs` 下加对应文案:
|
||||
|
||||
```js
|
||||
tabs: {
|
||||
// ...
|
||||
myProject: '我的项目', // zh-CN
|
||||
myProject: 'My Project', // en
|
||||
}
|
||||
```
|
||||
|
||||
### 4. 构建
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
页签与路由自动出现。
|
||||
|
||||
## 常见变体
|
||||
|
||||
### 隐藏页签(仅 URL 访问)
|
||||
|
||||
```js
|
||||
export default { id: 'secret', tabKey: 'tabs.secret', order: 99, hidden: true, component: () => import('./Secret.vue') }
|
||||
```
|
||||
|
||||
`hidden: true` 的页签不在导航显示,但 URL 访问后保持可见(访问过的隐藏页签不会因切走而消失)。
|
||||
|
||||
### 依赖外部服务存活(挂掉则隐藏并卸载)
|
||||
|
||||
```js
|
||||
import { healthUrl } from '../../config/app.config.js'
|
||||
export default {
|
||||
id: 'my-service', tabKey: 'tabs.myService', order: 5,
|
||||
requiresAlive: 'https://example.com/health', // 存活探针 URL
|
||||
component: () => import('./MyService.vue')
|
||||
}
|
||||
```
|
||||
|
||||
服务失活时页签隐藏、组件卸载;恢复后自动重新加载。详见 [architecture.md](./architecture.md#存活校验requiresalive)。
|
||||
|
||||
### 路由参数(如 /my-project/:id)
|
||||
|
||||
```js
|
||||
export default { id: 'my-project', tabKey: 'tabs.myProject', order: 4, param: 'itemId', component: () => import('./MyProject.vue') }
|
||||
```
|
||||
|
||||
生成路由 `/<id>/:<param>?`,组件内用 `useRoute().params.<param>` 读取。
|
||||
|
||||
### 集成独立子项目(git submodule)
|
||||
|
||||
参照 `timetable` 模块:建 mainPage 侧包装器组件 import 子项目 `App.vue`,套 `PageShell`,包装器持有 `defineOptions({ name })`。子项目保持纯净。详见 [submodule-timeTableFix.md](./submodule-timeTableFix.md)。
|
||||
|
||||
## 元数据字段速查
|
||||
|
||||
| 字段 | 必填 | 说明 |
|
||||
|------|------|------|
|
||||
| `id` | 是 | 唯一标识,路由 path / KeepAlive 匹配名 |
|
||||
| `tabKey` | 是 | i18n 键,页签与页面标题 |
|
||||
| `component` | 是 | 懒加载组件函数 |
|
||||
| `order` | 否 | 排序,缺省 999 |
|
||||
| `hidden` | 否 | 隐藏页签,URL 访问后保持可见 |
|
||||
| `requiresAlive` | 否 | 存活探针 URL,失活则隐藏并卸载 |
|
||||
| `param` | 否 | 路由参数名,生成 `/:<param>?` |
|
||||
Reference in New Issue
Block a user