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 框架运行时依赖

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>