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

name, applyTo, description

name	applyTo	description
frontend-ui-chatgpt-layout	frontendNew/src/pages/Dcalc/Character/**/*.vue,frontendNew/src/components/**/*.vue	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
• 结果展示锚点：
  • Result Panel
• 迁移一致性参考：
  • EquipmentDictionary

Design References

• frontendNew Design
• 角色信息与结果链路专项分析
• 装备技能打造交互与布局设计