dev

2026-05-18 20:02:16 +08:00
parent 1565c4735f
commit 74cf99289f
14 changed files with 2250 additions and 237 deletions
@@ -0,0 +1,302 @@
+# 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 | ★★ 中 |