huibo-ui 0.3.0

package/dist/collection/components/Icon/Icon.js

@@ -0,0 +1,162 @@
+import { h } from "@stencil/core";
+/**
+ * 内置常用图标 SVG path 映射表（24x24 viewBox，stroke/fill 由 currentColor 继承）
+ * 设计参照 Ant Design / Element Plus 常用后台图标。
+ */
+const ICON_PATHS = {
+    edit: 'M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z',
+    delete: 'M6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm3-3h6l1 2H8l1-2zM4 6h16v2H4V6z',
+    plus: 'M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z',
+    search: 'M10 4a6 6 0 1 0 3.9 10.5l4.3 4.3 1.4-1.4-4.3-4.3A6 6 0 0 0 10 4zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8z',
+    refresh: 'M12 5V2L8 6l4 4V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7z',
+    check: 'M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z',
+    close: 'M6 6l12 12M18 6L6 18',
+    'arrow-up': 'M12 5l7 7h-4v7h-6v-7H5z',
+    'arrow-down': 'M12 19l-7-7h4V5h6v7h4z',
+    'arrow-left': 'M5 12l7-7v4h7v6h-7v4z',
+    'arrow-right': 'M19 12l-7 7v-4H5V9h7V5z',
+    eye: 'M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6a2 2 0 1 0 0 4 2 2 0 0 0 0-4z',
+    setting: 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9 4a8.9 8.9 0 0 0-.2-2l2-1.5-2-3.5-2.4 1a8 8 0 0 0-3.4-2L14.5 1h-5l-.3 2.5a8 8 0 0 0-3.4 2l-2.4-1-2 3.5L3.4 10a8.9 8.9 0 0 0 0 4l-2 1.5 2 3.5 2.4-1a8 8 0 0 0 3.4 2l.3 2.5h5l.3-2.5a8 8 0 0 0 3.4-2l2.4 1 2-3.5-2-1.5c.1-.6.2-1.3.2-2z',
+    user: 'M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z',
+    bell: 'M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 0 0-5-5.9V4a1 1 0 0 0-2 0v1.1A6 6 0 0 0 6 11v5l-2 2v1h16v-1l-2-2z',
+    menu: 'M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z',
+    home: 'M12 3l9 8h-3v9h-4v-6H10v6H6v-9H3z',
+    upload: 'M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z',
+    download: 'M9 4h6v8h4l-7 7-7-7h4V4zm-4 14h14v2H5v-2z',
+    info: 'M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9a10 10 0 1 0 0 20 10 10 0 0 0 0-20z',
+    warning: 'M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',
+};
+/**
+ * Icon 图标组件
+ * 内置常用后台图标，替换项目内散落的 emoji 图标。
+ * 通过 name 查表渲染对应 SVG，未知 name 渲染占位。
+ */
+export class Icon {
+    /** 图标名（查 ICON_PATHS 映射表） */
+    name = '';
+    /** 尺寸（number 视为 px，string 直接作为 width/height） */
+    size = '1em';
+    /** 颜色（默认继承 currentColor） */
+    color = 'inherit';
+    /** 是否旋转动画 */
+    spin = false;
+    normalizeSize() {
+        if (typeof this.size === 'number') {
+            return `${this.size}px`;
+        }
+        return this.size;
+    }
+    render() {
+        const dimension = this.normalizeSize();
+        const path = ICON_PATHS[this.name];
+        const svgStyle = {
+            width: dimension,
+            height: dimension,
+            color: this.color,
+        };
+        if (path) {
+            // close / arrow 等使用 stroke 描边；info/warning/eye 等使用 fill 填充
+            const strokeBased = this.name === 'close' || this.name.startsWith('arrow-');
+            return (h("svg", { class: { 'hb-icon': true, 'hb-icon--spin': this.spin }, viewBox: "0 0 24 24", style: svgStyle, fill: strokeBased ? 'none' : 'currentColor', stroke: strokeBased ? 'currentColor' : 'none', "stroke-width": strokeBased ? 2 : 0, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: path })));
+        }
+        // 未知 name：渲染占位方块 + title 文本
+        return (h("span", { class: { 'hb-icon': true, 'hb-icon--spin': this.spin, 'hb-icon--placeholder': true }, style: svgStyle, role: "img", "aria-label": this.name }, this.name || ''));
+    }
+    static get is() { return "hb-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u56FE\u6807\u540D\uFF08\u67E5 ICON_PATHS \u6620\u5C04\u8868\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "size": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5C3A\u5BF8\uFF08number \u89C6\u4E3A px\uFF0Cstring \u76F4\u63A5\u4F5C\u4E3A width/height\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'1em'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u989C\u8272\uFF08\u9ED8\u8BA4\u7EE7\u627F currentColor\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'inherit'"
+            },
+            "spin": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u65CB\u8F6C\u52A8\u753B"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "spin",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=Icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * 内置常用图标 SVG path 映射表（24x24 viewBox，stroke/fill 由 currentColor 继承）\n * 设计参照 Ant Design / Element Plus 常用后台图标。\n */\nconst ICON_PATHS: Record<string, string> = {\n  edit:\n    'M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z',\n  delete:\n    'M6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm3-3h6l1 2H8l1-2zM4 6h16v2H4V6z',\n  plus: 'M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z',\n  search:\n    'M10 4a6 6 0 1 0 3.9 10.5l4.3 4.3 1.4-1.4-4.3-4.3A6 6 0 0 0 10 4zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8z',\n  refresh:\n    'M12 5V2L8 6l4 4V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7z',\n  check: 'M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z',\n  close: 'M6 6l12 12M18 6L6 18',\n  'arrow-up': 'M12 5l7 7h-4v7h-6v-7H5z',\n  'arrow-down': 'M12 19l-7-7h4V5h6v7h4z',\n  'arrow-left': 'M5 12l7-7v4h7v6h-7v4z',\n  'arrow-right': 'M19 12l-7 7v-4H5V9h7V5z',\n  eye: 'M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6a2 2 0 1 0 0 4 2 2 0 0 0 0-4z',\n  setting:\n    'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9 4a8.9 8.9 0 0 0-.2-2l2-1.5-2-3.5-2.4 1a8 8 0 0 0-3.4-2L14.5 1h-5l-.3 2.5a8 8 0 0 0-3.4 2l-2.4-1-2 3.5L3.4 10a8.9 8.9 0 0 0 0 4l-2 1.5 2 3.5 2.4-1a8 8 0 0 0 3.4 2l.3 2.5h5l.3-2.5a8 8 0 0 0 3.4-2l2.4 1 2-3.5-2-1.5c.1-.6.2-1.3.2-2z',\n  user: 'M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z',\n  bell: 'M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 0 0-5-5.9V4a1 1 0 0 0-2 0v1.1A6 6 0 0 0 6 11v5l-2 2v1h16v-1l-2-2z',\n  menu: 'M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z',\n  home: 'M12 3l9 8h-3v9h-4v-6H10v6H6v-9H3z',\n  upload:\n    'M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z',\n  download:\n    'M9 4h6v8h4l-7 7-7-7h4V4zm-4 14h14v2H5v-2z',\n  info: 'M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9a10 10 0 1 0 0 20 10 10 0 0 0 0-20z',\n  warning:\n    'M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',\n};\n\n/**\n * Icon 图标组件\n * 内置常用后台图标，替换项目内散落的 emoji 图标。\n * 通过 name 查表渲染对应 SVG，未知 name 渲染占位。\n */\n@Component({\n  tag: 'hb-icon',\n  styleUrl: 'icon.css',\n  shadow: true,\n})\nexport class Icon {\n  /** 图标名（查 ICON_PATHS 映射表） */\n  @Prop() name: string = '';\n\n  /** 尺寸（number 视为 px，string 直接作为 width/height） */\n  @Prop() size: number | string = '1em';\n\n  /** 颜色（默认继承 currentColor） */\n  @Prop() color: string = 'inherit';\n\n  /** 是否旋转动画 */\n  @Prop() spin: boolean = false;\n\n  private normalizeSize(): string {\n    if (typeof this.size === 'number') {\n      return `${this.size}px`;\n    }\n    return this.size;\n  }\n\n  render() {\n    const dimension = this.normalizeSize();\n    const path = ICON_PATHS[this.name];\n\n    const svgStyle = {\n      width: dimension,\n      height: dimension,\n      color: this.color,\n    };\n\n    if (path) {\n      // close / arrow 等使用 stroke 描边；info/warning/eye 等使用 fill 填充\n      const strokeBased = this.name === 'close' || this.name.startsWith('arrow-');\n      return (\n        <svg\n          class={{ 'hb-icon': true, 'hb-icon--spin': this.spin }}\n          viewBox=\"0 0 24 24\"\n          style={svgStyle}\n          fill={strokeBased ? 'none' : 'currentColor'}\n          stroke={strokeBased ? 'currentColor' : 'none'}\n          stroke-width={strokeBased ? 2 : 0}\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d={path} />\n        </svg>\n      );\n    }\n\n    // 未知 name：渲染占位方块 + title 文本\n    return (\n      <span\n        class={{ 'hb-icon': true, 'hb-icon--spin': this.spin, 'hb-icon--placeholder': true }}\n        style={svgStyle}\n        role=\"img\"\n        aria-label={this.name}\n      >\n        {this.name || ''}\n      </span>\n    );\n  }\n}\n"]}

package/dist/collection/components/Icon/icon.css

@@ -0,0 +1,43 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  vertical-align: middle;
+}
+
+.hb-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  font-size: inherit;
+  color: inherit;
+  flex-shrink: 0;
+}
+
+.hb-icon--spin {
+  animation: hb-icon-spin 1s linear infinite;
+}
+
+.hb-icon--placeholder {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--hb-font-size-xs);
+  color: var(--hb-color-text-tertiary);
+  background-color: var(--hb-color-fill-tertiary);
+  border-radius: var(--hb-border-radius-xs);
+  line-height: 1;
+  overflow: hidden;
+  word-break: break-all;
+  padding: 0 2px;
+}
+
+@keyframes hb-icon-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/collection/components/Image/Image.js

@@ -0,0 +1,200 @@
+import { h } from "@stencil/core";
+export class Image {
+    src = '';
+    alt = '';
+    width;
+    height;
+    fit = 'fill';
+    lazy = false;
+    preview = false;
+    radius;
+    loaded = false;
+    error = false;
+    previewVisible = false;
+    handleLoad = () => { this.loaded = true; };
+    handleError = () => { this.error = true; };
+    render() {
+        return (h("div", { key: 'c6ededfba4d6a1d4b9356c1b18dc7b19aa8c8631', class: "hb-image", style: { width: this.width, height: this.height, borderRadius: this.radius } }, !this.error ? (h("img", { src: this.src, alt: this.alt, class: { 'hb-image__inner': true, 'hb-image__inner--loaded': this.loaded }, style: { objectFit: this.fit }, loading: this.lazy ? 'lazy' : undefined, onLoad: this.handleLoad, onError: this.handleError, onClick: () => this.preview && (this.previewVisible = true) })) : (h("div", { class: "hb-image__error" }, "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25")), this.previewVisible && (h("div", { key: 'b32748bc6a54360e9cfab47ee06671f4568bae8c', class: "hb-image__preview", onClick: () => { this.previewVisible = false; } }, h("img", { key: '7bcc5a1f9b34756827fb8566a953296f808febea', src: this.src, alt: this.alt, class: "hb-image__preview-img" })))));
+    }
+    static get is() { return "hb-image"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["image.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["image.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "src",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "alt",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "width",
+                "reflect": false
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "height",
+                "reflect": false
+            },
+            "fit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'fill' | 'contain' | 'cover' | 'none' | 'scale-down'",
+                    "resolved": "\"contain\" | \"cover\" | \"fill\" | \"none\" | \"scale-down\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "fit",
+                "reflect": false,
+                "defaultValue": "'fill'"
+            },
+            "lazy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "lazy",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "preview": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "preview",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "radius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "radius",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "loaded": {},
+            "error": {},
+            "previewVisible": {}
+        };
+    }
+}
+//# sourceMappingURL=Image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAG1D,MAAM,OAAO,KAAK;IACR,GAAG,GAAW,EAAE,CAAC;IACjB,GAAG,GAAW,EAAE,CAAC;IACjB,KAAK,CAAU;IACf,MAAM,CAAU;IAChB,GAAG,GAAyD,MAAM,CAAC;IACnE,IAAI,GAAY,KAAK,CAAC;IACtB,OAAO,GAAY,KAAK,CAAC;IACzB,MAAM,CAAU;IAEf,MAAM,GAAY,KAAK,CAAC;IACxB,KAAK,GAAY,KAAK,CAAC;IACvB,cAAc,GAAY,KAAK,CAAC;IAEjC,UAAU,GAAG,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;IAC3C,WAAW,GAAG,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;IAEnD,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,CAAC,MAAM,EAAE;YAC/F,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACb,WACE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAC5B,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,yBAAyB,EAAE,IAAI,CAAC,MAAM,EAAE,EAC1E,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAC9B,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACvC,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,GAC3D,CACH,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,iBAAiB,2CAAa,CAC1C;YACA,IAAI,CAAC,cAAc,IAAI,CACtB,4DAAK,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,CAAC,CAAC;gBAC5E,4DAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,uBAAuB,GAAG,CAC/D,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\n\n@Component({ tag: 'hb-image', styleUrl: 'image.css', shadow: true })\nexport class Image {\n  @Prop() src: string = '';\n  @Prop() alt: string = '';\n  @Prop() width?: string;\n  @Prop() height?: string;\n  @Prop() fit: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' = 'fill';\n  @Prop() lazy: boolean = false;\n  @Prop() preview: boolean = false;\n  @Prop() radius?: string;\n\n  @State() loaded: boolean = false;\n  @State() error: boolean = false;\n  @State() previewVisible: boolean = false;\n\n  private handleLoad = () => { this.loaded = true; };\n  private handleError = () => { this.error = true; };\n\n  render() {\n    return (\n      <div class=\"hb-image\" style={{ width: this.width, height: this.height, borderRadius: this.radius }}>\n        {!this.error ? (\n          <img\n            src={this.src} alt={this.alt}\n            class={{ 'hb-image__inner': true, 'hb-image__inner--loaded': this.loaded }}\n            style={{ objectFit: this.fit }}\n            loading={this.lazy ? 'lazy' : undefined}\n            onLoad={this.handleLoad}\n            onError={this.handleError}\n            onClick={() => this.preview && (this.previewVisible = true)}\n          />\n        ) : (\n          <div class=\"hb-image__error\">图片加载失败</div>\n        )}\n        {this.previewVisible && (\n          <div class=\"hb-image__preview\" onClick={() => { this.previewVisible = false; }}>\n            <img src={this.src} alt={this.alt} class=\"hb-image__preview-img\" />\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Image/image.css

@@ -0,0 +1,7 @@
+:host { display: inline-block; }
+.hb-image { position: relative; display: inline-flex; overflow: hidden; background: var(--hb-color-fill-quaternary); }
+.hb-image__inner { width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s; }
+.hb-image__inner--loaded { opacity: 1; }
+.hb-image__error { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: var(--hb-font-size-sm); color: var(--hb-color-text-secondary); }
+.hb-image__preview { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 2000; cursor: zoom-out; }
+.hb-image__preview-img { max-width: 90%; max-height: 90%; object-fit: contain; }