@holyer-lib/ui 0.1.0 → 0.2.1

package/dist/ui.umd.js

@@ -16,6 +16,957 @@
       return css;
   }
 
+  /**
+   * 类型判断工具
+   */
+
+  /**
+   * 将数值或字符串转换为合法的 CSS 长度值（用于 style 绑定）
+   * - 若为 number，自动追加 'px' 单位
+   * - 若为 string，原样返回（假定用户已提供合法 CSS 长度值）
+   * @param {number|string} value - 输入值（如 100, '100%', '50vh', 'auto'）
+   * @returns {string} 合法的 CSS 长度字符串 默认值为 0
+   * @example
+   * formatSize(100)        // '100px'
+   * formatSize('100%')     // '100%'
+   * formatSize('50vh')     // '50vh'
+   * formatSize(null)       // 0
+   * formatSize(undefined)  // 0
+   */
+  function formatSize$1(value) {
+    if (typeof value === 'number') {
+      return `${value}px`;
+    }
+    if (typeof value === 'string') {
+      if (value.trim() === '') {
+        return 0;
+      }
+      return value;
+    }
+    return 0;
+  }
+
+  //
+
+  const validateSize = val => {
+    if (typeof val === 'number') {
+      return val >= 0;
+    }
+    return true;
+  };
+
+  var script$3 = {
+    name: 'HiExpandPanel',
+    model: {
+      prop: 'expanded',
+      event: 'update:expanded'
+    },
+    props: {
+      // 支持受控和非受控两种模式
+      expanded: {
+        type: Boolean,
+        default: undefined
+      },
+
+      placement: {
+        type: String,
+        default: 'right',
+        validator: v => ['left', 'right', 'top', 'bottom'].includes(v)
+      },
+
+      size: {
+        type: [Number, String],
+        default: 280,
+        validator: validateSize
+      },
+
+      minSize: {
+        type: [Number, String],
+        default: 240,
+        validator: validateSize
+      },
+
+      maxSize: {
+        type: [Number, String],
+        default: 480,
+        validator: validateSize
+      },
+
+      collapsedSize: {
+        type: [String, Number],
+        default: 24,
+        validator: validateSize
+      },
+
+      draggable: {
+        type: Boolean,
+        default: true
+      },
+
+      showTrigger: {
+        type: Boolean,
+        default: true
+      },
+
+      cacheKey: {
+        type: String,
+        default: ''
+      },
+
+      cacheVersion: {
+        type: String,
+        default: ''
+      },
+
+      draggingBgColor: {
+        type: String,
+        default: 'var(--td-gray-color-6)'
+      }
+    },
+    data() {
+      let cachedData = {};
+      if (this.cacheKey) {
+        try {
+          const stored = localStorage.getItem(`${this.cacheKey}${this.cacheVersion}`);
+          if (stored) {
+            cachedData = JSON.parse(stored);
+          }
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.warn(`HiExpandPanel: Failed to parse cache for key "${this.cacheKey}"`, e);
+          cachedData = {};
+        }
+      }
+
+      // 核心逻辑：有外部控制就用外部控制，否则用缓存
+      const useExternal = this.expanded !== undefined;
+      const initialExpanded = useExternal
+        ? this.expanded
+        : cachedData.cachedExpanded !== undefined
+        ? cachedData.cachedExpanded
+        : true;
+      const initialSize = useExternal
+        ? this.size
+        : cachedData.cachedSize !== undefined
+        ? cachedData.cachedSize
+        : this.size;
+
+      return {
+        innerExpanded: initialExpanded,
+        clientSize: initialSize,
+        isDragging: false,
+        startX: 0,
+        startY: 0,
+        startWidth: 0,
+        startHeight: 0,
+        hasExternalControl: useExternal
+      };
+    },
+    computed: {
+      isHorizontal() {
+        return ['left', 'right'].includes(this.placement);
+      },
+
+      // 根据展开状态和方向动态计算面板尺寸限制
+      getContainerStyles() {
+        // 如果未展开，直接返回空对象，不设置min/max尺寸
+        if (!this.innerExpanded) return {};
+        // 展开时根据方向设置对应的min/max尺寸
+        return this.isHorizontal
+          ? {
+              minWidth: formatSize$1(this.minSize),
+              maxWidth: formatSize$1(this.maxSize)
+            }
+          : {
+              minHeight: formatSize$1(this.minSize),
+              maxHeight: formatSize$1(this.maxSize)
+            };
+      },
+      panelStyle() {
+        const getWidth = () => {
+          if (this.isHorizontal) {
+            return this.innerExpanded ? formatSize$1(this.clientSize) : formatSize$1(this.collapsedSize) || 0;
+          }
+          return '100%';
+        };
+
+        const getHeight = () => {
+          if (this.isHorizontal) {
+            return '100%';
+          }
+          return this.innerExpanded ? formatSize$1(this.clientSize) : formatSize$1(this.collapsedSize) || 0;
+        };
+
+        return {
+          width: getWidth(),
+          height: getHeight(),
+          ...this.getContainerStyles,
+          transition: this.isDragging ? 'none' : 'flex 0.3s ease',
+          '--control-draggable-cursor': this.isHorizontal ? 'col-resize' : 'row-resize',
+          '--control-dragging-bg-color': this.draggingBgColor
+        };
+      }
+    },
+    watch: {
+      expanded(newVal) {
+        // 只有在组件是受控时才更新状态
+        if (this.hasExternalControl) {
+          if (newVal !== this.innerExpanded) {
+            this.innerExpanded = newVal;
+          }
+        }
+      },
+
+      innerExpanded(newVal) {
+        this.$emit('update:expanded', newVal);
+        this.$emit('expand-change', newVal);
+        if (this.cacheKey) {
+          this.handleSaveCache();
+        }
+      }
+    },
+    methods: {
+      handleToggle() {
+        this.innerExpanded = !this.innerExpanded;
+      },
+
+      handleSaveCache() {
+        if (this.cacheKey) {
+          localStorage.setItem(
+            `${this.cacheKey}${this.cacheVersion}`,
+            JSON.stringify({
+              cachedSize: this.clientSize,
+              cachedExpanded: this.innerExpanded
+            })
+          );
+        }
+      },
+
+      handleDragMousedown(e) {
+        if (!this.draggable) return;
+        e.preventDefault();
+        this.isDragging = true;
+        this.startX = e.clientX;
+        this.startY = e.clientY;
+
+        const panelRect = this.$refs.hiExpandPanelRef.getBoundingClientRect();
+        this.startWidth = panelRect.width;
+        this.startHeight = panelRect.height;
+
+        this.handleCreateMousemoveListener();
+        // 添加全局样式防止选中文本
+        document.body.style.userSelect = 'none';
+      },
+
+      // 核心逻辑：根据鼠标移动计算新的尺寸
+      handleDragMousemove(e) {
+        if (!this.isDragging) return;
+        // 只在需要阻止默认行为时调用 preventDefault
+        e.preventDefault();
+
+        let newSize;
+        if (this.isHorizontal) {
+          // 根据放置位置决定宽度变化的方向
+          const moveWidth = this.placement === 'left' ? this.startX - e.clientX : e.clientX - this.startX;
+          newSize = this.startWidth + moveWidth;
+        } else {
+          // 根据放置位置决定高度变化的方向
+          const moveHeight = this.placement === 'top' ? this.startY - e.clientY : e.clientY - this.startY;
+          newSize = this.startHeight + moveHeight;
+        }
+
+        // minSize 和 maxSize 已经限制了最大宽高，直接取 newSize 设置 clientSize 即可
+        this.clientSize = newSize;
+      },
+
+      // 鼠标松开结束拖动
+      handleDragMouseup() {
+        if (!this.isDragging) return;
+        this.isDragging = false;
+        this.handleSaveCache();
+        // 清理事件监听
+        this.handleClearMousemoveListener();
+        this.$emit('drag-end', {
+          size: this.clientSize,
+          expanded: this.innerExpanded
+        });
+
+        // 恢复全局样式
+        document.body.style.userSelect = '';
+      },
+
+      // 添加拖拽事件监听
+      handleCreateMousemoveListener() {
+        document.addEventListener('mousemove', this.handleDragMousemove);
+        document.addEventListener('mouseup', this.handleDragMouseup);
+      },
+
+      // 移除拖拽事件监听
+      handleClearMousemoveListener() {
+        document.removeEventListener('mousemove', this.handleDragMousemove);
+        document.removeEventListener('mouseup', this.handleDragMouseup);
+      }
+    }
+  };
+
+  function normalizeComponent$3(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+      if (typeof shadowMode !== 'boolean') {
+          createInjectorSSR = createInjector;
+          createInjector = shadowMode;
+          shadowMode = false;
+      }
+      // Vue.extend constructor export interop.
+      const options = typeof script === 'function' ? script.options : script;
+      // render functions
+      if (template && template.render) {
+          options.render = template.render;
+          options.staticRenderFns = template.staticRenderFns;
+          options._compiled = true;
+          // functional template
+          if (isFunctionalTemplate) {
+              options.functional = true;
+          }
+      }
+      // scopedId
+      if (scopeId) {
+          options._scopeId = scopeId;
+      }
+      let hook;
+      if (moduleIdentifier) {
+          // server build
+          hook = function (context) {
+              // 2.3 injection
+              context =
+                  context || // cached call
+                      (this.$vnode && this.$vnode.ssrContext) || // stateful
+                      (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+              // 2.2 with runInNewContext: true
+              if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                  context = __VUE_SSR_CONTEXT__;
+              }
+              // inject component styles
+              if (style) {
+                  style.call(this, createInjectorSSR(context));
+              }
+              // register component module identifier for async chunk inference
+              if (context && context._registeredComponents) {
+                  context._registeredComponents.add(moduleIdentifier);
+              }
+          };
+          // used by ssr in case component is cached and beforeCreate
+          // never gets called
+          options._ssrRegister = hook;
+      }
+      else if (style) {
+          hook = shadowMode
+              ? function (context) {
+                  style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+              }
+              : function (context) {
+                  style.call(this, createInjector(context));
+              };
+      }
+      if (hook) {
+          if (options.functional) {
+              // register for functional component in vue file
+              const originalRender = options.render;
+              options.render = function renderWithStyleInjection(h, context) {
+                  hook.call(context);
+                  return originalRender(h, context);
+              };
+          }
+          else {
+              // inject component registration as beforeCreate hook
+              const existing = options.beforeCreate;
+              options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+          }
+      }
+      return script;
+  }
+
+  const isOldIE$3 = typeof navigator !== 'undefined' &&
+      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+  function createInjector$3(context) {
+      return (id, style) => addStyle$3(id, style);
+  }
+  let HEAD$3;
+  const styles$3 = {};
+  function addStyle$3(id, css) {
+      const group = isOldIE$3 ? css.media || 'default' : id;
+      const style = styles$3[group] || (styles$3[group] = { ids: new Set(), styles: [] });
+      if (!style.ids.has(id)) {
+          style.ids.add(id);
+          let code = css.source;
+          if (css.map) {
+              // https://developer.chrome.com/devtools/docs/javascript-debugging
+              // this makes source maps inside style tags work properly in Chrome
+              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+              // http://stackoverflow.com/a/26603875
+              code +=
+                  '\n/*# sourceMappingURL=data:application/json;base64,' +
+                      btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                      ' */';
+          }
+          if (!style.element) {
+              style.element = document.createElement('style');
+              style.element.type = 'text/css';
+              if (css.media)
+                  style.element.setAttribute('media', css.media);
+              if (HEAD$3 === undefined) {
+                  HEAD$3 = document.head || document.getElementsByTagName('head')[0];
+              }
+              HEAD$3.appendChild(style.element);
+          }
+          if ('styleSheet' in style.element) {
+              style.styles.push(code);
+              style.element.styleSheet.cssText = style.styles
+                  .filter(Boolean)
+                  .join('\n');
+          }
+          else {
+              const index = style.ids.size - 1;
+              const textNode = document.createTextNode(code);
+              const nodes = style.element.childNodes;
+              if (nodes[index])
+                  style.element.removeChild(nodes[index]);
+              if (nodes.length)
+                  style.element.insertBefore(textNode, nodes[index]);
+              else
+                  style.element.appendChild(textNode);
+          }
+      }
+  }
+
+  /* script */
+  const __vue_script__$3 = script$3;
+
+  /* template */
+  var __vue_render__$3 = function () {
+    var _vm = this;
+    var _h = _vm.$createElement;
+    var _c = _vm._self._c || _h;
+    return _c(
+      "div",
+      {
+        ref: "hiExpandPanelRef",
+        class: ["hi-expand-panel", "hi-expand-panel--" + _vm.placement],
+        style: _vm.panelStyle,
+      },
+      [
+        _c(
+          "div",
+          {
+            directives: [
+              {
+                name: "show",
+                rawName: "v-show",
+                value: _vm.innerExpanded,
+                expression: "innerExpanded",
+              },
+            ],
+            staticClass: "hi-expand-panel--content",
+          },
+          [_vm._t("default")],
+          2
+        ),
+        _vm._v(" "),
+        _c(
+          "div",
+          {
+            class: [
+              "hi-expand-panel--control",
+              {
+                "hi-expand-panel--control-draggable":
+                  _vm.draggable && _vm.innerExpanded,
+                "hi-expand-panel--control-dragging":
+                  _vm.isDragging && _vm.innerExpanded,
+              },
+            ],
+            on: {
+              mousedown: _vm.handleDragMousedown,
+              mousemove: _vm.handleDragMousemove,
+              mouseup: _vm.handleDragMouseup,
+            },
+          },
+          [
+            _vm.$slots.trigger || _vm.showTrigger
+              ? _c(
+                  "div",
+                  {
+                    staticClass: "hi-expand-panel--control-trigger",
+                    on: {
+                      click: function ($event) {
+                        $event.stopPropagation();
+                        return _vm.handleToggle.apply(null, arguments)
+                      },
+                      mousedown: function ($event) {
+                        $event.stopPropagation();
+                      },
+                    },
+                  },
+                  [
+                    _vm._t("trigger", function () {
+                      return [
+                        _vm.isHorizontal
+                          ? [
+                              _vm.placement === "right"
+                                ? _c("span", [
+                                    _vm._v(_vm._s(_vm.innerExpanded ? "◂" : "▸")),
+                                  ])
+                                : _c("span", [
+                                    _vm._v(_vm._s(_vm.innerExpanded ? "▸" : "◂")),
+                                  ]),
+                            ]
+                          : [
+                              _vm.placement === "top"
+                                ? _c("span", [
+                                    _vm._v(_vm._s(_vm.innerExpanded ? "▾" : "▴")),
+                                  ])
+                                : _c("span", [
+                                    _vm._v(_vm._s(_vm.innerExpanded ? "▴" : "▾")),
+                                  ]),
+                            ],
+                      ]
+                    }),
+                  ],
+                  2
+                )
+              : _vm._e(),
+          ]
+        ),
+      ]
+    )
+  };
+  var __vue_staticRenderFns__$3 = [];
+  __vue_render__$3._withStripped = true;
+
+    /* style */
+    const __vue_inject_styles__$3 = function (inject) {
+      if (!inject) return
+      inject("data-v-0b2dbdef_0", { source: ".hi-expand-panel[data-v-0b2dbdef] {\n  position: relative;\n  display: flex;\n  transition: flex 0.3s ease;\n}\n.hi-expand-panel:hover .hi-expand-panel--control-trigger[data-v-0b2dbdef] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.hi-expand-panel--content[data-v-0b2dbdef] {\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n  padding: 16px;\n  box-sizing: border-box;\n}\n.hi-expand-panel--control-draggable[data-v-0b2dbdef]:hover {\n  cursor: var(--control-draggable-cursor);\n}\n.hi-expand-panel--control-dragging[data-v-0b2dbdef] {\n  background-color: var(--control-dragging-bg-color) !important;\n}\n.hi-expand-panel--right .hi-expand-panel--control[data-v-0b2dbdef],\n.hi-expand-panel--left .hi-expand-panel--control[data-v-0b2dbdef] {\n  position: absolute;\n  height: 100%;\n  width: 1px;\n  background-color: var(--td-gray-color-4);\n}\n.hi-expand-panel--right .hi-expand-panel--control-trigger[data-v-0b2dbdef],\n.hi-expand-panel--left .hi-expand-panel--control-trigger[data-v-0b2dbdef] {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n  background-color: var(--td-font-white-1);\n  border: 1px solid var(--td-gray-color-4);\n  width: 12px;\n  height: 56px;\n  display: none;\n  border-radius: 6px;\n}\n.hi-expand-panel--right[data-v-0b2dbdef] {\n  flex-direction: row;\n}\n.hi-expand-panel--right .hi-expand-panel--control[data-v-0b2dbdef] {\n  right: 0;\n}\n.hi-expand-panel--right .hi-expand-panel--control-trigger[data-v-0b2dbdef] {\n  right: -6px;\n}\n.hi-expand-panel--left[data-v-0b2dbdef] {\n  flex-direction: row-reverse;\n}\n.hi-expand-panel--left .hi-expand-panel--control[data-v-0b2dbdef] {\n  left: 0;\n}\n.hi-expand-panel--left .hi-expand-panel--control-trigger[data-v-0b2dbdef] {\n  left: -6px;\n}\n.hi-expand-panel--top .hi-expand-panel--control[data-v-0b2dbdef],\n.hi-expand-panel--bottom .hi-expand-panel--control[data-v-0b2dbdef] {\n  position: absolute;\n  width: 100%;\n  height: 1px;\n  background-color: var(--td-gray-color-4);\n}\n.hi-expand-panel--top .hi-expand-panel--control-trigger[data-v-0b2dbdef],\n.hi-expand-panel--bottom .hi-expand-panel--control-trigger[data-v-0b2dbdef] {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  cursor: pointer;\n  background-color: var(--td-font-white-1);\n  border: 1px solid var(--td-gray-color-4);\n  width: 56px;\n  height: 12px;\n  display: none;\n  border-radius: 6px;\n}\n.hi-expand-panel--top[data-v-0b2dbdef] {\n  flex-direction: column-reverse;\n}\n.hi-expand-panel--top .hi-expand-panel--control[data-v-0b2dbdef] {\n  top: 0;\n}\n.hi-expand-panel--top .hi-expand-panel--control-trigger[data-v-0b2dbdef] {\n  top: -6px;\n}\n.hi-expand-panel--bottom[data-v-0b2dbdef] {\n  flex-direction: column;\n}\n.hi-expand-panel--bottom .hi-expand-panel--control[data-v-0b2dbdef] {\n  bottom: 0;\n}\n.hi-expand-panel--bottom .hi-expand-panel--control-trigger[data-v-0b2dbdef] {\n  bottom: -6px;\n}\n", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,0BAA0B;AAC5B;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB;AACA;EACE,YAAY;EACZ,WAAW;EACX,cAAc;EACd,aAAa;EACb,sBAAsB;AACxB;AACA;EACE,uCAAuC;AACzC;AACA;EACE,6DAA6D;AAC/D;AACA;;EAEE,kBAAkB;EAClB,YAAY;EACZ,UAAU;EACV,wCAAwC;AAC1C;AACA;;EAEE,kBAAkB;EAClB,QAAQ;EACR,2BAA2B;EAC3B,eAAe;EACf,wCAAwC;EACxC,wCAAwC;EACxC,WAAW;EACX,YAAY;EACZ,aAAa;EACb,kBAAkB;AACpB;AACA;EACE,mBAAmB;AACrB;AACA;EACE,QAAQ;AACV;AACA;EACE,WAAW;AACb;AACA;EACE,2BAA2B;AAC7B;AACA;EACE,OAAO;AACT;AACA;EACE,UAAU;AACZ;AACA;;EAEE,kBAAkB;EAClB,WAAW;EACX,WAAW;EACX,wCAAwC;AAC1C;AACA;;EAEE,kBAAkB;EAClB,SAAS;EACT,2BAA2B;EAC3B,eAAe;EACf,wCAAwC;EACxC,wCAAwC;EACxC,WAAW;EACX,YAAY;EACZ,aAAa;EACb,kBAAkB;AACpB;AACA;EACE,8BAA8B;AAChC;AACA;EACE,MAAM;AACR;AACA;EACE,SAAS;AACX;AACA;EACE,sBAAsB;AACxB;AACA;EACE,SAAS;AACX;AACA;EACE,YAAY;AACd","file":"index.vue","sourcesContent":[".hi-expand-panel {\n  position: relative;\n  display: flex;\n  transition: flex 0.3s ease;\n}\n.hi-expand-panel:hover .hi-expand-panel--control-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.hi-expand-panel--content {\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n  padding: 16px;\n  box-sizing: border-box;\n}\n.hi-expand-panel--control-draggable:hover {\n  cursor: var(--control-draggable-cursor);\n}\n.hi-expand-panel--control-dragging {\n  background-color: var(--control-dragging-bg-color) !important;\n}\n.hi-expand-panel--right .hi-expand-panel--control,\n.hi-expand-panel--left .hi-expand-panel--control {\n  position: absolute;\n  height: 100%;\n  width: 1px;\n  background-color: var(--td-gray-color-4);\n}\n.hi-expand-panel--right .hi-expand-panel--control-trigger,\n.hi-expand-panel--left .hi-expand-panel--control-trigger {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n  background-color: var(--td-font-white-1);\n  border: 1px solid var(--td-gray-color-4);\n  width: 12px;\n  height: 56px;\n  display: none;\n  border-radius: 6px;\n}\n.hi-expand-panel--right {\n  flex-direction: row;\n}\n.hi-expand-panel--right .hi-expand-panel--control {\n  right: 0;\n}\n.hi-expand-panel--right .hi-expand-panel--control-trigger {\n  right: -6px;\n}\n.hi-expand-panel--left {\n  flex-direction: row-reverse;\n}\n.hi-expand-panel--left .hi-expand-panel--control {\n  left: 0;\n}\n.hi-expand-panel--left .hi-expand-panel--control-trigger {\n  left: -6px;\n}\n.hi-expand-panel--top .hi-expand-panel--control,\n.hi-expand-panel--bottom .hi-expand-panel--control {\n  position: absolute;\n  width: 100%;\n  height: 1px;\n  background-color: var(--td-gray-color-4);\n}\n.hi-expand-panel--top .hi-expand-panel--control-trigger,\n.hi-expand-panel--bottom .hi-expand-panel--control-trigger {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  cursor: pointer;\n  background-color: var(--td-font-white-1);\n  border: 1px solid var(--td-gray-color-4);\n  width: 56px;\n  height: 12px;\n  display: none;\n  border-radius: 6px;\n}\n.hi-expand-panel--top {\n  flex-direction: column-reverse;\n}\n.hi-expand-panel--top .hi-expand-panel--control {\n  top: 0;\n}\n.hi-expand-panel--top .hi-expand-panel--control-trigger {\n  top: -6px;\n}\n.hi-expand-panel--bottom {\n  flex-direction: column;\n}\n.hi-expand-panel--bottom .hi-expand-panel--control {\n  bottom: 0;\n}\n.hi-expand-panel--bottom .hi-expand-panel--control-trigger {\n  bottom: -6px;\n}\n"]}, media: undefined });
+
+    };
+    /* scoped */
+    const __vue_scope_id__$3 = "data-v-0b2dbdef";
+    /* module identifier */
+    const __vue_module_identifier__$3 = undefined;
+    /* functional template */
+    const __vue_is_functional_template__$3 = false;
+    /* style inject SSR */
+    
+    /* style inject shadow dom */
+    
+
+    
+    const __vue_component__$3 = /*#__PURE__*/normalizeComponent$3(
+      { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
+      __vue_inject_styles__$3,
+      __vue_script__$3,
+      __vue_scope_id__$3,
+      __vue_is_functional_template__$3,
+      __vue_module_identifier__$3,
+      false,
+      createInjector$3,
+      undefined,
+      undefined
+    );
+
+  __vue_component__$3.name = 'HiExpandPanel';
+
+  // 添加 install
+  __vue_component__$3.install = Vue => {
+    Vue.component(__vue_component__$3.name, __vue_component__$3);
+  };
+
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+
+  var script$2 = {
+    name: 'HiExpandText',
+    props: {
+      content: {
+        type: String,
+        default: ''
+      },
+
+      /**
+       * [0]: 展开时显示的文本，[1]: 收起时显示的文本
+       */
+      label: {
+        type: Array,
+        default: () => ['展开', '收起'],
+        validator: arr => {
+          return arr.length === 2 && arr.every(s => typeof s === 'string');
+        }
+      },
+
+      lineClamp: {
+        type: Number,
+        default: 2
+      }
+    },
+    data() {
+      return {
+        showToggle: false,
+        isExpanded: false,
+        resizeTimer: null,
+        resizeObserver: null
+      };
+    },
+    computed: {
+      expandText() {
+        return this.isExpanded ? this.label[1] : this.label[0];
+      },
+
+      textClass() {
+        return {
+          'hi-expand-text--content': true,
+          'hi-expand-text--content__show-toggle': this.showToggle,
+          'hi-expand-text--content__expanded': this.isExpanded
+        };
+      }
+    },
+
+    watch: {
+      content() {
+        this.$nextTick(this.checkEllipsis);
+      }
+    },
+    mounted() {
+      this.checkEllipsis();
+      window.addEventListener('resize', this.handleResize);
+      if (window.ResizeObserver && this.$el) {
+        this.resizeObserver = new ResizeObserver(() => {
+          this.handleResize();
+        });
+        this.resizeObserver.observe(this.$el);
+      }
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.handleResize);
+      if (this.resizeObserver) this.resizeObserver.disconnect();
+      if (this.resizeTimer) clearTimeout(this.resizeTimer);
+    },
+
+    methods: {
+      handleResize() {
+        if (this.resizeTimer) clearTimeout(this.resizeTimer);
+        this.resizeTimer = setTimeout(() => {
+          this.checkEllipsis();
+        }, 100);
+      },
+
+      /**
+       * @Description 检查是否存在溢出情况，兼容展开和收起两种状态
+       * @Author holyer
+       * @Date 2026/02/08 17:01:51
+       */
+      checkEllipsis() {
+        const textEl = this.$refs.textRef;
+        if (!textEl || !textEl.offsetParent) {
+          this.showToggle = false;
+          return;
+        }
+
+        if (this.isExpanded) {
+          // 展开状态下：模拟收起状态，检测是否需要 toggle
+          this.showToggle = this.wouldOverflowIfCollapsed(textEl);
+        } else {
+          // 收起状态下：直接检测是否溢出
+          this.showToggle = textEl.scrollHeight - textEl.clientHeight > 2;
+        }
+      },
+
+      /**
+       * 模拟收起状态，检测内容是否会溢出
+       */
+      wouldOverflowIfCollapsed(el) {
+        // 1. 保存原始状态
+        const originalDisplay = el.style.display;
+        const originalWebkitLineClamp = el.style.webkitLineClamp;
+        const originalClassList = el.className;
+
+        try {
+          // 2. 临时应用“收起”样式，移除 --expanded 和 --show-toggle
+          el.className = 'hi-expand-text--content';
+          el.style.display = '-webkit-box';
+          el.style.webkitBoxOrient = 'vertical';
+          el.style.overflow = 'hidden';
+          el.style.webkitLineClamp = this.lineClamp;
+
+          // 3. 强制 reflow（触发 layout）
+          const { scrollHeight, clientHeight } = el;
+
+          // 4. 判断是否溢出
+          return scrollHeight - clientHeight > 2;
+        } finally {
+          // 5. 恢复原始状态（确保无副作用）
+          el.className = originalClassList;
+          el.style.display = originalDisplay;
+          el.style.webkitLineClamp = originalWebkitLineClamp;
+        }
+      },
+
+      handleToggle() {
+        this.isExpanded = !this.isExpanded;
+        this.$emit('toggle', this.isExpanded);
+      },
+
+      // 供外部手动更新
+      update() {
+        this.$nextTick(this.checkEllipsis);
+      }
+    }
+  };
+
+  function normalizeComponent$2(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+      if (typeof shadowMode !== 'boolean') {
+          createInjectorSSR = createInjector;
+          createInjector = shadowMode;
+          shadowMode = false;
+      }
+      // Vue.extend constructor export interop.
+      const options = typeof script === 'function' ? script.options : script;
+      // render functions
+      if (template && template.render) {
+          options.render = template.render;
+          options.staticRenderFns = template.staticRenderFns;
+          options._compiled = true;
+          // functional template
+          if (isFunctionalTemplate) {
+              options.functional = true;
+          }
+      }
+      // scopedId
+      if (scopeId) {
+          options._scopeId = scopeId;
+      }
+      let hook;
+      if (moduleIdentifier) {
+          // server build
+          hook = function (context) {
+              // 2.3 injection
+              context =
+                  context || // cached call
+                      (this.$vnode && this.$vnode.ssrContext) || // stateful
+                      (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+              // 2.2 with runInNewContext: true
+              if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                  context = __VUE_SSR_CONTEXT__;
+              }
+              // inject component styles
+              if (style) {
+                  style.call(this, createInjectorSSR(context));
+              }
+              // register component module identifier for async chunk inference
+              if (context && context._registeredComponents) {
+                  context._registeredComponents.add(moduleIdentifier);
+              }
+          };
+          // used by ssr in case component is cached and beforeCreate
+          // never gets called
+          options._ssrRegister = hook;
+      }
+      else if (style) {
+          hook = shadowMode
+              ? function (context) {
+                  style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+              }
+              : function (context) {
+                  style.call(this, createInjector(context));
+              };
+      }
+      if (hook) {
+          if (options.functional) {
+              // register for functional component in vue file
+              const originalRender = options.render;
+              options.render = function renderWithStyleInjection(h, context) {
+                  hook.call(context);
+                  return originalRender(h, context);
+              };
+          }
+          else {
+              // inject component registration as beforeCreate hook
+              const existing = options.beforeCreate;
+              options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+          }
+      }
+      return script;
+  }
+
+  const isOldIE$2 = typeof navigator !== 'undefined' &&
+      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+  function createInjector$2(context) {
+      return (id, style) => addStyle$2(id, style);
+  }
+  let HEAD$2;
+  const styles$2 = {};
+  function addStyle$2(id, css) {
+      const group = isOldIE$2 ? css.media || 'default' : id;
+      const style = styles$2[group] || (styles$2[group] = { ids: new Set(), styles: [] });
+      if (!style.ids.has(id)) {
+          style.ids.add(id);
+          let code = css.source;
+          if (css.map) {
+              // https://developer.chrome.com/devtools/docs/javascript-debugging
+              // this makes source maps inside style tags work properly in Chrome
+              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+              // http://stackoverflow.com/a/26603875
+              code +=
+                  '\n/*# sourceMappingURL=data:application/json;base64,' +
+                      btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                      ' */';
+          }
+          if (!style.element) {
+              style.element = document.createElement('style');
+              style.element.type = 'text/css';
+              if (css.media)
+                  style.element.setAttribute('media', css.media);
+              if (HEAD$2 === undefined) {
+                  HEAD$2 = document.head || document.getElementsByTagName('head')[0];
+              }
+              HEAD$2.appendChild(style.element);
+          }
+          if ('styleSheet' in style.element) {
+              style.styles.push(code);
+              style.element.styleSheet.cssText = style.styles
+                  .filter(Boolean)
+                  .join('\n');
+          }
+          else {
+              const index = style.ids.size - 1;
+              const textNode = document.createTextNode(code);
+              const nodes = style.element.childNodes;
+              if (nodes[index])
+                  style.element.removeChild(nodes[index]);
+              if (nodes.length)
+                  style.element.insertBefore(textNode, nodes[index]);
+              else
+                  style.element.appendChild(textNode);
+          }
+      }
+  }
+
+  /* script */
+  const __vue_script__$2 = script$2;
+
+  /* template */
+  var __vue_render__$2 = function () {
+    var _vm = this;
+    var _h = _vm.$createElement;
+    var _c = _vm._self._c || _h;
+    return _c(
+      "div",
+      {
+        staticClass: "hi-expand-text",
+        style: { "--hi-expand-text-line-clamp": _vm.lineClamp },
+      },
+      [
+        _c(
+          "div",
+          { ref: "textRef", class: _vm.textClass },
+          [
+            _vm.showToggle
+              ? _c(
+                  "div",
+                  {
+                    staticClass: "hi-expand-text--toggle",
+                    on: { click: _vm.handleToggle },
+                  },
+                  [
+                    _vm._t("toggleText", function () {
+                      return [_vm._v(_vm._s(_vm.expandText))]
+                    }),
+                  ],
+                  2
+                )
+              : _vm._e(),
+            _vm._v(" "),
+            _vm._t("default", function () {
+              return [_vm._v(_vm._s(_vm.content))]
+            }),
+          ],
+          2
+        ),
+      ]
+    )
+  };
+  var __vue_staticRenderFns__$2 = [];
+  __vue_render__$2._withStripped = true;
+
+    /* style */
+    const __vue_inject_styles__$2 = function (inject) {
+      if (!inject) return
+      inject("data-v-3bd7513c_0", { source: ".hi-expand-text[data-v-3bd7513c] {\n  display: flex;\n  width: 100%;\n  line-height: 1.5;\n}\n.hi-expand-text--content[data-v-3bd7513c] {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n  -webkit-line-clamp: var(--hi-expand-text-line-clamp);\n  line-clamp: var(--hi-expand-text-line-clamp);\n}\n.hi-expand-text--content.hi-expand-text--content__show-toggle[data-v-3bd7513c]::before {\n  content: '';\n  float: right;\n  height: 100%;\n  margin-bottom: calc(-1em * 1.5);\n}\n.hi-expand-text--content__expanded[data-v-3bd7513c] {\n  display: block;\n  overflow: visible;\n  -webkit-line-clamp: unset;\n  line-clamp: unset;\n}\n.hi-expand-text--toggle[data-v-3bd7513c] {\n  color: var(--td-brand-color);\n  float: right;\n  clear: both;\n  cursor: pointer;\n}\n", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,WAAW;EACX,gBAAgB;AAClB;AACA;EACE,oBAAoB;EACpB,4BAA4B;EAC5B,gBAAgB;EAChB,uBAAuB;EACvB,sBAAsB;EACtB,oDAAoD;EACpD,4CAA4C;AAC9C;AACA;EACE,WAAW;EACX,YAAY;EACZ,YAAY;EACZ,+BAA+B;AACjC;AACA;EACE,cAAc;EACd,iBAAiB;EACjB,yBAAyB;EACzB,iBAAiB;AACnB;AACA;EACE,4BAA4B;EAC5B,YAAY;EACZ,WAAW;EACX,eAAe;AACjB","file":"index.vue","sourcesContent":[".hi-expand-text {\n  display: flex;\n  width: 100%;\n  line-height: 1.5;\n}\n.hi-expand-text--content {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n  -webkit-line-clamp: var(--hi-expand-text-line-clamp);\n  line-clamp: var(--hi-expand-text-line-clamp);\n}\n.hi-expand-text--content.hi-expand-text--content__show-toggle::before {\n  content: '';\n  float: right;\n  height: 100%;\n  margin-bottom: calc(-1em * 1.5);\n}\n.hi-expand-text--content__expanded {\n  display: block;\n  overflow: visible;\n  -webkit-line-clamp: unset;\n  line-clamp: unset;\n}\n.hi-expand-text--toggle {\n  color: var(--td-brand-color);\n  float: right;\n  clear: both;\n  cursor: pointer;\n}\n"]}, media: undefined });
+
+    };
+    /* scoped */
+    const __vue_scope_id__$2 = "data-v-3bd7513c";
+    /* module identifier */
+    const __vue_module_identifier__$2 = undefined;
+    /* functional template */
+    const __vue_is_functional_template__$2 = false;
+    /* style inject SSR */
+    
+    /* style inject shadow dom */
+    
+
+    
+    const __vue_component__$2 = /*#__PURE__*/normalizeComponent$2(
+      { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
+      __vue_inject_styles__$2,
+      __vue_script__$2,
+      __vue_scope_id__$2,
+      __vue_is_functional_template__$2,
+      __vue_module_identifier__$2,
+      false,
+      createInjector$2,
+      undefined,
+      undefined
+    );
+
+  __vue_component__$2.name = 'HiExpandText';
+
+  // 添加 install
+  __vue_component__$2.install = Vue => {
+    Vue.component(__vue_component__$2.name, __vue_component__$2);
+  };
+
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
   //
   //
   //
@@ -23,15 +974,585 @@
   //
   //
 
-  var script = {
+  const TITILE_SIZE_MAP = {
+    small: '14px',
+    medium: '16px',
+    large: '18px'
+  };
+  var script$1 = {
     name: 'HiTitle',
+    inheritAttrs: false,
     props: {
+      // 自定义图标类名
+      iconClass: {
+        type: String,
+        default: ''
+      },
+      // 主标题文本（优先级低于 default slot）
       content: {
         type: String,
-        default: '标题'
+        default: ''
+      },
+      // 描述文本（优先级低于 description slot）
+      description: {
+        type: String,
+        default: ''
+      },
+      // 尺寸：控制整体大小（影响文字、图标、bar 高度）
+      size: {
+        type: String,
+        default: 'medium',
+        validator: val => ['small', 'medium', 'large'].includes(val)
+      },
+      // 主标题颜色（支持自定义）
+      color: {
+        type: String,
+        default: ''
+      },
+      // 自定义前缀图标组件
+      prefixIcon: {
+        type: [Object, Function],
+        default: null
+      },
+      // 自定义 bar 类名（用于覆盖样式）
+      barClass: {
+        type: String,
+        default: ''
+      },
+      // 自定义标题文字类名
+      textClass: {
+        type: String,
+        default: ''
+      },
+      // 自定义描述文字类名
+      descClass: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      titleClass() {
+        return ['hi-title', `hi-title--${this.size}`, { 'hi-title--has-desc': this.hasDescription }];
+      },
+      // 根据 size 计算文字大小
+      textSize() {
+        return TITILE_SIZE_MAP[this.size] || TITILE_SIZE_MAP.medium;
+      },
+      // 图标大小 = 文字大小（保持视觉一致）
+      iconSize() {
+        return this.textSize;
+      },
+      // 装饰条高度 = 文字行高 ≈ 文字大小 * 1.2～1.5
+      barHeight() {
+        const base = parseFloat(TITILE_SIZE_MAP[this.size] || '16');
+        return `${base * 1.2}px`;
+      },
+      // 主标题颜色（props 优先，否则继承）
+      textColor() {
+        return this.color || 'inherit';
+      },
+      // 是否存在描述内容（用于控制布局）
+      hasDescription() {
+        return this.description || this.$slots.description;
+      }
+    }
+  };
+
+  function normalizeComponent$1(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+      if (typeof shadowMode !== 'boolean') {
+          createInjectorSSR = createInjector;
+          createInjector = shadowMode;
+          shadowMode = false;
+      }
+      // Vue.extend constructor export interop.
+      const options = typeof script === 'function' ? script.options : script;
+      // render functions
+      if (template && template.render) {
+          options.render = template.render;
+          options.staticRenderFns = template.staticRenderFns;
+          options._compiled = true;
+          // functional template
+          if (isFunctionalTemplate) {
+              options.functional = true;
+          }
+      }
+      // scopedId
+      if (scopeId) {
+          options._scopeId = scopeId;
+      }
+      let hook;
+      if (moduleIdentifier) {
+          // server build
+          hook = function (context) {
+              // 2.3 injection
+              context =
+                  context || // cached call
+                      (this.$vnode && this.$vnode.ssrContext) || // stateful
+                      (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+              // 2.2 with runInNewContext: true
+              if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                  context = __VUE_SSR_CONTEXT__;
+              }
+              // inject component styles
+              if (style) {
+                  style.call(this, createInjectorSSR(context));
+              }
+              // register component module identifier for async chunk inference
+              if (context && context._registeredComponents) {
+                  context._registeredComponents.add(moduleIdentifier);
+              }
+          };
+          // used by ssr in case component is cached and beforeCreate
+          // never gets called
+          options._ssrRegister = hook;
+      }
+      else if (style) {
+          hook = shadowMode
+              ? function (context) {
+                  style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+              }
+              : function (context) {
+                  style.call(this, createInjector(context));
+              };
+      }
+      if (hook) {
+          if (options.functional) {
+              // register for functional component in vue file
+              const originalRender = options.render;
+              options.render = function renderWithStyleInjection(h, context) {
+                  hook.call(context);
+                  return originalRender(h, context);
+              };
+          }
+          else {
+              // inject component registration as beforeCreate hook
+              const existing = options.beforeCreate;
+              options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+          }
+      }
+      return script;
+  }
+
+  const isOldIE$1 = typeof navigator !== 'undefined' &&
+      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+  function createInjector$1(context) {
+      return (id, style) => addStyle$1(id, style);
+  }
+  let HEAD$1;
+  const styles$1 = {};
+  function addStyle$1(id, css) {
+      const group = isOldIE$1 ? css.media || 'default' : id;
+      const style = styles$1[group] || (styles$1[group] = { ids: new Set(), styles: [] });
+      if (!style.ids.has(id)) {
+          style.ids.add(id);
+          let code = css.source;
+          if (css.map) {
+              // https://developer.chrome.com/devtools/docs/javascript-debugging
+              // this makes source maps inside style tags work properly in Chrome
+              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+              // http://stackoverflow.com/a/26603875
+              code +=
+                  '\n/*# sourceMappingURL=data:application/json;base64,' +
+                      btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                      ' */';
+          }
+          if (!style.element) {
+              style.element = document.createElement('style');
+              style.element.type = 'text/css';
+              if (css.media)
+                  style.element.setAttribute('media', css.media);
+              if (HEAD$1 === undefined) {
+                  HEAD$1 = document.head || document.getElementsByTagName('head')[0];
+              }
+              HEAD$1.appendChild(style.element);
+          }
+          if ('styleSheet' in style.element) {
+              style.styles.push(code);
+              style.element.styleSheet.cssText = style.styles
+                  .filter(Boolean)
+                  .join('\n');
+          }
+          else {
+              const index = style.ids.size - 1;
+              const textNode = document.createTextNode(code);
+              const nodes = style.element.childNodes;
+              if (nodes[index])
+                  style.element.removeChild(nodes[index]);
+              if (nodes.length)
+                  style.element.insertBefore(textNode, nodes[index]);
+              else
+                  style.element.appendChild(textNode);
+          }
+      }
+  }
+
+  /* script */
+  const __vue_script__$1 = script$1;
+
+  /* template */
+  var __vue_render__$1 = function () {
+    var _vm = this;
+    var _h = _vm.$createElement;
+    var _c = _vm._self._c || _h;
+    return _c(
+      "div",
+      _vm._b({ class: _vm.titleClass }, "div", _vm.$attrs, false),
+      [
+        _c("div", { staticClass: "hi-title__header" }, [
+          _c(
+            "div",
+            { staticClass: "hi-title__prefix" },
+            [
+              _vm._t("prefix", function () {
+                return [
+                  _vm.prefixIcon
+                    ? _c(_vm.prefixIcon, {
+                        tag: "component",
+                        class: ["hi-title__icon", _vm.iconClass],
+                        style: { fontSize: _vm.iconSize },
+                      })
+                    : _c("div", {
+                        class: ["hi-title__bar", _vm.barClass],
+                        style: { height: _vm.barHeight },
+                      }),
+                ]
+              }),
+            ],
+            2
+          ),
+          _vm._v(" "),
+          _vm.content || _vm.$slots.default
+            ? _c(
+                "div",
+                {
+                  class: ["hi-title__text", _vm.textClass],
+                  style: {
+                    color: _vm.textColor,
+                    fontSize: _vm.textSize,
+                  },
+                },
+                [
+                  _vm._t("default", function () {
+                    return [_vm._v(_vm._s(_vm.content))]
+                  }),
+                ],
+                2
+              )
+            : _vm._e(),
+        ]),
+        _vm._v(" "),
+        _vm.hasDescription
+          ? _c(
+              "p",
+              { class: ["hi-title__description", _vm.descClass] },
+              [
+                _vm._t("description", function () {
+                  return [_vm._v(_vm._s(_vm.description))]
+                }),
+              ],
+              2
+            )
+          : _vm._e(),
+      ]
+    )
+  };
+  var __vue_staticRenderFns__$1 = [];
+  __vue_render__$1._withStripped = true;
+
+    /* style */
+    const __vue_inject_styles__$1 = function (inject) {
+      if (!inject) return
+      inject("data-v-2948bff0_0", { source: ".hi-title[data-v-2948bff0] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.hi-title--small[data-v-2948bff0] {\n  gap: 2px;\n}\n.hi-title--large[data-v-2948bff0] {\n  gap: 6px;\n}\n.hi-title__header[data-v-2948bff0] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.hi-title__prefix[data-v-2948bff0] {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n}\n.hi-title__bar[data-v-2948bff0] {\n  width: 4px;\n  background-color: var(--td-brand-color);\n  flex-shrink: 0;\n}\n.hi-title__icon[data-v-2948bff0] {\n  flex-shrink: 0;\n  line-height: 1;\n}\n.hi-title__text[data-v-2948bff0] {\n  margin: 0;\n  font-weight: 600;\n  color: var(--td-text-color-primary);\n}\n.hi-title__description[data-v-2948bff0] {\n  margin: 0;\n  font-size: 12px;\n  color: var(--td-text-color-secondary);\n}\n", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,sBAAsB;EACtB,QAAQ;AACV;AACA;EACE,QAAQ;AACV;AACA;EACE,QAAQ;AACV;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,SAAS;AACX;AACA;EACE,cAAc;EACd,aAAa;EACb,mBAAmB;AACrB;AACA;EACE,UAAU;EACV,uCAAuC;EACvC,cAAc;AAChB;AACA;EACE,cAAc;EACd,cAAc;AAChB;AACA;EACE,SAAS;EACT,gBAAgB;EAChB,mCAAmC;AACrC;AACA;EACE,SAAS;EACT,eAAe;EACf,qCAAqC;AACvC","file":"index.vue","sourcesContent":[".hi-title {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.hi-title--small {\n  gap: 2px;\n}\n.hi-title--large {\n  gap: 6px;\n}\n.hi-title__header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.hi-title__prefix {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n}\n.hi-title__bar {\n  width: 4px;\n  background-color: var(--td-brand-color);\n  flex-shrink: 0;\n}\n.hi-title__icon {\n  flex-shrink: 0;\n  line-height: 1;\n}\n.hi-title__text {\n  margin: 0;\n  font-weight: 600;\n  color: var(--td-text-color-primary);\n}\n.hi-title__description {\n  margin: 0;\n  font-size: 12px;\n  color: var(--td-text-color-secondary);\n}\n"]}, media: undefined });
+
+    };
+    /* scoped */
+    const __vue_scope_id__$1 = "data-v-2948bff0";
+    /* module identifier */
+    const __vue_module_identifier__$1 = undefined;
+    /* functional template */
+    const __vue_is_functional_template__$1 = false;
+    /* style inject SSR */
+    
+    /* style inject shadow dom */
+    
+
+    
+    const __vue_component__$1 = /*#__PURE__*/normalizeComponent$1(
+      { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
+      __vue_inject_styles__$1,
+      __vue_script__$1,
+      __vue_scope_id__$1,
+      __vue_is_functional_template__$1,
+      __vue_module_identifier__$1,
+      false,
+      createInjector$1,
+      undefined,
+      undefined
+    );
+
+  // 显式设置 name（避免 .vue 丢失）
+  __vue_component__$1.name = 'HiTitle';
+
+  // 添加 install
+  __vue_component__$1.install = Vue => {
+    Vue.component(__vue_component__$1.name, __vue_component__$1);
+  };
+
+  /**
+   * 类型判断工具
+   */
+
+  /**
+   * 将数值或字符串转换为合法的 CSS 长度值（用于 style 绑定）
+   * - 若为 number，自动追加 'px' 单位
+   * - 若为 string，原样返回（假定用户已提供合法 CSS 长度值）
+   * @param {number|string} value - 输入值（如 100, '100%', '50vh', 'auto'）
+   * @returns {string} 合法的 CSS 长度字符串 默认值为 0
+   * @example
+   * formatSize(100)        // '100px'
+   * formatSize('100%')     // '100%'
+   * formatSize('50vh')     // '50vh'
+   * formatSize(null)       // 0
+   * formatSize(undefined)  // 0
+   */
+  function formatSize(value) {
+    if (typeof value === 'number') {
+      return `${value}px`;
+    }
+    if (typeof value === 'string') {
+      if (value.trim() === '') {
+        return 0;
+      }
+      return value;
+    }
+    return 0;
+  }
+
+  //
+
+  var script = {
+    name: 'HiVirtualList',
+    props: {
+      items: {
+        type: Array,
+        required: true,
+        default: () => []
+      },
+      itemHeight: {
+        type: Number,
+        required: true,
+        validator(value) {
+          if (value <= 0) {
+            // eslint-disable-next-line no-console
+            console.error('[HiVirtualList] itemHeight must be a positive number.');
+            return false;
+          }
+          return true;
+        }
+      },
+      height: {
+        type: [Number, String],
+        required: true
+      },
+      buffer: {
+        type: Number,
+        default: 50
+      },
+      nodeKey: {
+        type: String,
+        default: undefined
+      }
+    },
+    data() {
+      return {
+        scrollTop: 0,
+        clientHeight: 0,
+        resizeObserver: null,
+        resizeTimer: null
+      };
+    },
+    computed: {
+      styles() {
+        return {
+          height: formatSize(this.height)
+        };
+      },
+      renderItemHeight() {
+        return formatSize(this.itemHeight);
+      },
+      total() {
+        return this.items.length;
+      },
+      visibleCount() {
+        if (!this.clientHeight || !this.itemHeight) return 20;
+        return Math.ceil(this.clientHeight / this.itemHeight) + this.buffer * 2;
+      },
+      startIndex() {
+        return Math.max(0, Math.floor(this.scrollTop / this.itemHeight));
+      },
+      endIndex() {
+        return Math.min(this.total, this.startIndex + this.visibleCount);
+      },
+      visibleItems() {
+        return this.items.slice(this.startIndex, this.endIndex);
+      },
+      topPlaceholderHeight() {
+        return formatSize(this.startIndex * this.itemHeight);
+      },
+      bottomPlaceholderHeight() {
+        return formatSize((this.total - this.endIndex) * this.itemHeight);
       }
     },
-    data() {}
+    mounted() {
+      this.updateClientHeight();
+      this.setupResizeListener();
+    },
+    beforeDestroy() {
+      this.cleanupResizeListener();
+    },
+    methods: {
+      /**
+       * 判断是否应使用 nodeKey 字段
+       */
+      _shouldUseNodeKey() {
+        return this.nodeKey && typeof this.nodeKey === 'string' && this.nodeKey.trim() !== '';
+      },
+
+      /**
+       * 获取 item 的唯一 key（用于 v-for）
+       */
+      getNodeKey(item, index) {
+        if (this._shouldUseNodeKey() && item != null && typeof item === 'object') {
+          const key = item[this.nodeKey];
+          if (key != null) {
+            return key;
+          }
+        }
+        return index;
+      },
+
+      updateClientHeight() {
+        if (this.$refs.rootRef) {
+          this.clientHeight = this.$refs.rootRef.clientHeight;
+        }
+      },
+
+      setupResizeListener() {
+        if (typeof ResizeObserver !== 'undefined') {
+          this.resizeObserver = new ResizeObserver(() => {
+            this.updateClientHeight();
+          });
+          this.resizeObserver.observe(this.$refs.rootRef);
+        } else {
+          window.addEventListener('resize', this.handleWindowResize);
+        }
+      },
+
+      cleanupResizeListener() {
+        if (this.resizeObserver) {
+          this.resizeObserver.disconnect();
+          this.resizeObserver = null;
+        }
+        if (this.resizeTimer) {
+          clearTimeout(this.resizeTimer);
+          this.resizeTimer = null;
+        }
+        window.removeEventListener('resize', this.handleWindowResize);
+      },
+
+      handleWindowResize() {
+        if (this.resizeTimer) {
+          clearTimeout(this.resizeTimer);
+        }
+        this.resizeTimer = setTimeout(() => {
+          this.updateClientHeight();
+        }, 100);
+      },
+
+      handleScroll(e) {
+        this.scrollTop = e.target.scrollTop;
+        this.$emit('scroll', e);
+
+        const { scrollHeight, clientHeight, scrollTop } = e.target;
+        if (scrollTop === 0) this.$emit('reach-top');
+        if (scrollHeight - clientHeight - scrollTop < 100) this.$emit('reach-bottom');
+        this.$emit('visible-change', { startIndex: this.startIndex, endIndex: this.endIndex });
+      },
+
+      refresh() {
+        this.updateClientHeight();
+      },
+
+      /**
+       * 内部滚动方法（仅设置 DOM scrollTop，状态由 handleScroll 同步）
+       */
+      _setScrollTop(scrollTop) {
+        if (this.$refs.rootRef) {
+          this.$refs.rootRef.scrollTop = scrollTop;
+        }
+      },
+
+      /**
+       * 滚动到指定目标
+       * - 若启用了有效的 nodeKey，则 target 视为 keyValue
+       * - 否则，target 必须是 number（index）
+       */
+      scrollTo(target) {
+        if (target == null) {
+          // eslint-disable-next-line no-console
+          console.warn('[HiVirtualList] scrollTo: target cannot be null or undefined');
+          return;
+        }
+
+        let index = -1;
+
+        // 使用 getNodeKey 生成的 key 进行匹配（严格对齐）
+        if (this._shouldUseNodeKey()) {
+          index = this.items.findIndex((item, i) => {
+            return this.getNodeKey(item, i) === target;
+          });
+        } else {
+          // 降级到 index 模式
+          if (typeof target === 'number' && target >= 0 && target < this.total) {
+            index = target;
+          } else {
+            // eslint-disable-next-line no-console
+            console.warn(
+              '[HiVirtualList] scrollTo: when nodeKey is not provided, target must be a valid index (number).'
+            );
+            return;
+          }
+        }
+
+        if (index < 0 || index >= this.total) {
+          if (this._shouldUseNodeKey()) {
+            // eslint-disable-next-line no-console
+            console.warn(`[HiVirtualList] scrollTo: item with key "${target}" not found`);
+          } else {
+            // eslint-disable-next-line no-console
+            console.warn(`[HiVirtualList] scrollTo: index ${target} is out of range [0, ${this.total})`);
+          }
+          return;
+        }
+
+        this._setScrollTop(index * this.itemHeight);
+      },
+
+      scrollToTop() {
+        this._setScrollTop(0);
+      },
+
+      scrollToBottom() {
+        this._setScrollTop(this.total * this.itemHeight);
+      },
+
+      getVisibleRange() {
+        return {
+          startIndex: this.startIndex,
+          endIndex: this.endIndex
+        };
+      }
+    }
   };
 
   function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
@@ -170,9 +1691,40 @@
     var _vm = this;
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
-    return _c("div", { staticClass: "hi-title" }, [
-      _vm._v("\n  " + _vm._s(_vm.content) + "\n"),
-    ])
+    return _c(
+      "div",
+      {
+        ref: "rootRef",
+        staticClass: "hi-virtual-list",
+        style: _vm.styles,
+        on: { scroll: _vm.handleScroll },
+      },
+      [
+        _c("div", {
+          staticClass: "hi-virtual-list--placeholder",
+          style: { height: _vm.topPlaceholderHeight },
+        }),
+        _vm._v(" "),
+        _vm._l(_vm.visibleItems, function (item, i) {
+          return _c(
+            "div",
+            {
+              key: _vm.getNodeKey(item, _vm.startIndex + i),
+              staticClass: "hi-virtual-list--item-wrapper",
+              style: { height: _vm.renderItemHeight },
+            },
+            [_vm._t("default", null, { item: item, index: _vm.startIndex + i })],
+            2
+          )
+        }),
+        _vm._v(" "),
+        _c("div", {
+          staticClass: "hi-virtual-list--placeholder",
+          style: { height: _vm.bottomPlaceholderHeight },
+        }),
+      ],
+      2
+    )
   };
   var __vue_staticRenderFns__ = [];
   __vue_render__._withStripped = true;
@@ -180,11 +1732,11 @@
     /* style */
     const __vue_inject_styles__ = function (inject) {
       if (!inject) return
-      inject("data-v-03a3ffda_0", { source: "\n.title[data-v-03a3ffda] {\n  text-align: center;\n  margin: 20px 0;\n}\n", map: {"version":3,"sources":["/home/runner/work/holyer-lib/holyer-lib/packages/ui/title/src/index.vue"],"names":[],"mappings":";AAoBA;EACA,kBAAA;EACA,cAAA;AACA","file":"index.vue","sourcesContent":["<template>\n  <div class=\"hi-title\">\n    {{ content }}\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'HiTitle',\n  props: {\n    content: {\n      type: String,\n      default: '标题'\n    }\n  },\n  data() {}\n};\n</script>\n\n<style scoped>\n.title {\n  text-align: center;\n  margin: 20px 0;\n}\n</style>\n"]}, media: undefined });
+      inject("data-v-7fe73d95_0", { source: ".hi-virtual-list[data-v-7fe73d95] {\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  will-change: scroll-position;\n}\n.hi-virtual-list--placeholder[data-v-7fe73d95] {\n  pointer-events: none;\n}\n.hi-virtual-list--item-wrapper[data-v-7fe73d95] {\n  box-sizing: border-box;\n}\n", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,kBAAkB;EAClB,kBAAkB;EAClB,4BAA4B;AAC9B;AACA;EACE,oBAAoB;AACtB;AACA;EACE,sBAAsB;AACxB","file":"index.vue","sourcesContent":[".hi-virtual-list {\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  will-change: scroll-position;\n}\n.hi-virtual-list--placeholder {\n  pointer-events: none;\n}\n.hi-virtual-list--item-wrapper {\n  box-sizing: border-box;\n}\n"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__ = "data-v-03a3ffda";
+    const __vue_scope_id__ = "data-v-7fe73d95";
     /* module identifier */
     const __vue_module_identifier__ = undefined;
     /* functional template */
@@ -208,7 +1760,21 @@
       undefined
     );
 
-  const components = [__vue_component__];
+  // 显式设置 name（避免 .vue 丢失）
+  __vue_component__.name = 'HiVirtualList';
+
+  // 添加 install
+  __vue_component__.install = Vue => {
+    Vue.component(__vue_component__.name, __vue_component__);
+  };
+
+  // eslint-disable-next-line prettier/prettier
+  const components = [
+    __vue_component__$3,
+    __vue_component__$2,
+    __vue_component__$1,
+    __vue_component__
+  ];
 
   const install = function (Vue) {
     components.forEach(component => {
@@ -216,7 +1782,13 @@
     });
   };
 
-  var index = { install, HiTitle: __vue_component__ };
+  var index = {
+    install,
+    HiExpandPanel: __vue_component__$3,
+    HiExpandText: __vue_component__$2,
+    HiTitle: __vue_component__$1,
+    HiVirtualList: __vue_component__
+  };
 
   return index;