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