huibo-ui 0.3.0 → 0.4.0

package/dist/collection/components/Slider/Slider.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 /**
  * Slider 滑块组件
- * 通过拖动滑块在一个固定区间内进行选择
+ * 通过拖动滑块在一个固定区间内进行选择，支持单滑块/双滑块（range）/竖向/刻度。
  */
 export class Slider {
     el;
@@ -52,12 +52,20 @@ export class Slider {
      * 高度，竖向模式时必填
      */
     height;
+    /**
+     * 刻度标记（对齐 antd marks）
+     */
+    marks;
     dragging = false;
     currentValue = 0;
     tooltipVisible = false;
     tooltipValue = 0;
+    /** range 模式下当前拖动的是哪个手柄（0/1），用于 tooltip 定位与渲染 */
+    activeHandle = 0;
     sliderRef;
     isDragging = false;
+    /** 拖动期间锁定的手柄索引（鼠标按下时确定） */
+    dragHandle = null;
     /**
      * 值改变事件
      */
@@ -67,12 +75,28 @@ export class Slider {
      */
     hbInput;
     componentDidLoad() {
-        this.currentValue = this.modelValue;
+        this.currentValue = this.normalizeInitial(this.modelValue);
         this.addEventListeners();
     }
     disconnectedCallback() {
         this.removeEventListeners();
     }
+    /** 外部更新 modelValue 时同步内部 currentValue（对齐 antd 受控语义） */
+    handleModelChange() {
+        if (!this.isDragging) {
+            this.currentValue = this.normalizeInitial(this.modelValue);
+        }
+    }
+    /** range 模式下确保 currentValue 为 [min, max] 形状的有序数组 */
+    normalizeInitial(v) {
+        if (this.range) {
+            if (Array.isArray(v) && v.length === 2) {
+                return v[0] <= v[1] ? [v[0], v[1]] : [v[1], v[0]];
+            }
+            return [this.min, this.max];
+        }
+        return typeof v === 'number' ? v : (Array.isArray(v) ? v[0] ?? this.min : this.min);
+    }
     addEventListeners() {
         document.addEventListener('mousemove', this.handleMouseMove);
         document.addEventListener('mouseup', this.handleMouseUp);
@@ -82,18 +106,31 @@ export class Slider {
         document.removeEventListener('mouseup', this.handleMouseUp);
     }
     getPercentage(value) {
+        if (this.max === this.min)
+            return 0;
         return ((value - this.min) / (this.max - this.min)) * 100;
     }
     getValueFromPercentage(percentage) {
         const value = this.min + (percentage / 100) * (this.max - this.min);
-        return Math.round(value / this.step) * this.step;
+        const snapped = Math.round(value / this.step) * this.step;
+        return Math.max(this.min, Math.min(this.max, snapped));
+    }
+    /** 鼠标按下时根据落点决定拖哪个手柄（range：更近的那个） */
+    resolveHandle(percentage) {
+        if (!this.range)
+            return 0;
+        const vals = this.currentValue;
+        const leftPct = this.getPercentage(vals[0]);
+        const rightPct = this.getPercentage(vals[1]);
+        return Math.abs(percentage - leftPct) <= Math.abs(percentage - rightPct) ? 0 : 1;
     }
-    handleMouseDown = (e) => {
+    handleMouseDown = (e, handle = null) => {
         if (this.disabled)
             return;
         e.preventDefault();
         this.isDragging = true;
         this.dragging = true;
+        this.dragHandle = handle;
         this.handleDrag(e);
     };
     handleMouseMove = (e) => {
@@ -107,6 +144,7 @@ export class Slider {
         this.isDragging = false;
         this.dragging = false;
         this.tooltipVisible = false;
+        this.dragHandle = null;
         this.hbChange.emit(this.currentValue);
     };
     handleDrag(e) {
@@ -119,11 +157,23 @@ export class Slider {
         const clampedPercentage = Math.max(0, Math.min(100, percentage * 100));
         const value = this.getValueFromPercentage(clampedPercentage);
         if (this.range) {
-            const values = this.currentValue;
-            // 简化处理：更新第一个值
-            this.currentValue = [value, values[1] || this.max];
+            const vals = this.currentValue;
+            // 优先用 mousedown 时锁定的手柄；未锁定（点击 runway）则按落点就近
+            const handle = this.dragHandle !== null ? this.dragHandle : this.resolveHandle(clampedPercentage);
+            this.activeHandle = handle;
+            let [lo, hi] = [vals[0], vals[1]];
+            if (handle === 0) {
+                lo = Math.min(value, hi);
+            }
+            else {
+                hi = Math.max(value, lo);
+            }
+            this.currentValue = [lo, hi];
+            this.tooltipValue = handle === 0 ? lo : hi;
+            this.tooltipVisible = true;
         }
         else {
+            this.activeHandle = 0;
             this.currentValue = value;
             this.tooltipValue = value;
             this.tooltipVisible = true;
@@ -131,29 +181,145 @@ export class Slider {
         this.modelValue = this.currentValue;
         this.hbInput.emit(this.currentValue);
     }
+    /** 键盘可访问：方向键调整当前手柄，对齐 WAI-ARIA slider pattern */
+    handleKeyDown = (e) => {
+        if (this.disabled)
+            return;
+        const { key } = e;
+        const isDecrease = key === 'ArrowLeft' || key === 'ArrowDown';
+        const isIncrease = key === 'ArrowRight' || key === 'ArrowUp';
+        const isBigDecrease = key === 'PageDown' || key === 'Home';
+        const isBigIncrease = key === 'PageUp' || key === 'End';
+        if (!isDecrease && !isIncrease && !isBigDecrease && !isBigIncrease)
+            return;
+        e.preventDefault();
+        const delta = isBigDecrease ? -this.max :
+            isBigIncrease ? this.max :
+                (isDecrease ? -1 : 1) * this.step;
+        if (this.range) {
+            const vals = this.currentValue;
+            let [lo, hi] = [vals[0], vals[1]];
+            if (this.activeHandle === 0) {
+                lo = Math.max(this.min, Math.min(lo + delta, hi));
+            }
+            else {
+                hi = Math.min(this.max, Math.max(hi + delta, lo));
+            }
+            this.currentValue = [lo, hi];
+            this.tooltipValue = this.activeHandle === 0 ? lo : hi;
+            this.tooltipVisible = true;
+        }
+        else {
+            const next = Math.max(this.min, Math.min(this.currentValue + delta, this.max));
+            this.currentValue = next;
+            this.tooltipValue = next;
+            this.tooltipVisible = true;
+        }
+        this.modelValue = this.currentValue;
+        this.hbChange.emit(this.currentValue);
+        this.hbInput.emit(this.currentValue);
+    };
     formatValue(value) {
         if (this.formatTooltip) {
             return this.formatTooltip(value);
         }
         return String(value);
     }
+    /** 规范化 marks 为 [{value,label}] 数组 */
+    get markList() {
+        if (!this.marks)
+            return [];
+        if (Array.isArray(this.marks))
+            return this.marks;
+        return Object.entries(this.marks).map(([k, v]) => ({ value: Number(k), label: v }));
+    }
     render() {
-        const percentage = this.range
-            ? this.getPercentage(this.currentValue[0])
-            : this.getPercentage(this.currentValue);
-        return (h("div", { key: 'b8ee15c3375f6786c252e6755ff6dd5d4ab0023f', class: {
+        const range = this.range;
+        const singlePct = this.getPercentage(this.currentValue);
+        const rangeVals = range ? this.currentValue : [0, 0];
+        const leftPct = range ? this.getPercentage(rangeVals[0]) : 0;
+        const rightPct = range ? this.getPercentage(rangeVals[1]) : singlePct;
+        // bar：单滑块从 min 到 value；range 从 lo 到 hi
+        const barStart = range ? leftPct : 0;
+        const barSize = range ? rightPct - leftPct : singlePct;
+        const posProp = this.vertical ? 'bottom' : 'left';
+        const sizeProp = this.vertical ? 'height' : 'width';
+        const renderHandle = (handle, pct) => {
+            const tooltipVal = range ? rangeVals[handle] : this.currentValue;
+            const isActive = this.tooltipVisible && (range ? this.activeHandle === handle : true);
+            return (h("div", { class: {
+                    'hb-slider__button-wrapper': true,
+                    'hb-slider__button-wrapper--hover': isActive,
+                }, style: { [posProp]: `${pct}%` }, onMouseDown: (e) => this.handleMouseDown(e, handle), onTouchStart: (e) => this.handleTouchStart(e, handle), role: "slider", tabindex: this.disabled ? -1 : 0, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": tooltipVal, "aria-valuetext": this.formatValue(tooltipVal), "aria-orientation": this.vertical ? 'vertical' : 'horizontal', "aria-disabled": this.disabled ? 'true' : 'false', onKeyDown: this.handleKeyDown }, this.showTooltip && isActive && (h("div", { class: "hb-slider__tooltip" }, this.formatValue(this.tooltipValue))), h("div", { class: "hb-slider__button" })));
+        };
+        return (h("div", { class: {
                 'hb-slider': true,
                 'hb-slider--vertical': this.vertical,
                 'hb-slider--disabled': this.disabled,
-            }, style: this.vertical && this.height ? { height: this.height } : undefined }, h("div", { key: 'c75f1194e3a8a630d4ffa0cb82579fddc42e2461', class: "hb-slider__runway", ref: (el) => (this.sliderRef = el), onMouseDown: this.handleMouseDown }, h("div", { key: '5dcf4d4807e85cd4a96fd919d4b9d999f0d837d7', class: "hb-slider__bar", style: {
-                [this.vertical ? 'height' : 'width']: `${percentage}%`,
-                [this.vertical ? 'bottom' : 'left']: '0',
-            } }), h("div", { key: 'e10dc431c839183de585debfd9991a2d75922cc9', class: {
-                'hb-slider__button-wrapper': true,
-                'hb-slider__button-wrapper--hover': this.tooltipVisible,
-            }, style: {
-                [this.vertical ? 'bottom' : 'left']: `${percentage}%`,
-            } }, this.showTooltip && this.tooltipVisible && (h("div", { key: '270c0d8dd46b03fac7b4b8e62265a14158de18b7', class: "hb-slider__tooltip" }, this.formatValue(this.tooltipValue))), h("div", { key: '20772f2a08bed8c009c119b1c148ff0448c9a288', class: "hb-slider__button" })))));
+                'hb-slider--with-marks': this.markList.length > 0,
+            }, style: this.vertical && this.height ? { height: this.height } : undefined }, h("div", { class: "hb-slider__runway", ref: (el) => (this.sliderRef = el), onMouseDown: (e) => this.handleMouseDown(e, null), onTouchStart: (e) => this.handleTouchStart(e, null) }, h("div", { class: "hb-slider__bar", style: {
+                [sizeProp]: `${Math.max(0, barSize)}%`,
+                [posProp]: `${barStart}%`,
+            } }), this.markList.map(m => {
+            const pct = this.getPercentage(m.value);
+            return (h("div", { class: "hb-slider__mark", style: { [posProp]: `${pct}%` }, "aria-hidden": "true" }, m.label && h("span", { class: "hb-slider__mark-label" }, m.label)));
+        }), range ? renderHandle(0, leftPct) : null, renderHandle(range ? 1 : 0, range ? rightPct : singlePct))));
+    }
+    /** 触屏支持：把 touch 事件映射到 mouse 同等逻辑（移动端可用） */
+    handleTouchStart = (e, handle) => {
+        if (this.disabled)
+            return;
+        e.preventDefault();
+        const touch = e.touches[0];
+        this.isDragging = true;
+        this.dragging = true;
+        this.dragHandle = handle;
+        this.dragFromTouch(touch.clientX, touch.clientY);
+        const move = (ev) => {
+            const t = ev.touches[0];
+            this.dragFromTouch(t.clientX, t.clientY);
+        };
+        const end = () => {
+            this.isDragging = false;
+            this.dragging = false;
+            this.tooltipVisible = false;
+            this.dragHandle = null;
+            this.hbChange.emit(this.currentValue);
+            document.removeEventListener('touchmove', move);
+            document.removeEventListener('touchend', end);
+        };
+        document.addEventListener('touchmove', move, { passive: false });
+        document.addEventListener('touchend', end);
+    };
+    dragFromTouch(clientX, clientY) {
+        if (!this.sliderRef)
+            return;
+        const rect = this.sliderRef.getBoundingClientRect();
+        const percentage = this.vertical
+            ? 1 - (clientY - rect.top) / rect.height
+            : (clientX - rect.left) / rect.width;
+        const clamped = Math.max(0, Math.min(100, percentage * 100));
+        const value = this.getValueFromPercentage(clamped);
+        if (this.range) {
+            const vals = this.currentValue;
+            const handle = this.dragHandle !== null ? this.dragHandle : this.resolveHandle(clamped);
+            this.activeHandle = handle;
+            let [lo, hi] = [vals[0], vals[1]];
+            if (handle === 0)
+                lo = Math.min(value, hi);
+            else
+                hi = Math.max(value, lo);
+            this.currentValue = [lo, hi];
+            this.tooltipValue = handle === 0 ? lo : hi;
+            this.tooltipVisible = true;
+        }
+        else {
+            this.currentValue = value;
+            this.tooltipValue = value;
+            this.tooltipVisible = true;
+        }
+        this.modelValue = this.currentValue;
+        this.hbInput.emit(this.currentValue);
     }
     static get is() { return "hb-slider"; }
     static get encapsulation() { return "shadow"; }
@@ -385,6 +551,33 @@ export class Slider {
                 "setter": false,
                 "attribute": "height",
                 "reflect": false
+            },
+            "marks": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SliderMark[] | Record<number, string>",
+                    "resolved": "SliderMark[] | { [x: number]: string; }",
+                    "references": {
+                        "SliderMark": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Slider/Slider.tsx",
+                            "id": "src/components/Slider/Slider.tsx::SliderMark"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u523B\u5EA6\u6807\u8BB0\uFF08\u5BF9\u9F50 antd marks\uFF09"
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
@@ -393,7 +586,8 @@ export class Slider {
             "dragging": {},
             "currentValue": {},
             "tooltipVisible": {},
-            "tooltipValue": {}
+            "tooltipValue": {},
+            "activeHandle": {}
         };
     }
     static get events() {
@@ -430,5 +624,11 @@ export class Slider {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "modelValue",
+                "methodName": "handleModelChange"
+            }];
+    }
 }
 //# sourceMappingURL=Slider.js.map

package/dist/collection/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Element } from '@stencil/core';\n\n/**\n * Slider 滑块组件\n * 通过拖动滑块在一个固定区间内进行选择\n */\n@Component({\n  tag: 'hb-slider',\n  styleUrl: 'slider.css',\n  shadow: true,\n})\nexport class Slider {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: number | number[] = 0;\n\n  /**\n   * 最小值\n   * @default 0\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * 最大值\n   * @default 100\n   */\n  @Prop() max: number = 100;\n\n  /**\n   * 步长\n   * @default 1\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * 是否显示工具提示\n   * @default true\n   */\n  @Prop() showTooltip: boolean = true;\n\n  /**\n   * 格式化 tooltip message\n   */\n  @Prop() formatTooltip?: (value: number) => string;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否为范围选择\n   * @default false\n   */\n  @Prop() range: boolean = false;\n\n  /**\n   * 是否竖向模式\n   * @default false\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * 高度，竖向模式时必填\n   */\n  @Prop() height?: string;\n\n  @State() dragging: boolean = false;\n  @State() currentValue: number | number[] = 0;\n  @State() tooltipVisible: boolean = false;\n  @State() tooltipValue: number = 0;\n\n  private sliderRef?: HTMLDivElement;\n  private isDragging: boolean = false;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<number | number[]>;\n\n  /**\n   * 值改变事件（拖拽时实时触发）\n   */\n  @Event() hbInput: EventEmitter<number | number[]>;\n\n  componentDidLoad() {\n    this.currentValue = this.modelValue;\n    this.addEventListeners();\n  }\n\n  disconnectedCallback() {\n    this.removeEventListeners();\n  }\n\n  private addEventListeners() {\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n  }\n\n  private removeEventListeners() {\n    document.removeEventListener('mousemove', this.handleMouseMove);\n    document.removeEventListener('mouseup', this.handleMouseUp);\n  }\n\n  private getPercentage(value: number): number {\n    return ((value - this.min) / (this.max - this.min)) * 100;\n  }\n\n  private getValueFromPercentage(percentage: number): number {\n    const value = this.min + (percentage / 100) * (this.max - this.min);\n    return Math.round(value / this.step) * this.step;\n  }\n\n  private handleMouseDown = (e: MouseEvent) => {\n    if (this.disabled) return;\n    e.preventDefault();\n    this.isDragging = true;\n    this.dragging = true;\n    this.handleDrag(e);\n  };\n\n  private handleMouseMove = (e: MouseEvent) => {\n    if (!this.isDragging) return;\n    this.handleDrag(e);\n  };\n\n  private handleMouseUp = () => {\n    if (!this.isDragging) return;\n    this.isDragging = false;\n    this.dragging = false;\n    this.tooltipVisible = false;\n    this.hbChange.emit(this.currentValue);\n  };\n\n  private handleDrag(e: MouseEvent) {\n    if (!this.sliderRef) return;\n\n    const rect = this.sliderRef.getBoundingClientRect();\n    const percentage = this.vertical\n      ? 1 - (e.clientY - rect.top) / rect.height\n      : (e.clientX - rect.left) / rect.width;\n    \n    const clampedPercentage = Math.max(0, Math.min(100, percentage * 100));\n    const value = this.getValueFromPercentage(clampedPercentage);\n\n    if (this.range) {\n      const values = this.currentValue as number[];\n      // 简化处理：更新第一个值\n      this.currentValue = [value, values[1] || this.max];\n    } else {\n      this.currentValue = value;\n      this.tooltipValue = value;\n      this.tooltipVisible = true;\n    }\n\n    this.modelValue = this.currentValue;\n    this.hbInput.emit(this.currentValue);\n  }\n\n  private formatValue(value: number): string {\n    if (this.formatTooltip) {\n      return this.formatTooltip(value);\n    }\n    return String(value);\n  }\n\n  render() {\n    const percentage = this.range\n      ? this.getPercentage((this.currentValue as number[])[0])\n      : this.getPercentage(this.currentValue as number);\n\n    return (\n      <div\n        class={{\n          'hb-slider': true,\n          'hb-slider--vertical': this.vertical,\n          'hb-slider--disabled': this.disabled,\n        }}\n        style={this.vertical && this.height ? { height: this.height } : undefined}\n      >\n        <div\n          class=\"hb-slider__runway\"\n          ref={(el) => (this.sliderRef = el)}\n          onMouseDown={this.handleMouseDown}\n        >\n          <div\n            class=\"hb-slider__bar\"\n            style={{\n              [this.vertical ? 'height' : 'width']: `${percentage}%`,\n              [this.vertical ? 'bottom' : 'left']: '0',\n            }}\n          ></div>\n          <div\n            class={{\n              'hb-slider__button-wrapper': true,\n              'hb-slider__button-wrapper--hover': this.tooltipVisible,\n            }}\n            style={{\n              [this.vertical ? 'bottom' : 'left']: `${percentage}%`,\n            }}\n          >\n            {this.showTooltip && this.tooltipVisible && (\n              <div class=\"hb-slider__tooltip\">\n                {this.formatValue(this.tooltipValue)}\n              </div>\n            )}\n            <div class=\"hb-slider__button\"></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\n\n/** 刻度定义：值 →（可选）标签 */\nexport interface SliderMark {\n  value: number;\n  label?: string;\n}\n\n/**\n * Slider 滑块组件\n * 通过拖动滑块在一个固定区间内进行选择，支持单滑块/双滑块（range）/竖向/刻度。\n */\n@Component({\n  tag: 'hb-slider',\n  styleUrl: 'slider.css',\n  shadow: true,\n})\nexport class Slider {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: number | number[] = 0;\n\n  /**\n   * 最小值\n   * @default 0\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * 最大值\n   * @default 100\n   */\n  @Prop() max: number = 100;\n\n  /**\n   * 步长\n   * @default 1\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * 是否显示工具提示\n   * @default true\n   */\n  @Prop() showTooltip: boolean = true;\n\n  /**\n   * 格式化 tooltip message\n   */\n  @Prop() formatTooltip?: (value: number) => string;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否为范围选择\n   * @default false\n   */\n  @Prop() range: boolean = false;\n\n  /**\n   * 是否竖向模式\n   * @default false\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * 高度，竖向模式时必填\n   */\n  @Prop() height?: string;\n\n  /**\n   * 刻度标记（对齐 antd marks）\n   */\n  @Prop() marks?: SliderMark[] | Record<number, string>;\n\n  @State() dragging: boolean = false;\n  @State() currentValue: number | number[] = 0;\n  @State() tooltipVisible: boolean = false;\n  @State() tooltipValue: number = 0;\n  /** range 模式下当前拖动的是哪个手柄（0/1），用于 tooltip 定位与渲染 */\n  @State() activeHandle: 0 | 1 = 0;\n\n  private sliderRef?: HTMLDivElement;\n  private isDragging: boolean = false;\n  /** 拖动期间锁定的手柄索引（鼠标按下时确定） */\n  private dragHandle: 0 | 1 | null = null;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<number | number[]>;\n\n  /**\n   * 值改变事件（拖拽时实时触发）\n   */\n  @Event() hbInput: EventEmitter<number | number[]>;\n\n  componentDidLoad() {\n    this.currentValue = this.normalizeInitial(this.modelValue);\n    this.addEventListeners();\n  }\n\n  disconnectedCallback() {\n    this.removeEventListeners();\n  }\n\n  /** 外部更新 modelValue 时同步内部 currentValue（对齐 antd 受控语义） */\n  @Watch('modelValue')\n  handleModelChange() {\n    if (!this.isDragging) {\n      this.currentValue = this.normalizeInitial(this.modelValue);\n    }\n  }\n\n  /** range 模式下确保 currentValue 为 [min, max] 形状的有序数组 */\n  private normalizeInitial(v: number | number[]): number | number[] {\n    if (this.range) {\n      if (Array.isArray(v) && v.length === 2) {\n        return v[0] <= v[1] ? [v[0], v[1]] : [v[1], v[0]];\n      }\n      return [this.min, this.max];\n    }\n    return typeof v === 'number' ? v : (Array.isArray(v) ? v[0] ?? this.min : this.min);\n  }\n\n  private addEventListeners() {\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n  }\n\n  private removeEventListeners() {\n    document.removeEventListener('mousemove', this.handleMouseMove);\n    document.removeEventListener('mouseup', this.handleMouseUp);\n  }\n\n  private getPercentage(value: number): number {\n    if (this.max === this.min) return 0;\n    return ((value - this.min) / (this.max - this.min)) * 100;\n  }\n\n  private getValueFromPercentage(percentage: number): number {\n    const value = this.min + (percentage / 100) * (this.max - this.min);\n    const snapped = Math.round(value / this.step) * this.step;\n    return Math.max(this.min, Math.min(this.max, snapped));\n  }\n\n  /** 鼠标按下时根据落点决定拖哪个手柄（range：更近的那个） */\n  private resolveHandle(percentage: number): 0 | 1 {\n    if (!this.range) return 0;\n    const vals = this.currentValue as number[];\n    const leftPct = this.getPercentage(vals[0]);\n    const rightPct = this.getPercentage(vals[1]);\n    return Math.abs(percentage - leftPct) <= Math.abs(percentage - rightPct) ? 0 : 1;\n  }\n\n  private handleMouseDown = (e: MouseEvent, handle: 0 | 1 | null = null) => {\n    if (this.disabled) return;\n    e.preventDefault();\n    this.isDragging = true;\n    this.dragging = true;\n    this.dragHandle = handle;\n    this.handleDrag(e);\n  };\n\n  private handleMouseMove = (e: MouseEvent) => {\n    if (!this.isDragging) return;\n    this.handleDrag(e);\n  };\n\n  private handleMouseUp = () => {\n    if (!this.isDragging) return;\n    this.isDragging = false;\n    this.dragging = false;\n    this.tooltipVisible = false;\n    this.dragHandle = null;\n    this.hbChange.emit(this.currentValue);\n  };\n\n  private handleDrag(e: MouseEvent) {\n    if (!this.sliderRef) return;\n\n    const rect = this.sliderRef.getBoundingClientRect();\n    const percentage = this.vertical\n      ? 1 - (e.clientY - rect.top) / rect.height\n      : (e.clientX - rect.left) / rect.width;\n\n    const clampedPercentage = Math.max(0, Math.min(100, percentage * 100));\n    const value = this.getValueFromPercentage(clampedPercentage);\n\n    if (this.range) {\n      const vals = this.currentValue as number[];\n      // 优先用 mousedown 时锁定的手柄；未锁定（点击 runway）则按落点就近\n      const handle = this.dragHandle !== null ? this.dragHandle : this.resolveHandle(clampedPercentage);\n      this.activeHandle = handle;\n      let [lo, hi] = [vals[0], vals[1]];\n      if (handle === 0) {\n        lo = Math.min(value, hi);\n      } else {\n        hi = Math.max(value, lo);\n      }\n      this.currentValue = [lo, hi];\n      this.tooltipValue = handle === 0 ? lo : hi;\n      this.tooltipVisible = true;\n    } else {\n      this.activeHandle = 0;\n      this.currentValue = value;\n      this.tooltipValue = value;\n      this.tooltipVisible = true;\n    }\n\n    this.modelValue = this.currentValue;\n    this.hbInput.emit(this.currentValue);\n  }\n\n  /** 键盘可访问：方向键调整当前手柄，对齐 WAI-ARIA slider pattern */\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n    const { key } = e;\n    const isDecrease = key === 'ArrowLeft' || key === 'ArrowDown';\n    const isIncrease = key === 'ArrowRight' || key === 'ArrowUp';\n    const isBigDecrease = key === 'PageDown' || key === 'Home';\n    const isBigIncrease = key === 'PageUp' || key === 'End';\n    if (!isDecrease && !isIncrease && !isBigDecrease && !isBigIncrease) return;\n\n    e.preventDefault();\n    const delta =\n      isBigDecrease ? -this.max :\n      isBigIncrease ? this.max :\n      (isDecrease ? -1 : 1) * this.step;\n\n    if (this.range) {\n      const vals = this.currentValue as number[];\n      let [lo, hi] = [vals[0], vals[1]];\n      if (this.activeHandle === 0) {\n        lo = Math.max(this.min, Math.min(lo + delta, hi));\n      } else {\n        hi = Math.min(this.max, Math.max(hi + delta, lo));\n      }\n      this.currentValue = [lo, hi];\n      this.tooltipValue = this.activeHandle === 0 ? lo : hi;\n      this.tooltipVisible = true;\n    } else {\n      const next = Math.max(this.min, Math.min((this.currentValue as number) + delta, this.max));\n      this.currentValue = next;\n      this.tooltipValue = next;\n      this.tooltipVisible = true;\n    }\n    this.modelValue = this.currentValue;\n    this.hbChange.emit(this.currentValue);\n    this.hbInput.emit(this.currentValue);\n  };\n\n  private formatValue(value: number): string {\n    if (this.formatTooltip) {\n      return this.formatTooltip(value);\n    }\n    return String(value);\n  }\n\n  /** 规范化 marks 为 [{value,label}] 数组 */\n  private get markList(): { value: number; label?: string }[] {\n    if (!this.marks) return [];\n    if (Array.isArray(this.marks)) return this.marks;\n    return Object.entries(this.marks).map(([k, v]) => ({ value: Number(k), label: v as string }));\n  }\n\n  render() {\n    const range = this.range;\n    const singlePct = this.getPercentage(this.currentValue as number);\n    const rangeVals = range ? (this.currentValue as number[]) : [0, 0];\n    const leftPct = range ? this.getPercentage(rangeVals[0]) : 0;\n    const rightPct = range ? this.getPercentage(rangeVals[1]) : singlePct;\n    // bar：单滑块从 min 到 value；range 从 lo 到 hi\n    const barStart = range ? leftPct : 0;\n    const barSize = range ? rightPct - leftPct : singlePct;\n    const posProp = this.vertical ? 'bottom' : 'left';\n    const sizeProp = this.vertical ? 'height' : 'width';\n\n    const renderHandle = (handle: 0 | 1, pct: number) => {\n      const tooltipVal = range ? rangeVals[handle] : (this.currentValue as number);\n      const isActive = this.tooltipVisible && (range ? this.activeHandle === handle : true);\n      return (\n        <div\n          class={{\n            'hb-slider__button-wrapper': true,\n            'hb-slider__button-wrapper--hover': isActive,\n          }}\n          style={{ [posProp]: `${pct}%` }}\n          onMouseDown={(e: MouseEvent) => this.handleMouseDown(e, handle)}\n          onTouchStart={(e: TouchEvent) => this.handleTouchStart(e, handle)}\n          role=\"slider\"\n          tabindex={this.disabled ? -1 : 0}\n          aria-valuemin={this.min}\n          aria-valuemax={this.max}\n          aria-valuenow={tooltipVal}\n          aria-valuetext={this.formatValue(tooltipVal)}\n          aria-orientation={this.vertical ? 'vertical' : 'horizontal'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          onKeyDown={this.handleKeyDown}\n        >\n          {this.showTooltip && isActive && (\n            <div class=\"hb-slider__tooltip\">{this.formatValue(this.tooltipValue)}</div>\n          )}\n          <div class=\"hb-slider__button\"></div>\n        </div>\n      );\n    };\n\n    return (\n      <div\n        class={{\n          'hb-slider': true,\n          'hb-slider--vertical': this.vertical,\n          'hb-slider--disabled': this.disabled,\n          'hb-slider--with-marks': this.markList.length > 0,\n        }}\n        style={this.vertical && this.height ? { height: this.height } : undefined}\n      >\n        <div\n          class=\"hb-slider__runway\"\n          ref={(el) => (this.sliderRef = el as HTMLDivElement)}\n          onMouseDown={(e: MouseEvent) => this.handleMouseDown(e, null)}\n          onTouchStart={(e: TouchEvent) => this.handleTouchStart(e, null)}\n        >\n          <div\n            class=\"hb-slider__bar\"\n            style={{\n              [sizeProp]: `${Math.max(0, barSize)}%`,\n              [posProp]: `${barStart}%`,\n            }}\n          ></div>\n          {this.markList.map(m => {\n            const pct = this.getPercentage(m.value);\n            return (\n              <div\n                class=\"hb-slider__mark\"\n                style={{ [posProp]: `${pct}%` }}\n                aria-hidden=\"true\"\n              >\n                {m.label && <span class=\"hb-slider__mark-label\">{m.label}</span>}\n              </div>\n            );\n          })}\n          {range ? renderHandle(0, leftPct) : null}\n          {renderHandle(range ? 1 : 0, range ? rightPct : singlePct)}\n        </div>\n      </div>\n    );\n  }\n\n  /** 触屏支持：把 touch 事件映射到 mouse 同等逻辑（移动端可用） */\n  private handleTouchStart = (e: TouchEvent, handle: 0 | 1 | null) => {\n    if (this.disabled) return;\n    e.preventDefault();\n    const touch = e.touches[0];\n    this.isDragging = true;\n    this.dragging = true;\n    this.dragHandle = handle;\n    this.dragFromTouch(touch.clientX, touch.clientY);\n    const move = (ev: TouchEvent) => {\n      const t = ev.touches[0];\n      this.dragFromTouch(t.clientX, t.clientY);\n    };\n    const end = () => {\n      this.isDragging = false;\n      this.dragging = false;\n      this.tooltipVisible = false;\n      this.dragHandle = null;\n      this.hbChange.emit(this.currentValue);\n      document.removeEventListener('touchmove', move);\n      document.removeEventListener('touchend', end);\n    };\n    document.addEventListener('touchmove', move, { passive: false });\n    document.addEventListener('touchend', end);\n  };\n\n  private dragFromTouch(clientX: number, clientY: number) {\n    if (!this.sliderRef) return;\n    const rect = this.sliderRef.getBoundingClientRect();\n    const percentage = this.vertical\n      ? 1 - (clientY - rect.top) / rect.height\n      : (clientX - rect.left) / rect.width;\n    const clamped = Math.max(0, Math.min(100, percentage * 100));\n    const value = this.getValueFromPercentage(clamped);\n    if (this.range) {\n      const vals = this.currentValue as number[];\n      const handle = this.dragHandle !== null ? this.dragHandle : this.resolveHandle(clamped);\n      this.activeHandle = handle;\n      let [lo, hi] = [vals[0], vals[1]];\n      if (handle === 0) lo = Math.min(value, hi);\n      else hi = Math.max(value, lo);\n      this.currentValue = [lo, hi];\n      this.tooltipValue = handle === 0 ? lo : hi;\n      this.tooltipVisible = true;\n    } else {\n      this.currentValue = value;\n      this.tooltipValue = value;\n      this.tooltipVisible = true;\n    }\n    this.modelValue = this.currentValue;\n    this.hbInput.emit(this.currentValue);\n  }\n}\n\n"]}

package/dist/collection/components/Slider/slider.css

@@ -44,7 +44,6 @@
   border-bottom-left-radius: 3px;
   position: absolute;
   top: 0;
-  left: 0;
 }
 
 .hb-slider--vertical .hb-slider__bar {
@@ -61,21 +60,21 @@
   position: absolute;
   z-index: 1001;
   top: 50%;
-  transform: translateY(-50%);
+  transform: translate(-50%, -50%);
   background-color: transparent;
   text-align: center;
   user-select: none;
   outline: none;
-  margin-left: calc(var(--hb-slider-button-size) / -2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 }
 
 .hb-slider--vertical .hb-slider__button-wrapper {
   left: 50%;
   top: auto;
-  bottom: 0;
-  transform: translateX(-50%);
-  margin-left: 0;
-  margin-bottom: calc(var(--hb-slider-button-size) / -2);
+  transform: translate(-50%, 50%);
 }
 
 .hb-slider__button {
@@ -139,3 +138,55 @@
   cursor: not-allowed;
 }
 
+/* ---- 刻度标记（marks）---- */
+.hb-slider__mark {
+  position: absolute;
+  top: 0;
+  width: 2px;
+  height: 6px;
+  transform: translateX(-50%);
+  background-color: var(--hb-color-border, #dcdfe6);
+  pointer-events: none;
+}
+
+.hb-slider__mark-label {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: var(--hb-spacing-xs, 4px);
+  font-size: var(--hb-font-size-xs, 12px);
+  color: var(--hb-color-text-secondary, #606266);
+  white-space: nowrap;
+}
+
+/* 有刻度时给底部留出标签空间 */
+.hb-slider--with-marks {
+  padding-bottom: var(--hb-spacing-lg, 16px);
+}
+
+.hb-slider--vertical .hb-slider__mark {
+  top: auto;
+  left: 50%;
+  width: 6px;
+  height: 2px;
+  transform: translate(-50%, -50%);
+}
+
+.hb-slider--vertical .hb-slider__mark-label {
+  top: 50%;
+  left: 100%;
+  transform: translateY(-50%);
+  margin-top: 0;
+  margin-left: var(--hb-spacing-xs, 4px);
+}
+
+/* 聚焦态：对齐 antd 的蓝色外圈 */
+.hb-slider__button-wrapper:focus {
+  outline: none;
+}
+
+.hb-slider__button-wrapper:focus-visible .hb-slider__button {
+  box-shadow: 0 0 0 4px var(--hb-color-primary-bg, rgba(22, 119, 255, 0.12));
+}
+

package/dist/collection/components/Space/Space.js

@@ -46,7 +46,7 @@ export class Space {
     }
     render() {
         const sizeValue = this.getSizeValue();
-        return (h("div", { key: 'c6a3c89f29c25988b47aa100c8d3ac45c44f550e', class: {
+        return (h("div", { key: '23205a0d926148969e1dc0c98dee9b81f52e921e', class: {
                 'hb-space': true,
                 [`hb-space--${this.direction}`]: true,
                 'hb-space--wrap': this.wrap && this.direction === 'horizontal',
@@ -55,7 +55,7 @@ export class Space {
                 '--hb-space-size': sizeValue,
                 '--hb-space-alignment': this.alignment,
                 '--hb-space-fill-ratio': `${this.fillRatio}%`,
-            } }, h("slot", { key: '638d65e135eb572d71d3220183031cb0b18b1078' })));
+            } }, h("slot", { key: 'b313162f92bf63bc8926b15af1a7f0bbe3d0295d' })));
     }
     static get is() { return "hb-space"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/Statistic/Statistic.js

@@ -49,7 +49,7 @@ export class Statistic {
         return decPart !== undefined ? `${grouped}.${decPart}` : grouped;
     }
     render() {
-        return (h("div", { key: 'e38db3c8ae83480a933a7a9fd03d4ecb8e3cb07d', class: "hb-statistic" }, this.title && h("div", { key: '2d4af905f79558e98b6db498db1d251d10b64151', class: "hb-statistic__title" }, this.title), h("div", { key: 'f60f0263f6f22ca95d863c1fcd7f94556b351cea', class: "hb-statistic__content", style: this.valueStyle ? { cssText: this.valueStyle } : undefined }, this.valuePrefix && h("span", { key: '4dd5f92066507ad0abf5c5bbeca64001d425b83a', class: "hb-statistic__prefix" }, this.valuePrefix), h("span", { key: '746806287e5f0752263ce913a4b81fa221b0fb3b', class: "hb-statistic__value" }, this.getFormattedValue()), this.suffix !== undefined && h("span", { key: 'a93c66aeb111922903214884e664b425279cc5ac', class: "hb-statistic__suffix" }, this.suffix))));
+        return (h("div", { key: 'e695e8811255eace58725623ad9ac4fc32fe9815', class: "hb-statistic" }, this.title && h("div", { key: '0ca9e8bae28815d841fd04f0ec0aeb6d3147cfb7', class: "hb-statistic__title" }, this.title), h("div", { key: 'f4b4dce8ceded1700b7bd2f50b97d886452571d9', class: "hb-statistic__content", style: this.valueStyle ? { cssText: this.valueStyle } : undefined }, this.valuePrefix && h("span", { key: '7b6f19358ee7ab45b18fab4230cc0cae56161398', class: "hb-statistic__prefix" }, this.valuePrefix), h("span", { key: 'ba7c49912cd4d0d4a81349d8584801291075966f', class: "hb-statistic__value" }, this.getFormattedValue()), this.suffix !== undefined && h("span", { key: '87619124453f9e49eba5e22ccc6c6123b059c61b', class: "hb-statistic__suffix" }, this.suffix))));
     }
     static get is() { return "hb-statistic"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/Steps/Step.js

@@ -5,7 +5,7 @@ export class Step {
     icon;
     status = 'wait';
     render() {
-        return h("div", { key: '8a42e9bcdb6ab736095af526989a331edc76f0bb', class: "hb-step" }, h("slot", { key: 'cff737be2d6690f6edee1b0996c2d49e9621ffaa' }));
+        return h("div", { key: '63f299b0fda78da0625d0d33af185af098512986', class: "hb-step" }, h("slot", { key: '7d8193df46de7452dee4df28246552fd9bae9cee' }));
     }
     static get is() { return "hb-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/Steps/Steps.js

@@ -8,19 +8,37 @@ export class Steps {
     steps = [];
     componentDidLoad() {
         const items = this.el.querySelectorAll('hb-step');
-        this.steps = Array.from(items).map((item) => ({
-            title: item.getAttribute('title') || '',
-            description: item.getAttribute('description') || undefined,
-        }));
+        this.steps = Array.from(items).map((item) => {
+            const node = item;
+            // 仅用 getAttribute：hb-step 的 @Prop() status 默认值为 'wait'，
+            // 若读 (node as any).status 会拿到默认值，从而错误地覆盖 active 推导。
+            // 用户显式在 HTML 上写 status="xxx" 时 getAttribute 才有值。
+            return {
+                title: node.getAttribute('title') || '',
+                description: node.getAttribute('description') || undefined,
+                icon: node.getAttribute('icon') || undefined,
+                status: (node.getAttribute('status') || undefined),
+            };
+        });
     }
     getStatus(index) {
+        const meta = this.steps[index];
+        // 子项显式 status 优先（仅当用户在 HTML 上写了 status 属性）
+        if (meta && meta.status)
+            return meta.status;
         if (index < this.active)
             return 'finish';
         if (index === this.active)
             return this.processStatus;
         return 'wait';
     }
-    getIcon(index) {
+    /** 渲染图标：子项自定义 icon 优先；否则按状态（finish=✓、error=✕、其余=序号） */
+    renderIcon(index) {
+        const meta = this.steps[index];
+        if (meta && meta.icon) {
+            // 自定义图标名：若与 hb-icon 内置图标同名则渲染 hb-icon，否则按文本渲染
+            return h("hb-icon", { name: meta.icon, size: 16, "aria-hidden": "true" });
+        }
         const status = this.getStatus(index);
         if (status === 'finish')
             return '✓';
@@ -29,7 +47,10 @@ export class Steps {
         return String(index + 1);
     }
     render() {
-        return (h("div", { key: '3bb957ec22b3943e8dccdd609838adcac9aa0766', class: { 'hb-steps': true, [`hb-steps--${this.direction}`]: true, 'hb-steps--align-center': this.alignCenter } }, this.steps.map((step, i) => (h("div", { class: { 'hb-steps__item': true, [`hb-steps__item--${this.getStatus(i)}`]: true } }, h("div", { class: "hb-steps__head" }, h("span", { class: "hb-steps__icon" }, this.getIcon(i)), i < this.steps.length - 1 && h("div", { class: "hb-steps__line" })), h("div", { class: "hb-steps__main" }, h("div", { class: "hb-steps__title" }, step.title), step.description && h("div", { class: "hb-steps__description" }, step.description)))))));
+        return (h("ol", { key: 'f69b42d787de6ee114ed9ebef2e8d1a8fae60363', class: { 'hb-steps': true, [`hb-steps--${this.direction}`]: true, 'hb-steps--align-center': this.alignCenter }, role: "list" }, this.steps.map((step, i) => {
+            const status = this.getStatus(i);
+            return (h("li", { class: { 'hb-steps__item': true, [`hb-steps__item--${status}`]: true }, role: "listitem", "aria-current": status === 'process' ? 'step' : undefined, "aria-disabled": step.status === 'wait' && i > this.active ? 'true' : undefined }, h("div", { class: "hb-steps__head" }, h("span", { class: "hb-steps__icon", "aria-hidden": "true" }, this.renderIcon(i)), i < this.steps.length - 1 && h("div", { class: "hb-steps__line" })), h("div", { class: "hb-steps__main" }, h("div", { class: "hb-steps__title" }, step.title), step.description && h("div", { class: "hb-steps__description" }, step.description))));
+        })));
     }
     static get is() { return "hb-steps"; }
     static get encapsulation() { return "shadow"; }
@@ -69,9 +90,15 @@ export class Steps {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'wait' | 'process' | 'finish' | 'error'",
+                    "original": "StepStatus",
                     "resolved": "\"error\" | \"finish\" | \"process\" | \"wait\"",
-                    "references": {}
+                    "references": {
+                        "StepStatus": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Steps/Steps.tsx",
+                            "id": "src/components/Steps/Steps.tsx::StepStatus"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,