@douyinfe/semi-foundation 2.70.0-alpha.2 → 2.70.0-beta.0

package/datePicker/yearAndMonthFoundation.ts

@@ -105,9 +105,9 @@ export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthA
         const month = copy(currentMonth);
         month[panelType] = item.month;
 
-        // make sure the right panel time is always less than the left panel time
+        // Make sure the time on the right panel is always greater than or equal to the time on the left panel
         if (type === 'monthRange' && panelType === left && currentYear[left] === currentYear[right] && item.value > month[right]) {
-            month[right] = item.month + 1;
+            month[right] = item.month ;
         } 
 
         this._adapter.setCurrentMonth(month);
@@ -121,8 +121,19 @@ export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthA
         const { disabledDate, locale } = this._adapter.getProps();
         const { months, currentMonth } = this._adapter.getStates();
 
+        const oppositeType = panelType === strings.PANEL_TYPE_LEFT ? 'right' : 'left';
+
         const currentDate = setYear(Date.now(), item.year);
         const isCurrentMonthDisabled = disabledDate(setMonth(currentDate, currentMonth[panelType] - 1));
+        // whether the date on the opposite is legal
+        const isOppositeMonthDisabled = disabledDate(setMonth(setYear(Date.now(), year[oppositeType]), currentMonth[oppositeType] - 1));
+
+        if (!isCurrentMonthDisabled && !isOppositeMonthDisabled) {
+            // all panel Date is legal
+            return;
+        }
+        let finalYear = year;
+        let finalMonth = currentMonth;
         if (isCurrentMonthDisabled) {
             const currentIndex = months.findIndex(({ month }) => month === currentMonth[panelType]);
             let validMonth: typeof months[number];
@@ -131,15 +142,24 @@ export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthA
             if (!validMonth) {
                 validMonth = months.slice(0, currentIndex).find(({ month }) => !disabledDate(setMonth(currentDate, month - 1)));
             }
-            if (validMonth) {
-                const month = copy(currentMonth);
-                month[panelType] = validMonth.month;
-
-                // change year and month same time
-                this._adapter.setCurrentYearAndMonth(year, month);
-                this._adapter.notifySelectYearAndMonth(year, month);
+            if (validMonth && !isOppositeMonthDisabled) {
+                // only currentPanel Date is illegal
+                // just need to modify the month of the current panel
+                finalMonth[panelType] = validMonth.month; 
+            } else if (validMonth && isOppositeMonthDisabled) {
+                // all panel Date is illegal
+                // change the value to the legal value calculated by the current panel
+                finalYear = { 'left': item.year, 'right': item.year };
+                finalMonth = { 'left': validMonth.month, 'right': validMonth.month };
             }
+        } else if (!isCurrentMonthDisabled && isOppositeMonthDisabled) {
+            // only opposite panel Date is illegal
+            // change the value to the legal value in the current panel
+            finalYear = { 'left': item.year, 'right': item.year };
+            finalMonth = { 'left': currentMonth[panelType], 'right': currentMonth[panelType] };
         }
+        this._adapter.setCurrentYearAndMonth(finalYear, finalMonth);
+        this._adapter.notifySelectYearAndMonth(finalYear, finalMonth);
     }
 
     backToMain() {

package/lib/cjs/datePicker/yearAndMonthFoundation.js

@@ -55,9 +55,9 @@ class YearAndMonthFoundation extends _foundation.default {
     const right = _constants.strings.PANEL_TYPE_RIGHT;
     const month = (0, _fastCopy.default)(currentMonth);
     month[panelType] = item.month;
-    // make sure the right panel time is always less than the left panel time
+    // Make sure the time on the right panel is always greater than or equal to the time on the left panel
     if (type === 'monthRange' && panelType === left && currentYear[left] === currentYear[right] && item.value > month[right]) {
-      month[right] = item.month + 1;
+      month[right] = item.month;
     }
     this._adapter.setCurrentMonth(month);
     this._adapter.notifySelectMonth(month);
@@ -74,8 +74,17 @@ class YearAndMonthFoundation extends _foundation.default {
       months,
       currentMonth
     } = this._adapter.getStates();
+    const oppositeType = panelType === _constants.strings.PANEL_TYPE_LEFT ? 'right' : 'left';
     const currentDate = (0, _dateFns.setYear)(Date.now(), item.year);
     const isCurrentMonthDisabled = disabledDate((0, _dateFns.setMonth)(currentDate, currentMonth[panelType] - 1));
+    // whether the date on the opposite is legal
+    const isOppositeMonthDisabled = disabledDate((0, _dateFns.setMonth)((0, _dateFns.setYear)(Date.now(), year[oppositeType]), currentMonth[oppositeType] - 1));
+    if (!isCurrentMonthDisabled && !isOppositeMonthDisabled) {
+      // all panel Date is legal
+      return;
+    }
+    let finalYear = year;
+    let finalMonth = currentMonth;
     if (isCurrentMonthDisabled) {
       const currentIndex = months.findIndex(_ref => {
         let {
@@ -99,14 +108,36 @@ class YearAndMonthFoundation extends _foundation.default {
           return !disabledDate((0, _dateFns.setMonth)(currentDate, month - 1));
         });
       }
-      if (validMonth) {
-        const month = (0, _fastCopy.default)(currentMonth);
-        month[panelType] = validMonth.month;
-        // change year and month same time
-        this._adapter.setCurrentYearAndMonth(year, month);
-        this._adapter.notifySelectYearAndMonth(year, month);
+      if (validMonth && !isOppositeMonthDisabled) {
+        // only currentPanel Date is illegal
+        // just need to modify the month of the current panel
+        finalMonth[panelType] = validMonth.month;
+      } else if (validMonth && isOppositeMonthDisabled) {
+        // all panel Date is illegal
+        // change the value to the legal value calculated by the current panel
+        finalYear = {
+          'left': item.year,
+          'right': item.year
+        };
+        finalMonth = {
+          'left': validMonth.month,
+          'right': validMonth.month
+        };
       }
+    } else if (!isCurrentMonthDisabled && isOppositeMonthDisabled) {
+      // only opposite panel Date is illegal
+      // change the value to the legal value in the current panel
+      finalYear = {
+        'left': item.year,
+        'right': item.year
+      };
+      finalMonth = {
+        'left': currentMonth[panelType],
+        'right': currentMonth[panelType]
+      };
     }
+    this._adapter.setCurrentYearAndMonth(finalYear, finalMonth);
+    this._adapter.notifySelectYearAndMonth(finalYear, finalMonth);
   }
   backToMain() {
     this._adapter.notifyBackToMain();

package/lib/cjs/markdownRender/foundation.d.ts

@@ -10,6 +10,7 @@ export interface MarkdownRenderBaseProps {
     format: "md" | "mdx";
     remarkPlugins?: PluggableList;
     rehypePlugins?: PluggableList;
+    remarkGfm?: boolean;
 }
 export interface MarkdownRenderBaseState {
     MDXContentComponent: any;

package/lib/cjs/markdownRender/foundation.js

@@ -39,17 +39,22 @@ class MarkdownRenderFoundation extends _foundation.default {
   constructor() {
     super(...arguments);
     this.getOptions = () => {
-      var _a, _b, _c, _d;
+      var _a, _b, _c;
+      const enableRemarkGfm = this._adapter.getProp("remarkGfm");
+      const remarkPlugins = [...((_a = this.getProp("remarkPlugins")) !== null && _a !== void 0 ? _a : [])];
+      if (enableRemarkGfm) {
+        remarkPlugins.unshift(_remarkGfm.default);
+      }
       return {
         evaluateOptions: {
-          remarkPlugins: [_remarkGfm.default, ...((_a = this.getProp("remarkPlugins")) !== null && _a !== void 0 ? _a : [])],
+          remarkPlugins: remarkPlugins,
           rehypePlugins: (_b = this.getProp("rehypePlugins")) !== null && _b !== void 0 ? _b : [],
           format: this.getProp("format")
         },
         compileOptions: {
           format: this.getProp("format"),
-          remarkPlugins: [_remarkGfm.default, ...((_c = this.getProp("remarkPlugins")) !== null && _c !== void 0 ? _c : [])],
-          rehypePlugins: (_d = this.getProp("rehypePlugins")) !== null && _d !== void 0 ? _d : []
+          remarkPlugins: remarkPlugins,
+          rehypePlugins: (_c = this.getProp("rehypePlugins")) !== null && _c !== void 0 ? _c : []
         },
         runOptions: {}
       };

package/lib/cjs/overflowList/constants.d.ts

@@ -2,7 +2,7 @@ declare const cssClasses: {
     PREFIX: string;
 };
 declare const strings: {
-    BOUNDARY_SET: ("start" | "end")[];
+    BOUNDARY_SET: ("end" | "start")[];
     POSITION_SET: string[];
     MODE_SET: string[];
     MODE_MAP: {

package/lib/cjs/resizable/foundation.d.ts

@@ -1,4 +1,2 @@
-import { ResizableHandlerAdapter, ResizableHandlerFoundation, ResizableFoundation, ResizableAdapter } from './single';
-export { ResizableHandlerAdapter, ResizableHandlerFoundation, ResizableFoundation, ResizableAdapter };
-import { ResizeGroupAdapter, ResizeItemAdapter, ResizeHandlerAdapter, ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation } from './group';
-export { ResizeGroupAdapter, ResizeItemAdapter, ResizeHandlerAdapter, ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation };
+export { ResizableHandlerAdapter, ResizableHandlerFoundation, ResizableFoundation, ResizableAdapter } from './single';
+export { ResizeGroupAdapter, ResizeItemAdapter, ResizeHandlerAdapter, ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation } from './group';

package/lib/cjs/resizable/group/index.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from '../../base/foundation';
-import { ResizeStartCallback, ResizeCallback } from "../singleConstants";
+import { ResizeStartCallback, ResizeCallback } from "../types";
 export interface ResizeHandlerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     registerEvents: () => void;
     unregisterEvents: () => void;
@@ -34,10 +35,11 @@ export interface ResizeGroupAdapter<P = Record<string, any>, S = Record<string,
 export declare class ResizeGroupFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ResizeGroupAdapter<P, S>, P, S> {
     constructor(adapter: ResizeGroupAdapter<P, S>);
     get groupRef(): HTMLDivElement | null;
+    get groupSize(): number;
     direction: 'horizontal' | 'vertical';
     itemMinusMap: Map<number, number>;
     totalMinus: number;
-    avaliableSize: number;
+    itemPercentMap: Map<number, number>;
     init(): void;
     get window(): Window | null;
     registerEvents: () => void;
@@ -45,6 +47,7 @@ export declare class ResizeGroupFoundation<P = Record<string, any>, S = Record<s
     onResizeStart: (handlerIndex: number, e: MouseEvent) => void;
     onResizing: (e: MouseEvent) => void;
     onResizeEnd: (e: MouseEvent) => void;
-    calculateSpace: () => void;
+    initSpace: () => void;
+    ensureConstraint: import("lodash").DebouncedFunc<() => void>;
     destroy(): void;
 }

package/lib/cjs/resizable/group/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ResizeItemFoundation = exports.ResizeHandlerFoundation = exports.ResizeGroupFoundation = void 0;
+var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
 var _utils = require("../utils");
 var _foundation = _interopRequireDefault(require("../../base/foundation"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -47,16 +48,18 @@ class ResizeGroupFoundation extends _foundation.default {
       // offset caused by padding and border
       const lastStyle = this.window.getComputedStyle(lastItem);
       const nextStyle = this.window.getComputedStyle(nextItem);
-      lastOffset = (0, _utils.getOffset)(lastStyle, this.direction);
-      nextOffset = (0, _utils.getOffset)(nextStyle, this.direction);
+      lastOffset = (0, _utils.getOffset)(lastStyle, this.direction) + this.itemMinusMap.get(handlerIndex);
+      nextOffset = (0, _utils.getOffset)(nextStyle, this.direction) + this.itemMinusMap.get(handlerIndex + 1);
+      let lastItemSize = (this.direction === 'horizontal' ? lastItem.offsetWidth : lastItem.offsetHeight) + this.itemMinusMap.get(handlerIndex),
+        nextItemSize = (this.direction === 'horizontal' ? nextItem.offsetWidth : nextItem.offsetHeight) + this.itemMinusMap.get(handlerIndex + 1);
       const states = this.getStates();
       this.setState({
         isResizing: true,
         originalPosition: {
           x: clientX,
           y: clientY,
-          lastItemSize: this.direction === 'horizontal' ? lastItem.offsetWidth : lastItem.offsetHeight,
-          nextItemSize: this.direction === 'horizontal' ? nextItem.offsetWidth : nextItem.offsetHeight,
+          lastItemSize,
+          nextItemSize,
           lastOffset,
           nextOffset
         },
@@ -103,28 +106,33 @@ class ResizeGroupFoundation extends _foundation.default {
       } = props;
       let lastItem = this._adapter.getItem(curHandler),
         nextItem = this._adapter.getItem(curHandler + 1);
-      let parentSize = this.direction === 'horizontal' ? this.groupRef.offsetWidth : this.groupRef.offsetHeight;
-      let availableSize = parentSize - this.totalMinus;
+      let parentSize = this.groupSize;
       let delta = direction === 'horizontal' ? clientX - initX : clientY - initY;
       let lastNewSize = lastItemSize + delta;
       let nextNewSize = nextItemSize - delta;
       // 判断是否超出限制
-      let lastFlag = (0, _utils.judgeConstraint)(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), availableSize, lastOffset),
-        nextFlag = (0, _utils.judgeConstraint)(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), availableSize, nextOffset);
+      let lastFlag = (0, _utils.judgeConstraint)(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), parentSize, lastOffset),
+        nextFlag = (0, _utils.judgeConstraint)(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), parentSize, nextOffset);
       if (lastFlag) {
-        lastNewSize = (0, _utils.adjustNewSize)(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), availableSize, lastOffset);
+        lastNewSize = (0, _utils.adjustNewSize)(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), parentSize, lastOffset);
         nextNewSize = lastItemSize + nextItemSize - lastNewSize;
       }
       if (nextFlag) {
-        nextNewSize = (0, _utils.adjustNewSize)(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), availableSize, nextOffset);
+        nextNewSize = (0, _utils.adjustNewSize)(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), parentSize, nextOffset);
         lastNewSize = lastItemSize + nextItemSize - nextNewSize;
       }
+      let lastItemPercent = this.itemPercentMap.get(curHandler),
+        nextItemPercent = this.itemPercentMap.get(curHandler + 1);
+      let lastNewPercent = lastNewSize / parentSize * 100;
+      let nextNewPercent = lastItemPercent + nextItemPercent - lastNewPercent; // 消除浮点误差
+      this.itemPercentMap.set(curHandler, lastNewPercent);
+      this.itemPercentMap.set(curHandler + 1, nextNewPercent);
       if (direction === 'horizontal') {
-        lastItem.style.width = lastNewSize / parentSize * 100 + '%';
-        nextItem.style.width = nextNewSize / parentSize * 100 + '%';
+        lastItem.style.width = `calc(${lastNewPercent}% - ${this.itemMinusMap.get(curHandler)}px)`;
+        nextItem.style.width = `calc(${nextNewPercent}% - ${this.itemMinusMap.get(curHandler + 1)}px)`;
       } else if (direction === 'vertical') {
-        lastItem.style.height = lastNewSize / parentSize * 100 + '%';
-        nextItem.style.height = nextNewSize / parentSize * 100 + '%';
+        lastItem.style.height = `calc(${lastNewPercent}% - ${this.itemMinusMap.get(curHandler)}px)`;
+        nextItem.style.height = `calc(${nextNewPercent}% - ${this.itemMinusMap.get(curHandler + 1)}px)`;
       }
       let lastFunc = this._adapter.getItemChange(curHandler),
         nextFunc = this._adapter.getItemChange(curHandler + 1);
@@ -169,14 +177,14 @@ class ResizeGroupFoundation extends _foundation.default {
       });
       this.unregisterEvents();
     };
-    this.calculateSpace = () => {
+    this.initSpace = () => {
       const props = this.getProps();
       const {
         direction
       } = props;
       // calculate accurate space for group item
       let handlerSizes = new Array(this._adapter.getHandlerCount()).fill(0);
-      let groupSize = direction === 'horizontal' ? this.groupRef.offsetWidth : this.groupRef.offsetHeight;
+      let parentSize = this.groupSize;
       this.totalMinus = 0;
       for (let i = 0; i < this._adapter.getHandlerCount(); i++) {
         let handlerSize = direction === 'horizontal' ? this._adapter.getHandler(i).offsetWidth : this._adapter.getHandler(i).offsetHeight;
@@ -198,8 +206,8 @@ class ResizeGroupFoundation extends _foundation.default {
         const child = this._adapter.getItem(i);
         let minSize = this._adapter.getItemMin(i),
           maxSize = this._adapter.getItemMax(i);
-        let minSizePercent = minSize ? (0, _utils.getPixelSize)(minSize, groupSize) / groupSize * 100 : 0,
-          maxSizePercent = maxSize ? (0, _utils.getPixelSize)(maxSize, groupSize) / groupSize * 100 : 100;
+        let minSizePercent = minSize ? (0, _utils.getPixelSize)(minSize, parentSize) / parentSize * 100 : 0,
+          maxSizePercent = maxSize ? (0, _utils.getPixelSize)(maxSize, parentSize) / parentSize * 100 : 100;
         if (minSizePercent > maxSizePercent) {
           console.warn('[Semi ResizableItem]: min size bigger than max size');
         }
@@ -209,15 +217,17 @@ class ResizeGroupFoundation extends _foundation.default {
           if (typeof defaultSize === 'string') {
             if (defaultSize.endsWith('%')) {
               itemSizePercent = parseFloat(defaultSize.slice(0, -1));
+              this.itemPercentMap.set(i, itemSizePercent);
             } else if (defaultSize.endsWith('px')) {
-              itemSizePercent = parseFloat(defaultSize.slice(0, -2)) / groupSize * 100;
+              itemSizePercent = parseFloat(defaultSize.slice(0, -2)) / parentSize * 100;
+              this.itemPercentMap.set(i, itemSizePercent);
             } else if (/^-?\d+(\.\d+)?$/.test(defaultSize)) {
               // 仅由数字组成，表示按比例分配剩下空间
               undefineLoc.set(i, parseFloat(defaultSize));
               undefinedTotal += parseFloat(defaultSize);
               continue;
             }
-          } else {
+          } else if (typeof defaultSize === 'number') {
             undefineLoc.set(i, defaultSize);
             undefinedTotal += defaultSize;
             continue;
@@ -246,21 +256,78 @@ class ResizeGroupFoundation extends _foundation.default {
       }
       undefineLoc.forEach((value, key) => {
         const child = this._adapter.getItem(key);
+        const percent = value / undefinedTotal * undefineSizePercent;
+        this.itemPercentMap.set(key, percent);
         if (direction === 'horizontal') {
-          child.style.width = `calc(${undefineSizePercent / undefinedTotal * value}% - ${this.itemMinusMap.get(key)}px)`;
+          child.style.width = `calc(${percent}% - ${this.itemMinusMap.get(key)}px)`;
         } else {
-          child.style.height = `calc(${undefineSizePercent / undefinedTotal * value}% - ${this.itemMinusMap.get(key)}px)`;
+          child.style.height = `calc(${percent}% - ${this.itemMinusMap.get(key)}px)`;
         }
       });
     };
+    this.ensureConstraint = (0, _debounce2.default)(() => {
+      // 浏览器拖拽时保证px值最大最小仍生效
+      const {
+        direction
+      } = this.getProps();
+      const itemCount = this._adapter.getItemCount();
+      let continueFlag = true;
+      for (let i = 0; i < itemCount; i++) {
+        const child = this._adapter.getItem(i);
+        const childSize = direction === 'horizontal' ? child.offsetWidth : child.offsetHeight;
+        // 判断由非鼠标拖拽导致item的size变化过程中是否有超出限制的情况
+        const childFlag = (0, _utils.judgeConstraint)(childSize, this._adapter.getItemMin(i), this._adapter.getItemMax(i), this.groupSize, this.itemMinusMap.get(i));
+        if (childFlag) {
+          const childNewSize = (0, _utils.adjustNewSize)(childSize, this._adapter.getItemMin(i), this._adapter.getItemMax(i), this.groupSize, this.itemMinusMap.get(i));
+          for (let j = i + 1; j < itemCount; j++) {
+            // 找到下一个没有超出限制的item
+            const item = this._adapter.getItem(j);
+            const itemSize = direction === 'horizontal' ? item.offsetWidth : item.offsetHeight;
+            const itemFlag = (0, _utils.judgeConstraint)(itemSize, this._adapter.getItemMin(j), this._adapter.getItemMax(j), this.groupSize, this.itemMinusMap.get(j));
+            if (!itemFlag) {
+              let childPercent = this.itemPercentMap.get(i),
+                itemPercent = this.itemPercentMap.get(j);
+              let childNewPercent = childNewSize / this.groupSize * 100;
+              let itemNewPercent = childPercent + itemPercent - childNewPercent;
+              this.itemPercentMap.set(i, childNewPercent);
+              this.itemPercentMap.set(j, itemNewPercent);
+              if (direction === 'horizontal') {
+                child.style.width = `calc(${childNewPercent}% - ${this.itemMinusMap.get(i)}px)`;
+                item.style.width = `calc(${itemNewPercent}% - ${this.itemMinusMap.get(j)}px)`;
+              } else {
+                child.style.height = `calc(${childNewPercent}% - ${this.itemMinusMap.get(i)}px)`;
+                item.style.height = `calc(${itemNewPercent}% - ${this.itemMinusMap.get(j)}px)`;
+              }
+              break;
+            } else {
+              if (j === itemCount - 1) {
+                continueFlag = false;
+                console.warn('[Semi ResizableGroup]: no enough space to adjust min/max size');
+              }
+            }
+          }
+        }
+        if (!continueFlag) {
+          break;
+        }
+      }
+    }, 200);
   }
   get groupRef() {
     return this._adapter.getGroupRef();
   }
+  get groupSize() {
+    const {
+      direction
+    } = this.getProps();
+    let groupSize = direction === 'horizontal' ? this.groupRef.offsetWidth : this.groupRef.offsetHeight;
+    return groupSize;
+  }
   init() {
     this.direction = this.getProp('direction');
     this.itemMinusMap = new Map();
-    this.calculateSpace();
+    this.itemPercentMap = new Map();
+    this.initSpace();
   }
   get window() {
     var _a;

package/lib/cjs/resizable/resizable.css

@@ -11,6 +11,72 @@
   user-select: none;
   z-index: 2000;
 }
+.semi-resizable-resizableHandler-top {
+  width: 100%;
+  height: 10px;
+  top: 0;
+  left: 0;
+  cursor: row-resize;
+  top: -5px;
+}
+.semi-resizable-resizableHandler-right {
+  width: 10px;
+  height: 100%;
+  top: 0;
+  left: 0;
+  cursor: col-resize;
+  left: auto;
+  right: -5px;
+}
+.semi-resizable-resizableHandler-bottom {
+  width: 100%;
+  height: 10px;
+  top: 0;
+  left: 0;
+  cursor: row-resize;
+  top: auto;
+  bottom: -5px;
+}
+.semi-resizable-resizableHandler-left {
+  width: 10px;
+  height: 100%;
+  top: 0;
+  left: 0;
+  cursor: col-resize;
+  left: -5px;
+}
+.semi-resizable-resizableHandler-topRight {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: -10px;
+  top: -10px;
+  cursor: ne-resize;
+}
+.semi-resizable-resizableHandler-bottomRight {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: -10px;
+  bottom: -10px;
+  cursor: se-resize;
+}
+.semi-resizable-resizableHandler-bottomLeft {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  left: -10px;
+  bottom: -10px;
+  cursor: sw-resize;
+}
+.semi-resizable-resizableHandler-topLeft {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  left: -10px;
+  top: -10px;
+  cursor: nw-resize;
+}
 .semi-resizable-group {
   display: flex;
   position: relative;
@@ -31,4 +97,24 @@
   justify-content: center;
   background-color: var(--semi-color-fill-0);
   opacity: 1;
+}
+.semi-resizable-handler-vertical {
+  width: 100%;
+  height: 10px;
+  flex-shrink: 0;
+  cursor: row-resize;
+}
+.semi-resizable-handler-horizontal {
+  height: 100%;
+  width: 10px;
+  flex-shrink: 0;
+  cursor: col-resize;
+}
+.semi-resizable-background {
+  height: 100%;
+  width: 100%;
+  inset: 0;
+  z-index: 2010;
+  opacity: 0;
+  position: fixed;
 }

package/lib/cjs/resizable/resizable.scss

@@ -1,5 +1,4 @@
-@import './variables.scss';
-
+@import "./variables.scss";
 $module: #{$prefix}-resizable;
 
 .#{$module} {
@@ -13,8 +12,83 @@ $module: #{$prefix}-resizable;
         position: absolute;
         user-select: none;
         z-index: $z-resizable_handler;
+
+        // 基础样式
+        @mixin row-resize-base {
+            width: 100%;
+            height: $height-row-handler;
+            top: 0;
+            left: 0;
+            cursor: row-resize;
+        }
+
+        @mixin col-resize-base {
+            width: $width-col-handler;
+            height: 100%;
+            top: 0;
+            left: 0;
+            cursor: col-resize;
+        }
+
+        @mixin edge-resize-base {
+            width: $width-edge-handler;
+            height: $height-edge-handler;
+            position: absolute;
+        }
+
+        // 方向样式
+        &-top {
+            @include row-resize-base;
+            top: calc(-1 * $height-row-handler / 2);
+        }
+
+        &-right {
+            @include col-resize-base;
+            left: auto;
+            right: calc(-1 * $width-col-handler / 2);
+        }
+
+        &-bottom {
+            @include row-resize-base;
+            top: auto;
+            bottom: calc(-1 * $height-row-handler / 2);
+        }
+
+        &-left {
+            @include col-resize-base;
+            left: calc(-1 * $width-col-handler / 2);
+        }
+
+        // 边角样式
+        &-topRight {
+            @include edge-resize-base;
+            right: calc(-1 * $width-edge-handler / 2);
+            top: calc(-1 * $height-edge-handler / 2);
+            cursor: ne-resize;
+        }
+
+        &-bottomRight {
+            @include edge-resize-base;
+            right: calc(-1 * $width-edge-handler / 2);
+            bottom: calc(-1 * $height-edge-handler / 2);
+            cursor: se-resize;
+        }
+
+        &-bottomLeft {
+            @include edge-resize-base;
+            left: calc(-1 * $width-edge-handler / 2);
+            bottom: calc(-1 * $height-edge-handler / 2);
+            cursor: sw-resize;
+        }
+
+        &-topLeft {
+            @include edge-resize-base;
+            left: calc(-1 * $width-edge-handler / 2);
+            top: calc(-1 * $height-edge-handler / 2);
+            cursor: nw-resize;
+        }
     }
-    
+
     &-group {
         display: flex;
         position: relative;
@@ -37,5 +111,28 @@ $module: #{$prefix}-resizable;
         justify-content: center;
         background-color: var(--semi-color-fill-0);
         opacity: 1;
+
+        &-vertical {
+            width: 100%;
+            height: $height-vertical-handler;
+            flex-shrink: 0;
+            cursor: row-resize;
+        }
+
+        &-horizontal {
+            height: 100%;
+            width: $width-horizontal-handler;
+            flex-shrink: 0;
+            cursor: col-resize;
+        }
+    }
+
+    &-background {
+        height: 100%;
+        width: 100%;
+        inset: 0;
+        z-index: $z-resizable_background;
+        opacity: 0;
+        position: fixed;
     }
 }

package/lib/cjs/resizable/single/index.d.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../../base/foundation';
-import { Size, NumberSize, Direction } from "../singleConstants";
+import { Size, NumberSize, Direction } from "../types";
 export interface ResizableHandlerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     registerEvent: () => void;
     unregisterEvent: () => void;

package/lib/cjs/resizable/single/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ResizableHandlerFoundation = exports.ResizableFoundation = void 0;
 var _foundation = _interopRequireDefault(require("../../base/foundation"));
-var _singleConstants = require("../singleConstants");
+var _types = require("../types");
 var _utils = require("../utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class ResizableHandlerFoundation extends _foundation.default {
@@ -303,7 +303,7 @@ class ResizableFoundation extends _foundation.default {
   }
   get propSize() {
     const porps = this.getProps();
-    return porps.size || porps.defaultSize || _singleConstants.DEFAULT_SIZE;
+    return porps.size || porps.defaultSize || _types.DEFAULT_SIZE;
   }
   get size() {
     let width = 0;