improve(design): Table bordered style

oceanbase · Dec 10, 2024 · 713348d · 713348d
1 parent 827b0aa
commit 713348d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/packages/design/src/table/demo/bordered.tsx b/packages/design/src/table/demo/bordered.tsx
@@ -48,14 +48,6 @@ const data: DataType[] = [
   },
 ];
 
-const App: React.FC = () => (
-  <Table
-    columns={columns}
-    dataSource={data}
-    bordered
-    title={() => 'Header'}
-    footer={() => 'Footer'}
-  />
-);
+const App: React.FC = () => <Table columns={columns} dataSource={data} bordered />;
 
 export default App;
diff --git a/packages/design/src/table/style/index.ts b/packages/design/src/table/style/index.ts
@@ -28,6 +28,7 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
       borderRadius: borderRadiusLG,
       [`${componentCls}-footer`]: {
         borderBottom: `1px solid ${colorBorderSecondary}`,
+        borderRadius: 0,
       },
       // 单元格通用样式
       [`${componentCls}-thead, ${componentCls}-tbody`]: {
@@ -144,6 +145,31 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
         },
       },
 
+    // 带边框的表格样式
+    [`${componentCls}-wrapper ${componentCls}${componentCls}-bordered`]: {
+      [`${componentCls}-footer`]: {
+        borderRadius: `0px 0px ${token.borderRadiusLG}px ${token.borderRadiusLG}px`,
+      },
+    },
+
+    // 带边框但不带 footer 的表格样式
+    [`${componentCls}-wrapper:not(${componentCls}-has-footer) ${componentCls}${componentCls}-bordered`]:
+      {
+        // 表格容器设置圆角
+        [`${componentCls}-container`]: {
+          borderRadius: token.borderRadiusLG,
+        },
+        [`${componentCls}-tbody`]: {
+          // 最后一行左右单元格增加圆角
+          [`tr:last-child >*:first-child`]: {
+            borderEndStartRadius: token.borderRadiusLG,
+          },
+          [`tr:last-child >*:last-child`]: {
+            borderEndEndRadius: token.borderRadiusLG,
+          },
+        },
+      },
+
     // 非可展开表格、不带 footer 表格、非空表格、不带边框表格: 底部添加分隔线
     [`${componentCls}-wrapper:not(${componentCls}-expandable):not(${componentCls}-has-footer) ${componentCls}:not(${componentCls}-bordered):not(${componentCls}-empty)`]:
       {