Build_God/docs/superpowers/specs/2026-04-11-tutorial-feature-design.md

游戏教程功能设计

概述

创建一个游戏教程/介绍界面，在玩家创建角色后自动弹出，展示游戏世界观、装备系统、丹药系统、境界等级等信息，采用分页展示，使用 TextType 组件逐字显示文字。

功能需求

1. 自动触发：玩家创建角色成功后自动弹出教程
2. 手动触发：游戏主界面有"游戏指南"按钮可再次查看
3. 全屏弹窗：覆盖整个屏幕的模态窗口
4. 分页展示：多个页面分别为世界观、装备、丹药、境界等
5. 退出方式：底部"跳过"按钮关闭

UI/UX 设计

布局

• 全屏覆盖弹窗（position: fixed）
• 顶部：页面标题 + 页码指示器（如 1/4）
• 中间：内容区域，支持滚动
• 底部："跳过"按钮

分页结构

1. 第一页：世界观

   • 游戏背景介绍
   • 修炼体系说明

2. 第二页：装备系统

   • 装备分类（武器、防具、饰品等）
   • 装备品质说明

3. 第三页：丹药系统

   • 各类丹药介绍
   • 丹药用途

4. 第四页：境界等级

   • 境界划分
   • 修炼路线

交互

• 左右滑动或按钮切换页面
• TextType 组件逐字显示文字
• 最后一页显示"开始游戏"按钮

技术实现

文件结构

Build_God_Game/src/views/TutorialView.vue  # 新建
Build_God_Game/src/router/index.ts  # 修改

路由

• 路径：/tutorial
• 需要认证：requiresAuth: true

组件设计

• 使用 TextType 组件显示文字
• 使用分页组件管理多页内容
• 支持键盘/按钮导航

验收标准

1. 创建角色后自动跳转到教程页面
2. 教程使用 TextType 动画显示文字
3. 可通过分页按钮切换页面
4. 点击"跳过"或"开始游戏"进入游戏主界面
5. GameView 有"游戏指南"按钮可重新查看