huibo-ui 0.3.0

package/dist/collection/components/ImagePreview/ImagePreview.js

@@ -0,0 +1,371 @@
+import { h } from "@stencil/core";
+/**
+ * ImagePreview 图片预览组件
+ * 点击图片后展示大图，支持缩放、旋转、多图切换
+ */
+export class ImagePreview {
+    el;
+    /** 是否显示预览（受控，可双向） */
+    modelValue = false;
+    /** 单图源（srcList 为空时使用） */
+    src = '';
+    /** 多图源列表 */
+    srcList = [];
+    /** 多图当前索引 */
+    current = 0;
+    /** 单次缩放步长 */
+    zoomStep = 0.2;
+    /** 最小缩放比例 */
+    minZoom = 0.5;
+    /** 最大缩放比例 */
+    maxZoom = 3;
+    /** 关闭事件 */
+    hbClose;
+    /** 切换事件，detail 为 { src, index } */
+    hbChange;
+    /** 当前缩放比例 */
+    zoom = 1;
+    /** 当前旋转角度 */
+    rotate = 0;
+    keyDownHandler = (e) => {
+        if (!this.modelValue)
+            return;
+        if (e.key === 'Escape') {
+            this.close();
+        }
+        else if (e.key === 'ArrowLeft') {
+            this.prev();
+        }
+        else if (e.key === 'ArrowRight') {
+            this.next();
+        }
+    };
+    handleVisibleChange(newVal) {
+        if (newVal) {
+            // 打开时重置缩放与旋转
+            this.zoom = 1;
+            this.rotate = 0;
+            document.addEventListener('keydown', this.keyDownHandler);
+        }
+        else {
+            document.removeEventListener('keydown', this.keyDownHandler);
+        }
+    }
+    handleCurrentChange() {
+        // 切换图片时重置变换
+        this.zoom = 1;
+        this.rotate = 0;
+    }
+    componentDidLoad() {
+        if (this.modelValue) {
+            document.addEventListener('keydown', this.keyDownHandler);
+        }
+    }
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this.keyDownHandler);
+    }
+    /** 实际可切换的图片列表 */
+    get imageList() {
+        if (this.srcList && this.srcList.length > 0) {
+            return this.srcList;
+        }
+        return this.src ? [this.src] : [];
+    }
+    get currentIndex() {
+        const list = this.imageList;
+        if (list.length === 0)
+            return 0;
+        if (this.current < 0)
+            return 0;
+        if (this.current >= list.length)
+            return list.length - 1;
+        return this.current;
+    }
+    get currentSrc() {
+        const list = this.imageList;
+        if (list.length === 0)
+            return '';
+        return list[this.currentIndex] || '';
+    }
+    get isMulti() {
+        return this.imageList.length > 1;
+    }
+    close = () => {
+        this.modelValue = false;
+        this.hbClose.emit();
+    };
+    emitChange() {
+        this.hbChange.emit({ src: this.currentSrc, index: this.currentIndex });
+    }
+    next = () => {
+        const list = this.imageList;
+        if (list.length <= 1)
+            return;
+        this.current = (this.currentIndex + 1) % list.length;
+        this.emitChange();
+    };
+    prev = () => {
+        const list = this.imageList;
+        if (list.length <= 1)
+            return;
+        this.current = (this.currentIndex - 1 + list.length) % list.length;
+        this.emitChange();
+    };
+    zoomIn = () => {
+        const next = Math.min(this.zoom + this.zoomStep, this.maxZoom);
+        this.zoom = Math.round(next * 100) / 100;
+    };
+    zoomOut = () => {
+        const next = Math.max(this.zoom - this.zoomStep, this.minZoom);
+        this.zoom = Math.round(next * 100) / 100;
+    };
+    handleReset = () => {
+        this.zoom = 1;
+        this.rotate = 0;
+    };
+    handleRotateLeft = () => {
+        this.rotate = this.rotate - 90;
+    };
+    handleRotateRight = () => {
+        this.rotate = this.rotate + 90;
+    };
+    /** 滚轮缩放 */
+    handleWheel = (e) => {
+        // TODO: 平滑缩放 + 图片中心锚点；当前实现为基础步长缩放
+        e.preventDefault();
+        if (e.deltaY < 0) {
+            this.zoomIn();
+        }
+        else {
+            this.zoomOut();
+        }
+    };
+    /** 点击遮罩空白处关闭 */
+    handleOverlayClick = (e) => {
+        if (e.target === e.currentTarget) {
+            this.close();
+        }
+    };
+    stopAndClose = (e) => {
+        e.stopPropagation();
+        this.close();
+    };
+    render() {
+        if (!this.modelValue)
+            return null;
+        const imgStyle = {
+            transform: `scale(${this.zoom}) rotate(${this.rotate}deg)`,
+        };
+        return (h("div", { class: "hb-image-preview", onClick: this.handleOverlayClick }, h("div", { class: "hb-image-preview__wrapper" }, h("img", { class: "hb-image-preview__img", src: this.currentSrc, alt: "", style: imgStyle, onWheel: this.handleWheel })), this.isMulti && (h("button", { type: "button", class: "hb-image-preview__btn hb-image-preview__btn--prev", onClick: this.prev, "aria-label": "\u4E0A\u4E00\u5F20" }, "\u2039")), this.isMulti && (h("button", { type: "button", class: "hb-image-preview__btn hb-image-preview__btn--next", onClick: this.next, "aria-label": "\u4E0B\u4E00\u5F20" }, "\u203A")), h("div", { class: "hb-image-preview__toolbar", onClick: (e) => e.stopPropagation() }, h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.zoomOut, "aria-label": "\u7F29\u5C0F" }, "\uFF0D"), h("span", { class: "hb-image-preview__tool-label" }, Math.round(this.zoom * 100), "%"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.zoomIn, "aria-label": "\u653E\u5927" }, "\uFF0B"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.handleRotateLeft, "aria-label": "\u5DE6\u65CB" }, "\u21BA"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.handleRotateRight, "aria-label": "\u53F3\u65CB" }, "\u21BB"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.handleReset, "aria-label": "\u91CD\u7F6E" }, "\u27F2"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.stopAndClose, "aria-label": "\u5173\u95ED" }, "\u2715")), h("button", { type: "button", class: "hb-image-preview__close", onClick: this.stopAndClose, "aria-label": "\u5173\u95ED" }, "\u00D7")));
+    }
+    static get is() { return "hb-image-preview"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["image-preview.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["image-preview.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u663E\u793A\u9884\u89C8\uFF08\u53D7\u63A7\uFF0C\u53EF\u53CC\u5411\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "model-value",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5355\u56FE\u6E90\uFF08srcList \u4E3A\u7A7A\u65F6\u4F7F\u7528\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "src",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "srcList": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u591A\u56FE\u6E90\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": "\u591A\u56FE\u5F53\u524D\u7D22\u5F15"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "current",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "zoomStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5355\u6B21\u7F29\u653E\u6B65\u957F"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "zoom-step",
+                "reflect": false,
+                "defaultValue": "0.2"
+            },
+            "minZoom": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6700\u5C0F\u7F29\u653E\u6BD4\u4F8B"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-zoom",
+                "reflect": false,
+                "defaultValue": "0.5"
+            },
+            "maxZoom": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6700\u5927\u7F29\u653E\u6BD4\u4F8B"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-zoom",
+                "reflect": false,
+                "defaultValue": "3"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "zoom": {},
+            "rotate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbClose",
+                "name": "hbClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5173\u95ED\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "hbChange",
+                "name": "hbChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5207\u6362\u4E8B\u4EF6\uFF0Cdetail \u4E3A { src, index }"
+                },
+                "complexType": {
+                    "original": "ImagePreviewChangeDetail",
+                    "resolved": "ImagePreviewChangeDetail",
+                    "references": {
+                        "ImagePreviewChangeDetail": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/ImagePreview/ImagePreview.tsx",
+                            "id": "src/components/ImagePreview/ImagePreview.tsx::ImagePreviewChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "modelValue",
+                "methodName": "handleVisibleChange"
+            }, {
+                "propName": "current",
+                "methodName": "handleCurrentChange"
+            }];
+    }
+}
+//# sourceMappingURL=ImagePreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePreview.js","sourceRoot":"","sources":["../../../src/components/ImagePreview/ImagePreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n\nexport interface ImagePreviewChangeDetail {\n  src: string;\n  index: number;\n}\n\n/**\n * ImagePreview 图片预览组件\n * 点击图片后展示大图，支持缩放、旋转、多图切换\n */\n@Component({\n  tag: 'hb-image-preview',\n  styleUrl: 'image-preview.css',\n  shadow: true,\n})\nexport class ImagePreview {\n  @Element() el: HTMLElement;\n\n  /** 是否显示预览（受控，可双向） */\n  @Prop({ mutable: true }) modelValue: boolean = false;\n\n  /** 单图源（srcList 为空时使用） */\n  @Prop() src: string = '';\n\n  /** 多图源列表 */\n  @Prop() srcList: string[] = [];\n\n  /** 多图当前索引 */\n  @Prop({ mutable: true }) current: number = 0;\n\n  /** 单次缩放步长 */\n  @Prop() zoomStep: number = 0.2;\n\n  /** 最小缩放比例 */\n  @Prop() minZoom: number = 0.5;\n\n  /** 最大缩放比例 */\n  @Prop() maxZoom: number = 3;\n\n  /** 关闭事件 */\n  @Event() hbClose: EventEmitter<void>;\n\n  /** 切换事件，detail 为 { src, index } */\n  @Event() hbChange: EventEmitter<ImagePreviewChangeDetail>;\n\n  /** 当前缩放比例 */\n  @State() zoom: number = 1;\n\n  /** 当前旋转角度 */\n  @State() rotate: number = 0;\n\n  private keyDownHandler = (e: KeyboardEvent) => {\n    if (!this.modelValue) return;\n    if (e.key === 'Escape') {\n      this.close();\n    } else if (e.key === 'ArrowLeft') {\n      this.prev();\n    } else if (e.key === 'ArrowRight') {\n      this.next();\n    }\n  };\n\n  @Watch('modelValue')\n  handleVisibleChange(newVal: boolean) {\n    if (newVal) {\n      // 打开时重置缩放与旋转\n      this.zoom = 1;\n      this.rotate = 0;\n      document.addEventListener('keydown', this.keyDownHandler);\n    } else {\n      document.removeEventListener('keydown', this.keyDownHandler);\n    }\n  }\n\n  @Watch('current')\n  handleCurrentChange() {\n    // 切换图片时重置变换\n    this.zoom = 1;\n    this.rotate = 0;\n  }\n\n  componentDidLoad() {\n    if (this.modelValue) {\n      document.addEventListener('keydown', this.keyDownHandler);\n    }\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('keydown', this.keyDownHandler);\n  }\n\n  /** 实际可切换的图片列表 */\n  private get imageList(): string[] {\n    if (this.srcList && this.srcList.length > 0) {\n      return this.srcList;\n    }\n    return this.src ? [this.src] : [];\n  }\n\n  private get currentIndex(): number {\n    const list = this.imageList;\n    if (list.length === 0) return 0;\n    if (this.current < 0) return 0;\n    if (this.current >= list.length) return list.length - 1;\n    return this.current;\n  }\n\n  private get currentSrc(): string {\n    const list = this.imageList;\n    if (list.length === 0) return '';\n    return list[this.currentIndex] || '';\n  }\n\n  private get isMulti(): boolean {\n    return this.imageList.length > 1;\n  }\n\n  private close = () => {\n    this.modelValue = false;\n    this.hbClose.emit();\n  };\n\n  private emitChange() {\n    this.hbChange.emit({ src: this.currentSrc, index: this.currentIndex });\n  }\n\n  private next = () => {\n    const list = this.imageList;\n    if (list.length <= 1) return;\n    this.current = (this.currentIndex + 1) % list.length;\n    this.emitChange();\n  };\n\n  private prev = () => {\n    const list = this.imageList;\n    if (list.length <= 1) return;\n    this.current = (this.currentIndex - 1 + list.length) % list.length;\n    this.emitChange();\n  };\n\n  private zoomIn = () => {\n    const next = Math.min(this.zoom + this.zoomStep, this.maxZoom);\n    this.zoom = Math.round(next * 100) / 100;\n  };\n\n  private zoomOut = () => {\n    const next = Math.max(this.zoom - this.zoomStep, this.minZoom);\n    this.zoom = Math.round(next * 100) / 100;\n  };\n\n  private handleReset = () => {\n    this.zoom = 1;\n    this.rotate = 0;\n  };\n\n  private handleRotateLeft = () => {\n    this.rotate = this.rotate - 90;\n  };\n\n  private handleRotateRight = () => {\n    this.rotate = this.rotate + 90;\n  };\n\n  /** 滚轮缩放 */\n  private handleWheel = (e: WheelEvent) => {\n    // TODO: 平滑缩放 + 图片中心锚点；当前实现为基础步长缩放\n    e.preventDefault();\n    if (e.deltaY < 0) {\n      this.zoomIn();\n    } else {\n      this.zoomOut();\n    }\n  };\n\n  /** 点击遮罩空白处关闭 */\n  private handleOverlayClick = (e: MouseEvent) => {\n    if (e.target === e.currentTarget) {\n      this.close();\n    }\n  };\n\n  private stopAndClose = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.close();\n  };\n\n  render() {\n    if (!this.modelValue) return null;\n\n    const imgStyle = {\n      transform: `scale(${this.zoom}) rotate(${this.rotate}deg)`,\n    };\n\n    return (\n      <div class=\"hb-image-preview\" onClick={this.handleOverlayClick}>\n        <div class=\"hb-image-preview__wrapper\">\n          <img\n            class=\"hb-image-preview__img\"\n            src={this.currentSrc}\n            alt=\"\"\n            style={imgStyle}\n            onWheel={this.handleWheel}\n          />\n        </div>\n\n        {this.isMulti && (\n          <button\n            type=\"button\"\n            class=\"hb-image-preview__btn hb-image-preview__btn--prev\"\n            onClick={this.prev}\n            aria-label=\"上一张\"\n          >\n            ‹\n          </button>\n        )}\n        {this.isMulti && (\n          <button\n            type=\"button\"\n            class=\"hb-image-preview__btn hb-image-preview__btn--next\"\n            onClick={this.next}\n            aria-label=\"下一张\"\n          >\n            ›\n          </button>\n        )}\n\n        <div class=\"hb-image-preview__toolbar\" onClick={(e) => e.stopPropagation()}>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.zoomOut} aria-label=\"缩小\">\n            －\n          </button>\n          <span class=\"hb-image-preview__tool-label\">{Math.round(this.zoom * 100)}%</span>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.zoomIn} aria-label=\"放大\">\n            ＋\n          </button>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleRotateLeft} aria-label=\"左旋\">\n            ↺\n          </button>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleRotateRight} aria-label=\"右旋\">\n            ↻\n          </button>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleReset} aria-label=\"重置\">\n            ⟲\n          </button>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.stopAndClose} aria-label=\"关闭\">\n            ✕\n          </button>\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"hb-image-preview__close\"\n          onClick={this.stopAndClose}\n          aria-label=\"关闭\"\n        >\n          ×\n        </button>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/ImagePreview/image-preview.css

@@ -0,0 +1,125 @@
+:host {
+  display: contents;
+}
+
+.hb-image-preview {
+  position: fixed;
+  inset: 0;
+  z-index: var(--hb-z-index-modal-mask, 2000);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--hb-color-bg-mask, rgba(0, 0, 0, 0.5));
+}
+
+.hb-image-preview__wrapper {
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hb-image-preview__img {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  user-select: none;
+  transition: transform 0.2s ease;
+  pointer-events: none;
+}
+
+.hb-image-preview__btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.4);
+  color: var(--hb-color-text-inverse, #ffffff);
+  font-size: 28px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--hb-transition-duration, 0.2s) ease;
+}
+
+.hb-image-preview__btn:hover {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.hb-image-preview__btn--prev {
+  left: 24px;
+}
+
+.hb-image-preview__btn--next {
+  right: 24px;
+}
+
+.hb-image-preview__toolbar {
+  position: absolute;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  border-radius: var(--hb-border-radius-base, 4px);
+  background-color: rgba(0, 0, 0, 0.5);
+  color: var(--hb-color-text-inverse, #ffffff);
+}
+
+.hb-image-preview__tool {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  border: none;
+  border-radius: var(--hb-border-radius-sm, 2px);
+  background: transparent;
+  color: var(--hb-color-text-inverse, #ffffff);
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color var(--hb-transition-duration, 0.2s) ease;
+}
+
+.hb-image-preview__tool:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+.hb-image-preview__tool-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  padding: 0 4px;
+  font-size: 13px;
+  color: var(--hb-color-text-inverse, #ffffff);
+}
+
+.hb-image-preview__close {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.4);
+  color: var(--hb-color-text-inverse, #ffffff);
+  font-size: 28px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--hb-transition-duration, 0.2s) ease;
+}
+
+.hb-image-preview__close:hover {
+  background-color: rgba(0, 0, 0, 0.6);
+}