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,52 @@
+---
+name: frontend-migration
+applyTo: "frontendNew/src/pages/Dcalc/Character/**/*.vue,frontendNew/src/stores/**/*.ts,frontendNew/src/api/**/*.ts"
+description: "Use when migrating frontend Character pages to frontendNew, preserving config->execute->save flow, keeping /calc and IResult contract stable, and implementing same-page config+result with minimal behavior changes for Skill/Forge."
+---
+
+# Frontend Migration Rules (frontend -> frontendNew)
+
+## Core Target
+
+- 迁移目标是行为保真，不是推倒重做。
+- 结果必须保持：配置变化可触发计算，结果区稳定刷新，配置可持久化。
+
+## Required Data Flow
+
+- 保持以下链路成立：
+  - config mutate
+  - Character 容器 watch config
+  - `result.execute()`
+  - `saveConfig()`
+- 不在 Skill/Forge 子页直接做并发调度或替代容器级触发策略。
+
+## API/Type Contract
+
+- 不修改 `/calc` 入参与返回结构。
+- 不破坏 `IResult` 的关键字段语义：`skills`、`info`、`suits`、`buffer`。
+
+## Skill/Forge Migration Constraints
+
+- Skill、Forge 优先沿用现有业务逻辑与限制条件（例如 VP/UP 数量限制、等级限制）。
+- 允许替换 UI 结构与组件，但不改核心规则语义。
+- 新行为必须可追踪到 `pushChangeSource`，便于结果回溯。
+
+## Result Panel Requirements
+
+- 必须具备 4 态：loading、error、empty、success。
+- 同页可查看结果，不依赖跳页。
+- 允许以 Tab 汇总展示（如详情/结果切换），但不得导致计算链路断开。
+
+## Source of Truth
+
+- 迁移策略以以下文件为准：
+  - [frontendNew Migration Plan](frontendNew/MIGRATION_PLAN.md)
+  - [角色信息与结果链路专项分析](frontend-角色信息与计算结果展示链路-专项分析.md)
+  - [装备技能打造交互与布局设计](frontend-装备技能打造-完整交互与布局设计文档.md)
+
+## Existing Pattern to Reuse
+
+- 优先参考已迁移页面模式：
+  - [EquipmentDictionary](frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/Index.vue)
+  - [Character Container](frontendNew/src/pages/Dcalc/Character/Index.vue)
+  - [Config Store](frontendNew/src/stores/config.ts)
@@ -0,0 +1,54 @@
+---
+name: frontend-ui-chatgpt-layout
+applyTo: "frontendNew/src/pages/Dcalc/Character/**/*.vue,frontendNew/src/components/**/*.vue"
+description: "Use when implementing ChatGPT-like responsive layout and interactions in frontendNew: same-page configuration and result viewing, desktop dual-column + mobile sheet, minimal-disruption UX updates for Skill/Forge, and shadcn-vue-first component usage."
+---
+
+# Frontend UI/Layout Rules (ChatGPT-like)
+
+## Layout Goals
+
+- 同页完成配置与结果查看。
+- 桌面端：配置主列 + 结果侧栏。
+- 移动端：结果区可切换为 Sheet/抽屉，避免拥挤。
+
+## Responsive Baseline
+
+- Desktop: 双栏布局（主内容 + 结果侧栏）。
+- Tablet: 允许上下堆叠或 Tab 汇总。
+- Mobile: 结果面板抽屉化，保留快速打开入口。
+
+## Interaction Principles
+
+- Skill/Forge 交互尽量小改，保持用户已有心智。
+- 新交互优先低侵入：Tab、Sheet、折叠区、局部详情面板。
+- 避免把“配置编辑”和“结果观察”分离到不同页面。
+
+## Component Policy
+
+- shadcn-vue 优先。
+- 复用 `frontendNew/src/components/ui` 现有能力。
+- 不引入额外 UI 框架（Element Plus、Ant Design Vue、Vuetify 等）。
+
+## Result Panel UX
+
+- 结果面板至少包含：
+  - 结果状态反馈（loading/error/empty）
+  - 技能结果主视图
+  - 必要时通过 Tab 汇总详情视图
+- 排序、切换、基准对比操作要可见、可恢复、可撤销（清空基准）。
+
+## Suggested Placement
+
+- 角色容器布局锚点：
+  - [Character Container](frontendNew/src/pages/Dcalc/Character/Index.vue)
+- 结果展示锚点：
+  - [Result Panel](frontendNew/src/pages/Dcalc/Character/Result/Index.vue)
+- 迁移一致性参考：
+  - [EquipmentDictionary](frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/Index.vue)
+
+## Design References
+
+- [frontendNew Design](frontendNew/DESIGN.md)
+- [角色信息与结果链路专项分析](frontend-角色信息与计算结果展示链路-专项分析.md)
+- [装备技能打造交互与布局设计](frontend-装备技能打造-完整交互与布局设计文档.md)