dnftools/dcalc

Fork 0

Files

T

imelon 74cf99289f dev

2026-05-18 20:02:16 +08:00

9.7 KiB

Raw Blame History

DCAlc 前端迁移探索分析

项目状态

frontend：旧项目，功能完整
- Pages: Home, Character(Equipment/Skill/Forge)
- 组件库：自研 calc-* 组件库（UnoCSS）
- 样式：SCSS，暗黑 DNF 风格（棕金色）
- API: /info, /calc
frontendNew：新项目，早期阶段
- Pages: Home, Dcalc(DnfHelper)
- 组件库：shadcn-vue + reka-ui + lucide-vue
- 样式：Tailwind CSS 4
- 仅实现了 DnfHelper 模块

主要技术栈差异

方面	frontend	frontendNew
Vue Router	4.5.0	5.0.4
TypeScript	~5.8.0	~6.0.0
样式方案	UnoCSS + SCSS	Tailwind CSS 4
组件库	自研 calc-*	shadcn-vue + reka-ui
图标库	内置	lucide-vue-next
状态管理	Pinia (同版本)	Pinia (同版本)

业务模块复杂度评估

Home 页面 - 简单
DnfHelper - 中等（已部分实现）
Equipment 装备 - 高（复杂组件层级）
Skill 技能 - 中等（树形/列表）
Forge 打造 - 高（多标签页面）

迁移风险

calc-* 组件完全重写（shadcn-vue）
样式系统从 UnoCSS 转换到 Tailwind
路由结构升级（Vue Router 5）
组件复用和嵌套关系复杂

Equipment 完整文件清单

Frontend 版本

页面层: src/pages/Character/EquipmentDictionary/Index.vue (主页面)
页面工具: src/pages/Character/EquipmentDictionary/formatData.ts
页面选项: src/pages/Character/EquipmentDictionary/components/options.vue
组件层:
- src/components/dnf/Equipment/Icon/index.vue
- src/components/dnf/Equipment/Info/index.vue
- src/components/dnf/Equipment/List/index.vue
- src/components/dnf/Equipment/Oath/index.vue
- src/components/dnf/Equipment/PartSelect/index.vue
- src/components/dnf/Equipment/RaritySelect/index.vue
- src/components/dnf/Equipment/SuitInfo/index.vue

已迁移模式分析 (DnfHelper)

位置: frontendNew/src/pages/Dcalc/DnfHelper/
使用 shadcn-vue 原生组件
Tailwind CSS 4 样式
useLocalStorage 本地存储模式

Equipment 迁移状态

未迁移：frontendNew 中没有对应的 Equipment 页面和组件
frontend 中的关键文件：
- Pages: /pages/Character/Equipment/ (已禁用), /pages/Character/EquipmentDictionary/Index.vue (当前使用)
- 组件库 (7 子组件): Icon, Info, List, Oath, PartSelect, RaritySelect, SuitInfo
- 工具函数: formatData.ts (formatEqu, formatOath)
- 数据处理: 复杂的排列、分组、筛选逻辑

DnfHelper 迁移分析（已实现）

Pages: /pages/Dcalc/DnfHelper/
- bind.vue: 表单组件 (InputGroup, Button, Field)
- list.vue: 网格列表 (Card, Grid)
- index.vue: 容器编排
Store: dnfhelper.ts - 本地存储 + API 调用
UI 组件复用：shadcn-vue Button/Card/Field 直接使用
样式：Tailwind 原生类名（grid-cols, gap, padding等）
图标：lucide-vue-next (RefreshCcw, GalleryVerticalEnd, Shuffle)

修正记录（2026-05-11）

纠正：frontendNew 已存在并接入 equipment 页面。
实际路径：frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/Index.vue
实际路由：frontendNew/src/router/index.ts 中 character/equipment 子路由已配置。
结论：equipment 迁移状态应定义为“主体完成，后续做一致性优化”。

详细模块分析

1. SKILL 模块详解

Frontend 旧版结构

文件清单：

src/pages/Character/Skill/index.vue (650+ 行)
- 子组件: SkillTree, SkillVP, SkillUP, SkillDetail
src/pages/Character/Skill/components/:
- SkillTree/index.tsx - TSX 渲染函数，技能树面板（等级/技能筛选）
- SkillTree/img/ - 美术资源
- SkillVP/index.tsx - TSX 技能进化选择（5个VP槽位）
- SkillUP/index.tsx - TSX 技能突破选择（多个UP槽位）
- SkillDetail/index.tsx - 技能详情弹窗
依赖 calc-* 组件（button/checkbox/tabs）

职责分层：

L0（展示层）: index.vue 主容器 + 6 个 tab 组织
L1（交互层）: SkillTree/SkillUP/SkillVP/SkillDetail
L2（核心）: TSX 条件渲染 + 计算属性 + 样式定制

关键依赖：

useInfoStore.skills - 技能数据源
useConfigStore.config.skills - 技能配置 { lv, vp, up }
onClickOutside VueUse 钩子
Calc-UI 组件库

FrontendNew 占位状态

文件: src/pages/Dcalc/Character/Skill/index.vue (48 行)
内容: 搜索框 + 技能卡片网格（展示级）
缺失:
- SkillTree 树形选择
- SkillVP/SkillUP 配置面板
- 技能详情弹窗
- 数据编辑交互

迁移差距

功能	旧版	新版	缺失
技能列表搜索	SkillTree	简单搜索框	树形结构
VP 进化配置	SkillVP	❌	5 槽位选择
UP 突破配置	SkillUP	❌	多槽选择
详情展示	SkillDetail 弹窗	❌	弹窗界面

2. FORGE 模块详解

Frontend 旧版结构

文件清单：

src/pages/Character/Forge/index.vue (32 行) - 简洁容器
src/pages/Character/Forge/components/:
- Equipments.vue - 装备打造子面板
- Avatars.vue - 时装打造子面板
- Emblems.vue - 徽章打造子面板
- Oaths.vue - 誓约打造子面板
- Jades.vue - 辟邪玉子面板
- Sundry.vue - 其他配置子面板
使用 calc-collapse/calc-tabs 容器化

职责分层：

L0（入口）: Forge/index.vue - 6 个 collapse 分类
L1（子模块）: 6 个 .vue 组件
- Equipments: 装备强化/升级/精炼/魔石编辑
- Avatars: 时装附魔/徽章选择
- Oaths: 誓约配置
- Jades: 玉石配置
- Sundry: 杂项选项（绑定觉醒等）

关键依赖：

useConfigStore - 装备配置状态
各自与对应的 List 组件嵌套
Calc-UI collapse/tabs

FrontendNew 占位状态

文件: src/pages/Dcalc/Character/Forge/index.vue (45 行)
内容: 3 张 Card 统计（装备数、誓约数、时装徽章数）
缺失:
- 所有 6 个子面板
- 装备编辑界面
- 誓约/玉石/时装编辑
- 数据交互

迁移差距

功能	旧版	新版	缺失
装备编辑	Equipments	仅统计	完整编辑器
时装编辑	Avatars	仅统计	完整编辑器
徽章编辑	Emblems	仅统计	完整编辑器
誓约配置	Oaths	❌	完整面板
玉石配置	Jades	❌	完整面板
其他选项	Sundry	❌	完整面板

3. RESULT 模块详解

Frontend 旧版结构

文件清单：

src/pages/Character/Result/Index.vue (72 行) - 主容器，管理分类切换
src/pages/Character/Result/components/:
- Info.vue (200+ 行) - 左侧信息面板
  - EquList 子组件 (装备列表)
  - Oath 子组件 (誓约信息)
  - 基础属性数值展示
- Skill.vue (180+ 行) - 右侧技能伤害表
  - 技能名/CD/次数/秒伤/总伤害/占比
  - 可编辑技能次数
  - 排序功能（按 dps/total 等）
- BufferSkill.vue (190+ 行) - 组队模式技能表
  - 不同的表头字段（MAIN/ATK/STRINT 等）
  - 不可编辑模式

职责分层：

L0（入口）: Result/Index.vue - 切换 Equipment/Oath 视图 + 标准对比
L1（左侧）: Info.vue - 装备信息 + 基础属性
- EquList: 装备图标列表
- Oath: 誓约信息
- 属性值网格
L1（右侧）: Skill.vue / BufferSkill.vue - 技能伤害统计
- 表格渲染（固定列宽）
- 排序交互
- 伤害数值编辑

关键依赖：

useConfigStore.result.state - 计算结果数据
useInfoStore.standard - 标准对比数据
configStore.skillCountConfig - 技能次数配置
复杂的数据处理和样式定制

FrontendNew 缺失状态

不存在: 零文件，没有 Result 模块
缺失:
- 整个右侧结果面板
- 技能伤害表展示
- 标准对比功能
- 装备信息展示

完整缺失情况

Result 是 三个模块中缺失最严重 的：

没有代码框架
没有占位符
没有数据绑定
完全的新建工作

4. 数据依赖图

Skill 依赖

infoStore.skills (API)
    ↓
SkillTree/SkillVP/SkillUP
    ↓
configStore.config.skills
    ↓
Result 右侧 Skill 表展示

Forge 依赖

configStore.config.equips/avatar/oaths
    ↓
6 个 Forge 子面板编辑
    ↓
Result 左侧 Info 面板展示
    ↓
API /calc 计算
    ↓
Result 右侧 Skill 表

Result 依赖

configStore.result.state (来自 API /calc)
infoStore.standard (标准对比数据)
    ↓
Info.vue 左侧展示
Skill.vue / BufferSkill.vue 右侧表格
    ↓
setStandard() 保存对比基准

5. 组件库差异影响

Frontend 原生组件映射

calc- 组件* → shadcn-vue 替代：

calc-tabs → shadcn Tabs + TabsList + TabsTrigger
calc-collapse → shadcn Accordion 或自定义 collapsible
calc-button → shadcn Button
calc-checkbox → shadcn Checkbox
calc-input → shadcn Input
calc-dialog → shadcn Dialog

样式转换：

UnoCSS shorthand (如 h-40px) → Tailwind (如 h-10)
DNF 暗色主题 #101012 → Tailwind bg-black + custom 深灰
金色强调 #836832 / #6C5E4A → Tailwind 或 CSS variables

6. 核心差异总结

方面	Frontend	FrontendNew	迁移工作
Skill	完整 TSX + UI	占位（搜索框）	★★★★ 高
Forge	6 个子面板	占位（统计卡）	★★★★★ 最高
Result	Info + Skill 双面板	❌ 不存在	★★★★★ 最高
路由	`/character/xxx`	`/dcalc/character/xxx`	★ 低
Store	全部就位	基础就位	★ 低
UI 库	自研 calc-*	shadcn-vue	★★ 中

9.7 KiB Raw Blame History Unescape Escape

DCAlc 前端迁移探索分析

项目状态

主要技术栈差异

业务模块复杂度评估

迁移风险

Equipment 完整文件清单

Frontend 版本

已迁移模式分析 (DnfHelper)

Equipment 迁移状态

DnfHelper 迁移分析（已实现）

修正记录（2026-05-11）

详细模块分析

1. SKILL 模块详解

Frontend 旧版结构

FrontendNew 占位状态

迁移差距

2. FORGE 模块详解

Frontend 旧版结构

FrontendNew 占位状态

迁移差距

3. RESULT 模块详解

Frontend 旧版结构

FrontendNew 缺失状态

完整缺失情况

4. 数据依赖图

Skill 依赖

Forge 依赖

Result 依赖

5. 组件库差异影响

Frontend 原生组件映射

6. 核心差异总结

9.7 KiB

Raw Blame History