fix: table stripe and adding height endless

Author: helloqian12138

packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/left-columns/index.less

@@ -28,6 +28,10 @@
   & > .@{prefixCls}-row {
     display: flex;
     width: 100%;
+
+    &.stripe {
+      background-color: #efefef;
+    }
   }
 
   & > .@{prefixCls}-header {

packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/left-columns/index.tsx

@@ -69,7 +69,7 @@ function LeftFixedColumnsInner<
       let maxCellHeight = 0;
       for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
         if (element.children[0]) {
-          const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight;
+          const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
           if (trueCellHeight > maxCellHeight) {
             maxCellHeight = trueCellHeight;
           }
@@ -82,7 +82,9 @@ function LeftFixedColumnsInner<
       const start = props.tableConfig.configs.showHeader ? 1 : 0;
       const subTableHeights: number[] = [];
       for (let i = start; i < rows.length; i++) {
-        if (rows[i].className === 'jfe-drip-table-generator-workstation-table-row') {
+        if (rows[i].className === 'jfe-drip-table-generator-workstation-table-row'
+          || rows[i].className === 'jfe-drip-table-generator-workstation-table-row stripe'
+        ) {
           if (rows[i + 1]?.className === 'subtable') {
             subTableHeights.push(rows[i + 1].offsetHeight);
           } else {
@@ -162,8 +164,13 @@ function LeftFixedColumnsInner<
             {props.tableConfig.configs.rowHeader && (
               <div style={{ width: '100%', height: props.rowHeaderHeights?.[rowIndex] || 0 }} />
             )}
-            <div className="jfe-drip-table-generator-workstation-table-row" ref={rowRef} style={{ height: props.rowHeight }}>
-
+            <div
+              className={classNames('jfe-drip-table-generator-workstation-table-row', {
+                stripe: props.tableConfig.configs.stripe && rowIndex % 2 === 1,
+              })}
+              ref={rowRef}
+              style={{ height: props.rowHeight }}
+            >
               {props.tableConfig.hasSubTable && (
                 <div
                   className={classNames('jfe-drip-table-generator-workstation-table-tr-td operation-col', {

packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/right-columns/index.less

@@ -28,6 +28,10 @@
   & > .@{prefixCls}-row {
     display: flex;
     width: 100%;
+
+    &.stripe {
+      background-color: #efefef;
+    }
   }
 
   & > .@{prefixCls}-header {

packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/right-columns/index.tsx

@@ -48,7 +48,7 @@ function RightFixedColumnsInner<
       let maxCellHeight = 0;
       for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
         if (element.children[0]) {
-          const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight;
+          const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
           if (trueCellHeight > maxCellHeight) {
             maxCellHeight = trueCellHeight;
           }
@@ -91,7 +91,13 @@ function RightFixedColumnsInner<
           {props.tableConfig.configs.rowHeader && (
             <div style={{ width: '100%', height: props.rowHeaderHeights?.[rowIndex] || 0 }} />
           )}
-          <div className="jfe-drip-table-generator-workstation-table-row" ref={rowRef} style={{ height: props.rowHeight }}>
+          <div
+            className={classNames('jfe-drip-table-generator-workstation-table-row', {
+              stripe: props.tableConfig.configs.stripe && rowIndex % 2 === 1,
+            })}
+            ref={rowRef}
+            style={{ height: props.rowHeight }}
+          >
             <TableSection
               {...props}
               record={record}

packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/scroll-columns/index.less

@@ -18,6 +18,10 @@
   & > .@{prefixCls}-row {
     display: flex;
     width: 100%;
+
+    &.stripe {
+      background-color: #efefef;
+    }
   }
 
   & > .@{prefixCls}-header {

packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/scroll-columns/index.tsx

@@ -63,7 +63,9 @@ function ScrollableColumnsInner<
       const start = props.tableConfig.configs.showHeader ? 1 : 0;
       const rowHeaderHeights: number[] = [];
       for (let i = start; i < rows.length; i++) {
-        if (rows[i].className === 'jfe-drip-table-generator-workstation-table-row') {
+        if (rows[i].className === 'jfe-drip-table-generator-workstation-table-row'
+          || rows[i].className === 'jfe-drip-table-generator-workstation-table-row stripe'
+        ) {
           if (rows[i - 1]?.className === 'rowHeader') {
             rowHeaderHeights.push(rows[i - 1].offsetHeight);
           } else {
@@ -109,7 +111,13 @@ function ScrollableColumnsInner<
               configs={props.tableConfig.configs.rowHeader}
             />
           )}
-          <div className="jfe-drip-table-generator-workstation-table-row" ref={rowRef} style={{ height: props.rowHeight }}>
+          <div
+            className={classNames('jfe-drip-table-generator-workstation-table-row', {
+              stripe: props.tableConfig.configs.stripe && rowIndex % 2 === 1,
+            })}
+            ref={rowRef}
+            style={{ height: props.rowHeight }}
+          >
             <TableSection
               {...props}
               record={record}