persagy-vant 0.0.32 → 0.0.34

package/README.md

@@ -39,7 +39,7 @@ pnpm up persagy-vant@latest
 
 组件、组件文档和 Skill 会随 npm 包一起更新；已有的 `.agents` 入口会自动读取新版内容，无需再次初始化。仅当维护者通知入口机制有变时，才执行 `pnpm exec persagy-vant init --force`。
 
-完整的可转发说明见：[产品经理 AI 开发使用说明](./docs/markdown/product-manager-guide.zh-CN.md)。
+完整的可转发说明见：[Persagy Vant 组件库与 Skill 使用说明](./docs/markdown/product-manager-guide.zh-CN.md)。
 
 ## 包结构
 

package/es/badge/Badge.d.ts

@@ -1,6 +1,7 @@
 import { type PropType, type ExtractPropTypes } from 'vue';
 import { type Numeric } from '../utils';
 export declare type BadgePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export declare type BadgeSize = 'default' | 'mini';
 declare const badgeProps: {
     dot: BooleanConstructor;
     max: (NumberConstructor | StringConstructor)[];
@@ -15,6 +16,10 @@ declare const badgeProps: {
         type: BooleanConstructor;
         default: true;
     };
+    size: {
+        type: PropType<BadgeSize>;
+        default: BadgeSize;
+    };
     position: {
         type: PropType<BadgePosition>;
         default: BadgePosition;
@@ -35,6 +40,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    size: {
+        type: PropType<BadgeSize>;
+        default: BadgeSize;
+    };
     position: {
         type: PropType<BadgePosition>;
         default: BadgePosition;
@@ -53,6 +62,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    size: {
+        type: PropType<BadgeSize>;
+        default: BadgeSize;
+    };
     position: {
         type: PropType<BadgePosition>;
         default: BadgePosition;
@@ -61,6 +74,7 @@ declare const _default: import("vue").DefineComponent<{
     dot: boolean;
     tag: keyof HTMLElementTagNameMap;
     showZero: boolean;
+    size: BadgeSize;
     position: BadgePosition;
 }>;
 export default _default;

package/es/badge/Badge.mjs

@@ -9,6 +9,7 @@ const badgeProps = {
   offset: Array,
   content: numericProp,
   showZero: truthProp,
+  size: makeStringProp("default"),
   position: makeStringProp("top-right")
 };
 var stdin_default = defineComponent({
@@ -68,6 +69,7 @@ var stdin_default = defineComponent({
         return _createVNode("div", {
           "class": bem([props.position, {
             dot: props.dot,
+            mini: props.size === "mini",
             fixed: !!slots.default
           }]),
           "style": style.value

package/es/badge/index.css

@@ -1 +1 @@
-:root{--van-badge-size: 16px;--van-badge-color: var(--van-white);--van-badge-padding: 0 3px;--van-badge-font-size: var(--van-font-size-sm);--van-badge-font-weight: var(--van-font-weight-bold);--van-badge-border-width: var(--van-border-width-base);--van-badge-background-color: var(--van-danger-color);--van-badge-dot-color: var(--van-danger-color);--van-badge-dot-size: 8px;--van-badge-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif}.van-badge{display:inline-block;box-sizing:border-box;min-width:var(--van-badge-size);padding:var(--van-badge-padding);color:var(--van-badge-color);font-weight:var(--van-badge-font-weight);font-size:var(--van-badge-font-size);font-family:var(--van-badge-font-family);line-height:1.2;text-align:center;background:var(--van-badge-background-color);border:var(--van-badge-border-width) solid var(--van-background-color-light);border-radius:var(--van-border-radius-max)}.van-badge--fixed{position:absolute;transform-origin:100%}.van-badge--top-left{top:0;left:0;transform:translate(-50%,-50%)}.van-badge--top-right{top:0;right:0;transform:translate(50%,-50%)}.van-badge--bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.van-badge--bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.van-badge--dot{width:var(--van-badge-dot-size);min-width:0;height:var(--van-badge-dot-size);background:var(--van-badge-dot-color);border-radius:100%;border:none;padding:0}.van-badge__wrapper{position:relative;display:inline-block}
+:root{--van-badge-size: 16px;--van-badge-color: var(--van-white);--van-badge-padding: 0 3px;--van-badge-font-size: var(--van-font-size-sm);--van-badge-font-weight: var(--van-font-weight-bold);--van-badge-border-width: var(--van-border-width-base);--van-badge-background-color: var(--van-danger-color);--van-badge-dot-color: var(--van-danger-color);--van-badge-dot-size: 8px;--van-badge-mini-dot-size: 6px;--van-badge-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif}.van-badge{display:inline-block;box-sizing:border-box;min-width:var(--van-badge-size);padding:var(--van-badge-padding);color:var(--van-badge-color);font-weight:var(--van-badge-font-weight);font-size:var(--van-badge-font-size);font-family:var(--van-badge-font-family);line-height:1.2;text-align:center;background:var(--van-badge-background-color);border:var(--van-badge-border-width) solid var(--van-background-color-light);border-radius:var(--van-border-radius-max)}.van-badge--fixed{position:absolute;transform-origin:100%}.van-badge--top-left{top:0;left:0;transform:translate(-50%,-50%)}.van-badge--top-right{top:0;right:0;transform:translate(50%,-50%)}.van-badge--bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.van-badge--bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.van-badge--dot{width:var(--van-badge-dot-size);min-width:0;height:var(--van-badge-dot-size);background:var(--van-badge-dot-color);border-radius:100%;border:none;padding:0}.van-badge--dot.van-badge--mini{width:var(--van-badge-mini-dot-size);height:var(--van-badge-mini-dot-size)}.van-badge__wrapper{position:relative;display:inline-block}

package/es/badge/index.d.ts

@@ -12,6 +12,10 @@ export declare const Badge: import("../utils").WithInstall<import("vue").DefineC
         type: BooleanConstructor;
         default: true;
     };
+    size: {
+        type: import("vue").PropType<import("./Badge").BadgeSize>;
+        default: import("./Badge").BadgeSize;
+    };
     position: {
         type: import("vue").PropType<import("./Badge").BadgePosition>;
         default: import("./Badge").BadgePosition;
@@ -30,6 +34,10 @@ export declare const Badge: import("../utils").WithInstall<import("vue").DefineC
         type: BooleanConstructor;
         default: true;
     };
+    size: {
+        type: import("vue").PropType<import("./Badge").BadgeSize>;
+        default: import("./Badge").BadgeSize;
+    };
     position: {
         type: import("vue").PropType<import("./Badge").BadgePosition>;
         default: import("./Badge").BadgePosition;
@@ -38,10 +46,11 @@ export declare const Badge: import("../utils").WithInstall<import("vue").DefineC
     dot: boolean;
     tag: keyof HTMLElementTagNameMap;
     showZero: boolean;
+    size: import("./Badge").BadgeSize;
     position: import("./Badge").BadgePosition;
 }>>;
 export default Badge;
-export type { BadgeProps, BadgePosition } from './Badge';
+export type { BadgeProps, BadgePosition, BadgeSize } from './Badge';
 declare module 'vue' {
     interface GlobalComponents {
         VanBadge: typeof Badge;

package/es/badge/index.less

@@ -10,6 +10,7 @@
   --van-badge-background-color: @badge-background-color;
   --van-badge-dot-color: @badge-dot-color;
   --van-badge-dot-size: @badge-dot-size;
+  --van-badge-mini-dot-size: @badge-mini-dot-size;
   --van-badge-font-family: @badge-font-family;
 }
 
@@ -65,6 +66,11 @@
     border-radius: 100%;
     border: none;
     padding: 0;
+
+    &.van-badge--mini {
+      width: var(--van-badge-mini-dot-size);
+      height: var(--van-badge-mini-dot-size);
+    }
   }
 
   &__wrapper {

package/es/badge/var.less

@@ -9,4 +9,5 @@
 @badge-background-color: var(--van-danger-color);
 @badge-dot-color: var(--van-danger-color);
 @badge-dot-size: 8px;
+@badge-mini-dot-size: 6px;
 @badge-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;

package/es/button/Button.d.ts

@@ -129,8 +129,8 @@ declare const _default: import("vue").DefineComponent<{
     replace: boolean;
     type: ButtonType;
     tag: keyof HTMLElementTagNameMap;
-    round: boolean;
     size: ButtonSize;
+    round: boolean;
     disabled: boolean;
     square: boolean;
     loading: boolean;

package/es/button/index.d.ts

@@ -84,8 +84,8 @@ export declare const Button: import("../utils").WithInstall<import("vue").Define
     replace: boolean;
     type: import("./types").ButtonType;
     tag: keyof HTMLElementTagNameMap;
-    round: boolean;
     size: import("./types").ButtonSize;
+    round: boolean;
     disabled: boolean;
     square: boolean;
     loading: boolean;

package/es/field/Field.d.ts

@@ -18,10 +18,7 @@ export declare const fieldSharedProps: {
         type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
-    inputAlign: {
-        type: PropType<FieldTextAlign>;
-        default: FieldTextAlign;
-    };
+    inputAlign: PropType<FieldTextAlign>;
     placeholder: StringConstructor;
     autocomplete: StringConstructor;
     errorMessage: StringConstructor;
@@ -115,10 +112,7 @@ declare const fieldProps: {
         type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
-    inputAlign: {
-        type: PropType<FieldTextAlign>;
-        default: FieldTextAlign;
-    };
+    inputAlign: PropType<FieldTextAlign>;
     placeholder: StringConstructor;
     autocomplete: StringConstructor;
     errorMessage: StringConstructor;
@@ -239,10 +233,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
-    inputAlign: {
-        type: PropType<FieldTextAlign>;
-        default: FieldTextAlign;
-    };
+    inputAlign: PropType<FieldTextAlign>;
     placeholder: StringConstructor;
     autocomplete: StringConstructor;
     errorMessage: StringConstructor;
@@ -361,10 +352,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
-    inputAlign: {
-        type: PropType<FieldTextAlign>;
-        default: FieldTextAlign;
-    };
+    inputAlign: PropType<FieldTextAlign>;
     placeholder: StringConstructor;
     autocomplete: StringConstructor;
     errorMessage: StringConstructor;
@@ -429,8 +417,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     type: FieldType;
     required: boolean;
-    center: boolean;
     size: CellSize;
+    center: boolean;
     noteBold: boolean;
     noteClickable: boolean;
     noteReplace: boolean;
@@ -448,7 +436,6 @@ declare const _default: import("vue").DefineComponent<{
     modelValue: string | number;
     clearable: boolean;
     clearIcon: string;
-    inputAlign: FieldTextAlign;
     clearTrigger: FieldClearTrigger;
     formatTrigger: FieldFormatTrigger;
     error: boolean;

package/es/field/Field.mjs

@@ -19,7 +19,7 @@ const fieldSharedProps = {
   formatter: Function,
   clearIcon: makeStringProp("clear"),
   modelValue: makeNumericProp(""),
-  inputAlign: makeStringProp("left"),
+  inputAlign: String,
   placeholder: String,
   autocomplete: String,
   errorMessage: String,
@@ -92,6 +92,7 @@ var stdin_default = defineComponent({
         return form.props[key];
       }
     };
+    const inputAlign = computed(() => getProp("inputAlign") || (props.labelPosition === "top" ? "left" : "right"));
     const showClear = computed(() => {
       const readonly = getProp("readonly");
       if (props.clearable && !readonly) {
@@ -333,7 +334,7 @@ var stdin_default = defineComponent({
     const getInputId = () => props.id || `${id}-input`;
     const getValidationStatus = () => state.status;
     const renderInput = () => {
-      const controlClass = bem("control", [getProp("inputAlign"), {
+      const controlClass = bem("control", [inputAlign.value, {
         error: showError.value,
         custom: !!slots.input,
         "min-height": props.type === "textarea" && !props.autosize

package/es/field/index.d.ts

@@ -67,10 +67,7 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
         type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
-    inputAlign: {
-        type: import("vue").PropType<import("./types").FieldTextAlign>;
-        default: import("./types").FieldTextAlign;
-    };
+    inputAlign: import("vue").PropType<import("./types").FieldTextAlign>;
     placeholder: StringConstructor;
     autocomplete: StringConstructor;
     errorMessage: StringConstructor;
@@ -189,10 +186,7 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
         type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
-    inputAlign: {
-        type: import("vue").PropType<import("./types").FieldTextAlign>;
-        default: import("./types").FieldTextAlign;
-    };
+    inputAlign: import("vue").PropType<import("./types").FieldTextAlign>;
     placeholder: StringConstructor;
     autocomplete: StringConstructor;
     errorMessage: StringConstructor;
@@ -257,8 +251,8 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
 }, {
     type: import("./types").FieldType;
     required: boolean;
-    center: boolean;
     size: import("..").CellSize;
+    center: boolean;
     noteBold: boolean;
     noteClickable: boolean;
     noteReplace: boolean;
@@ -276,7 +270,6 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
     modelValue: string | number;
     clearable: boolean;
     clearIcon: string;
-    inputAlign: import("./types").FieldTextAlign;
     clearTrigger: import("./types").FieldClearTrigger;
     formatTrigger: import("./types").FieldFormatTrigger;
     error: boolean;

package/es/index.d.ts

@@ -116,4 +116,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "0.0.32";
+export const version: "0.0.34";

package/es/index.mjs

@@ -109,7 +109,7 @@ import { Uploader } from "./uploader/index.mjs";
 import { VideoPreview } from "./video-preview/index.mjs";
 import { WorkOrderCard } from "./work-order-card/index.mjs";
 import { WorkOrderFilter } from "./work-order-filter/index.mjs";
-const version = "0.0.32";
+const version = "0.0.34";
 function install(app) {
   const components = [
     ActionBar,

package/es/loading/Loading.mjs

@@ -15,30 +15,27 @@ const CircularIcon = _createVNode("svg", {
 }, null)]);
 const IllustrationIcon = _createVNode("svg", {
   "class": bem("illustration"),
-  "viewBox": "0 0 120 120",
-  "role": "img",
-  "aria-label": "Loading"
+  "viewBox": "0 0 100 100",
+  "fill": "none",
+  "aria-hidden": "true"
 }, [_createVNode("rect", {
-  "x": "16",
-  "y": "42",
-  "width": "88",
-  "height": "62",
-  "rx": "8",
-  "fill": "currentColor",
-  "opacity": "0.12"
-}, null), _createVNode("path", {
-  "d": "M28 42h64v62H28z",
+  "x": "18",
+  "y": "36",
+  "width": "64",
+  "height": "48",
+  "rx": "6",
   "fill": "currentColor",
-  "opacity": "0.24"
+  "opacity": "0.14"
 }, null), _createVNode("path", {
-  "d": "M38 54h12v12H38zm18 0h12v12H56zm18 0h12v12H74zM38 74h12v18H38zm18 0h12v18H56zm18 0h12v18H74z",
-  "fill": "currentColor",
-  "opacity": "0.78"
+  "d": "M28 84V46h44v38M39 84V62h22v22M38 51h4m16 0h4M38 57h4m16 0h4",
+  "stroke": "currentColor",
+  "stroke-width": "4",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
 }, null), _createVNode("path", {
-  "d": "M48 42V27c0-7 5-12 12-12s12 5 12 12v15",
-  "fill": "none",
+  "d": "M50 18v12m-16-4 8 8m24-8-8 8",
   "stroke": "currentColor",
-  "stroke-width": "8",
+  "stroke-width": "4",
   "stroke-linecap": "round"
 }, null)]);
 const loadingProps = {

package/es/rate/RateCell.d.ts

@@ -179,8 +179,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     title: string;
-    icon: string;
     size: string | number;
+    icon: string;
     border: boolean;
     disabled: boolean;
     modelValue: number;

package/es/rate/index.d.ts

@@ -191,8 +191,8 @@ export declare const RateCell: import("../utils").WithInstall<import("vue").Defi
 }, {
     required: boolean;
     title: string;
-    icon: string;
     size: string | number;
+    icon: string;
     border: boolean;
     disabled: boolean;
     modelValue: number;

package/es/search/Search.d.ts

@@ -1,4 +1,5 @@
 import { type ExtractPropTypes } from 'vue';
+import { FieldTextAlign } from '../field';
 import type { SearchShape, SearchVariant } from './types';
 declare const searchProps: {
     id: StringConstructor;
@@ -17,10 +18,7 @@ declare const searchProps: {
         type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
-    inputAlign: {
-        type: import("vue").PropType<import("../field").FieldTextAlign>;
-        default: import("../field").FieldTextAlign;
-    };
+    inputAlign: import("vue").PropType<FieldTextAlign>;
     placeholder: StringConstructor;
     autocomplete: StringConstructor;
     errorMessage: StringConstructor;
@@ -55,6 +53,10 @@ declare const searchProps: {
         type: import("vue").PropType<SearchVariant>;
         default: SearchVariant;
     };
+    inputAlign: {
+        type: import("vue").PropType<FieldTextAlign>;
+        default: FieldTextAlign;
+    };
     leftIcon: {
         type: import("vue").PropType<string>;
         default: string;
@@ -85,10 +87,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
-    inputAlign: {
-        type: import("vue").PropType<import("../field").FieldTextAlign>;
-        default: import("../field").FieldTextAlign;
-    };
+    inputAlign: import("vue").PropType<FieldTextAlign>;
     placeholder: StringConstructor;
     autocomplete: StringConstructor;
     errorMessage: StringConstructor;
@@ -123,6 +122,10 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<SearchVariant>;
         default: SearchVariant;
     };
+    inputAlign: {
+        type: import("vue").PropType<FieldTextAlign>;
+        default: FieldTextAlign;
+    };
     leftIcon: {
         type: import("vue").PropType<string>;
         default: string;
@@ -151,10 +154,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
-    inputAlign: {
-        type: import("vue").PropType<import("../field").FieldTextAlign>;
-        default: import("../field").FieldTextAlign;
-    };
+    inputAlign: import("vue").PropType<FieldTextAlign>;
     placeholder: StringConstructor;
     autocomplete: StringConstructor;
     errorMessage: StringConstructor;
@@ -189,6 +189,10 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<SearchVariant>;
         default: SearchVariant;
     };
+    inputAlign: {
+        type: import("vue").PropType<FieldTextAlign>;
+        default: FieldTextAlign;
+    };
     leftIcon: {
         type: import("vue").PropType<string>;
         default: string;
@@ -218,7 +222,7 @@ declare const _default: import("vue").DefineComponent<{
     leftIcon: string;
     clearable: boolean;
     clearIcon: string;
-    inputAlign: import("../field").FieldTextAlign;
+    inputAlign: FieldTextAlign;
     clearTrigger: import("../field").FieldClearTrigger;
     formatTrigger: import("../field").FieldFormatTrigger;
     error: boolean;

package/es/search/Search.mjs

@@ -9,6 +9,7 @@ const searchProps = extend({}, fieldSharedProps, {
   label: String,
   shape: makeStringProp("round"),
   variant: makeStringProp("default"),
+  inputAlign: makeStringProp("left"),
   leftIcon: makeStringProp("search"),
   clearable: truthProp,
   actionText: String,

package/es/search/index.d.ts

@@ -16,10 +16,7 @@ export declare const Search: import("../utils").WithInstall<import("vue").Define
         type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
-    inputAlign: {
-        type: import("vue").PropType<import("..").FieldTextAlign>;
-        default: import("..").FieldTextAlign;
-    };
+    inputAlign: import("vue").PropType<import("..").FieldTextAlign>;
     placeholder: StringConstructor;
     autocomplete: StringConstructor;
     errorMessage: StringConstructor;
@@ -54,6 +51,10 @@ export declare const Search: import("../utils").WithInstall<import("vue").Define
         type: import("vue").PropType<import("./types").SearchVariant>;
         default: import("./types").SearchVariant;
     };
+    inputAlign: {
+        type: import("vue").PropType<import("..").FieldTextAlign>;
+        default: import("..").FieldTextAlign;
+    };
     leftIcon: {
         type: import("vue").PropType<string>;
         default: string;
@@ -82,10 +83,7 @@ export declare const Search: import("../utils").WithInstall<import("vue").Define
         type: (NumberConstructor | StringConstructor)[];
         default: string;
     };
-    inputAlign: {
-        type: import("vue").PropType<import("..").FieldTextAlign>;
-        default: import("..").FieldTextAlign;
-    };
+    inputAlign: import("vue").PropType<import("..").FieldTextAlign>;
     placeholder: StringConstructor;
     autocomplete: StringConstructor;
     errorMessage: StringConstructor;
@@ -120,6 +118,10 @@ export declare const Search: import("../utils").WithInstall<import("vue").Define
         type: import("vue").PropType<import("./types").SearchVariant>;
         default: import("./types").SearchVariant;
     };
+    inputAlign: {
+        type: import("vue").PropType<import("..").FieldTextAlign>;
+        default: import("..").FieldTextAlign;
+    };
     leftIcon: {
         type: import("vue").PropType<string>;
         default: string;

package/es/sidebar/index.css

@@ -1 +1 @@
-:root{--van-sidebar-width: 80px}.van-sidebar{width:var(--van-sidebar-width);overflow-y:auto;-webkit-overflow-scrolling:touch}
+:root{--van-sidebar-width: 80px}.van-sidebar{width:var(--van-sidebar-width);overflow-y:auto;background:var(--van-gray-2);-webkit-overflow-scrolling:touch}

package/es/sidebar/index.less

@@ -7,5 +7,6 @@
 .van-sidebar {
   width: var(--van-sidebar-width);
   overflow-y: auto;
+  background: var(--van-gray-2);
   -webkit-overflow-scrolling: touch;
 }

package/es/sidebar-item/index.css

@@ -1 +1 @@
-:root{--van-sidebar-font-size: var(--van-font-size-md);--van-sidebar-line-height: var(--van-line-height-md);--van-sidebar-text-color: var(--van-text-color);--van-sidebar-disabled-text-color: var(--van-text-color-3);--van-sidebar-padding: 20px var(--van-padding-sm);--van-sidebar-active-color: var(--van-active-color);--van-sidebar-background-color: var(--van-background-color);--van-sidebar-selected-font-weight: var(--van-font-weight-bold);--van-sidebar-selected-text-color: var(--van-text-color);--van-sidebar-selected-border-width: 4px;--van-sidebar-selected-border-height: 16px;--van-sidebar-selected-border-color: var(--van-primary-color);--van-sidebar-selected-background-color: var(--van-background-color-light)}.van-sidebar-item{position:relative;display:block;box-sizing:border-box;padding:var(--van-sidebar-padding);overflow:hidden;color:var(--van-sidebar-text-color);font-size:var(--van-sidebar-font-size);line-height:var(--van-sidebar-line-height);background:var(--van-sidebar-background-color);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.van-sidebar-item:active{background-color:var(--van-sidebar-active-color)}.van-sidebar-item:not(:last-child):after{border-bottom-width:1px}.van-sidebar-item__text{word-break:break-all}.van-sidebar-item--select{color:var(--van-sidebar-selected-text-color);font-weight:var(--van-sidebar-selected-font-weight)}.van-sidebar-item--select,.van-sidebar-item--select:active{background-color:var(--van-sidebar-selected-background-color)}.van-sidebar-item--select:before{position:absolute;top:50%;left:0;width:var(--van-sidebar-selected-border-width);height:var(--van-sidebar-selected-border-height);background-color:var(--van-sidebar-selected-border-color);transform:translateY(-50%);content:""}.van-sidebar-item--disabled{color:var(--van-sidebar-disabled-text-color);cursor:not-allowed}.van-sidebar-item--disabled:active{background-color:var(--van-sidebar-background-color)}
+:root{--van-sidebar-font-size: var(--van-font-size-md);--van-sidebar-line-height: var(--van-line-height-lg);--van-sidebar-text-color: var(--van-text-color);--van-sidebar-disabled-text-color: var(--van-text-color-3);--van-sidebar-padding: 20px var(--van-padding-xs);--van-sidebar-active-color: var(--van-active-color);--van-sidebar-background-color: var(--van-gray-2);--van-sidebar-selected-font-weight: 600;--van-sidebar-selected-text-color: var(--van-blue);--van-sidebar-selected-border-width: 3px;--van-sidebar-selected-border-height: 12px;--van-sidebar-selected-border-color: var(--van-primary-color);--van-sidebar-selected-background-color: var(--van-background-color-light)}.van-sidebar-item{position:relative;display:flex;box-sizing:border-box;min-height:60px;padding:var(--van-sidebar-padding);overflow:hidden;color:var(--van-sidebar-text-color);font-size:var(--van-sidebar-font-size);line-height:var(--van-sidebar-line-height);text-align:center;background:var(--van-sidebar-background-color);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.van-sidebar-item:active{background-color:var(--van-sidebar-background-color)}.van-sidebar-item__text{position:static;display:flex;flex:1;align-items:center;justify-content:center;min-width:0;overflow-wrap:anywhere;word-break:break-word}.van-sidebar-item--select{padding:4px;color:var(--van-sidebar-selected-text-color);font-weight:var(--van-sidebar-selected-font-weight)}.van-sidebar-item--select,.van-sidebar-item--select:active{background-color:var(--van-sidebar-background-color)}.van-sidebar-item--select .van-sidebar-item__text{min-height:52px;padding:0 4px;background-color:var(--van-sidebar-selected-background-color);border-radius:var(--van-border-radius-lg)}.van-sidebar-item--select:before{position:absolute;top:24px;left:8px;width:var(--van-sidebar-selected-border-width);height:var(--van-sidebar-selected-border-height);background-color:var(--van-sidebar-selected-border-color);border-radius:var(--van-border-radius-md);content:""}.van-sidebar-item .van-badge--fixed{top:10px;right:10px;transform:none}.van-sidebar-item .van-badge--dot{top:20px;right:14px;width:6px;height:6px;background-color:var(--van-red)}.van-sidebar-item--disabled{color:var(--van-sidebar-disabled-text-color);cursor:not-allowed}.van-sidebar-item--disabled:active{background-color:var(--van-sidebar-background-color)}

package/es/sidebar-item/index.less

@@ -18,51 +18,77 @@
 
 .van-sidebar-item {
   position: relative;
-  display: block;
+  display: flex;
   box-sizing: border-box;
+  min-height: 60px;
   padding: var(--van-sidebar-padding);
   overflow: hidden;
   color: var(--van-sidebar-text-color);
   font-size: var(--van-sidebar-font-size);
   line-height: var(--van-sidebar-line-height);
+  text-align: center;
   background: var(--van-sidebar-background-color);
   cursor: pointer;
   user-select: none;
 
   &:active {
-    background-color: var(--van-sidebar-active-color);
-  }
-
-  &:not(:last-child)::after {
-    border-bottom-width: 1px;
+    background-color: var(--van-sidebar-background-color);
   }
 
   &__text {
-    // https://github.com/vant-ui/vant/issues/7455
-    word-break: break-all;
+    position: static;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    word-break: break-word;
   }
 
   &--select {
+    padding: 4px;
     color: var(--van-sidebar-selected-text-color);
     font-weight: var(--van-sidebar-selected-font-weight);
 
     &,
     &:active {
+      background-color: var(--van-sidebar-background-color);
+    }
+
+    .van-sidebar-item__text {
+      min-height: 52px;
+      padding: 0 4px;
       background-color: var(--van-sidebar-selected-background-color);
+      border-radius: var(--van-border-radius-lg);
     }
 
     &::before {
       position: absolute;
-      top: 50%;
-      left: 0;
+      top: 24px;
+      left: 8px;
       width: var(--van-sidebar-selected-border-width);
       height: var(--van-sidebar-selected-border-height);
       background-color: var(--van-sidebar-selected-border-color);
-      transform: translateY(-50%);
+      border-radius: var(--van-border-radius-md);
       content: '';
     }
   }
 
+  .van-badge--fixed {
+    top: 10px;
+    right: 10px;
+    transform: none;
+  }
+
+  .van-badge--dot {
+    top: 20px;
+    right: 14px;
+    width: 6px;
+    height: 6px;
+    background-color: var(--van-red);
+  }
+
   &--disabled {
     color: var(--van-sidebar-disabled-text-color);
     cursor: not-allowed;