@king-design/react 3.6.2-beta.1 → 3.7.0

package/components/anchor/useScroll.js

@@ -0,0 +1,218 @@
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import _Symbol from "@babel/runtime-corejs3/core-js/symbol";
+import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { var _context; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context = Object.prototype.toString.call(o)).call(_context, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { useInstance } from 'intact-react';
+import { useState } from '../../hooks/useState';
+export function useScroll() {
+  var instance = useInstance();
+  var isScrolling = useState(false);
+  var scrollTimer = null;
+  var rafId = null;
+  var scrollContainer = window;
+  // 回调函数，用于通知外部这是滚动触发的 value 变化
+  var setIsSettingFromScroll = null;
+  function getScrollContainer() {
+    var _instance$get = instance.get(),
+      container = _instance$get.container;
+    if (!container) {
+      return window;
+    }
+    if (typeof container === 'string') {
+      var el = document.querySelector(container);
+      return el || window;
+    }
+    return container;
+  }
+  // 获取当前滚动距离
+  function getScrollTop() {
+    if (scrollContainer === window) {
+      return window.scrollY || document.documentElement.scrollTop;
+    }
+    return scrollContainer.scrollTop;
+  }
+  // 获取滚动容器的高度
+  function getScrollHeight() {
+    if (scrollContainer === window) {
+      return document.documentElement.scrollHeight;
+    }
+    return scrollContainer.scrollHeight;
+  }
+  // 获取视口高度
+  function getViewportHeight() {
+    if (scrollContainer === window) {
+      return window.innerHeight;
+    }
+    return scrollContainer.clientHeight;
+  }
+  function getElementTop(element, container) {
+    if (container === window) {
+      // window: 累加 offsetTop
+      var offsetTop = 0;
+      var currentElement = element;
+      while (currentElement && currentElement !== document.body) {
+        offsetTop += currentElement.offsetTop;
+        currentElement = currentElement.offsetParent;
+      }
+      return offsetTop;
+    }
+    // 自定义容器: 使用 getBoundingClientRect
+    var containerEl = container;
+    var elementRect = element.getBoundingClientRect();
+    var containerRect = containerEl.getBoundingClientRect();
+    // 元素相对于容器内容区的位置 = 
+    // (元素到视口顶部的距离 - 容器到视口顶部的距离) + 容器已滚动的距离
+    return elementRect.top - containerRect.top + containerEl.scrollTop;
+  }
+  function scrollTo(target) {
+    var _instance$get2 = instance.get(),
+      _instance$get2$offset = _instance$get2.offset,
+      offset = _instance$get2$offset === void 0 ? 0 : _instance$get2$offset,
+      _instance$get2$durati = _instance$get2.duration,
+      duration = _instance$get2$durati === void 0 ? 700 : _instance$get2$durati;
+    // 目标位置
+    var targetTop = getElementTop(target, scrollContainer) - offset;
+    // 当前位置
+    var currentTop = getScrollTop();
+    if (Math.abs(currentTop - targetTop) < 1) return;
+    if (scrollTimer) {
+      clearTimeout(scrollTimer);
+    }
+    isScrolling.set(true);
+    if (scrollContainer === window) {
+      window.scrollTo({
+        top: targetTop,
+        behavior: 'smooth'
+      });
+    } else {
+      scrollContainer.scrollTo({
+        top: targetTop,
+        behavior: 'smooth'
+      });
+    }
+    scrollTimer = window.setTimeout(function () {
+      isScrolling.set(false);
+    }, duration);
+  }
+  // 滚动触发的 value 更新
+  function setValueFromScroll(href) {
+    if (setIsSettingFromScroll) {
+      setIsSettingFromScroll(true);
+    }
+    try {
+      instance.set('value', href);
+    } finally {
+      if (setIsSettingFromScroll) {
+        setIsSettingFromScroll(false);
+      }
+    }
+  }
+  // 更新当前激活的锚点
+  function updateActive() {
+    if (isScrolling.value) return;
+    var _instance$get3 = instance.get(),
+      _instance$get3$offset = _instance$get3.offset,
+      offset = _instance$get3$offset === void 0 ? 0 : _instance$get3$offset,
+      _instance$get3$thresh = _instance$get3.threshold,
+      threshold = _instance$get3$thresh === void 0 ? 50 : _instance$get3$thresh;
+    var links = instance.getLinks();
+    // 只处理当前存在且可见的锚点
+    var candidates = [];
+    for (var _iterator = _createForOfIteratorHelperLoose(links), _step; !(_step = _iterator()).done;) {
+      var _href = _step.value;
+      var _element = instance.getTargetElement(_href);
+      if (_element && _element.getClientRects().length > 0) {
+        candidates.push({
+          href: _href,
+          element: _element
+        });
+      }
+    }
+    if (candidates.length === 0) return;
+    var scrollTop = getScrollTop();
+    var viewportHeight = getViewportHeight();
+    var totalHeight = getScrollHeight();
+    var activeHref = candidates[0].href;
+    if (scrollTop + viewportHeight >= totalHeight - 10) {
+      // 接近底部，激活最后一个可见锚点
+      activeHref = candidates[candidates.length - 1].href;
+    } else if (scrollTop <= threshold) {
+      // 接近顶部，激活第一个可见锚点
+      activeHref = candidates[0].href;
+    } else {
+      // 正常滚动，寻找最后一个被“滚到”的锚点
+      for (var _iterator2 = _createForOfIteratorHelperLoose(candidates), _step2; !(_step2 = _iterator2()).done;) {
+        var _step2$value = _step2.value,
+          href = _step2$value.href,
+          element = _step2$value.element;
+        var sectionTop = getElementTop(element, scrollContainer) - offset - threshold;
+        if (scrollTop >= sectionTop) {
+          activeHref = href;
+        } else {
+          break;
+        }
+      }
+    }
+    if (activeHref !== instance.get('value')) {
+      setValueFromScroll(activeHref);
+    }
+  }
+  // 滚动事件处理
+  function onScroll() {
+    if (isScrolling.value) return;
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+    }
+    // 使用 requestAnimationFrame 优化滚动性能
+    rafId = requestAnimationFrame(updateActive);
+  }
+  // 挂载后的初始化
+  function init() {
+    setTimeout(function () {
+      scrollContainer = getScrollContainer();
+      if (scrollContainer === window) {
+        window.addEventListener('scroll', onScroll, {
+          passive: true
+        });
+      } else {
+        scrollContainer.addEventListener('scroll', onScroll, {
+          passive: true
+        });
+      }
+      var initialValue = instance.get('value');
+      if (initialValue) {
+        var element = instance.getTargetElement(initialValue);
+        if (element) {
+          scrollTo(element);
+          return;
+        }
+      }
+    }, 100);
+    return function () {
+      if (scrollTimer) {
+        clearTimeout(scrollTimer);
+      }
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
+      var currentContainer = scrollContainer;
+      if (currentContainer === window) {
+        window.removeEventListener('scroll', onScroll);
+      } else {
+        currentContainer.removeEventListener('scroll', onScroll);
+      }
+    };
+  }
+  return {
+    scrollTo: scrollTo,
+    updateActive: updateActive,
+    init: init,
+    isScrolling: isScrolling,
+    set setIsSettingFromScroll(fn) {
+      setIsSettingFromScroll = fn;
+    }
+  };
+}

package/components/dialog/base.vdt.js

@@ -19,7 +19,6 @@ export default function ($props, $blocks, $__proto__) {
     hideClose = _this$get.hideClose,
     overlay = _this$get.overlay,
     value = _this$get.value,
-    width = _this$get.width,
     mode = _this$get.mode,
     className = _this$get.className,
     cancelText = _this$get.cancelText,
@@ -28,6 +27,7 @@ export default function ($props, $blocks, $__proto__) {
     disabledOk = _this$get.disabledOk,
     title = _this$get.title,
     children = _this$get.children;
+  var width = $props.width !== undefined ? $props.width : this.get('width');
   var isHide = mode === 'hide';
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-dialog"] = true, _classNameObj[k + "-dragging"] = this.drag.dragging.value, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[makeDialogStyles(k)] = true, _classNameObj);

package/components/drawer/index.d.ts

@@ -3,9 +3,12 @@ import { BaseDialog, BaseDialogProps } from '../dialog/base';
 import { Placement } from './styles';
 export interface DrawerProps extends BaseDialogProps {
     placement?: Placement;
+    resizable?: boolean;
 }
 export declare class Drawer extends BaseDialog<DrawerProps> {
     static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<DrawerProps>>;
     static defaults: () => Partial<DrawerProps>;
+    private _resizable;
+    init(): void;
 }

package/components/drawer/index.js

@@ -1,22 +1,41 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import template from './index.vdt';
 import { BaseDialog } from '../dialog/base';
 import { placements } from './styles';
+import { useDrawerResizable } from './useDrawerResizable';
 var typeDefs = _extends({}, BaseDialog.typeDefs, {
-  placement: placements
+  placement: placements,
+  resizable: Boolean
 });
 var defaults = function defaults() {
   return _extends({}, BaseDialog.defaults(), {
     placement: 'right',
-    draggable: false
+    draggable: false,
+    resizable: false
   });
 };
 export var Drawer = /*#__PURE__*/function (_BaseDialog) {
   _inheritsLoose(Drawer, _BaseDialog);
   function Drawer() {
-    return _BaseDialog.apply(this, arguments) || this;
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _BaseDialog.call.apply(_BaseDialog, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this._resizable = useDrawerResizable(_this.dialogRef);
+    return _this;
   }
+  var _proto = Drawer.prototype;
+  _proto.init = function init() {
+    var _this2 = this;
+    _BaseDialog.prototype.init.call(this);
+    this.watch('width', function (v) {
+      _this2._resizable.drawerWidth.set(v || null);
+    });
+  };
   return Drawer;
 }(BaseDialog);
 Drawer.template = template;

package/components/drawer/index.spec.js

@@ -167,4 +167,87 @@ describe('Drawer', function () {
       }
     }, _callee5);
   })));
+  it('should show resize bar when resizable is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var Demo, _mount5, instance, element;
+    return _regeneratorRuntime.wrap(function _callee6$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component2) {
+            _inheritsLoose(Demo, _Component2);
+            function Demo() {
+              var _context7;
+              var _this2;
+              for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                args[_key2] = arguments[_key2];
+              }
+              _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context7 = [this]).call(_context7, args)) || this;
+              _this2.Drawer = Drawer;
+              return _this2;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const {Drawer} = this;\n                <Drawer value={true} resizable={true} placement=\"right\">\n                    <div>Content</div>\n                </Drawer>\n            ";
+          _mount5 = mount(Demo), instance = _mount5[0], element = _mount5[1];
+          _context8.next = 5;
+          return wait();
+        case 5:
+          expect(getElement('.k-drawer-resize')).to.not.be.undefined;
+        case 6:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee6);
+  })));
+  it('should update width when dragging', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var Demo, _mount6, instance, element, drawer, initialWidth, resizeBar, startX;
+    return _regeneratorRuntime.wrap(function _callee7$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component3) {
+            _inheritsLoose(Demo, _Component3);
+            function Demo() {
+              var _context9;
+              var _this3;
+              for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                args[_key3] = arguments[_key3];
+              }
+              _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context9 = [this]).call(_context9, args)) || this;
+              _this3.Drawer = Drawer;
+              return _this3;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const {Drawer} = this;\n                <Drawer value={true} resizable={true} placement=\"right\" ref=\"drawer\">\n                    <div>Content</div>\n                </Drawer>\n            ";
+          _mount6 = mount(Demo), instance = _mount6[0], element = _mount6[1];
+          _context10.next = 5;
+          return wait();
+        case 5:
+          drawer = instance.refs.drawer.dialogRef.value;
+          initialWidth = drawer.offsetWidth;
+          resizeBar = getElement('.k-drawer-resize');
+          startX = resizeBar.getBoundingClientRect().left;
+          dispatchEvent(resizeBar, 'mousedown', {
+            clientX: startX,
+            which: 1
+          });
+          _context10.next = 12;
+          return wait();
+        case 12:
+          dispatchEvent(document, 'mousemove', {
+            clientX: startX - 50
+          });
+          _context10.next = 15;
+          return wait();
+        case 15:
+          dispatchEvent(document, 'mouseup');
+          _context10.next = 18;
+          return wait(100);
+        case 18:
+          expect(drawer.offsetWidth).to.be.greaterThan(initialWidth);
+        case 19:
+        case "end":
+          return _context10.stop();
+      }
+    }, _callee7);
+  })));
 });

package/components/drawer/index.vdt.js

@@ -7,16 +7,36 @@ export default function ($props, $blocks, $__proto__) {
   var $this = this;
   var _this$get = this.get(),
     placement = _this$get.placement,
-    overlay = _this$get.overlay;
+    overlay = _this$get.overlay,
+    resizable = _this$get.resizable,
+    width = _this$get.width;
+  var _this$_resizable = this._resizable,
+    getResizeBarPosition = _this$_resizable.getResizeBarPosition,
+    getHeightResizeBarPosition = _this$_resizable.getHeightResizeBarPosition,
+    drawerWidth = _this$_resizable.drawerWidth,
+    isResizing = _this$_resizable.isResizing,
+    drawerHeight = _this$_resizable.drawerHeight,
+    startWidth = _this$_resizable.startWidth,
+    startHeight = _this$_resizable.startHeight;
+  var shouldShowHeightResizeBar = !!(resizable && (placement === 'top' || placement === 'bottom'));
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-drawer"] = true, _classNameObj[k + "-" + placement] = true, _classNameObj[makeStyles(overlay, k)] = true, _classNameObj);
   return _$su.call($this, {
-    'className': _$cn(classNameObj)
+    'className': _$cn(classNameObj),
+    'width': resizable ? drawerWidth.value || width : width
   }, function ($blocks) {
     var _$blocks = {},
       __$blocks = _$ex({}, $blocks);
     return (_$blocks['_content'] = function ($super) {
-      return _$ce(2, 'div', $super(), 0, _$cn(k + "-drawer-content"));
+      return _$ce(2, 'div', [$super(), !!resizable ? _$ce(2, 'div', null, 1, _$cn(k + "-drawer-resize " + k + "-drawer-resize-" + getResizeBarPosition()), {
+        'ev-mousedown': startWidth
+      }) : undefined, shouldShowHeightResizeBar ? _$ce(2, 'div', null, 1, _$cn(k + "-drawer-resize-horizontal " + k + "-drawer-resize-" + getHeightResizeBarPosition()), {
+        'ev-mousedown': startHeight
+      }) : undefined], 0, _$cn(k + "-drawer-content " + (isResizing.value ? k + "-drawer-resizing" : '')), {
+        'style': drawerHeight.value ? {
+          height: drawerHeight.value + "px"
+        } : null
+      });
     }, __$blocks['_content'] = function ($super, data) {
       var block = $blocks['_content'];
       var callBlock = function callBlock() {

package/components/drawer/styles.js

@@ -21,7 +21,7 @@ setDefault(function () {
 });
 export var makeStyles = cache(function makeStyles(overlay, k) {
   var borderRadius = theme.largeBorderRadius;
-  return /*#__PURE__*/css("&.k-drawer{position:fixed;background:transparent;box-shadow:none;border-radius:0;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.", k, "-drawer-content{transition:transform ", drawer.transition, ";}}.", k, "-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.", k, "-dialog-body{flex-grow:1;overflow:auto;}}", makePlacementStyles(k, 'right', "right: 0; height: 100%;", "translateX(100%)", borderRadius + " 0 0 " + borderRadius), " ", makePlacementStyles(k, 'left', 'left: 0; height: 100%;', "translateX(-100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " ", makePlacementStyles(k, 'top', 'left: 50%; top: 0; transform: translateX(-50%);', "translateY(-100%)", "0 0 " + borderRadius + " " + borderRadius), " ", makePlacementStyles(k, 'bottom', 'left: 50%; bottom: 0; transform: translateX(-50%);', "translateY(100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " &.", k, "-top,&.", k, "-bottom{width:100%;}");
+  return /*#__PURE__*/css("&.k-drawer{position:fixed;background:transparent;box-shadow:none;border-radius:0;max-height:100vh;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.", k, "-drawer-content{transition:transform ", drawer.transition, ";}}.", k, "-drawer-content{height:100%;max-height:100vh;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";position:relative;.", k, "-dialog-body{flex-grow:1;overflow:auto;}&.", k, "-drawer-resizing{transition:none!important;}}.", k, "-drawer-resize{position:absolute;top:0;bottom:0;width:5px;cursor:col-resize;z-index:10;user-select:none;&:hover{background:rgba(0, 0, 0, 0.1);}&.", k, "-drawer-resize-right{right:0;}&.", k, "-drawer-resize-left{left:0;}}.", k, "-drawer-resize-horizontal{position:absolute;left:0;right:0;height:5px;cursor:row-resize;z-index:10;user-select:none;&:hover{background:rgba(0, 0, 0, 0.1);}&.", k, "-drawer-resize-top{top:0;}&.", k, "-drawer-resize-bottom{bottom:0;}}", makePlacementStyles(k, 'right', "right: 0; height: 100%;", "translateX(100%)", borderRadius + " 0 0 " + borderRadius), " ", makePlacementStyles(k, 'left', 'left: 0; height: 100%;', "translateX(-100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " ", makePlacementStyles(k, 'top', 'left: 50%; top: 0; transform: translateX(-50%);', "translateY(-100%)", "0 0 " + borderRadius + " " + borderRadius), " ", makePlacementStyles(k, 'bottom', 'left: 50%; bottom: 0; transform: translateX(-50%);', "translateY(100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " &.", k, "-top,&.", k, "-bottom{width:100%;}");
 });
 function makePlacementStyles(k, placement, styles, transform, borderRadius) {
   return /*#__PURE__*/css("&.", k, "-drawer.", k, "-", placement, "{", styles, " &.transition-enter-from,&.transition-leave-to,&.transition-appear-from{.", k, "-drawer-content{transform:", transform, ";}}.", k, "-drawer-content{border-radius:", borderRadius, ";}}");

package/components/drawer/useDrawerResizable.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'intact-react';
+export declare function useDrawerResizable(drawerRef: RefObject<HTMLElement>): {
+    drawerWidth: import("../../hooks/useState").State<string | number | null>;
+    drawerHeight: import("../../hooks/useState").State<number | null>;
+    isResizing: import("../../hooks/useState").State<boolean>;
+    getResizeBarPosition: () => 'left' | 'right';
+    getHeightResizeBarPosition: () => 'top' | 'bottom';
+    startWidth: (e: MouseEvent) => void;
+    startHeight: (e: MouseEvent) => void;
+};

package/components/drawer/useDrawerResizable.js

@@ -0,0 +1,162 @@
+import { useInstance, onMounted, onBeforeUnmount } from 'intact-react';
+import { useState } from '../../hooks/useState';
+import { useDraggable } from '../../hooks/useDraggable';
+export function useDrawerResizable(drawerRef) {
+  var instance = useInstance();
+  var _instance$get = instance.get(),
+    width = _instance$get.width;
+  var drawerWidth = useState(width || null);
+  var drawerHeight = useState(null);
+  var isResizing = useState(false);
+  var startX = 0;
+  var startWidth = 0;
+  var startY = 0;
+  var startHeight = 0;
+  var minWidth = 200; // 最小宽度
+  var maxWidth = window.innerWidth; // 最大宽度
+  var minHeight = 200; // 最小高度
+  var maxHeight = window.innerHeight; // 最大高度
+  // 监听窗口大小变化，更新最大宽高
+  var handleResize = null;
+  onMounted(function () {
+    handleResize = function handleResize() {
+      maxWidth = window.innerWidth;
+      maxHeight = window.innerHeight;
+    };
+    window.addEventListener('resize', handleResize);
+  });
+  onBeforeUnmount(function () {
+    if (handleResize) {
+      window.removeEventListener('resize', handleResize);
+    }
+  });
+  // 宽度拖拽
+  function onStartWidth(e) {
+    var drawer = drawerRef.value;
+    if (!drawer) return;
+    startX = e.clientX;
+    startWidth = drawer.offsetWidth;
+    drawerWidth.set(startWidth);
+    isResizing.set(true);
+    // 锁定全局样式
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+  }
+  function onMoveWidth(e) {
+    var drawer = drawerRef.value;
+    if (!drawer) return;
+    var _instance$get2 = instance.get(),
+      placement = _instance$get2.placement,
+      resizable = _instance$get2.resizable;
+    // 计算鼠标移动距离
+    var deltaX = e.clientX - startX;
+    var widthDelta = deltaX;
+    // 根据 placement 调整拖拽方向
+    if (placement === 'right') {
+      widthDelta = -deltaX;
+    } else if (placement === 'left') {
+      widthDelta = deltaX;
+    } else {
+      // top / bottom 模式：由于是居中（left: 50%, transform: translateX(-50%)）对称增长
+      // 宽度变化量应该是位移的两倍才能保持鼠标跟随
+      widthDelta = deltaX * 2;
+    }
+    var newWidth = Math.max(minWidth, Math.min(maxWidth, startWidth + widthDelta));
+    drawerWidth.set(newWidth);
+  }
+  function onEndWidth() {
+    isResizing.set(false);
+    // 恢复全局样式
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+  }
+  var widthDrag = useDraggable({
+    onStart: onStartWidth,
+    onMove: onMoveWidth,
+    onEnd: onEndWidth,
+    disable: function disable() {
+      var _instance$get3 = instance.get(),
+        resizable = _instance$get3.resizable;
+      return !resizable;
+    }
+  });
+  // 高度拖拽，仅在 placement 为 top / bottom 时启用
+  function onStartHeight(e) {
+    var drawer = drawerRef.value;
+    if (!drawer) return;
+    var _instance$get4 = instance.get(),
+      placement = _instance$get4.placement,
+      resizable = _instance$get4.resizable;
+    if (!resizable || placement !== 'top' && placement !== 'bottom') return;
+    startY = e.clientY;
+    startHeight = drawer.offsetHeight;
+    drawerHeight.set(startHeight);
+    isResizing.set(true);
+    // 锁定全局样式
+    document.body.style.cursor = 'row-resize';
+    document.body.style.userSelect = 'none';
+  }
+  function onMoveHeight(e) {
+    var drawer = drawerRef.value;
+    if (!drawer) return;
+    var _instance$get5 = instance.get(),
+      placement = _instance$get5.placement;
+    if (placement !== 'top' && placement !== 'bottom') return;
+    var deltaY = e.clientY - startY;
+    var heightDelta = placement === 'top' ? deltaY : -deltaY;
+    var newHeight = Math.max(minHeight, Math.min(maxHeight, startHeight + heightDelta));
+    // 设置状态，由模板进行渲染
+    drawerHeight.set(newHeight);
+  }
+  function onEndHeight() {
+    isResizing.set(false);
+    // 恢复全局样式
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+  }
+  var heightDrag = useDraggable({
+    onStart: onStartHeight,
+    onMove: onMoveHeight,
+    onEnd: onEndHeight,
+    disable: function disable() {
+      var _instance$get6 = instance.get(),
+        placement = _instance$get6.placement,
+        resizable = _instance$get6.resizable;
+      return !resizable || placement !== 'top' && placement !== 'bottom';
+    }
+  });
+  // 重置 resize 状态
+  function resetResizeState() {
+    var _instance$get7 = instance.get(),
+      width = _instance$get7.width;
+    drawerWidth.set(width || null);
+    drawerHeight.set(null);
+  }
+  // 监听 placement 变化，切换时重置 resize 状态
+  instance.watch('placement', function (newPlacement, oldPlacement) {
+    if (oldPlacement !== undefined && newPlacement !== oldPlacement) {
+      resetResizeState();
+    }
+  });
+  // 获取宽度拖拽条位置
+  function getResizeBarPosition() {
+    var _instance$get8 = instance.get(),
+      placement = _instance$get8.placement;
+    return placement === 'right' ? 'left' : 'right';
+  }
+  // 获取高度拖拽条位置
+  function getHeightResizeBarPosition() {
+    var _instance$get9 = instance.get(),
+      placement = _instance$get9.placement;
+    return placement === 'top' ? 'bottom' : 'top';
+  }
+  return {
+    drawerWidth: drawerWidth,
+    drawerHeight: drawerHeight,
+    isResizing: isResizing,
+    getResizeBarPosition: getResizeBarPosition,
+    getHeightResizeBarPosition: getHeightResizeBarPosition,
+    startWidth: widthDrag.start,
+    startHeight: heightDrag.start
+  };
+}

package/components/menu/styles.d.ts

@@ -38,6 +38,7 @@ declare const defaults: {
         readonly border: string;
         item: {
             readonly color: string;
+            readonly arrowColor: string;
             readonly hoverColor: string;
             readonly hoverBg: string;
             disabledColor: string;

package/components/menu/styles.js

@@ -58,6 +58,9 @@ var defaults = {
       get color() {
         return theme.color.text;
       },
+      get arrowColor() {
+        return theme.color.lightBlack;
+      },
       get hoverColor() {
         return theme.color.primary;
       },
@@ -112,7 +115,7 @@ export { menu };
 export var makeMenuStyles = cache(function makeMenuStyles(k) {
   // we must increase the priority by adding &.${k}-menu
   // to override the css of dropdownMenu
-  return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";position:relative;}.", k, "-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.", k, "-menu-header{height:", menu.header.height, ";padding:0 16px;color:", menu.header.color, ";font-size:", menu.header.fontSize, ";font-weight:bold;}.", k, "-menu-body{padding:", menu.item.bodyPadding, ";max-height:calc(100% - ", menu.header.height, ");overflow-y:auto;overflow-x:hidden;scrollbar-width:none;}.", k, "-menu-title{height:", menu.title.height, ";border-top:", menu.border, ";margin-top:4px;.", k, "-menu-name{transition:all ", menu.transition, ";height:", menu.title.height, ";color:", menu.title.color, ";font-weight:bold;}}.", k, "-menu-arrow-box{width:14px;height:60px;cursor:pointer;background:", menu.bgColor, ";border-radius:0 8px 8px 0;position:absolute;display:flex;align-items:center;justify-content:center;top:50%;left:calc(", menu.width, " - 2px);transition:left ", menu.transition, ";transform:translateY(-50%);border:", menu.border, ";border-left:none;.", k, "-icon{margin-right:0;}&:hover{.", k, "-menu-arrow:before{color:", menu.item.activeBgColor, ";}}}&.", k, "-light{border-right:1px solid ", theme.color.disabledBg, ";background:", menu.light.bgColor, ";.", k, "-menu-header{color:", menu.light.title.color, ";}.", k, "-menu-item{.", k, "-menu-item-title{color:", menu.light.item.color, ";&:hover{background:", menu.light.item.hoverBg, ";}}.", k, "-menu-item-arrow{color:", menu.light.item.color, ";}&.", k, "-highlighted{>.", k, "-menu-item-title{color:", menu.light.item.hoverColor, ";}}&.", k, "-disabled{>.", k, "-menu-item-title{color:", menu.light.item.disabledColor, "!important;}}}.", k, "-menu-title{border-top:", menu.light.border, ";.", k, "-menu-name{color:", menu.light.title.color, ";}}.", k, "-menu-arrow-box{background:", menu.light.bgColor, ";border:", menu.light.border, ";border-left:none;&:hover{.", k, "-menu-arrow:before{color:", menu.light.active.color, ";}}}.", k, "-menu:not(.", k, "-dropdown-menu){background:", menu.light.bgColor, ";}&.", k, "-horizontal{.", k, "-menu-header{border-right:", menu.light.border, ";}.", k, "-menu-body>.", k, "-menu-title{border-right:", menu.light.border, ";}}.", k, "-menu-item.", k, "-active{>.", k, "-menu-item-title{color:", menu.light.active.color, "!important;background:", menu.light.active.bgColor, ";}}.", k, "-sub-menu{.", k, "-menu-item-title,.", k, "-menu-item-arrow{color:", menu.light.item.subTitleColor, "!important;}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";position:relative;}.", k, "-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.", k, "-menu-header{height:", menu.header.height, ";padding:0 16px;color:", menu.header.color, ";font-size:", menu.header.fontSize, ";font-weight:bold;}.", k, "-menu-body{padding:", menu.item.bodyPadding, ";max-height:calc(100% - ", menu.header.height, ");overflow-y:auto;overflow-x:hidden;scrollbar-width:none;}.", k, "-menu-title{height:", menu.title.height, ";border-top:", menu.border, ";margin-top:4px;.", k, "-menu-name{transition:all ", menu.transition, ";height:", menu.title.height, ";color:", menu.title.color, ";font-weight:bold;}}.", k, "-menu-arrow-box{width:14px;height:60px;cursor:pointer;background:", menu.bgColor, ";border-radius:0 8px 8px 0;position:absolute;display:flex;align-items:center;justify-content:center;top:50%;left:calc(", menu.width, " - 2px);transition:left ", menu.transition, ";transform:translateY(-50%);border:", menu.border, ";border-left:none;.", k, "-icon{margin-right:0;}&:hover{.", k, "-menu-arrow:before{color:", menu.item.activeBgColor, ";}}}&.", k, "-light{border-right:1px solid ", theme.color.disabledBg, ";background:", menu.light.bgColor, ";.", k, "-menu-header{color:", menu.light.title.color, ";}.", k, "-menu-item{.", k, "-menu-item-title{color:", menu.light.item.color, ";&:hover{background:", menu.light.item.hoverBg, ";}}.", k, "-menu-item-arrow{color:", menu.light.item.arrowColor, ";}&.", k, "-highlighted{>.", k, "-menu-item-title{color:", menu.light.item.hoverColor, ";}}&.", k, "-disabled{>.", k, "-menu-item-title{color:", menu.light.item.disabledColor, "!important;}}}.", k, "-menu-title{border-top:", menu.light.border, ";.", k, "-menu-name{color:", menu.light.title.color, ";}}.", k, "-menu-arrow-box{background:", menu.light.bgColor, ";border:", menu.light.border, ";border-left:none;&:hover{.", k, "-menu-arrow:before{color:", menu.light.active.color, ";}}}.", k, "-menu:not(.", k, "-dropdown-menu){background:", menu.light.bgColor, ";}&.", k, "-horizontal{.", k, "-menu-header{border-right:", menu.light.border, ";}.", k, "-menu-body>.", k, "-menu-title{border-right:", menu.light.border, ";}}.", k, "-menu-item.", k, "-active{>.", k, "-menu-item-title{color:", menu.light.active.color, "!important;background:", menu.light.active.bgColor, ";}}.", k, "-sub-menu{.", k, "-menu-item-title{color:", menu.light.item.subTitleColor, "!important;}.", k, "-menu-item-arrow{color:", menu.light.item.arrowColor, "!important;}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = menu[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{width:", styles.width, ";font-size:", styles.fontSize, ";.", k, "-menu{font-size:", styles.fontSize, ";}.", k, "-menu-arrow-box{left:calc(", styles.width, " - 2px);}}");
   }), "&.", k, "-collapsed{width:calc(", menu.icon.width, " + (", getLeft(menu.item.padding), " + ", getLeft(menu.item.bodyPadding), ") * 2);.", k, "-icon{margin-right:0;}.", k, "-menu-item-arrow{display:none;}}&.", k, "-collapsed-arrow{width:0px;border-left:none;.", k, "-menu-header{padding:0;}.", k, "-menu-body{overflow:hidden;padding:0;}.", k, "-menu-arrow-box{left:0;.", k, "-menu-arrow:before{transform:rotateY(180deg);}}}&.", k, "-dropdown-menu{width:fit-content;min-width:", menu.dropdown.minWidth, ";position:absolute;.", k, "-menu-item-arrow{transform:rotate(-90deg);}}&.", k, "-horizontal{width:auto;display:flex;.", k, "-menu-body{display:flex;align-items:center;.", k, "-menu-title{border-top:none;border-right:", menu.border, ";}}}");

package/components/notification/index.d.ts

@@ -0,0 +1 @@
+export * from './notification';

package/components/notification/index.js

@@ -0,0 +1 @@
+export * from './notification';

package/components/notification/index.spec.d.ts

@@ -0,0 +1 @@
+export {};