huibo-ui 0.3.0

package/dist/collection/components/Timeline/Timeline.js

@@ -0,0 +1,79 @@
+import { h } from "@stencil/core";
+/**
+ * Timeline 时间线组件
+ * 按竖线渲染每个 item 的圆点 + 内容 + 时间，支持左/右/交替三种模式
+ */
+export class Timeline {
+    /** 时间线模式 */
+    mode = 'left';
+    /** 时间线节点数组 */
+    items = [];
+    render() {
+        return (h("div", { key: 'ea2098bc94d05340618eb088badcaa2c18136cf1', class: { 'hb-timeline': true, [`hb-timeline--${this.mode}`]: true } }, this.items.map((item, i) => (h("div", { class: {
+                'hb-timeline__item': true,
+                'hb-timeline__item--right': this.mode === 'alternate' && i % 2 === 1,
+                'hb-timeline__item--left': this.mode === 'alternate' && i % 2 === 0,
+            } }, h("div", { class: "hb-timeline__content" }, h("div", { class: "hb-timeline__content-text" }, item.content), item.time && h("div", { class: "hb-timeline__time" }, item.time)), h("div", { class: { 'hb-timeline__dot': true, [`hb-timeline__dot--${item.color || 'blue'}`]: true } }))))));
+    }
+    static get is() { return "hb-timeline"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["timeline.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["timeline.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'alternate' | 'right'",
+                    "resolved": "\"alternate\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u65F6\u95F4\u7EBF\u6A21\u5F0F"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mode",
+                "reflect": false,
+                "defaultValue": "'left'"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimelineItem[]",
+                    "resolved": "TimelineItem[]",
+                    "references": {
+                        "TimelineItem": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Timeline/Timeline.tsx",
+                            "id": "src/components/Timeline/Timeline.tsx::TimelineItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u65F6\u95F4\u7EBF\u8282\u70B9\u6570\u7EC4"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+}
+//# sourceMappingURL=Timeline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAEH,MAAM,OAAO,QAAQ;IACnB,YAAY;IACJ,IAAI,GAAmC,MAAM,CAAC;IAEtD,cAAc;IACN,KAAK,GAAmB,EAAE,CAAC;IAEnC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,IACrE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3B,WACE,KAAK,EAAE;gBACL,mBAAmB,EAAE,IAAI;gBACzB,0BAA0B,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;gBACpE,yBAAyB,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;aACpE;YAED,WAAK,KAAK,EAAC,sBAAsB;gBAC/B,WAAK,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,OAAO,CAAO;gBAC1D,IAAI,CAAC,IAAI,IAAI,WAAK,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,IAAI,CAAO,CAC1D;YACN,WAAK,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC,qBAAqB,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,GAAQ,CACjG,CACP,CAAC,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Timeline 时间线组件\n * 按竖线渲染每个 item 的圆点 + 内容 + 时间，支持左/右/交替三种模式\n */\n@Component({ tag: 'hb-timeline', styleUrl: 'timeline.css', shadow: true })\nexport class Timeline {\n  /** 时间线模式 */\n  @Prop() mode: 'left' | 'alternate' | 'right' = 'left';\n\n  /** 时间线节点数组 */\n  @Prop() items: TimelineItem[] = [];\n\n  render() {\n    return (\n      <div class={{ 'hb-timeline': true, [`hb-timeline--${this.mode}`]: true }}>\n        {this.items.map((item, i) => (\n          <div\n            class={{\n              'hb-timeline__item': true,\n              'hb-timeline__item--right': this.mode === 'alternate' && i % 2 === 1,\n              'hb-timeline__item--left': this.mode === 'alternate' && i % 2 === 0,\n            }}\n          >\n            <div class=\"hb-timeline__content\">\n              <div class=\"hb-timeline__content-text\">{item.content}</div>\n              {item.time && <div class=\"hb-timeline__time\">{item.time}</div>}\n            </div>\n            <div class={{ 'hb-timeline__dot': true, [`hb-timeline__dot--${item.color || 'blue'}`]: true }}></div>\n          </div>\n        ))}\n      </div>\n    );\n  }\n}\n\nexport interface TimelineItem {\n  content: string;\n  time?: string;\n  color?: 'blue' | 'green' | 'red' | 'gray';\n}\n"]}

package/dist/collection/components/Timeline/timeline.css

@@ -0,0 +1,71 @@
+:host { display: block; }
+.hb-timeline { position: relative; padding: var(--hb-spacing-sm) 0; }
+
+/* 左右两侧共享的竖线（left/right 模式） */
+.hb-timeline--left { padding-left: 20px; }
+.hb-timeline--right { padding-right: 20px; }
+.hb-timeline--left::before,
+.hb-timeline--right::before {
+  content: '';
+  position: absolute;
+  top: var(--hb-spacing-sm);
+  bottom: var(--hb-spacing-sm);
+  width: 2px;
+  background: var(--hb-color-border-secondary);
+}
+.hb-timeline--left::before { left: 5px; }
+.hb-timeline--right::before { right: 5px; }
+
+/* 交替模式：竖线居中 */
+.hb-timeline--alternate::before {
+  content: '';
+  position: absolute;
+  top: var(--hb-spacing-sm);
+  bottom: var(--hb-spacing-sm);
+  left: 50%;
+  transform: translateX(-50%);
+  width: 2px;
+  background: var(--hb-color-border-secondary);
+}
+
+.hb-timeline__item {
+  position: relative;
+  padding-bottom: var(--hb-spacing-md);
+  display: flex;
+  align-items: flex-start;
+}
+/* left 模式：内容在右 */
+.hb-timeline--left .hb-timeline__item { padding-left: 18px; }
+.hb-timeline--left .hb-timeline__dot { position: absolute; left: -18px; top: 4px; }
+
+/* right 模式：内容在左 */
+.hb-timeline--right .hb-timeline__item { justify-content: flex-end; padding-right: 18px; }
+.hb-timeline--right .hb-timeline__dot { position: absolute; right: -18px; top: 4px; }
+
+/* alternate 模式：左右交替 */
+.hb-timeline--alternate .hb-timeline__item { width: 50%; }
+.hb-timeline--alternate .hb-timeline__item--left { left: 0; padding-right: 24px; text-align: right; }
+.hb-timeline--alternate .hb-timeline__item--right { margin-left: 50%; padding-left: 24px; }
+.hb-timeline--alternate .hb-timeline__dot {
+  position: absolute;
+  top: 4px;
+}
+.hb-timeline--alternate .hb-timeline__item--left .hb-timeline__dot { right: -7px; }
+.hb-timeline--alternate .hb-timeline__item--right .hb-timeline__dot { left: -7px; }
+
+.hb-timeline__content { min-width: 0; }
+.hb-timeline__content-text { font-size: var(--hb-font-size-sm); color: var(--hb-color-text); }
+.hb-timeline__time { font-size: var(--hb-font-size-xs); color: var(--hb-color-text-secondary); margin-top: 2px; }
+
+.hb-timeline__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  border: 2px solid var(--hb-color-bg-container);
+  z-index: 1;
+}
+.hb-timeline__dot--blue { background: var(--hb-color-primary); }
+.hb-timeline__dot--green { background: var(--hb-color-success); }
+.hb-timeline__dot--red { background: var(--hb-color-danger); }
+.hb-timeline__dot--gray { background: var(--hb-color-text-quaternary); }

package/dist/collection/components/Tooltip/Tooltip.js

@@ -0,0 +1,192 @@
+import { h } from "@stencil/core";
+import { computePosition, getNextZIndex } from "../../utils/popup-manager";
+/**
+ * Tooltip 文字提示组件
+ * 鼠标悬停或点击时显示提示文字
+ */
+export class Tooltip {
+    el;
+    /** 提示文字 */
+    content = '';
+    /** 弹出位置 */
+    placement = 'top';
+    /** 触发方式 */
+    trigger = 'hover';
+    /** 是否禁用 */
+    disabled = false;
+    /** 是否显示箭头 */
+    showArrow = true;
+    visible = false;
+    popupStyle = {};
+    triggerRef;
+    popupRef;
+    hideTimer;
+    show = () => {
+        if (this.disabled)
+            return;
+        clearTimeout(this.hideTimer);
+        this.visible = true;
+        requestAnimationFrame(() => this.updatePosition());
+    };
+    hide = () => {
+        this.hideTimer = setTimeout(() => { this.visible = false; }, 100);
+    };
+    toggle = () => {
+        if (this.disabled)
+            return;
+        if (this.visible) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    };
+    updatePosition() {
+        if (!this.triggerRef || !this.popupRef)
+            return;
+        const triggerRect = this.triggerRef.getBoundingClientRect();
+        const { width, height } = this.popupRef.getBoundingClientRect();
+        const pos = computePosition(triggerRect, width, height, this.placement, 8);
+        this.popupStyle = {
+            top: `${pos.top}px`,
+            left: `${pos.left}px`,
+            zIndex: String(getNextZIndex()),
+        };
+    }
+    render() {
+        const triggerEvents = this.trigger === 'hover'
+            ? { onMouseEnter: this.show, onMouseLeave: this.hide }
+            : { onClick: this.toggle };
+        return (h("div", { key: 'e98d79b104fc92f63d77cbd87c490d84e0646c64', class: "hb-tooltip", ...triggerEvents }, h("div", { key: '74088a95833070259d447d57e03a894f20d0e044', ref: (el) => { this.triggerRef = el; }, class: "hb-tooltip__trigger" }, h("slot", { key: 'ce84437a1fedd763630764a5627763a4601d195e' })), this.visible && (h("div", { key: '1b5b74c439a5925c3cf10fc552369bd83354fcf4', ref: (el) => { this.popupRef = el; }, class: "hb-tooltip__popup", style: this.popupStyle, onMouseEnter: () => this.trigger === 'hover' && this.show(), onMouseLeave: () => this.trigger === 'hover' && this.hide() }, this.showArrow && h("div", { key: '73b08948dcc030a487a0d0f11afbb2fb4bcbdc51', class: "hb-tooltip__arrow" }), h("div", { key: '564f396c5eb5e3cb5bffe7dc8ec956c54bfc484d', class: "hb-tooltip__content" }, this.content)))));
+    }
+    static get is() { return "hb-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "content": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u63D0\u793A\u6587\u5B57"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "content",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "../../utils/popup-manager",
+                            "id": "src/utils/popup-manager.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5F39\u51FA\u4F4D\u7F6E"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'top'"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'hover' | 'click'",
+                    "resolved": "\"click\" | \"hover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u89E6\u53D1\u65B9\u5F0F"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "trigger",
+                "reflect": false,
+                "defaultValue": "'hover'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u7981\u7528"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showArrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u663E\u793A\u7BAD\u5934"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-arrow",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {},
+            "popupStyle": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=Tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\nimport { computePosition, getNextZIndex, Placement } from '../../utils/popup-manager';\n\n/**\n * Tooltip 文字提示组件\n * 鼠标悬停或点击时显示提示文字\n */\n@Component({\n  tag: 'hb-tooltip',\n  styleUrl: 'tooltip.css',\n  shadow: true,\n})\nexport class Tooltip {\n  @Element() el: HTMLElement;\n\n  /** 提示文字 */\n  @Prop() content: string = '';\n\n  /** 弹出位置 */\n  @Prop() placement: Placement = 'top';\n\n  /** 触发方式 */\n  @Prop() trigger: 'hover' | 'click' = 'hover';\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  /** 是否显示箭头 */\n  @Prop() showArrow: boolean = true;\n\n  @State() visible: boolean = false;\n  @State() popupStyle: Record<string, string> = {};\n\n  private triggerRef?: HTMLElement;\n  private popupRef?: HTMLDivElement;\n  private hideTimer?: ReturnType<typeof setTimeout>;\n\n  private show = () => {\n    if (this.disabled) return;\n    clearTimeout(this.hideTimer);\n    this.visible = true;\n    requestAnimationFrame(() => this.updatePosition());\n  };\n\n  private hide = () => {\n    this.hideTimer = setTimeout(() => { this.visible = false; }, 100);\n  };\n\n  private toggle = () => {\n    if (this.disabled) return;\n    if (this.visible) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  };\n\n  private updatePosition() {\n    if (!this.triggerRef || !this.popupRef) return;\n    const triggerRect = this.triggerRef.getBoundingClientRect();\n    const { width, height } = this.popupRef.getBoundingClientRect();\n    const pos = computePosition(triggerRect, width, height, this.placement, 8);\n    this.popupStyle = {\n      top: `${pos.top}px`,\n      left: `${pos.left}px`,\n      zIndex: String(getNextZIndex()),\n    };\n  }\n\n  render() {\n    const triggerEvents = this.trigger === 'hover'\n      ? { onMouseEnter: this.show, onMouseLeave: this.hide }\n      : { onClick: this.toggle };\n\n    return (\n      <div class=\"hb-tooltip\" {...triggerEvents}>\n        <div\n          ref={(el: any) => { this.triggerRef = el; }}\n          class=\"hb-tooltip__trigger\"\n        >\n          <slot />\n        </div>\n        {this.visible && (\n          <div\n            ref={(el: any) => { this.popupRef = el; }}\n            class=\"hb-tooltip__popup\"\n            style={this.popupStyle}\n            onMouseEnter={() => this.trigger === 'hover' && this.show()}\n            onMouseLeave={() => this.trigger === 'hover' && this.hide()}\n          >\n            {this.showArrow && <div class=\"hb-tooltip__arrow\" />}\n            <div class=\"hb-tooltip__content\">{this.content}</div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Tooltip/tooltip.css

@@ -0,0 +1,40 @@
+:host {
+  display: inline-block;
+}
+
+.hb-tooltip__trigger {
+  display: inline-block;
+}
+
+.hb-tooltip__popup {
+  position: fixed;
+  padding: 6px 12px;
+  border-radius: var(--hb-border-radius-sm);
+  background-color: var(--hb-p-gray-800);
+  color: #fff;
+  font-size: var(--hb-font-size-sm);
+  line-height: 1.4;
+  pointer-events: auto;
+  box-shadow: var(--hb-box-shadow);
+  animation: hb-tooltip-fade-in 0.15s ease-out;
+  max-width: 300px;
+  word-wrap: break-word;
+}
+
+.hb-tooltip__arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: var(--hb-p-gray-800);
+  transform: rotate(45deg);
+}
+
+.hb-tooltip__content {
+  position: relative;
+  z-index: 1;
+}
+
+@keyframes hb-tooltip-fade-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}

package/dist/collection/components/Tour/Tour.js

@@ -0,0 +1,225 @@
+import { h } from "@stencil/core";
+/**
+ * Tour 引导组件
+ * 通过遮罩 + 高亮卡片引导用户关注页面元素。
+ */
+export class Tour {
+    el;
+    /** 是否显示（受控） */
+    visible = false;
+    /** 步骤列表 */
+    steps = [];
+    /** 当前步骤索引 */
+    current = 0;
+    /** 步骤变化事件，detail 为新 current */
+    hbChange;
+    /** 关闭事件 */
+    hbClose;
+    targetRect = null;
+    get currentStep() {
+        return this.steps[this.current];
+    }
+    get isLast() {
+        return this.current >= this.steps.length - 1;
+    }
+    get isFirst() {
+        return this.current <= 0;
+    }
+    componentDidRender() {
+        this.updateTargetRect();
+    }
+    componentDidUpdate() {
+        this.updateTargetRect();
+    }
+    updateTargetRect() {
+        const step = this.currentStep;
+        if (!step || !this.visible) {
+            this.targetRect = null;
+            return;
+        }
+        const targetEl = document.querySelector(step.target);
+        if (targetEl) {
+            this.targetRect = targetEl.getBoundingClientRect();
+        }
+        else {
+            this.targetRect = null;
+        }
+    }
+    goNext = () => {
+        if (this.isLast) {
+            this.finish();
+            return;
+        }
+        this.current = this.current + 1;
+        this.hbChange.emit(this.current);
+    };
+    goPrev = () => {
+        if (this.isFirst)
+            return;
+        this.current = this.current - 1;
+        this.hbChange.emit(this.current);
+    };
+    finish = () => {
+        this.visible = false;
+        this.hbClose.emit();
+    };
+    cardStyle() {
+        const rect = this.targetRect;
+        // jsdom 下 getBoundingClientRect 返回 0 尺寸，提供兜底位置
+        if (rect && (rect.width > 0 || rect.height > 0)) {
+            return {
+                left: `${rect.right + 12}px`,
+                top: `${rect.top}px`,
+            };
+        }
+        return { left: '50%', top: '50%', transform: 'translate(-50%, -50%)' };
+    }
+    maskStyle() {
+        const rect = this.targetRect;
+        if (rect && (rect.width > 0 || rect.height > 0)) {
+            // 4 段 box-shadow 实现镂空遮罩
+            const top = rect.top;
+            const right = window.innerWidth - rect.right;
+            const bottom = window.innerHeight - rect.bottom;
+            const left = rect.left;
+            return {
+                boxShadow: [
+                    `0 0 0 9999px var(--hb-color-bg-mask)`,
+                    `${left}px ${bottom}px 0 ${right}px transparent`,
+                    `${left}px ${top}px 0 ${right}px transparent`,
+                    `0 ${bottom}px 0 ${right}px transparent`,
+                    `0 ${top}px 0 ${left}px transparent`,
+                ].join(', '),
+            };
+        }
+        return { background: 'var(--hb-color-bg-mask)' };
+    }
+    render() {
+        if (!this.visible || this.steps.length === 0)
+            return null;
+        const step = this.currentStep;
+        if (!step)
+            return null;
+        return (h("div", { class: "hb-tour" }, h("div", { class: "hb-tour__mask", style: this.maskStyle(), onClick: this.finish }), h("div", { class: "hb-tour__card", style: this.cardStyle(), role: "dialog", "aria-modal": "true" }, h("div", { class: "hb-tour__header" }, h("span", { class: "hb-tour__title" }, step.title), h("button", { type: "button", class: "hb-tour__close", onClick: this.finish, "aria-label": "\u5173\u95ED" }, "\u00D7")), h("div", { class: "hb-tour__body" }, step.description), h("div", { class: "hb-tour__footer" }, h("span", { class: "hb-tour__indicator" }, this.current + 1, " / ", this.steps.length), h("div", { class: "hb-tour__actions" }, !this.isFirst && (h("button", { type: "button", class: "hb-tour__btn hb-tour__btn--prev", onClick: this.goPrev }, "\u4E0A\u4E00\u6B65")), h("button", { type: "button", class: "hb-tour__btn hb-tour__btn--next", onClick: this.goNext }, this.isLast ? '完成' : '下一步'))))));
+    }
+    static get is() { return "hb-tour"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tour.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tour.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u663E\u793A\uFF08\u53D7\u63A7\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "visible",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "steps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TourStep[]",
+                    "resolved": "TourStep[]",
+                    "references": {
+                        "TourStep": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Tour/Tour.tsx",
+                            "id": "src/components/Tour/Tour.tsx::TourStep"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6B65\u9AA4\u5217\u8868"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "current": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5F53\u524D\u6B65\u9AA4\u7D22\u5F15"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "current",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "targetRect": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbChange",
+                "name": "hbChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6B65\u9AA4\u53D8\u5316\u4E8B\u4EF6\uFF0Cdetail \u4E3A\u65B0 current"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "hbClose",
+                "name": "hbClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5173\u95ED\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=Tour.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.js","sourceRoot":"","sources":["../../../src/components/Tour/Tour.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Element } from '@stencil/core';\n\nexport interface TourStep {\n  /** 目标元素 CSS selector */\n  target: string;\n  /** 步骤标题 */\n  title: string;\n  /** 步骤描述 */\n  description: string;\n}\n\n/**\n * Tour 引导组件\n * 通过遮罩 + 高亮卡片引导用户关注页面元素。\n */\n@Component({\n  tag: 'hb-tour',\n  styleUrl: 'tour.css',\n  shadow: true,\n})\nexport class Tour {\n  @Element() el: HTMLElement;\n\n  /** 是否显示（受控） */\n  @Prop({ mutable: true }) visible: boolean = false;\n\n  /** 步骤列表 */\n  @Prop() steps: TourStep[] = [];\n\n  /** 当前步骤索引 */\n  @Prop({ mutable: true }) current: number = 0;\n\n  /** 步骤变化事件，detail 为新 current */\n  @Event() hbChange: EventEmitter<number>;\n\n  /** 关闭事件 */\n  @Event() hbClose: EventEmitter<void>;\n\n  @State() private targetRect: DOMRect | null = null;\n\n  private get currentStep(): TourStep | undefined {\n    return this.steps[this.current];\n  }\n\n  private get isLast(): boolean {\n    return this.current >= this.steps.length - 1;\n  }\n\n  private get isFirst(): boolean {\n    return this.current <= 0;\n  }\n\n  componentDidRender() {\n    this.updateTargetRect();\n  }\n\n  componentDidUpdate() {\n    this.updateTargetRect();\n  }\n\n  private updateTargetRect() {\n    const step = this.currentStep;\n    if (!step || !this.visible) {\n      this.targetRect = null;\n      return;\n    }\n    const targetEl = document.querySelector(step.target) as HTMLElement | null;\n    if (targetEl) {\n      this.targetRect = targetEl.getBoundingClientRect();\n    } else {\n      this.targetRect = null;\n    }\n  }\n\n  private goNext = () => {\n    if (this.isLast) {\n      this.finish();\n      return;\n    }\n    this.current = this.current + 1;\n    this.hbChange.emit(this.current);\n  };\n\n  private goPrev = () => {\n    if (this.isFirst) return;\n    this.current = this.current - 1;\n    this.hbChange.emit(this.current);\n  };\n\n  private finish = () => {\n    this.visible = false;\n    this.hbClose.emit();\n  };\n\n  private cardStyle(): Record<string, string> {\n    const rect = this.targetRect;\n    // jsdom 下 getBoundingClientRect 返回 0 尺寸，提供兜底位置\n    if (rect && (rect.width > 0 || rect.height > 0)) {\n      return {\n        left: `${rect.right + 12}px`,\n        top: `${rect.top}px`,\n      };\n    }\n    return { left: '50%', top: '50%', transform: 'translate(-50%, -50%)' };\n  }\n\n  private maskStyle(): Record<string, string> {\n    const rect = this.targetRect;\n    if (rect && (rect.width > 0 || rect.height > 0)) {\n      // 4 段 box-shadow 实现镂空遮罩\n      const top = rect.top;\n      const right = window.innerWidth - rect.right;\n      const bottom = window.innerHeight - rect.bottom;\n      const left = rect.left;\n      return {\n        boxShadow: [\n          `0 0 0 9999px var(--hb-color-bg-mask)`,\n          `${left}px ${bottom}px 0 ${right}px transparent`,\n          `${left}px ${top}px 0 ${right}px transparent`,\n          `0 ${bottom}px 0 ${right}px transparent`,\n          `0 ${top}px 0 ${left}px transparent`,\n        ].join(', '),\n      };\n    }\n    return { background: 'var(--hb-color-bg-mask)' };\n  }\n\n  render() {\n    if (!this.visible || this.steps.length === 0) return null;\n\n    const step = this.currentStep;\n    if (!step) return null;\n\n    return (\n      <div class=\"hb-tour\">\n        <div\n          class=\"hb-tour__mask\"\n          style={this.maskStyle()}\n          onClick={this.finish}\n        />\n        <div\n          class=\"hb-tour__card\"\n          style={this.cardStyle()}\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <div class=\"hb-tour__header\">\n            <span class=\"hb-tour__title\">{step.title}</span>\n            <button\n              type=\"button\"\n              class=\"hb-tour__close\"\n              onClick={this.finish}\n              aria-label=\"关闭\"\n            >\n              ×\n            </button>\n          </div>\n          <div class=\"hb-tour__body\">{step.description}</div>\n          <div class=\"hb-tour__footer\">\n            <span class=\"hb-tour__indicator\">\n              {this.current + 1} / {this.steps.length}\n            </span>\n            <div class=\"hb-tour__actions\">\n              {!this.isFirst && (\n                <button type=\"button\" class=\"hb-tour__btn hb-tour__btn--prev\" onClick={this.goPrev}>\n                  上一步\n                </button>\n              )}\n              <button type=\"button\" class=\"hb-tour__btn hb-tour__btn--next\" onClick={this.goNext}>\n                {this.isLast ? '完成' : '下一步'}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}