57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import { GridOptions, themeQuartz } from "ag-grid-community"
|
|
const borderConfig = {
|
|
style: "solid", // 虚线改实线更简洁，也可保留 dotted 但建议用 solid
|
|
width: 0.3, // 更细的边框，减少视觉干扰
|
|
color: "#d3d3d3" // 浅灰色边框，清新不刺眼
|
|
};
|
|
|
|
// 简洁清新风格的主题配置
|
|
export const myTheme = themeQuartz.withParams({
|
|
// 核心：移除外边框，减少视觉包裹感
|
|
wrapperBorder: false,
|
|
|
|
// 表头样式（柔和浅蓝，无加粗，更轻盈）
|
|
headerBackgroundColor: "#f0f2f3", // 极浅的背景色，替代深一点的 #e7f3fc
|
|
headerTextColor: "#374151", // 深灰色文字，比纯黑更柔和
|
|
headerFontSize: 15, // 字体稍大一点，更易读
|
|
headerFontWeight: "normal", // 取消加粗，降低视觉重量
|
|
|
|
// 行/列/表头边框（统一浅灰细边框）
|
|
rowBorder: borderConfig,
|
|
columnBorder: borderConfig,
|
|
headerRowBorder: borderConfig,
|
|
|
|
// 可选：偶数行背景色（轻微区分，更清新）
|
|
dataBackgroundColor: "#fefefe"
|
|
});
|
|
export const gridOptions: GridOptions<any> = {
|
|
treeData: true,
|
|
animateRows: true,
|
|
tooltipShowMode: 'whenTruncated',
|
|
suppressAggFuncInHeader: true,
|
|
singleClickEdit: true,
|
|
suppressClickEdit: false,
|
|
suppressContextMenu: false,
|
|
// autoSizeStrategy: {
|
|
// type: 'fitGridWidth',
|
|
// defaultMinWidth: 100,
|
|
// },
|
|
groupDefaultExpanded: -1,
|
|
suppressFieldDotNotation: true,
|
|
// Keep group expand/collapse state when rowData updates after edits/saves.
|
|
getRowId: params => String(params.data?.id ?? params.data?.path?.join('/') ?? ''),
|
|
getDataPath: data => data.path,
|
|
getContextMenuItems: () => ['copy', 'paste', 'separator', 'export'],
|
|
defaultColDef: {
|
|
resizable: true,
|
|
sortable: false,
|
|
filter: false,
|
|
wrapHeaderText: true,
|
|
autoHeaderHeight: true
|
|
},
|
|
defaultColGroupDef: {
|
|
wrapHeaderText: true,
|
|
autoHeaderHeight: true
|
|
}
|
|
}
|