dnftools/dcalc
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity
Files
e8efcb1dbf758a484e55340dd6aefc3d9f295285
dcalc/frontend-装备技能打造-完整交互与布局设计文档.md
T
imelon 74cf99289f dev
2026-05-18 20:02:16 +08:00

9.2 KiB
Raw Blame History

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. 装备流派缺少显式数据模型与入口。
  • 影响：流派复用、分享、回放能力弱。
  • 建议：新增流派实体（名称、标签、约束、快照），并在装备页增加流派管理入口。
  1. 职业分支语义依赖路由参数，缺少可视化分支状态。
  • 影响：评审和调试容易混淆当前分支上下文。
  • 建议：在角色页头部补充职业与分支状态条。

P1

  1. 打造阶段没有统一阶段语义层。
  • 影响：规则解释成本高，阶段对比困难。
  • 建议：建立阶段映射（阶段名 -> 字段集合），并在打造页展示阶段摘要。
  1. 结果展示缺少标准化加载态/错误态反馈。
  • 影响：请求延迟或失败时可解释性不足。
  • 建议：结果区增加执行中、失败重试、最近成功时间。

P2

  1. 多模块分列宽度与信息密度策略存在差异。
  • 建议：统一主次列比例与标题层级规范。
  1. 证据索引依赖人工维护。
  • 建议：后续补充自动化证据采集脚本，降低维护成本。
Reference in New Issue View Git Blame Copy Permalink