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

chore: dark config

Browse Source
This commit is contained in:
jialin
2025-04-28 10:05:06 +08:00
parent d4d7148f16
commit ce9c31f368
35 changed files with 678 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/card-wrapper/index.less
+1 -1
View File
@@ -3,5 +3,5 @@
background-color: var(--color-white-1);
box-shadow: none;
padding: 10px;
border: 1px solid var(--color-border-1);
border: 1px solid var(--ant-color-border);
}
src/components/echarts/bar-chart.tsx
+11 -10
View File
@@ -1,16 +1,8 @@
import Chart from '@/components/echarts/chart';
import {
barItemConfig,
grid,
legend,
title as titleConfig,
tooltip,
xAxis,
yAxis
} from '@/components/echarts/config';
import useChartConfig from '@/components/echarts/config';
import EmptyData from '@/components/empty-data';
import _ from 'lodash';
import { memo, useMemo } from 'react';
import React, { memo, useMemo } from 'react';
import { ChartProps } from './types';
const BarChart: React.FC<ChartProps> = (props) => {
@@ -23,6 +15,15 @@ const BarChart: React.FC<ChartProps> = (props) => {
legendData,
title
} = props;
const {
barItemConfig,
grid,
legend,
title: titleConfig,
tooltip,
xAxis,
yAxis
} = useChartConfig();
const options = {
title: {
src/components/echarts/chart-tooltip.tsx
+75
View File
@@ -0,0 +1,75 @@
import React from 'react';
import styled from 'styled-components';
const TooltipWrapper = styled.div`
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11px;
background-color: rgba(255, 255, 255, 80%);
min-width: 100px;
max-width: 360px;
.tooltip-x-name {
font-size: var(--font-size-base);
color: var(--ant-color-text-tertiary);
}
.tooltip-item {
color: var(--ant-color-text-secondary);
display: flex;
justify-content: space-between;
align-items: center;
.tooltip-item-title {
margin-right: 2px;
}
.tooltip-value {
margin-left: 10px;
color: var(--ant-color-text);
text-overflow: ellipsis;
overflow: hidden;
}
}
`;
const ItemSymbol = styled.span<{ $color: string }>`
background-color: ${(props) => props.$color};
display: inline-block;
marginright: 5px;
borderradius: 8px;
width: 8px;
height: 8px;
`;
interface ChartTooltipProps {
params: any[];
callback?: (val: any) => any;
}
const ChartTooltip: React.FC<ChartTooltipProps> = (props) => {
const { params, callback } = props;
console.log('params====', params);
return (
<TooltipWrapper>
<span className="tooltip-x-name">{params[0]?.axisValue}</span>
<>
{params.map((item: any, index: number) => {
let value = callback?.(item.data.value) || item.data.value;
return (
<span className="tooltip-item" key={index}>
<span className="tooltip-item-name">
<ItemSymbol $color={item.color}></ItemSymbol>
<span className="tooltip-title">{item.seriesName}</span>:
</span>
<span className="tooltip-value">{value}</span>
</span>
);
})}
</>
</TooltipWrapper>
);
};
export default ChartTooltip;
src/components/echarts/chart.tsx
+11 -19
View File
@@ -1,5 +1,5 @@
import { throttle } from 'lodash';
import {
import React, {
forwardRef,
useCallback,
useEffect,
@@ -36,13 +36,16 @@ const Chart: React.FC<{
chart.current?.resize();
}, []);
const setOption = useCallback((options: ECOption) => {
chart.current?.clear();
chart.current?.setOption(options, {
notMerge: true,
lazyUpdate: true
});
}, []);
const setOption = useCallback(
(options: ECOption) => {
chart.current?.clear();
chart.current?.setOption(options, {
notMerge: true,
lazyUpdate: true
});
},
[options]
);
useEffect(() => {
if (container.current) {
@@ -79,17 +82,6 @@ const Chart: React.FC<{
};
}, []);
// resize on window resize
// useEffect(() => {
// const handleResize = throttle(() => {
// chart.current?.resize();
// }, 100);
// window.addEventListener('resize', handleResize);
// return () => {
// window.removeEventListener('resize', handleResize);
// };
// }, []);
return (
<div className="chart-wrapper" style={{ width: width, height }}>
<div ref={container} style={{ width: width, height }}></div>
src/components/echarts/config.ts
+207 -174
View File
@@ -1,8 +1,7 @@
import useUserSettings from '@/hooks/use-user-settings';
import { theme } from 'antd';
import { isFunction } from 'lodash';
const chartColorMap = {
tickLineColor: 'rgba(217,217,217,0.5)',
axislabelColor: 'rgba(0, 0, 0, 0.4)'
};
import { useMemo } from 'react';
const formatLargeNumber = (value: number) => {
if (typeof value !== 'number' || isNaN(value)) {
@@ -20,29 +19,6 @@ const formatLargeNumber = (value: number) => {
}
};
export const tooltip = {
trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// }
formatter(params: any, callback?: (val: any) => any) {
let result = `<span class="tooltip-x-name">${params[0].axisValue}</span>`;
params.forEach((item: any) => {
let value = isFunction(callback)
? callback?.(item.data.value)
: item.data.value;
result += `<span class="tooltip-item">
<span class="tooltip-item-name">
<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:${item.color};"></span>
<span class="tooltip-title">${item.seriesName}</span>:
</span>
<span class="tooltip-value">${value}</span>
</span>`;
});
return `<div class="tooltip-wrapper">${result}</div>`;
}
};
export const grid = {
left: 0,
right: 20,
@@ -50,159 +26,216 @@ export const grid = {
containLabel: true
};
export const legend = {
itemWidth: 8,
itemHeight: 8
};
export default function useChartConfig() {
const { userSettings, isDarkTheme } = useUserSettings();
const { useToken } = theme;
const { token, hashId } = useToken();
console.log('token+++++++++++++++', token, hashId);
export const xAxis = {
type: 'category',
axisTick: {
show: true,
lineStyle: {
color: chartColorMap.tickLineColor
}
},
axisLabel: {
color: chartColorMap.axislabelColor,
fontSize: 12
},
axisLine: {
show: false
}
};
const chartColorMap = useMemo(() => {
return {
titleColor: token.colorText,
splitLineColor: token.colorBorder,
tickLineColor: token.colorSplit,
axislabelColor: token.colorTextTertiary,
gaugeSplitLineColor: 'rgba(255, 255, 255, 0.38)',
colorBgBase: token.colorBgBase
};
}, [userSettings.theme]);
export const yAxis = {
// max: 100,
// min: 0,
nameTextStyle: {
padding: [0, 0, 0, -20]
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
const tooltip = {
trigger: 'axis',
backgroundColor: chartColorMap.colorBgBase,
borderColor: 'transparent',
formatter(params: any, callback?: (val: any) => any) {
let result = `<span class="tooltip-x-name">${params[0].axisValue}</span>`;
params.forEach((item: any) => {
let value = isFunction(callback)
? callback?.(item.data.value)
: item.data.value;
result += `<span class="tooltip-item">
<span class="tooltip-item-name">
<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:${item.color};"></span>
<span class="tooltip-title">${item.seriesName}</span>:
</span>
<span class="tooltip-value">${value}</span>
</span>`;
});
return `<div class="tooltip-wrapper">${result}</div>`;
}
},
axisLabel: {
color: chartColorMap.axislabelColor,
fontSize: 12,
formatter: formatLargeNumber
},
axisTick: {
show: false
},
type: 'value'
};
};
export const title = {
show: true,
left: 'center',
textStyle: {
fontSize: 12,
color: '#000'
// fontWeight: 500
},
text: ''
};
const legend = {
itemWidth: 8,
itemHeight: 8,
padding: 0,
textStyle: {
color: chartColorMap.axislabelColor
}
};
export const barItemConfig = {
type: 'bar',
barMaxWidth: 20,
barMinWidth: 8,
// stack: 'total',
barGap: '30%',
barCategoryGap: '50%'
};
export const lineItemConfig = {
type: 'line',
smooth: true,
showSymbol: false,
itemStyle: {},
lineStyle: {
width: 1.5,
opacity: 0.7
}
};
export const gaugeItemConfig = {
type: 'gauge',
radius: '88%',
center: ['50%', '65%'],
startAngle: 190,
endAngle: -10,
min: 0,
max: 100,
splitNumber: 5,
progress: {
show: true,
roundCap: false,
width: 12
},
pointer: {
length: '80%',
width: 4,
itemStyle: {
color: 'auto'
}
},
axisLine: {
roundCap: false,
lineStyle: {
width: 12,
// color: [[1, 'rgba(221, 221, 221, 0.5)']],
color: [
[0.5, 'rgba(84, 204, 152, 80%)'],
[0.8, 'rgba(250, 173, 20, 80%)'],
[1, 'rgba(255, 77, 79, 80%)']
]
}
},
axisTick: {
distance: -12,
length: 6,
splitNumber: 5,
lineStyle: {
width: 1.5,
color: 'rgba(255, 255, 255, 1)'
}
},
splitLine: {
distance: -12,
length: 12,
lineStyle: {
width: 1.5,
color: 'rgba(255, 255, 255, 1)'
}
},
axisLabel: {
distance: 14,
color: 'rgba(0, 0, 0, .5)',
fontSize: 12
},
detail: {
lineHeight: 40,
height: 40,
offsetCenter: [5, 30],
valueAnimation: false,
fontSize: 20,
color: 'rgba(0, 0, 0, 0.88)',
formatter(value: any) {
return '{value|' + value + '}{unit|%}';
const xAxis = {
type: 'category',
axisTick: {
show: true,
lineStyle: {
color: chartColorMap.tickLineColor
}
},
rich: {
value: {
fontSize: 16,
fontWeight: '500',
color: 'rgba(0, 0, 0, 0.88)'
axisLabel: {
color: chartColorMap.axislabelColor,
fontSize: 12
},
axisLine: {
show: false
}
};
const yAxis = {
// max: 100,
// min: 0,
nameTextStyle: {
padding: [0, 0, 0, -20]
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: chartColorMap.splitLineColor
}
},
axisLabel: {
color: chartColorMap.axislabelColor,
fontSize: 12,
formatter: formatLargeNumber
},
axisTick: {
show: false
},
type: 'value'
};
const title = {
show: true,
left: 'center',
textStyle: {
fontSize: 12,
color: chartColorMap.titleColor
},
text: ''
};
const barItemConfig = {
type: 'bar',
barMaxWidth: 20,
barMinWidth: 8,
// stack: 'total',
barGap: '30%',
barCategoryGap: '50%'
};
const lineItemConfig = {
type: 'line',
smooth: true,
showSymbol: false,
itemStyle: {},
lineStyle: {
width: 1.5,
opacity: 0.7
}
};
const gaugeItemConfig = {
type: 'gauge',
radius: '88%',
center: ['50%', '65%'],
startAngle: 190,
endAngle: -10,
min: 0,
max: 100,
splitNumber: 5,
progress: {
show: true,
roundCap: false,
width: 12
},
pointer: {
length: '80%',
width: 4,
itemStyle: {
color: 'auto'
}
},
axisLine: {
roundCap: false,
lineStyle: {
width: 12,
color: [
[0.5, 'rgba(84, 204, 152, 80%)'],
[0.8, 'rgba(250, 173, 20, 80%)'],
[1, 'rgba(255, 77, 79, 80%)']
]
}
},
axisTick: {
distance: -12,
length: 6,
splitNumber: 5,
lineStyle: {
width: 1.5,
color: chartColorMap.gaugeSplitLineColor
}
},
splitLine: {
distance: -6,
length: 6,
lineStyle: {
width: 1.5,
color: chartColorMap.gaugeSplitLineColor
}
},
axisLabel: {
distance: 14,
color: chartColorMap.axislabelColor,
fontSize: 12
},
detail: {
lineHeight: 40,
height: 40,
offsetCenter: [5, 30],
valueAnimation: false,
fontSize: 20,
color: chartColorMap.titleColor,
formatter(value: any) {
return '{value|' + value + '}{unit|%}';
},
unit: {
fontSize: 14,
color: 'rgba(0, 0, 0, 0.88)',
fontWeight: '500',
padding: [0, 0, 0, 2]
rich: {
value: {
fontSize: 16,
fontWeight: '500',
color: chartColorMap.titleColor
},
unit: {
fontSize: 14,
color: chartColorMap.titleColor,
fontWeight: '500',
padding: [0, 0, 0, 2]
}
}
}
}
};
};
return {
tooltip,
grid,
legend,
xAxis,
yAxis,
title,
chartColorMap,
barItemConfig,
lineItemConfig,
gaugeItemConfig,
isDark: isDarkTheme
};
}
src/components/echarts/gauge.tsx
+3 -5
View File
@@ -1,15 +1,13 @@
import Chart from '@/components/echarts/chart';
import {
gaugeItemConfig,
title as titleConfig
} from '@/components/echarts/config';
import useChartConfig from '@/components/echarts/config';
import EmptyData from '@/components/empty-data';
import { memo } from 'react';
import React, { memo } from 'react';
import { ChartProps } from './types';
const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
props
) => {
const { gaugeItemConfig, title: titleConfig } = useChartConfig();
const { value, height, width, labelFormatter, title, color } = props;
if (!value && value !== 0) {
return <EmptyData height={height} title={title}></EmptyData>;
src/components/echarts/h-bar.tsx
+10 -9
View File
@@ -1,15 +1,8 @@
import Chart from '@/components/echarts/chart';
import {
grid,
legend,
title as titleConfig,
tooltip,
xAxis,
yAxis
} from '@/components/echarts/config';
import useChartConfig from '@/components/echarts/config';
import EmptyData from '@/components/empty-data';
import _ from 'lodash';
import { memo, useMemo } from 'react';
import React, { memo, useMemo } from 'react';
import { ChartProps } from './types';
const BarChart: React.FC<ChartProps> = (props) => {
@@ -22,6 +15,14 @@ const BarChart: React.FC<ChartProps> = (props) => {
legendData,
title
} = props;
const {
grid,
legend,
title: titleConfig,
tooltip,
xAxis,
yAxis
} = useChartConfig();
const options = {
title: {
src/components/echarts/line-chart.tsx
+12 -11
View File
@@ -1,16 +1,8 @@
import Chart from '@/components/echarts/chart';
import {
grid,
legend,
lineItemConfig,
title as titleConfig,
tooltip,
xAxis,
yAxis
} from '@/components/echarts/config';
import useChartConfig from '@/components/echarts/config';
import EmptyData from '@/components/empty-data';
import _ from 'lodash';
import { memo, useMemo } from 'react';
import React, { memo, useMemo } from 'react';
import { ChartProps } from './types';
const LineChart: React.FC<ChartProps> = (props) => {
@@ -26,6 +18,15 @@ const LineChart: React.FC<ChartProps> = (props) => {
smooth,
title
} = props;
const {
grid,
legend,
lineItemConfig,
title: titleConfig,
tooltip,
xAxis,
yAxis
} = useChartConfig();
const options = {
title: {
@@ -93,7 +94,7 @@ const LineChart: React.FC<ChartProps> = (props) => {
},
series: data
};
}, [seriesData, xAxisData, yAxisName, title, smooth, legendData]);
}, [seriesData, xAxisData, yAxisName, title, smooth, legendData, options]);
return (
<>
src/components/echarts/scatter.tsx
+96 -77
View File
@@ -1,89 +1,106 @@
import Chart from '@/components/echarts/chart';
import { grid, title as titleConfig } from '@/components/echarts/config';
import useChartConfig from '@/components/echarts/config';
import EmptyData from '@/components/empty-data';
import _ from 'lodash';
import { memo, useCallback, useMemo, useRef } from 'react';
import React, { memo, useCallback, useMemo, useRef } from 'react';
import { ChartProps } from './types';
const options: any = {
animation: false,
grid: {
...grid,
right: 10,
top: 10,
bottom: 2,
left: 2,
containLabel: true,
borderRadius: 4
},
xAxis: {
min: -1,
max: 1,
scale: false,
slient: true,
splitNumber: 15,
splitLine: {
lineStyle: {
color: '#F2F2F2'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#DCDCDC'
}
},
axisTick: {
show: false
},
axisLabel: {
show: true
},
boundaryGap: [0.05, 0.05]
},
yAxis: {
min: -1,
max: 1,
scale: false,
slient: true,
splitNumber: 10,
boundaryGap: [0.05, 0.05],
splitLine: {
lineStyle: {
color: '#F2F2F2'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#DCDCDC'
}
},
axisTick: {
show: false
},
axisLabel: {
show: true
}
},
symbol: 'roundRect',
label: {
show: true,
shadowColor: 'none',
textBorderColor: 'none',
formatter: (params: any) => {
return params.name;
}
},
series: []
};
const Scatter: React.FC<ChartProps> = (props) => {
const { grid, title: titleConfig, isDark, chartColorMap } = useChartConfig();
const { seriesData, xAxisData, height, width, showEmpty, title } = props;
const chart = useRef<any>(null);
const options = useMemo(() => {
const colorMap = isDark
? {
split: chartColorMap.splitLineColor,
axis: chartColorMap.axislabelColor,
label: chartColorMap.axislabelColor
}
: {
split: '#F2F2F2',
axis: '#dcdcdc',
label: '#dcdcdc'
};
return {
animation: false,
grid: {
...grid,
right: 10,
top: 10,
bottom: 2,
left: 2,
containLabel: true,
borderRadius: 4
},
xAxis: {
min: -1,
max: 1,
scale: false,
slient: true,
splitNumber: 15,
splitLine: {
lineStyle: {
color: colorMap.split
}
},
axisLine: {
show: true,
lineStyle: {
color: colorMap.axis
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
color: colorMap.label
},
boundaryGap: [0.05, 0.05]
},
yAxis: {
min: -1,
max: 1,
scale: false,
slient: true,
splitNumber: 10,
boundaryGap: [0.05, 0.05],
splitLine: {
lineStyle: {
color: colorMap.split
}
},
axisLine: {
show: true,
lineStyle: {
color: colorMap.axis
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
color: colorMap.label
}
},
symbol: 'roundRect',
label: {
show: true,
shadowColor: 'none',
textBorderColor: 'none',
formatter: (params: any) => {
return params.name;
}
},
series: []
};
}, [isDark]);
const findOverlappingPoints = useCallback(
(data: any[], currentPoint: any) => {
const overlappingPoints = [];
@@ -151,6 +168,8 @@ const Scatter: React.FC<ChartProps> = (props) => {
tooltip: {
trigger: 'item',
borderWidth: 0,
backgroundColor: chartColorMap.colorBgBase,
borderColor: 'transparent',
formatter(params: any, callback?: (val: any) => any) {
const dataList = findOverlappingPoints(seriseDataList, params.data);
let result = '';
@@ -177,7 +196,7 @@ const Scatter: React.FC<ChartProps> = (props) => {
data: seriseDataList
}
};
}, [seriesData, xAxisData, title, findOverlappingPoints]);
}, [seriesData, xAxisData, title, options, findOverlappingPoints]);
return (
<>
src/components/echarts/types.ts
+1 -1
View File
@@ -4,7 +4,7 @@ export interface ChartProps {
xAxisData: string[];
legendData?: string[];
labelFormatter?: (val?: any) => string;
tooltipValueFormatter?: (val?: any) => string;
tooltipValueFormatter?: (val: any) => string;
height: string | number;
width?: string | number;
title?: string;
src/components/footer/index.less
+1 -1
View File
@@ -6,7 +6,7 @@
padding: 20px 0;
text-align: center;
font-size: var(--font-size-middle);
color: var(--color-text-2);
color: var(--ant-color-text-secondary);
.footer-content-left-text {
display: flex;
src/components/seal-form/components/label-info.less
+1 -1
View File
@@ -2,7 +2,7 @@
display: flex;
justify-content: flex-start;
align-items: center;
color: rgba(0, 0, 0, 45%);
color: var(--ant-color-text-tertiary);
font-size: var(--font-size-base);
.note-info {
src/components/seal-form/seal-slider.tsx
+1 -1
View File
@@ -72,7 +72,7 @@ const SealSlider: React.FC<SealSliderProps> = (props) => {
);
}, [label, labelWidth, description, value, max, min, step, defaultValue]);
return (
<SliderWrapper>
<SliderWrapper className="slider-wrapper">
<Wrapper
required={required}
status={checkStatus || status}
src/components/seal-form/wrapper/index.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ const WrapperBox = styled.div`
border-style: var(--ant-line-type);
border-color: var(--ant-color-border);
border-radius: var(--border-radius-base);
background-color: var(--color-white-1);
// background-color: var(--color-white-1);
&.borderless {
border: none;
box-shadow: none;
src/components/seal-form/wrapper/slider.ts
+1
View File
@@ -39,6 +39,7 @@ const SliderWrapper = styled.div`
.ant-input-number-input {
text-align: center !important;
background-color: var(--color-white-1);
}
}
}
src/components/seal-table/components/table-header.tsx
+1
View File
@@ -2,6 +2,7 @@ import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import React from 'react';
import '../styles/header.less';
import { TableHeaderProps } from '../types';
const TableHeader: React.FC<TableHeaderProps> = (props) => {
src/components/seal-table/index.tsx
+16 -4
View File
@@ -1,12 +1,24 @@
import { Pagination, Spin, type PaginationProps } from 'antd';
import { Pagination, Spin, theme, type PaginationProps } from 'antd';
import _ from 'lodash';
import React, { useMemo } from 'react';
import styled from 'styled-components';
import Header from './components/header';
import HeaderPrefix from './components/header-prefix';
import TableBody from './components/table-body';
import './styles/index.less';
import { SealColumnProps, SealTableProps } from './types';
const Wrapper = styled.div<{ $token: any }>`
--ant-table-cell-padding-inline: ${(props) =>
props.$token.cellPaddingInline}px;
--ant-table-cell-padding-block: ${(props) => props.$token.cellPaddingBlock}px;
--ant-table-header-border-radius: ${(props) =>
props.$token.headerBorderRadius}px;
--ant-table-header-split-color: ${(props) => props.$token.headerSplitColor};
--ant-table-row-selected-bg: var(--ant-table-row-selected-bg);
--ant-table-row-selected-hover-bg: var(--ant-table-row-selected-hover-bg);
`;
const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
props
) => {
@@ -32,7 +44,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
loadChildren,
loadChildrenAPI
} = props;
const { token } = theme.useToken();
const parsedColumns = useMemo(() => {
if (columns) return columns;
@@ -122,7 +134,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
};
return (
<>
<Wrapper $token={token.Table}>
<div className="seal-table-container">
<div className="header-row-wrapper">
<HeaderPrefix
@@ -166,7 +178,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
></Pagination>
</div>
)}
</>
</Wrapper>
);
};
src/components/seal-table/styles/index.less
+1 -8
View File
@@ -11,11 +11,10 @@
.header-row-wrapper {
height: 50px;
// margin-bottom: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
border-radius: var(--ant-table-header-border-radius)
var(--ant-table-header-border-radius) 0 0;
@@ -29,17 +28,12 @@
}
.row-box {
// 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);
padding: 16px;
// 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);
@@ -53,7 +47,6 @@
display: flex;
justify-content: flex-start;
align-items: center;
// background-color: var(--color-fill-sider);
transition: all 0.2s ease;
&:hover {