root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: table style

Browse Source
This commit is contained in:
jialin
2025-03-27 16:11:49 +08:00
parent 0d80269e2d
commit f4d5419ba1
4 changed files with 44 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/theme.ts
+3 -3
View File
@@ -8,8 +8,9 @@ export default {
}, },
Table: { Table: {
cellFontSize: 12, cellFontSize: 12,
rowSelectedHoverBg: 'rgba(230, 230, 230, 0.88)', rowSelectedHoverBg: 'rgb(249 249 249)',
rowSelectedBg: 'rgb(244, 245, 244)' rowHoverBg: 'rgb(249 249 249)',
rowSelectedBg: 'transparent'
}, },
Menu: { Menu: {
iconSize: 16, iconSize: 16,
@@ -30,7 +31,6 @@ export default {
}, },
Tooltip: { Tooltip: {
colorBgSpotlight: '#3e3e3e' colorBgSpotlight: '#3e3e3e'
// sizePopupArrow: 0
}, },
Button: { Button: {
primaryShadow: 'none', primaryShadow: 'none',
src/components/seal-table/components/table-row.tsx
+13 -12
View File
@@ -2,7 +2,7 @@ import useSetChunkRequest, {
createAxiosToken createAxiosToken
} from '@/hooks/use-chunk-request'; } from '@/hooks/use-chunk-request';
import useUpdateChunkedList from '@/hooks/use-update-chunk-list'; 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 classNames from 'classnames';
import _ from 'lodash'; import _ from 'lodash';
import React, { import React, {
@@ -81,16 +81,17 @@ const TableRow: React.FC<
const renderChildrenData = () => { const renderChildrenData = () => {
if (childrenData.length === 0) { if (childrenData.length === 0) {
return ( // return (
<Empty // <Empty
image={loading ? null : Empty.PRESENTED_IMAGE_SIMPLE} // image={loading ? null : Empty.PRESENTED_IMAGE_SIMPLE}
description={loading ? null : undefined} // description={loading ? null : undefined}
style={{ // style={{
marginBlock: 0, // marginBlock: 0,
height: 54 // height: 54
}} // }}
></Empty> // ></Empty>
); // );
return null;
} }
return renderChildren?.(childrenData, { return renderChildren?.(childrenData, {
parent: record, parent: record,
@@ -262,7 +263,7 @@ const TableRow: React.FC<
})} })}
</Row> </Row>
</div> </div>
{expanded && ( {expanded && childrenData.length > 0 && (
<div className="expanded-row"> <div className="expanded-row">
<Spin spinning={loading}>{renderChildrenData()}</Spin> <Spin spinning={loading}>{renderChildrenData()}</Spin>
</div> </div>
src/components/seal-table/styles/index.less
+11 -7
View File
@@ -10,11 +10,14 @@
width: 100%; width: 100%;
.header-row-wrapper { .header-row-wrapper {
height: 40px; height: 50px;
margin-bottom: 10px; // margin-bottom: 10px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; 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 { .header-row-prefix-wrapper {
padding-left: var(--ant-table-cell-padding-inline); padding-left: var(--ant-table-cell-padding-inline);
@@ -26,16 +29,17 @@
} }
.row-box { .row-box {
margin-bottom: 20px; // margin-bottom: 20px;
border-radius: var(--ant-table-header-border-radius); // border-radius: var(--ant-table-header-border-radius);
overflow: hidden; overflow: hidden;
border-bottom: 1px solid var(--ant-color-split);
// box-shadow: var(--box-shadow-base); // box-shadow: var(--box-shadow-base);
} }
.expanded-row { .expanded-row {
background-color: var(--color-white-1); // background-color: var(--color-white-1);
padding: 16px; padding: 16px;
border: 1px solid var(--color-fill-1); // border: 1px solid var(--color-fill-1);
border-top: 0; border-top: 0;
border-radius: 0 0 var(--ant-table-header-border-radius) border-radius: 0 0 var(--ant-table-header-border-radius)
var(--ant-table-header-border-radius); var(--ant-table-header-border-radius);
@@ -49,7 +53,7 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background-color: var(--color-fill-sider); // background-color: var(--color-fill-sider);
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover { &:hover {
src/global.less
+17 -17
View File
@@ -71,8 +71,8 @@ html {
--ant-table-header-border-radius: 4px; --ant-table-header-border-radius: 4px;
--ant-table-header-split-color: #f0f0f0; --ant-table-header-split-color: #f0f0f0;
--ant-table-row-selected-bg: #e6f6ff; --ant-table-row-selected-bg: #e6f6ff;
--ant-table-row-selected-hover-bg: #e6f6ff; --ant-table-row-selected-hover-bg: rgb(249 249 249);
--ant-table-row-hover-bg: rgba(230, 230, 230, 88%); --ant-table-row-hover-bg: rgb(249 249 249);
--color-chart-red: rgba(255, 77, 79, 80%); --color-chart-red: rgba(255, 77, 79, 80%);
--color-chart-green: rgb(84, 204, 152, 80%); --color-chart-green: rgb(84, 204, 152, 80%);
--color-chart-glod: rgba(250, 173, 20, 80%); --color-chart-glod: rgba(250, 173, 20, 80%);
@@ -101,7 +101,6 @@ html {
--ant-font-size: var(--font-size-base); --ant-font-size: var(--font-size-base);
&.ant-menu-css-var { &.ant-menu-css-var {
// --ant-menu-item-selected-bg: var(--color-white-1);
--ant-menu-item-border-radius: 4px; --ant-menu-item-border-radius: 4px;
--ant-menu-item-selected-color: var(--ant-color-primary); --ant-menu-item-selected-color: var(--ant-color-primary);
--ant-menu-item-color: var(--color-text-1); --ant-menu-item-color: var(--color-text-1);
@@ -137,7 +136,7 @@ html {
} }
&.ant-table-css-var { &.ant-table-css-var {
--ant-table-row-hover-bg: #e6e6e6; // --ant-table-row-hover-bg: rgb(249 249 249);
} }
&.ant-progress { &.ant-progress {
@@ -227,7 +226,7 @@ body {
} }
.ant-table-container .ant-table-content table { .ant-table-container .ant-table-content table {
border-spacing: 0 20px; // border-spacing: 0 20px;
.ant-table-thead th.ant-table-column-sort { .ant-table-thead th.ant-table-column-sort {
background-color: transparent; background-color: transparent;
@@ -248,9 +247,10 @@ body {
} }
tr > th { tr > th {
background-color: var(--color-white-1);
border: none; border: none;
padding-block: 0; padding-block: 0;
height: 50px;
background-color: var(--color-fill-sider);
} }
tr > td { tr > td {
@@ -258,15 +258,15 @@ body {
border-bottom: none; border-bottom: none;
height: 68px; height: 68px;
&:first-child { // &:first-child {
border-top-left-radius: var(--table-td-radius); // border-top-left-radius: var(--table-td-radius);
border-bottom-left-radius: var(--table-td-radius); // border-bottom-left-radius: var(--table-td-radius);
} // }
&:last-child { // &:last-child {
border-top-right-radius: var(--table-td-radius); // border-top-right-radius: var(--table-td-radius);
border-bottom-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 { .ant-pro-sider .ant-layout-sider-children {
background-color: var(--color-fill-sider); 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-content table {
.ant-table-thead > tr > th { .ant-table-thead > tr > th {
background-color: unset; // background-color: unset;
} }
.ant-table-tbody { .ant-table-tbody {
.ant-table-row { .ant-table-row {
border-radius: var(--table-td-radius); border-radius: var(--table-td-radius);
background-color: var(--color-fill-sider); // background-color: var(--color-fill-sider);
> td { > td {
background-color: unset; background-color: unset;
border-bottom: 1px solid var(--ant-color-split);
} }
} }
} }