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: {
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',
src/components/seal-table/components/table-row.tsx
+13 -12
View File
@@ -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 (
<Empty
image={loading ? null : Empty.PRESENTED_IMAGE_SIMPLE}
description={loading ? null : undefined}
style={{
marginBlock: 0,
height: 54
}}
></Empty>
);
// return (
// <Empty
// image={loading ? null : Empty.PRESENTED_IMAGE_SIMPLE}
// description={loading ? null : undefined}
// style={{
// marginBlock: 0,
// height: 54
// }}
// ></Empty>
// );
return null;
}
return renderChildren?.(childrenData, {
parent: record,
@@ -262,7 +263,7 @@ const TableRow: React.FC<
})}
</Row>
</div>
{expanded && (
{expanded && childrenData.length > 0 && (
<div className="expanded-row">
<Spin spinning={loading}>{renderChildrenData()}</Spin>
</div>
src/components/seal-table/styles/index.less
+11 -7
View File
@@ -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 {
src/global.less
+17 -17
View File
@@ -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);
}
}
}