27 lines
1.7 KiB
Markdown
27 lines
1.7 KiB
Markdown
# Agent 协作规则
|
||
|
||
## 下拉菜单（Dropdown）必须统一使用 `inspector-dropdown` 样式
|
||
|
||
所有「弹出式单选 / 下拉菜单」都复用同一个自定义组件，禁止各面板各写一套下拉样式：
|
||
|
||
- 组件：`src/editor/components/InspectorDropdown.tsx` 的 `InspectorDropdown`。
|
||
- 样式类（定义在 `src/styles/index.css`）：`inspector-dropdown` / `inspector-dropdown-trigger` /
|
||
`inspector-dropdown-value` / `inspector-dropdown-chevron` / `inspector-dropdown-menu` /
|
||
`inspector-dropdown-option`（选中态加 `is-selected`）。
|
||
- 该样式**不限定**在右侧 inspector 面板内，时间轴等其它面板直接套用即可，视觉与交互完全一致
|
||
（点外部 / Esc 关闭、触发键 ↓ / Enter / 空格 打开、选中项靠强调色区分）。
|
||
|
||
### 何时用、怎么用
|
||
|
||
- 新增任何「点开选一个」的交互，一律用 `InspectorDropdown`，传 `ariaLabel` / `value` / `options` / `onChange`。
|
||
- `options` 的 `value` 固定为 `string`；需要数字值时在 `onChange` 里 `Number(...)` 转换。
|
||
- 右侧 inspector 字段式下拉走 `InspectorControls` 的 `InspectorSelectField`（内部已用 `InspectorDropdown`）。
|
||
- 需要特定上下文尺寸时，给 `InspectorDropdown` 传 `className` 覆盖外层宽度，**不要**另起一套 CSS 类名或
|
||
复制 `.timeline-camera-select-*` 这类私有下拉样式（该类已废弃删除）。
|
||
|
||
### 禁止
|
||
|
||
- 不要新增 `timeline-camera-select-*` 之类的私有下拉样式。
|
||
- 不要为了单个面板重新实现一遍下拉（开关状态、点外部关闭、键盘打开等），直接复用 `InspectorDropdown`。
|
||
- 主题相关的下拉优先用自定义组件而非原生 `<select>`（原生 select 在深色下选项文字/配色不可控）。
|