README 仅保留概览/结构/基础设施/安装/开发命令; 架构、新增页签、子模块管理细节移至 docs/ 下三个 md: - docs/architecture.md:模块注册/PageShell/KeepAlive/存活校验 - docs/add-module.md:新增页签步骤 + 元数据字段速查 + 常见变体 - docs/submodule-timeTableFix.md:submodule 升级/clone/移除/独立访问
3.6 KiB
3.6 KiB
新增一个项目页签
新增页签 = 新建 src/modules/<新项目>/ 文件夹,无需改动导航或路由代码。注册表自动收集并生成页签与路由。
步骤
1. 建模块文件夹与元数据
复制 src/modules/timetable/(最简范式)或 whiteboard/(带存活校验)为 src/modules/<新项目>/。
index.js 默认导出元数据(字段含义见 architecture.md):
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> 统一容器宽度与标题:
<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 下加对应文案:
tabs: {
// ...
myProject: '我的项目', // zh-CN
myProject: 'My Project', // en
}
4. 构建
npm run build
页签与路由自动出现。
常见变体
隐藏页签(仅 URL 访问)
export default { id: 'secret', tabKey: 'tabs.secret', order: 99, hidden: true, component: () => import('./Secret.vue') }
hidden: true 的页签不在导航显示,但 URL 访问后保持可见(访问过的隐藏页签不会因切走而消失)。
依赖外部服务存活(挂掉则隐藏并卸载)
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。
路由参数(如 /my-project/:id)
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。
元数据字段速查
| 字段 | 必填 | 说明 |
|---|---|---|
id |
是 | 唯一标识,路由 path / KeepAlive 匹配名 |
tabKey |
是 | i18n 键,页签与页面标题 |
component |
是 | 懒加载组件函数 |
order |
否 | 排序,缺省 999 |
hidden |
否 | 隐藏页签,URL 访问后保持可见 |
requiresAlive |
否 | 存活探针 URL,失活则隐藏并卸载 |
param |
否 | 路由参数名,生成 /:<param>? |