前端

Vue 3 + Vite + PixiJS 8 像素风前端。

技术栈

选择	原因
Vue 3	响应式 UI 框架
Vite	快速构建工具
PixiJS 8	WebGL 2D 渲染引擎
TypeScript	类型安全
Zpix	像素字体（支持中文）

仓库

独立仓库：ai-world-sim-web

自动部署：GitHub Actions → Cloudflare Pages

页面结构

src/
├── App.vue                     # 根组件
├── views/
│   └── Dashboard.vue           # 主页面（tabs）
├── components/
│   ├── WorldMap.vue            # 像素风世界地图（PixiJS）
│   ├── WorldBar.vue            # 世界状态栏
│   ├── CharCard.vue            # 角色卡片（HP条）
│   ├── EventList.vue           # 事件流
│   ├── AuthPanel.vue           # 登录/注册
│   └── CreatePanel.vue         # 创建角色
├── api.ts                      # API 调用
├── types.ts                    # 类型定义
├── style.css                   # 全局像素风样式
└── composables/
    └── useAuth.ts              # 认证状态

世界地图

Canvas 渲染的像素风小镇地图：

• 20×16 网格，每格 32px
• 14 个地点用不同图标和颜色
• 角色显示在对应位置（彩色圆点 + 名字）
• 点击地点/角色显示详情

角色卡片

像素风格的属性条：

• HP（生命）、EP（体力）、FD（饱食）
• MD（心情）、SC（社交）、GP（金币）
• 职业、年龄、在线状态

事件流

游戏内时间显示：

• 第99天 🌅 07:12 — 同一 tick 不同角色不同分钟
• 事件类型用不同颜色区分