303 lines
9.7 KiB
Markdown
303 lines
9.7 KiB
Markdown
# 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 (同版本) |
|
||
|
||
## 业务模块复杂度评估
|
||
1. **Home 页面** - 简单
|
||
2. **DnfHelper** - 中等（已部分实现）
|
||
3. **Equipment 装备** - 高（复杂组件层级）
|
||
4. **Skill 技能** - 中等（树形/列表）
|
||
5. **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 | ★★ 中 |
|