# 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 | ★★ 中 |