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:
2026-07-23 04:09:42 +00:00
parent a844f364dc
commit 4334dec00d
4 changed files with 265 additions and 56 deletions

112
docs/add-module.md Normal file
View 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>?` |