Files

Zikai 6ad6c15e9d feat: 拆分移动游戏项目为独立 z449 子模块（git submodule + i18n prop 桥接）

- mobile-game 模块源码迁出至独立仓库 z449（third_party/z449），独立可渲染/维护
- z449 App.vue 为便携式组件：自带独立 vue-i18n 实例与 locale 文案
- mainPage 侧 MobileGameWrapper 透传 :locale prop，子模块 watch 同步语言
- mainPage i18n 精简：仅保留 tabs.mobileGame，删除 mobileGame.* 大块文案
- 文档：新增 docs/submodule-z449.md，更新 README/architecture/add-module

2026-07-23 07:04:08 +00:00

4.0 KiB

Raw Blame History

新增一个项目页签

新增页签 = 新建 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 模块（无 i18n 子项目）或 mobile-game 模块（带独立 i18n 的子项目）：建 mainPage 侧包装器组件 import 子项目 App.vue，包装器持有 defineOptions({ name })。子项目保持纯净。

无 i18n 的子项目（如 timeTableFix）：包装器直接 import App.vue 即可。
带独立 i18n 的子项目（如 z449）：子项目 App.vue 接 :locale prop，包装器把 mainPage 当前语言透传（<Z449App :locale="locale" />），子项目 watch 同步到自己的 i18n 实例。详见 submodule-z449.md。

元数据字段速查

字段	必填	说明
`id`	是	唯一标识，路由 path / KeepAlive 匹配名
`tabKey`	是	i18n 键，页签与页面标题
`component`	是	懒加载组件函数
`order`	否	排序，缺省 999
`hidden`	否	隐藏页签，URL 访问后保持可见
`requiresAlive`	否	存活探针 URL，失活则隐藏并卸载
`param`	否	路由参数名，生成 `/:<param>?`

4.0 KiB Raw Blame History Unescape Escape