# z449 - 移动游戏项目展示页 跨学期 Unity 移动游戏毕设（448/449）的展示页：项目概览、团队、玩家排行榜、版本迭代记录、ML-Agents 实验。 纯前端 Vue 3 应用，独立可渲染与维护，亦可作为 [mainPage](https://git.zikai.wang/zikai/zMainPage) 的子模块（git submodule）构建期集成展示。 ## 功能 - Hero 区：项目元数据（技术栈 / 时间 / 课程） - 概览 + 截图轮播（自动播放） - 团队成员卡片 - 玩家分数排行榜（复用 449 现有 PHP 接口 `/449/449rest.php`） - 版本演进时间线（2D -> 3D 形态转变，多线并行） - ML-Agents 强化学习演示视频 - 中英双语（中文默认，英文懒加载） ## 项目结构 ``` z449/ ├── index.html Vite 入口 ├── package.json ├── vite.config.js 含 /448 /449 开发代理 ├── .npmrc npmmirror 镜像加速 ├── src/ │ ├── main.js 独立 app 挂载（i18n + 全局样式） │ ├── App.vue ★ 便携式根组件：接 :locale prop，嵌入与独立两用 │ ├── config.js 静态配置（资源路径 / 排行榜接口 / 子标签） │ ├── i18n/ 独立 vue-i18n 实例 + 中英 locale（mobileGame.* 文案单一来源） │ ├── components/ Hero / 轮播 / 子标签 / 排行榜 / 时间线 / 实验 │ │ └── ui/ PageShell / Tag（自洽 UI 基元） │ ├── data/ 团队成员 / 版本演进数据 │ └── styles/ variables.css（令牌）+ base.css（重置，仅独立 app 加载） └── docs/ 设计文档 ``` ## 嵌入 mainPage（i18n 桥接） `App.vue` 是便携式组件： - **嵌入时**：mainPage 侧包装器 `import` 本项目 `src/App.vue`，把父项目当前语言经 `:locale` prop 传入。`App.vue` 内 `watch` 该 prop，同步到本项目独立的 `vue-i18n` 实例 `locale`，从而跟随父项目语言开关响应式切换。文案来自本项目自有 locale 文件，不共享父项目的 messages。 - **独立运行时**：不接收 prop，默认中文；可自管语言切换。 样式隔离：子组件均为 scoped；全局重置（`variables.css` / `base.css`）仅在独立 app 的 `main.js` 加载，嵌入时不加载，复用宿主 `:root` 令牌级联。 ## Ubuntu 从零安装 ```bash # 1. 安装 Node.js 18+ curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - sudo apt-get install -y nodejs # 2. 克隆并安装 git clone https://git.zikai.wang/zikai/z449.git cd z449 npm install # 已配 npmmirror 镜像加速 # 3. 构建生产版本 npm run build # 产物输出到 dist/ ``` 开发模式： ```bash npm run dev # http://localhost:5174 ``` > 排行榜与游戏资源依赖站点根的 `/448` `/449` 静态资源与 `/449/449rest.php` 接口。开发时 `vite.config.js` 已配代理到 `localhost:8080`；生产由 Apache 静态 / PHP 服务提供。 ## 技术栈 | 项 | 选择 | |----|------| | 框架 | Vue 3.4（SFC，`