feat: init mainPage portfolio site

Vue 3 模块化作品集主页，浅色极简风格，中英双语懒加载 i18n。 - 模块注册表(import.meta.glob)约定式收集项目模块，新增页签无需改导航/路由 - i18n: 中文同步注入主 chunk，英文动态 import() 拆独立 chunk，仅切换时下载 - 第一个页签 mobile-game: 展示 448/449 移动游戏毕设(概览/截图轮播/版本时间线/团队/排行榜/ML视频) - 排行榜复用 /449/449rest.php，失败优雅降级 - 构建: vite outDir=/root/html，emptyOutDir=false，产物用 mainPage/ 命名空间 - 样式: CSS 变量令牌，无 UI 框架运行时依赖
2026-07-12 14:18:35 +00:00
commit 15af291da0
31 changed files with 2927 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,16 @@
+# 依赖
+node_modules/
+
+# 构建产物（输出到 /root/html，不入库）
+dist/
+
+# 编辑器/系统
+.vscode/
+.idea/
+.DS_Store
+*.log
+npm-debug.log*
+
+# 本地环境
+.env.local
+.env.*.local
--- a/README.md
+++ b/README.md
@@ -0,0 +1,188 @@
+# mainPage · 作品集主页
+
+Zikai 的作品集主页 -- 一个 **Vue 3 模块化**的多项目展示站点。
+采用**浅色极简**美术风格，**中英双语**并支持**懒加载**（默认中文，只看中文的访客不会下载英文资源）。
+设计目标：高内聚低耦合、可扩展 -- 后续每个新项目都是一个独立「模块」，自动生成页签与路由。
+
+> 这是「主页」项目本身。它展示的第一个项目页签是 448/449 移动游戏毕设，
+> 详见同级目录下的 `/root/html/448/README.md` 与 `/root/html/449/README.md`。
+
+---
+
+## 技术栈
+
+| 层 | 选型 |
+|---|---|
+| 框架 | Vue 3（`<script setup>` Composition API） |
+| 构建 | Vite 5 |
+| 路由 | vue-router 4（history 模式，路由表由模块注册表动态生成） |
+| 国际化 | vue-i18n 9（中文同步注入，英文动态 `import()` 懒加载） |
+| 样式 | 原生 CSS + CSS 变量令牌（无 UI 框架，零运行时样式依赖） |
+
+Node 版本要求：≥ 18（本项目在 Node 18.19 + npm 9.2 下开发与构建）。
+
+---
+
+## 目录结构
+
+```
+mainPage/
+├── index.html                      # Vite 入口模板
+├── package.json
+├── vite.config.js                  # ★ 构建输出配置（见下「构建与部署」）
+├── .gitignore
+├── README.md                       # 本文件
+├── public/
+│   └── favicon.svg                 # 站点图标
+└── src/
+    ├── main.js                     # 应用入口（挂载 i18n、router、全局样式）
+    ├── App.vue                     # 根布局：顶栏 + 标签导航 + <router-view> + 页脚
+    │
+    ├── i18n/                       # 国际化（懒加载核心）
+    │   ├── index.js                #   i18n 实例；仅同步注入中文；loadLocaleAsync() 动态切语言
+    │   └── locales/
+    │       ├── zh-CN.js            #   中文（默认，打进主 chunk）
+    │       └── en.js               #   英文（动态 import() -> 独立 chunk，切换时才下载）
+    │
+    ├── router/
+    │   └── index.js                # 路由表遍历模块注册表自动生成
+    │
+    ├── modules/                    # ★★★ 扩展点：每个项目一个模块文件夹
+    │   ├── index.js                #   模块注册表（import.meta.glob 约定式收集）
+    │   └── mobile-game/            #   第一个页签：448/449 移动游戏项目
+    │       ├── index.js            #     模块元数据（id / tabKey / order / 懒加载组件）
+    │       ├── MobileGame.vue      #     项目展示主页
+    │       ├── components/
+    │       │   ├── HeroSection.vue       # 顶部项目概览横幅
+    │       │   ├── ScreenshotCarousel.vue# 截图轮播（复用 /448/1..3.jpg）
+    │       │   ├── VersionTimeline.vue   # 版本演进时间线
+    │       │   ├── TeamCard.vue          # 团队成员卡片
+    │       │   └── Leaderboard.vue       # 排行榜（AJAX 调 /449/449rest.php，失败降级）
+    │       └── data/
+    │           ├── versions.js     #     版本数据（448 各版本信息）
+    │           └── team.js         #     团队成员数据
+    │
+    ├── components/                 # 全局共享组件
+    │   ├── TabNav.vue              #   标签页导航（由模块注册表驱动，自动生成页签）
+    │   ├── LanguageSwitcher.vue    #   中/英切换按钮
+    │   └── ui/                     #   基础 UI 基元
+    │       ├── Card.vue
+    │       └── Tag.vue
+    │
+    ├── composables/                # 组合式逻辑
+    │   ├── useProjects.js          #   读取已注册模块列表
+    │   └── useI18nLazy.js          #   语言懒加载切换逻辑
+    │
+    └── styles/
+        ├── variables.css           #   主题令牌（浅色极简：色板/圆角/阴影/间距）
+        └── base.css                #   重置 + 排版基础
+```
+
+---
+
+## 架构要点
+
+### 1. 模块化扩展（高内聚低耦合）
+
+**新增一个项目页签 = 新建 `src/modules/<新项目>/` 文件夹**，无需改动导航或路由代码。
+
+- `src/modules/index.js` 用 `import.meta.glob('./*/index.js', { eager: true })` 约定式收集所有模块。
+- 每个模块 `index.js` 默认导出元数据：
+  ```js
+  export default {
+    id: 'mobile-game',              // 唯一标识，同时作路由 path
+    tabKey: 'tabs.mobileGame',      // i18n 键，页签标题
+    order: 1,                       // 页签排序
+    component: () => import('./MobileGame.vue')  // 懒加载组件
+  }
+  ```
+- `TabNav.vue` 遍历注册表渲染页签；`router/index.js` 遍历注册表生成路由。
+- 模块自包含组件、数据，模块间无直接引用 -> 高内聚低耦合。
+
+### 2. i18n 懒加载（中文页不加载英文资源）
+
+- 创建 i18n 实例时**只同步注入中文** `zh-CN`（随主 chunk 下发）。
+- `en.js` 通过 `() => import('./locales/en.js')` 注册，Vite/Rollup 自动拆成**独立 chunk** `en.[hash].js`。
+- 切换英文时 `useI18nLazy` 先 `await import()` 拉取英文 chunk，`mergeLocaleMessage` 后再切 `locale`。
+- 结果：只看中文的访客**永不请求英文 chunk**；首次切英文才下载，之后切换无网络请求。
+- 构建产物可见 `js/mainPage/en.[hash].js`（约 0.27 KB）独立存在。
+
+### 3. 浅色极简美术
+
+主题令牌集中在 `src/styles/variables.css`：白底 `#fff` / 浅灰面 `#f7f8fa`、单一靛蓝强调色 `#4f46e5`、圆角 12px、柔和阴影、细线边框、充足留白。无深色、无渐变铺底、无霓虹；悬浮微交互克制（轻微上移 + 阴影加深）。
+
+---
+
+## 开发
+
+```bash
+cd /root/zikai/mainPage
+npm install        # 首次安装依赖
+npm run dev        # 启动开发服务器 (http://localhost:5173)
+```
+
+开发服务器配置了代理：`/448`、`/449` 请求转发到 `http://localhost:8080`
+（假设该端口有静态服务器在跑，否则截图/排行榜/视频会 404，但页面其余部分正常）。
+开发时可临时用 `python3 -m http.server 8080 --directory /root/html` 提供这些静态资源。
+
+## 构建与打包
+
+```bash
+npm run build      # 产物输出到 /root/html
+```
+
+### 输出路径与安全策略（`vite.config.js`）
+
+- `build.outDir = '/root/html'`，**`emptyOutDir = false`**（★ 不清空 outDir）。
+  `/root/html` 已含 448/449/旧 js/css 等既有内容，绝不能被构建清空。
+- 用 `mainPage/` 命名空间子目录避免与 `/root/html/js`、`/root/html/css` 旧文件冲突：
+  - JS  -> `js/mainPage/[name].[hash].js`
+  - CSS -> `css/mainPage/[name].[hash].css`
+  - 其他资源 -> `assets/mainPage/[name].[hash][extname]`
+- `base = '/'`，引用既有 448/449 资源用站点根绝对路径（`/448/...`、`/449/...`）。
+
+### 构建产物示例
+
+```
+/root/html/
+├── index.html                       # 入口（Vite 注入 <script>/<link>）
+├── favicon.svg
+├── js/mainPage/
+│   ├── index.[hash].js              # 主 chunk（含 Vue/router/中文 i18n）
+│   ├── MobileGame.[hash].js         # 移动游戏页（懒加载）
+│   └── en.[hash].js                 # 英文语言包（懒加载，仅切英文时下载）
+└── css/mainPage/
+    ├── index.[hash].css             # 全局样式
+    └── MobileGame.[hash].css        # 移动游戏页样式
+```
+
+## 预览构建产物
+
+```bash
+npm run preview     # 本地预览构建后的产物
+```
+
+## 部署
+
+构建产物直接落在站点根 `/root/html`，由 Web 服务器（如 nginx）以 `/root/html` 为根提供静态服务即可。
+注意：当前主机上 nginx 默认 root 为 `/var/www/html`（与 `/root/html` 内容同步）；
+若需以 `/root/html` 为根对外服务，请调整 nginx 的 `root` 指令并启用 nginx。
+主页引用的 `/448/...`、`/449/...` 资源必须能从站点根访问到（448/449 目录本就在 `/root/html` 下）。
+
+---
+
+## 如何新增一个项目页签
+
+1. 复制 `src/modules/mobile-game/` 为 `src/modules/<新项目>/`。
+2. 编辑 `<新项目>/index.js`，改 `id`、`tabKey`、`order`、`component` 指向。
+3. 在 `src/i18n/locales/zh-CN.js` 与 `en.js` 的 `tabs` 下新增对应的 `tabKey` 文案。
+4. 实现模块主组件与子组件（可复用 `components/ui/` 基元）。
+5. `npm run build` -- 页签与路由自动出现，无需改动 `TabNav` 或 `router`。
+
+---
+
+## 已知限制
+
+- 排行榜依赖 `/449/449rest.php`（PHP + MySQL）在线；后端不可用时组件优雅降级显示「服务暂不可用」。
+- 演示视频 `/448/ml/449ml.mp4`（约 34 MB）用 `preload="none"`，点播才加载。
+- 448/449 的 README 总结了既有项目（构建产物，无源码），见各自目录。
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Zikai · 作品集</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "mainpage",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "description": "Zikai 作品集主页 -- Vue3 模块化多项目展示站，中英双语懒加载，浅色极简风格",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0",
+    "vue-i18n": "^9.13.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "vite": "^5.2.0"
+  }
+}
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="14" fill="#ffffff"/>
+  <rect x="1" y="1" width="62" height="62" rx="13" fill="none" stroke="#eceef1" stroke-width="2"/>
+  <path d="M20 44 L32 18 L44 44" fill="none" stroke="#4f46e5" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <line x1="25" y1="36" x2="39" y2="36" stroke="#4f46e5" stroke-width="4.5" stroke-linecap="round"/>
+</svg>
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,113 @@
+<script setup>
+import TabNav from './components/TabNav.vue'
+import LanguageSwitcher from './components/LanguageSwitcher.vue'
+</script>
+
+<template>
+  <div class="app">
+    <header class="topbar">
+      <div class="container topbar__inner">
+        <div class="brand">
+          <span class="brand__mark">Z</span>
+          <span class="brand__title">{{ $t('app.title') }}</span>
+          <span class="brand__sep">·</span>
+          <span class="brand__sub">{{ $t('app.subtitle') }}</span>
+        </div>
+        <LanguageSwitcher />
+      </div>
+    </header>
+
+    <TabNav />
+
+    <main class="main">
+      <RouterView v-slot="{ Component }">
+        <Transition name="fade" mode="out-in">
+          <component :is="Component" />
+        </Transition>
+      </RouterView>
+    </main>
+
+    <footer class="footer">
+      <div class="container footer__inner">
+        <span>© {{ new Date().getFullYear() }} Zikai Wang</span>
+        <span class="footer__dot">·</span>
+        <span>Built with Vue 3</span>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.topbar {
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+}
+.topbar__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.brand__mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 0.95rem;
+  font-weight: 700;
+}
+.brand__sep {
+  color: var(--text-tertiary);
+}
+.brand__sub {
+  color: var(--text-secondary);
+  font-weight: 400;
+  font-size: 0.92rem;
+}
+
+.main {
+  flex: 1;
+}
+
+.footer {
+  border-top: 1px solid var(--border);
+  padding: var(--space-lg) 0;
+  margin-top: var(--space-2xl);
+}
+.footer__inner {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  color: var(--text-tertiary);
+  font-size: 0.85rem;
+}
+.footer__dot {
+  opacity: 0.5;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
--- a/src/components/LanguageSwitcher.vue
+++ b/src/components/LanguageSwitcher.vue
@@ -0,0 +1,58 @@
+<script setup>
+import { useI18nLazy } from '../composables/useI18nLazy.js'
+
+const { current, switching, switchLocale } = useI18nLazy()
+
+const locales = [
+  { code: 'zh-CN', label: '中' },
+  { code: 'en', label: 'EN' }
+]
+</script>
+
+<template>
+  <div class="lang-switch" role="group" aria-label="language">
+    <button
+      v-for="l in locales"
+      :key="l.code"
+      type="button"
+      class="lang-switch__btn"
+      :class="{ 'is-active': current === l.code }"
+      :disabled="switching"
+      @click="switchLocale(l.code)"
+    >
+      {{ l.label }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.lang-switch {
+  display: inline-flex;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  background: var(--surface);
+}
+.lang-switch__btn {
+  padding: 4px 10px;
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  transition: all var(--transition);
+}
+.lang-switch__btn + .lang-switch__btn {
+  border-left: 1px solid var(--border);
+}
+.lang-switch__btn:hover:not(:disabled):not(.is-active) {
+  color: var(--text-primary);
+  background: var(--surface-2);
+}
+.lang-switch__btn.is-active {
+  background: var(--accent);
+  color: #fff;
+}
+.lang-switch__btn:disabled {
+  opacity: 0.6;
+  cursor: progress;
+}
+</style>
--- a/src/components/TabNav.vue
+++ b/src/components/TabNav.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { RouterLink } from 'vue-router'
+import { useProjects } from '../composables/useProjects.js'
+
+const { projects } = useProjects()
+</script>
+
+<template>
+  <nav class="tab-nav">
+    <div class="container tab-nav__inner">
+      <RouterLink
+        v-for="p in projects"
+        :key="p.id"
+        :to="`/${p.id}`"
+        class="tab-nav__item"
+        active-class="is-active"
+      >
+        {{ $t(p.tabKey) }}
+      </RouterLink>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+.tab-nav {
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+.tab-nav__inner {
+  display: flex;
+  gap: var(--space-xs);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.tab-nav__inner::-webkit-scrollbar {
+  display: none;
+}
+.tab-nav__item {
+  position: relative;
+  padding: var(--space-md) var(--space-md);
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: color var(--transition);
+}
+.tab-nav__item:hover {
+  color: var(--text-primary);
+}
+.tab-nav__item.is-active {
+  color: var(--accent);
+}
+.tab-nav__item.is-active::after {
+  content: '';
+  position: absolute;
+  left: var(--space-md);
+  right: var(--space-md);
+  bottom: -1px;
+  height: 2px;
+  background: var(--accent);
+  border-radius: 2px;
+}
+</style>
--- a/src/components/ui/Card.vue
+++ b/src/components/ui/Card.vue
@@ -0,0 +1,28 @@
+<script setup>
+defineProps({
+  hoverable: { type: Boolean, default: false }
+})
+</script>
+
+<template>
+  <div class="card" :class="{ 'card--hover': hoverable }">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.card {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
+  padding: var(--space-lg);
+}
+.card--hover {
+  transition: transform var(--transition), box-shadow var(--transition);
+}
+.card--hover:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-hover);
+}
+</style>
--- a/src/components/ui/Tag.vue
+++ b/src/components/ui/Tag.vue
@@ -0,0 +1,25 @@
+<script setup>
+defineProps({
+  tag: { type: String, default: 'span' }
+})
+</script>
+
+<template>
+  <component :is="tag" class="tag">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--accent);
+  background: var(--accent-weak);
+  border-radius: 999px;
+  line-height: 1.6;
+}
+</style>
--- a/src/composables/useI18nLazy.js
+++ b/src/composables/useI18nLazy.js
@@ -0,0 +1,21 @@
+import { ref } from 'vue'
+import { loadLocaleAsync } from '../i18n/index.js'
+
+const current = ref('zh-CN')
+const switching = ref(false)
+
+// 语言懒加载切换逻辑
+export function useI18nLazy() {
+  async function switchLocale(locale) {
+    if (switching.value || current.value === locale) return
+    switching.value = true
+    try {
+      await loadLocaleAsync(locale)
+      current.value = locale
+    } finally {
+      switching.value = false
+    }
+  }
+
+  return { current, switching, switchLocale }
+}
--- a/src/composables/useProjects.js
+++ b/src/composables/useProjects.js
@@ -0,0 +1,8 @@
+import modules from '../modules/index.js'
+import { ref } from 'vue'
+
+// 读取已注册模块列表，供 TabNav 渲染页签
+export function useProjects() {
+  const projects = ref(modules)
+  return { projects }
+}
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -0,0 +1,49 @@
+import { createI18n } from 'vue-i18n'
+import zhCN from './locales/zh-CN.js'
+
+// ★ 懒加载设计：创建实例时只同步注入中文（默认语言）。
+// 英文 (en.js) 通过 useI18nLazy 中的动态 import() 按需加载，
+// 被 Vite/Rollup 拆成独立 chunk，只看中文的访客永不下载英文资源。
+const i18n = createI18n({
+  legacy: false,
+  locale: 'zh-CN',
+  fallbackLocale: 'zh-CN',
+  messages: {
+    'zh-CN': zhCN
+  }
+})
+
+// 已加载语言集合，避免重复 import
+const loadedLocales = new Set(['zh-CN'])
+
+/**
+ * 懒加载并切换到目标语言。
+ * 首次切换某语言时才动态 import 其语言包并 mergeLocaleMessage，
+ * 之后切换仅在已加载集合内完成（无网络请求）。
+ */
+export async function loadLocaleAsync(locale) {
+  if (i18n.locale.value === locale) return
+  if (loadedLocales.has(locale)) {
+    i18n.locale.value = locale
+    document.documentElement.setAttribute('lang', locale)
+    return
+  }
+
+  let messages
+  if (locale === 'en') {
+    // 动态 import -> 独立 chunk，切换时才下载
+    messages = (await import('./locales/en.js')).default
+  } else {
+    // 未知语言回退到中文
+    i18n.locale.value = 'zh-CN'
+    document.documentElement.setAttribute('lang', 'zh-CN')
+    return
+  }
+
+  i18n.mergeLocaleMessage(locale, messages)
+  loadedLocales.add(locale)
+  i18n.locale.value = locale
+  document.documentElement.setAttribute('lang', locale)
+}
+
+export default i18n
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -0,0 +1,21 @@
+// 英文语言包 -- 通过动态 import() 加载，被打成独立 chunk，
+// 只看中文的访客不会下载此文件。
+export default {
+  app: {
+    title: 'Zikai',
+    subtitle: 'Portfolio',
+    nav: {
+      projects: 'Projects',
+      language: 'Language'
+    }
+  },
+  common: {
+    loading: 'Loading…',
+    comingSoon: 'Coming soon',
+    notAvailable: 'Not available',
+    backToTop: 'Back to top'
+  },
+  tabs: {
+    mobileGame: 'Mobile Game Project'
+  }
+}
--- a/src/i18n/locales/zh-CN.js
+++ b/src/i18n/locales/zh-CN.js
@@ -0,0 +1,20 @@
+// 中文语言包（默认语言，同步注入主 chunk，随首屏下发）
+export default {
+  app: {
+    title: 'Zikai',
+    subtitle: '作品集',
+    nav: {
+      projects: '项目',
+      language: '语言'
+    }
+  },
+  common: {
+    loading: '加载中…',
+    comingSoon: '即将上线',
+    notAvailable: '暂不可用',
+    backToTop: '回到顶部'
+  },
+  tabs: {
+    mobileGame: '移动游戏项目'
+  }
+}
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router/index.js'
+import i18n from './i18n/index.js'
+import './styles/variables.css'
+import './styles/base.css'
+
+const app = createApp(App)
+app.use(i18n)
+app.use(router)
+app.mount('#app')
--- a/src/modules/index.js
+++ b/src/modules/index.js
@@ -0,0 +1,21 @@
+// ★ 模块注册表 -- 扩展点核心
+// 用 import.meta.glob 约定式收集每个子模块的 index.js，
+// 自动生成统一的项目列表。新增项目页签 = 新建 modules/<新项目>/ 文件夹，
+// 无需改动导航/路由代码。
+//
+// 每个模块 index.js 默认导出形如：
+// {
+//   id: 'mobile-game',            // 唯一标识，同时用作路由 path
+//   tabKey: 'tabs.mobileGame',    // i18n 键，用于页签标题
+//   order: 1,                     // 页签排序
+//   component: () => import('./MobileGame.vue')  // 懒加载组件
+// }
+
+const moduleFiles = import.meta.glob('./*/index.js', { eager: true })
+
+const modules = Object.values(moduleFiles)
+  .map((mod) => mod.default)
+  .filter(Boolean)
+  .sort((a, b) => (a.order ?? 99) - (b.order ?? 99))
+
+export default modules
--- a/src/modules/mobile-game/MobileGame.vue
+++ b/src/modules/mobile-game/MobileGame.vue
@@ -0,0 +1,150 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+import HeroSection from './components/HeroSection.vue'
+import ScreenshotCarousel from './components/ScreenshotCarousel.vue'
+import VersionTimeline from './components/VersionTimeline.vue'
+import TeamCard from './components/TeamCard.vue'
+import Leaderboard from './components/Leaderboard.vue'
+
+const { locale } = useI18n()
+const L = (zh, en) => (locale.value === 'zh-CN' ? zh : en)
+// 站点根绝对路径，用绑定避免被 Vite 当作构建期静态资源解析
+const videoPoster = '/448/2.jpg'
+const videoSrc = '/448/ml/449ml.mp4'
+</script>
+
+<template>
+  <div class="mobile-game">
+    <HeroSection />
+
+    <div class="container">
+      <!-- 概览 + 截图轮播 -->
+      <section class="block">
+        <div class="block__grid">
+          <div class="block__text">
+            <h2 class="section-title">
+              <small>{{ L('项目概览', 'Overview') }}</small>
+              {{ L('从角色控制器到陀螺仪滚球', 'From character controller to gyro ball') }}
+            </h2>
+            <p>
+              {{ L(
+                '项目跨越 448 与 449 两门课程。448 用 Unity 开发游戏本体，产出可浏览器试玩的 WebGL 构建与可安装的 Android APK；449 搭建展示网站与基于 PHP+MySQL 的玩家分数排行榜。主要贡献者 Zikai Wang（zikai-ui / main / Roll-a-Ball 系列）与 Hongxiang He（2D DobyAdventure）。',
+                'The project spans courses 448 and 449. 448 built the game with Unity, producing browser-playable WebGL builds and installable Android APKs; 449 built the showcase site and a PHP+MySQL player leaderboard. Main contributors: Zikai Wang (zikai-ui / main / Roll-a-Ball series) and Hongxiang He (2D DobyAdventure).'
+              ) }}
+            </p>
+            <p>
+              {{ L(
+                '玩法经过多版本迭代：早期是键盘控制生命/能量的角色控制器，最终版改为手机陀螺仪倾斜操控的 3D 滚球，含雪花砖掉落、黄色砖弹跳等机制。还用 Unity ML-Agents 做了强化学习实验。',
+                'Gameplay iterated across versions: early builds were keyboard-controlled character controllers with health/power stats; the final version became a gyroscope-tilt 3D rolling-ball game with falling snowflake bricks and bouncing yellow bricks. ML-Agents reinforcement-learning experiments were also conducted.'
+              ) }}
+            </p>
+          </div>
+          <div class="block__media">
+            <ScreenshotCarousel />
+          </div>
+        </div>
+      </section>
+
+      <!-- 版本时间线 -->
+      <section class="block">
+        <h2 class="section-title">
+          <small>{{ L('版本演进', 'Version History') }}</small>
+          {{ L('迭代记录', 'Iteration Record') }}
+        </h2>
+        <VersionTimeline />
+      </section>
+
+      <!-- 双列：团队 + 排行榜 -->
+      <section class="block block--two">
+        <div>
+          <h2 class="section-title">
+            <small>{{ L('团队', 'Team') }}</small>
+            {{ L('成员', 'Members') }}
+          </h2>
+          <TeamCard />
+        </div>
+        <div>
+          <h2 class="section-title">
+            <small>{{ L('排行榜', 'Leaderboard') }}</small>
+            {{ L('玩家分数 Top 30', 'Top 30 Scores') }}
+          </h2>
+          <Leaderboard />
+        </div>
+      </section>
+
+      <!-- ML-Agents 演示视频 -->
+      <section class="block">
+        <h2 class="section-title">
+          <small>{{ L('实验', 'Experiment') }}</small>
+          {{ L('ML-Agents 强化学习演示', 'ML-Agents Reinforcement Learning Demo') }}
+        </h2>
+        <div class="video-wrap">
+          <video controls preload="none" :poster="videoPoster">
+            <source :src="videoSrc" type="video/mp4" />
+          </video>
+          <p class="video-caption">
+            {{ L('胶囊体经 ML-Agents 训练，学习保球不掉与越障。', 'Capsules trained via ML-Agents to keep the ball from falling and to navigate obstacles.') }}
+          </p>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mobile-game {
+  padding-bottom: var(--space-2xl);
+}
+.block {
+  padding: var(--space-xl) 0;
+  border-bottom: 1px solid var(--border);
+}
+.block:last-child {
+  border-bottom: none;
+}
+.block__grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-xl);
+  align-items: start;
+}
+.block__text p {
+  margin-bottom: var(--space-md);
+}
+.block__text p:last-child {
+  margin-bottom: 0;
+}
+.block--two {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-xl);
+  align-items: start;
+}
+
+.video-wrap {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: var(--surface);
+  box-shadow: var(--shadow-sm);
+}
+.video-wrap video {
+  width: 100%;
+  display: block;
+  aspect-ratio: 16 / 9;
+  background: #000;
+}
+.video-caption {
+  padding: var(--space-md) var(--space-lg);
+  font-size: 0.88rem;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .block__grid,
+  .block--two {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
--- a/src/modules/mobile-game/components/HeroSection.vue
+++ b/src/modules/mobile-game/components/HeroSection.vue
@@ -0,0 +1,84 @@
+<script setup>
+import Tag from '../../../components/ui/Tag.vue'
+import { useI18n } from 'vue-i18n'
+
+const { locale } = useI18n()
+
+const meta = {
+  course: { zh: '迈阿密大学 · 毕设 448 / 449', en: 'Miami University · Capstone 448 / 449' },
+  stack: { zh: 'Unity · C# · WebGL · Android · PHP', en: 'Unity · C# · WebGL · Android · PHP' },
+  period: { zh: '2022', en: '2022' },
+  role: { zh: '主开发', en: 'Lead Developer' }
+}
+</script>
+
+<template>
+  <section class="hero">
+    <div class="container">
+      <div class="hero__eyebrow">
+        <Tag>{{ locale === 'zh-CN' ? meta.course.zh : meta.course.en }}</Tag>
+      </div>
+      <h1 class="hero__title">
+        {{ $t('tabs.mobileGame') }}
+      </h1>
+      <p class="hero__desc">
+        {{ locale === 'zh-CN'
+          ? '一个跨学期的 Unity 移动游戏毕设项目：448 开发游戏本体（WebGL + Android APK），449 搭建展示网站与玩家排行榜。经历多版本迭代，从角色控制器演进到陀螺仪操控的 3D 滚球游戏，并尝试用 ML-Agents 做强化学习实验。'
+          : 'A cross-semester Unity mobile-game capstone: 448 built the game (WebGL + Android APK), 449 built the showcase site and player leaderboard. Iterated across versions, from a character controller to a gyroscope-controlled 3D rolling-ball game, with ML-Agents reinforcement-learning experiments.' }}
+      </p>
+      <div class="hero__meta">
+        <div class="hero__meta-item">
+          <span class="hero__meta-label">{{ locale === 'zh-CN' ? '技术栈' : 'Stack' }}</span>
+          <span>{{ locale === 'zh-CN' ? meta.stack.zh : meta.stack.en }}</span>
+        </div>
+        <div class="hero__meta-item">
+          <span class="hero__meta-label">{{ locale === 'zh-CN' ? '时间' : 'Period' }}</span>
+          <span>{{ meta.period }}</span>
+        </div>
+        <div class="hero__meta-item">
+          <span class="hero__meta-label">{{ locale === 'zh-CN' ? '角色' : 'Role' }}</span>
+          <span>{{ locale === 'zh-CN' ? meta.role.zh : meta.role.en }}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.hero {
+  padding: var(--space-2xl) 0 var(--space-xl);
+  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
+  border-bottom: 1px solid var(--border);
+}
+.hero__eyebrow {
+  margin-bottom: var(--space-md);
+}
+.hero__title {
+  font-size: 2.3rem;
+  margin-bottom: var(--space-md);
+}
+.hero__desc {
+  max-width: 720px;
+  font-size: 1.02rem;
+  color: var(--text-secondary);
+  margin-bottom: var(--space-lg);
+}
+.hero__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xl);
+}
+.hero__meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 0.92rem;
+  color: var(--text-primary);
+}
+.hero__meta-label {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-tertiary);
+}
+</style>
--- a/src/modules/mobile-game/components/Leaderboard.vue
+++ b/src/modules/mobile-game/components/Leaderboard.vue
@@ -0,0 +1,130 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { locale, t } = useI18n()
+
+const rows = ref([])
+const state = ref('loading') // loading | ok | error
+const errorMsg = ref('')
+
+// 复用 449 现有后端：POST /449/449rest.php {num} 取分页 JSON
+async function load() {
+  state.value = 'loading'
+  try {
+    const all = []
+    // 拉取 3 页（每页 10 条，共 top30）
+    for (let page = 0; page < 3; page++) {
+      const res = await fetch('/449/449rest.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: `num=${page * 10}`
+      })
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const data = await res.json()
+      // data 形如 { "1": ["name", score], ... }
+      Object.keys(data).forEach((k) => {
+        const entry = data[k]
+        all.push({ rank: all.length + 1, name: entry[0], score: entry[1] })
+      })
+    }
+    rows.value = all
+    state.value = all.length ? 'ok' : 'error'
+    if (!all.length) errorMsg.value = locale.value === 'zh-CN' ? '暂无分数记录' : 'No scores yet'
+  } catch (e) {
+    state.value = 'error'
+    errorMsg.value = locale.value === 'zh-CN'
+      ? '排行榜服务暂不可用'
+      : 'Leaderboard service unavailable'
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="leaderboard">
+    <div v-if="state === 'loading'" class="leaderboard__state">
+      {{ $t('common.loading') }}
+    </div>
+
+    <div v-else-if="state === 'error'" class="leaderboard__state leaderboard__state--error">
+      {{ errorMsg }}
+    </div>
+
+    <table v-else class="leaderboard__table">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>{{ locale === 'zh-CN' ? '玩家' : 'Name' }}</th>
+          <th>{{ locale === 'zh-CN' ? '分数' : 'Score' }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="r in rows" :key="r.rank" :class="{ 'is-top': r.rank <= 3 }">
+          <td class="leaderboard__rank">{{ r.rank }}</td>
+          <td class="leaderboard__name">{{ r.name }}</td>
+          <td class="leaderboard__score">{{ r.score }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.leaderboard {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: var(--bg);
+}
+.leaderboard__state {
+  padding: var(--space-xl);
+  text-align: center;
+  color: var(--text-secondary);
+}
+.leaderboard__state--error {
+  color: var(--text-tertiary);
+  font-size: 0.9rem;
+}
+.leaderboard__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.92rem;
+}
+.leaderboard__table th {
+  text-align: left;
+  padding: var(--space-sm) var(--space-md);
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  font-weight: 600;
+  color: var(--text-secondary);
+  font-size: 0.82rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.leaderboard__table td {
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 1px solid var(--border);
+  color: var(--text-primary);
+}
+.leaderboard__table tbody tr:last-child td {
+  border-bottom: none;
+}
+.leaderboard__table tbody tr:hover {
+  background: var(--surface);
+}
+.leaderboard__rank {
+  width: 50px;
+  font-family: var(--font-mono);
+  color: var(--text-tertiary);
+}
+tr.is-top .leaderboard__rank {
+  color: var(--accent);
+  font-weight: 600;
+}
+.leaderboard__score {
+  font-family: var(--font-mono);
+  text-align: right;
+}
+</style>
--- a/src/modules/mobile-game/components/ScreenshotCarousel.vue
+++ b/src/modules/mobile-game/components/ScreenshotCarousel.vue
@@ -0,0 +1,130 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { screenshots } from '../data/versions.js'
+
+const { locale } = useI18n()
+const current = ref(0)
+let timer = null
+
+function go(i) {
+  current.value = (i + screenshots.length) % screenshots.length
+}
+function next() {
+  go(current.value + 1)
+}
+function pause() {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+function resume() {
+  if (!timer) timer = setInterval(next, 5000)
+}
+
+onMounted(resume)
+onUnmounted(pause)
+</script>
+
+<template>
+  <div class="carousel" @mouseenter="pause" @mouseleave="resume">
+    <div class="carousel__viewport">
+      <div class="carousel__track" :style="{ transform: `translateX(-${current * 100}%)` }">
+        <figure v-for="(s, i) in screenshots" :key="i" class="carousel__slide">
+          <img :src="s.src" :alt="locale === 'zh-CN' ? s.caption.zh : s.caption.en" loading="lazy" />
+        </figure>
+      </div>
+    </div>
+
+    <button class="carousel__btn carousel__btn--prev" @click="go(current - 1)" aria-label="prev">‹</button>
+    <button class="carousel__btn carousel__btn--next" @click="go(current + 1)" aria-label="next">›</button>
+
+    <div class="carousel__dots">
+      <button
+        v-for="(s, i) in screenshots"
+        :key="i"
+        class="carousel__dot"
+        :class="{ 'is-active': i === current }"
+        @click="go(i)"
+        :aria-label="`slide ${i + 1}`"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.carousel {
+  position: relative;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: var(--surface);
+  box-shadow: var(--shadow);
+}
+.carousel__viewport {
+  overflow: hidden;
+  aspect-ratio: 4 / 3;
+}
+.carousel__track {
+  display: flex;
+  height: 100%;
+  transition: transform 0.5s ease;
+}
+.carousel__slide {
+  flex: 0 0 100%;
+  height: 100%;
+  margin: 0;
+}
+.carousel__slide img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.carousel__btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
+  font-size: 1.3rem;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow);
+  transition: all var(--transition);
+}
+.carousel__btn:hover {
+  background: #fff;
+}
+.carousel__btn--prev { left: 12px; }
+.carousel__btn--next { right: 12px; }
+
+.carousel__dots {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 6px;
+}
+.carousel__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid var(--border);
+  transition: all var(--transition);
+}
+.carousel__dot.is-active {
+  background: var(--accent);
+  border-color: var(--accent);
+  width: 22px;
+  border-radius: 4px;
+}
+</style>
--- a/src/modules/mobile-game/components/TeamCard.vue
+++ b/src/modules/mobile-game/components/TeamCard.vue
@@ -0,0 +1,64 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { team } from '../data/team.js'
+
+const { locale } = useI18n()
+const L = (obj) => (locale.value === 'zh-CN' ? obj.zh : obj.en)
+</script>
+
+<template>
+  <div class="team">
+    <div v-for="m in team" :key="m.name" class="team__card">
+      <div class="team__avatar">{{ m.name.charAt(0) }}</div>
+      <div class="team__info">
+        <div class="team__name">{{ m.name }}</div>
+        <div class="team__role">{{ L(m.role) }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.team {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--space-md);
+}
+.team__card {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
+  transition: transform var(--transition), box-shadow var(--transition);
+}
+.team__card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-hover);
+}
+.team__avatar {
+  flex: 0 0 40px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--accent-weak);
+  color: var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 1.05rem;
+}
+.team__name {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--text-primary);
+}
+.team__role {
+  font-size: 0.82rem;
+  color: var(--text-tertiary);
+}
+</style>
--- a/src/modules/mobile-game/components/VersionTimeline.vue
+++ b/src/modules/mobile-game/components/VersionTimeline.vue
@@ -0,0 +1,141 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { versions } from '../data/versions.js'
+
+const { locale } = useI18n()
+const L = (obj) => (locale.value === 'zh-CN' ? obj.zh : obj.en)
+</script>
+
+<template>
+  <div class="timeline">
+    <div
+      v-for="(v, i) in versions"
+      :key="v.id"
+      class="timeline__item"
+    >
+      <div class="timeline__marker">
+        <span class="timeline__dot"></span>
+        <span v-if="i < versions.length - 1" class="timeline__line"></span>
+      </div>
+
+      <div class="timeline__body">
+        <div class="timeline__head">
+          <span class="timeline__series">{{ v.series }}</span>
+          <span class="timeline__version">v{{ v.version }}</span>
+        </div>
+        <div class="timeline__product">{{ v.product }}</div>
+        <div class="timeline__row">
+          <span class="timeline__label">{{ locale === 'zh-CN' ? '操作' : 'Controls' }}</span>
+          <span>{{ L(v.control) }}</span>
+        </div>
+        <div class="timeline__row">
+          <span class="timeline__label">{{ locale === 'zh-CN' ? '说明' : 'Note' }}</span>
+          <span>{{ L(v.note) }}</span>
+        </div>
+        <div class="timeline__row">
+          <span class="timeline__label">Unity</span>
+          <span class="timeline__mono">{{ v.unity }}</span>
+        </div>
+        <div class="timeline__links">
+          <a v-if="v.webgl" :href="v.webgl" target="_blank" rel="noopener">
+            {{ locale === 'zh-CN' ? 'WebGL 试玩' : 'Play WebGL' }} ↗
+          </a>
+          <a v-if="v.apk" :href="v.apk" target="_blank" rel="noopener">
+            {{ locale === 'zh-CN' ? '下载 APK' : 'Download APK' }} ↗
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.timeline {
+  position: relative;
+}
+.timeline__item {
+  display: flex;
+  gap: var(--space-md);
+  padding-bottom: var(--space-lg);
+}
+.timeline__marker {
+  position: relative;
+  flex: 0 0 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 4px;
+}
+.timeline__dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--bg);
+  border: 2px solid var(--accent);
+  flex: 0 0 12px;
+}
+.timeline__line {
+  flex: 1;
+  width: 2px;
+  background: var(--border);
+  margin-top: 4px;
+  min-height: 24px;
+}
+.timeline__body {
+  flex: 1;
+  padding: var(--space-md) var(--space-lg);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow var(--transition);
+}
+.timeline__body:hover {
+  box-shadow: var(--shadow);
+}
+.timeline__head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-sm);
+  margin-bottom: 2px;
+}
+.timeline__series {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 1.02rem;
+}
+.timeline__version {
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  color: var(--accent);
+  background: var(--accent-weak);
+  padding: 1px 8px;
+  border-radius: 6px;
+}
+.timeline__product {
+  font-size: 0.85rem;
+  color: var(--text-tertiary);
+  margin-bottom: var(--space-sm);
+}
+.timeline__row {
+  display: flex;
+  gap: var(--space-sm);
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  padding: 2px 0;
+}
+.timeline__label {
+  flex: 0 0 48px;
+  color: var(--text-tertiary);
+  font-size: 0.82rem;
+}
+.timeline__mono {
+  font-family: var(--font-mono);
+}
+.timeline__links {
+  display: flex;
+  gap: var(--space-md);
+  margin-top: var(--space-sm);
+  font-size: 0.88rem;
+}
+</style>
--- a/src/modules/mobile-game/data/team.js
+++ b/src/modules/mobile-game/data/team.js
@@ -0,0 +1,8 @@
+// 团队成员（来自 449 展示页）
+export const team = [
+  { name: 'Zikai Wang', role: { zh: '主开发', en: 'Lead Developer' } },
+  { name: 'Hongxiang He', role: { zh: '开发', en: 'Developer' } },
+  { name: 'Zhuoyue Sun', role: { zh: '团队', en: 'Team' } },
+  { name: 'Xingchen Zhou', role: { zh: '团队', en: 'Team' } },
+  { name: 'Yidong Yao', role: { zh: '团队', en: 'Team' } }
+]
--- a/src/modules/mobile-game/data/versions.js
+++ b/src/modules/mobile-game/data/versions.js
@@ -0,0 +1,98 @@
+// 448 各版本数据（来自对构建产物与 index.html 的分析）
+export const versions = [
+  {
+    id: 'zikai-0.0.0',
+    series: 'zikai-ui',
+    version: '0.0.0',
+    unity: '—',
+    product: 'My project / 1.0.2',
+    webgl: '/448/zikai-0.0.0/',
+    apk: null,
+    control: { zh: '鼠标左键操作、右键追踪', en: 'Left mouse: operate, Right mouse: track' },
+    note: { zh: '早期鼠标控制原型', en: 'Early mouse-controlled prototype' }
+  },
+  {
+    id: 'zikai-0.0.1',
+    series: 'zikai-ui',
+    version: '0.0.1',
+    unity: '2020.3.30f1',
+    product: 'zikai-ui / 1.0.2',
+    webgl: '/448/zikai-0.0.1/',
+    apk: '/448/zikai-0.0.1/zikai.apk',
+    control: { zh: '生命 Q/W/E/R、能量 A/S/D/F', en: 'Health Q/W/E/R, Power A/S/D/F' },
+    note: { zh: '引入生命/能量属性系统', en: 'Introduced health/power stat system' }
+  },
+  {
+    id: 'zikai-0.0.2',
+    series: 'zikai-ui',
+    version: '0.0.2',
+    unity: '2020.3.30f1',
+    product: 'zikai-ui / 1.0.2',
+    webgl: '/448/zikai-0.0.2/',
+    apk: '/448/zikai-0.0.2/zikai.apk',
+    control: { zh: '同 0.0.1', en: 'Same as 0.0.1' },
+    note: { zh: '构建产物重命名整理', en: 'Build artifact renaming' }
+  },
+  {
+    id: 'zikai-0.0.3',
+    series: 'zikai-ui',
+    version: '0.0.3',
+    unity: '2020.3.30f1',
+    product: 'zikai-ui / 1.0.2.5',
+    webgl: '/448/zikai-0.0.3/',
+    apk: '/448/zikai-0.0.3/zikai.apk',
+    control: { zh: 'WASD 移动、J 跳跃、K 飞行(测试)', en: 'WASD move, J jump, K fly (testing)' },
+    note: { zh: '改为 WASD 操作，最新版', en: 'Switched to WASD, latest version' }
+  },
+  {
+    id: 'main-0.0.0',
+    series: 'main',
+    version: '0.0.0',
+    unity: '2020.3.30f1',
+    product: 'zikai-main / 1.0.2.6',
+    webgl: '/448/main-0.0.0/',
+    apk: '/448/main-0.0.0.apk',
+    control: { zh: '角色控制器', en: 'Character controller' },
+    note: { zh: '基线版本', en: 'Baseline' }
+  },
+  {
+    id: 'main-0.0.1',
+    series: 'main',
+    version: '0.0.1',
+    unity: '2021.3.12f1',
+    product: 'beta / 1.0.2',
+    webgl: '/448/main-0.0.1/',
+    apk: '/448/main-0.0.1/zikai.apk',
+    control: { zh: 'WASD 移动、K 跳跃', en: 'WASD move, K jump' },
+    note: { zh: '升级 Unity，新增屏幕按键', en: 'Upgraded Unity, added on-screen buttons' }
+  },
+  {
+    id: 'ball',
+    series: 'roll-a-ball',
+    version: '0.0.2',
+    unity: '2021.3.12f1',
+    product: '3dRoingBallt2 / 0.0.2',
+    webgl: '/448/ball/',
+    apk: '/448/203wangz199.apk',
+    control: { zh: '手机陀螺仪倾斜移动、上倾/点击跳跃', en: 'Tilt phone to move, tilt up/tap to jump' },
+    note: { zh: '最终版本，3D 滚球', en: 'Final version, 3D rolling ball' }
+  },
+  {
+    id: 'hongXiang-0.0.0',
+    series: 'doby',
+    version: '0.0.0',
+    unity: '2021.2.10f1',
+    product: 'DobyAdventure',
+    webgl: null,
+    apk: '/448/hongXiang-0.0.0/2D game.apk',
+    control: { zh: 'A/D 移动、跳跃、吃金币', en: 'A/D move, jump, collect coins' },
+    note: { zh: '2D 平台跳跃（Hongxiang He）', en: '2D platformer (Hongxiang He)' }
+  }
+]
+
+// 截图（复用 448 现有图片）
+export const screenshots = [
+  { src: '/448/1.jpg', caption: { zh: '项目截图 1', en: 'Screenshot 1' } },
+  { src: '/448/2.jpg', caption: { zh: '项目截图 2', en: 'Screenshot 2' } },
+  { src: '/448/3.jpg', caption: { zh: '项目截图 3', en: 'Screenshot 3' } }
+]
--- a/src/modules/mobile-game/index.js
+++ b/src/modules/mobile-game/index.js
@@ -0,0 +1,8 @@
+// 模块元数据 -- 模块注册表据此自动生成页签与路由
+export default {
+  id: 'mobile-game',
+  tabKey: 'tabs.mobileGame',
+  order: 1,
+  // 懒加载组件 -> 独立 chunk
+  component: () => import('./MobileGame.vue')
+}
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,32 @@
+// 路由表由模块注册表动态生成 -- 新增模块自动产生路由，无需手改。
+import { createRouter, createWebHistory } from 'vue-router'
+import modules from '../modules/index.js'
+
+const routes = [
+  {
+    path: '/',
+    redirect: modules.length ? `/${modules[0].id}` : '/404'
+  },
+  // 每个模块一条路由，组件懒加载
+  ...modules.map((m) => ({
+    path: `/${m.id}`,
+    name: m.id,
+    component: m.component,
+    meta: { moduleId: m.id }
+  })),
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'not-found',
+    redirect: '/'
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+  scrollBehavior() {
+    return { top: 0 }
+  }
+})
+
+export default router
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -0,0 +1,91 @@
+/* 重置 + 排版基础 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg);
+  color: var(--text-primary);
+  line-height: 1.65;
+  font-size: 15px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: color var(--transition);
+}
+a:hover {
+  color: var(--accent-hover);
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+h1, h2, h3, h4 {
+  line-height: 1.3;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+h1 { font-size: 1.9rem; letter-spacing: -0.01em; }
+h2 { font-size: 1.4rem; letter-spacing: -0.01em; }
+h3 { font-size: 1.1rem; }
+
+p { color: var(--text-secondary); }
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+ul { list-style: none; padding: 0; }
+
+/* 容器 */
+.container {
+  max-width: var(--content-max);
+  margin: 0 auto;
+  padding: 0 var(--space-lg);
+}
+
+/* 区块标题 */
+.section-title {
+  margin-bottom: var(--space-md);
+}
+.section-title small {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: var(--space-xs);
+}
+
+/* 减弱动效偏好 */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -0,0 +1,52 @@
+/* 浅色极简主题令牌 */
+:root {
+  /* 背景/表面 */
+  --bg: #ffffff;
+  --surface: #f7f8fa;
+  --surface-2: #f0f2f5;
+
+  /* 文字 */
+  --text-primary: #1f2329;
+  --text-secondary: #6b7280;
+  --text-tertiary: #9ca3af;
+
+  /* 强调色（单一靛蓝） */
+  --accent: #4f46e5;
+  --accent-weak: #eef2ff;
+  --accent-hover: #4338ca;
+
+  /* 线/边 */
+  --border: #eceef1;
+  --border-strong: #e0e2e6;
+
+  /* 圆角 */
+  --radius-sm: 8px;
+  --radius: 12px;
+  --radius-lg: 16px;
+
+  /* 柔和阴影 */
+  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04);
+  --shadow: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
+  --shadow-hover: 0 6px 16px rgba(17, 24, 39, 0.08), 0 2px 6px rgba(17, 24, 39, 0.05);
+
+  /* 间距尺度 */
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 40px;
+  --space-2xl: 64px;
+
+  /* 内容宽度 */
+  --content-max: 1080px;
+
+  /* 字体 */
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
+
+  /* 过渡 */
+  --transition: 0.18s ease;
+}
+
+/* 深色模式预留（暂不启用，保持浅色极简） */
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,42 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// 构建产物输出到站点根 /root/html，但绝不清空该目录
+// （里面已有 448/449/js/css 等既有内容）。
+// 用 mainPage/ 命名空间子目录避免与 /root/html/js、/root/html/css 旧文件冲突。
+export default defineConfig({
+  plugins: [vue()],
+  base: '/',
+  build: {
+    outDir: '/root/html',
+    // ★ 安全项：不清空 outDir，保护既有文件
+    emptyOutDir: false,
+    rollupOptions: {
+      output: {
+        entryFileNames: 'js/mainPage/[name].[hash].js',
+        chunkFileNames: 'js/mainPage/[name].[hash].js',
+        assetFileNames: (assetInfo) => {
+          const name = assetInfo.name || ''
+          if (name.endsWith('.css')) {
+            return 'css/mainPage/[name].[hash][extname]'
+          }
+          return 'assets/mainPage/[name].[hash][extname]'
+        }
+      }
+    }
+  },
+  server: {
+    // 开发服务器把站点根的静态资源代理到 /root/html，方便引用 /448 /449 等
+    port: 5173,
+    proxy: {
+      '/448': {
+        target: 'http://localhost:8080',
+        changeOrigin: true
+      },
+      '/449': {
+        target: 'http://localhost:8080',
+        changeOrigin: true
+      }
+    }
+  }
+})