huibo-ui 0.3.0 → 0.5.0

package/dist/collection/components/Container/Footer.js

@@ -13,7 +13,7 @@ export class Footer {
         if (this.height) {
             style.height = this.height;
         }
-        return (h("footer", { key: 'a6a73df27a1e1a7891a436a0f57c337e27cb9328', class: "hb-footer", style: style }, h("slot", { key: '02927f1f9433b928f2552ef19e2e3fbd7cf69d44' })));
+        return (h("footer", { key: '65847074853df09c57dd2bcead1470dac15f5951', class: "hb-footer", style: style }, h("slot", { key: 'e0f976bf1b3cd1f3a7ae2609bdf9b621070dac10' })));
     }
     static get is() { return "hb-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/Container/Header.js

@@ -13,7 +13,7 @@ export class Header {
         if (this.height) {
             style.height = this.height;
         }
-        return (h("header", { key: '86042705286a6d135858982b34cdb19da71b6744', class: "hb-header", style: style }, h("slot", { key: '96d5152e19c88d4cbc4c30bc136b27b6b8388331' })));
+        return (h("header", { key: 'b0f4403c73f20d13b4513dd21266e5fea1004f7b', class: "hb-header", style: style }, h("slot", { key: '15f9743951c0183e7ee10124c0e3d2e8d071bee0' })));
     }
     static get is() { return "hb-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/Container/Main.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class Main {
     render() {
-        return (h("main", { key: 'd326db7b0e9de0ff411ca3af99f2399a5e760557', class: "hb-main" }, h("slot", { key: 'cea61788b327d41f6307be518c368eca41a254b2' })));
+        return (h("main", { key: '98dd998acef2d0cf91173425d84b5e14cd86c104', class: "hb-main" }, h("slot", { key: 'e508104800157f61bec0b0754371c83a4a76dabe' })));
     }
     static get is() { return "hb-main"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/DatePicker/DatePicker.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { createClickOutsideHandler } from "../../utils/click-outside";
 import { getCalendarDays, formatDate, parseDate, addMonths, MONTH_NAMES, WEEK_DAY_NAMES } from "../../utils/date-helpers";
+import { activationClickHandler } from "../../utils/a11y";
 /**
  * DatePicker 日期选择器组件
  * 用于选择或输入日期
@@ -22,8 +23,11 @@ export class DatePicker {
     /** 显示在输入框中的格式 */
     valueFormat;
     /**
-     * 日期选择器类型
-     * 当前仅支持 'date'，更多类型将在后续版本实现
+     * 日期选择器类型：
+     * - 'date'：日选择（默认）
+     * - 'month'：月选择（month 视图网格，emit YYYY-MM）
+     * - 'year'：年选择（year 视图网格，emit YYYY）
+     * 注：'datetime'/'week' 请用独立的 DateTimePicker 组件 / 后续补全。
      */
     type = 'date';
     /**
@@ -38,18 +42,24 @@ export class DatePicker {
     isOpen = false;
     inputValue = '';
     selectedDate;
+    /** month/year 模式的面板锚点（不随选择改变，仅导航用） */
+    panelViewDate = new Date();
     /** 值改变事件 */
     hbChange;
     clickOutside = createClickOutsideHandler({
         host: null,
         isOpen: () => this.isOpen,
-        onClose: () => { this.isOpen = false; },
+        onClose: () => {
+            this.isOpen = false;
+        },
     });
     componentDidLoad() {
         this.clickOutside = createClickOutsideHandler({
             host: this.el,
             isOpen: () => this.isOpen,
-            onClose: () => { this.isOpen = false; },
+            onClose: () => {
+                this.isOpen = false;
+            },
         });
         this.clickOutside.connect();
         this.updateInputValue();
@@ -74,6 +84,10 @@ export class DatePicker {
         if (this.disabled)
             return;
         this.isOpen = !this.isOpen;
+        // month/year 模式打开时，从已选值或今天初始化面板锚点
+        if (this.isOpen && (this.type === 'month' || this.type === 'year')) {
+            this.panelViewDate = this.selectedDate ? new Date(this.selectedDate) : new Date();
+        }
     };
     handleClear = (e) => {
         e.stopPropagation();
@@ -93,9 +107,44 @@ export class DatePicker {
         this.isOpen = false;
         this.hbChange.emit(this.modelValue);
     };
+    /** type='month'：选某月 → 锚定到该月 1 号，emit YYYY-MM */
+    handleMonthSelect = (monthIndex) => {
+        const next = new Date(this.panelViewDate.getFullYear(), monthIndex, 1);
+        if (this.disabledDate && this.disabledDate(next))
+            return;
+        this.selectedDate = next;
+        this.panelViewDate = new Date(next);
+        const iso = `${next.getFullYear()}-${String(monthIndex + 1).padStart(2, '0')}`;
+        this.inputValue = iso;
+        this.modelValue = iso;
+        this.isOpen = false;
+        this.hbChange.emit(iso);
+    };
+    /** type='year'：选某年 → 锚定到该年 1 月 1 日，emit YYYY */
+    handleYearSelect = (year) => {
+        const next = new Date(year, 0, 1);
+        if (this.disabledDate && this.disabledDate(next))
+            return;
+        this.selectedDate = next;
+        this.panelViewDate = new Date(next);
+        const iso = String(year);
+        this.inputValue = iso;
+        this.modelValue = iso;
+        this.isOpen = false;
+        this.hbChange.emit(iso);
+    };
     changeMonth(delta) {
         this.selectedDate = addMonths(this.selectedDate || new Date(), delta);
     }
+    /** month/year 面板导航：month ±1 年、year ±12 年 */
+    changePanelView(delta) {
+        const next = new Date(this.panelViewDate);
+        if (this.type === 'month')
+            next.setFullYear(next.getFullYear() + delta);
+        else
+            next.setFullYear(next.getFullYear() + delta * 12);
+        this.panelViewDate = next;
+    }
     /** 判断某日期是否被 disabledDate 禁用 */
     isDateDisabled = (date) => {
         return !!this.disabledDate && this.disabledDate(date);
@@ -103,12 +152,20 @@ export class DatePicker {
     render() {
         const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);
         const current = this.selectedDate || new Date();
-        return (h("div", { key: '79e20fe927318faa30086dbe5cd3e17b24077f8f', class: {
+        // month/year 面板锚点：默认用 panelViewDate，未打开时回退到 selectedDate/today
+        const panelAnchor = this.panelViewDate || current;
+        const headerLabel = this.type === 'month'
+            ? `${panelAnchor.getFullYear()} 年`
+            : this.type === 'year'
+                ? `${Math.floor(panelAnchor.getFullYear() / 12) * 12} - ${Math.floor(panelAnchor.getFullYear() / 12) * 12 + 11}`
+                : `${current.getFullYear()}年 ${MONTH_NAMES[current.getMonth()]}`;
+        return (h("div", { key: '0568629a899d16bd00cf0acdc06c8bf12a50b21d', class: {
                 'hb-date-picker': true,
                 'hb-date-picker--open': this.isOpen,
                 'hb-date-picker--disabled': this.disabled,
                 [`hb-date-picker--${this.size}`]: true,
-            } }, h("div", { key: 'eb216f889017004192cdc04496334c21e714e971', class: "hb-date-picker__input-wrapper", onClick: this.handleInputClick }, h("input", { key: 'ac23cc7e2d3ba77141ec342477bf984ce581b30a', type: "text", id: this.inputId, name: this.name, class: "hb-date-picker__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: true, role: "combobox", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.placeholder }), h("span", { key: 'd9371788b72feacd581e908d65770af8b9eb535a', class: "hb-date-picker__suffix" }, this.clearable && this.modelValue && (h("span", { key: '86601557f8419ba22111ca214c3130ee444b383e', class: "hb-date-picker__clear", role: "button", "aria-label": "\u6E05\u7A7A", onClick: this.handleClear }, "\u00D7")), h("span", { key: '55662b6a4b49cf42c54e2906fb062c8c45a9259e', class: "hb-date-picker__icon", "aria-hidden": "true" }, "\uD83D\uDCC5"))), this.isOpen && (h("div", { key: '3b1d2bbb8fd12b5b8c2748028f7b13daa08df5a0', class: "hb-date-picker__dropdown", role: "dialog", "aria-label": "\u9009\u62E9\u65E5\u671F" }, h("div", { key: '310b54cb7c477fc52657b220201e82f69059b3a0', class: "hb-date-picker__header" }, h("button", { key: '63cf02ce80ea6522592863a31696b91b79ebd0ef', type: "button", class: "hb-date-picker__prev-btn", "aria-label": "\u4E0A\u4E00\u6708", onClick: () => this.changeMonth(-1) }, "\u2039"), h("span", { key: 'f74837430f189198929125413a7b61568e37c1a7', class: "hb-date-picker__header-label", "aria-live": "polite" }, current.getFullYear(), "\u5E74 ", MONTH_NAMES[current.getMonth()]), h("button", { key: 'db36b5b8823fa3dc5f8355d77225b19ea262d2fd', type: "button", class: "hb-date-picker__next-btn", "aria-label": "\u4E0B\u4E00\u6708", onClick: () => this.changeMonth(1) }, "\u203A")), h("div", { key: '2adbe9940556d5f01049bcdb4777c67b2519c5ef', class: "hb-date-picker__body", role: "grid" }, h("div", { key: 'd4b2deab072b795b852abdb4e54f9c3493feaecd', class: "hb-date-picker__weekdays", role: "row" }, WEEK_DAY_NAMES.map(day => (h("div", { class: "hb-date-picker__weekday", role: "columnheader", "aria-disabled": "true" }, day)))), h("div", { key: '208e6260719c97616be80386b3fc9da3521eed83', class: "hb-date-picker__days", role: "row" }, days.map((day, index) => {
+                [`hb-date-picker--${this.type}`]: true,
+            } }, h("div", { key: 'd37d7631b2c16fb6f52c63aa96ce9752c348ceca', class: "hb-date-picker__input-wrapper", onClick: this.handleInputClick }, h("input", { key: 'b8c2381f26b88bce3032a58cbb74ae05fdb54b7c', type: "text", id: this.inputId, name: this.name, class: "hb-date-picker__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: true, role: "combobox", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.placeholder }), h("span", { key: 'df5059ba445476a946f9efc902da4f965c1f5eca', class: "hb-date-picker__suffix" }, this.clearable && this.modelValue && (h("span", { key: 'cab3328768cab68676ccece71bf12161449e52c2', class: "hb-date-picker__clear", role: "button", "aria-label": "\u6E05\u7A7A", tabIndex: 0, onClick: this.handleClear, onKeyDown: activationClickHandler }, h("svg", { key: 'e5970e157bf707bb49f39e800274927c73a79a82', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '6fbe208a529abe7c01822d164f90d6ed80e1071d', d: "M6 6l12 12M18 6L6 18" })))), h("span", { key: 'ab1db32eccdf2e0c507e29de61cc30deaf0d3b9e', class: "hb-date-picker__icon", "aria-hidden": "true" }, h("svg", { key: 'd3439b59946891a511049d955e0d7362b2cca591', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: '9d6037217b01ff42357346ac092f6bd197414fb7', x: "3", y: "5", width: "18", height: "16", rx: "2" }), h("path", { key: '391e0d2b637622483036325d9c16187e3f2020bd', d: "M3 9h18M8 3v4M16 3v4" }))))), this.isOpen && (h("div", { key: 'b4985a01eadf9109127d599697485de875056be7', class: "hb-date-picker__dropdown", role: "dialog", "aria-label": this.type === 'month' ? '选择月份' : this.type === 'year' ? '选择年份' : '选择日期' }, h("div", { key: '369fae3c69f41c6c23e41598edb728510b41e73e', class: "hb-date-picker__header" }, h("button", { key: '9369433f5827e0bfbaa36ce4b3f06e4fc6d644c0', type: "button", class: "hb-date-picker__prev-btn", "aria-label": this.type === 'date' ? '上一月' : '上一年', onClick: () => (this.type === 'date' ? this.changeMonth(-1) : this.changePanelView(-1)) }, "\u2039"), h("span", { key: 'a7f946f76e088387784a8f5e49c38c8e47938c95', class: "hb-date-picker__header-label", "aria-live": "polite" }, headerLabel), h("button", { key: '2f5e2aca8db2fd8b9350334d3b211f4537b60277', type: "button", class: "hb-date-picker__next-btn", "aria-label": this.type === 'date' ? '下一月' : '下一年', onClick: () => (this.type === 'date' ? this.changeMonth(1) : this.changePanelView(1)) }, "\u203A")), this.type === 'date' && (h("div", { key: 'a8f0c0418770fedced9596685cec4d40c66350d1', class: "hb-date-picker__body", role: "grid" }, h("div", { key: '7b9c1d486b30408007024a6036a7813fcff982de', class: "hb-date-picker__weekdays", role: "row" }, WEEK_DAY_NAMES.map(day => (h("div", { class: "hb-date-picker__weekday", role: "columnheader", "aria-disabled": "true" }, day)))), h("div", { key: '63a5f9b115f2c3b2424064843bc36fe7b79d1ca3', class: "hb-date-picker__days", role: "row" }, days.map((day, index) => {
             const dayDisabled = day.isCurrentMonth && this.isDateDisabled(day.date);
             return (h("div", { key: index, class: {
                     'hb-date-picker__day': true,
@@ -117,7 +174,31 @@ export class DatePicker {
                     'hb-date-picker__day--selected': day.isSelected,
                     'hb-date-picker__day--disabled': dayDisabled,
                 }, role: "gridcell", "aria-selected": day.isSelected ? 'true' : 'false', "aria-disabled": !day.isCurrentMonth || dayDisabled ? 'true' : undefined, "aria-label": formatDate(day.date, this.format), onClick: () => day.isCurrentMonth && !dayDisabled && this.handleDateSelect(day.date) }, day.date.getDate()));
-        })))))));
+        })))), this.type === 'month' && (h("div", { key: 'b62f03edcdca73c71ddded45079344778e65abb6', class: "hb-date-picker__body hb-date-picker__month-grid", role: "grid" }, MONTH_NAMES.map((name, idx) => {
+            const probe = new Date(panelAnchor.getFullYear(), idx, 1);
+            const monthDisabled = !!this.disabledDate && this.disabledDate(probe);
+            const isSelected = !!this.selectedDate && this.selectedDate.getFullYear() === panelAnchor.getFullYear() && this.selectedDate.getMonth() === idx;
+            return (h("div", { class: {
+                    'hb-date-picker__month-cell': true,
+                    'hb-date-picker__month-cell--selected': isSelected,
+                    'hb-date-picker__month-cell--disabled': monthDisabled,
+                }, role: "gridcell", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": monthDisabled ? 'true' : undefined, onClick: () => !monthDisabled && this.handleMonthSelect(idx) }, name));
+        }))), this.type === 'year' && (h("div", { key: 'fb01386b11594c2b1bc14b1eae38f2fd51a5e20b', class: "hb-date-picker__body hb-date-picker__year-grid", role: "grid" }, (() => {
+            const startYear = Math.floor(panelAnchor.getFullYear() / 12) * 12;
+            const years = [];
+            for (let i = 0; i < 12; i++)
+                years.push(startYear + i);
+            return years.map(y => {
+                const probe = new Date(y, 0, 1);
+                const yearDisabled = !!this.disabledDate && this.disabledDate(probe);
+                const isSelected = !!this.selectedDate && this.selectedDate.getFullYear() === y;
+                return (h("div", { class: {
+                        'hb-date-picker__year-cell': true,
+                        'hb-date-picker__year-cell--selected': isSelected,
+                        'hb-date-picker__year-cell--disabled': yearDisabled,
+                    }, role: "gridcell", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": yearDisabled ? 'true' : undefined, onClick: () => !yearDisabled && this.handleYearSelect(y) }, y));
+            });
+        })()))))));
     }
     static get is() { return "hb-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -280,21 +361,21 @@ export class DatePicker {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"date\"",
-                    "resolved": "\"date\"",
+                    "original": "'date' | 'month' | 'year'",
+                    "resolved": "\"date\" | \"month\" | \"year\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\u65E5\u671F\u9009\u62E9\u5668\u7C7B\u578B\n\u5F53\u524D\u4EC5\u652F\u6301 'date'\uFF0C\u66F4\u591A\u7C7B\u578B\u5C06\u5728\u540E\u7EED\u7248\u672C\u5B9E\u73B0"
+                    "text": "\u65E5\u671F\u9009\u62E9\u5668\u7C7B\u578B\uFF1A\n- 'date'\uFF1A\u65E5\u9009\u62E9\uFF08\u9ED8\u8BA4\uFF09\n- 'month'\uFF1A\u6708\u9009\u62E9\uFF08month \u89C6\u56FE\u7F51\u683C\uFF0Cemit YYYY-MM\uFF09\n- 'year'\uFF1A\u5E74\u9009\u62E9\uFF08year \u89C6\u56FE\u7F51\u683C\uFF0Cemit YYYY\uFF09\n\u6CE8\uFF1A'datetime'/'week' \u8BF7\u7528\u72EC\u7ACB\u7684 DateTimePicker \u7EC4\u4EF6 / \u540E\u7EED\u8865\u5168\u3002"
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "type",
                 "reflect": false,
-                "defaultValue": "'date' as const"
+                "defaultValue": "'date'"
             },
             "disabledDate": {
                 "type": "unknown",
@@ -365,7 +446,8 @@ export class DatePicker {
         return {
             "isOpen": {},
             "inputValue": {},
-            "selectedDate": {}
+            "selectedDate": {},
+            "panelViewDate": {}
         };
     }
     static get events() {

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\nimport { createClickOutsideHandler } from '../../utils/click-outside';\nimport { getCalendarDays, formatDate, parseDate, addMonths, MONTH_NAMES, WEEK_DAY_NAMES } from '../../utils/date-helpers';\n\n/**\n * DatePicker 日期选择器组件\n * 用于选择或输入日期\n */\n@Component({\n  tag: 'hb-date-picker',\n  styleUrl: 'date-picker.css',\n  shadow: true,\n})\nexport class DatePicker {\n  @Element() el: HTMLElement;\n\n  /** 绑定值 */\n  @Prop({ mutable: true }) modelValue?: string | Date;\n\n  /** 输入框占位文本 */\n  @Prop() placeholder: string = '请选择日期';\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  /** 输入框尺寸 */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /** 是否可清空 */\n  @Prop() clearable: boolean = false;\n\n  /** 日期格式 */\n  @Prop() format: string = 'YYYY-MM-DD';\n\n  /** 显示在输入框中的格式 */\n  @Prop() valueFormat?: string;\n\n  /**\n   * 日期选择器类型\n   * 当前仅支持 'date'，更多类型将在后续版本实现\n   */\n  @Prop() type = 'date' as const;\n\n  /**\n   * 禁用日期判定函数。返回 true 的日期在日历中不可选（加 disabled 态、不可点击、aria-disabled）。\n   * @param date 当前日期格子的 Date 对象\n   */\n  @Prop() disabledDate?: (date: Date) => boolean;\n\n  /** 原生 name 属性 */\n  @Prop() name?: string;\n\n  /** 原生 id 属性 */\n  @Prop() inputId?: string;\n\n  @State() isOpen: boolean = false;\n  @State() inputValue: string = '';\n  @State() selectedDate?: Date;\n\n  /** 值改变事件 */\n  @Event() hbChange: EventEmitter<string | Date>;\n\n  private clickOutside = createClickOutsideHandler({\n    host: null as any,\n    isOpen: () => this.isOpen,\n    onClose: () => { this.isOpen = false; },\n  });\n\n  componentDidLoad() {\n    this.clickOutside = createClickOutsideHandler({\n      host: this.el,\n      isOpen: () => this.isOpen,\n      onClose: () => { this.isOpen = false; },\n    });\n    this.clickOutside.connect();\n    this.updateInputValue();\n  }\n\n  disconnectedCallback() {\n    this.clickOutside.disconnect();\n  }\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.updateInputValue();\n  }\n\n  private updateInputValue() {\n    const date = parseDate(this.modelValue);\n    if (!date) {\n      this.inputValue = '';\n      this.selectedDate = undefined;\n      return;\n    }\n    this.selectedDate = date;\n    this.inputValue = formatDate(date, this.format);\n  }\n\n  private handleInputClick = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation();\n    this.modelValue = undefined;\n    this.inputValue = '';\n    this.selectedDate = undefined;\n    this.isOpen = false;\n    this.hbChange.emit(undefined);\n  };\n\n  private handleDateSelect = (date: Date) => {\n    // disabledDate 返回 true 的日期不可选\n    if (this.disabledDate && this.disabledDate(date)) return;\n    this.selectedDate = date;\n    this.modelValue = this.valueFormat ? formatDate(date, this.format) : date;\n    this.updateInputValue();\n    this.isOpen = false;\n    this.hbChange.emit(this.modelValue);\n  };\n\n  private changeMonth(delta: number) {\n    this.selectedDate = addMonths(this.selectedDate || new Date(), delta);\n  }\n\n  /** 判断某日期是否被 disabledDate 禁用 */\n  private isDateDisabled = (date: Date): boolean => {\n    return !!this.disabledDate && this.disabledDate(date);\n  };\n\n  render() {\n    const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);\n    const current = this.selectedDate || new Date();\n\n    return (\n      <div\n        class={{\n          'hb-date-picker': true,\n          'hb-date-picker--open': this.isOpen,\n          'hb-date-picker--disabled': this.disabled,\n          [`hb-date-picker--${this.size}`]: true,\n        }}\n      >\n        <div class=\"hb-date-picker__input-wrapper\" onClick={this.handleInputClick}>\n          <input\n            type=\"text\"\n            id={this.inputId}\n            name={this.name}\n            class=\"hb-date-picker__input\"\n            placeholder={this.placeholder}\n            value={this.inputValue}\n            disabled={this.disabled}\n            readonly\n            role=\"combobox\"\n            aria-haspopup=\"dialog\"\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            aria-label={this.placeholder}\n          />\n          <span class=\"hb-date-picker__suffix\">\n            {this.clearable && this.modelValue && (\n              <span class=\"hb-date-picker__clear\" role=\"button\" aria-label=\"清空\" onClick={this.handleClear}>\n                ×\n              </span>\n            )}\n            <span class=\"hb-date-picker__icon\" aria-hidden=\"true\">📅</span>\n          </span>\n        </div>\n        {this.isOpen && (\n          <div class=\"hb-date-picker__dropdown\" role=\"dialog\" aria-label=\"选择日期\">\n            <div class=\"hb-date-picker__header\">\n              <button\n                type=\"button\"\n                class=\"hb-date-picker__prev-btn\"\n                aria-label=\"上一月\"\n                onClick={() => this.changeMonth(-1)}\n              >\n                ‹\n              </button>\n              <span class=\"hb-date-picker__header-label\" aria-live=\"polite\">\n                {current.getFullYear()}年 {MONTH_NAMES[current.getMonth()]}\n              </span>\n              <button\n                type=\"button\"\n                class=\"hb-date-picker__next-btn\"\n                aria-label=\"下一月\"\n                onClick={() => this.changeMonth(1)}\n              >\n                ›\n              </button>\n            </div>\n            <div class=\"hb-date-picker__body\" role=\"grid\">\n              <div class=\"hb-date-picker__weekdays\" role=\"row\">\n                {WEEK_DAY_NAMES.map(day => (\n                  <div class=\"hb-date-picker__weekday\" role=\"columnheader\" aria-disabled=\"true\">{day}</div>\n                ))}\n              </div>\n              <div class=\"hb-date-picker__days\" role=\"row\">\n                {days.map((day, index) => {\n                  const dayDisabled = day.isCurrentMonth && this.isDateDisabled(day.date);\n                  return (\n                    <div\n                      key={index}\n                      class={{\n                        'hb-date-picker__day': true,\n                        'hb-date-picker__day--other-month': !day.isCurrentMonth,\n                        'hb-date-picker__day--today': day.isToday,\n                        'hb-date-picker__day--selected': day.isSelected,\n                        'hb-date-picker__day--disabled': dayDisabled,\n                      }}\n                      role=\"gridcell\"\n                      aria-selected={day.isSelected ? 'true' : 'false'}\n                      aria-disabled={!day.isCurrentMonth || dayDisabled ? 'true' : undefined}\n                      aria-label={formatDate(day.date, this.format)}\n                      onClick={() => day.isCurrentMonth && !dayDisabled && this.handleDateSelect(day.date)}\n                    >\n                      {day.date.getDate()}\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\nimport { createClickOutsideHandler } from '../../utils/click-outside';\nimport { getCalendarDays, formatDate, parseDate, addMonths, MONTH_NAMES, WEEK_DAY_NAMES } from '../../utils/date-helpers';\nimport { activationClickHandler } from '../../utils/a11y';\n\n/**\n * DatePicker 日期选择器组件\n * 用于选择或输入日期\n */\n@Component({\n  tag: 'hb-date-picker',\n  styleUrl: 'date-picker.css',\n  shadow: true,\n})\nexport class DatePicker {\n  @Element() el: HTMLElement;\n\n  /** 绑定值 */\n  @Prop({ mutable: true }) modelValue?: string | Date;\n\n  /** 输入框占位文本 */\n  @Prop() placeholder: string = '请选择日期';\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  /** 输入框尺寸 */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /** 是否可清空 */\n  @Prop() clearable: boolean = false;\n\n  /** 日期格式 */\n  @Prop() format: string = 'YYYY-MM-DD';\n\n  /** 显示在输入框中的格式 */\n  @Prop() valueFormat?: string;\n\n  /**\n   * 日期选择器类型：\n   * - 'date'：日选择（默认）\n   * - 'month'：月选择（month 视图网格，emit YYYY-MM）\n   * - 'year'：年选择（year 视图网格，emit YYYY）\n   * 注：'datetime'/'week' 请用独立的 DateTimePicker 组件 / 后续补全。\n   */\n  @Prop() type: 'date' | 'month' | 'year' = 'date';\n\n  /**\n   * 禁用日期判定函数。返回 true 的日期在日历中不可选（加 disabled 态、不可点击、aria-disabled）。\n   * @param date 当前日期格子的 Date 对象\n   */\n  @Prop() disabledDate?: (date: Date) => boolean;\n\n  /** 原生 name 属性 */\n  @Prop() name?: string;\n\n  /** 原生 id 属性 */\n  @Prop() inputId?: string;\n\n  @State() isOpen: boolean = false;\n  @State() inputValue: string = '';\n  @State() selectedDate?: Date;\n  /** month/year 模式的面板锚点（不随选择改变，仅导航用） */\n  @State() panelViewDate: Date = new Date();\n\n  /** 值改变事件 */\n  @Event() hbChange: EventEmitter<string | Date>;\n\n  private clickOutside = createClickOutsideHandler({\n    host: null as any,\n    isOpen: () => this.isOpen,\n    onClose: () => {\n      this.isOpen = false;\n    },\n  });\n\n  componentDidLoad() {\n    this.clickOutside = createClickOutsideHandler({\n      host: this.el,\n      isOpen: () => this.isOpen,\n      onClose: () => {\n        this.isOpen = false;\n      },\n    });\n    this.clickOutside.connect();\n    this.updateInputValue();\n  }\n\n  disconnectedCallback() {\n    this.clickOutside.disconnect();\n  }\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.updateInputValue();\n  }\n\n  private updateInputValue() {\n    const date = parseDate(this.modelValue);\n    if (!date) {\n      this.inputValue = '';\n      this.selectedDate = undefined;\n      return;\n    }\n    this.selectedDate = date;\n    this.inputValue = formatDate(date, this.format);\n  }\n\n  private handleInputClick = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n    // month/year 模式打开时，从已选值或今天初始化面板锚点\n    if (this.isOpen && (this.type === 'month' || this.type === 'year')) {\n      this.panelViewDate = this.selectedDate ? new Date(this.selectedDate) : new Date();\n    }\n  };\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation();\n    this.modelValue = undefined;\n    this.inputValue = '';\n    this.selectedDate = undefined;\n    this.isOpen = false;\n    this.hbChange.emit(undefined);\n  };\n\n  private handleDateSelect = (date: Date) => {\n    // disabledDate 返回 true 的日期不可选\n    if (this.disabledDate && this.disabledDate(date)) return;\n    this.selectedDate = date;\n    this.modelValue = this.valueFormat ? formatDate(date, this.format) : date;\n    this.updateInputValue();\n    this.isOpen = false;\n    this.hbChange.emit(this.modelValue);\n  };\n\n  /** type='month'：选某月 → 锚定到该月 1 号，emit YYYY-MM */\n  private handleMonthSelect = (monthIndex: number) => {\n    const next = new Date(this.panelViewDate.getFullYear(), monthIndex, 1);\n    if (this.disabledDate && this.disabledDate(next)) return;\n    this.selectedDate = next;\n    this.panelViewDate = new Date(next);\n    const iso = `${next.getFullYear()}-${String(monthIndex + 1).padStart(2, '0')}`;\n    this.inputValue = iso;\n    this.modelValue = iso;\n    this.isOpen = false;\n    this.hbChange.emit(iso);\n  };\n\n  /** type='year'：选某年 → 锚定到该年 1 月 1 日，emit YYYY */\n  private handleYearSelect = (year: number) => {\n    const next = new Date(year, 0, 1);\n    if (this.disabledDate && this.disabledDate(next)) return;\n    this.selectedDate = next;\n    this.panelViewDate = new Date(next);\n    const iso = String(year);\n    this.inputValue = iso;\n    this.modelValue = iso;\n    this.isOpen = false;\n    this.hbChange.emit(iso);\n  };\n\n  private changeMonth(delta: number) {\n    this.selectedDate = addMonths(this.selectedDate || new Date(), delta);\n  }\n\n  /** month/year 面板导航：month ±1 年、year ±12 年 */\n  private changePanelView(delta: number) {\n    const next = new Date(this.panelViewDate);\n    if (this.type === 'month') next.setFullYear(next.getFullYear() + delta);\n    else next.setFullYear(next.getFullYear() + delta * 12);\n    this.panelViewDate = next;\n  }\n\n  /** 判断某日期是否被 disabledDate 禁用 */\n  private isDateDisabled = (date: Date): boolean => {\n    return !!this.disabledDate && this.disabledDate(date);\n  };\n\n  render() {\n    const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);\n    const current = this.selectedDate || new Date();\n\n    // month/year 面板锚点：默认用 panelViewDate，未打开时回退到 selectedDate/today\n    const panelAnchor = this.panelViewDate || current;\n    const headerLabel =\n      this.type === 'month'\n        ? `${panelAnchor.getFullYear()} 年`\n        : this.type === 'year'\n          ? `${Math.floor(panelAnchor.getFullYear() / 12) * 12} - ${Math.floor(panelAnchor.getFullYear() / 12) * 12 + 11}`\n          : `${current.getFullYear()}年 ${MONTH_NAMES[current.getMonth()]}`;\n\n    return (\n      <div\n        class={{\n          'hb-date-picker': true,\n          'hb-date-picker--open': this.isOpen,\n          'hb-date-picker--disabled': this.disabled,\n          [`hb-date-picker--${this.size}`]: true,\n          [`hb-date-picker--${this.type}`]: true,\n        }}\n      >\n        <div class=\"hb-date-picker__input-wrapper\" onClick={this.handleInputClick}>\n          <input\n            type=\"text\"\n            id={this.inputId}\n            name={this.name}\n            class=\"hb-date-picker__input\"\n            placeholder={this.placeholder}\n            value={this.inputValue}\n            disabled={this.disabled}\n            readonly\n            role=\"combobox\"\n            aria-haspopup=\"dialog\"\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            aria-label={this.placeholder}\n          />\n          <span class=\"hb-date-picker__suffix\">\n            {this.clearable && this.modelValue && (\n              <span class=\"hb-date-picker__clear\" role=\"button\" aria-label=\"清空\" tabIndex={0} onClick={this.handleClear} onKeyDown={activationClickHandler}>\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            <span class=\"hb-date-picker__icon\" aria-hidden=\"true\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n                <path d=\"M3 9h18M8 3v4M16 3v4\" />\n              </svg>\n            </span>\n          </span>\n        </div>\n        {this.isOpen && (\n          <div class=\"hb-date-picker__dropdown\" role=\"dialog\" aria-label={this.type === 'month' ? '选择月份' : this.type === 'year' ? '选择年份' : '选择日期'}>\n            <div class=\"hb-date-picker__header\">\n              <button\n                type=\"button\"\n                class=\"hb-date-picker__prev-btn\"\n                aria-label={this.type === 'date' ? '上一月' : '上一年'}\n                onClick={() => (this.type === 'date' ? this.changeMonth(-1) : this.changePanelView(-1))}\n              >\n                ‹\n              </button>\n              <span class=\"hb-date-picker__header-label\" aria-live=\"polite\">\n                {headerLabel}\n              </span>\n              <button\n                type=\"button\"\n                class=\"hb-date-picker__next-btn\"\n                aria-label={this.type === 'date' ? '下一月' : '下一年'}\n                onClick={() => (this.type === 'date' ? this.changeMonth(1) : this.changePanelView(1))}\n              >\n                ›\n              </button>\n            </div>\n            {this.type === 'date' && (\n              <div class=\"hb-date-picker__body\" role=\"grid\">\n                <div class=\"hb-date-picker__weekdays\" role=\"row\">\n                  {WEEK_DAY_NAMES.map(day => (\n                    <div class=\"hb-date-picker__weekday\" role=\"columnheader\" aria-disabled=\"true\">\n                      {day}\n                    </div>\n                  ))}\n                </div>\n                <div class=\"hb-date-picker__days\" role=\"row\">\n                  {days.map((day, index) => {\n                    const dayDisabled = day.isCurrentMonth && this.isDateDisabled(day.date);\n                    return (\n                      <div\n                        key={index}\n                        class={{\n                          'hb-date-picker__day': true,\n                          'hb-date-picker__day--other-month': !day.isCurrentMonth,\n                          'hb-date-picker__day--today': day.isToday,\n                          'hb-date-picker__day--selected': day.isSelected,\n                          'hb-date-picker__day--disabled': dayDisabled,\n                        }}\n                        role=\"gridcell\"\n                        aria-selected={day.isSelected ? 'true' : 'false'}\n                        aria-disabled={!day.isCurrentMonth || dayDisabled ? 'true' : undefined}\n                        aria-label={formatDate(day.date, this.format)}\n                        onClick={() => day.isCurrentMonth && !dayDisabled && this.handleDateSelect(day.date)}\n                      >\n                        {day.date.getDate()}\n                      </div>\n                    );\n                  })}\n                </div>\n              </div>\n            )}\n            {this.type === 'month' && (\n              <div class=\"hb-date-picker__body hb-date-picker__month-grid\" role=\"grid\">\n                {MONTH_NAMES.map((name, idx) => {\n                  const probe = new Date(panelAnchor.getFullYear(), idx, 1);\n                  const monthDisabled = !!this.disabledDate && this.disabledDate(probe);\n                  const isSelected = !!this.selectedDate && this.selectedDate.getFullYear() === panelAnchor.getFullYear() && this.selectedDate.getMonth() === idx;\n                  return (\n                    <div\n                      class={{\n                        'hb-date-picker__month-cell': true,\n                        'hb-date-picker__month-cell--selected': isSelected,\n                        'hb-date-picker__month-cell--disabled': monthDisabled,\n                      }}\n                      role=\"gridcell\"\n                      aria-selected={isSelected ? 'true' : 'false'}\n                      aria-disabled={monthDisabled ? 'true' : undefined}\n                      onClick={() => !monthDisabled && this.handleMonthSelect(idx)}\n                    >\n                      {name}\n                    </div>\n                  );\n                })}\n              </div>\n            )}\n            {this.type === 'year' && (\n              <div class=\"hb-date-picker__body hb-date-picker__year-grid\" role=\"grid\">\n                {(() => {\n                  const startYear = Math.floor(panelAnchor.getFullYear() / 12) * 12;\n                  const years: number[] = [];\n                  for (let i = 0; i < 12; i++) years.push(startYear + i);\n                  return years.map(y => {\n                    const probe = new Date(y, 0, 1);\n                    const yearDisabled = !!this.disabledDate && this.disabledDate(probe);\n                    const isSelected = !!this.selectedDate && this.selectedDate.getFullYear() === y;\n                    return (\n                      <div\n                        class={{\n                          'hb-date-picker__year-cell': true,\n                          'hb-date-picker__year-cell--selected': isSelected,\n                          'hb-date-picker__year-cell--disabled': yearDisabled,\n                        }}\n                        role=\"gridcell\"\n                        aria-selected={isSelected ? 'true' : 'false'}\n                        aria-disabled={yearDisabled ? 'true' : undefined}\n                        onClick={() => !yearDisabled && this.handleYearSelect(y)}\n                      >\n                        {y}\n                      </div>\n                    );\n                  });\n                })()}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/DatePicker/date-picker.css

@@ -58,17 +58,36 @@
 .hb-date-picker__clear {
   margin-right: 8px;
   cursor: pointer;
-  font-size: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
   color: var(--hb-color-text-placeholder, #c0c4cc);
   transition: color 0.2s;
 }
 
+.hb-date-picker__clear svg {
+  width: 100%;
+  height: 100%;
+}
+
 .hb-date-picker__clear:hover {
   color: var(--hb-color-text-regular, #606266);
 }
 
 .hb-date-picker__icon {
-  font-size: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  color: var(--hb-color-text-placeholder, #c0c4cc);
+}
+
+.hb-date-picker__icon svg {
+  width: 100%;
+  height: 100%;
 }
 
 .hb-date-picker__dropdown {
@@ -207,3 +226,45 @@
   cursor: not-allowed;
 }
 
+/* ---- type=month / type=year 选择网格 ---- */
+.hb-date-picker__month-grid,
+.hb-date-picker__year-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  padding: 8px 12px;
+}
+
+.hb-date-picker__month-cell,
+.hb-date-picker__year-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  font-size: var(--hb-cascader-font-size, 14px);
+  color: var(--hb-color-text-regular, #606266);
+  border-radius: 4px;
+  cursor: pointer;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
+  user-select: none;
+}
+
+.hb-date-picker__month-cell:hover:not(.hb-date-picker__month-cell--disabled),
+.hb-date-picker__year-cell:hover:not(.hb-date-picker__year-cell--disabled) {
+  background-color: var(--hb-fill-color-light, #f5f7fa);
+}
+
+.hb-date-picker__month-cell--selected,
+.hb-date-picker__year-cell--selected {
+  color: var(--hb-color-primary, #1677ff);
+  font-weight: 600;
+  background-color: var(--hb-color-primary-bg, #e6f4ff);
+}
+
+.hb-date-picker__month-cell--disabled,
+.hb-date-picker__year-cell--disabled {
+  color: var(--hb-color-text-disabled, #c0c4cc);
+  cursor: not-allowed;
+}

package/dist/collection/components/DatePickerPane/DatePickerPane.js

@@ -99,7 +99,7 @@ export class DatePickerPane {
     }
     render() {
         const current = this.selectedDate || new Date();
-        return (h("div", { key: '2259a27d8de2d7944a83a85c2fb2281d22d7f62e', class: "hb-date-picker-pane" }, h("div", { key: '8c27820ac2eeb5a39be44f828879c98a33f89e91', class: "hb-date-picker-pane__header" }, h("button", { key: 'ea7060e14f917bc003303d2dd2d680c3de24d62a', type: "button", class: "hb-date-picker-pane__prev-btn", "aria-label": "\u4E0A\u4E00\u4E2A", onClick: this.handlePrev }, "\u2039"), h("button", { key: '020b053fcfed2384ab62b3c8b408c47864f54a57', type: "button", class: "hb-date-picker-pane__header-label", "aria-live": "polite", onClick: this.handleHeaderTitleClick }, this.getHeaderTitle()), h("button", { key: '055a6e6d191c2c2e29f3d459c27a8007086de7ee', type: "button", class: "hb-date-picker-pane__next-btn", "aria-label": "\u4E0B\u4E00\u4E2A", onClick: this.handleNext }, "\u203A")), this.view === 'days' && this.renderDaysView(), this.view === 'months' && this.renderMonthsView(current), this.view === 'years' && this.renderYearsView(current)));
+        return (h("div", { key: 'e85553514263ff1112d1d3a519f6e283f03e4eca', class: "hb-date-picker-pane" }, h("div", { key: '05f8dff146116f3f4e5b09ab1a16bba45bf81b55', class: "hb-date-picker-pane__header" }, h("button", { key: 'eff475c34cd894a60564e63feef88de2f86ca5eb', type: "button", class: "hb-date-picker-pane__prev-btn", "aria-label": "\u4E0A\u4E00\u4E2A", onClick: this.handlePrev }, "\u2039"), h("button", { key: 'da0443845d09f85ae024ef2dd66c65141f4fdd22', type: "button", class: "hb-date-picker-pane__header-label", "aria-live": "polite", onClick: this.handleHeaderTitleClick }, this.getHeaderTitle()), h("button", { key: 'd15be17b942f15bfcb58a43afa1c31aeed8fcd18', type: "button", class: "hb-date-picker-pane__next-btn", "aria-label": "\u4E0B\u4E00\u4E2A", onClick: this.handleNext }, "\u203A")), this.view === 'days' && this.renderDaysView(), this.view === 'months' && this.renderMonthsView(current), this.view === 'years' && this.renderYearsView(current)));
     }
     renderDaysView() {
         const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);

package/dist/collection/components/DateRangePicker/DateRangePicker.js

@@ -195,12 +195,12 @@ export class DateRangePicker {
     render() {
         const rightViewDate = addMonths(this.leftViewDate, 1);
         const showClear = this.clearable && !!this.startDate && !!this.endDate && !this.disabled;
-        return (h("div", { key: 'ab2b71304782a01f2cc8ac7330a20a3172c17fd5', class: {
+        return (h("div", { key: '2449050b8a140dcd90e5760813ec8fd430e1f86e', class: {
                 'hb-date-range-picker': true,
                 'hb-date-range-picker--open': this.isOpen,
                 'hb-date-range-picker--disabled': this.disabled,
                 [`hb-date-range-picker--${this.size}`]: true,
-            } }, h("div", { key: '8e0bdbd8de6b7881e555072c84689654e3a43a17', class: "hb-date-range-picker__input-wrapper", onClick: this.handleTriggerClick }, h("input", { key: '478634c74c6f001c0213e1591497679618f0c30c', type: "text", name: this.name, class: "hb-date-range-picker__input", placeholder: this.placeholder[0] || '开始日期', value: this.displayStart, disabled: this.disabled, readonly: true }), h("span", { key: 'bb7827695f0cbab0267f704bf89b17df3bb6e87a', class: "hb-date-range-picker__separator" }, "\u81F3"), h("input", { key: '010d1e8d5ebfc98a892ecb00a1489fbc9d59f7f0', type: "text", class: "hb-date-range-picker__input", placeholder: this.placeholder[1] || '结束日期', value: this.displayEnd, disabled: this.disabled, readonly: true }), h("span", { key: 'fe43d0f5ddbd4c80a9cecf1c49e2bc4cab2f9f5b', class: "hb-date-range-picker__suffix" }, showClear && (h("span", { key: 'e215b4eb8bde0de50f17092527cd882381188f2a', class: "hb-date-range-picker__clear", onClick: this.handleClear }, "\u00D7")), h("span", { key: 'f7610ce152b6b61b8014b6cba213188bb1f4ad4a', class: "hb-date-range-picker__icon" }, "\uD83D\uDCC5"))), this.isOpen && (h("div", { key: '72045b3c598a61515e8d7d0ea15a3865b9efaf20', class: "hb-date-range-picker__dropdown" }, this.renderMonth(this.leftViewDate, 'left'), this.renderMonth(rightViewDate, 'right')))));
+            } }, h("div", { key: 'de9e91f0a42b8ddaf6b1157e0a4784e01e37ecbb', class: "hb-date-range-picker__input-wrapper", onClick: this.handleTriggerClick }, h("input", { key: 'c4d214489d6b01061889d04f83460802758fcd21', type: "text", name: this.name, class: "hb-date-range-picker__input", placeholder: this.placeholder[0] || '开始日期', value: this.displayStart, disabled: this.disabled, readonly: true }), h("span", { key: '40db9eb30725498a6d4860c6916c0f10b7787d02', class: "hb-date-range-picker__separator" }, "\u81F3"), h("input", { key: 'b8dbe546d411b21fab4a8c8e341c59315d8694e7', type: "text", class: "hb-date-range-picker__input", placeholder: this.placeholder[1] || '结束日期', value: this.displayEnd, disabled: this.disabled, readonly: true }), h("span", { key: 'dde8b66f4deacb6d7c7339a88b7403a650a2d985', class: "hb-date-range-picker__suffix" }, showClear && (h("span", { key: '984e99ed8af3de2d525cbb7d483af0a006fd77b9', class: "hb-date-range-picker__clear", onClick: this.handleClear }, "\u00D7")), h("span", { key: 'ca489ea7075035a405554477a525eb21f74ac72c', class: "hb-date-range-picker__icon" }, "\uD83D\uDCC5"))), this.isOpen && (h("div", { key: '3c53193d613b99f6ba3e7067ecf4a64cb948251f', class: "hb-date-range-picker__dropdown" }, this.renderMonth(this.leftViewDate, 'left'), this.renderMonth(rightViewDate, 'right')))));
     }
     static get is() { return "hb-date-range-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/DateTimePicker/DateTimePicker.js

@@ -97,12 +97,12 @@ export class DateTimePicker {
         const hours = Array.from({ length: 24 }, (_, i) => i);
         const minutes = Array.from({ length: 60 }, (_, i) => i);
         const seconds = Array.from({ length: 60 }, (_, i) => i);
-        return (h("div", { key: '9163e484f86c08e64bde83efde16cee218c91d7d', class: {
+        return (h("div", { key: '55bfc24d36320660882db41b17902564989c11ad', class: {
                 'hb-date-time-picker': true,
                 'hb-date-time-picker--open': this.isOpen,
                 'hb-date-time-picker--disabled': this.disabled,
                 [`hb-date-time-picker--${this.size}`]: true,
-            } }, h("div", { key: '27f1ce225146eadc2cea57a7190a8ec692f29694', class: "hb-date-time-picker__input-wrapper", onClick: this.handleInputClick }, h("input", { key: 'c42a6797f717a3fe27544307b2c94958f18df9a7', type: "text", id: this.inputId, name: this.name, class: "hb-date-time-picker__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: true }), h("span", { key: '30210b48b776ae5417cdaec2e956d9d071be3e60', class: "hb-date-time-picker__suffix" }, this.clearable && this.modelValue && (h("span", { key: '5b32d6ccbba09273cfecc84f1b400b5d282b1e87', class: "hb-date-time-picker__clear", onClick: this.handleClear }, "\u00D7")), h("span", { key: 'ec7c2a97de3147de92a7e0229c5830db801e7eb7', class: "hb-date-time-picker__icon" }, "\uD83D\uDCC5"))), this.isOpen && (h("div", { key: '6d54ed7b5001d0ab43342062d68152f6cd55d2d2', class: "hb-date-time-picker__dropdown" }, this.currentView === 'date' ? ([
+            } }, h("div", { key: 'cc339767373fdc5adc383e0c50a42df290a0dbf5', class: "hb-date-time-picker__input-wrapper", onClick: this.handleInputClick }, h("input", { key: '52de52179b54f039661a6d0cc2469567dbad1c8f', type: "text", id: this.inputId, name: this.name, class: "hb-date-time-picker__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: true }), h("span", { key: '9e5f570884d0f5bc9e8715ac79f3117646a8a7c8', class: "hb-date-time-picker__suffix" }, this.clearable && this.modelValue && (h("span", { key: '8480660a74eb665b5b987fda8aeb8ef38878e110', class: "hb-date-time-picker__clear", onClick: this.handleClear }, "\u00D7")), h("span", { key: 'eb4910df6ca2df24fa2d91f6900180dc1fba4aa5', class: "hb-date-time-picker__icon" }, "\uD83D\uDCC5"))), this.isOpen && (h("div", { key: '69a2a1438cd788ad6a070c0bf170f75ac5204e8f', class: "hb-date-time-picker__dropdown" }, this.currentView === 'date' ? ([
             h("div", { class: "hb-date-time-picker__header" }, h("button", { type: "button", class: "hb-date-time-picker__prev-btn", onClick: () => this.changeMonth(-1) }, "\u2039"), h("span", { class: "hb-date-time-picker__header-label" }, current.getFullYear(), "\u5E74 ", MONTH_NAMES[current.getMonth()]), h("button", { type: "button", class: "hb-date-time-picker__next-btn", onClick: () => this.changeMonth(1) }, "\u203A")),
             h("div", { class: "hb-date-time-picker__body" }, h("div", { class: "hb-date-time-picker__weekdays" }, WEEK_DAY_NAMES.map(day => h("div", { class: "hb-date-time-picker__weekday" }, day))), h("div", { class: "hb-date-time-picker__days" }, days.map((day, index) => (h("div", { key: index, class: {
                     'hb-date-time-picker__day': true,

package/dist/collection/components/Descriptions/Descriptions.js

@@ -15,7 +15,7 @@ export class Descriptions {
     /** 描述项数组 */
     items = [];
     render() {
-        return (h("div", { key: 'bc13fcaa734ea3830c26a296e219dc90c4c453eb', class: { 'hb-descriptions': true, 'hb-descriptions--bordered': this.border } }, this.title && h("div", { key: 'e64aba674b0f6d7e460f00c0f786b670dc92da0f', class: "hb-descriptions__title" }, this.title), h("div", { key: '4cca9b0c834a60baf81d8668f79302934817f395', class: "hb-descriptions__view" }, h("div", { key: '9c321483b77f58ecb2b8bbdfba9049b7cdd11c73', class: "hb-descriptions__row", style: { gridTemplateColumns: `repeat(${this.column}, minmax(0, 1fr))` } }, this.items.map((item) => (h("div", { class: "hb-descriptions__item", style: item.span ? { gridColumn: `span ${item.span}` } : undefined }, h("span", { class: "hb-descriptions__label" }, item.label, this.colon && h("span", { class: "hb-descriptions__colon" }, "\uFF1A")), h("span", { class: "hb-descriptions__value" }, item.value))))))));
+        return (h("div", { key: '8eca1aa5621202c1e88d866e1eeab1246dce7294', class: { 'hb-descriptions': true, 'hb-descriptions--bordered': this.border } }, this.title && h("div", { key: 'b928e6f3e2cd9bc24fa5c84dd3c57b4f198c6514', class: "hb-descriptions__title" }, this.title), h("div", { key: '56ac04c6f168efdf5c67b71eaa959205d52bafdc', class: "hb-descriptions__view" }, h("div", { key: '3b2b1d157ee5220e27dab7460fa61447bec29c08', class: "hb-descriptions__row", style: { gridTemplateColumns: `repeat(${this.column}, minmax(0, 1fr))` } }, this.items.map((item) => (h("div", { class: "hb-descriptions__item", style: item.span ? { gridColumn: `span ${item.span}` } : undefined }, h("span", { class: "hb-descriptions__label" }, item.label, this.colon && h("span", { class: "hb-descriptions__colon" }, "\uFF1A")), h("span", { class: "hb-descriptions__value" }, item.value))))))));
     }
     static get is() { return "hb-descriptions"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/Descriptions/descriptions.css

@@ -1,4 +1,6 @@
-:host { display: block; }
+:host {
+  display: block;
+}
 .hb-descriptions {
   font-size: var(--hb-font-size-sm);
   color: var(--hb-color-text);
@@ -11,7 +13,9 @@
   color: var(--hb-color-text-primary);
   margin-bottom: var(--hb-spacing-sm);
 }
-.hb-descriptions__view { width: 100%; }
+.hb-descriptions__view {
+  width: 100%;
+}
 .hb-descriptions__row {
   display: grid;
   gap: 0;
@@ -22,11 +26,13 @@
   padding: var(--hb-spacing-sm) var(--hb-spacing-md);
   border-bottom: 1px solid var(--hb-color-border-secondary);
 }
-.hb-descriptions__row .hb-descriptions__item:nth-last-child(-n+3):not(:nth-last-child(1)) {
+.hb-descriptions__row .hb-descriptions__item:nth-last-child(-n + 3):not(:nth-last-child(1)) {
   /* 保留默认下边框，最后一项由下方规则移除 */
 }
 /* 简化：最后一个 item 无下边框 */
-.hb-descriptions__row .hb-descriptions__item:last-child { border-bottom: none; }
+.hb-descriptions__row .hb-descriptions__item:last-child {
+  border-bottom: none;
+}
 
 .hb-descriptions__label {
   color: var(--hb-color-text-secondary);
@@ -34,7 +40,9 @@
   margin-right: var(--hb-spacing-sm);
   flex-shrink: 0;
 }
-.hb-descriptions__colon { margin-left: 0; }
+.hb-descriptions__colon {
+  margin-left: 0;
+}
 .hb-descriptions__value {
   color: var(--hb-color-text);
   word-break: break-all;
@@ -45,8 +53,42 @@
   border: 1px solid var(--hb-color-border-secondary);
   overflow: hidden;
 }
-.hb-descriptions--bordered .hb-descriptions__title { padding: var(--hb-spacing-sm) var(--hb-spacing-md); margin-bottom: 0; border-bottom: 1px solid var(--hb-color-border-secondary); }
-.hb-descriptions--bordered .hb-descriptions__item { border-right: 1px solid var(--hb-color-border-secondary); }
-.hb-descriptions--bordered .hb-descriptions__item:nth-child(3n) { border-right: none; }
-.hb-descriptions--bordered .hb-descriptions__item { padding: var(--hb-spacing-sm) var(--hb-spacing-md); }
-.hb-descriptions--bordered .hb-descriptions__item:last-child { border-bottom: none; }
+.hb-descriptions--bordered .hb-descriptions__title {
+  padding: var(--hb-spacing-sm) var(--hb-spacing-md);
+  margin-bottom: 0;
+  border-bottom: 1px solid var(--hb-color-border-secondary);
+}
+.hb-descriptions--bordered .hb-descriptions__item {
+  border-right: 1px solid var(--hb-color-border-secondary);
+}
+.hb-descriptions--bordered .hb-descriptions__item:nth-child(3n) {
+  border-right: none;
+}
+.hb-descriptions--bordered .hb-descriptions__item {
+  padding: var(--hb-spacing-sm) var(--hb-spacing-md);
+}
+.hb-descriptions--bordered .hb-descriptions__item:last-child {
+  border-bottom: none;
+}
+
+/* ============================================================
+ * 响应式（移动端）：小屏 descriptions 改为单列纵向堆叠，
+ * label 与 value 上下排列，避免横向挤压。
+ * ============================================================ */
+@media (max-width: 575.98px) {
+  .hb-descriptions__row {
+    grid-template-columns: 1fr !important;
+  }
+
+  .hb-descriptions__item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--hb-spacing-xxs, 2px);
+  }
+
+  .hb-descriptions__label {
+    margin-right: 0;
+    margin-bottom: var(--hb-spacing-xxs, 2px);
+    font-weight: 500;
+  }
+}