Files
Genarrative/docs/experience/RPG_ACT_ROLE_PICKER_PANEL_LAYOUT_2026-04-26.md
kdletters cbc27bad4a
Some checks failed
CI / verify (push) Has been cancelled
init with react+axum+spacetimedb
2026-04-26 18:06:23 +08:00

1.3 KiB
Raw Blame History

RPG 场景幕角色配置面板布局经验 2026-04-26

背景

场景多幕配置里的“配置角色”面板是高频编辑弹层,移动端和桌面端都需要快速完成选择并保存。

本次约束

  1. 面板底部不再放“取消”按钮,关闭统一交给标题栏关闭按钮和遮罩。
  2. “保存角色”必须位于面板底部操作区,角色列表较长时只滚动内容区,不把保存按钮滚出视口。
  3. 已选角色时仍允许“移除角色”,但移动端纵向排列时保存按钮保持在最底部。
  4. 不在面板内新增功能说明文本,维持清爽编辑体验。
  5. 吸底操作区必须使用平台语义色 token不能写死深色 Tailwind 背景,避免亮色主题下出现突兀深色底栏。
  6. 已选角色时,底部操作区保持同一行:左侧“移除角色”热区占 1/4右侧“保存角色”占 3/4未选角色时保存按钮占满整行。

落地位置

  • src/components/rpg-creation-editor/RpgCreationEntityEditorShared.tsx
  • SceneActNpcSlotPickerModal

后续复用

以后新增类似独立选择弹层时,优先采用“标题栏 + 中间滚动内容 + 底部固定主动作”的结构;取消类动作不要默认占据底部按钮位,避免和主保存动作抢焦点。