Merge pull request #937 from sheinsight/fix-ui-issues2

fix: 修复 `Table` 在虚拟列表大数据下拖拽滚动条时的性能问题 & UI验收问题
sheinsight · Jan 21, 2025 · 6fc7615 · 6fc7615
2 parents fb6ec85 + 1a9cf2e
commit 6fc7615
Show file tree

Hide file tree

Showing 53 changed files with 230 additions and 615 deletions.
diff --git a/docs/theme/components/style.ts b/docs/theme/components/style.ts
@@ -109,12 +109,17 @@ export default createUseStyles(
       display: 'flex',
       marginTop: top,
       position: 'relative',
+      overflow: 'auto',
       '& .examples': {
         flex: 1,
-        minWidth: 0,
+        minWidth: 800,
       },
       '& .anchor': {
         width: 192,
+
+        '@media (max-width: 1200px)': {
+          display: 'none',
+        },
       },
     },
     guide: {

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sheinx",
   "private": true,
-  "version": "3.5.8-beta.7",
+  "version": "3.5.8-beta.8",
   "description": "A react library developed with sheinx",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/packages/base/src/alert/alert.tsx b/packages/base/src/alert/alert.tsx
@@ -19,6 +19,7 @@ const Alert = (props: AlertProps) => {
     children,
     icon,
     title,
+    titleStyle,
     iconSize,
     closable,
     hideClose,
@@ -75,7 +76,7 @@ const Alert = (props: AlertProps) => {
   };
 
   const renderIcon = () => {
-    const style: { width?: number } = {};
+    const style: React.CSSProperties = titleStyle || {}
     if (iconSize) {
       style.width = iconSize;
     }
@@ -91,7 +92,7 @@ const Alert = (props: AlertProps) => {
   };
 
   const renderTitle = () => {
-    return <div className={alertStyle.title}>{title}</div>;
+    return <div className={alertStyle.title} style={titleStyle}>{title}</div>;
   };
 
   const renderClose = () => {

diff --git a/packages/base/src/alert/alert.type.ts b/packages/base/src/alert/alert.type.ts
@@ -64,6 +64,13 @@ export interface AlertProps extends Pick<CommonType, 'className' | 'style'> {
    * @cn 标题模式
    */
   title?: React.ReactNode;
+
+  /**
+   * @en The style of the title
+   * @cn 标题样式
+   * @private
+   */
+  titleStyle?: React.CSSProperties;
   /**
    * @en Whether to display the close button, when set to only, only the close button is displayed
    * @cn 是否可以关闭Alert，当设置为only的时候，点击按钮不会自动隐藏Alert

diff --git a/packages/base/src/popover/confirm.tsx b/packages/base/src/popover/confirm.tsx
@@ -67,6 +67,7 @@ const Confirm = (props: PopoverConfirmProps) => {
             jssStyle={jssStyle}
             type={type as any}
             title={title}
+            titleStyle={{ fontSize: 14 }}
             icon={icon}
           >
             {children}

diff --git a/packages/hooks/src/components/use-table/use-table-virtual.tsx b/packages/hooks/src/components/use-table/use-table-virtual.tsx
@@ -1,5 +1,5 @@
 import { usePersistFn } from '../../common/use-persist-fn';
-import { useState, useRef, useEffect, useMemo, useLayoutEffect } from 'react';
+import { useState, useRef, useEffect, useMemo } from 'react';
 import { TableFormatColumn } from './use-table.type';
 
 // 找出最大的连续数字的个数
@@ -147,7 +147,7 @@ const useTableVirtual = (props: UseTableVirtualProps) => {
     }
   });
 
-  const updateIndexAndTopFromTop = (scrollTop: number) => {
+  const updateIndexAndTopFromTop = (scrollTop: number, fromDrag?: boolean) => {
     if (props.disabled) return;
     let sum = 0;
     let currentIndex = 0;
@@ -187,7 +187,7 @@ const useTableVirtual = (props: UseTableVirtualProps) => {
       setStartIndex(currentIndex);
 
       // startIndex处于上方某个合并行的中间一行时，可能引起translate闪烁
-      if(startIndex < currentIndex){
+      if(!fromDrag && startIndex < currentIndex){
         context.autoAddRows = currentIndex - startIndex
         setTimeout(() => {
           context.autoAddRows = 0
@@ -252,7 +252,7 @@ const useTableVirtual = (props: UseTableVirtualProps) => {
     // 拖动滚动条
     if (fromDrag) {
       const top = y * max;
-      updateIndexAndTopFromTop(top);
+      updateIndexAndTopFromTop(top, fromDrag);
       if (context.rateTimer) clearTimeout(context.rateTimer);
       context.rateTimer = setTimeout(() => {
         updateRateScroll(y);

diff --git a/packages/shineout-style/src/alert/alert.ts b/packages/shineout-style/src/alert/alert.ts
@@ -60,16 +60,16 @@ const alertStyle: JsStyles<keyof AlertClasses> = {
   },
   widthTitle: {
     '& $icon': {
+      fontSize: Token.alertTitleFontSize,
       // marginBottom: Token.alertNearlyMargin,
       width: Token.alertTitleIconWidth,
-      height: Token.alertTitleIconHeight,
+      height: Token.lineHeightDynamic,
     },
     '& $title': {
       lineHeight: Token.lineHeightDynamic,
     },
-    '& $close': {
-      // marginBottom: Token.alertNearlyMargin,
-      // marginTop: 2,
+    '& $closeWrapper': {
+      fontSize: Token.alertTitleFontSize,
     },
   },
   title: {
@@ -103,8 +103,9 @@ const alertStyle: JsStyles<keyof AlertClasses> = {
     },
   },
   closeWrapper: {
+    fontSize: Token.alertFontSize,
     width: Token.alertFontSize,
-    height: `calc(${Token.lineHeightDynamic} + 2px)`,
+    height: Token.lineHeightDynamic,
     display: 'flex',
     alignItems: 'center',
     marginLeft: Token.alertNearlyMargin,

diff --git a/packages/shineout-style/src/descriptions/descriptions.ts b/packages/shineout-style/src/descriptions/descriptions.ts
@@ -168,6 +168,11 @@ const descriptionsStyle: JsStyles<DescriptionsClassType> = {
     '& $item': {
       paddingBottom: 0,
     },
+    '& $row': {
+      '& td:last-child': {
+        borderRight: 'none',
+      }
+    },
   },
 };
 

diff --git a/packages/shineout/src/descriptions/__example__/02-colums.tsx b/packages/shineout/src/descriptions/__example__/02-colums.tsx
@@ -24,7 +24,7 @@ const data = [
 
 export default () => {
   return (
-    <div style={{ marginBottom: '-12px' }}>
+    <>
       <Descriptions
         items={data}
         title='User Info'
@@ -39,6 +39,6 @@ export default () => {
         column={1}
         labelStyle={{ textAlign: 'end' }}
       />
-    </div>
+    </>
   );
 };
diff --git a/packages/shineout/src/descriptions/__example__/04-border.tsx b/packages/shineout/src/descriptions/__example__/04-border.tsx
@@ -39,7 +39,7 @@ export default () => {
         layout='horizontal'
         border
         tableLayout='fixed'
-        style={{ marginBottom: '20px' }}
+        style={{ marginBottom: 24 }}
       />
       <Descriptions
         items={data}
@@ -48,7 +48,7 @@ export default () => {
         border
         tableLayout='fixed'
         labelStyle={{ textAlign: 'end' }}
-        style={{ marginBottom: '20px' }}
+        style={{ marginBottom: 24 }}
       />
       <Descriptions
         items={data}

diff --git a/packages/shineout/src/descriptions/__example__/05-arrangement.tsx b/packages/shineout/src/descriptions/__example__/05-arrangement.tsx
@@ -83,7 +83,7 @@ export default () => {
         border={border}
         labelStyle={{
           marginBottom: layout === 'inlineVertical' ? '2px' : '',
-          paddingBottom: layout === 'vertical' ? '2px' : '',
+          paddingBottom: layout === 'vertical' && !border ? '2px' : '',
         }}
       />
     </div>