# 动态面板强制选型与样式保护

## 范围与白名单

凡由点击、字段选择、菜单、按钮或业务状态触发，承载当前上下文内容、编辑、选择、筛选或动作的动态面板，均适用本规范。盘点必须包含首次打开、嵌套/二级面板、展开已选、更多操作、详情与条件分支；不得只检查初始页面可见部分。

| 任务语义 | 必须采用的面板 | 选型要求 |
| --- | --- | --- |
| 内容阅读、详情展示、阅读后确认 | 内容面板 `ContentPanel` / `content-panel` | 用公开内容、确认区和插槽承载内容 |
| 字段录入、编辑、校验与提交 | 表单面板 `FormPanel` / `form-panel` | 在面板既有结构内组合表单与字段 |
| 扁平选项单选 | 单选面板 `RadioPanel` / `radio-panel` | 采用其已有选项、选中态及选择行为 |
| 扁平选项多选 | 多选面板 `CheckboxPanel` / `checkbox-panel` | 采用其已有多选、已选回显和确认能力 |
| 树形/层级数据单选或多选 | 树选择面板 `TreeSelectPanel` / `tree-select-panel` | 优先于用动作面板加树自行拼装；按已有能力选择单/多选、搜索、级联、分级选择显隐与加载组合 |
| 上下文动作列表，或上述专用面板无法承接的混合选择、筛选、批量处理 | 动作面板 `ActionSheet` / `action-sheet` | 选用已有动作列表变体或「自定义面板」示例；插槽只组合既有组件 |

六类面板的所有已文档化样式变体与变量组合均属于候选，不得固定只用基础样式，也不得全部退化为 `ActionSheet`。数据是树形时，不因最终只选一个节点就改用扁平单选面板。

禁止使用 `Popup`、`Teleport` + 自绘遮罩、fixed 容器、第三方弹层或自建 wrapper 替代面板骨架；“内容很少”“轻量”“旧页面如此”均不是例外。`Picker`、`Cascader`、`Calendar`、`TreeSelect` 等仅作为合适面板内的内容组件，不能替代面板容器。

人员、位置、物料等既有业务组件仍优先承担业务内容，但不能作为绕过面板白名单的理由。核查其 README/demo 和实现中的面板承载：已使用白名单面板时直接复用，不额外嵌套一层；未使用或无法确认时记录组件缺口并反馈维护者，不得在页面中复制、改写其内部面板或私自改动组件库。

纯二次确认 `Dialog`、瞬时反馈 `Toast`/`Notify`、锚定气泡/引导及专用媒体预览不是本规范的业务动态面板，仍按原用途使用；不得用这些组件承载选择、表单、筛选或详情来规避白名单。

## 变体选择不等于样式修改

1. 阅读所选面板完整 README 和 demo；涉及变体时核对类型定义与 `var.less`。以实际安装版本为准，不编造 `variant`、`type`、插槽或主题变量。
2. 比较语义接近的已有示例，记录准确示例标题（无标题则记录 demo 场景）、Props/插槽/变量组合及其来源。使用已有公开配置切换样式变体，保持示例既有视觉，不复刻示例 DOM。
3. 默认保持面板背景、圆角、高度/留白、标题与关闭区、白色卡片、确认区、按钮、遮罩、安全区和动效原样。不得通过内联 `style`、`overlay-style`、`class`、`:deep()`、全局 CSS、`!important`、CSS/Less 变量或 `ConfigProvider` 主题覆盖来擅自改变面板视觉；公开样式变量存在不代表允许自由修改。
4. 页面级布局、24px 留白、二次卡片、轻量扩展或覆盖率例外不能用于改写面板样式。插槽可组合既有组件和业务内容，不得自绘标题/关闭/底栏等面板骨架。
5. 只有产品经理明确提出具体样式调整与目标并确认后，才可在确认范围内使用当前版本已文档化的公开样式变量；交付记录授权来源、变量与值。不得扩大调整范围、改源码或依赖私有 DOM/class。无授权且现有变体不能满足需求时，按 `component-gap-template.md` 反馈缺口并等待处理。

## 逐入口验收

动态面板合规必须覆盖全部触发入口，不得以页面整体 `90%` 覆盖率抵扣。逐一打开面板及其二级/条件分支，核对内容、选择回显、确认/取消、禁用、加载和关闭行为；同时检查代码差异中的样式、主题变量和通用弹层替代。无法运行时注明静态核查范围和未验证项，不宣称已完成交互验收。

交付中附上以下记录（没有动态面板时明确写“无”）：

```md
## 动态面板验收
- 触发入口/条件与层级：<逐项列出，包括嵌套与展开已选>
- 任务语义 → 面板组件：<六类之一；业务组件同时注明其面板承载>
- 示例与变量组合：<准确 README/demo 来源、实际 Props/插槽/预置变体>
- 样式保护：<未改动；或明确授权来源及公开变量、值、范围>
- 行为验证：<打开、回显、确认/取消、关闭及相关状态；未验证项说明>
- 缺口：<无；或能力/承载缺口与反馈，不使用自绘替代>
```