z449 - 移动游戏项目展示页

跨学期 Unity 移动游戏毕设（448/449）的展示页：项目概览、团队、玩家排行榜、版本迭代记录、ML-Agents 实验。

纯前端 Vue 3 应用，独立可渲染与维护，亦可作为 mainPage 的子模块（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 从零安装

# 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/

开发模式：

npm run dev        # http://localhost:5174

排行榜与游戏资源依赖站点根的 /448 /449 静态资源与 /449/449rest.php 接口。开发时 vite.config.js 已配代理到 localhost:8080；生产由 Apache 静态 / PHP 服务提供。

技术栈

项	选择
框架	Vue 3.4（SFC，<script setup>）
构建	Vite 5
国际化	vue-i18n 9（中文同步，英文懒加载）
包源	npmmirror.com（中国镜像加速）