226 lines
9.2 KiB
Markdown
226 lines
9.2 KiB
Markdown
# Frontend 装备流派/职业分支/打造阶段 完整交互与布局设计文档
|
|
|
|
## 1. 分析范围与假设
|
|
|
|
- 分析范围仅覆盖 frontend。
|
|
- 目标模块包含：装备、技能、打造、角色信息、计算结果展示。
|
|
- 术语固定：装备流派、职业分支、打造阶段。
|
|
- 输出重点：交互链路、分列布局、结果渲染、代码定位证据。
|
|
|
|
入口证据：
|
|
- frontend/src/router/index.ts:13
|
|
- frontend/src/router/index.ts:22
|
|
- frontend/src/router/index.ts:34
|
|
- frontend/src/router/index.ts:40
|
|
|
|
## 2. 模块清单与职责映射
|
|
|
|
### 2.1 路由与页面
|
|
|
|
- 角色主容器页：frontend/src/pages/Character/Index.vue:1
|
|
- 装备页：frontend/src/pages/Character/EquipmentDictionary/Index.vue:1
|
|
- 技能页：frontend/src/pages/Character/Skill/index.vue:1
|
|
- 打造页：frontend/src/pages/Character/Forge/index.vue:1
|
|
- 结果页：frontend/src/pages/Character/Result/Index.vue:1
|
|
|
|
### 2.2 状态管理
|
|
|
|
- 配置与计算入口：frontend/src/stores/config.ts:45
|
|
- 角色信息与职业上下文：frontend/src/stores/info.ts:9
|
|
- 角色创建与职业参数接入：frontend/src/stores/info.ts:165
|
|
|
|
### 2.3 API 与结果类型
|
|
|
|
- 计算结果结构定义：frontend/src/api/calc/type.ts:1
|
|
- 计算请求触发：frontend/src/stores/config.ts:236
|
|
|
|
## 3. 交互链路分解（装备流派/职业分支/打造阶段）
|
|
|
|
### 3.1 装备流派链路
|
|
|
|
1. 触发动作：点击装备图标。
|
|
- 证据：frontend/src/pages/Character/EquipmentDictionary/Index.vue:67
|
|
2. 状态变化：调用 chooseEqu 更新 config.equips。
|
|
- 证据：frontend/src/stores/config.ts:243
|
|
3. 请求与计算：watch config 变化后执行 result.execute -> api.calc。
|
|
- 证据：frontend/src/pages/Character/Index.vue:61
|
|
- 证据：frontend/src/pages/Character/Index.vue:70
|
|
- 证据：frontend/src/stores/config.ts:236
|
|
4. 结果渲染：Info 与 Skill/BufferSkill 刷新。
|
|
- 证据：frontend/src/pages/Character/Result/Index.vue:25
|
|
- 证据：frontend/src/pages/Character/Result/Index.vue:35
|
|
- 证据：frontend/src/pages/Character/Result/Index.vue:40
|
|
|
|
说明：当前“装备流派”主要通过装备组合隐式形成，未见独立流派枚举模型。
|
|
|
|
### 3.2 职业分支链路
|
|
|
|
1. 触发动作：路由 alter 参数进入职业上下文。
|
|
- 证据：frontend/src/router/index.ts:13
|
|
2. 状态变化：createCharacter(alter) 加载职业信息与配置。
|
|
- 证据：frontend/src/stores/info.ts:165
|
|
3. 请求与计算：技能加点/定制写入 config.skills，触发重算。
|
|
- 证据：frontend/src/pages/Character/Skill/index.vue:23
|
|
- 证据：frontend/src/pages/Character/Skill/index.vue:32
|
|
- 证据：frontend/src/pages/Character/Skill/index.vue:41
|
|
- 证据：frontend/src/pages/Character/Index.vue:61
|
|
4. 结果渲染：根据 buffer 分支渲染输出职业或辅助职业结果。
|
|
- 证据：frontend/src/pages/Character/Result/Index.vue:35
|
|
- 证据：frontend/src/pages/Character/Result/Index.vue:40
|
|
|
|
说明：当前“职业分支”语义主要依赖路由 alter 与角色数据，无单独分支选择器。
|
|
|
|
### 3.3 打造阶段链路
|
|
|
|
1. 触发动作：在打造页切换装备/誓约/时装/徽章并录入参数。
|
|
- 证据：frontend/src/pages/Character/Forge/index.vue:5
|
|
- 证据：frontend/src/pages/Character/Forge/index.vue:6
|
|
- 证据：frontend/src/pages/Character/Forge/index.vue:7
|
|
- 证据：frontend/src/pages/Character/Forge/index.vue:8
|
|
- 证据：frontend/src/pages/Character/Forge/index.vue:30
|
|
2. 状态变化：reinforce、upgrade 等字段写入 equips。
|
|
- 证据：frontend/src/stores/config.ts:21
|
|
- 证据：frontend/src/stores/config.ts:26
|
|
3. 请求与计算：配置变化统一触发 execute 与 calc。
|
|
- 证据：frontend/src/pages/Character/Index.vue:61
|
|
- 证据：frontend/src/stores/config.ts:236
|
|
4. 结果渲染：计算结果映射到 info 与 skills 区域。
|
|
- 证据：frontend/src/api/calc/type.ts:3
|
|
- 证据：frontend/src/api/calc/type.ts:4
|
|
- 证据：frontend/src/pages/Character/Result/Index.vue:25
|
|
- 证据：frontend/src/pages/Character/Result/Index.vue:35
|
|
|
|
说明：当前“打造阶段”以数值字段组合表达，未见显式阶段枚举。
|
|
|
|
## 4. 页面布局与分列展示逻辑
|
|
|
|
### 4.1 页面骨架
|
|
|
|
- 顶部：装备设置/技能设置/打造设置页签。
|
|
- 证据：frontend/src/pages/Character/Index.vue:4
|
|
- 中部：content 为 flex 双列结构。
|
|
- 左列：RouterView 承载配置页面。
|
|
- 右列：Result 承载结果面板。
|
|
- 证据：frontend/src/pages/Character/Index.vue:10
|
|
- 证据：frontend/src/pages/Character/Index.vue:15
|
|
- 证据：frontend/src/pages/Character/Index.vue:18
|
|
- 底部：系统奶、组队、导入按钮。
|
|
- 证据：frontend/src/pages/Character/Index.vue:21
|
|
|
|
### 4.2 分列与联动
|
|
|
|
- 主列联动：左侧输入变化驱动右侧结果更新。
|
|
- 证据：frontend/src/pages/Character/Index.vue:61
|
|
- 证据：frontend/src/pages/Character/Index.vue:70
|
|
- 结果区二级分列：Info 与 Skill/BufferSkill 并排。
|
|
- 证据：frontend/src/pages/Character/Result/Index.vue:1
|
|
- 装备页分列：装备列表区 + 右侧信息区（基础/套装/誓约）。
|
|
- 证据：frontend/src/pages/Character/EquipmentDictionary/Index.vue:1
|
|
- 技能页分列：技能树主区 + 技能详情侧浮层。
|
|
- 证据：frontend/src/pages/Character/Skill/index.vue:1
|
|
- 证据：frontend/src/pages/Character/Skill/index.vue:58
|
|
|
|
## 5. 角色信息与计算结果展示逻辑
|
|
|
|
### 5.1 数据源
|
|
|
|
- 角色基础数据：frontend/src/stores/info.ts:9
|
|
- 技能与装备源：frontend/src/stores/info.ts:21
|
|
- 计算输入配置：frontend/src/stores/config.ts:45
|
|
- 计算结果结构（skills/info/buffer）：frontend/src/api/calc/type.ts:3
|
|
- 角色信息项结构：frontend/src/api/calc/type.ts:27
|
|
|
|
### 5.2 渲染链路
|
|
|
|
1. 输入端：装备、技能、打造等写入 config。
|
|
2. 计算端：result.execute 调用 calc，返回 IResult。
|
|
- 证据：frontend/src/stores/config.ts:260
|
|
- 证据：frontend/src/stores/config.ts:236
|
|
3. 展示端：
|
|
- 角色信息由 Info 消费 result.state.info。
|
|
- 证据：frontend/src/pages/Character/Result/Index.vue:25
|
|
- 结果明细由 Skill/BufferSkill 消费 result.state.skills。
|
|
- 证据：frontend/src/pages/Character/Result/Index.vue:35
|
|
- 证据：frontend/src/pages/Character/Result/Index.vue:40
|
|
|
|
## 6. 证据索引（按路由/store/API/页面组件分类）
|
|
|
|
### 路由
|
|
- frontend/src/router/index.ts:13
|
|
- frontend/src/router/index.ts:22
|
|
- frontend/src/router/index.ts:34
|
|
- frontend/src/router/index.ts:40
|
|
|
|
### Store
|
|
- frontend/src/stores/config.ts:21
|
|
- frontend/src/stores/config.ts:26
|
|
- frontend/src/stores/config.ts:45
|
|
- frontend/src/stores/config.ts:236
|
|
- frontend/src/stores/config.ts:243
|
|
- frontend/src/stores/config.ts:260
|
|
- frontend/src/stores/info.ts:9
|
|
- frontend/src/stores/info.ts:21
|
|
- frontend/src/stores/info.ts:165
|
|
|
|
### API
|
|
- frontend/src/api/calc/type.ts:3
|
|
- frontend/src/api/calc/type.ts:4
|
|
- frontend/src/api/calc/type.ts:10
|
|
- frontend/src/api/calc/type.ts:27
|
|
|
|
### 页面组件
|
|
- frontend/src/pages/Character/Index.vue:4
|
|
- frontend/src/pages/Character/Index.vue:15
|
|
- frontend/src/pages/Character/Index.vue:18
|
|
- frontend/src/pages/Character/Index.vue:61
|
|
- frontend/src/pages/Character/Index.vue:70
|
|
- frontend/src/pages/Character/EquipmentDictionary/Index.vue:13
|
|
- frontend/src/pages/Character/EquipmentDictionary/Index.vue:21
|
|
- frontend/src/pages/Character/EquipmentDictionary/Index.vue:30
|
|
- frontend/src/pages/Character/EquipmentDictionary/Index.vue:33
|
|
- frontend/src/pages/Character/EquipmentDictionary/Index.vue:38
|
|
- frontend/src/pages/Character/EquipmentDictionary/Index.vue:67
|
|
- frontend/src/pages/Character/Skill/index.vue:10
|
|
- frontend/src/pages/Character/Skill/index.vue:18
|
|
- frontend/src/pages/Character/Skill/index.vue:23
|
|
- frontend/src/pages/Character/Skill/index.vue:32
|
|
- frontend/src/pages/Character/Skill/index.vue:41
|
|
- frontend/src/pages/Character/Forge/index.vue:5
|
|
- frontend/src/pages/Character/Forge/index.vue:6
|
|
- frontend/src/pages/Character/Forge/index.vue:7
|
|
- frontend/src/pages/Character/Forge/index.vue:8
|
|
- frontend/src/pages/Character/Forge/index.vue:30
|
|
- frontend/src/pages/Character/Result/Index.vue:25
|
|
- frontend/src/pages/Character/Result/Index.vue:35
|
|
- frontend/src/pages/Character/Result/Index.vue:40
|
|
|
|
## 7. 问题清单与优先级改造建议
|
|
|
|
### P0
|
|
|
|
1. 装备流派缺少显式数据模型与入口。
|
|
- 影响：流派复用、分享、回放能力弱。
|
|
- 建议：新增流派实体（名称、标签、约束、快照），并在装备页增加流派管理入口。
|
|
|
|
2. 职业分支语义依赖路由参数，缺少可视化分支状态。
|
|
- 影响：评审和调试容易混淆当前分支上下文。
|
|
- 建议：在角色页头部补充职业与分支状态条。
|
|
|
|
### P1
|
|
|
|
1. 打造阶段没有统一阶段语义层。
|
|
- 影响：规则解释成本高，阶段对比困难。
|
|
- 建议：建立阶段映射（阶段名 -> 字段集合），并在打造页展示阶段摘要。
|
|
|
|
2. 结果展示缺少标准化加载态/错误态反馈。
|
|
- 影响：请求延迟或失败时可解释性不足。
|
|
- 建议：结果区增加执行中、失败重试、最近成功时间。
|
|
|
|
### P2
|
|
|
|
1. 多模块分列宽度与信息密度策略存在差异。
|
|
- 建议：统一主次列比例与标题层级规范。
|
|
|
|
2. 证据索引依赖人工维护。
|
|
- 建议：后续补充自动化证据采集脚本，降低维护成本。
|