persagy-vant 0.0.30 → 0.0.32

package/README.md

@@ -4,25 +4,24 @@ Persagy 移动端 Vue 3 组件库。产品经理可通过 AI 编程工具复用
 
 ## 产品经理使用方式
 
-只使用这一条流程：在**自己的产品项目**安装组件库，再让 AI 读取包内的 Skill。无需下载或复制本仓库。
+只使用这一条流程：在**自己的产品项目**安装组件库、初始化一次 Codex Skill，然后直接调用 `$use-persagy-vant`。无需下载或复制本仓库。
 
 ### 1. 安装组件库
 
 ```bash
 pnpm add persagy-vant
+pnpm exec persagy-vant init
 ```
 
-### 2. 每次新开 AI 会话先发送统一指令
+初始化会在项目中创建 `.agents/skills/use-persagy-vant/SKILL.md`。它只引用 npm 包内的 Skill 内容，因此不会复制规范或造成版本分叉。
 
-```text
-请先读取并严格执行 node_modules/persagy-vant/skills/use-persagy-vant/SKILL.md。
+### 2. 直接在 Codex 中调用
 
-本项目所有移动端 UI 和业务选择能力必须优先复用 persagy-vant；
-不要自行实现组件库已有的组件、交互或样式。
-实现前先阅读所用组件在 node_modules/persagy-vant/es/<组件名>/README.zh-CN.md 中的 API 和示例。
+```text
+$use-persagy-vant 根据当前 PRD 实现移动端页面
 ```
 
-这套方式兼容 Codex、Cursor、Claude Code、Windsurf、Copilot 等可读取项目文件的 AI 编程工具。
+Skill 会自动读取 npm 包内的复用规则、组件目录、设计交互规范与组件 API 文档。
 
 ### 3. 描述本次任务
 
@@ -35,10 +34,10 @@ pnpm add persagy-vant
 组件库发布新版本后，在产品项目根目录执行：
 
 ```bash
-pnpm up persagy-vant
+pnpm up persagy-vant@latest
 ```
 
-然后在下一次 AI 会话重新发送“统一指令”。组件、组件文档和 Skill 会随 npm 包一起更新。
+组件、组件文档和 Skill 会随 npm 包一起更新；已有的 `.agents` 入口会自动读取新版内容，无需再次初始化。仅当维护者通知入口机制有变时，才执行 `pnpm exec persagy-vant init --force`。
 
 完整的可转发说明见：[产品经理 AI 开发使用说明](./docs/markdown/product-manager-guide.zh-CN.md)。
 
@@ -47,8 +46,8 @@ pnpm up persagy-vant
 ```text
 src/       组件源码、单组件示例、测试与中英文 API 文档
 docs/      组件站点与设计文档
-skills/    随 npm 包分发的 AI Skill
-scripts/   构建辅助脚本
+skills/    随 npm 包分发的 AI Skill 正文与参考资料
+bin/       初始化项目级 Codex Skill 的命令
 ```
 
 ## 开发

package/bin/persagy-vant.mjs

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+
+import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
+import { dirname, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const skillSource = resolve(packageRoot, 'skills/use-persagy-vant/SKILL.md');
+const [command, ...options] = process.argv.slice(2);
+const force = options.includes('--force');
+
+const usage = () => {
+  console.log(`Usage:
+  pnpm exec persagy-vant init [--force]
+
+Creates a project-level Codex Skill entry at:
+  .agents/skills/use-persagy-vant/SKILL.md
+
+After setup, use in Codex:
+  $use-persagy-vant <your task>`);
+};
+
+if (!command || command === '--help' || command === '-h') {
+  usage();
+  process.exit(command ? 0 : 1);
+}
+
+if (command !== 'init') {
+  console.error(`Unknown command: ${command}`);
+  usage();
+  process.exit(1);
+}
+
+if (!existsSync(skillSource)) {
+  console.error('Persagy Vant Skill source is missing. Reinstall persagy-vant and try again.');
+  process.exit(1);
+}
+
+const projectRoot = process.cwd();
+const target = resolve(projectRoot, '.agents/skills/use-persagy-vant/SKILL.md');
+
+if (existsSync(target) && !force) {
+  console.log(`Skill entry already exists: ${relative(projectRoot, target)}`);
+  console.log('Use --force only if you need to recreate the entry.');
+  process.exit(0);
+}
+
+const entry = `---
+name: use-persagy-vant
+description: 使用 Persagy Vant 为 Vue 3 移动端业务页面规划、实现、改造或验收 UI 时使用。适用于需要强制复用 Persagy 基础与业务组件、统一交互和视觉的任务。
+---
+
+读取并严格执行 \`node_modules/persagy-vant/skills/use-persagy-vant/SKILL.md\` 及其 \`references/\` 资料。
+
+当前项目的移动端 UI 与业务组件必须优先复用 \`persagy-vant\`；不得重写组件库已有的组件、交互或样式。
+`;
+
+mkdirSync(dirname(target), { recursive: true });
+writeFileSync(target, entry, 'utf8');
+
+console.log(`Created Codex Skill entry: ${relative(projectRoot, target)}`);
+console.log('Now use in Codex: $use-persagy-vant <your task>');
+console.log('After upgrading persagy-vant, this entry automatically reads the new packaged Skill.');

package/es/cell/Cell.d.ts

@@ -9,12 +9,18 @@ export declare const cellSharedProps: {
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
     tags: PropType<Numeric[]>;
     titleIcon: StringConstructor;
     rightIcon: StringConstructor;
     note: (NumberConstructor | StringConstructor)[];
+    noteBold: BooleanConstructor;
+    noteClickable: BooleanConstructor;
+    noteTo: PropType<import("vue-router").RouteLocationRaw>;
+    noteUrl: StringConstructor;
+    noteReplace: BooleanConstructor;
     badge: (NumberConstructor | StringConstructor)[];
     leftSelect: {
         type: PropType<boolean | undefined>;
@@ -29,6 +35,7 @@ export declare const cellSharedProps: {
         default: string;
     };
     blueMark: BooleanConstructor;
+    titleBold: BooleanConstructor;
     center: BooleanConstructor;
     isLink: BooleanConstructor;
     border: {
@@ -54,12 +61,18 @@ declare const cellProps: {
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
     tags: PropType<Numeric[]>;
     titleIcon: StringConstructor;
     rightIcon: StringConstructor;
     note: (NumberConstructor | StringConstructor)[];
+    noteBold: BooleanConstructor;
+    noteClickable: BooleanConstructor;
+    noteTo: PropType<import("vue-router").RouteLocationRaw>;
+    noteUrl: StringConstructor;
+    noteReplace: BooleanConstructor;
     badge: (NumberConstructor | StringConstructor)[];
     leftSelect: {
         type: PropType<boolean | undefined>;
@@ -74,6 +87,7 @@ declare const cellProps: {
         default: string;
     };
     blueMark: BooleanConstructor;
+    titleBold: BooleanConstructor;
     center: BooleanConstructor;
     isLink: BooleanConstructor;
     border: {
@@ -104,12 +118,18 @@ declare const _default: import("vue").DefineComponent<{
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
     tags: PropType<Numeric[]>;
     titleIcon: StringConstructor;
     rightIcon: StringConstructor;
     note: (NumberConstructor | StringConstructor)[];
+    noteBold: BooleanConstructor;
+    noteClickable: BooleanConstructor;
+    noteTo: PropType<import("vue-router").RouteLocationRaw>;
+    noteUrl: StringConstructor;
+    noteReplace: BooleanConstructor;
     badge: (NumberConstructor | StringConstructor)[];
     leftSelect: {
         type: PropType<boolean | undefined>;
@@ -124,6 +144,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     blueMark: BooleanConstructor;
+    titleBold: BooleanConstructor;
     center: BooleanConstructor;
     isLink: BooleanConstructor;
     border: {
@@ -146,18 +167,24 @@ declare const _default: import("vue").DefineComponent<{
     to: PropType<import("vue-router").RouteLocationRaw>;
     url: StringConstructor;
     replace: BooleanConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:leftSelect" | "update:rightSelect")[], "click" | "update:leftSelect" | "update:rightSelect", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "click-note" | "update:leftSelect" | "update:rightSelect")[], "click" | "click-note" | "update:leftSelect" | "update:rightSelect", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     icon: StringConstructor;
     size: PropType<CellSize>;
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
     tags: PropType<Numeric[]>;
     titleIcon: StringConstructor;
     rightIcon: StringConstructor;
     note: (NumberConstructor | StringConstructor)[];
+    noteBold: BooleanConstructor;
+    noteClickable: BooleanConstructor;
+    noteTo: PropType<import("vue-router").RouteLocationRaw>;
+    noteUrl: StringConstructor;
+    noteReplace: BooleanConstructor;
     badge: (NumberConstructor | StringConstructor)[];
     leftSelect: {
         type: PropType<boolean | undefined>;
@@ -172,6 +199,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     blueMark: BooleanConstructor;
+    titleBold: BooleanConstructor;
     center: BooleanConstructor;
     isLink: BooleanConstructor;
     border: {
@@ -196,16 +224,21 @@ declare const _default: import("vue").DefineComponent<{
     replace: BooleanConstructor;
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
+    "onClick-note"?: ((...args: any[]) => any) | undefined;
     "onUpdate:leftSelect"?: ((...args: any[]) => any) | undefined;
     "onUpdate:rightSelect"?: ((...args: any[]) => any) | undefined;
 }, {
     replace: boolean;
     required: boolean;
     center: boolean;
+    noteBold: boolean;
+    noteClickable: boolean;
+    noteReplace: boolean;
     leftSelect: boolean | undefined;
     rightSelect: boolean | undefined;
     selectType: CellSelectType;
     blueMark: boolean;
+    titleBold: boolean;
     isLink: boolean;
     border: boolean;
     errorBorder: boolean;

package/es/cell/Cell.mjs

@@ -1,5 +1,5 @@
-import { defineComponent, inject, ref, watch, createVNode as _createVNode } from "vue";
-import { isDef, extend, truthProp, unknownProp, numericProp, createNamespace } from "../utils/index.mjs";
+import { defineComponent, getCurrentInstance, inject, ref, watch, createVNode as _createVNode } from "vue";
+import { isDef, extend, truthProp, unknownProp, numericProp, addUnit, createNamespace } from "../utils/index.mjs";
 import { useRoute, routeProps } from "../composables/use-route.mjs";
 import { Icon } from "../icon/index.mjs";
 import { Checkbox } from "../checkbox/index.mjs";
@@ -13,12 +13,18 @@ const cellSharedProps = {
   title: numericProp,
   value: numericProp,
   label: numericProp,
+  labelSize: numericProp,
   avatar: String,
   rightAvatar: String,
   tags: Array,
   titleIcon: String,
   rightIcon: String,
   note: numericProp,
+  noteBold: Boolean,
+  noteClickable: Boolean,
+  noteTo: routeProps.to,
+  noteUrl: String,
+  noteReplace: Boolean,
   badge: numericProp,
   leftSelect: {
     type: Boolean,
@@ -33,6 +39,7 @@ const cellSharedProps = {
     default: "checkbox"
   },
   blueMark: Boolean,
+  titleBold: Boolean,
   center: Boolean,
   isLink: Boolean,
   border: truthProp,
@@ -53,7 +60,7 @@ const cellProps = extend({}, cellSharedProps, routeProps);
 var stdin_default = defineComponent({
   name,
   props: cellProps,
-  emits: ["click", "update:leftSelect", "update:rightSelect"],
+  emits: ["click", "click-note", "update:leftSelect", "update:rightSelect"],
   setup(props, {
     slots,
     emit
@@ -61,6 +68,7 @@ var stdin_default = defineComponent({
     var _a, _b;
     const config = inject(CONFIG_PROVIDER_KEY, null);
     const route = useRoute();
+    const vm = getCurrentInstance().proxy;
     const leftSelectState = ref((_a = props.leftSelect) != null ? _a : false);
     const rightSelectState = ref((_b = props.rightSelect) != null ? _b : false);
     watch(() => props.leftSelect, (value) => {
@@ -97,7 +105,10 @@ var stdin_default = defineComponent({
       const showLabel = slots.label || isDef(props.label);
       if (showLabel) {
         return _createVNode("div", {
-          "class": [bem("label"), props.labelClass]
+          "class": [bem("label"), props.labelClass],
+          "style": {
+            fontSize: addUnit(props.labelSize)
+          }
         }, [slots.label ? slots.label() : props.label]);
       }
     };
@@ -220,16 +231,38 @@ var stdin_default = defineComponent({
         }, null);
       }
     };
+    const renderNoteContent = (content) => {
+      const clickable = props.noteClickable || props.noteTo || props.noteUrl;
+      const classes = bem("note", {
+        bold: props.noteBold,
+        clickable
+      });
+      if (!clickable) {
+        return _createVNode("div", {
+          "class": classes
+        }, [content]);
+      }
+      const onNoteClick = (event) => {
+        event.stopPropagation();
+        emit("click-note", event);
+        if (props.noteTo && vm.$router) {
+          vm.$router[props.noteReplace ? "replace" : "push"](props.noteTo);
+        } else if (props.noteUrl) {
+          props.noteReplace ? location.replace(props.noteUrl) : location.href = props.noteUrl;
+        }
+      };
+      return _createVNode("button", {
+        "type": "button",
+        "class": classes,
+        "onClick": onNoteClick
+      }, [content]);
+    };
     const renderNote = () => {
       if (slots.note) {
-        return _createVNode("div", {
-          "class": bem("note")
-        }, [slots.note()]);
+        return renderNoteContent(slots.note());
       }
       if (isDef(props.note)) {
-        return _createVNode("div", {
-          "class": bem("note")
-        }, [props.note]);
+        return renderNoteContent(props.note);
       }
     };
     const renderBadge = () => {
@@ -272,14 +305,17 @@ var stdin_default = defineComponent({
         center,
         border,
         isLink,
-        required
+        required,
+        rightIcon,
+        titleBold
       } = props;
-      const clickable = (_a2 = props.clickable) != null ? _a2 : isLink || hasSelect("left") || hasSelect("right");
+      const clickable = (_a2 = props.clickable) != null ? _a2 : isLink || rightIcon === "arrow" || hasSelect("left") || hasSelect("right");
       const hasBadge = !!slots.badge || isDef(props.badge);
       const cellSize = (_b2 = size != null ? size : config == null ? void 0 : config.cellSize) != null ? _b2 : "normal";
       const classes = {
         center: center || hasBadge,
         required,
+        "title-bold": titleBold,
         clickable,
         borderless: !border
       };

package/es/cell/index.css

@@ -1 +1 @@
-:root{--van-cell-font-size: var(--van-font-size-md);--van-cell-line-height: 24px;--van-cell-vertical-padding: 10px;--van-cell-horizontal-padding: var(--van-padding-md);--van-cell-text-color: var(--van-text-color);--van-cell-background-color: var(--van-background-color-light);--van-cell-border-color: var(--van-border-color);--van-cell-active-color: var(--van-active-color);--van-cell-required-color: var(--van-danger-color);--van-cell-label-color: var(--van-text-color-2);--van-cell-label-font-size: var(--van-font-size-sm);--van-cell-label-line-height: var(--van-line-height-sm);--van-cell-label-margin-top: var(--van-padding-base);--van-cell-value-color: var(--van-text-color-2);--van-cell-icon-size: 16px;--van-cell-right-icon-color: var(--van-gray-6);--van-cell-large-vertical-padding: var(--van-padding-sm);--van-cell-large-title-font-size: var(--van-font-size-lg);--van-cell-large-label-font-size: var(--van-font-size-md);--van-cell-large-value-font-size: 16px;--van-cell-blue-mark-width: 2px}.van-cell{position:relative;display:flex;box-sizing:border-box;width:100%;padding:var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);overflow:hidden;color:var(--van-cell-text-color);font-size:var(--van-cell-font-size);line-height:var(--van-cell-line-height);background:var(--van-cell-background-color)}.van-cell:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);border-bottom:1px solid var(--van-cell-border-color);transform:scaleY(.5)}.van-cell:last-child:after,.van-cell--borderless:after{display:none}.van-cell-error-border:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);border-bottom:1px solid var(--van-field-input-error-text-color);transform:scaleY(.5)}.van-cell-error-border:last-child:after{display:inline-block}.van-cell__label{margin-top:var(--van-cell-label-margin-top);color:var(--van-cell-label-color);font-size:var(--van-cell-label-font-size);line-height:var(--van-cell-label-line-height)}.van-cell__title,.van-cell__value{flex:1;min-width:0}.van-cell__title-row{display:flex;align-items:center;min-width:0}.van-cell__value{position:relative;overflow:hidden;color:var(--van-cell-value-color);text-align:right;vertical-align:middle;word-wrap:break-word}.van-cell__value--alone{color:var(--van-text-color);text-align:left}.van-cell__left-icon,.van-cell__right-icon,.van-cell__left-select,.van-cell__right-select,.van-cell__title-icon{flex:none;height:var(--van-cell-line-height);font-size:var(--van-cell-icon-size);line-height:var(--van-cell-line-height);display:flex!important;align-items:center;justify-content:center}.van-cell__left-icon{margin-right:var(--van-padding-base)}.van-cell__right-icon{margin-left:var(--van-padding-base);color:var(--van-cell-right-icon-color)}.van-cell__left-select{display:flex;flex:none;align-items:center;align-self:center;margin-right:var(--van-padding-base)}.van-cell__right-select{display:flex;flex:none;align-items:center;align-self:center;margin-left:var(--van-padding-base)}.van-cell__left-avatar,.van-cell__right-avatar{flex:none;width:var(--van-cell-line-height);height:var(--van-cell-line-height);-o-object-fit:cover;object-fit:cover;border:var(--van-border-width-base) solid var(--van-gray-1);border-radius:var(--van-border-radius-md)}.van-cell__left-avatar{margin-right:var(--van-padding-base)}.van-cell__right-avatar{margin-left:var(--van-padding-base)}.van-cell__blue-mark{flex:none;align-self:center;width:var(--van-cell-blue-mark-width);height:var(--van-font-size-sm);margin-right:var(--van-padding-base);background:var(--van-primary-color)}.van-cell__tags{display:flex;flex:none;gap:var(--van-padding-base);margin-left:var(--van-padding-base)}.van-cell__tag{padding:0 var(--van-padding-base);color:var(--van-text-color);font-size:var(--van-font-size-sm);line-height:var(--van-line-height-sm);background:var(--van-gray-2);border-radius:var(--van-border-radius-sm)}.van-cell__title-icon{margin-left:var(--van-padding-base);color:var(--van-text-color-2)}.van-cell__note{flex:none;margin-left:var(--van-padding-base);color:var(--van-text-color-2);font-size:var(--van-font-size-md);line-height:var(--van-cell-line-height);white-space:nowrap}.van-cell__badge{display:flex;flex:none;align-items:center;align-self:center;margin-left:var(--van-padding-base)}.van-cell__badge>.van-badge{position:static;transform:none}.van-cell--clickable{cursor:pointer}.van-cell--clickable:active{background-color:var(--van-cell-active-color)}.van-cell--required{overflow:visible}.van-cell--required:before{position:absolute;left:var(--van-padding-xs);color:var(--van-cell-required-color);font-size:var(--van-cell-font-size);content:"*"}.van-cell--center{align-items:center}.van-cell--large{padding-top:var(--van-cell-large-vertical-padding);padding-bottom:var(--van-cell-large-vertical-padding)}.van-cell--large .van-cell__title{font-size:var(--van-cell-large-title-font-size)}.van-cell--large .van-cell__label{font-size:var(--van-cell-large-label-font-size)}.van-cell--large .van-cell__value{font-size:var(--van-cell-large-value-font-size)}
+:root{--van-cell-font-size: var(--van-font-size-md);--van-cell-line-height: 24px;--van-cell-vertical-padding: 10px;--van-cell-horizontal-padding: var(--van-padding-md);--van-cell-text-color: var(--van-text-color);--van-cell-background-color: var(--van-background-color-light);--van-cell-border-color: var(--van-border-color);--van-cell-active-color: var(--van-active-color);--van-cell-required-color: var(--van-danger-color);--van-cell-label-color: var(--van-text-color-2);--van-cell-label-font-size: var(--van-font-size-sm);--van-cell-label-line-height: var(--van-line-height-sm);--van-cell-label-margin-top: 2px;--van-cell-value-color: var(--van-text-color-2);--van-cell-icon-size: 16px;--van-cell-right-icon-color: var(--van-gray-6);--van-cell-large-vertical-padding: var(--van-padding-sm);--van-cell-large-title-font-size: var(--van-font-size-lg);--van-cell-large-label-font-size: var(--van-font-size-md);--van-cell-large-value-font-size: 16px;--van-cell-blue-mark-width: 2px}.van-cell{position:relative;display:flex;box-sizing:border-box;width:100%;padding:var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);overflow:hidden;color:var(--van-cell-text-color);font-size:var(--van-cell-font-size);line-height:var(--van-cell-line-height);background:var(--van-cell-background-color)}.van-cell:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);border-bottom:1px solid var(--van-cell-border-color);transform:scaleY(.5)}.van-cell:last-child:after,.van-cell--borderless:after{display:none}.van-cell-error-border:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);border-bottom:1px solid var(--van-field-input-error-text-color);transform:scaleY(.5)}.van-cell-error-border:last-child:after{display:inline-block}.van-cell__label{margin-top:var(--van-cell-label-margin-top);color:var(--van-cell-label-color);font-size:var(--van-cell-label-font-size);line-height:var(--van-cell-label-line-height)}.van-cell__title,.van-cell__value{flex:1;min-width:0}.van-cell__title-row{display:flex;align-items:center;min-width:0}.van-cell__value{position:relative;overflow:hidden;color:var(--van-cell-value-color);text-align:right;vertical-align:middle;word-wrap:break-word}.van-cell__value--alone{color:var(--van-text-color);text-align:left}.van-cell__left-icon,.van-cell__right-icon,.van-cell__left-select,.van-cell__right-select,.van-cell__title-icon{flex:none;height:var(--van-cell-line-height);font-size:var(--van-cell-icon-size);line-height:var(--van-cell-line-height);display:flex!important;align-items:center;justify-content:center}.van-cell__left-icon{margin-right:var(--van-padding-base)}.van-cell__right-icon{margin-left:var(--van-padding-base);color:var(--van-cell-right-icon-color)}.van-cell__left-select{display:flex;flex:none;align-items:center;align-self:center;margin-right:var(--van-padding-base)}.van-cell__right-select{display:flex;flex:none;align-items:center;align-self:center;margin-left:var(--van-padding-base)}.van-cell__left-avatar,.van-cell__right-avatar{flex:none;width:var(--van-cell-line-height);height:var(--van-cell-line-height);-o-object-fit:cover;object-fit:cover;border:var(--van-border-width-base) solid var(--van-gray-1);border-radius:var(--van-border-radius-md)}.van-cell__left-avatar{margin-right:var(--van-padding-base)}.van-cell__right-avatar{margin-left:var(--van-padding-base)}.van-cell__blue-mark{flex:none;align-self:center;width:var(--van-cell-blue-mark-width);height:var(--van-font-size-sm);margin-right:var(--van-padding-base);background:var(--van-primary-color)}.van-cell__tags{display:flex;flex:none;gap:var(--van-padding-base);margin-left:var(--van-padding-base)}.van-cell__tag{padding:0 var(--van-padding-base);color:var(--van-text-color);font-size:var(--van-font-size-sm);line-height:var(--van-line-height-sm);background:var(--van-gray-2);border-radius:var(--van-border-radius-sm)}.van-cell__title-icon{margin-left:var(--van-padding-base);color:var(--van-text-color-2)}.van-cell__note{align-self:flex-start;flex:none;margin-left:var(--van-padding-base);color:var(--van-text-color-2);font-size:var(--van-font-size-md);line-height:var(--van-cell-line-height);white-space:nowrap}.van-cell__note--bold{font-weight:var(--van-font-weight-bold)}.van-cell__note--clickable{padding:0;color:var(--van-primary-color);font-family:inherit;font-size:inherit;line-height:inherit;background:transparent;border:0;cursor:pointer}.van-cell__badge{display:flex;flex:none;align-items:center;align-self:center;margin-left:var(--van-padding-base)}.van-cell__badge>.van-badge{position:static;transform:none}.van-cell--clickable{cursor:pointer}.van-cell--clickable:active{background-color:var(--van-cell-active-color)}.van-cell--required{overflow:visible}.van-cell--required:before{position:absolute;left:var(--van-padding-xs);color:var(--van-cell-required-color);font-size:var(--van-cell-font-size);content:"*"}.van-cell--center{align-items:center}.van-cell--large{padding-top:var(--van-cell-large-vertical-padding);padding-bottom:var(--van-cell-large-vertical-padding)}.van-cell--large .van-cell__title{font-size:var(--van-cell-large-title-font-size)}.van-cell--large .van-cell__label{font-size:var(--van-cell-large-label-font-size);margin-top:var(--van-padding-base)}.van-cell--large .van-cell__value{font-size:var(--van-cell-large-value-font-size)}.van-cell--title-bold .van-cell__title{font-weight:var(--van-font-weight-bold)}

package/es/cell/index.d.ts

@@ -4,12 +4,18 @@ export declare const Cell: import("../utils").WithInstall<import("vue").DefineCo
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
     tags: import("vue").PropType<import("../utils").Numeric[]>;
     titleIcon: StringConstructor;
     rightIcon: StringConstructor;
     note: (NumberConstructor | StringConstructor)[];
+    noteBold: BooleanConstructor;
+    noteClickable: BooleanConstructor;
+    noteTo: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+    noteUrl: StringConstructor;
+    noteReplace: BooleanConstructor;
     badge: (NumberConstructor | StringConstructor)[];
     leftSelect: {
         type: import("vue").PropType<boolean | undefined>;
@@ -24,6 +30,7 @@ export declare const Cell: import("../utils").WithInstall<import("vue").DefineCo
         default: string;
     };
     blueMark: BooleanConstructor;
+    titleBold: BooleanConstructor;
     center: BooleanConstructor;
     isLink: BooleanConstructor;
     border: {
@@ -46,18 +53,24 @@ export declare const Cell: import("../utils").WithInstall<import("vue").DefineCo
     to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
     url: StringConstructor;
     replace: BooleanConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:leftSelect" | "update:rightSelect")[], "click" | "update:leftSelect" | "update:rightSelect", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "click-note" | "update:leftSelect" | "update:rightSelect")[], "click" | "click-note" | "update:leftSelect" | "update:rightSelect", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     icon: StringConstructor;
     size: import("vue").PropType<import("./Cell").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
     tags: import("vue").PropType<import("../utils").Numeric[]>;
     titleIcon: StringConstructor;
     rightIcon: StringConstructor;
     note: (NumberConstructor | StringConstructor)[];
+    noteBold: BooleanConstructor;
+    noteClickable: BooleanConstructor;
+    noteTo: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+    noteUrl: StringConstructor;
+    noteReplace: BooleanConstructor;
     badge: (NumberConstructor | StringConstructor)[];
     leftSelect: {
         type: import("vue").PropType<boolean | undefined>;
@@ -72,6 +85,7 @@ export declare const Cell: import("../utils").WithInstall<import("vue").DefineCo
         default: string;
     };
     blueMark: BooleanConstructor;
+    titleBold: BooleanConstructor;
     center: BooleanConstructor;
     isLink: BooleanConstructor;
     border: {
@@ -96,16 +110,21 @@ export declare const Cell: import("../utils").WithInstall<import("vue").DefineCo
     replace: BooleanConstructor;
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
+    "onClick-note"?: ((...args: any[]) => any) | undefined;
     "onUpdate:leftSelect"?: ((...args: any[]) => any) | undefined;
     "onUpdate:rightSelect"?: ((...args: any[]) => any) | undefined;
 }, {
     replace: boolean;
     required: boolean;
     center: boolean;
+    noteBold: boolean;
+    noteClickable: boolean;
+    noteReplace: boolean;
     leftSelect: boolean | undefined;
     rightSelect: boolean | undefined;
     selectType: import("./Cell").CellSelectType;
     blueMark: boolean;
+    titleBold: boolean;
     isLink: boolean;
     border: boolean;
     errorBorder: boolean;

package/es/cell/index.less

@@ -173,12 +173,26 @@
   }
 
   &__note {
+    align-self: flex-start;
     flex: none;
     margin-left: var(--van-padding-base);
     color: var(--van-text-color-2);
     font-size: var(--van-font-size-md);
     line-height: var(--van-cell-line-height);
     white-space: nowrap;
+
+    &--bold { font-weight: var(--van-font-weight-bold); }
+
+    &--clickable {
+      padding: 0;
+      color: var(--van-primary-color);
+      font-family: inherit;
+      font-size: inherit;
+      line-height: inherit;
+      background: transparent;
+      border: 0;
+      cursor: pointer;
+    }
   }
 
   &__badge {
@@ -228,10 +242,15 @@
 
     .van-cell__label {
       font-size: var(--van-cell-large-label-font-size);
+      margin-top: var(--van-padding-base);
     }
 
     .van-cell__value {
       font-size: var(--van-cell-large-value-font-size);
     }
   }
+
+  &--title-bold {
+    .van-cell__title { font-weight: var(--van-font-weight-bold); }
+  }
 }

package/es/cell/var.less

@@ -12,7 +12,7 @@
 @cell-label-color: var(--van-text-color-2);
 @cell-label-font-size: var(--van-font-size-sm);
 @cell-label-line-height: var(--van-line-height-sm);
-@cell-label-margin-top: var(--van-padding-base);
+@cell-label-margin-top: 2px;
 @cell-value-color: var(--van-text-color-2);
 @cell-icon-size: 16px;
 @cell-right-icon-color: var(--van-gray-6);

package/es/collapse-item/CollapseItem.d.ts

@@ -5,12 +5,18 @@ declare const collapseItemProps: {
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
     tags: import("vue").PropType<import("../utils").Numeric[]>;
     titleIcon: StringConstructor;
     rightIcon: StringConstructor;
     note: (NumberConstructor | StringConstructor)[];
+    noteBold: BooleanConstructor;
+    noteClickable: BooleanConstructor;
+    noteTo: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+    noteUrl: StringConstructor;
+    noteReplace: BooleanConstructor;
     badge: (NumberConstructor | StringConstructor)[];
     leftSelect: {
         type: import("vue").PropType<boolean | undefined>;
@@ -25,6 +31,7 @@ declare const collapseItemProps: {
         default: string;
     };
     blueMark: BooleanConstructor;
+    titleBold: BooleanConstructor;
     center: BooleanConstructor;
     isLink: BooleanConstructor;
     border: {
@@ -63,12 +70,18 @@ declare const _default: import("vue").DefineComponent<{
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
     tags: import("vue").PropType<import("../utils").Numeric[]>;
     titleIcon: StringConstructor;
     rightIcon: StringConstructor;
     note: (NumberConstructor | StringConstructor)[];
+    noteBold: BooleanConstructor;
+    noteClickable: BooleanConstructor;
+    noteTo: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+    noteUrl: StringConstructor;
+    noteReplace: BooleanConstructor;
     badge: (NumberConstructor | StringConstructor)[];
     leftSelect: {
         type: import("vue").PropType<boolean | undefined>;
@@ -83,6 +96,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     blueMark: BooleanConstructor;
+    titleBold: BooleanConstructor;
     center: BooleanConstructor;
     isLink: BooleanConstructor;
     border: {
@@ -119,12 +133,18 @@ declare const _default: import("vue").DefineComponent<{
     title: (NumberConstructor | StringConstructor)[];
     value: (NumberConstructor | StringConstructor)[];
     label: (NumberConstructor | StringConstructor)[];
+    labelSize: (NumberConstructor | StringConstructor)[];
     avatar: StringConstructor;
     rightAvatar: StringConstructor;
     tags: import("vue").PropType<import("../utils").Numeric[]>;
     titleIcon: StringConstructor;
     rightIcon: StringConstructor;
     note: (NumberConstructor | StringConstructor)[];
+    noteBold: BooleanConstructor;
+    noteClickable: BooleanConstructor;
+    noteTo: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+    noteUrl: StringConstructor;
+    noteReplace: BooleanConstructor;
     badge: (NumberConstructor | StringConstructor)[];
     leftSelect: {
         type: import("vue").PropType<boolean | undefined>;
@@ -139,6 +159,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     blueMark: BooleanConstructor;
+    titleBold: BooleanConstructor;
     center: BooleanConstructor;
     isLink: BooleanConstructor;
     border: {
@@ -172,10 +193,14 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     required: boolean;
     center: boolean;
+    noteBold: boolean;
+    noteClickable: boolean;
+    noteReplace: boolean;
     leftSelect: boolean | undefined;
     rightSelect: boolean | undefined;
     selectType: import("../cell").CellSelectType;
     blueMark: boolean;
+    titleBold: boolean;
     isLink: boolean;
     border: boolean;
     errorBorder: boolean;