huibo-ui 0.3.0

package/dist/collection/components/Tour/tour.css

@@ -0,0 +1,117 @@
+:host {
+  display: block;
+}
+
+.hb-tour {
+  position: fixed;
+  inset: 0;
+  z-index: var(--hb-z-index-popover);
+  pointer-events: auto;
+}
+
+/* 镂空遮罩（box-shadow 多段方案；jsdom 下退化为纯色遮罩） */
+.hb-tour__mask {
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  cursor: default;
+}
+
+.hb-tour__card {
+  position: absolute;
+  width: 340px;
+  max-width: calc(100vw - 32px);
+  padding: var(--hb-spacing-lg);
+  background-color: var(--hb-color-bg-elevated);
+  border-radius: var(--hb-border-radius-base);
+  box-shadow: var(--hb-box-shadow-lg);
+  color: var(--hb-color-text);
+  font-size: var(--hb-font-size-sm);
+  z-index: 1;
+}
+
+.hb-tour__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--hb-spacing-sm);
+}
+
+.hb-tour__title {
+  font-size: var(--hb-font-size-lg);
+  font-weight: 600;
+  color: var(--hb-color-text-primary);
+}
+
+.hb-tour__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: var(--hb-color-text-tertiary);
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  border-radius: 50%;
+  transition: background-color var(--hb-transition-duration), color var(--hb-transition-duration);
+}
+.hb-tour__close:hover {
+  background-color: var(--hb-color-fill-tertiary);
+  color: var(--hb-color-text-secondary);
+}
+
+.hb-tour__body {
+  color: var(--hb-color-text-secondary);
+  line-height: 1.6;
+  margin-bottom: var(--hb-spacing-lg);
+}
+
+.hb-tour__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.hb-tour__indicator {
+  color: var(--hb-color-text-tertiary);
+  font-size: var(--hb-font-size-xs);
+}
+
+.hb-tour__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hb-spacing-xs);
+}
+
+.hb-tour__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 var(--hb-spacing-lg);
+  font-size: var(--hb-font-size-sm);
+  border-radius: var(--hb-border-radius-base);
+  border: 1px solid var(--hb-color-border);
+  background-color: var(--hb-color-bg-elevated);
+  color: var(--hb-color-text);
+  cursor: pointer;
+  transition: all var(--hb-transition-duration);
+}
+.hb-tour__btn:hover {
+  color: var(--hb-color-primary);
+  border-color: var(--hb-color-primary-border);
+}
+
+.hb-tour__btn--next {
+  background-color: var(--hb-color-primary);
+  border-color: var(--hb-color-primary);
+  color: var(--hb-color-text-inverse);
+}
+.hb-tour__btn--next:hover {
+  background-color: var(--hb-color-primary-hover);
+  border-color: var(--hb-color-primary-hover);
+  color: var(--hb-color-text-inverse);
+}

package/dist/collection/components/Transfer/Transfer.js

@@ -0,0 +1,331 @@
+import { h } from "@stencil/core";
+/**
+ * Transfer 穿梭框组件
+ * 双栏列表选择，勾选项后通过中间按钮在两栏间移动
+ */
+export class Transfer {
+    /**
+     * 数据源
+     */
+    data = [];
+    /**
+     * 右侧（目标列表）的 keys
+     */
+    targetKeys = [];
+    /**
+     * 两侧已勾选的 keys
+     */
+    selectedKeys = [];
+    /**
+     * 标题，[源列表标题, 目标列表标题]
+     * @default ['源列表', '目标列表']
+     */
+    titles = ['源列表', '目标列表'];
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 是否显示搜索框
+     * @default false
+     */
+    filterable = false;
+    /**
+     * 右侧列表变化事件
+     */
+    hbChange;
+    leftFilter = '';
+    rightFilter = '';
+    handleSelectedKeysChange() {
+        /* 触发重渲染 */
+    }
+    /** 左侧列表：key 不在 targetKeys 中 */
+    get leftList() {
+        return this.data.filter((item) => !this.targetKeys.includes(item.key));
+    }
+    /** 右侧列表：key 在 targetKeys 中 */
+    get rightList() {
+        const targetSet = new Set(this.targetKeys);
+        return this.data.filter((item) => targetSet.has(item.key));
+    }
+    /** 当前列表项是否被勾选 */
+    isSelected(key) {
+        return this.selectedKeys.includes(key);
+    }
+    /** 切换某项的勾选状态 */
+    toggleItem = (item) => {
+        if (this.disabled || item.disabled)
+            return;
+        const isSelected = this.isSelected(item.key);
+        this.selectedKeys = isSelected
+            ? this.selectedKeys.filter((k) => k !== item.key)
+            : [...this.selectedKeys, item.key];
+    };
+    /** 获取某侧可勾选（非 disabled）的全部 keys */
+    getSelectableKeys(list) {
+        return list.filter((item) => !item.disabled).map((item) => item.key);
+    }
+    /** 计算某侧全选 checkbox 状态：'all' | 'none' | 'indeterminate' */
+    getCheckAllState(list) {
+        const selectableKeys = this.getSelectableKeys(list);
+        if (selectableKeys.length === 0)
+            return 'none';
+        const selectedCount = selectableKeys.filter((k) => this.isSelected(k)).length;
+        if (selectedCount === 0)
+            return 'none';
+        if (selectedCount === selectableKeys.length)
+            return 'all';
+        return 'indeterminate';
+    }
+    /** 切换某侧全选 */
+    toggleCheckAll = (list) => {
+        if (this.disabled)
+            return;
+        const selectableKeys = this.getSelectableKeys(list);
+        const state = this.getCheckAllState(list);
+        if (state === 'all') {
+            // 取消该侧全部勾选
+            this.selectedKeys = this.selectedKeys.filter((k) => !selectableKeys.includes(k));
+        }
+        else {
+            // 勾选该侧全部（合并去重）
+            const merged = new Set([...this.selectedKeys, ...selectableKeys]);
+            this.selectedKeys = Array.from(merged);
+        }
+    };
+    /** 向右移动：把左侧已勾选的项移到右侧 */
+    moveToRight = () => {
+        if (this.disabled)
+            return;
+        const leftSelected = this.leftList
+            .filter((item) => this.isSelected(item.key) && !item.disabled)
+            .map((item) => item.key);
+        if (leftSelected.length === 0)
+            return;
+        // 合并到 targetKeys（保持 data 中的顺序）
+        const targetSet = new Set([...this.targetKeys, ...leftSelected]);
+        this.targetKeys = this.data
+            .filter((item) => targetSet.has(item.key))
+            .map((item) => item.key);
+        // 清除已移动项的勾选
+        this.selectedKeys = this.selectedKeys.filter((k) => !leftSelected.includes(k));
+        this.hbChange.emit({ targetKeys: this.targetKeys });
+    };
+    /** 向左移动：把右侧已勾选的项移回左侧 */
+    moveToLeft = () => {
+        if (this.disabled)
+            return;
+        const rightSelected = this.rightList
+            .filter((item) => this.isSelected(item.key) && !item.disabled)
+            .map((item) => item.key);
+        if (rightSelected.length === 0)
+            return;
+        const removeSet = new Set(rightSelected);
+        this.targetKeys = this.targetKeys.filter((k) => !removeSet.has(k));
+        // 清除已移动项的勾选
+        this.selectedKeys = this.selectedKeys.filter((k) => !removeSet.has(k));
+        this.hbChange.emit({ targetKeys: this.targetKeys });
+    };
+    /** 列表项过滤 */
+    filterList(list, keyword) {
+        if (!keyword)
+            return list;
+        const lower = keyword.toLowerCase();
+        return list.filter((item) => item.title.toLowerCase().includes(lower));
+    }
+    renderList = (list, title, filterValue, onFilter) => {
+        const filteredList = this.filterList(list, filterValue);
+        const selectableKeys = this.getSelectableKeys(list);
+        const selectedCount = selectableKeys.filter((k) => this.isSelected(k)).length;
+        const checkAllState = this.getCheckAllState(list);
+        return (h("div", { class: { 'hb-transfer__panel': true, 'hb-transfer__panel--disabled': this.disabled } }, h("div", { class: "hb-transfer__panel-header" }, h("label", { class: "hb-transfer__check-all" }, h("input", { type: "checkbox", class: "hb-transfer__check-all-input", checked: checkAllState === 'all', disabled: this.disabled || selectableKeys.length === 0, onChange: () => this.toggleCheckAll(list) }), h("span", null, selectedCount > 0 ? `${selectedCount}/` : '', selectableKeys.length, " \u9879")), h("span", { class: "hb-transfer__panel-title" }, title)), this.filterable && (h("div", { class: "hb-transfer__panel-filter" }, h("input", { type: "text", class: "hb-transfer__filter-input", placeholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9", value: filterValue, disabled: this.disabled, onInput: onFilter }))), h("div", { class: "hb-transfer__panel-body" }, filteredList.length === 0 ? (h("div", { class: "hb-transfer__empty" }, "\u65E0\u6570\u636E")) : (filteredList.map((item) => (h("label", { class: {
+                'hb-transfer__item': true,
+                'hb-transfer__item--checked': this.isSelected(item.key),
+                'hb-transfer__item--disabled': this.disabled || !!item.disabled,
+            } }, h("input", { type: "checkbox", class: "hb-transfer__item-input", checked: this.isSelected(item.key), disabled: this.disabled || !!item.disabled, onChange: () => this.toggleItem(item) }), h("span", { class: "hb-transfer__item-title" }, item.title))))))));
+    };
+    render() {
+        const leftCheckAllState = this.getCheckAllState(this.leftList);
+        const rightCheckAllState = this.getCheckAllState(this.rightList);
+        return (h("div", { key: 'e8b42f296636c208e67adb4dfd105f72ccd96406', class: { 'hb-transfer': true, 'hb-transfer--disabled': this.disabled } }, this.renderList(this.leftList, this.titles[0], this.leftFilter, (e) => {
+            this.leftFilter = e.target.value;
+        }), h("div", { key: 'fbb9d1ab5a4782e2d7be4e5ba8b6d2378cf5dd4f', class: "hb-transfer__operations" }, h("button", { key: '8c598127a30fc7cc82711ccbc5ae695363f20eeb', type: "button", class: "hb-transfer__operation-btn", disabled: this.disabled || rightCheckAllState === 'none', onClick: this.moveToLeft, "aria-label": "\u5411\u5DE6\u79FB\u52A8" }, "\u2039"), h("button", { key: '95ab5ae8b686fc032a7e88e4d798d0190a7163ed', type: "button", class: "hb-transfer__operation-btn", disabled: this.disabled || leftCheckAllState === 'none', onClick: this.moveToRight, "aria-label": "\u5411\u53F3\u79FB\u52A8" }, "\u203A")), this.renderList(this.rightList, this.titles[1], this.rightFilter, (e) => {
+            this.rightFilter = e.target.value;
+        })));
+    }
+    static get is() { return "hb-transfer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["transfer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["transfer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TransferDataItem[]",
+                    "resolved": "TransferDataItem[]",
+                    "references": {
+                        "TransferDataItem": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Transfer/Transfer.tsx",
+                            "id": "src/components/Transfer/Transfer.tsx::TransferDataItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6570\u636E\u6E90"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "targetKeys": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u53F3\u4FA7\uFF08\u76EE\u6807\u5217\u8868\uFF09\u7684 keys"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "selectedKeys": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u4E24\u4FA7\u5DF2\u52FE\u9009\u7684 keys"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "titles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "[string, string]",
+                    "resolved": "[string, string]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "['\u6E90\u5217\u8868', '\u76EE\u6807\u5217\u8868']"
+                        }],
+                    "text": "\u6807\u9898\uFF0C[\u6E90\u5217\u8868\u6807\u9898, \u76EE\u6807\u5217\u8868\u6807\u9898]"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "['\u6E90\u5217\u8868', '\u76EE\u6807\u5217\u8868']"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u7981\u7528"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "filterable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u663E\u793A\u641C\u7D22\u6846"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "filterable",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "leftFilter": {},
+            "rightFilter": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbChange",
+                "name": "hbChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u53F3\u4FA7\u5217\u8868\u53D8\u5316\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "{ targetKeys: string[] }",
+                    "resolved": "{ targetKeys: string[]; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "selectedKeys",
+                "methodName": "handleSelectedKeysChange"
+            }];
+    }
+}
+//# sourceMappingURL=Transfer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Transfer.js","sourceRoot":"","sources":["../../../src/components/Transfer/Transfer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n/**\n * Transfer 数据项\n */\nexport interface TransferDataItem {\n  key: string;\n  title: string;\n  disabled?: boolean;\n}\n\n/**\n * Transfer 穿梭框组件\n * 双栏列表选择，勾选项后通过中间按钮在两栏间移动\n */\n@Component({\n  tag: 'hb-transfer',\n  styleUrl: 'transfer.css',\n  shadow: true,\n})\nexport class Transfer {\n  /**\n   * 数据源\n   */\n  @Prop() data: TransferDataItem[] = [];\n\n  /**\n   * 右侧（目标列表）的 keys\n   */\n  @Prop({ mutable: true }) targetKeys: string[] = [];\n\n  /**\n   * 两侧已勾选的 keys\n   */\n  @Prop({ mutable: true }) selectedKeys: string[] = [];\n\n  /**\n   * 标题，[源列表标题, 目标列表标题]\n   * @default ['源列表', '目标列表']\n   */\n  @Prop() titles: [string, string] = ['源列表', '目标列表'];\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否显示搜索框\n   * @default false\n   */\n  @Prop() filterable: boolean = false;\n\n  /**\n   * 右侧列表变化事件\n   */\n  @Event() hbChange: EventEmitter<{ targetKeys: string[] }>;\n\n  @State() leftFilter: string = '';\n  @State() rightFilter: string = '';\n\n  @Watch('selectedKeys')\n  handleSelectedKeysChange() {\n    /* 触发重渲染 */\n  }\n\n  /** 左侧列表：key 不在 targetKeys 中 */\n  private get leftList(): TransferDataItem[] {\n    return this.data.filter((item) => !this.targetKeys.includes(item.key));\n  }\n\n  /** 右侧列表：key 在 targetKeys 中 */\n  private get rightList(): TransferDataItem[] {\n    const targetSet = new Set(this.targetKeys);\n    return this.data.filter((item) => targetSet.has(item.key));\n  }\n\n  /** 当前列表项是否被勾选 */\n  private isSelected(key: string): boolean {\n    return this.selectedKeys.includes(key);\n  }\n\n  /** 切换某项的勾选状态 */\n  private toggleItem = (item: TransferDataItem) => {\n    if (this.disabled || item.disabled) return;\n    const isSelected = this.isSelected(item.key);\n    this.selectedKeys = isSelected\n      ? this.selectedKeys.filter((k) => k !== item.key)\n      : [...this.selectedKeys, item.key];\n  };\n\n  /** 获取某侧可勾选（非 disabled）的全部 keys */\n  private getSelectableKeys(list: TransferDataItem[]): string[] {\n    return list.filter((item) => !item.disabled).map((item) => item.key);\n  }\n\n  /** 计算某侧全选 checkbox 状态：'all' | 'none' | 'indeterminate' */\n  private getCheckAllState(list: TransferDataItem[]): 'all' | 'none' | 'indeterminate' {\n    const selectableKeys = this.getSelectableKeys(list);\n    if (selectableKeys.length === 0) return 'none';\n    const selectedCount = selectableKeys.filter((k) => this.isSelected(k)).length;\n    if (selectedCount === 0) return 'none';\n    if (selectedCount === selectableKeys.length) return 'all';\n    return 'indeterminate';\n  }\n\n  /** 切换某侧全选 */\n  private toggleCheckAll = (list: TransferDataItem[]) => {\n    if (this.disabled) return;\n    const selectableKeys = this.getSelectableKeys(list);\n    const state = this.getCheckAllState(list);\n    if (state === 'all') {\n      // 取消该侧全部勾选\n      this.selectedKeys = this.selectedKeys.filter((k) => !selectableKeys.includes(k));\n    } else {\n      // 勾选该侧全部（合并去重）\n      const merged = new Set([...this.selectedKeys, ...selectableKeys]);\n      this.selectedKeys = Array.from(merged);\n    }\n  };\n\n  /** 向右移动：把左侧已勾选的项移到右侧 */\n  private moveToRight = () => {\n    if (this.disabled) return;\n    const leftSelected = this.leftList\n      .filter((item) => this.isSelected(item.key) && !item.disabled)\n      .map((item) => item.key);\n    if (leftSelected.length === 0) return;\n    // 合并到 targetKeys（保持 data 中的顺序）\n    const targetSet = new Set([...this.targetKeys, ...leftSelected]);\n    this.targetKeys = this.data\n      .filter((item) => targetSet.has(item.key))\n      .map((item) => item.key);\n    // 清除已移动项的勾选\n    this.selectedKeys = this.selectedKeys.filter((k) => !leftSelected.includes(k));\n    this.hbChange.emit({ targetKeys: this.targetKeys });\n  };\n\n  /** 向左移动：把右侧已勾选的项移回左侧 */\n  private moveToLeft = () => {\n    if (this.disabled) return;\n    const rightSelected = this.rightList\n      .filter((item) => this.isSelected(item.key) && !item.disabled)\n      .map((item) => item.key);\n    if (rightSelected.length === 0) return;\n    const removeSet = new Set(rightSelected);\n    this.targetKeys = this.targetKeys.filter((k) => !removeSet.has(k));\n    // 清除已移动项的勾选\n    this.selectedKeys = this.selectedKeys.filter((k) => !removeSet.has(k));\n    this.hbChange.emit({ targetKeys: this.targetKeys });\n  };\n\n  /** 列表项过滤 */\n  private filterList(list: TransferDataItem[], keyword: string): TransferDataItem[] {\n    if (!keyword) return list;\n    const lower = keyword.toLowerCase();\n    return list.filter((item) => item.title.toLowerCase().includes(lower));\n  }\n\n  private renderList = (\n    list: TransferDataItem[],\n    title: string,\n    filterValue: string,\n    onFilter: (e: Event) => void,\n  ) => {\n    const filteredList = this.filterList(list, filterValue);\n    const selectableKeys = this.getSelectableKeys(list);\n    const selectedCount = selectableKeys.filter((k) => this.isSelected(k)).length;\n    const checkAllState = this.getCheckAllState(list);\n\n    return (\n      <div class={{ 'hb-transfer__panel': true, 'hb-transfer__panel--disabled': this.disabled }}>\n        <div class=\"hb-transfer__panel-header\">\n          <label class=\"hb-transfer__check-all\">\n            <input\n              type=\"checkbox\"\n              class=\"hb-transfer__check-all-input\"\n              checked={checkAllState === 'all'}\n              disabled={this.disabled || selectableKeys.length === 0}\n              onChange={() => this.toggleCheckAll(list)}\n            />\n            <span>{selectedCount > 0 ? `${selectedCount}/` : ''}{selectableKeys.length} 项</span>\n          </label>\n          <span class=\"hb-transfer__panel-title\">{title}</span>\n        </div>\n\n        {this.filterable && (\n          <div class=\"hb-transfer__panel-filter\">\n            <input\n              type=\"text\"\n              class=\"hb-transfer__filter-input\"\n              placeholder=\"请输入搜索内容\"\n              value={filterValue}\n              disabled={this.disabled}\n              onInput={onFilter}\n            />\n          </div>\n        )}\n\n        <div class=\"hb-transfer__panel-body\">\n          {filteredList.length === 0 ? (\n            <div class=\"hb-transfer__empty\">无数据</div>\n          ) : (\n            filteredList.map((item) => (\n              <label\n                class={{\n                  'hb-transfer__item': true,\n                  'hb-transfer__item--checked': this.isSelected(item.key),\n                  'hb-transfer__item--disabled': this.disabled || !!item.disabled,\n                }}\n              >\n                <input\n                  type=\"checkbox\"\n                  class=\"hb-transfer__item-input\"\n                  checked={this.isSelected(item.key)}\n                  disabled={this.disabled || !!item.disabled}\n                  onChange={() => this.toggleItem(item)}\n                />\n                <span class=\"hb-transfer__item-title\">{item.title}</span>\n              </label>\n            ))\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    const leftCheckAllState = this.getCheckAllState(this.leftList);\n    const rightCheckAllState = this.getCheckAllState(this.rightList);\n\n    return (\n      <div class={{ 'hb-transfer': true, 'hb-transfer--disabled': this.disabled }}>\n        {this.renderList(\n          this.leftList,\n          this.titles[0],\n          this.leftFilter,\n          (e) => {\n            this.leftFilter = (e.target as HTMLInputElement).value;\n          },\n        )}\n\n        <div class=\"hb-transfer__operations\">\n          <button\n            type=\"button\"\n            class=\"hb-transfer__operation-btn\"\n            disabled={this.disabled || rightCheckAllState === 'none'}\n            onClick={this.moveToLeft}\n            aria-label=\"向左移动\"\n          >\n            ‹\n          </button>\n          <button\n            type=\"button\"\n            class=\"hb-transfer__operation-btn\"\n            disabled={this.disabled || leftCheckAllState === 'none'}\n            onClick={this.moveToRight}\n            aria-label=\"向右移动\"\n          >\n            ›\n          </button>\n        </div>\n\n        {this.renderList(\n          this.rightList,\n          this.titles[1],\n          this.rightFilter,\n          (e) => {\n            this.rightFilter = (e.target as HTMLInputElement).value;\n          },\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Transfer/transfer.css

@@ -0,0 +1,183 @@
+:host {
+  display: block;
+}
+
+.hb-transfer {
+  display: flex;
+  align-items: stretch;
+  gap: 12px;
+  font-size: 14px;
+  color: var(--hb-color-text-regular, #606266);
+}
+
+.hb-transfer--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 单栏 */
+.hb-transfer__panel {
+  display: flex;
+  flex-direction: column;
+  width: 220px;
+  max-height: 100%;
+  border: 1px solid var(--hb-border-color, #dcdfe6);
+  border-radius: 4px;
+  background-color: var(--hb-color-white, #ffffff);
+  overflow: hidden;
+}
+
+.hb-transfer__panel--disabled {
+  background-color: var(--hb-fill-color-light, #f5f7fa);
+}
+
+/* 头部：全选 + 标题 */
+.hb-transfer__panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--hb-border-color-lighter, #ebeef5);
+  background-color: var(--hb-fill-color-light, #f5f7fa);
+}
+
+.hb-transfer__check-all {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.hb-transfer__check-all-input {
+  margin: 0;
+  cursor: pointer;
+}
+
+.hb-transfer__panel-title {
+  font-weight: 600;
+  color: var(--hb-color-text-primary, #303133);
+}
+
+/* 搜索框 */
+.hb-transfer__panel-filter {
+  padding: 8px;
+  border-bottom: 1px solid var(--hb-border-color-lighter, #ebeef5);
+}
+
+.hb-transfer__filter-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 10px;
+  font-size: 13px;
+  color: var(--hb-color-text-regular, #606266);
+  border: 1px solid var(--hb-border-color, #dcdfe6);
+  border-radius: 4px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.hb-transfer__filter-input:focus {
+  border-color: var(--hb-color-primary);
+}
+
+.hb-transfer__filter-input:disabled {
+  background-color: var(--hb-fill-color-light, #f5f7fa);
+  cursor: not-allowed;
+}
+
+/* 列表主体 */
+.hb-transfer__panel-body {
+  flex: 1;
+  min-height: 120px;
+  max-height: 246px;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.hb-transfer__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 120px;
+  color: var(--hb-color-text-placeholder, #c0c4cc);
+  font-size: 13px;
+}
+
+/* 列表项 */
+.hb-transfer__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  user-select: none;
+}
+
+.hb-transfer__item:hover:not(.hb-transfer__item--disabled) {
+  background-color: var(--hb-fill-color-light, #f5f7fa);
+}
+
+.hb-transfer__item--checked {
+  color: var(--hb-color-primary);
+}
+
+.hb-transfer__item--disabled {
+  cursor: not-allowed;
+  color: var(--hb-color-text-placeholder, #c0c4cc);
+}
+
+.hb-transfer__item-input {
+  margin: 0;
+  cursor: pointer;
+}
+
+.hb-transfer__item-input:disabled {
+  cursor: not-allowed;
+}
+
+.hb-transfer__item-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 中间操作按钮区 */
+.hb-transfer__operations {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  align-self: center;
+}
+
+.hb-transfer__operation-btn {
+  width: 36px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  line-height: 1;
+  color: var(--hb-color-text-regular, #606266);
+  background-color: var(--hb-color-white, #ffffff);
+  border: 1px solid var(--hb-border-color, #dcdfe6);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.hb-transfer__operation-btn:hover:not(:disabled) {
+  color: var(--hb-color-primary);
+  border-color: var(--hb-color-primary);
+}
+
+.hb-transfer__operation-btn:disabled {
+  color: var(--hb-color-text-placeholder, #c0c4cc);
+  background-color: var(--hb-fill-color-light, #f5f7fa);
+  cursor: not-allowed;
+}