persagy-vant 0.0.34 → 0.0.35

package/package.json

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

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

@@ -14,8 +14,8 @@ description: 使用 Persagy Vant 为 Vue 3 移动端业务页面规划、实现
 3. 阅读 `references/business-component-catalog.md`，按用户任务先确定业务组件；再从 `references/component-catalog.md` 补齐基础组件。
 4. 按 `references/component-documentation.md` 的查阅流程读取每个被选中组件的 README 和 demo：在组件库仓库中使用 `packages/persagy-mobile/src/<component>/README.zh-CN.md`，在业务项目中使用 `node_modules/persagy-vant/es/<component>/README.zh-CN.md`。涉及视觉、插槽或类型扩展时，同时查阅 `var.less`、类型定义和 demo；API、事件、插槽和导入方式均以这些资料为准。
 5. 按 `references/page-recipes.md` 组合页面，补齐加载、空数据、错误、禁用和提交中状态。用户要求“审查并优化当前页面”或语义等同的 UI 优化时，默认按 `references/reuse-policy.md` 的非侵入式优化规则执行：不得改变已有接口、请求/响应数据、字段映射、数据内容或业务事件。
-6. 使用组件提供的 props、事件、插槽、Less 变量或公开 class 扩展点；不得复制组件内部 DOM、样式或私有逻辑。
-7. 输出或提交前，按 `references/reuse-policy.md` 和 `references/design-interaction-baseline.md` 完成自查，并附上“组件复用清单”“规范落实项”和“业务与数据兼容核查”。组件复用清单必须按 `references/component-documentation.md` 使用官网中文名称和可点击的组件展示链接。
+6. 无论是单个页面审查/优化，还是从 0 到 1 的页面规划与实现，页面组件覆盖率均必须不低于 `90%`。将组件复用清单中的组件职责视为页面覆盖基线：优先保持组件原样；页面差异先使用公开 Props、事件、插槽、Less 变量或其他已有组件组合实现，不得复制组件内部 DOM、样式或私有逻辑，也不得自行覆盖组件样式。
+7. 输出或提交前，按 `references/reuse-policy.md` 和 `references/design-interaction-baseline.md` 完成自查，并附上“组件复用清单”“规范落实项”“业务与数据兼容核查”和“组件覆盖率”。组件复用清单必须按 `references/component-documentation.md` 使用官网中文名称和可点击的组件展示链接；未达到 `90%` 时，必须记录覆盖率缺口并反馈给产品经理，说明需要优化的组件变量或建议新增的组件，供其反馈组件库维护方；未经产品经理明确确认例外，不得作为合规页面交付。
 
 ## 组件缺口
 

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

@@ -6,7 +6,7 @@
 
 - `background`：含白色卡片的页面优先使用此容器；一级页面使用 `theme="default"`，其他层级页面使用 `theme="gray"`。仅在没有白色卡片且无明确背景设计时使用 `--van-gray-1`。
 - `nav-bar`、`tabbar`、`tab`、`tabs`、`sidebar`：页面与分区导航。标签较多时优先使用 `tabs` 的滚动或更多面板能力；筛选型分区选择 `type="filter"`。
-- `cell`、`cell-group`、`row`、`col`、`space`、`divider`：信息布局与分组；动态面板的页面触发器优先使用 `cell` 的【单元格】右图标样式（`right-icon="arrow"` + `click`），当前结果使用 `value` 或 `note` 回显。
+- `cell`、`cell-group`、`row`、`col`、`space`、`divider`：信息布局与分组；动态面板的页面触发器优先使用 `cell` 的【单元格】右图标样式（`right-icon="arrow"` + `click`），当前结果使用 `value` 或 `note` 回显。白色卡片内的最后一个可见 `cell` 或 `field` 设置 `border="false"`，不保留末尾分割线。
 - `empty`、`loading`、`skeleton`、`overlay`、`pull-refresh`、`list`、`pagination`：加载、空态、刷新与列表分页；页面首次进入使用 `loading` 的 `type="illustration"`，并以纯色背景承载过渡。
 - `collapse-toggle`：卡片内容区的展开/收起触发器；需要两侧分割线时使用其公开 `divider` 能力，不要自绘“查看更多/收起”控件。
 - `bottom-action-bar`、`action-bar`、`submit-bar`：固定操作区；不要自行实现 fixed footer。
@@ -23,7 +23,7 @@
 ## 内容与反馈
 
 - `label`：字段名称与回显值的首选组件，覆盖默认、加粗、链接、标签、图片视频及纵向布局；需要字段展示时优先使用，除录入、选择入口等应使用 `field` 或 `cell` 的场景外，不要为同类字段自行拼接样式。左侧标签文本尽量自带冒号，保证名称和值之间的统一阅读间距；按字段内容选择其公开展示类型。
-- `info-card`：多种类型字段的白色信息卡片，可接收字段数组或插槽，并提供更多字段、固定分割线与展开收起能力；字段类型较多时优先使用，内部字段使用 `label` 呈现。
+- `info-card`：多种类型字段的白色信息卡片，可接收字段数组或插槽，并提供更多字段、固定分割线与展开收起能力；字段类型较多时优先使用，内部字段使用 `label` 呈现。固定分割线只用于字段分组，不作为卡片末尾分割线。
 - `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`：内容展示与状态标识。
@@ -43,6 +43,7 @@
 - 上传内容：图片、视频、文件一律使用 `uploader` 的【文件上传】表单示例样式；已达 `9` 个时继续点击上传区域，提示“最多支持上传9个”。
 - 文本录入：一律使用 `field` 的【输入框】换行文本域样式（`type="textarea"` + `label-position="top"`）；最大 `200` 字并显示字数统计。
 - 搜索：一律使用 `search variant="pure"` 的【搜索】纯净样式；保留既有 `v-model`、`search` 和 `cancel` 事件语义。
+- 白色卡片列表：最后一个实际可见控件的末尾分割线必须隐藏；`cell`/`field` 用 `border="false"`，`material-display-bar` 用 `divider="false"`，其他组件查 README 后使用其公开能力。
 - 动态面板触发器优先使用 `cell` 的【单元格】右图标样式（`right-icon="arrow"` + `click`）；当前结果使用 `value` 或 `note` 回显。具体面板优先从 `business-component-catalog.md` 选择。
 - 页面有主操作时优先使用 `bottom-action-bar`；在表单提交语义明确时使用 `submit-bar`。
 - 非破坏性的局部快捷操作使用 `popover`；会影响全局数据或需要确认的操作不使用气泡菜单。

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

@@ -6,7 +6,7 @@
 
 1. 从 `business-component-catalog.md` 和 `component-catalog.md` 确定候选组件。
 2. 阅读所选组件的 `README.zh-CN.md`：先确认适用场景和演示，再确认实现所需的 Props、事件与插槽。
-3. 需要视觉适配时，读取该组件 `var.less` 中的公开变量；需要复杂数据、双向绑定或事件时，读取类型定义；需要组合方式时，读取 demo。新增的 `content-panel`、`title-bar`、`material-action-bar`、`material-detail`、`material-display-bar` 必须在使用前完整执行此步骤。
+3. 需要视觉适配时，先保持组件默认样式；仅在需求确有差异时读取该组件 `var.less` 中的公开变量，再检查 Props、插槽或其他已有组件组合。不得通过页面 CSS 覆盖组件内部样式。需要复杂数据、双向绑定或事件时，读取类型定义；需要组合方式时，读取 demo。新增的 `content-panel`、`title-bar`、`material-action-bar`、`material-detail`、`material-display-bar` 必须在使用前完整执行此步骤。
 4. 仅使用已文档化的公开能力。README 未列出的能力不得假定存在；无法满足时按 `component-gap-template.md` 输出缺口说明。
 
 ## 需求到资料的映射

package/skills/use-persagy-vant/references/component-gap-template.md

@@ -12,5 +12,8 @@
 - 最小输入数据：<数据结构示例>
 - 预期输出/事件：<选择值、确认事件等>
 - 影响页面：<当前页面及可能复用的页面>
+- 覆盖率影响：<当前覆盖率、未覆盖 UI 单元及达到 90% 所需能力>
+- 建议优化方向：<优先补充的组件变量/API；无法满足时建议新增组件>
+- 需产品经理确认：<临时例外、优先级或业务取舍；产品经理将此说明反馈给组件库维护方>
 - 临时方案：<仅说明是否可调整已有流程，不编写新基础/业务组件>
 ```

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

@@ -16,6 +16,7 @@
 - 信息展示和录入控件以白色卡片承载；背景主题与页面层级不一致时，以明确的页面原型为准。
 - 卡片内容与页面左右边缘保持 `16px` 间距；卡片之间间距 `8px`。
 - 模块之间、控件之间使用 `8px` 或 `12px` 间距；仅左右排布的两组字段，纵向间距不得小于 `8px`。
+- 白色卡片内有分割线的控件列表，最后一个可见控件必须隐藏末尾分割线；使用组件公开能力实现，例如 `cell`/`field` 设置 `border="false"`、`material-display-bar` 设置 `divider="false"`。根据条件渲染或 `visible` 判定最后一个实际可见项，不使用 CSS 强行隐藏分割线。
 - 需要展示字段名称与回显值时，优先使用 `label`，不要手写同类标签和值的排版；左侧标签文本尽量自带冒号，保证名称和值之间的统一阅读间距。录入或选择入口仍使用 `field`、`cell` 等对应组件。多字段成组或存在多种字段展示类型（文字、强调文字、链接、标签、图片/视频或纵向字段）时，优先使用 `info-card` + `label`；按字段内容选择 `label` 的公开展示类型和纵向布局。字段无数据时整项隐藏，使用 `info-card` 时通过字段的 `visible: false` 实现。
 - 触发器没有内置按压态时，叠加 `5%` 黑色透明遮罩作为按压反馈；有内置按压态的组件不重复添加。
 - 字体跟随设备系统字体。常规层级使用：一级标题 `16px` 加粗、二级标题与正文 `14px`、补充说明 `12px`、底部菜单最小 `10px`；有明确业务需要时可调整。

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

@@ -32,7 +32,7 @@
 3. 需要展示字段名称与回显值时优先使用 `label`，左侧标签文本尽量自带冒号；录入或选择入口仍使用 `field`、`cell` 等对应组件。
 4. 多字段成组或字段类型较多时用 `info-card` 承载 `label`；简单内容再用 `cell-group`、`card`、`divider` 组织分组。
 5. 按字段内容选择 `label` 的默认、加粗、链接、标签、图片视频或纵向布局；媒体点击接入 `image-preview` 或 `video-preview`。
-6. `info-card` 的接口字段使用 `visible: false` 隐藏无数据项。需要更多字段时优先使用其固定分割线或展开收起能力；其他卡片内容的展开收起使用 `collapse-toggle` 或 `blue-mark-header`，不自行绘制触发器。
+6. `info-card` 的接口字段使用 `visible: false` 隐藏无数据项。需要更多字段时优先使用其固定分割线或展开收起能力；其他卡片内容的展开收起使用 `collapse-toggle` 或 `blue-mark-header`，不自行绘制触发器。白色卡片内最后一个实际可见控件如有分割线，使用公开属性隐藏：`cell`/`field` 设 `border="false"`，`material-display-bar` 设 `divider="false"`。
 7. 主要处理动作使用 `bottom-action-bar`；可能造成数据变更的操作先经 `dialog`。
 
 ## 编辑与全局操作

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

@@ -7,6 +7,17 @@
 - 必须处理 loading、empty、error、disabled 或 submitting 等与页面类型相关的状态；整个页面首次进入时，使用纯色背景叠加 `loading type="illustration"` 进行过渡。
 - 必须在最终回复、PR 描述或交付说明中附上组件复用清单。
 
+## 页面组件覆盖率：所有任务的强制规则
+
+凡调用本 Skill 的页面任务，不论是单个页面审查/优化、已有页面改造，还是从 0 到 1 的页面规划与实现，页面组件覆盖率均必须不低于 `90%`。覆盖率以“由 Persagy Vant 组件、业务组件或其公开插槽承载的可见/可交互 UI 单元 ÷ 页面全部可见/可交互 UI 单元”计算；纯页面根容器、数据循环和接口/状态适配不计为自定义 UI 单元。
+
+产品经理确认组件复用清单后，清单中的组件和职责进一步作为页面覆盖基线。保持组件默认视觉和交互，除非产品经理明确要求变更。
+
+1. 先使用组件公开 Props、事件、插槽和 Less/CSS 变量；再组合其他已有组件。原页面中与组件不同的元素、字段或展示需求，优先通过这些公开能力实现，不自行编写同类结构或样式。
+2. 禁止通过页面 CSS 覆盖组件内部 DOM、私有 class 或默认视觉；禁止为匹配旧页面手写按钮、字段、上传、选择、标题、列表、面板等已有组件能力。仅允许为页面根布局、组件间间距和文档明确的公开扩展点编写最小样式。
+3. 如果采用组件默认样式、公开变量、插槽和已有组件组合仍无法覆盖需求，停止扩大页面自定义样式；按 `component-gap-template.md` 输出缺口，明确建议优化的组件变量或新增组件，并反馈给产品经理，由产品经理反馈组件库维护方。
+4. 交付前列出组件覆盖率、计算范围、使用的公开变量/插槽，以及保留的页面级样式；覆盖率低于 `90%` 时，必须在交付说明中附上“组件覆盖率缺口记录”并反馈给产品经理。只有产品经理明确确认例外后，才可交付当前页面；该记录作为后续优化变量或新增组件、使页面达到 `90%` 的输入。
+
 ## 当前页面审查与优化：非侵入式规则
 
 当用户提出“审查并优化当前页面”、UI 优化、视觉改造或同义需求时，默认只优化页面布局、组件复用、样式、可访问性和既有状态的呈现；未经用户明确授权，不得改变业务逻辑或数据契约。
@@ -23,6 +34,7 @@
 - 禁止创建名称或功能与组件库现有能力近似的组件、wrapper 或临时复制品。
 - 禁止拷贝组件源码、依赖组件私有 DOM/class，或用 CSS 覆盖内部结构以改变交互。
 - 禁止臆造组件 props、事件、插槽、类型或主题变量。
+- 禁止在产品经理确认组件复用清单后，自行修改组件默认样式或以页面 CSS 覆盖组件内部样式。
 
 ## 允许的页面代码
 
@@ -50,6 +62,20 @@
 - 路由参数、业务事件、权限与提交逻辑：未改动 / <经授权的变更>
 - 验证：<已运行的相关测试或静态差异核对结果>
 
+## 组件覆盖率
+- 覆盖率：<不少于 90%；按“组件/公开插槽承载的可见或可交互 UI 单元 ÷ 页面全部此类 UI 单元”计算>
+- 公开扩展：<使用的 Props、插槽、Less/CSS 变量；无则说明>
+- 页面级样式：<仅根布局/组件间距；无则说明>
+- 未覆盖原因：<无；或低于 90% 的原因及产品经理确认情况>
+
+## 组件覆盖率缺口记录
+- 是否需要记录：<否；或是，当前覆盖率低于 90%>
+- 未覆盖 UI 单元及原因：<逐项说明；关联已有组件时写明组件中文名>
+- 已尝试的公开能力：<Props、事件、插槽、Less/CSS 变量及其不足>
+- 建议组件库优化：<需补充的变量/API；或建议新增的组件及最小能力>
+- 对产品经理的反馈：<需要其确认的临时例外、优先级或业务取舍>
+- 后续闭环：<产品经理反馈组件库维护方；组件优化/新增后重新复用并验收 ≥90%>
+
 ## 组件缺口
-- 无；或见组件缺口说明。
+- 无；或见组件缺口说明及组件覆盖率缺口记录。
 ```

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

@@ -14,7 +14,7 @@
 
 ## 详情页
 
-白色卡片外层的一级标题使用 `blue-mark-header`，卡片内的二级标题使用默认样式的 `title-bar`。字段名称与回显值优先使用 `label`，左侧标签文本尽量自带冒号；多字段成组或字段类型较多时使用 `info-card` + `label`。其余信息可用 `cell-group`、`card`、`tag` 组织，页面级动作放在 `bottom-action-bar` 或 `action-bar`。危险或不可逆操作必须经 `dialog` 确认，并在完成后用 `toast` 或 `notify` 反馈。
+白色卡片外层的一级标题使用 `blue-mark-header`，卡片内的二级标题使用默认样式的 `title-bar`。字段名称与回显值优先使用 `label`，左侧标签文本尽量自带冒号；多字段成组或字段类型较多时使用 `info-card` + `label`。其余信息可用 `cell-group`、`card`、`tag` 组织，页面级动作放在 `bottom-action-bar` 或 `action-bar`。白色卡片内最后一个实际可见控件的末尾分割线必须隐藏：`cell`/`field` 使用 `border="false"`，`material-display-bar` 使用 `divider="false"`。危险或不可逆操作必须经 `dialog` 确认，并在完成后用 `toast` 或 `notify` 反馈。
 
 ## 物料流程与阅读确认