dev

.github/instructions/frontend-ui-chatgpt-layout.instructions.md

@@ -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)