huibo-ui 0.3.0 → 0.4.0

package/dist/collection/components/Form/FormItem.js

@@ -19,6 +19,9 @@ export class FormItem {
     size = 'default';
     errors = [];
     isvalidating = false;
+    /** hb-form 在 componentWillLoad 注册的事件监听；FormItem 在 componentDidLoad 派发，
+     *  但 componentWillLoad 早于子组件的 componentDidLoad，因此注册一定先到。
+     *  这里还监听 hbFieldReset，便于 Form.resetFields 主动广播。 */
     componentDidLoad() {
         // 向父级 hb-form 注册
         this.el.dispatchEvent(new CustomEvent('hbFormFieldRegister', {
@@ -29,14 +32,37 @@ export class FormItem {
                 getValue: this.getValue,
             },
             bubbles: true,
+            composed: true, // 穿越 Shadow DOM 边界（FormItem 自身 shadow -> Form host）
         }));
+        // 子控件值变化时清错（对齐 antd：合法输入即移除错误提示）
+        this.el.addEventListener('hbChange', this.handleChildChange);
     }
+    disconnectedCallback() {
+        this.el.removeEventListener('hbChange', this.handleChildChange);
+    }
+    /** 子控件 hbChange 时，若当前有错误则重新校验以尽早清除错误提示 */
+    handleChildChange = () => {
+        if (this.errors.length > 0) {
+            void this.validate();
+        }
+    };
     get formRules() {
         // 合并 prop 对应的 form rules 和自身 rules
         const form = this.el.closest('hb-form');
         const formLevelRules = form ? form.rules?.[this.prop] || [] : [];
         return [...formLevelRules, ...this.rules];
     }
+    /** 是否渲染必填星号：显式 required 或任一规则带 required（对齐 antd 自动推断） */
+    get isRequired() {
+        if (this.required)
+            return true;
+        return this.formRules.some(r => r && r.required);
+    }
+    /** 继承父 hb-form 的 labelPosition（FormItem 自身无此 prop，避免与 Form 冲突时以 Form 为准） */
+    get resolvedLabelPosition() {
+        const form = this.el.closest('hb-form');
+        return (form && form.labelPosition) || 'right';
+    }
     /**
      * 验证此字段
      */
@@ -50,13 +76,32 @@ export class FormItem {
         this.isvalidating = true;
         const errors = [];
         for (const rule of rules) {
-            if (rule.required && (!value && value !== 0)) {
+            // 必填校验：空字符串 / null / undefined / 空数组均视为"未填"
+            const isEmpty = value === undefined ||
+                value === null ||
+                value === '' ||
+                (Array.isArray(value) && value.length === 0);
+            if (rule.required && isEmpty) {
                 errors.push(rule.message || `${this.label || this.prop}不能为空`);
                 continue;
             }
-            if (rule.pattern && !rule.pattern.test(value)) {
-                errors.push(rule.message || `${this.label || this.prop}格式不正确`);
+            // 非必填且为空时，跳过后续格式校验（与 antd 行为一致）
+            if (isEmpty)
                 continue;
+            if (rule.pattern) {
+                const ok = typeof rule.pattern === 'string'
+                    ? new RegExp(rule.pattern).test(String(value))
+                    : rule.pattern.test(String(value));
+                if (!ok) {
+                    errors.push(rule.message || `${this.label || this.prop}格式不正确`);
+                    continue;
+                }
+            }
+            if (rule.type === 'email') {
+                if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value))) {
+                    errors.push(rule.message || `${this.label || this.prop}格式不正确`);
+                    continue;
+                }
             }
             if (rule.min !== undefined && typeof value === 'string' && value.length < rule.min) {
                 errors.push(rule.message || `${this.label || this.prop}最少${rule.min}个字符`);
@@ -83,19 +128,25 @@ export class FormItem {
         this.errors = [];
     };
     getValue = () => {
-        // 尝试从子元素中获取值
-        const input = this.el.querySelector('hb-input, hb-select, hb-cascader, hb-date-picker, hb-input-number, hb-textarea, hb-checkbox, hb-radio, hb-switch');
+        // 覆盖所有表单控件：input/select/cascader/date 系列/数字/checkbox/radio/switch/slider/color-picker/rate/upload
+        const input = this.el.querySelector('hb-input, hb-select, hb-cascader, hb-date-picker, hb-date-time-picker, hb-date-range-picker, ' +
+            'hb-input-number, hb-textarea, hb-checkbox, hb-checkbox-group, hb-radio-group, hb-switch, ' +
+            'hb-slider, hb-color-picker, hb-rate, hb-time-picker, hb-time-select');
         if (input) {
             return input.modelValue;
         }
         return undefined;
     };
     render() {
-        return (h("div", { key: '9ea6c55b9159936a572eef459adea96234fbe2fa', class: {
+        const labelTop = this.resolvedLabelPosition === 'top';
+        return (h("div", { key: '5819f09264a5823f5130f1ce3ff34915da8c7e41', class: {
                 'hb-form-item': true,
                 'hb-form-item--error': this.errors.length > 0,
                 'hb-form-item--validating': this.isvalidating,
-            } }, this.label && (h("label", { key: '3f21b8777f7cddba09e797a706edfb9539fd2aa6', class: "hb-form-item__label", style: this.labelWidth ? { width: this.labelWidth } : undefined }, this.required && h("span", { key: 'fd89829e1469ff625d30e3b38624e9fc2a9566b4', class: "hb-form-item__required" }, "*"), this.label)), h("div", { key: '83ac6765623cf8c0c897ab945abdb0f1f0c3cde2', class: "hb-form-item__content" }, h("slot", { key: '83f01e59dc6f984141ff26dc58ebf72ff77a4fe1' }), this.errors.length > 0 && (h("div", { key: '17d938b71257dedb8154b4f019127f03b43f1910', class: "hb-form-item__error" }, this.errors[0])))));
+                'hb-form-item--required': this.isRequired,
+                'hb-form-item--label-top': labelTop,
+                'hb-form-item--label-left': this.resolvedLabelPosition === 'left',
+            } }, this.label && (h("label", { key: '0a1881ea32b5a7a403e9fdfbcc886bdbc682abfa', class: "hb-form-item__label", style: this.labelWidth ? { width: this.labelWidth } : undefined, title: this.label }, this.isRequired && (h("span", { key: '46543df749b05021d867904d968dc60bf062ee41', class: "hb-form-item__required", "aria-hidden": "true" }, "*")), this.label)), h("div", { key: '5ce3712dc8ebcb70cb3688a4546f0dd1ee3e5cd4', class: "hb-form-item__content" }, h("slot", { key: '26e5c4a39560aca1796545b2f3679b042ef7d771' }), this.errors.length > 0 && (h("div", { key: '79e79d4bc52fe02c0735333cfbbb9b912a206c77', class: "hb-form-item__error", role: "alert" }, this.errors[0])))));
     }
     static get is() { return "hb-form-item"; }
     static get encapsulation() { return "shadow"; }
@@ -249,7 +300,7 @@ export class FormItem {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "async (): Promise<string[]> => {\n    const value = this.getValue();\n    const rules = this.formRules;\n\n    if (rules.length === 0) {\n      this.errors = [];\n      return [];\n    }\n\n    this.isvalidating = true;\n    const errors: string[] = [];\n\n    for (const rule of rules) {\n      if (rule.required && (!value && value !== 0)) {\n        errors.push(rule.message || `${this.label || this.prop}\u4E0D\u80FD\u4E3A\u7A7A`);\n        continue;\n      }\n      if (rule.pattern && !rule.pattern.test(value)) {\n        errors.push(rule.message || `${this.label || this.prop}\u683C\u5F0F\u4E0D\u6B63\u786E`);\n        continue;\n      }\n      if (rule.min !== undefined && typeof value === 'string' && value.length < rule.min) {\n        errors.push(rule.message || `${this.label || this.prop}\u6700\u5C11${rule.min}\u4E2A\u5B57\u7B26`);\n        continue;\n      }\n      if (rule.max !== undefined && typeof value === 'string' && value.length > rule.max) {\n        errors.push(rule.message || `${this.label || this.prop}\u6700\u591A${rule.max}\u4E2A\u5B57\u7B26`);\n        continue;\n      }\n      if (rule.validator) {\n        try {\n          await rule.validator(value, this.formRules);\n        } catch (err: any) {\n          errors.push(err.message || rule.message || `${this.label || this.prop}\u9A8C\u8BC1\u5931\u8D25`);\n        }\n      }\n    }\n\n    this.errors = errors;\n    this.isvalidating = false;\n    return errors;\n  }"
+                "defaultValue": "async (): Promise<string[]> => {\n    const value = this.getValue();\n    const rules = this.formRules;\n\n    if (rules.length === 0) {\n      this.errors = [];\n      return [];\n    }\n\n    this.isvalidating = true;\n    const errors: string[] = [];\n\n    for (const rule of rules) {\n      // \u5FC5\u586B\u6821\u9A8C\uFF1A\u7A7A\u5B57\u7B26\u4E32 / null / undefined / \u7A7A\u6570\u7EC4\u5747\u89C6\u4E3A\"\u672A\u586B\"\n      const isEmpty =\n        value === undefined ||\n        value === null ||\n        value === '' ||\n        (Array.isArray(value) && value.length === 0);\n      if (rule.required && isEmpty) {\n        errors.push(rule.message || `${this.label || this.prop}\u4E0D\u80FD\u4E3A\u7A7A`);\n        continue;\n      }\n      // \u975E\u5FC5\u586B\u4E14\u4E3A\u7A7A\u65F6\uFF0C\u8DF3\u8FC7\u540E\u7EED\u683C\u5F0F\u6821\u9A8C\uFF08\u4E0E antd \u884C\u4E3A\u4E00\u81F4\uFF09\n      if (isEmpty) continue;\n      if (rule.pattern) {\n        const ok = typeof rule.pattern === 'string'\n          ? new RegExp(rule.pattern).test(String(value))\n          : rule.pattern.test(String(value));\n        if (!ok) {\n          errors.push(rule.message || `${this.label || this.prop}\u683C\u5F0F\u4E0D\u6B63\u786E`);\n          continue;\n        }\n      }\n      if (rule.type === 'email') {\n        if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(String(value))) {\n          errors.push(rule.message || `${this.label || this.prop}\u683C\u5F0F\u4E0D\u6B63\u786E`);\n          continue;\n        }\n      }\n      if (rule.min !== undefined && typeof value === 'string' && value.length < rule.min) {\n        errors.push(rule.message || `${this.label || this.prop}\u6700\u5C11${rule.min}\u4E2A\u5B57\u7B26`);\n        continue;\n      }\n      if (rule.max !== undefined && typeof value === 'string' && value.length > rule.max) {\n        errors.push(rule.message || `${this.label || this.prop}\u6700\u591A${rule.max}\u4E2A\u5B57\u7B26`);\n        continue;\n      }\n      if (rule.validator) {\n        try {\n          await rule.validator(value, this.formRules);\n        } catch (err: any) {\n          errors.push(err.message || rule.message || `${this.label || this.prop}\u9A8C\u8BC1\u5931\u8D25`);\n        }\n      }\n    }\n\n    this.errors = errors;\n    this.isvalidating = false;\n    return errors;\n  }"
             },
             "resetValue": {
                 "type": "unknown",
@@ -285,7 +336,7 @@ export class FormItem {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "(): any => {\n    // \u5C1D\u8BD5\u4ECE\u5B50\u5143\u7D20\u4E2D\u83B7\u53D6\u503C\n    const input = this.el.querySelector('hb-input, hb-select, hb-cascader, hb-date-picker, hb-input-number, hb-textarea, hb-checkbox, hb-radio, hb-switch');\n    if (input) {\n      return (input as any).modelValue;\n    }\n    return undefined;\n  }"
+                "defaultValue": "(): any => {\n    // \u8986\u76D6\u6240\u6709\u8868\u5355\u63A7\u4EF6\uFF1Ainput/select/cascader/date \u7CFB\u5217/\u6570\u5B57/checkbox/radio/switch/slider/color-picker/rate/upload\n    const input = this.el.querySelector(\n      'hb-input, hb-select, hb-cascader, hb-date-picker, hb-date-time-picker, hb-date-range-picker, ' +\n      'hb-input-number, hb-textarea, hb-checkbox, hb-checkbox-group, hb-radio-group, hb-switch, ' +\n      'hb-slider, hb-color-picker, hb-rate, hb-time-picker, hb-time-select',\n    );\n    if (input) {\n      return (input as any).modelValue;\n    }\n    return undefined;\n  }"
             }
         };
     }

package/dist/collection/components/Form/FormItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormItem.js","sourceRoot":"","sources":["../../../src/components/Form/FormItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\n\n/**\n * FormItem 表单项组件\n * 表单中的每一项\n */\n@Component({\n  tag: 'hb-form-item',\n  styleUrl: 'form-item.css',\n  shadow: true,\n})\nexport class FormItem {\n  @Element() el: HTMLElement;\n\n  /** 字段名 */\n  @Prop() prop: string = '';\n\n  /** 标签文本 */\n  @Prop() label: string = '';\n\n  /** 标签宽度 */\n  @Prop() labelWidth?: string;\n\n  /** 是否必填 */\n  @Prop() required: boolean = false;\n\n  /** 该表单项的验证规则 */\n  @Prop() rules: any[] = [];\n\n  /** 表单尺寸 */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  @State() errors: string[] = [];\n  @State() isvalidating: boolean = false;\n\n  componentDidLoad() {\n    // 向父级 hb-form 注册\n    this.el.dispatchEvent(new CustomEvent('hbFormFieldRegister', {\n      detail: {\n        prop: this.prop,\n        validate: this.validate,\n        resetValue: this.resetValue,\n        getValue: this.getValue,\n      },\n      bubbles: true,\n    }));\n  }\n\n  private get formRules(): any[] {\n    // 合并 prop 对应的 form rules 和自身 rules\n    const form = this.el.closest('hb-form');\n    const formLevelRules = form ? (form as any).rules?.[this.prop] || [] : [];\n    return [...formLevelRules, ...this.rules];\n  }\n\n  /**\n   * 验证此字段\n   */\n  @Prop() validate = async (): Promise<string[]> => {\n    const value = this.getValue();\n    const rules = this.formRules;\n\n    if (rules.length === 0) {\n      this.errors = [];\n      return [];\n    }\n\n    this.isvalidating = true;\n    const errors: string[] = [];\n\n    for (const rule of rules) {\n      if (rule.required && (!value && value !== 0)) {\n        errors.push(rule.message || `${this.label || this.prop}不能为空`);\n        continue;\n      }\n      if (rule.pattern && !rule.pattern.test(value)) {\n        errors.push(rule.message || `${this.label || this.prop}格式不正确`);\n        continue;\n      }\n      if (rule.min !== undefined && typeof value === 'string' && value.length < rule.min) {\n        errors.push(rule.message || `${this.label || this.prop}最少${rule.min}个字符`);\n        continue;\n      }\n      if (rule.max !== undefined && typeof value === 'string' && value.length > rule.max) {\n        errors.push(rule.message || `${this.label || this.prop}最多${rule.max}个字符`);\n        continue;\n      }\n      if (rule.validator) {\n        try {\n          await rule.validator(value, this.formRules);\n        } catch (err: any) {\n          errors.push(err.message || rule.message || `${this.label || this.prop}验证失败`);\n        }\n      }\n    }\n\n    this.errors = errors;\n    this.isvalidating = false;\n    return errors;\n  };\n\n  @Prop() resetValue = () => {\n    this.errors = [];\n  };\n\n  @Prop() getValue = (): any => {\n    // 尝试从子元素中获取值\n    const input = this.el.querySelector('hb-input, hb-select, hb-cascader, hb-date-picker, hb-input-number, hb-textarea, hb-checkbox, hb-radio, hb-switch');\n    if (input) {\n      return (input as any).modelValue;\n    }\n    return undefined;\n  };\n\n  render() {\n    return (\n      <div\n        class={{\n          'hb-form-item': true,\n          'hb-form-item--error': this.errors.length > 0,\n          'hb-form-item--validating': this.isvalidating,\n        }}\n      >\n        {this.label && (\n          <label\n            class=\"hb-form-item__label\"\n            style={this.labelWidth ? { width: this.labelWidth } : undefined}\n          >\n            {this.required && <span class=\"hb-form-item__required\">*</span>}\n            {this.label}\n          </label>\n        )}\n        <div class=\"hb-form-item__content\">\n          <slot />\n          {this.errors.length > 0 && (\n            <div class=\"hb-form-item__error\">{this.errors[0]}</div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"FormItem.js","sourceRoot":"","sources":["../../../src/components/Form/FormItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAEnE;;;GAGG;AAMH,MAAM,OAAO,QAAQ;IACR,EAAE,CAAc;IAE3B,UAAU;IACF,IAAI,GAAW,EAAE,CAAC;IAE1B,WAAW;IACH,KAAK,GAAW,EAAE,CAAC;IAE3B,WAAW;IACH,UAAU,CAAU;IAE5B,WAAW;IACH,QAAQ,GAAY,KAAK,CAAC;IAElC,gBAAgB;IACR,KAAK,GAAU,EAAE,CAAC;IAE1B,WAAW;IACH,IAAI,GAAkC,SAAS,CAAC;IAE/C,MAAM,GAAa,EAAE,CAAC;IACtB,YAAY,GAAY,KAAK,CAAC;IAEvC;;uDAEmD;IAEnD,gBAAgB;QACd,iBAAiB;QACjB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,qBAAqB,EAAE;YAC3D,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,UAAU,EAAE,IAAI,CAAC,UAAU;gBAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,EAAE,oDAAoD;SACrE,CAAC,CAAC,CAAC;QAEJ,iCAAiC;QACjC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC/D,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAClE,CAAC;IAED,0CAA0C;IAClC,iBAAiB,GAAG,GAAG,EAAE;QAC/B,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC3B,KAAK,IAAI,CAAC,QAAQ,EAAE,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IAEF,IAAY,SAAS;QACnB,mCAAmC;QACnC,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QACxC,MAAM,cAAc,GAAG,IAAI,CAAC,CAAC,CAAE,IAAY,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC1E,OAAO,CAAC,GAAG,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAED,yDAAyD;IACzD,IAAY,UAAU;QACpB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC;QAC/B,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnD,CAAC;IAED,4EAA4E;IAC5E,IAAY,qBAAqB;QAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAQ,CAAC;QAC/C,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,OAAO,CAAC;IACjD,CAAC;IAED;;OAEG;IACK,QAAQ,GAAG,KAAK,IAAuB,EAAE;QAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;QAE7B,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACvB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;YACjB,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,MAAM,MAAM,GAAa,EAAE,CAAC;QAE5B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACzB,4CAA4C;YAC5C,MAAM,OAAO,GACX,KAAK,KAAK,SAAS;gBACnB,KAAK,KAAK,IAAI;gBACd,KAAK,KAAK,EAAE;gBACZ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC;YAC/C,IAAI,IAAI,CAAC,QAAQ,IAAI,OAAO,EAAE,CAAC;gBAC7B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,MAAM,CAAC,CAAC;gBAC9D,SAAS;YACX,CAAC;YACD,gCAAgC;YAChC,IAAI,OAAO;gBAAE,SAAS;YACtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,MAAM,EAAE,GAAG,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ;oBACzC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBAC9C,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;gBACrC,IAAI,CAAC,EAAE,EAAE,CAAC;oBACR,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC;oBAC/D,SAAS;gBACX,CAAC;YACH,CAAC;YACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC1B,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;oBACtD,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC;oBAC/D,SAAS;gBACX,CAAC;YACH,CAAC;YACD,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;gBACnF,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC;gBAC1E,SAAS;YACX,CAAC;YACD,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;gBACnF,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC;gBAC1E,SAAS;YACX,CAAC;YACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,IAAI,CAAC;oBACH,MAAM,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;gBAC9C,CAAC;gBAAC,OAAO,GAAQ,EAAE,CAAC;oBAClB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,MAAM,CAAC,CAAC;gBAC/E,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;IAEM,UAAU,GAAG,GAAG,EAAE;QACxB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;IACnB,CAAC,CAAC;IAEM,QAAQ,GAAG,GAAQ,EAAE;QAC3B,kGAAkG;QAClG,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CACjC,+FAA+F;YAC/F,2FAA2F;YAC3F,qEAAqE,CACtE,CAAC;QACF,IAAI,KAAK,EAAE,CAAC;YACV,OAAQ,KAAa,CAAC,UAAU,CAAC;QACnC,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,KAAK,KAAK,CAAC;QACtD,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,qBAAqB,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;gBAC7C,0BAA0B,EAAE,IAAI,CAAC,YAAY;gBAC7C,wBAAwB,EAAE,IAAI,CAAC,UAAU;gBACzC,yBAAyB,EAAE,QAAQ;gBACnC,0BAA0B,EAAE,IAAI,CAAC,qBAAqB,KAAK,MAAM;aAClE;YAEA,IAAI,CAAC,KAAK,IAAI,CACb,8DACE,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,SAAS,EAC/D,KAAK,EAAE,IAAI,CAAC,KAAK;gBAEhB,IAAI,CAAC,UAAU,IAAI,CAClB,6DAAM,KAAK,EAAC,wBAAwB,iBAAa,MAAM,QAAS,CACjE;gBACA,IAAI,CAAC,KAAK,CACL,CACT;YACD,4DAAK,KAAK,EAAC,uBAAuB;gBAChC,8DAAQ;gBACP,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,4DAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAO,CACrE,CACG,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\n\n/**\n * FormItem 表单项组件\n * 表单中的每一项\n */\n@Component({\n  tag: 'hb-form-item',\n  styleUrl: 'form-item.css',\n  shadow: true,\n})\nexport class FormItem {\n  @Element() el: HTMLElement;\n\n  /** 字段名 */\n  @Prop() prop: string = '';\n\n  /** 标签文本 */\n  @Prop() label: string = '';\n\n  /** 标签宽度 */\n  @Prop() labelWidth?: string;\n\n  /** 是否必填 */\n  @Prop() required: boolean = false;\n\n  /** 该表单项的验证规则 */\n  @Prop() rules: any[] = [];\n\n  /** 表单尺寸 */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  @State() errors: string[] = [];\n  @State() isvalidating: boolean = false;\n\n  /** hb-form 在 componentWillLoad 注册的事件监听；FormItem 在 componentDidLoad 派发，\n   *  但 componentWillLoad 早于子组件的 componentDidLoad，因此注册一定先到。\n   *  这里还监听 hbFieldReset，便于 Form.resetFields 主动广播。 */\n\n  componentDidLoad() {\n    // 向父级 hb-form 注册\n    this.el.dispatchEvent(new CustomEvent('hbFormFieldRegister', {\n      detail: {\n        prop: this.prop,\n        validate: this.validate,\n        resetValue: this.resetValue,\n        getValue: this.getValue,\n      },\n      bubbles: true,\n      composed: true, // 穿越 Shadow DOM 边界（FormItem 自身 shadow -> Form host）\n    }));\n\n    // 子控件值变化时清错（对齐 antd：合法输入即移除错误提示）\n    this.el.addEventListener('hbChange', this.handleChildChange);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('hbChange', this.handleChildChange);\n  }\n\n  /** 子控件 hbChange 时，若当前有错误则重新校验以尽早清除错误提示 */\n  private handleChildChange = () => {\n    if (this.errors.length > 0) {\n      void this.validate();\n    }\n  };\n\n  private get formRules(): any[] {\n    // 合并 prop 对应的 form rules 和自身 rules\n    const form = this.el.closest('hb-form');\n    const formLevelRules = form ? (form as any).rules?.[this.prop] || [] : [];\n    return [...formLevelRules, ...this.rules];\n  }\n\n  /** 是否渲染必填星号：显式 required 或任一规则带 required（对齐 antd 自动推断） */\n  private get isRequired(): boolean {\n    if (this.required) return true;\n    return this.formRules.some(r => r && r.required);\n  }\n\n  /** 继承父 hb-form 的 labelPosition（FormItem 自身无此 prop，避免与 Form 冲突时以 Form 为准） */\n  private get resolvedLabelPosition(): 'left' | 'right' | 'top' {\n    const form = this.el.closest('hb-form') as any;\n    return (form && form.labelPosition) || 'right';\n  }\n\n  /**\n   * 验证此字段\n   */\n  @Prop() validate = async (): Promise<string[]> => {\n    const value = this.getValue();\n    const rules = this.formRules;\n\n    if (rules.length === 0) {\n      this.errors = [];\n      return [];\n    }\n\n    this.isvalidating = true;\n    const errors: string[] = [];\n\n    for (const rule of rules) {\n      // 必填校验：空字符串 / null / undefined / 空数组均视为\"未填\"\n      const isEmpty =\n        value === undefined ||\n        value === null ||\n        value === '' ||\n        (Array.isArray(value) && value.length === 0);\n      if (rule.required && isEmpty) {\n        errors.push(rule.message || `${this.label || this.prop}不能为空`);\n        continue;\n      }\n      // 非必填且为空时，跳过后续格式校验（与 antd 行为一致）\n      if (isEmpty) continue;\n      if (rule.pattern) {\n        const ok = typeof rule.pattern === 'string'\n          ? new RegExp(rule.pattern).test(String(value))\n          : rule.pattern.test(String(value));\n        if (!ok) {\n          errors.push(rule.message || `${this.label || this.prop}格式不正确`);\n          continue;\n        }\n      }\n      if (rule.type === 'email') {\n        if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(String(value))) {\n          errors.push(rule.message || `${this.label || this.prop}格式不正确`);\n          continue;\n        }\n      }\n      if (rule.min !== undefined && typeof value === 'string' && value.length < rule.min) {\n        errors.push(rule.message || `${this.label || this.prop}最少${rule.min}个字符`);\n        continue;\n      }\n      if (rule.max !== undefined && typeof value === 'string' && value.length > rule.max) {\n        errors.push(rule.message || `${this.label || this.prop}最多${rule.max}个字符`);\n        continue;\n      }\n      if (rule.validator) {\n        try {\n          await rule.validator(value, this.formRules);\n        } catch (err: any) {\n          errors.push(err.message || rule.message || `${this.label || this.prop}验证失败`);\n        }\n      }\n    }\n\n    this.errors = errors;\n    this.isvalidating = false;\n    return errors;\n  };\n\n  @Prop() resetValue = () => {\n    this.errors = [];\n  };\n\n  @Prop() getValue = (): any => {\n    // 覆盖所有表单控件：input/select/cascader/date 系列/数字/checkbox/radio/switch/slider/color-picker/rate/upload\n    const input = this.el.querySelector(\n      'hb-input, hb-select, hb-cascader, hb-date-picker, hb-date-time-picker, hb-date-range-picker, ' +\n      'hb-input-number, hb-textarea, hb-checkbox, hb-checkbox-group, hb-radio-group, hb-switch, ' +\n      'hb-slider, hb-color-picker, hb-rate, hb-time-picker, hb-time-select',\n    );\n    if (input) {\n      return (input as any).modelValue;\n    }\n    return undefined;\n  };\n\n  render() {\n    const labelTop = this.resolvedLabelPosition === 'top';\n    return (\n      <div\n        class={{\n          'hb-form-item': true,\n          'hb-form-item--error': this.errors.length > 0,\n          'hb-form-item--validating': this.isvalidating,\n          'hb-form-item--required': this.isRequired,\n          'hb-form-item--label-top': labelTop,\n          'hb-form-item--label-left': this.resolvedLabelPosition === 'left',\n        }}\n      >\n        {this.label && (\n          <label\n            class=\"hb-form-item__label\"\n            style={this.labelWidth ? { width: this.labelWidth } : undefined}\n            title={this.label}\n          >\n            {this.isRequired && (\n              <span class=\"hb-form-item__required\" aria-hidden=\"true\">*</span>\n            )}\n            {this.label}\n          </label>\n        )}\n        <div class=\"hb-form-item__content\">\n          <slot />\n          {this.errors.length > 0 && (\n            <div class=\"hb-form-item__error\" role=\"alert\">{this.errors[0]}</div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Form/form-item.css

@@ -8,32 +8,59 @@
   gap: var(--hb-spacing-sm);
 }
 
+/* label 位置：顶部（对齐 antd label-position="top"）——
+   需要 Form 通过 class 下发，但 FormItem 在独立使用时也支持自身包装。
+   这里用 :host([data-label-position="top"]) 兜底，Form 可通过 setting attribute 生效。 */
+:host([data-label-top]) .hb-form-item,
+.hb-form-item--label-top {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--hb-spacing-xs);
+}
+
 .hb-form-item__label {
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
-  height: var(--hb-size-default);
-  font-size: var(--hb-font-size-sm);
+  height: var(--hb-size-default, 32px);
+  font-size: var(--hb-font-size-sm, 14px);
   color: var(--hb-color-text);
   white-space: nowrap;
   flex-shrink: 0;
 }
 
+/* label-position=top 时标签左对齐 */
+:host([data-label-top]) .hb-form-item__label,
+.hb-form-item--label-top .hb-form-item__label {
+  justify-content: flex-start;
+  height: auto;
+  padding-bottom: var(--hb-spacing-xxs, 2px);
+}
+
+/* label-position=left 时标签左对齐 */
+.hb-form-item--label-left .hb-form-item__label {
+  justify-content: flex-start;
+}
+
 .hb-form-item__required {
   color: var(--hb-color-danger);
   margin-right: 4px;
+  font-size: var(--hb-font-size-sm, 14px);
+  font-family: SimSun, sans-serif;
 }
 
 .hb-form-item__content {
   flex: 1;
   position: relative;
+  min-width: 0;
 }
 
 .hb-form-item__error {
-  font-size: var(--hb-font-size-xs);
+  font-size: var(--hb-font-size-xs, 12px);
   color: var(--hb-color-danger);
   margin-top: 4px;
-  line-height: 1;
+  line-height: 1.5;
+  min-height: 0;
   animation: hb-form-error-fade-in 0.2s ease-out;
 }
 
@@ -41,3 +68,21 @@
   from { opacity: 0; transform: translateY(-4px); }
   to   { opacity: 1; transform: translateY(0); }
 }
+
+/* ============================================================
+ * 响应式（移动端）：小屏强制 label 顶部布局，
+ * 避免标签列在窄屏被挤压。覆盖 hb-form-item--label-left/right。
+ * ============================================================ */
+@media (max-width: 575.98px) {
+  .hb-form-item {
+    flex-direction: column !important;
+    align-items: stretch !important;
+    gap: var(--hb-spacing-xs) !important;
+  }
+
+  .hb-form-item__label {
+    justify-content: flex-start !important;
+    height: auto !important;
+    padding-bottom: var(--hb-spacing-xxs, 2px) !important;
+  }
+}

package/dist/collection/components/Form/form.css

@@ -12,4 +12,5 @@
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--hb-spacing-sm) var(--hb-spacing-lg);
+  align-items: flex-start;
 }

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

@@ -14,7 +14,7 @@ export class Image {
     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" })))));
+        return (h("div", { key: 'ba3419b5ff3facd429a8f29451be12982c602143', 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: '327219e256924391b44f02d39f5d7000161b1fb9', class: "hb-image__preview", onClick: () => { this.previewVisible = false; } }, h("img", { key: '3d1cb33434662932aff4c5fd7ffde8477616ff9a', src: this.src, alt: this.alt, class: "hb-image__preview-img" })))));
     }
     static get is() { return "hb-image"; }
     static get encapsulation() { return "shadow"; }

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

@@ -129,16 +129,20 @@ export class ImagePreview {
     handleRotateRight = () => {
         this.rotate = this.rotate + 90;
     };
-    /** 滚轮缩放 */
+    /**
+     * 滚轮缩放（平滑 + 像素级响应）：
+     * 按 deltaY 的绝对值映射缩放因子（小滚幅小步、大滚幅大步），
+     * 并夹取到 [minZoom, maxZoom]，避免抖动与越界。
+     */
     handleWheel = (e) => {
-        // TODO: 平滑缩放 + 图片中心锚点；当前实现为基础步长缩放
         e.preventDefault();
-        if (e.deltaY < 0) {
-            this.zoomIn();
-        }
-        else {
-            this.zoomOut();
-        }
+        // 把 deltaY 映射成指数缩放系数：wheel 越快缩放越激进，但单次不超 zoomStep*2
+        const dir = e.deltaY < 0 ? 1 : -1;
+        const intensity = Math.min(Math.abs(e.deltaY) / 100, 2); // 0~2
+        const factor = 1 + dir * this.zoomStep * Math.max(1, intensity);
+        const next = Math.max(this.minZoom, Math.min(this.zoom * factor, this.maxZoom));
+        // 平滑：小数位保留两位，避免浮点累积误差
+        this.zoom = Math.round(next * 100) / 100;
     };
     /** 点击遮罩空白处关闭 */
     handleOverlayClick = (e) => {

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

@@ -1 +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"]}
+{"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   * 滚轮缩放（平滑 + 像素级响应）：\n   * 按 deltaY 的绝对值映射缩放因子（小滚幅小步、大滚幅大步），\n   * 并夹取到 [minZoom, maxZoom]，避免抖动与越界。\n   */\n  private handleWheel = (e: WheelEvent) => {\n    e.preventDefault();\n    // 把 deltaY 映射成指数缩放系数：wheel 越快缩放越激进，但单次不超 zoomStep*2\n    const dir = e.deltaY < 0 ? 1 : -1;\n    const intensity = Math.min(Math.abs(e.deltaY) / 100, 2); // 0~2\n    const factor = 1 + dir * this.zoomStep * Math.max(1, intensity);\n    const next = Math.max(this.minZoom, Math.min(this.zoom * factor, this.maxZoom));\n    // 平滑：小数位保留两位，避免浮点累积误差\n    this.zoom = Math.round(next * 100) / 100;\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/Input/Input.js

@@ -119,10 +119,13 @@ export class Input {
     handleValueChange() {
         this.inputValue = this.modelValue;
         this.updateClearVisible();
+        // textarea autosize：外部改值也要重算高度
+        this.resizeTextarea();
     }
     componentDidLoad() {
         this.inputValue = this.modelValue;
         this.updateClearVisible();
+        this.resizeTextarea();
     }
     updateClearVisible() {
         this.showClear = isClearVisible({
@@ -132,12 +135,45 @@ export class Input {
             hasValue: hasInputValue(this.inputValue),
         });
     }
+    /**
+     * textarea 自适应高度（autosize）。
+     * - autosize=false 或非 textarea：跳过。
+     * - autosize=true：按内容自适应。
+     * - autosize={minRows,maxRows}：在最小/最大行数间夹取。
+     * 算法：先把 height 置 auto 让浏览器按内容重排，再读 scrollHeight，
+     *      减去 padding 后按行高换算成行数，最后按 min/max 夹取并写回 height。
+     */
+    resizeTextarea() {
+        if (this.type !== 'textarea' || !this.autosize)
+            return;
+        const ta = this.inputRef;
+        if (!ta)
+            return;
+        // 行高：优先取计算样式，兜底 22px
+        const computed = typeof window !== 'undefined' ? window.getComputedStyle(ta) : null;
+        const lineHeight = computed && parseFloat(computed.lineHeight) ? parseFloat(computed.lineHeight) : 22;
+        const paddingTop = computed ? parseFloat(computed.paddingTop) || 0 : 0;
+        const paddingBottom = computed ? parseFloat(computed.paddingBottom) || 0 : 0;
+        const opts = typeof this.autosize === 'object' ? this.autosize : {};
+        const minRows = opts.minRows ?? 1;
+        const maxRows = opts.maxRows ?? Infinity;
+        const minH = minRows * lineHeight + paddingTop + paddingBottom;
+        const maxH = maxRows === Infinity ? Infinity : maxRows * lineHeight + paddingTop + paddingBottom;
+        // 先 reset 高度以读取真实内容高度
+        ta.style.height = 'auto';
+        const scrollH = ta.scrollHeight;
+        const clamped = Math.max(minH, Math.min(scrollH, maxH === Infinity ? scrollH : maxH));
+        ta.style.height = `${clamped}px`;
+        // overflow：能滚动时才显示滚动条
+        ta.style.overflowY = scrollH > clamped ? 'auto' : 'hidden';
+    }
     handleInput = (e) => {
         const target = e.target;
         this.inputValue = target.value;
         this.modelValue = target.value;
         this.updateClearVisible();
         this.hbInput.emit(target.value);
+        this.resizeTextarea();
     };
     handleChange = (e) => {
         const target = e.target;
@@ -176,11 +212,11 @@ export class Input {
     render() {
         const isTextarea = this.type === 'textarea';
         const InputTag = isTextarea ? 'textarea' : 'input';
-        return (h("div", { key: '22b51bd1c9e0c3086ed167eea57f3b5818685785', class: {
+        return (h("div", { key: '200ae1b7d9257131fa15c06e950962559eaf6509', class: {
                 ...sizeClassMap('hb-input', this.size),
                 'hb-input--disabled': this.disabled,
                 'hb-input--focused': this.isFocused,
-            } }, this.prefixIcon && (h("span", { key: 'ef3b02d947c45ac282814a0e2e4909f8473469eb', class: "hb-input__prefix" }, h("i", { key: '88f95312bf9aa489d5d27a1f701b2eadc794d7cf', class: this.prefixIcon }))), h(InputTag, { key: 'fe5de1f3dcf5441aebb5bcc943c64d59221211d7', ref: (el) => (this.inputRef = el), type: isTextarea ? undefined : this.getInputType(), id: this.inputId, name: this.name, class: "hb-input__inner", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: this.readonly, autocomplete: this.autocomplete, autofocus: this.autofocus, maxlength: this.maxlength, minlength: this.minlength, rows: isTextarea ? this.rows : undefined, style: isTextarea && this.resize ? { resize: this.resize } : undefined, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }), (this.showClear || this.suffixIcon || (this.type === 'password' && this.showPassword)) && (h("span", { key: 'db106e66989483c48171aad758cd5a443ef7670a', class: "hb-input__suffix" }, this.showClear && (h("span", { key: '3fa676f9860aa3018247c9d61bad432afdea4345', class: "hb-input__suffix-inner hb-input__clear", onClick: this.handleClear }, "\u00D7")), this.type === 'password' && this.showPassword && (h("span", { key: '8911301b65aa3435f7f3b933b9b8de1b055c266e', class: "hb-input__suffix-inner hb-input__password", onClick: this.togglePasswordVisible }, this.passwordVisible ? '👁️' : '👁️‍🗨️')), this.suffixIcon && (h("span", { key: '14fa885ec429419525ea5cd550fc7d9cec9f3ee4', class: "hb-input__suffix-inner" }, h("i", { key: '36995c1f4e5d2c258170e7ad8a012e586d905e62', class: this.suffixIcon }))))), this.showWordLimit && this.maxlength && (h("span", { key: '383d7d25fbbb77dad3df3ebbbf4e0b1fc504a4b4', class: "hb-input__count" }, h("span", { key: '564d4a6ac0feae0be61378f52aae3b22872566fb', class: "hb-input__count-inner" }, this.inputValue.length, " / ", this.maxlength)))));
+            } }, this.prefixIcon && (h("span", { key: '1ba978d8de430fe70864b1daf5781e925cc35b5c', class: "hb-input__prefix" }, h("i", { key: '72abd536835d18ad5e7f75a09f896ebe41ca75d4', class: this.prefixIcon }))), h(InputTag, { key: '80049f50544c8118c73e545223450e5aecfc97ab', ref: (el) => (this.inputRef = el), type: isTextarea ? undefined : this.getInputType(), id: this.inputId, name: this.name, class: "hb-input__inner", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: this.readonly, autocomplete: this.autocomplete, autofocus: this.autofocus, maxlength: this.maxlength, minlength: this.minlength, rows: isTextarea ? this.rows : undefined, style: isTextarea ? { resize: this.autosize ? 'none' : (this.resize || 'none') } : undefined, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }), (this.showClear || this.suffixIcon || (this.type === 'password' && this.showPassword)) && (h("span", { key: '9ef7d5b2592fbb890f2915c97c5ecb6a5790ef97', class: "hb-input__suffix" }, this.showClear && (h("span", { key: 'c727eb595e73882d7c8c0d74cb65464062724377', class: "hb-input__suffix-inner hb-input__clear", role: "button", "aria-label": "\u6E05\u7A7A", onClick: this.handleClear }, h("svg", { key: '49060a94eba1105ffe4a97a48be513919586737d', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '49c82790d5035f47c3f722b2d714f230394b2dda', d: "M6 6l12 12M18 6L6 18" })))), this.type === 'password' && this.showPassword && (h("span", { key: '209212e83bc6c4c0939c6ace984648212c320312', class: "hb-input__suffix-inner hb-input__password", role: "button", "aria-label": this.passwordVisible ? '隐藏密码' : '显示密码', onClick: this.togglePasswordVisible }, this.passwordVisible ? (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" }), h("circle", { cx: "12", cy: "12", r: "3" }))) : (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 3l18 18M10.6 10.6a3 3 0 0 0 4.2 4.2M9.9 5.1A10.6 10.6 0 0 1 12 5c6.5 0 10 7 10 7a17.8 17.8 0 0 1-2.2 3.2M6.1 6.1A17.7 17.7 0 0 0 2 12s3.5 7 10 7a10.5 10.5 0 0 0 4-.8" }))))), this.suffixIcon && (h("span", { key: '661c50477f3a7d99feb22d71920493a184d66beb', class: "hb-input__suffix-inner" }, h("i", { key: 'f626ef9a8e095ee15ed0b8d3c903635c66d160c1', class: this.suffixIcon }))))), this.showWordLimit && this.maxlength && (h("span", { key: '47eba0fd638cbf8c510f0a94ee1dac808e3bba78', class: "hb-input__count" }, h("span", { key: '2d73a2813633592d8462b9decb3fb3f81fa3abde', class: "hb-input__count-inner" }, this.inputValue.length, " / ", this.maxlength)))));
     }
     static get is() { return "hb-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { ComponentSize, hasInputValue, isClearVisible, sizeClassMap } from '../../utils/form-input-base';\n\n/**\n * Input 输入框组件\n * 通过鼠标或键盘输入字符\n */\n@Component({\n  tag: 'hb-input',\n  styleUrl: 'input.css',\n  shadow: true,\n})\nexport class Input {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: string = '';\n\n  /**\n   * 输入框类型\n   */\n  @Prop() type: string = 'text';\n\n  /**\n   * 输入框尺寸\n   */\n  @Prop() size: ComponentSize = 'default';\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否只读\n   * @default false\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * 输入框占位文本\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * 是否可清空\n   * @default false\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * 是否显示密码可见性切换\n   * @default false\n   */\n  @Prop() showPassword: boolean = false;\n\n  /**\n   * 是否显示字数统计\n   * @default false\n   */\n  @Prop() showWordLimit: boolean = false;\n\n  /**\n   * 最大输入长度\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * 最小输入长度\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * 原生 name 属性\n   */\n  @Prop() name?: string;\n\n  /**\n   * 原生 id 属性\n   */\n  @Prop() inputId?: string;\n\n  /**\n   * 原生 autocomplete 属性\n   */\n  @Prop() autocomplete?: string;\n\n  /**\n   * 原生 autofocus 属性\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * 输入框头部图标\n   */\n  @Prop() prefixIcon?: string;\n\n  /**\n   * 输入框尾部图标\n   */\n  @Prop() suffixIcon?: string;\n\n  /**\n   * 输入框行数，仅 type 为 'textarea' 时有效\n   */\n  @Prop() rows: number = 2;\n\n  /**\n   * 是否自适应内容高度，仅 type 为 'textarea' 时有效\n   */\n  @Prop() autosize: boolean | { minRows?: number; maxRows?: number } = false;\n\n  /**\n   * 是否调整 textarea 大小\n   */\n  @Prop() resize?: 'none' | 'both' | 'horizontal' | 'vertical';\n\n  @State() isFocused: boolean = false;\n  @State() showClear: boolean = false;\n  @State() passwordVisible: boolean = false;\n  @State() inputValue: string = '';\n\n  private inputRef?: HTMLInputElement | HTMLTextAreaElement;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string>;\n\n  /**\n   * 输入事件\n   */\n  @Event() hbInput: EventEmitter<string>;\n\n  /**\n   * 聚焦事件\n   */\n  @Event() hbFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * 失焦事件\n   */\n  @Event() hbBlur: EventEmitter<FocusEvent>;\n\n  /**\n   * 清空事件\n   */\n  @Event() hbClear: EventEmitter<void>;\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.inputValue = this.modelValue;\n    this.updateClearVisible();\n  }\n\n  componentDidLoad() {\n    this.inputValue = this.modelValue;\n    this.updateClearVisible();\n  }\n\n  private updateClearVisible() {\n    this.showClear = isClearVisible({\n      clearable: this.clearable,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      hasValue: hasInputValue(this.inputValue),\n    });\n  }\n\n  private handleInput = (e: Event) => {\n    const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n    this.inputValue = target.value;\n    this.modelValue = target.value;\n    this.updateClearVisible();\n    this.hbInput.emit(target.value);\n  };\n\n  private handleChange = (e: Event) => {\n    const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n    this.hbChange.emit(target.value);\n  };\n\n  private handleFocus = (e: FocusEvent) => {\n    this.isFocused = true;\n    this.updateClearVisible();\n    this.hbFocus.emit(e);\n  };\n\n  private handleBlur = (e: FocusEvent) => {\n    this.isFocused = false;\n    this.updateClearVisible();\n    this.hbBlur.emit(e);\n  };\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation();\n    this.inputValue = '';\n    this.modelValue = '';\n    this.updateClearVisible();\n    this.hbClear.emit();\n    this.hbChange.emit('');\n    if (this.inputRef) {\n      this.inputRef.focus();\n    }\n  };\n\n  private togglePasswordVisible = () => {\n    this.passwordVisible = !this.passwordVisible;\n  };\n\n  private getInputType(): string {\n    if (this.type === 'password' && this.showPassword) {\n      return this.passwordVisible ? 'text' : 'password';\n    }\n    return this.type;\n  }\n\n  render() {\n    const isTextarea = this.type === 'textarea';\n    const InputTag = isTextarea ? 'textarea' : 'input';\n\n    return (\n      <div\n        class={{\n          ...sizeClassMap('hb-input', this.size),\n          'hb-input--disabled': this.disabled,\n          'hb-input--focused': this.isFocused,\n        }}\n      >\n        {this.prefixIcon && (\n          <span class=\"hb-input__prefix\">\n            <i class={this.prefixIcon}></i>\n          </span>\n        )}\n        <InputTag\n          ref={(el) => (this.inputRef = el)}\n          type={isTextarea ? undefined : this.getInputType()}\n          id={this.inputId}\n          name={this.name}\n          class=\"hb-input__inner\"\n          placeholder={this.placeholder}\n          value={this.inputValue}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          autocomplete={this.autocomplete}\n          autofocus={this.autofocus}\n          maxlength={this.maxlength}\n          minlength={this.minlength}\n          rows={isTextarea ? this.rows : undefined}\n          style={isTextarea && this.resize ? { resize: this.resize } : undefined}\n          onInput={this.handleInput}\n          onChange={this.handleChange}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        />\n        {(this.showClear || this.suffixIcon || (this.type === 'password' && this.showPassword)) && (\n          <span class=\"hb-input__suffix\">\n            {this.showClear && (\n              <span class=\"hb-input__suffix-inner hb-input__clear\" onClick={this.handleClear}>\n                ×\n              </span>\n            )}\n            {this.type === 'password' && this.showPassword && (\n              <span class=\"hb-input__suffix-inner hb-input__password\" onClick={this.togglePasswordVisible}>\n                {this.passwordVisible ? '👁️' : '👁️‍🗨️'}\n              </span>\n            )}\n            {this.suffixIcon && (\n              <span class=\"hb-input__suffix-inner\">\n                <i class={this.suffixIcon}></i>\n              </span>\n            )}\n          </span>\n        )}\n        {this.showWordLimit && this.maxlength && (\n          <span class=\"hb-input__count\">\n            <span class=\"hb-input__count-inner\">\n              {this.inputValue.length} / {this.maxlength}\n            </span>\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { ComponentSize, hasInputValue, isClearVisible, sizeClassMap } from '../../utils/form-input-base';\n\n/**\n * Input 输入框组件\n * 通过鼠标或键盘输入字符\n */\n@Component({\n  tag: 'hb-input',\n  styleUrl: 'input.css',\n  shadow: true,\n})\nexport class Input {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: string = '';\n\n  /**\n   * 输入框类型\n   */\n  @Prop() type: string = 'text';\n\n  /**\n   * 输入框尺寸\n   */\n  @Prop() size: ComponentSize = 'default';\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否只读\n   * @default false\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * 输入框占位文本\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * 是否可清空\n   * @default false\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * 是否显示密码可见性切换\n   * @default false\n   */\n  @Prop() showPassword: boolean = false;\n\n  /**\n   * 是否显示字数统计\n   * @default false\n   */\n  @Prop() showWordLimit: boolean = false;\n\n  /**\n   * 最大输入长度\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * 最小输入长度\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * 原生 name 属性\n   */\n  @Prop() name?: string;\n\n  /**\n   * 原生 id 属性\n   */\n  @Prop() inputId?: string;\n\n  /**\n   * 原生 autocomplete 属性\n   */\n  @Prop() autocomplete?: string;\n\n  /**\n   * 原生 autofocus 属性\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * 输入框头部图标\n   */\n  @Prop() prefixIcon?: string;\n\n  /**\n   * 输入框尾部图标\n   */\n  @Prop() suffixIcon?: string;\n\n  /**\n   * 输入框行数，仅 type 为 'textarea' 时有效\n   */\n  @Prop() rows: number = 2;\n\n  /**\n   * 是否自适应内容高度，仅 type 为 'textarea' 时有效\n   */\n  @Prop() autosize: boolean | { minRows?: number; maxRows?: number } = false;\n\n  /**\n   * 是否调整 textarea 大小\n   */\n  @Prop() resize?: 'none' | 'both' | 'horizontal' | 'vertical';\n\n  @State() isFocused: boolean = false;\n  @State() showClear: boolean = false;\n  @State() passwordVisible: boolean = false;\n  @State() inputValue: string = '';\n\n  private inputRef?: HTMLInputElement | HTMLTextAreaElement;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string>;\n\n  /**\n   * 输入事件\n   */\n  @Event() hbInput: EventEmitter<string>;\n\n  /**\n   * 聚焦事件\n   */\n  @Event() hbFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * 失焦事件\n   */\n  @Event() hbBlur: EventEmitter<FocusEvent>;\n\n  /**\n   * 清空事件\n   */\n  @Event() hbClear: EventEmitter<void>;\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.inputValue = this.modelValue;\n    this.updateClearVisible();\n    // textarea autosize：外部改值也要重算高度\n    this.resizeTextarea();\n  }\n\n  componentDidLoad() {\n    this.inputValue = this.modelValue;\n    this.updateClearVisible();\n    this.resizeTextarea();\n  }\n\n  private updateClearVisible() {\n    this.showClear = isClearVisible({\n      clearable: this.clearable,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      hasValue: hasInputValue(this.inputValue),\n    });\n  }\n\n  /**\n   * textarea 自适应高度（autosize）。\n   * - autosize=false 或非 textarea：跳过。\n   * - autosize=true：按内容自适应。\n   * - autosize={minRows,maxRows}：在最小/最大行数间夹取。\n   * 算法：先把 height 置 auto 让浏览器按内容重排，再读 scrollHeight，\n   *      减去 padding 后按行高换算成行数，最后按 min/max 夹取并写回 height。\n   */\n  private resizeTextarea() {\n    if (this.type !== 'textarea' || !this.autosize) return;\n    const ta = this.inputRef as HTMLTextAreaElement | undefined;\n    if (!ta) return;\n\n    // 行高：优先取计算样式，兜底 22px\n    const computed = typeof window !== 'undefined' ? window.getComputedStyle(ta) : null;\n    const lineHeight = computed && parseFloat(computed.lineHeight) ? parseFloat(computed.lineHeight) : 22;\n    const paddingTop = computed ? parseFloat(computed.paddingTop) || 0 : 0;\n    const paddingBottom = computed ? parseFloat(computed.paddingBottom) || 0 : 0;\n\n    const opts = typeof this.autosize === 'object' ? this.autosize : {};\n    const minRows = opts.minRows ?? 1;\n    const maxRows = opts.maxRows ?? Infinity;\n\n    const minH = minRows * lineHeight + paddingTop + paddingBottom;\n    const maxH = maxRows === Infinity ? Infinity : maxRows * lineHeight + paddingTop + paddingBottom;\n\n    // 先 reset 高度以读取真实内容高度\n    ta.style.height = 'auto';\n    const scrollH = ta.scrollHeight;\n    const clamped = Math.max(minH, Math.min(scrollH, maxH === Infinity ? scrollH : maxH));\n    ta.style.height = `${clamped}px`;\n    // overflow：能滚动时才显示滚动条\n    ta.style.overflowY = scrollH > clamped ? 'auto' : 'hidden';\n  }\n\n  private handleInput = (e: Event) => {\n    const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n    this.inputValue = target.value;\n    this.modelValue = target.value;\n    this.updateClearVisible();\n    this.hbInput.emit(target.value);\n    this.resizeTextarea();\n  };\n\n  private handleChange = (e: Event) => {\n    const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n    this.hbChange.emit(target.value);\n  };\n\n  private handleFocus = (e: FocusEvent) => {\n    this.isFocused = true;\n    this.updateClearVisible();\n    this.hbFocus.emit(e);\n  };\n\n  private handleBlur = (e: FocusEvent) => {\n    this.isFocused = false;\n    this.updateClearVisible();\n    this.hbBlur.emit(e);\n  };\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation();\n    this.inputValue = '';\n    this.modelValue = '';\n    this.updateClearVisible();\n    this.hbClear.emit();\n    this.hbChange.emit('');\n    if (this.inputRef) {\n      this.inputRef.focus();\n    }\n  };\n\n  private togglePasswordVisible = () => {\n    this.passwordVisible = !this.passwordVisible;\n  };\n\n  private getInputType(): string {\n    if (this.type === 'password' && this.showPassword) {\n      return this.passwordVisible ? 'text' : 'password';\n    }\n    return this.type;\n  }\n\n  render() {\n    const isTextarea = this.type === 'textarea';\n    const InputTag = isTextarea ? 'textarea' : 'input';\n\n    return (\n      <div\n        class={{\n          ...sizeClassMap('hb-input', this.size),\n          'hb-input--disabled': this.disabled,\n          'hb-input--focused': this.isFocused,\n        }}\n      >\n        {this.prefixIcon && (\n          <span class=\"hb-input__prefix\">\n            <i class={this.prefixIcon}></i>\n          </span>\n        )}\n        <InputTag\n          ref={(el) => (this.inputRef = el)}\n          type={isTextarea ? undefined : this.getInputType()}\n          id={this.inputId}\n          name={this.name}\n          class=\"hb-input__inner\"\n          placeholder={this.placeholder}\n          value={this.inputValue}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          autocomplete={this.autocomplete}\n          autofocus={this.autofocus}\n          maxlength={this.maxlength}\n          minlength={this.minlength}\n          rows={isTextarea ? this.rows : undefined}\n          style={isTextarea ? { resize: this.autosize ? 'none' : (this.resize || 'none') } : undefined}\n          onInput={this.handleInput}\n          onChange={this.handleChange}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        />\n        {(this.showClear || this.suffixIcon || (this.type === 'password' && this.showPassword)) && (\n          <span class=\"hb-input__suffix\">\n            {this.showClear && (\n              <span class=\"hb-input__suffix-inner hb-input__clear\" role=\"button\" aria-label=\"清空\" onClick={this.handleClear}>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path d=\"M6 6l12 12M18 6L6 18\" />\n                </svg>\n              </span>\n            )}\n            {this.type === 'password' && this.showPassword && (\n              <span\n                class=\"hb-input__suffix-inner hb-input__password\"\n                role=\"button\"\n                aria-label={this.passwordVisible ? '隐藏密码' : '显示密码'}\n                onClick={this.togglePasswordVisible}\n              >\n                {this.passwordVisible ? (\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\" />\n                    <circle cx=\"12\" cy=\"12\" r=\"3\" />\n                  </svg>\n                ) : (\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 3l18 18M10.6 10.6a3 3 0 0 0 4.2 4.2M9.9 5.1A10.6 10.6 0 0 1 12 5c6.5 0 10 7 10 7a17.8 17.8 0 0 1-2.2 3.2M6.1 6.1A17.7 17.7 0 0 0 2 12s3.5 7 10 7a10.5 10.5 0 0 0 4-.8\" />\n                  </svg>\n                )}\n              </span>\n            )}\n            {this.suffixIcon && (\n              <span class=\"hb-input__suffix-inner\">\n                <i class={this.suffixIcon}></i>\n              </span>\n            )}\n          </span>\n        )}\n        {this.showWordLimit && this.maxlength && (\n          <span class=\"hb-input__count\">\n            <span class=\"hb-input__count-inner\">\n              {this.inputValue.length} / {this.maxlength}\n            </span>\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/Input/input.css

@@ -107,20 +107,39 @@
 }
 
 .hb-input__clear {
-  font-size: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
   color: var(--hb-input-placeholder-color);
   transition: color 0.2s;
 }
 
+.hb-input__clear svg {
+  width: 100%;
+  height: 100%;
+}
+
 .hb-input__clear:hover {
   color: var(--hb-input-text-color);
 }
 
 .hb-input__password {
-  font-size: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--hb-input-text-color);
   cursor: pointer;
 }
 
+.hb-input__password svg {
+  width: 100%;
+  height: 100%;
+}
+
 .hb-input__inner[type="textarea"] {
   min-height: 60px;
   padding: 5px 15px;