zikai
4334dec00d
README 仅保留概览/结构/基础设施/安装/开发命令； 架构、新增页签、子模块管理细节移至 docs/ 下三个 md： - docs/architecture.md：模块注册/PageShell/KeepAlive/存活校验 - docs/add-module.md：新增页签步骤 + 元数据字段速查 + 常见变体 - docs/submodule-timeTableFix.md：submodule 升级/clone/移除/独立访问
113 lines
3.6 KiB
Markdown
113 lines
3.6 KiB
Markdown
# 新增一个项目页签
|
||
|
||
新增页签 = 新建 `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>?` |
|