From f4d5419ba12b5c2f254c74ea000fb86b95181fa9 Mon Sep 17 00:00:00 2001 From: jialin Date: Thu, 27 Mar 2025 13:32:28 +0800 Subject: [PATCH] style: table style --- config/theme.ts | 6 ++-- .../seal-table/components/table-row.tsx | 25 +++++++------- src/components/seal-table/styles/index.less | 18 ++++++---- src/global.less | 34 +++++++++---------- 4 files changed, 44 insertions(+), 39 deletions(-) diff --git a/config/theme.ts b/config/theme.ts index 5229762e..90d48f31 100644 --- a/config/theme.ts +++ b/config/theme.ts @@ -8,8 +8,9 @@ export default { }, Table: { cellFontSize: 12, - rowSelectedHoverBg: 'rgba(230, 230, 230, 0.88)', - rowSelectedBg: 'rgb(244, 245, 244)' + rowSelectedHoverBg: 'rgb(249 249 249)', + rowHoverBg: 'rgb(249 249 249)', + rowSelectedBg: 'transparent' }, Menu: { iconSize: 16, @@ -30,7 +31,6 @@ export default { }, Tooltip: { colorBgSpotlight: '#3e3e3e' - // sizePopupArrow: 0 }, Button: { primaryShadow: 'none', diff --git a/src/components/seal-table/components/table-row.tsx b/src/components/seal-table/components/table-row.tsx index 97395dbf..bb73a517 100644 --- a/src/components/seal-table/components/table-row.tsx +++ b/src/components/seal-table/components/table-row.tsx @@ -2,7 +2,7 @@ import useSetChunkRequest, { createAxiosToken } from '@/hooks/use-chunk-request'; import useUpdateChunkedList from '@/hooks/use-update-chunk-list'; -import { Col, Empty, Row, Spin } from 'antd'; +import { Col, Row, Spin } from 'antd'; import classNames from 'classnames'; import _ from 'lodash'; import React, { @@ -81,16 +81,17 @@ const TableRow: React.FC< const renderChildrenData = () => { if (childrenData.length === 0) { - return ( - - ); + // return ( + // + // ); + return null; } return renderChildren?.(childrenData, { parent: record, @@ -262,7 +263,7 @@ const TableRow: React.FC< })} - {expanded && ( + {expanded && childrenData.length > 0 && (
{renderChildrenData()}
diff --git a/src/components/seal-table/styles/index.less b/src/components/seal-table/styles/index.less index 492d2d80..3b747c86 100644 --- a/src/components/seal-table/styles/index.less +++ b/src/components/seal-table/styles/index.less @@ -10,11 +10,14 @@ width: 100%; .header-row-wrapper { - height: 40px; - margin-bottom: 10px; + height: 50px; + // margin-bottom: 10px; display: flex; justify-content: flex-start; align-items: center; + background-color: var(--color-fill-sider); + border-radius: var(--ant-table-header-border-radius) + var(--ant-table-header-border-radius) 0 0; .header-row-prefix-wrapper { padding-left: var(--ant-table-cell-padding-inline); @@ -26,16 +29,17 @@ } .row-box { - margin-bottom: 20px; - border-radius: var(--ant-table-header-border-radius); + // margin-bottom: 20px; + // border-radius: var(--ant-table-header-border-radius); overflow: hidden; + border-bottom: 1px solid var(--ant-color-split); // box-shadow: var(--box-shadow-base); } .expanded-row { - background-color: var(--color-white-1); + // background-color: var(--color-white-1); padding: 16px; - border: 1px solid var(--color-fill-1); + // border: 1px solid var(--color-fill-1); border-top: 0; border-radius: 0 0 var(--ant-table-header-border-radius) var(--ant-table-header-border-radius); @@ -49,7 +53,7 @@ display: flex; justify-content: flex-start; align-items: center; - background-color: var(--color-fill-sider); + // background-color: var(--color-fill-sider); transition: all 0.2s ease; &:hover { diff --git a/src/global.less b/src/global.less index 013e0b7d..ae3d7144 100644 --- a/src/global.less +++ b/src/global.less @@ -71,8 +71,8 @@ html { --ant-table-header-border-radius: 4px; --ant-table-header-split-color: #f0f0f0; --ant-table-row-selected-bg: #e6f6ff; - --ant-table-row-selected-hover-bg: #e6f6ff; - --ant-table-row-hover-bg: rgba(230, 230, 230, 88%); + --ant-table-row-selected-hover-bg: rgb(249 249 249); + --ant-table-row-hover-bg: rgb(249 249 249); --color-chart-red: rgba(255, 77, 79, 80%); --color-chart-green: rgb(84, 204, 152, 80%); --color-chart-glod: rgba(250, 173, 20, 80%); @@ -101,7 +101,6 @@ html { --ant-font-size: var(--font-size-base); &.ant-menu-css-var { - // --ant-menu-item-selected-bg: var(--color-white-1); --ant-menu-item-border-radius: 4px; --ant-menu-item-selected-color: var(--ant-color-primary); --ant-menu-item-color: var(--color-text-1); @@ -137,7 +136,7 @@ html { } &.ant-table-css-var { - --ant-table-row-hover-bg: #e6e6e6; + // --ant-table-row-hover-bg: rgb(249 249 249); } &.ant-progress { @@ -227,7 +226,7 @@ body { } .ant-table-container .ant-table-content table { - border-spacing: 0 20px; + // border-spacing: 0 20px; .ant-table-thead th.ant-table-column-sort { background-color: transparent; @@ -248,9 +247,10 @@ body { } tr > th { - background-color: var(--color-white-1); border: none; padding-block: 0; + height: 50px; + background-color: var(--color-fill-sider); } tr > td { @@ -258,15 +258,15 @@ body { border-bottom: none; height: 68px; - &:first-child { - border-top-left-radius: var(--table-td-radius); - border-bottom-left-radius: var(--table-td-radius); - } + // &:first-child { + // border-top-left-radius: var(--table-td-radius); + // border-bottom-left-radius: var(--table-td-radius); + // } - &:last-child { - border-top-right-radius: var(--table-td-radius); - border-bottom-right-radius: var(--table-td-radius); - } + // &:last-child { + // border-top-right-radius: var(--table-td-radius); + // border-bottom-right-radius: var(--table-td-radius); + // } } } @@ -371,7 +371,6 @@ body { .ant-pro-sider .ant-layout-sider-children { background-color: var(--color-fill-sider); - border-right: 1px solid var(--ant-color-border); } } @@ -381,16 +380,17 @@ body { .ant-table-content table { .ant-table-thead > tr > th { - background-color: unset; + // background-color: unset; } .ant-table-tbody { .ant-table-row { border-radius: var(--table-td-radius); - background-color: var(--color-fill-sider); + // background-color: var(--color-fill-sider); > td { background-color: unset; + border-bottom: 1px solid var(--ant-color-split); } } }