From c6dad2b79ac6da7d91ebb3668697384c2d06d30b Mon Sep 17 00:00:00 2001 From: Zikai Date: Sun, 12 Jul 2026 16:08:25 +0000 Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=AB=98=E5=86=85=E8=81=9A?= =?UTF-8?q?=E4=BD=8E=E8=80=A6=E5=90=88=20-=20=E9=85=8D=E7=BD=AE=E9=9B=86?= =?UTF-8?q?=E4=B8=AD=E5=8C=96=E4=B8=8E=20i18n=20=E7=BB=9F=E4=B8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 结构优化： - 新增 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置顶) + 英文切换 + 切回中文 全通过 --- src/composables/useLocale.js | 15 ++ src/i18n/locales/en.js | 93 ++++++++++- src/i18n/locales/zh-CN.js | 95 ++++++++++- src/modules/mobile-game/MobileGame.vue | 38 ++--- .../mobile-game/components/ExperimentTab.vue | 21 +-- .../mobile-game/components/HeroSection.vue | 33 ++-- .../mobile-game/components/IterationsTab.vue | 9 +- .../mobile-game/components/Leaderboard.vue | 28 ++-- .../components/ScreenshotCarousel.vue | 15 +- .../mobile-game/components/SubTabs.vue | 17 +- .../components/TeamLeaderboardTab.vue | 13 +- .../components/VersionTimeline.vue | 39 ++--- src/modules/mobile-game/config.js | 46 ++++++ src/modules/mobile-game/data/versions.js | 152 +++--------------- 14 files changed, 341 insertions(+), 273 deletions(-) create mode 100644 src/composables/useLocale.js create mode 100644 src/modules/mobile-game/config.js diff --git a/src/composables/useLocale.js b/src/composables/useLocale.js new file mode 100644 index 0000000..8f0beb0 --- /dev/null +++ b/src/composables/useLocale.js @@ -0,0 +1,15 @@ +import { computed } from 'vue' +import { useI18n } from 'vue-i18n' + +// 共享的语言辅助 composable，消除各组件重复定义 L() +// 用法： +// const { t, locale, isZh, pick } = useLocale() +// t('some.key') // 走 i18n（推荐，文案在 locale 文件） +// isZh.value // 判断当前是否中文 +// pick({ zh, en }) // 从 {zh,en} 对象取当前语言值（用于数据文件） +export function useLocale() { + const { t, locale } = useI18n({ useScope: 'global' }) + const isZh = computed(() => locale.value === 'zh-CN') + const pick = (obj) => (isZh.value ? obj.zh : obj.en) + return { t, locale, isZh, pick } +} diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js index 0a08e8a..17e795b 100644 --- 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}' + } } } diff --git a/src/i18n/locales/zh-CN.js b/src/i18n/locales/zh-CN.js index 1ddbcd3..0e613fc 100644 --- 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}' + } } } diff --git a/src/modules/mobile-game/MobileGame.vue b/src/modules/mobile-game/MobileGame.vue index 6b98ad6..423b2eb 100644 --- a/src/modules/mobile-game/MobileGame.vue +++ b/src/modules/mobile-game/MobileGame.vue @@ -1,20 +1,16 @@ diff --git a/src/modules/mobile-game/components/HeroSection.vue b/src/modules/mobile-game/components/HeroSection.vue index c4ea0bc..646618d 100644 --- a/src/modules/mobile-game/components/HeroSection.vue +++ b/src/modules/mobile-game/components/HeroSection.vue @@ -1,38 +1,23 @@