persagy-vant 0.0.28 → 0.0.30

package/lib/work-order-filter/style/index.js

@@ -2,7 +2,6 @@ require("../../style/base.css");
 require("../../badge/index.css");
 require("../../icon/index.css");
 require("../../filter-tag/index.css");
-require("../../blue-mark/index.css");
 require("../../loading/index.css");
 require("../../picker/index.css");
 require("../../datetime-picker/index.css");
@@ -18,4 +17,6 @@ require("../../bottom-action-bar/index.css");
 require("../../radio-group/index.css");
 require("../../radio/index.css");
 require("../../cell/index.css");
+require("../../divider/index.css");
+require("../../blue-mark/index.css");
 require("../index.css");

package/lib/work-order-filter/style/less.js

@@ -2,7 +2,6 @@ require("../../style/base.less");
 require("../../badge/index.less");
 require("../../icon/index.less");
 require("../../filter-tag/index.less");
-require("../../blue-mark/index.less");
 require("../../loading/index.less");
 require("../../picker/index.less");
 require("../../datetime-picker/index.less");
@@ -18,4 +17,6 @@ require("../../bottom-action-bar/index.less");
 require("../../radio-group/index.less");
 require("../../radio/index.less");
 require("../../cell/index.less");
+require("../../divider/index.less");
+require("../../blue-mark/index.less");
 require("../index.less");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "persagy-vant",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "description": "Lightweight Mobile UI Components built on Vue",
   "main": "lib/vant.cjs.js",
   "module": "es/index.mjs",
@@ -22,6 +22,7 @@
     "test": "vant-cli test",
     "build": "vant-cli build",
     "build:site": "vant-cli build-site",
+    "prepack": "pnpm build",
     "release": "standard-version",
     "release:alpha": "npm run release -- --prerelease alpha",
     "release:patch": "npm run release -- --release-as patch",

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

@@ -12,7 +12,7 @@ description: 使用 Persagy Vant 为 Vue 3 移动端业务页面规划、实现
 1. 阅读 `references/reuse-policy.md`，确认复用边界与禁止项。
 2. 阅读 `references/design-interaction-baseline.md`，将其中适用的设计、状态和反馈规则落实到页面；如与产品需求冲突，以明确的产品需求为准并说明差异。
 3. 阅读 `references/business-component-catalog.md`，按用户任务先确定业务组件；再从 `references/component-catalog.md` 补齐基础组件。
-4. 阅读每个被选中组件的 README 和 demo：在组件库仓库中使用 `packages/persagy-mobile/src/<component>/README.zh-CN.md`，在业务项目中使用 `node_modules/persagy-vant/es/<component>/README.zh-CN.md`。API、事件、插槽和导入方式均以这些资料为准。
+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` 组合页面，补齐加载、空数据、错误、禁用和提交中状态。
 6. 使用组件提供的 props、事件、插槽、Less 变量或公开 class 扩展点；不得复制组件内部 DOM、样式或私有逻辑。
 7. 输出或提交前，按 `references/reuse-policy.md` 和 `references/design-interaction-baseline.md` 完成自查，并附上“组件复用清单”和“规范落实项”。
@@ -26,5 +26,5 @@ description: 使用 Persagy Vant 为 Vue 3 移动端业务页面规划、实现
 ## 资料边界
 
 - 组件库仓库中的 `packages/persagy-mobile/src/<component>/README.zh-CN.md`，或已安装包中的 `node_modules/persagy-vant/es/<component>/README.zh-CN.md`，连同类型定义和 demo，是组件 API 的唯一事实来源。
-- `references/` 用于选型、复用规则、页面组合与设计交互基线，不能据此编造不存在的 props 或事件。
+- `references/` 用于选型、组件文档查阅、复用规则、页面组合与设计交互基线，不能据此编造不存在的 props 或事件。
 - 当前目录是对外分发版本；随 `persagy-vant` 发布版本一起更新。组件库维护、扩展或新增组件不属于本 Skill 的授权范围。

package/skills/use-persagy-vant/agents/openai.yaml

@@ -1,4 +1,4 @@
 interface:
   display_name: "使用 Persagy Vant"
   short_description: "强制复用 Persagy 移动端组件构建页面"
-  default_prompt: "使用 $use-persagy-vant 组件库实现这个 Vue 3 移动端业务页面，并输出组件复用清单。"
+  default_prompt: "使用 $use-persagy-vant 实现这个 Vue 3 移动端业务页面：先从组件目录选型并读取所选组件说明和 demo，再使用公开能力实现需求；输出组件复用清单。"

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

@@ -15,6 +15,7 @@
 | 业务层级选项 | `tree-select` | 单选/多选树、父子联动和展开收起 |
 | 页面底部主次操作 | `bottom-action-bar` | 固定底栏、更多操作、按钮 loading/disabled |
 | 蓝色标识或业务标注 | `blue-mark` | 相同视觉的业务标签/标记 |
+| 展示多类型详情字段 | `info-card` + `label` | 文字、强调、链接、标签、图片/视频字段回显、接口字段可见性、更多信息与展开收起 |
 | 视频预览 | `video-preview` | 视频预览容器与交互 |
 | AI 对话面板/移动端 bot | `bot-mobile` 系列（`BotMobile`/`BotMobilePrompts`/`BotMobileContextTags`/`BotMobileSheet`/`BotMobileView`/`BotFab`/`BotHistoryDrawer`/`BotVoiceBar`/`BotSessionList`） | 对话流、消息渲染、示例输入、上下文标签、呼出面板、纯展示消息渲染、悬浮入口、会话历史抽屉、按住说话和全部会话列表 |
 | 展示和处理工单 | `work-order-card` | 工单标题、标签、位置、展开详情和卡片内操作 |
@@ -23,7 +24,8 @@
 
 - **创建或编辑工单**：`form` + `field` + `location-select`/`object-select` + `single-person-select`/`multi-person-select` + `material-add` + `bottom-action-bar`。
 - **工单列表**：`work-order-filter` + `pull-refresh` + `list` + `card` + `empty`。
-- **工单列表（包含展开信息或行内操作）**：`work-order-filter` + `pull-refresh` + `list` + `work-order-card` + `empty`。
+- **工单列表（包含展开信息或行内操作）**：按页面层级选择 `background` 主题 + `work-order-filter` + `pull-refresh` + `list` + `work-order-card` + `empty`；不要在工单卡片页面省略背景容器。
 - **按楼层选择空间**：`floor-select`；不要自行组合楼座标签、楼层导航和空间选择列表。
 - **批量任务或物料确认**：`quantity-input` 或 `material-add` + `bottom-action-bar` + `dialog`。
 - **巡检/维修详情**：`nav-bar` + `cell-group`/`card` + `tag` + `action-bar`/`bottom-action-bar`。
+- **字段型业务详情**：多类型字段优先使用 `info-card` + `label`，按字段内容选择 `label` 的默认、加粗、链接、标签、图片视频或纵向布局；图片或视频字段通过 `click-media` 事件连接 `image-preview` 或 `video-preview`，不要在页面内重复实现媒体字段布局。

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

@@ -1,13 +1,14 @@
 # 基础组件目录
 
-本文件用于快速选型，不替代 API 文档。props、事件、插槽、样式变量和导入方式必须以 `packages/persagy-mobile/src/<component>/README.zh-CN.md`、类型定义和 demo 为准。
+本文件用于快速选型，不替代 API 文档。选中组件后的查阅顺序见 `component-documentation.md`；props、事件、插槽、样式变量和导入方式必须以 `packages/persagy-mobile/src/<component>/README.zh-CN.md`、类型定义和 demo 为准。
 
 ## 页面骨架与状态
 
-- `background`：带主题背景的页面内容容器；普通页面仍以 `--van-gray-1` 为默认背景，只有设计明确要求时才选择内置主题或自定义背景图。
+- `background`：含白色卡片的页面优先使用此容器；一级页面使用 `theme="default"`，其他层级页面使用 `theme="gray"`。仅在没有白色卡片且无明确背景设计时使用 `--van-gray-1`。
 - `nav-bar`、`tabbar`、`tab`、`tabs`、`sidebar`：页面与分区导航。标签较多时优先使用 `tabs` 的滚动或更多面板能力；筛选型分区选择 `type="filter"`。
 - `cell`、`cell-group`、`row`、`col`、`space`、`divider`：信息布局与分组。
 - `empty`、`loading`、`skeleton`、`overlay`、`pull-refresh`、`list`、`pagination`：加载、空态、刷新与列表分页。
+- `collapse-toggle`：卡片内容区的展开/收起触发器；需要两侧分割线时使用其公开 `divider` 能力，不要自绘“查看更多/收起”控件。
 - `bottom-action-bar`、`action-bar`、`submit-bar`：固定操作区；不要自行实现 fixed footer。
 
 ## 表单与通用选择
@@ -19,6 +20,9 @@
 
 ## 内容与反馈
 
+- `label`：详情字段的名称与回显值展示，覆盖默认、加粗、链接、标签、图片视频及纵向布局；不要为同类字段自行拼接样式。按字段内容选择其公开展示类型。
+- `info-card`：多种类型字段的白色信息卡片，可接收字段数组或插槽，并提供更多字段、固定分割线与展开收起能力；字段类型较多时优先使用。
+- `blue-mark`、`blue-mark-header`：分组/卡片标题及标题栏操作；标题栏需要必填标识、右侧操作或展开收起时优先使用 `blue-mark-header`。
 - `card`、`tag`、`badge`、`notice-bar`、`image`、`icon`：内容展示与状态标识。
 - `popup`、`action-sheet`、`share-sheet`、`popover`：动作选择与自定义容器。
 - `dialog`、`toast`、`notify`：确认、短反馈与顶部通知；不得重复封装确认弹窗或全局提示。
@@ -29,6 +33,7 @@
 
 - 需要承载自定义表单/内容：使用 `popup`；仅确认操作：使用 `dialog`；短暂提示：使用 `toast` 或 `notify`。
 - 可分页的业务列表：组合 `list`、`pull-refresh`、`empty`、`loading`，不要手写重复加载状态。
+- 详情页的字段组优先选择 `info-card`；只有简单、不需要统一字段样式或展开逻辑的内容才组合 `cell-group` 或 `card`。
 - 选择入口默认使用 `field` 或 `cell`，具体选择面板优先从 `business-component-catalog.md` 选择。
 - 页面有主操作时优先使用 `bottom-action-bar`；在表单提交语义明确时使用 `submit-bar`。
 - 非破坏性的局部快捷操作使用 `popover`；会影响全局数据或需要确认的操作不使用气泡菜单。

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

@@ -0,0 +1,45 @@
+# 组件说明查阅与维护
+
+组件 README 是组件能力、API、事件、插槽、类型和样式变量的唯一事实来源。组件目录只用于选型，页面配方只用于组合；不得在它们中复制完整 API 或变量表。
+
+## 页面实现时的查阅流程
+
+1. 从 `business-component-catalog.md` 和 `component-catalog.md` 确定候选组件。
+2. 阅读所选组件的 `README.zh-CN.md`：先确认适用场景和演示，再确认实现所需的 Props、事件与插槽。
+3. 需要视觉适配时，读取该组件 `var.less` 中的公开变量；需要复杂数据或事件时，读取类型定义；需要组合方式时，读取 demo。
+4. 仅使用已文档化的公开能力。README 未列出的能力不得假定存在；无法满足时按 `component-gap-template.md` 输出缺口说明。
+
+## 需求到资料的映射
+
+| 产品需求 | 必读资料 |
+| --- | --- |
+| 选择合适组件 | 组件目录、业务组件目录、对应 README 的介绍和 demo |
+| 配置交互、按钮、校验或回调 | README 的 Props、Events、Slots、类型定义 |
+| 调整间距、色彩、尺寸或层级 | README 的样式变量和 `var.less` |
+| 组合多个组件完成页面 | 页面配方、各组件 demo |
+| 评估是否需要新组件 | 组件目录、README、组件缺口模板 |
+
+## 给产品经理的请求方式
+
+在需求中写明业务目标和涉及组件，并要求先读组件说明。例如：
+
+```md
+使用 $use-persagy-vant 实现工单详情页。先读取 `info-card`、`label`、`bottom-action-bar` 的组件说明和 demo；按其公开 Props、事件、插槽与样式变量实现需求，不新增同类组件。
+```
+
+无需指定组件时，也可以要求 AI 先完成选型：
+
+```md
+使用 $use-persagy-vant 实现可编辑的工单详情。先从组件目录选择组件，再阅读所选组件说明后实现；交付时列出组件复用清单和实际使用的扩展能力。
+```
+
+## 组件 README 的维护标准
+
+每个组件 README 至少维护以下内容：
+
+1. **适用场景**：解决什么问题；易误用时说明不适用场景。
+2. **代码演示**：基础用法及有代表性的扩展能力。
+3. **公开能力**：Props、Events、Slots、类型定义和样式变量。
+4. **常用组合**：仅在组件有明确搭配对象时说明，避免重复页面配方。
+
+新增或修改 API、事件、插槽、样式变量和推荐组合时，必须在同一改动中更新双语 README、demo 和组件目录的简短选型描述。

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

@@ -10,10 +10,11 @@
 
 ## 布局与视觉
 
-- 普通页面背景使用 `--van-gray-1`；信息展示和录入控件以白色卡片承载。
+- 页面含白色卡片时，优先使用 `background` 组件承载页面内容：一级页面（首页）使用 `theme="default"`，其他层级页面使用 `theme="gray"`。无白色卡片且无明确背景设计时，使用 `--van-gray-1`。
+- 信息展示和录入控件以白色卡片承载；背景主题与页面层级不一致时，以明确的页面原型为准。
 - 卡片内容与页面左右边缘保持 `16px` 间距；卡片之间间距 `8px`。
 - 模块之间、控件之间使用 `8px` 或 `12px` 间距；仅左右排布的两组字段，纵向间距不得小于 `8px`。
-- 文本按内容与可读性选择换行；超出两行时省略。字段无数据时整项隐藏，不展示空占位字段。
+- 存在多种字段展示类型（文字、强调文字、链接、标签、图片/视频或纵向字段）时，优先使用 `info-card` + `label`；按字段内容选择 `label` 的公开展示类型和纵向布局。字段无数据时整项隐藏，使用 `info-card` 时通过字段的 `visible: false` 实现。
 - 触发器没有内置按压态时，叠加 `5%` 黑色透明遮罩作为按压反馈；有内置按压态的组件不重复添加。
 - 字体跟随设备系统字体。常规层级使用：一级标题 `16px` 加粗、二级标题与正文 `14px`、补充说明 `12px`、底部菜单最小 `10px`；有明确业务需要时可调整。
 - 信息层级最多使用四级：一级标题优先采用 `blue-mark`，二级使用灰底加粗文本，三级使用白底加粗文本，四级使用弱化的卡片内容；特殊业务可按组件文档调整。
@@ -48,7 +49,7 @@
 - 操作成功或失败均提供全局反馈；重要或高风险信息使用 `dialog`、`notice-bar` 等强提醒样式。
 - 所有不可用操作都必须可被点击或聚焦后说明具体不可用原因，提示文案为“`<具体原因>`”，不得只展示禁用态而无解释。
 - 友好提示仅展示一次，点击空白区域后消失。
-- 折叠/展开内容默认展开第一组数据。
+- 折叠/展开内容默认展开第一组数据；详情字段组优先使用 `info-card`，其他卡片内容使用 `collapse-toggle` 或 `blue-mark-header` 的公开展开能力。
 - 保存筛选条件后，筛选对应数据并提示“保存成功”；筛选图标右上角显示徽标标记。
 - 重要文本优先完整换行；采用省略时，提供下钻、展开、气泡或全局提示等方式查看完整内容。长度不稳定的内容可在最大高度后提供“展开”入口。
 

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

@@ -12,16 +12,19 @@
 
 ## 可筛选的业务列表
 
-1. 顶部使用 `search` 或已有的筛选触发入口。
-2. 工单场景使用 `work-order-filter`；其他复杂条件使用 `popup` + `form` + 现有选择组件。
-3. 搜索触发后自动聚焦；非业务必需时提供取消操作。使用 `pull-refresh` + `list` 呈现数据，首屏/分页加载使用 `loading`，无结果使用 `empty`，末页显示无更多数据提示。
-4. 简单列表项使用 `cell` 或 `card`；工单需要展示标签、位置、展开详情或行内操作时使用 `work-order-card`；状态使用 `tag` 或 `badge`。
+1. 页面含白色卡片时，用 `background` 承载页面内容：一级页面使用 `theme="default"`，其他层级页面使用 `theme="gray"`。
+2. 顶部使用 `search` 或已有的筛选触发入口。
+3. 工单场景使用 `work-order-filter`；其他复杂条件使用 `popup` + `form` + 现有选择组件。
+4. 搜索触发后自动聚焦；非业务必需时提供取消操作。使用 `pull-refresh` + `list` 呈现数据，首屏/分页加载使用 `loading`，无结果使用 `empty`，末页显示无更多数据提示。
+5. 简单列表项使用 `cell` 或 `card`；工单需要展示标签、位置、展开详情或行内操作时使用 `work-order-card`，并与 `background` 组合；状态使用 `tag` 或 `badge`。
 
 ## 详情与处理页
 
-1. 用 `cell-group`、`card`、`divider` 组织信息分组。
-2. 需要展开内容使用 `collapse`，需要图文使用 `image`，需要状态标记使用 `tag`/`badge`。
-3. 主要处理动作使用 `bottom-action-bar`；可能造成数据变更的操作先经 `dialog`。
+1. 页面含白色卡片时，用 `background` 承载页面内容：一级页面使用 `theme="default"`，其他层级页面使用 `theme="gray"`。
+2. 多类型字段详情优先用 `info-card` 承载；简单内容再用 `cell-group`、`card`、`divider` 组织分组。
+3. 字段回显使用 `label`，按字段内容选择默认、加粗、链接、标签、图片视频或纵向布局；媒体点击接入 `image-preview` 或 `video-preview`。
+4. `info-card` 的接口字段使用 `visible: false` 隐藏无数据项。需要更多字段时优先使用其固定分割线或展开收起能力；其他卡片内容的展开收起使用 `collapse-toggle` 或 `blue-mark-header`，不自行绘制触发器。
+5. 主要处理动作使用 `bottom-action-bar`；可能造成数据变更的操作先经 `dialog`。
 
 ## 编辑与全局操作