persagy-vant 0.0.45 → 0.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "persagy-vant",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "description": "Lightweight Mobile UI Components built on Vue",
   "main": "lib/vant.cjs.js",
   "module": "es/index.mjs",

package/skills/use-persagy-vant/SKILL.md

@@ -7,6 +7,12 @@ description: 使用 Persagy Vant 为 Vue 3 移动端业务页面规划、实现
 
 将 Persagy Vant 视为此项目唯一的 UI 与业务组件来源。页面可以组合组件、组织业务数据和编写接口逻辑，但不得重写组件库已经提供的基础控件、交互模式或业务组件。
 
+## 动态面板硬约束
+
+所有触发的动态面板（包括二级面板、已选展开、筛选、详情和编辑面板）必须由 `ContentPanel`、`FormPanel`、`RadioPanel`、`CheckboxPanel`、`TreeSelectPanel` 或 `ActionSheet` 承载，并按语义选用其 README/demo 已有的样式变体与变量组合。不得以 `Popup`、手写弹层或其他通用容器替代，即使内容少或页面组件覆盖率已达 `90%` 也不例外。不得擅自修改面板组件样式；选用预置变体不等于获得修改 CSS/Less 变量的授权。
+
+涉及动态面板时，在选型和编码前必须阅读 [动态面板规范](references/dynamic-panel-policy.md)，交付前逐个触发入口核查面板组件、示例/变量和样式未改动情况。此规范优先于其他资料中的通用容器、页面布局和轻量样式扩展建议；组件缺口必须反馈，不得自行绕过。
+
 ## 强制工作流
 
 1. 阅读 `references/reuse-policy.md`，确认复用边界与禁止项。

package/skills/use-persagy-vant/references/business-component-catalog.md

@@ -2,6 +2,8 @@
 
 先按这里选择业务组件。数据结构、完整 API 和 demo 均以对应 `packages/persagy-mobile/src/<component>/README.zh-CN.md` 为准。
 
+业务组件触发的动态面板同样必须按 `dynamic-panel-policy.md` 核查六类面板承载及原样式；业务组件优先不构成白名单例外。不能满足时反馈组件缺口，不在页面改写其内部实现。
+
 | 场景 | 必须优先使用 | 不要自行实现 |
 | --- | --- | --- |
 | 选择一位人员 | `single-person-select` | 人员搜索、部门分组、单选底部面板 |
@@ -16,6 +18,7 @@
 | 批量勾选条目/录入数量 | `quantity-input` | 已选项展开、清空和批量确认 |
 | 工单列表的组合筛选 | `work-order-filter` | 项目、时间、排序、待办和工单类型筛选 |
 | 业务层级选项 | `tree-select` | 单选/多选树、父子联动和展开收起 |
+| 动态面板中的树形/层级选项 | `tree-select-panel` | 既有树选择面板的单选/多选、搜索、级联和加载，不手动拼装弹层 |
 | 页面底部主次操作 | `bottom-action-bar` | 固定底栏、更多操作、按钮 loading/disabled |
 | 页面一级标题或蓝色业务标识 | `blue-mark-header` / `blue-mark` | 一级标题使用位于白色卡片外层的 `blue-mark-header`；仅作业务标识时使用 `blue-mark` |
 | 展示字段或多类型详情字段 | `label` / `info-card` + `label` | 单个字段回显优先 `label`，左侧标签文本尽量自带冒号；字段成组或类型较多时用 `info-card` 承载，并支持接口字段可见性、更多信息与展开收起 |

package/skills/use-persagy-vant/references/component-catalog.md

@@ -27,15 +27,16 @@
 - `blue-mark`、`blue-mark-header`：一级标题和业务标识；页面一级标题统一使用放在白色卡片外层的 `blue-mark-header`，需要必填标识、右侧操作或展开收起时使用其公开能力，不手写同类标题栏。
 - `title-bar`：白色卡片内的二级标题统一使用默认样式（不使用 `mini`）；用 `show-description`、`show-icon`、`show-arrow` 和 `expandable`/`v-model` 组合备注、图标、箭头和展开内容。视觉调整只使用其 `--van-title-bar-*` 公开变量。
 - `card`、`tag`、`badge`、`notice-bar`、`image`、`icon`：内容展示与状态标识。
-- `popup`、`action-sheet`、`share-sheet`、`popover`：动作选择与自定义容器；动态面板必须先检查 `content-panel`、`form-panel`、`radio-panel`、`checkbox-panel`。仅单选直接使用 `radio-panel`，仅复选直接使用 `checkbox-panel`；它们无法覆盖且当前上下文需要组合标题、复杂选择项、字段、筛选或批量操作时，使用 `action-sheet` 的【动作面板】模拟器「自定义面板」（`v-model:show` + 标题/关闭公开能力 + 默认插槽）。插槽内只在该示例已有的白色卡片内容结构中组合现有组件；仅少量轻量内容才使用 `popup`。
-- `content-panel`：承载需阅读确认的分组内容，使用 `v-model:show`、`title`、`confirm-text`、`show-footer` 和 `confirm`/`close` 事件完成打开、确认与关闭；用 `footer` 插槽替换默认确认区。内部优先组合 `cell`、`blue-mark-header`、`title-bar`、`material-display-bar`；视觉调整只使用 `--van-content-panel-background`、`--van-content-panel-radius`、`--van-content-panel-footer-padding`。
+- `action-sheet`：上下文动作或专用面板不能承接的混合任务采用已有动作列表变体或模拟器「自定义面板」；插槽只组合已有组件，保持示例原有结构和视觉。动态面板禁止以 `popup`、`share-sheet`、`popover` 等替代，详见 `dynamic-panel-policy.md`；锚定气泡仍按其原用途使用。
+- `content-panel`：承载阅读、详情与确认的分组内容，使用 `v-model:show`、`title`、`confirm-text`、`show-footer` 和 `confirm`/`close` 事件完成打开、确认与关闭；用 `footer` 插槽组合既有操作组件。内部优先组合 `cell`、`blue-mark-header`、`title-bar`、`material-display-bar`；保持既有面板样式，公开 CSS 变量不是自行调整视觉的授权。
+- `tree-select-panel`：树形数据单选/多选的专用面板；从 README/demo 已有单/多选、搜索、级联、分级选择显隐与加载组合中选型，不以 `action-sheet` + `tree-select` 手动复刻。
 - `dialog`、`toast`、`notify`：确认、短反馈与顶部通知；不得重复封装确认弹窗或全局提示。
 - `friendly-tip`、`popover`：基于触发元素的引导说明和轻量操作菜单。一次性友好引导使用 `friendly-tip`，点击空白处关闭；不要手写定位气泡。
 - `swipe`、`swipe-item`、`swipe-cell`、`collapse`、`grid`、`index-bar`：浏览、滑动操作、折叠和网格内容。
 
 ## 选型规则
 
-- 动态面板选型顺序：阅读/确认内容使用 `content-panel`；表单编辑/提交使用 `form-panel`；只需单选使用 `radio-panel`；只需复选使用 `checkbox-panel`；专用面板均无法覆盖且当前上下文需要组合标题、复杂选择项、字段、筛选或批量操作时，使用 `action-sheet` 的【动作面板】模拟器「自定义面板」（`v-model:show` + 标题/关闭公开能力 + 默认插槽）。插槽内只在该示例已有的白色卡片内容结构中组合现有组件；仅少量轻量内容才使用 `popup`。仅确认操作使用 `dialog`；短暂提示使用 `toast` 或 `notify`。
+- 动态面板必须按 `dynamic-panel-policy.md` 从六类面板及其已有变体中选型：阅读/详情/确认用 `content-panel`，表单用 `form-panel`，扁平单选/多选用 `radio-panel` / `checkbox-panel`，树形选择用 `tree-select-panel`，上下文动作或混合任务用 `action-sheet`。不允许轻量 `popup` 例外或擅改面板样式；纯二次确认用 `dialog`，短暂提示用 `toast` / `notify`，不得用反馈组件替代业务面板。
 - 可分页的业务列表：组合 `list`、`pull-refresh`、`empty`、`loading`，不要手写重复加载状态。
 - 页面首次进入：纯色页面背景叠加 `loading type="illustration"`，数据就绪后再展示内容；局部加载按实际范围使用 `loading` 或 `skeleton`。
 - 需要展示字段名称与回显值时优先使用 `label`，并让左侧标签文本尽量自带冒号；字段成组或类型较多时选择 `info-card` + `label`。只有简单、不需要统一字段样式或展开逻辑的内容才组合 `cell-group` 或 `card`。

package/skills/use-persagy-vant/references/component-variant-selection.md

@@ -31,12 +31,17 @@
 
 当“照片/视频”标题只描述其下方上传区域时，标题必须合并进 `uploader` 的 `label`，使用「图片/视频表单」的既有卡片、上传和预览布局。视频通过 `accept="image/*,video/*"` 和既有预览事件处理；不得另绘拍照/上传入口、缩略图或必填星号。
 
-## 动作面板的示例匹配
+## 动态面板的示例匹配
+
+所有面板及二级触发严格执行 `dynamic-panel-policy.md`。以下仅作语义匹配提示；必须查看对应组件的完整 README/demo，选择已有样式变体与变量组合，不得擅改面板 CSS/Less 或通过主题覆盖修改视觉。
 
 | 页面意图 | 优先模拟器示例 | 典型公开能力 | 不适用时机 |
 | --- | --- | --- | --- |
-| 面板内只需要单选 | 【单选面板】 | `radio-panel` 的原选中值与 `select` 事件 | 同时存在非同构字段、复杂条目或批量操作时 |
-| 面板内只需要复选 | 【多选面板】 | `checkbox-panel` 的原选中数组与 `confirm` 事件 | 同时存在非同构字段、复杂条目或批量操作时 |
+| 内容阅读、详情或阅读后确认 | 【内容面板】 | `content-panel` 的公开内容与确认能力 | 实际任务为编辑或选择时 |
+| 字段录入、校验与提交 | 【表单面板】 | `form-panel` 的公开表单与提交能力 | 仅展示或选择时 |
+| 树形/层级选项单选或多选 | 【树选择面板】 | `tree-select-panel` 已有单/多选、搜索、级联与加载组合 | 选项实际是扁平枚举时 |
+| 扁平选项只需要单选 | 【单选面板】 | `radio-panel` 的原选中值与 `select` 事件 | 树形数据，或同时存在非同构字段、复杂条目或批量操作时 |
+| 扁平选项只需要复选 | 【多选面板】 | `checkbox-panel` 的原选中数组与 `confirm` 事件 | 树形数据，或同时存在非同构字段、复杂条目或批量操作时 |
 | 当前上下文下的复杂选择、筛选或批量处理面板；内部同时有标题、关闭、多个非同构条目和确认操作 | 【动作面板】「自定义面板」 | `v-model:show`、`title`、`closeable`、`close-on-click-overlay`、`lock-scroll` 与默认插槽；在示例既有白色卡片内容区组合已有组件 | 仅阅读/确认、标准表单、纯单选或纯多选可完整由 `content-panel`、`form-panel`、`radio-panel`、`checkbox-panel` 承接时 |
 
 自定义面板的默认插槽用于组合【标题栏】、【单元格】、【字段展示】、单选/多选和既有操作组件；例如空间选择可保留原选中数组、可选数量、位置字段、标签、全选与下一步事件。保持该模拟器已有的灰色面板背景、标题区与白色卡片内容结构，不复制其 DOM 或覆盖动作面板样式；不得改用 `popup` 或手写遮罩、弹层和固定底栏。
@@ -89,4 +94,4 @@
 - <官网中文组件名>：模拟器示例「<README 中的准确示例标题>」；<页面意图>，使用 `<实际 Props/插槽/变量>`；<未选其他示例的关键原因>。
 ```
 
-若 README/demo 没有能语义匹配的示例或公开能力，不创建相似自定义结构，也不得自行调整组件样式以强行匹配；在组件缺口记录中说明已评估的示例、不能满足的原因和建议新增的变体/API。仅当产品经理明确提出具体样式调整时，才可在其确认范围内使用 README 已文档化的公开样式变量。
+若 README/demo 没有能语义匹配的示例或公开能力，不创建相似自定义结构，也不得自行调整组件样式以强行匹配；在组件缺口记录中说明已评估的示例、不能满足的原因和建议新增的变体/API。仅当产品经理明确提出具体样式调整时，才可在其确认范围内使用 README 已文档化的公开样式变量。涉及动态面板时还必须附上 `dynamic-panel-policy.md` 的逐入口验收记录，不能只记录基础示例或页面覆盖率。

package/skills/use-persagy-vant/references/design-interaction-baseline.md

@@ -5,7 +5,7 @@
 ## 页面结构与导航
 
 - 应用外页面层级不超过 `5` 级；动态面板嵌套不超过 `2` 层。复杂且相对独立的功能使用独立页面；需要即时录入、查看或回显当前页面数据的轻量任务使用动态面板。
-- 识别到动态面板时，先按内容复用专用面板：阅读/确认内容使用 `content-panel`，编辑或提交表单使用 `form-panel`，单项选择使用 `radio-panel`，多项选择使用 `checkbox-panel`。四者均无法覆盖且自定义内容较多时，使用 `action-sheet` 的【动作面板】自定义面板样式（`title` + 默认插槽）；仅少量、轻量的自定义内容才使用 `popup` 等通用容器。微调只能使用所选面板公开的 Props、事件、插槽和样式变量，不得重写面板结构。
+- 所有触发的动态面板严格执行 `dynamic-panel-policy.md`：阅读/详情/确认用 `content-panel`，表单用 `form-panel`，扁平单选/多选用 `radio-panel` / `checkbox-panel`，树形选择用 `tree-select-panel`，上下文动作或专用面板不能承接的混合任务用 `action-sheet` 已有变体。不得用 `popup` 等通用容器替代；不得擅自修改面板样式。通用页面布局建议不覆盖面板既有视觉。
 - 有动态面板可触发时，页面触发器优先使用 `cell` 的【单元格】右图标样式：设置 `right-icon="arrow"` 并使用 `click` 事件打开面板；需要展示当前选择结果时使用 `value` 或 `note`。不得手写同类行入口或箭头图标。
 - 普通下钻页面进入和返回使用左右转场；从左上角关闭的页面优先使用上下转场；展开与收起提供缓动效果。优先复用组件内置动效。
 - 带返回箭头的页面支持从左侧边缘左滑返回；仅在宿主框架支持时启用，不得以页面 CSS 模拟系统手势。

package/skills/use-persagy-vant/references/dynamic-panel-policy.md

@@ -0,0 +1,46 @@
+# 动态面板强制选型与样式保护
+
+## 范围与白名单
+
+凡由点击、字段选择、菜单、按钮或业务状态触发，承载当前上下文内容、编辑、选择、筛选或动作的动态面板，均适用本规范。盘点必须包含首次打开、嵌套/二级面板、展开已选、更多操作、详情与条件分支；不得只检查初始页面可见部分。
+
+| 任务语义 | 必须采用的面板 | 选型要求 |
+| --- | --- | --- |
+| 内容阅读、详情展示、阅读后确认 | 内容面板 `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/插槽/预置变体>
+- 样式保护：<未改动；或明确授权来源及公开变量、值、范围>
+- 行为验证：<打开、回显、确认/取消、关闭及相关状态；未验证项说明>
+- 缺口：<无；或能力/承载缺口与反馈，不使用自绘替代>
+```

package/skills/use-persagy-vant/references/element-component-matching.md

@@ -38,12 +38,14 @@
 | 多个标签构成一个详情字段 | `label type="tag"` | 保留字段名与标签数组；不改为裸 `tag` 流 |
 | 搜索 | 【搜索】`search variant="pure"` | 保留既有搜索绑定与事件 |
 | 图片、视频、文件上传 | 【文件上传】`uploader` | 图片/视频选择模拟器示例「图片/视频表单」：以组件 `label` 呈现标题，`accept="image/*,video/*"`、`multiple`、`max-count="9"`、`preview-size="70"`；不自绘上传网格 |
-| 阅读确认、表单、单选、多选动态面板 | `content-panel` / `form-panel` / `radio-panel` / `checkbox-panel` | 按任务类型选择；再考虑 `action-sheet` 或轻量 `popup` |
+| 阅读/详情/确认、表单、扁平单选/多选、树形选择动态面板 | `content-panel` / `form-panel` / `radio-panel` / `checkbox-panel` / `tree-select-panel` | 按任务类型强制匹配；不能承接的混合任务使用 `action-sheet` 已有变体；禁止轻量 `popup` 例外，见 `dynamic-panel-policy.md` |
 | 当前上下文的复杂动态面板：标题/关闭、多类型选择条目、筛选或批量操作共同出现 | 【动作面板】`action-sheet` | 使用模拟器示例「自定义面板」：默认插槽在既有白色卡片内容结构中组合组件，不手写弹层骨架 |
 | 页面级主次操作 | 【动作栏】`bottom-action-bar` | 固定操作栏，不自行实现 footer |
 
 ### 3. 变量与模拟器变体匹配
 
+动态面板先执行 `dynamic-panel-policy.md` 的六类白名单与样式保护规则；树形单选/多选必须使用 `tree-select-panel`，不得因最终选中数量或面板复杂度改为扁平选择或手动拼装。
+
 组件确定后，再根据元素盘点的字段、状态与视觉结构选择 README/demo 中的具体示例。优先使用已有 Props、事件和插槽；不得将 CSS 变量或页面样式作为第一选择。
 
 - **标题**：一级标题固定选 `blue-mark-header`；二级标题固定选默认 `title-bar`。仅在存在真实必填、操作、备注、箭头或展开状态时开启相应 Props。

package/skills/use-persagy-vant/references/page-recipes.md

@@ -25,7 +25,7 @@
 
 1. 页面含白色卡片时，用 `background` 承载页面内容：一级页面使用 `theme="default"`，其他层级页面使用 `theme="gray"`。
 2. 顶部搜索使用 `search variant="pure"` 的【搜索】纯净样式；沿用既有 `v-model` 与 `search` 事件连接筛选逻辑，不手写搜索输入区域。
-3. 工单场景使用 `work-order-filter`；其他复杂条件使用 `popup` + `form` + 现有选择组件。
+3. 工单场景使用 `work-order-filter`，其触发面板也须按 `dynamic-panel-policy.md` 核查承载；其他复杂条件按语义使用 `form-panel` 或 `action-sheet` 已有变体组合现有选择组件，不得使用 `popup` 替代。
 4. 搜索触发后自动聚焦；非业务必需时使用 `show-action` 和 `cancel` 提供取消操作。使用 `pull-refresh` + `list` 呈现数据，首屏/分页加载使用 `loading`，无结果使用 `empty`，末页显示无更多数据提示。
 5. 简单列表项使用 `cell` 或 `card`；工单需要展示标签、位置、展开详情或行内操作时使用 `work-order-card`，并与 `background` 组合；状态使用 `tag` 或 `badge`。
 
@@ -56,8 +56,8 @@
 
 1. 有动态面板可触发时，优先使用 `cell` 的【单元格】右图标样式（`right-icon="arrow"` + `click`）显示当前选择结果并触发面板；结果使用 `value` 或 `note` 回显。
 2. 选项不超过 3 个且文本短时可外露单选；其他单选及所有复杂选择均使用面板。多选枚举选项超过 6 个时，优先选择组件库的底部多选快捷操作能力。
-3. 动态单选优先使用 `radio-panel`，通过 `v-model` 和 `select` 同步；动态多选优先使用 `checkbox-panel`，通过 `v-model` 和 `confirm` 同步。需要录入/提交时使用 `form-panel`，需要阅读确认时使用 `content-panel`。
-4. 使用业务组件完成选择；仅在通用场景选择 `picker`、`cascader`、`tree-select`、`calendar` 等。上述专用面板都不能覆盖且自定义内容较多时，使用 `action-sheet` 的【动作面板】自定义面板样式（`title` + 默认插槽）；仅少量轻量内容才使用 `popup`。
+3. 扁平动态单选必须使用 `radio-panel`，通过 `v-model` 和 `select` 同步；扁平动态多选必须使用 `checkbox-panel`，通过 `v-model` 和 `confirm` 同步；树形单选/多选必须使用 `tree-select-panel`。需要录入/提交时使用 `form-panel`，需要阅读/详情/确认时使用 `content-panel`。
+4. 使用业务组件完成选择并按 `dynamic-panel-policy.md` 核查其面板承载；通用场景的 `picker`、`cascader`、`tree-select`、`calendar` 等只作为合适面板内的内容组件。专用面板无法承接的混合任务使用 `action-sheet` 已有变体或「自定义面板」示例；即使轻量内容也不得改用 `popup`。保留面板既有样式，逐个触发入口验收。
 5. 使用对应 `change`、`confirm`、`select` 事件同步页面状态，不读取组件内部 DOM。
 
 ## 楼层空间选择

package/skills/use-persagy-vant/references/reuse-policy.md

@@ -6,6 +6,7 @@
 - 必须阅读目标组件 README 和 demo 后再使用 API。
 - 必须处理 loading、empty、error、disabled 或 submitting 等与页面类型相关的状态；整个页面首次进入时，使用纯色背景叠加 `loading type="illustration"` 进行过渡。
 - 必须在最终回复、PR 描述或交付说明中附上组件复用清单。
+- 所有触发的动态面板必须执行 `dynamic-panel-policy.md` 的六类面板白名单、变体选型、样式保护和逐入口验收；面板合规要求为全部覆盖，不能使用页面 `90%` 覆盖率、轻量内容或通用样式扩展抵扣。
 
 ## 页面组件覆盖率：所有任务的强制规则
 
@@ -43,7 +44,7 @@
 
 - 接口调用、页面路由、业务状态、数据转换和权限判断。
 - 仅服务于当前页面的展示组合；不得将其抽成可替代组件库能力的通用组件。
-- 在公开 API、插槽、CSS 变量或文档明确的扩展点上做轻量样式定制。
+- 用公开 API、插槽和文档明确的扩展点组合业务内容。样式定制仅限产品经理明确提出并确认的具体调整；动态面板还须遵守 `dynamic-panel-policy.md`，不得把公开 CSS 变量当作自由修改组件样式的授权。
 
 ## 交付前自查
 
@@ -59,6 +60,9 @@
 - 空数据：<处理方式>
 - 失败/提交中：<处理方式>
 
+## 动态面板验收
+- <按 dynamic-panel-policy.md 逐入口记录面板、示例/变量、样式保护与行为验证；无则写“无”>
+
 ## 业务与数据兼容核查
 - 接口调用、请求方法与参数：未改动 / <经授权的变更>
 - 响应字段映射与数据展示内容：未改动 / <经授权的变更>

package/skills/use-persagy-vant/references/usage-patterns.md

@@ -10,7 +10,7 @@
 
 ## 列表页
 
-搜索功能统一使用 `search variant="pure"` 的【搜索】纯净样式，并沿用 `v-model`、`search`、`cancel` 连接既有筛选逻辑。组合 `pull-refresh`、`list`、`loading`、`empty` 表达首屏、刷新、分页、无数据和失败状态。筛选条件复杂时优先使用 `work-order-filter`；需要动态表单时使用 `form-panel`，专用面板不适用且自定义内容较多时使用 `action-sheet` 的【动作面板】自定义面板样式，仅少量轻量内容才以 `popup` 承载，不将筛选逻辑分散在列表项内。
+搜索功能统一使用 `search variant="pure"` 的【搜索】纯净样式，并沿用 `v-model`、`search`、`cancel` 连接既有筛选逻辑。组合 `pull-refresh`、`list`、`loading`、`empty` 表达首屏、刷新、分页、无数据和失败状态。筛选条件复杂时优先使用 `work-order-filter` 并核查其面板承载；需要动态表单时使用 `form-panel`，专用面板不适用的混合任务使用 `action-sheet` 已有变体或「自定义面板」示例。所有触发面板均按 `dynamic-panel-policy.md` 执行，禁止轻量 `popup` 例外，不将筛选逻辑分散在列表项内。
 
 ## 详情页
 
@@ -24,4 +24,4 @@
 
 ## 样式扩展
 
-先查目标组件的 `var.less` 与 `src/style/`。只通过公开变量或扩展点调整视觉；禁止依赖内部 DOM 层级、覆盖私有 class 或复制组件源码样式。
+先查目标组件的 `var.less` 与 `src/style/`，优先原样使用已有样式变体与变量组合；未有产品经理明确提出并确认的具体调整，不得修改组件视觉。动态面板严格执行 `dynamic-panel-policy.md`，公开变量不构成擅改样式的授权；禁止依赖内部 DOM 层级、覆盖私有 class 或复制组件源码样式。