huibo-ui 0.3.0

package/dist/collection/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,416 @@
+import { h } from "@stencil/core";
+/**
+ * ColorPicker 颜色选择器组件
+ * 用于颜色选择，支持多种格式
+ */
+export class ColorPicker {
+    el;
+    /**
+     * 绑定值
+     */
+    modelValue;
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 颜色格式
+     */
+    colorFormat = 'hex';
+    /**
+     * 是否显示透明度
+     * @default false
+     */
+    showAlpha = false;
+    /**
+     * 预定义颜色
+     */
+    predefine;
+    isOpen = false;
+    currentColor = '#409EFF';
+    hue = 210; // 色相值 0-360
+    saturation = 100; // 饱和度 0-100
+    value = 100; // 明度 0-100
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    /**
+     * 激活时触发
+     */
+    hbActiveChange;
+    componentDidLoad() {
+        if (this.modelValue) {
+            this.currentColor = this.modelValue;
+            this.updateHSVFromColor(this.modelValue);
+        }
+        else {
+            this.updateHSVFromColor(this.currentColor);
+        }
+        document.addEventListener('click', this.handleDocumentClick);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleDocumentClick);
+    }
+    handleDocumentClick = (e) => {
+        if (!this.isOpen)
+            return;
+        const target = e.target;
+        if (!this.el.contains(target)) {
+            this.isOpen = false;
+        }
+    };
+    handleValueChange() {
+        if (this.modelValue) {
+            this.currentColor = this.modelValue;
+            this.updateHSVFromColor(this.modelValue);
+        }
+    }
+    handleTriggerClick = () => {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+    };
+    handleColorSelect = (color) => {
+        this.currentColor = color;
+        this.modelValue = color;
+        this.hbChange.emit(color);
+        this.hbActiveChange.emit(color);
+    };
+    handleSaturationClick = (e) => {
+        const target = e.currentTarget;
+        const rect = target.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        // X 轴代表饱和度 (0-100%)
+        this.saturation = Math.max(0, Math.min(100, (x / rect.width) * 100));
+        // Y 轴代表明度 (0-100%，从上到下)
+        this.value = Math.max(0, Math.min(100, 100 - (y / rect.height) * 100));
+        const hex = this.hsvToHex(this.hue, this.saturation, this.value);
+        this.handleColorSelect(hex);
+    };
+    handleHueClick = (e) => {
+        const target = e.currentTarget;
+        const rect = target.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        // 色相值 0-360
+        this.hue = Math.max(0, Math.min(360, (x / rect.width) * 360));
+        const hex = this.hsvToHex(this.hue, this.saturation, this.value);
+        this.handleColorSelect(hex);
+    };
+    handleInputChange = (e) => {
+        const target = e.target;
+        const value = target.value;
+        // 验证 hex 颜色格式
+        if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value)) {
+            this.handleColorSelect(value);
+        }
+    };
+    handleRgbInputChange = (index, value) => {
+        const rgb = this.hexToRgb(this.currentColor);
+        if (rgb) {
+            const num = parseInt(value, 10);
+            if (!isNaN(num) && num >= 0 && num <= 255) {
+                if (index === 0)
+                    rgb.r = num;
+                else if (index === 1)
+                    rgb.g = num;
+                else if (index === 2)
+                    rgb.b = num;
+                const hex = `#${[rgb.r, rgb.g, rgb.b].map(x => {
+                    const hex = x.toString(16);
+                    return hex.length === 1 ? '0' + hex : hex;
+                }).join('')}`;
+                this.handleColorSelect(hex);
+            }
+        }
+    };
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null;
+    }
+    // RGB 转 HSV
+    rgbToHsv(r, g, b) {
+        r = r / 255;
+        g = g / 255;
+        b = b / 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const diff = max - min;
+        let h = 0;
+        if (diff !== 0) {
+            if (max === r) {
+                h = ((g - b) / diff) % 6;
+            }
+            else if (max === g) {
+                h = (b - r) / diff + 2;
+            }
+            else {
+                h = (r - g) / diff + 4;
+            }
+        }
+        h = Math.round(h * 60);
+        if (h < 0)
+            h += 360;
+        const s = max === 0 ? 0 : Math.round((diff / max) * 100);
+        const v = Math.round(max * 100);
+        return { h, s, v };
+    }
+    // HSV 转 RGB
+    hsvToRgb(h, s, v) {
+        s = s / 100;
+        v = v / 100;
+        const c = v * s;
+        const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+        const m = v - c;
+        let r = 0, g = 0, b = 0;
+        if (h >= 0 && h < 60) {
+            r = c;
+            g = x;
+            b = 0;
+        }
+        else if (h >= 60 && h < 120) {
+            r = x;
+            g = c;
+            b = 0;
+        }
+        else if (h >= 120 && h < 180) {
+            r = 0;
+            g = c;
+            b = x;
+        }
+        else if (h >= 180 && h < 240) {
+            r = 0;
+            g = x;
+            b = c;
+        }
+        else if (h >= 240 && h < 300) {
+            r = x;
+            g = 0;
+            b = c;
+        }
+        else if (h >= 300 && h < 360) {
+            r = c;
+            g = 0;
+            b = x;
+        }
+        return {
+            r: Math.round((r + m) * 255),
+            g: Math.round((g + m) * 255),
+            b: Math.round((b + m) * 255)
+        };
+    }
+    // HSV 转 Hex
+    hsvToHex(h, s, v) {
+        const rgb = this.hsvToRgb(h, s, v);
+        return `#${[rgb.r, rgb.g, rgb.b].map(x => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        }).join('')}`;
+    }
+    // 从颜色值更新 HSV
+    updateHSVFromColor(color) {
+        const rgb = this.hexToRgb(color);
+        if (rgb) {
+            const hsv = this.rgbToHsv(rgb.r, rgb.g, rgb.b);
+            this.hue = hsv.h;
+            this.saturation = hsv.s;
+            this.value = hsv.v;
+        }
+    }
+    render() {
+        const rgb = this.hexToRgb(this.currentColor);
+        const predefinedColors = this.predefine || [
+            '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1',
+            '#1e90ff', '#c71585', '#000000', '#ffffff', '#808080',
+        ];
+        // 根据当前色相生成饱和度面板的背景色
+        const hueColor = this.hsvToHex(this.hue, 100, 100);
+        return (h("div", { key: '3a91756cec6b901dbd98049c6dea3f13cb0125b9', class: {
+                'hb-color-picker': true,
+                'hb-color-picker--open': this.isOpen,
+                'hb-color-picker--disabled': this.disabled,
+            } }, h("div", { key: '60fcf367b48d726dec4626cade99ae39c10c83f7', class: "hb-color-picker__trigger", onClick: this.handleTriggerClick }, h("div", { key: '9b9f4c7f1444d76f1d6df1c480949572affb4a71', class: "hb-color-picker__color", style: { backgroundColor: this.currentColor } }), h("span", { key: 'ddc5c6d1d875012ad46638324b2e9a80eb50d989', class: "hb-color-picker__text" }, this.currentColor)), this.isOpen && (h("div", { key: '4f96c8be969d8b37f0acba6f9ec55d0b0223485d', class: "hb-color-picker__dropdown" }, h("div", { key: '6e754aa587fbe8161315ab3fedfd71ccdf7b9a7e', class: "hb-color-picker__panel" }, h("div", { key: '477dbbe265a0538e3f65f0d3c03dc653cf063982', class: "hb-color-picker__saturation", onClick: this.handleSaturationClick }, h("div", { key: 'eff441602d0795cfb6a05b9470dcec762c47e2a2', class: "hb-color-picker__saturation-bg", style: { backgroundColor: hueColor } }), h("div", { key: '3f3e8c420dbea347c6859f046d0398e1141de926', class: "hb-color-picker__saturation-white" }), h("div", { key: 'e501004e2e2d9f585b48bcc4a90def07c39964c2', class: "hb-color-picker__saturation-black" }), h("div", { key: 'b00cda534203c12195977d0933bd36b1baafab34', class: "hb-color-picker__saturation-pointer", style: {
+                left: `${this.saturation}%`,
+                top: `${100 - this.value}%`,
+            } })), h("div", { key: 'ee86c70a807d70aa292a0208a3a172b35c791325', class: "hb-color-picker__controls" }, h("div", { key: 'd4dda211347b9c3e4ef1dc5e28f5a6a44359a162', class: "hb-color-picker__hue", onClick: this.handleHueClick }, h("div", { key: 'dbab23a4059b6dd2aeada35d7434c79a61860867', class: "hb-color-picker__hue-bar" }), h("div", { key: 'b612775578712beac58a487a23a25c812fb28077', class: "hb-color-picker__hue-pointer", style: {
+                left: `${(this.hue / 360) * 100}%`,
+            } })), this.showAlpha && (h("div", { key: '1aee2cd74b0cdf27d0afcbd09384ae707a5d7485', class: "hb-color-picker__alpha" }, h("div", { key: 'eba46d362053e05c89a93f34dfb453a8ed2253c7', class: "hb-color-picker__alpha-bar", style: { backgroundColor: this.currentColor } })))), h("div", { key: '60f66da4a79a2eb0ce1c389d65fd30362bbb7c61', class: "hb-color-picker__input" }, h("input", { key: '1411561687211e4ea149421bfaf624c7cdc45ead', type: "text", class: "hb-color-picker__input-hex", value: this.currentColor, onInput: this.handleInputChange }), rgb && (h("div", { key: 'c24d2df8b8d04fee9eeba4d8de660d14857cdf77', class: "hb-color-picker__input-rgb" }, h("input", { key: 'e4dd71d86bda84168f7342b3cf0a7513f608f0e1', type: "number", min: "0", max: "255", value: rgb.r, onInput: (e) => this.handleRgbInputChange(0, e.target.value) }), h("input", { key: '198c25b1f2fe03bae65b2a6120b226684623a5a1', type: "number", min: "0", max: "255", value: rgb.g, onInput: (e) => this.handleRgbInputChange(1, e.target.value) }), h("input", { key: 'fe0c9273a4d283f3f4bde1b8c258e0adc370b9a6', type: "number", min: "0", max: "255", value: rgb.b, onInput: (e) => this.handleRgbInputChange(2, e.target.value) })))), this.predefine && this.predefine.length > 0 && (h("div", { key: '52b711be9fd4794a42fb0c4747a53df529895932', class: "hb-color-picker__predefine" }, predefinedColors.map((color) => (h("div", { class: {
+                'hb-color-picker__predefine-color': true,
+                'hb-color-picker__predefine-color--selected': color === this.currentColor,
+            }, style: { backgroundColor: color }, onClick: () => this.handleColorSelect(color) }))))))))));
+    }
+    static get is() { return "hb-color-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["color-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["color-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u7ED1\u5B9A\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "model-value",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u7981\u7528"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "colorFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'hsl' | 'hsv' | 'hex' | 'rgb'",
+                    "resolved": "\"hex\" | \"hsl\" | \"hsv\" | \"rgb\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u989C\u8272\u683C\u5F0F"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color-format",
+                "reflect": false,
+                "defaultValue": "'hex'"
+            },
+            "showAlpha": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u663E\u793A\u900F\u660E\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-alpha",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "predefine": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u9884\u5B9A\u4E49\u989C\u8272"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "currentColor": {},
+            "hue": {},
+            "saturation": {},
+            "value": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbChange",
+                "name": "hbChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "hbActiveChange",
+                "name": "hbActiveChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6FC0\u6D3B\u65F6\u89E6\u53D1"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "modelValue",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=ColorPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\n\n/**\n * ColorPicker 颜色选择器组件\n * 用于颜色选择，支持多种格式\n */\n@Component({\n  tag: 'hb-color-picker',\n  styleUrl: 'color-picker.css',\n  shadow: true,\n})\nexport class ColorPicker {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue?: string;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 颜色格式\n   */\n  @Prop() colorFormat: 'hsl' | 'hsv' | 'hex' | 'rgb' = 'hex';\n\n  /**\n   * 是否显示透明度\n   * @default false\n   */\n  @Prop() showAlpha: boolean = false;\n\n  /**\n   * 预定义颜色\n   */\n  @Prop() predefine?: string[];\n\n  @State() isOpen: boolean = false;\n  @State() currentColor: string = '#409EFF';\n  @State() hue: number = 210; // 色相值 0-360\n  @State() saturation: number = 100; // 饱和度 0-100\n  @State() value: number = 100; // 明度 0-100\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string>;\n\n  /**\n   * 激活时触发\n   */\n  @Event() hbActiveChange: EventEmitter<string>;\n\n  componentDidLoad() {\n    if (this.modelValue) {\n      this.currentColor = this.modelValue;\n      this.updateHSVFromColor(this.modelValue);\n    } else {\n      this.updateHSVFromColor(this.currentColor);\n    }\n    document.addEventListener('click', this.handleDocumentClick);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  private handleDocumentClick = (e: MouseEvent) => {\n    if (!this.isOpen) return;\n    const target = e.target as HTMLElement;\n    if (!this.el.contains(target)) {\n      this.isOpen = false;\n    }\n  };\n\n  @Watch('modelValue')\n  handleValueChange() {\n    if (this.modelValue) {\n      this.currentColor = this.modelValue;\n      this.updateHSVFromColor(this.modelValue);\n    }\n  }\n\n  private handleTriggerClick = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleColorSelect = (color: string) => {\n    this.currentColor = color;\n    this.modelValue = color;\n    this.hbChange.emit(color);\n    this.hbActiveChange.emit(color);\n  };\n\n  private handleSaturationClick = (e: MouseEvent) => {\n    const target = e.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const y = e.clientY - rect.top;\n    \n    // X 轴代表饱和度 (0-100%)\n    this.saturation = Math.max(0, Math.min(100, (x / rect.width) * 100));\n    // Y 轴代表明度 (0-100%，从上到下)\n    this.value = Math.max(0, Math.min(100, 100 - (y / rect.height) * 100));\n    \n    const hex = this.hsvToHex(this.hue, this.saturation, this.value);\n    this.handleColorSelect(hex);\n  };\n\n  private handleHueClick = (e: MouseEvent) => {\n    const target = e.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    \n    // 色相值 0-360\n    this.hue = Math.max(0, Math.min(360, (x / rect.width) * 360));\n    \n    const hex = this.hsvToHex(this.hue, this.saturation, this.value);\n    this.handleColorSelect(hex);\n  };\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    const value = target.value;\n    // 验证 hex 颜色格式\n    if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value)) {\n      this.handleColorSelect(value);\n    }\n  };\n\n  private handleRgbInputChange = (index: number, value: string) => {\n    const rgb = this.hexToRgb(this.currentColor);\n    if (rgb) {\n      const num = parseInt(value, 10);\n      if (!isNaN(num) && num >= 0 && num <= 255) {\n        if (index === 0) rgb.r = num;\n        else if (index === 1) rgb.g = num;\n        else if (index === 2) rgb.b = num;\n        \n        const hex = `#${[rgb.r, rgb.g, rgb.b].map(x => {\n          const hex = x.toString(16);\n          return hex.length === 1 ? '0' + hex : hex;\n        }).join('')}`;\n        this.handleColorSelect(hex);\n      }\n    }\n  };\n\n  private hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n    const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n    return result ? {\n      r: parseInt(result[1], 16),\n      g: parseInt(result[2], 16),\n      b: parseInt(result[3], 16)\n    } : null;\n  }\n\n  // RGB 转 HSV\n  private rgbToHsv(r: number, g: number, b: number): { h: number; s: number; v: number } {\n    r = r / 255;\n    g = g / 255;\n    b = b / 255;\n\n    const max = Math.max(r, g, b);\n    const min = Math.min(r, g, b);\n    const diff = max - min;\n\n    let h = 0;\n    if (diff !== 0) {\n      if (max === r) {\n        h = ((g - b) / diff) % 6;\n      } else if (max === g) {\n        h = (b - r) / diff + 2;\n      } else {\n        h = (r - g) / diff + 4;\n      }\n    }\n    h = Math.round(h * 60);\n    if (h < 0) h += 360;\n\n    const s = max === 0 ? 0 : Math.round((diff / max) * 100);\n    const v = Math.round(max * 100);\n\n    return { h, s, v };\n  }\n\n  // HSV 转 RGB\n  private hsvToRgb(h: number, s: number, v: number): { r: number; g: number; b: number } {\n    s = s / 100;\n    v = v / 100;\n\n    const c = v * s;\n    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n    const m = v - c;\n\n    let r = 0, g = 0, b = 0;\n\n    if (h >= 0 && h < 60) {\n      r = c; g = x; b = 0;\n    } else if (h >= 60 && h < 120) {\n      r = x; g = c; b = 0;\n    } else if (h >= 120 && h < 180) {\n      r = 0; g = c; b = x;\n    } else if (h >= 180 && h < 240) {\n      r = 0; g = x; b = c;\n    } else if (h >= 240 && h < 300) {\n      r = x; g = 0; b = c;\n    } else if (h >= 300 && h < 360) {\n      r = c; g = 0; b = x;\n    }\n\n    return {\n      r: Math.round((r + m) * 255),\n      g: Math.round((g + m) * 255),\n      b: Math.round((b + m) * 255)\n    };\n  }\n\n  // HSV 转 Hex\n  private hsvToHex(h: number, s: number, v: number): string {\n    const rgb = this.hsvToRgb(h, s, v);\n    return `#${[rgb.r, rgb.g, rgb.b].map(x => {\n      const hex = x.toString(16);\n      return hex.length === 1 ? '0' + hex : hex;\n    }).join('')}`;\n  }\n\n  // 从颜色值更新 HSV\n  private updateHSVFromColor(color: string) {\n    const rgb = this.hexToRgb(color);\n    if (rgb) {\n      const hsv = this.rgbToHsv(rgb.r, rgb.g, rgb.b);\n      this.hue = hsv.h;\n      this.saturation = hsv.s;\n      this.value = hsv.v;\n    }\n  }\n\n  render() {\n    const rgb = this.hexToRgb(this.currentColor);\n    const predefinedColors = this.predefine || [\n      '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1',\n      '#1e90ff', '#c71585', '#000000', '#ffffff', '#808080',\n    ];\n\n    // 根据当前色相生成饱和度面板的背景色\n    const hueColor = this.hsvToHex(this.hue, 100, 100);\n\n    return (\n      <div\n        class={{\n          'hb-color-picker': true,\n          'hb-color-picker--open': this.isOpen,\n          'hb-color-picker--disabled': this.disabled,\n        }}\n      >\n        <div class=\"hb-color-picker__trigger\" onClick={this.handleTriggerClick}>\n          <div class=\"hb-color-picker__color\" style={{ backgroundColor: this.currentColor }}></div>\n          <span class=\"hb-color-picker__text\">{this.currentColor}</span>\n        </div>\n        {this.isOpen && (\n          <div class=\"hb-color-picker__dropdown\">\n            <div class=\"hb-color-picker__panel\">\n              <div class=\"hb-color-picker__saturation\" onClick={this.handleSaturationClick}>\n                <div class=\"hb-color-picker__saturation-bg\" style={{ backgroundColor: hueColor }}></div>\n                <div class=\"hb-color-picker__saturation-white\"></div>\n                <div class=\"hb-color-picker__saturation-black\"></div>\n                <div\n                  class=\"hb-color-picker__saturation-pointer\"\n                  style={{\n                    left: `${this.saturation}%`,\n                    top: `${100 - this.value}%`,\n                  }}\n                ></div>\n              </div>\n              <div class=\"hb-color-picker__controls\">\n                <div class=\"hb-color-picker__hue\" onClick={this.handleHueClick}>\n                  <div class=\"hb-color-picker__hue-bar\"></div>\n                  <div\n                    class=\"hb-color-picker__hue-pointer\"\n                    style={{\n                      left: `${(this.hue / 360) * 100}%`,\n                    }}\n                  ></div>\n                </div>\n                {this.showAlpha && (\n                  <div class=\"hb-color-picker__alpha\">\n                    <div class=\"hb-color-picker__alpha-bar\" style={{ backgroundColor: this.currentColor }}></div>\n                  </div>\n                )}\n              </div>\n              <div class=\"hb-color-picker__input\">\n                <input\n                  type=\"text\"\n                  class=\"hb-color-picker__input-hex\"\n                  value={this.currentColor}\n                  onInput={this.handleInputChange}\n                />\n                {rgb && (\n                  <div class=\"hb-color-picker__input-rgb\">\n                    <input \n                      type=\"number\" \n                      min=\"0\" \n                      max=\"255\" \n                      value={rgb.r}\n                      onInput={(e) => this.handleRgbInputChange(0, (e.target as HTMLInputElement).value)}\n                    />\n                    <input \n                      type=\"number\" \n                      min=\"0\" \n                      max=\"255\" \n                      value={rgb.g}\n                      onInput={(e) => this.handleRgbInputChange(1, (e.target as HTMLInputElement).value)}\n                    />\n                    <input \n                      type=\"number\" \n                      min=\"0\" \n                      max=\"255\" \n                      value={rgb.b}\n                      onInput={(e) => this.handleRgbInputChange(2, (e.target as HTMLInputElement).value)}\n                    />\n                  </div>\n                )}\n              </div>\n              {this.predefine && this.predefine.length > 0 && (\n                <div class=\"hb-color-picker__predefine\">\n                  {predefinedColors.map((color) => (\n                    <div\n                      class={{\n                        'hb-color-picker__predefine-color': true,\n                        'hb-color-picker__predefine-color--selected': color === this.currentColor,\n                      }}\n                      style={{ backgroundColor: color }}\n                      onClick={() => this.handleColorSelect(color)}\n                    ></div>\n                  ))}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/ColorPicker/color-picker.css

@@ -0,0 +1,203 @@
+:host {
+  display: inline-block;
+  position: relative;
+}
+
+.hb-color-picker {
+  display: inline-block;
+}
+
+.hb-color-picker__trigger {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px;
+  border: 1px solid var(--hb-border-color, #dcdfe6);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.hb-color-picker__trigger:hover:not(.hb-color-picker--disabled) {
+  border-color: var(--hb-color-primary);
+}
+
+.hb-color-picker__color {
+  width: 40px;
+  height: 20px;
+  border-radius: 2px;
+  border: 1px solid var(--hb-border-color-lighter, #e4e7ed);
+}
+
+.hb-color-picker__text {
+  margin-left: 8px;
+  font-size: 14px;
+  color: var(--hb-color-text-regular, #606266);
+}
+
+.hb-color-picker__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+  background-color: var(--hb-color-white, #ffffff);
+  border: 1px solid var(--hb-border-color, #dcdfe6);
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  padding: 12px;
+  min-width: 300px;
+}
+
+.hb-color-picker__saturation {
+  position: relative;
+  width: 100%;
+  height: 180px;
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: crosshair;
+  user-select: none;
+}
+
+.hb-color-picker__saturation-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  /* 背景色会根据当前色相动态设置 */
+}
+
+.hb-color-picker__saturation-white {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+}
+
+.hb-color-picker__saturation-black {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+}
+
+.hb-color-picker__saturation-pointer {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--hb-color-white, #ffffff);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+}
+
+.hb-color-picker__controls {
+  margin-top: 12px;
+}
+
+.hb-color-picker__hue,
+.hb-color-picker__alpha {
+  position: relative;
+  height: 12px;
+  border-radius: 2px;
+  margin-bottom: 8px;
+  cursor: pointer;
+}
+
+.hb-color-picker__hue {
+  position: relative;
+}
+
+.hb-color-picker__hue-bar {
+  height: 100%;
+  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+  border-radius: 2px;
+}
+
+.hb-color-picker__hue-pointer {
+  position: absolute;
+  top: 0;
+  width: 4px;
+  height: 100%;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 2px;
+  transform: translateX(-50%);
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+}
+
+.hb-color-picker__alpha-bar {
+  height: 100%;
+  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
+  background-size: 8px 8px;
+  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
+  border-radius: 2px;
+}
+
+.hb-color-picker__input {
+  margin-top: 12px;
+}
+
+.hb-color-picker__input-hex {
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid var(--hb-border-color, #dcdfe6);
+  border-radius: 4px;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.hb-color-picker__input-rgb {
+  display: flex;
+  gap: 8px;
+}
+
+.hb-color-picker__input-rgb input {
+  flex: 1;
+  padding: 6px 8px;
+  border: 1px solid var(--hb-border-color, #dcdfe6);
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.hb-color-picker__predefine {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--hb-border-color-lighter, #e4e7ed);
+}
+
+.hb-color-picker__predefine-color {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: transform 0.2s;
+}
+
+.hb-color-picker__predefine-color:hover {
+  transform: scale(1.1);
+}
+
+.hb-color-picker__predefine-color--selected {
+  border-color: var(--hb-color-primary);
+  transform: scale(1.1);
+}
+
+.hb-color-picker--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.hb-color-picker--disabled .hb-color-picker__trigger {
+  cursor: not-allowed;
+}
+