refactor: 高内聚低耦合 - 配置集中化与 i18n 统一

结构优化： - 新增 mobile-game/config.js：集中模块静态配置（资源路径、排行榜端点、 hero meta、子标签页定义），消除散落在各组件的硬编码 - 新增 composables/useLocale.js：共享语言辅助(t/isZh/pick)，消除 6 个组件各自重复定义的 L() helper - 文案全部迁入 i18n locale（mobileGame 命名空间），消除模板内联 L('中','英') - 数据文件 versions.js 去除 {zh,en} 对象，文案改由 i18n 键(tracks/versions)取 - 各组件改为读 config + t()，不再直接 useI18n，降低与 i18n 实现的耦合 headless 验证：中文(hero/meta/team/timeline/3D置顶) + 英文切换 + 切回中文全通过
2026-07-12 16:08:25 +00:00
parent b3556b8639
commit c6dad2b79a
14 changed files with 341 additions and 273 deletions
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -2,19 +2,96 @@
 // 只看中文的访客不会下载此文件。
 export default {
  app: {
-    title: 'Zikai',
-    nav: {
-      projects: 'Projects',
-      language: 'Language'
-    }
+    title: 'Zikai'
  },
  common: {
    loading: 'Loading…',
-    comingSoon: 'Coming soon',
-    notAvailable: 'Not available',
-    backToTop: 'Back to top'
+    notAvailable: 'Not available'
  },
  tabs: {
    mobileGame: 'Mobile Game Project'
+  },
+  mobileGame: {
+    hero: {
+      title: 'Mobile Game Project',
+      desc: '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.'
+    },
+    meta: {
+      course: 'Miami University · Capstone 448 / 449',
+      stack: 'Stack',
+      stackValue: 'Unity · C# · WebGL · Android · PHP',
+      period: 'Period',
+      periodValue: '2022'
+    },
+    overview: {
+      label: 'Overview',
+      title: 'From character controller to gyro ball',
+      p1: '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. The game evolved along several parallel lines, from 2D character controllers and platformers, ultimately shifting to a gyroscope-controlled 3D rolling ball, with ML-Agents reinforcement-learning experiments.',
+      p2: 'Gameplay iterated across versions: early builds were keyboard-controlled 2D 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.'
+    },
+    subtabs: {
+      team: 'Team · Leaderboard',
+      iterations: 'Iterations',
+      experiment: 'Experiment'
+    },
+    team: {
+      label: 'Team',
+      title: 'Members'
+    },
+    leaderboard: {
+      label: 'Leaderboard',
+      title: 'Top 30 Scores',
+      colRank: '#',
+      colName: 'Name',
+      colScore: 'Score',
+      noScores: 'No scores yet',
+      error: 'Leaderboard service unavailable'
+    },
+    iterations: {
+      label: 'Version History',
+      title: 'Iteration Record',
+      colControls: 'Controls',
+      colNote: 'Note',
+      colUnity: 'Unity',
+      playWebgl: 'Play WebGL',
+      downloadApk: 'Download APK',
+      pivotText: 'Earlier parallel lines: 2D'
+    },
+    experiment: {
+      label: 'Experiment',
+      title: 'ML-Agents Reinforcement Learning Demo',
+      caption: 'Capsules trained via ML-Agents to keep the ball from falling and to navigate obstacles.'
+    },
+    tracks: {
+      'roll-a-ball': {
+        name: '3D Rolling Ball (Final Form)',
+        desc: 'The final form as the project shifted from 2D to 3D. Tilt the phone to roll the ball; snowflake bricks fall, yellow bricks bounce.'
+      },
+      'zikai-ui': {
+        name: 'zikai-ui Character Controller',
+        desc: 'The most iterated line. A 2D character with health/power stats; controls evolved from mouse, QWER/ASDF keys, finally to WASD.'
+      },
+      'main': {
+        name: 'main Character Controller',
+        desc: '2D character controller; upgraded Unity 2020 -> 2021, added on-screen buttons and jump.'
+      },
+      'doby': {
+        name: 'DobyAdventure',
+        desc: '2D side-scrolling platformer: collect coins, score, health, touch joystick.'
+      }
+    },
+    versions: {
+      'zikai-0.0.0': { control: 'Left mouse: operate, Right mouse: track', note: 'Early mouse-controlled prototype' },
+      'zikai-0.0.1': { control: 'Health Q/W/E/R, Power A/S/D/F', note: 'Introduced health/power stat system' },
+      'zikai-0.0.2': { control: 'Same as 0.0.1', note: 'Build artifact renaming' },
+      'zikai-0.0.3': { control: 'WASD move, J jump, K fly (testing)', note: 'Switched to WASD, latest of this line' },
+      'main-0.0.0': { control: 'Character controller', note: 'Baseline' },
+      'main-0.0.1': { control: 'WASD move, K jump', note: 'Upgraded Unity, added on-screen buttons' },
+      'hongXiang-0.0.0': { control: 'A/D move, jump, collect coins', note: '2D platformer' },
+      'ball': { control: 'Tilt phone to move, tilt up/tap to jump', note: 'Final version, project shifted to 3D rolling ball' }
+    },
+    screenshots: {
+      caption: 'Screenshot {n}'
+    }
  }
 }
--- a/src/i18n/locales/zh-CN.js
+++ b/src/i18n/locales/zh-CN.js
@@ -1,19 +1,98 @@
 // 中文语言包（默认语言，同步注入主 chunk，随首屏下发）
 export default {
  app: {
-    title: 'Zikai',
-    nav: {
-      projects: '项目',
-      language: '语言'
-    }
+    title: 'Zikai'
  },
  common: {
    loading: '加载中…',
-    comingSoon: '即将上线',
-    notAvailable: '暂不可用',
-    backToTop: '回到顶部'
+    notAvailable: '暂不可用'
  },
  tabs: {
    mobileGame: '移动游戏项目'
+  },
+  mobileGame: {
+    hero: {
+      title: '移动游戏项目',
+      desc: '一个跨学期的 Unity 移动游戏毕设项目：448 开发游戏本体（WebGL + Android APK），449 搭建展示网站与玩家排行榜。经历多版本迭代，从角色控制器演进到陀螺仪操控的 3D 滚球游戏，并尝试用 ML-Agents 做强化学习实验。'
+    },
+    meta: {
+      course: '迈阿密大学 · 毕设 448 / 449',
+      stack: '技术栈',
+      stackValue: 'Unity · C# · WebGL · Android · PHP',
+      period: '时间',
+      periodValue: '2022'
+    },
+    overview: {
+      label: '项目概览',
+      title: '从角色控制器到陀螺仪滚球',
+      p1: '项目跨越 448 与 449 两门课程。448 用 Unity 开发游戏本体，产出可浏览器试玩的 WebGL 构建与可安装的 Android APK；449 搭建展示网站与基于 PHP+MySQL 的玩家分数排行榜。游戏经历多条并行演进线，从 2D 角色控制器与平台跳跃，最终转向手机陀螺仪操控的 3D 滚球，并尝试用 ML-Agents 做强化学习实验。',
+      p2: '玩法经过多版本迭代：早期是键盘控制生命/能量的 2D 角色控制器，最终版改为手机陀螺仪倾斜操控的 3D 滚球，含雪花砖掉落、黄色砖弹跳等机制。'
+    },
+    subtabs: {
+      team: '团队 · 排行榜',
+      iterations: '迭代记录',
+      experiment: '实验'
+    },
+    team: {
+      label: '团队',
+      title: '成员'
+    },
+    leaderboard: {
+      label: '排行榜',
+      title: '玩家分数 Top 30',
+      colRank: '#',
+      colName: '玩家',
+      colScore: '分数',
+      noScores: '暂无分数记录',
+      error: '排行榜服务暂不可用'
+    },
+    iterations: {
+      label: '版本演进',
+      title: '迭代记录',
+      colControls: '操作',
+      colNote: '说明',
+      colUnity: 'Unity',
+      playWebgl: 'WebGL 试玩',
+      downloadApk: '下载 APK',
+      pivotText: '早期并行演进：2D 线'
+    },
+    experiment: {
+      label: '实验',
+      title: 'ML-Agents 强化学习演示',
+      caption: '胶囊体经 ML-Agents 训练，学习保球不掉与越障。'
+    },
+    // 版本演进线与版本数据中的可翻译文案
+    tracks: {
+      'roll-a-ball': {
+        name: '3D 滚球（最终形态）',
+        desc: '项目从 2D 转向 3D 的最终形态。手机陀螺仪倾斜操控滚球，含雪花砖掉落、黄色砖弹跳等机制。'
+      },
+      'zikai-ui': {
+        name: 'zikai-ui 角色控制器',
+        desc: '迭代次数最多的线。2D 角色带生命/能量属性，操作方式从鼠标、QWER/ASDF 键盘最终改为 WASD。'
+      },
+      'main': {
+        name: 'main 角色控制器',
+        desc: '2D 角色控制器，从 Unity 2020 升级到 2021，新增屏幕按键与跳跃。'
+      },
+      'doby': {
+        name: 'DobyAdventure',
+        desc: '2D 横版平台跳跃，吃金币、计分、血量、触屏摇杆。'
+      }
+    },
+    // 各版本的操作与说明文案（key = 版本 id）
+    versions: {
+      'zikai-0.0.0': { control: '鼠标左键操作、右键追踪', note: '早期鼠标控制原型' },
+      'zikai-0.0.1': { control: '生命 Q/W/E/R、能量 A/S/D/F', note: '引入生命/能量属性系统' },
+      'zikai-0.0.2': { control: '同 0.0.1', note: '构建产物重命名整理' },
+      'zikai-0.0.3': { control: 'WASD 移动、J 跳跃、K 飞行(测试)', note: '改为 WASD 操作，本线最新版' },
+      'main-0.0.0': { control: '角色控制器', note: '基线版本' },
+      'main-0.0.1': { control: 'WASD 移动、K 跳跃', note: '升级 Unity，新增屏幕按键' },
+      'hongXiang-0.0.0': { control: 'A/D 移动、跳跃、吃金币', note: '2D 平台跳跃' },
+      'ball': { control: '手机陀螺仪倾斜移动、上倾/点击跳跃', note: '最终版本，项目转向 3D 滚球' }
+    },
+    screenshots: {
+      caption: '项目截图 {n}'
+    }
  }
 }