55 lines
2.1 KiB
Markdown
55 lines
2.1 KiB
Markdown
---
|
||
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)
|