persagy-vant 0.0.38 → 0.0.39

package/lib/work-order-filter/index.css

@@ -1 +1 @@
-:root{--van-work-order-filter-background-color: var(--van-white);--van-work-order-filter-card-color: var(--van-gray-2)}.van-work-order-filter{display:flex;flex-direction:column;height:calc(100vh - 96px);max-height:calc(100vh - 96px);overflow:hidden;background:var(--van-work-order-filter-background-color)}.van-work-order-filter>.van-action-sheet__content{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}.van-work-order-filter__nav{flex:none;--van-nav-bar-background-color: var(--van-white)}.van-work-order-filter__nav .van-nav-bar__left--slot{padding:0 12px}.van-work-order-filter__body{flex:1;min-height:0;padding-bottom:var(--van-padding-md);overflow-y:auto}.van-work-order-filter__section{position:relative}.van-work-order-filter__section .van-blue-mark-header{padding:var(--van-padding-md) 22px var(--van-padding-xs)}.van-work-order-filter__custom{width:100%}.van-work-order-filter__select-all{position:absolute;top:var(--van-padding-md);right:22px;padding:0;color:var(--van-primary-color);font-size:var(--van-font-size-md);font-weight:var(--van-font-weight-bold);line-height:var(--van-line-height-lg);background:transparent;border:0}.van-work-order-filter__card{margin:0 var(--van-padding-md);overflow:hidden;background:var(--van-work-order-filter-card-color);border-radius:8px;--van-cell-border-color: #e1e5eb}.van-work-order-filter__card .van-cell{min-height:44px;background:transparent}.van-work-order-filter__card .van-checkbox,.van-work-order-filter__card .van-radio{margin:0}.van-work-order-filter__project-list{width:100%}.van-work-order-filter__project-item{position:relative;touch-action:pan-y;transition:transform .16s cubic-bezier(.2,0,0,1)}.van-work-order-filter__project-item--dragging{z-index:1;opacity:.82;box-shadow:0 4px 12px rgba(27,33,41,.16);transition:none}.van-work-order-filter__project-move{transition:transform .16s cubic-bezier(.2,0,0,1)}.van-work-order-filter__drag-handle{display:flex;align-items:center;justify-content:center;width:16px;height:var(--van-cell-line-height);margin-right:var(--van-padding-base);color:var(--van-text-color);cursor:grab;touch-action:none}.van-work-order-filter__drag-handle:active{cursor:grabbing}.van-work-order-filter__sort-cards{display:flex;flex-direction:column;gap:10px}.van-work-order-filter__tags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--van-padding-xs);margin:0 var(--van-padding-md)}.van-work-order-filter__tags .van-filter-tag{width:100%;min-width:0;text-align:center}.van-work-order-filter__time-trigger{width:auto;margin:var(--van-padding-xs) var(--van-padding-md) 0;background:var(--van-work-order-filter-card-color);border-radius:8px}.van-work-order-filter__time-trigger .van-cell__label{white-space:nowrap}.van-work-order-filter__time-picker-overlay{position:absolute;z-index:10;inset:0;display:flex;align-items:flex-end;background:rgba(0,0,0,.45)}.van-work-order-filter__time-picker-panel{width:100%;overflow:hidden;background:var(--van-white);border-radius:16px 16px 0 0}.van-work-order-filter__time-picker-enter-active,.van-work-order-filter__time-picker-leave-active{transition:opacity var(--van-animation-duration-base) var(--van-animation-timing-function-enter)}.van-work-order-filter__time-picker-enter-active .van-work-order-filter__time-picker-panel,.van-work-order-filter__time-picker-leave-active .van-work-order-filter__time-picker-panel{transition:transform var(--van-animation-duration-base) var(--van-animation-timing-function-enter)}.van-work-order-filter__time-picker-leave-active,.van-work-order-filter__time-picker-leave-active .van-work-order-filter__time-picker-panel{transition-timing-function:var(--van-animation-timing-function-leave)}.van-work-order-filter__time-picker-enter-from,.van-work-order-filter__time-picker-leave-to{opacity:0}.van-work-order-filter__time-picker-enter-from .van-work-order-filter__time-picker-panel,.van-work-order-filter__time-picker-leave-to .van-work-order-filter__time-picker-panel{transform:translate3d(0,100%,0)}.van-work-order-filter__footer{flex:none}
+:root{--van-work-order-filter-background-color: var(--van-white);--van-work-order-filter-card-color: var(--van-gray-2)}.van-work-order-filter{display:flex;flex-direction:column;height:calc(100vh - 96px);max-height:calc(100vh - 96px);overflow:hidden;background:var(--van-work-order-filter-background-color)}.van-work-order-filter>.van-action-sheet__content{display:flex;flex:1;flex-direction:column;min-height:0;gap:0;padding:0;overflow:hidden}.van-work-order-filter__nav{flex:none;--van-nav-bar-background-color: var(--van-white)}.van-work-order-filter__nav .van-nav-bar__left--slot{padding:0 12px}.van-work-order-filter__body{flex:1;min-height:0;padding-bottom:var(--van-padding-md);overflow-y:auto}.van-work-order-filter__section{position:relative}.van-work-order-filter__section .van-blue-mark-header{padding:var(--van-padding-md) 22px var(--van-padding-xs)}.van-work-order-filter__custom{width:100%}.van-work-order-filter__select-all{position:absolute;top:var(--van-padding-md);right:22px;padding:0;color:var(--van-primary-color);font-size:var(--van-font-size-md);font-weight:var(--van-font-weight-bold);line-height:var(--van-line-height-lg);background:transparent;border:0}.van-work-order-filter__card{margin:0 var(--van-padding-md);overflow:hidden;background:var(--van-work-order-filter-card-color);border-radius:8px;--van-cell-border-color: #e1e5eb}.van-work-order-filter__card .van-cell{min-height:44px;background:transparent}.van-work-order-filter__card .van-checkbox,.van-work-order-filter__card .van-radio{margin:0}.van-work-order-filter__project-list{width:100%}.van-work-order-filter__project-item{position:relative;touch-action:pan-y;transition:transform .16s cubic-bezier(.2,0,0,1)}.van-work-order-filter__project-item--dragging{z-index:1;opacity:.82;box-shadow:0 4px 12px rgba(27,33,41,.16);transition:none}.van-work-order-filter__project-move{transition:transform .16s cubic-bezier(.2,0,0,1)}.van-work-order-filter__drag-handle{display:flex;align-items:center;justify-content:center;width:16px;height:var(--van-cell-line-height);margin-right:var(--van-padding-base);color:var(--van-text-color);cursor:grab;touch-action:none}.van-work-order-filter__drag-handle:active{cursor:grabbing}.van-work-order-filter__sort-cards{display:flex;flex-direction:column;gap:10px}.van-work-order-filter__tags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--van-padding-xs);margin:0 var(--van-padding-md)}.van-work-order-filter__tags .van-filter-tag{width:100%;min-width:0;text-align:center}.van-work-order-filter__time-trigger{width:auto;margin:var(--van-padding-xs) var(--van-padding-md) 0;background:var(--van-work-order-filter-card-color);border-radius:8px}.van-work-order-filter__time-trigger .van-cell__label{white-space:nowrap}.van-work-order-filter__time-picker-overlay{position:absolute;z-index:10;inset:0;display:flex;align-items:flex-end;background:rgba(0,0,0,.45)}.van-work-order-filter__time-picker-panel{width:100%;overflow:hidden;background:var(--van-white);border-radius:16px 16px 0 0}.van-work-order-filter__time-picker-enter-active,.van-work-order-filter__time-picker-leave-active{transition:opacity var(--van-animation-duration-base) var(--van-animation-timing-function-enter)}.van-work-order-filter__time-picker-enter-active .van-work-order-filter__time-picker-panel,.van-work-order-filter__time-picker-leave-active .van-work-order-filter__time-picker-panel{transition:transform var(--van-animation-duration-base) var(--van-animation-timing-function-enter)}.van-work-order-filter__time-picker-leave-active,.van-work-order-filter__time-picker-leave-active .van-work-order-filter__time-picker-panel{transition-timing-function:var(--van-animation-timing-function-leave)}.van-work-order-filter__time-picker-enter-from,.van-work-order-filter__time-picker-leave-to{opacity:0}.van-work-order-filter__time-picker-enter-from .van-work-order-filter__time-picker-panel,.van-work-order-filter__time-picker-leave-to .van-work-order-filter__time-picker-panel{transform:translate3d(0,100%,0)}.van-work-order-filter__footer{flex:none}

package/lib/work-order-filter/index.less

@@ -18,6 +18,8 @@
     flex: 1;
     flex-direction: column;
     min-height: 0;
+    gap: 0;
+    padding: 0;
     overflow: hidden;
   }
 

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

@@ -2,6 +2,7 @@ require("../../style/base.css");
 require("../../badge/index.css");
 require("../../icon/index.css");
 require("../../filter-tag/index.css");
+require("../../tag/index.css");
 require("../../loading/index.css");
 require("../../picker/index.css");
 require("../../datetime-picker/index.css");

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

@@ -2,6 +2,7 @@ require("../../style/base.less");
 require("../../badge/index.less");
 require("../../icon/index.less");
 require("../../filter-tag/index.less");
+require("../../tag/index.less");
 require("../../loading/index.less");
 require("../../picker/index.less");
 require("../../datetime-picker/index.less");

package/package.json

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

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

@@ -10,7 +10,7 @@ description: 使用 Persagy Vant 为 Vue 3 移动端业务页面规划、实现
 ## 强制工作流
 
 1. 阅读 `references/reuse-policy.md`，确认复用边界与禁止项。
-2. 阅读 `references/design-interaction-baseline.md`，将其中适用的设计、状态和反馈规则落实到页面；如与产品需求冲突，以明确的产品需求为准并说明差异。
+2. 阅读 `references/design-interaction-baseline.md` 与 `references/public-style-system.md`，将其中适用的设计、状态和反馈规则落实到页面；如与产品需求冲突，以明确的产品需求为准并说明差异。
 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/component-variant-selection.md`，针对每个可见或可交互 UI 单元，从该组件模拟器/README 的示例中选定最贴近当前页面的具体样式与变量组合；不得仅按组件名称套用基础示例。

package/skills/use-persagy-vant/references/public-style-system.md

@@ -0,0 +1,105 @@
+# Persagy Vant 公共样式系统
+
+本资料汇总整个组件库的**公共样式基础**：全局 CSS Token、内置工具类、页面公共间距与组件级样式资料入口。全局 Token 的源码位于 `packages/persagy-mobile/src/style/var.less` 和 `css-variables.less`，以源码为准。
+
+## 使用边界
+
+- 页面实现优先使用组件模拟器已提供的样式变体与公开 Props；本资料用于理解并保持一致，不是普通页面自行覆盖视觉的许可。
+- 产品经理未明确提出具体样式调整时，不修改 `--van-*` Token、组件级 Less/CSS 变量、颜色、字号、间距、圆角、边框或动效。
+- 组件级 `var.less` 是组件库维护接口。业务页面出现无法由现有变体覆盖的需求时，记录组件缺口，推动组件库优化变量或新增变体，而不是页面二次样式。
+
+## 色彩 Token
+
+### 中性与基础色
+
+| CSS Token | 值 | 用途 |
+| --- | --- | --- |
+| `--van-black` | `#1b2129` | 深色正文/基础深色 |
+| `--van-white` | `#fff` | 白色卡片、反白内容 |
+| `--van-gray-1` ~ `--van-gray-8` | `#f7f9fa`、`#f1f4f6`、`#edf1f5`、`#e1e5eb`、`#c4c9cf`、`#8b949e`、`#626c78`、`#2e3742` | 页面背景、分割线、辅助到主文字 |
+| `--van-grey-50` ~ `--van-grey-900` | `#f7f9fa` 至 `#1b2129` | 细分灰阶，按组件既有样式使用 |
+
+### 品牌与状态色
+
+| 色系 | Token 范围 | 主色 |
+| --- | --- | --- |
+| 品牌蓝 | `--van-blue-50` ~ `--van-blue-900` | `--van-blue` / `--van-blue-500`：`#246fe5` |
+| 成功绿 | `--van-green-50` ~ `--van-green-900` | `--van-green` / `--van-green-500`：`#3fbe72` |
+| 危险红 | `--van-red-50` ~ `--van-red-900` | `--van-red` / `--van-red-500`：`#f55047` |
+| 警示橙 | `--van-orange-50` ~ `--van-orange-900` | `--van-orange` / `--van-orange-500`：`#ffb800` |
+
+### 语义色与背景
+
+| CSS Token | 默认值/来源 | 标准用途 |
+| --- | --- | --- |
+| `--van-primary-color` | `--van-blue` | 品牌主操作、链接与选中态 |
+| `--van-success-color` / `--van-danger-color` / `--van-warning-color` | 绿 / 红 / 橙 | 成功、风险、警示语义 |
+| `--van-text-color` / `--van-text-color-2` / `--van-text-color-3` | 灰阶 8 / 6 / 5 | 主正文 / 次要说明 / 弱提示 |
+| `--van-text-link-color` | `#576b95` | 通用链接色（优先使用组件链接变体） |
+| `--van-background-color` / `--van-background-color-light` | 灰阶 1 / 白色 | 页面背景 / 白色承载面 |
+| `--van-border-color` | 灰阶 4 | 分割线、描边 |
+| `--van-active-color` / `--van-active-opacity` | 灰阶 2 / `0.6` | 组件默认按压态 |
+| `--van-disabled-opacity` | `0.5` | 禁用态 |
+| `--van-gradient-gray` | 灰阶 2至透明 | `gradient-gray` 公共渐变 |
+| `--van-gradient-blue` | `rgb(36 112 230 / 10%)` 至 `rgb(36 112 230 / 1%)` | `gradient-blue` 公共蓝色渐变 |
+
+## 尺寸、排版与动效 Token
+
+| 类别 | Token | 值 |
+| --- | --- | --- |
+| 间距 | `--van-padding-base/xs/sm/md/lg/xl` | `4 / 8 / 12 / 16 / 24 / 32px` |
+| 字号 | `--van-font-size-xs/sm/md/lg/xl` | `10 / 12 / 14 / 16 / 20px` |
+| 行高 | `--van-line-height-xs/sm/md/lg/xl` | `14 / 18 / 20 / 22 / 24px` |
+| 字重 | `--van-font-weight-bold` | `500` |
+| 圆角 | `--van-border-radius-sm/md/lg/max` | `2 / 4 / 8 / 999px` |
+| 边框 | `--van-border-width-base` | `1px` |
+| 动效 | `--van-animation-duration-fast/base` | `0.2 / 0.3s` |
+| 动效曲线 | `--van-animation-timing-function-enter/leave` | `ease-out / ease-in` |
+
+## 公共工具类与动画
+
+| 名称 | 能力 | 页面使用规则 |
+| --- | --- | --- |
+| `van-ellipsis` | 单行省略 | 文本不适合换行时使用 |
+| `van-multi-ellipsis--l2` / `van-multi-ellipsis--l3` | 两/三行省略 | 仅在无法完整换行且有查看全文路径时使用 |
+| `gradient-gray` / `van-gradient-gray` | 灰到透明的横向渐变 | 仅用于组件/页面已有渐变承载语义 |
+| `gradient-blue` / `van-gradient-blue` | 10% 至 1% 透明度的横向蓝色渐变 | 有蓝色弱强调承载语义时优先使用；不自行重配渐变色或透明度 |
+| `van-hairline--top/left/right/bottom/top-bottom/surround` | Retina 1px 边框 | 优先使用组件内置分割线；不要用它替代组件的 `border`/`divider` 能力 |
+| `van-safe-area-top/bottom` | 顶/底安全区 | 仅作用于固定区域；不得叠加到卡片页面末尾的 24px 留白 |
+| `van-haptics-feedback` | 默认点击透明度反馈 | 有内置按压态的组件不重复使用 |
+| `van-fade` | 淡入淡出 | 用于轻量显示/隐藏 |
+| `van-slide-up/down/left/right` | 四向转场 | 页面与面板转场按设计交互基线选择 |
+
+## 页面公共布局值
+
+| 项目 | 标准 |
+| --- | --- |
+| 具白色卡片的页面背景 | 【背景】组件；首页 `theme="default"`，其他层级 `theme="gray"` |
+| 页面左右边距 | `16px` |
+| 卡片之间 | `8px` |
+| 模块/控件间 | `8px` 或 `12px` |
+| 纯左右字段组纵向间距 | 不小于 `8px` |
+| 卡片内容末尾 | 最后一个可见项隐藏分割线 |
+| 卡片页面滚动终点 | 最后卡片后唯一 `24px` 空白容器；不得叠加额外可滚动留白 |
+
+完整页面规则以 `design-interaction-baseline.md` 为准。
+
+## 组件级样式索引
+
+组件库共有 `85` 份组件级 `var.less`，涵盖基础组件、业务组件和页面容器。它们按组件目录维护，例如：
+
+| 样式类别 | 代表组件 | 样式变量源码 |
+| --- | --- | --- |
+| 页面与容器 | `background`、`card`、`cell-group`、`content-panel`、`popup` | `src/<component>/var.less` |
+| 信息展示 | `cell`、`label`、`info-card`、`title-bar`、`tag`、`badge` | `src/<component>/var.less` |
+| 表单与选择 | `field`、`checkbox`、`radio`、`picker`、`search`、`uploader` | `src/<component>/var.less` |
+| 操作与反馈 | `button`、`bottom-action-bar`、`dialog`、`toast`、`notify`、`loading` | `src/<component>/var.less` |
+| 业务场景 | `work-order-card`、`work-order-filter`、`material-display-bar`、`friendly-tip` | `src/<component>/var.less` |
+
+查找规则：先读目标组件 README 的样式变量说明和模拟器示例；需要组件库维护时再读取同目录 `var.less`。不得根据变量名称臆造未文档化能力。
+
+## 维护规则
+
+- 新增或调整全局 Token 时，同步更新 `src/style/var.less`、`css-variables.less` 与本资料。
+- 新增或调整组件级样式变量时，同步更新组件 `var.less`、README、demo 与组件目录描述。
+- 若业务页面持续出现同类样式缺口，优先沉淀为组件变体或组件公开变量，再由产品经理决定是否推广。