fix: Optimize Resizable scss token

content/show/resizable/index-en-US.md

@@ -230,56 +230,19 @@ import { Resizable } from '@douyinfe/semi-ui';
 
 function Demo() {
   const [size, setSize] = useState({ width: 200, height: 100 });
-  const [size_, setSize_] = useState({ width: 200, height: 100 });
-  const onChange = (() => {
+  const onButtonClick = (() => {
     let realSize = { width: size.width + 10, height: size.height + 10 };
     setSize(realSize);
   })
-  return (
-    <div style={{ width: '500px', height: '60%' }}>
-      <Button onClick={onChange}>set += 10</Button>
-      <Resizable
-        style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', marginTop: '10px' }}
-        size={size}
-      >
-        <div style={{ marginLeft: '20%' }}>
-          Control Width/Height
-        </div>
-      </Resizable>
+  const onChange = (s) => { setSize(s); }
 
-      <div style={{ width: '500px', height: '60%', marginTop: '10px' }}>
-        <Resizable
-          style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 5px solid' }}
-          onChange={(s) => { setSize_(s); }}
-          size={size_}
-        >
-          <div style={{ marginLeft: '20%' }}>
-            Control Width/Height
-          </div>
-        </Resizable>
-      </div>
-    </div>
-  );
-}
-```
-
-```jsx live=true
-import React, { useState } from 'react';
-import { Resizable } from '@douyinfe/semi-ui';
-
-function Demo() {
-  const [size, setSize] = useState({ width: 200, height: 300 });
-
   return (
     <div style={{ width: '500px', height: '60%' }}>
+      <Button onClick={onButtonClick}>set += 10</Button>
       <Resizable
-        style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 5px solid' }}
-        defaultSize={{
-          width: '60%',
-          height: 300,
-        }}
-        onChange={(s) => { setSize(s); }}
+        style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', marginTop: '10px' }}
         size={size}
+        onChange={onChange}
       >
         <div style={{ marginLeft: '20%' }}>
           Control Width/Height
@@ -288,7 +251,6 @@ function Demo() {
     </div>
   );
 }
-
 ```
 
 

content/show/resizable/index.md

@@ -227,34 +227,24 @@ import { Resizable } from '@douyinfe/semi-ui';
 
 function Demo() {
   const [size, setSize] = useState({ width: 200, height: 100 });
-  const [size_, setSize_] = useState({ width: 200, height: 100 });
-  const onChange = (() => {
+  const onButtonClick = (() => {
     let realSize = { width: size.width + 10, height: size.height + 10 };
     setSize(realSize);
   })
+  const onChange = (s) => { setSize(s); }
+
   return (
     <div style={{ width: '500px', height: '60%' }}>
-      <Button onClick={onChange}>set += 10</Button>
+      <Button onClick={onButtonClick}>set += 10</Button>
       <Resizable
         style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', marginTop: '10px' }}
         size={size}
+        onChange={onChange}
       >
         <div style={{ marginLeft: '20%' }}>
           受控
         </div>
       </Resizable>
-
-      <div style={{ width: '500px', height: '60%', marginTop: '10px' }}>
-        <Resizable
-          style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 5px solid' }}
-          onChange={(s) => { setSize_(s); }}
-          size={size_}
-        >
-          <div style={{ marginLeft: '20%' }}>
-            受控
-          </div>
-        </Resizable>
-      </div>
     </div>
   );
 }

packages/semi-foundation/resizable/resizable.scss

@@ -15,7 +15,7 @@ $module: #{$prefix}-resizable;
 
         // 基础样式
         @mixin row-resize-base {
-            width: $width-row-handler;
+            width: 100%;
             height: $height-row-handler;
             top: 0;
             left: 0;
@@ -24,7 +24,7 @@ $module: #{$prefix}-resizable;
 
         @mixin col-resize-base {
             width: $width-col-handler;
-            height: $height-col-handler;
+            height: 100%;
             top: 0;
             left: 0;
             cursor: col-resize;
@@ -39,46 +39,52 @@ $module: #{$prefix}-resizable;
         // 方向样式
         &-top {
             @include row-resize-base;
-            inset: $inset-top-handler;
+            top: calc(-1 * $height-row-handler / 2);
         }
 
         &-right {
             @include col-resize-base;
-            inset: $inset-right-handler;
+            left: auto;
+            right: calc(-1 * $width-col-handler / 2);
         }
 
         &-bottom {
             @include row-resize-base;
-            inset: $inset-bottom-handler;
+            top: auto;
+            bottom: calc(-1 * $height-row-handler / 2);
         }
 
         &-left {
             @include col-resize-base;
-            inset: $inset-left-handler;
+            left: calc(-1 * $width-col-handler / 2);
         }
 
         // 边角样式
         &-topRight {
             @include edge-resize-base;
-            inset: $inset-topRight-handler;
+            right: calc(-1 * $width-edge-handler / 2);
+            top: calc(-1 * $height-edge-handler / 2);
             cursor: ne-resize;
         }
 
         &-bottomRight {
             @include edge-resize-base;
-            inset: $inset-bottomRight-handler;
+            right: calc(-1 * $width-edge-handler / 2);
+            bottom: calc(-1 * $height-edge-handler / 2);
             cursor: se-resize;
         }
 
         &-bottomLeft {
             @include edge-resize-base;
-            inset: $inset-bottomLeft-handler;
+            left: calc(-1 * $width-edge-handler / 2);
+            bottom: calc(-1 * $height-edge-handler / 2);
             cursor: sw-resize;
         }
 
         &-topLeft {
             @include edge-resize-base;
-            inset: $inset-topLeft-handler;
+            left: calc(-1 * $width-edge-handler / 2);
+            top: calc(-1 * $height-edge-handler / 2);
             cursor: nw-resize;
         }
     }
@@ -107,14 +113,14 @@ $module: #{$prefix}-resizable;
         opacity: 1;
 
         &-vertical {
-            width: $width-vertical-handler;
+            width: 100%;
             height: $height-vertical-handler;
             flex-shrink: 0;
             cursor: row-resize;
         }
 
         &-horizontal {
-            height: $height-horizontal-handler;
+            height: 100%;
             width: $width-horizontal-handler;
             flex-shrink: 0;
             cursor: col-resize;

packages/semi-foundation/resizable/variables.scss

@@ -1,25 +1,9 @@
 $z-resizable_handler: 2000 !default; // 伸缩框组件中handler的z-index
 $z-resizable_background: 2010; // 伸缩框组件中背景的z-index
 
-$width-row-handler: 100%;
-$height-row-handler: 10px;
-
-$width-col-handler: 10px;
-$height-col-handler: 100%;
-
-$width-edge-handler: 20px;
-$height-edge-handler: 20px;
-
-$inset-top-handler: -5px 0 0 0;
-$inset-bottom-handler: auto 0 -5px 0;
-$inset-left-handler: 0 -5px 0 0;
-$inset-right-handler: 0 -5px 0 auto;
-$inset-topRight-handler: -10px -10px auto auto;
-$inset-bottomRight-handler: auto -10px -10px auto;
-$inset-bottomLeft-handler: auto auto -10px -10px;
-$inset-topLeft-handler: -10px auto auto -10px;
-
-$width-horizontal-handler: 10px;
-$height-horizontal-handler: 100%;
-$width-vertical-handler: 100%;
-$height-vertical-handler: 10px;
+$height-row-handler: 10px; // 单个伸缩框中上下handler的高度
+$width-col-handler: 10px;  // 单个伸缩框中左右handler的宽度
+$width-edge-handler: 20px; // 单个伸缩框中边角handler的宽度
+$height-edge-handler: 20px; // 单个伸缩框中边角handler的高度
+$width-horizontal-handler: 10px; // 组合伸缩框中水平方向handler的宽度
+$height-vertical-handler: 10px;  // 组合伸缩框中垂直方向handler的高度