Skip to content

Commit 4716ddd

Browse files
Violet2314Violet2314
committed
feat(gantt): add theme adaptation capability
1 parent b6c6763 commit 4716ddd

18 files changed

Lines changed: 517 additions & 420 deletions

File tree

‎packages/vtable-gantt/examples/gantt/gantt-theme-adaptation.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ export function createTable() {
231231
];
232232
const option: GanttConstructorOptions = {
233233
records: [],
234-
theme: VTable.themes.SIMPLIFY,
234+
theme: VTableGantt.themes.SIMPLIFY,
235235
taskListTable: {
236236
columns: columns,
237237
tableWidth: 400,

‎packages/vtable-gantt/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,4 @@ export {
4242
VTable,
4343
plugins
4444
};
45+
export * as themes from './themes';

‎packages/vtable-gantt/src/themes.ts‎

Lines changed: 54 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,56 @@
1-
// /* eslint-disable sort-imports */
2-
// import { extend, getIgnoreCase } from './tools/helper';
3-
// import darkTheme from './themes/DARK';
4-
// import brightTheme from './themes/BRIGHT';
5-
// import arcoTheme from './themes/ARCO';
6-
// import defaultTheme from './themes/DEFAULT';
7-
// import materialDesignTheme from './themes/SIMPLIFY';
8-
// import { themes as plugins } from './plugins/themes';
9-
// import { TableTheme } from './themes/theme';
10-
// import type { ITableThemeDefine } from './ts-types';
11-
// export const DARK = new TableTheme(darkTheme, darkTheme);
12-
// export const BRIGHT = new TableTheme(brightTheme, brightTheme);
13-
// export const ARCO = new TableTheme(arcoTheme, arcoTheme);
14-
// export const DEFAULT = new TableTheme(defaultTheme, defaultTheme);
15-
// export const SIMPLIFY = new TableTheme(materialDesignTheme, materialDesignTheme);
1+
/* eslint-disable sort-imports */
2+
import { extend, getIgnoreCase } from './tools/helper';
3+
import { TableTheme } from './themes/theme-define';
4+
import ganttSimplifyTheme from './themes/SIMPLIFY';
5+
import arcoTheme from './themes/ARCO';
6+
import darkTheme from './themes/DARK';
7+
import defaultTheme from './themes/DEFAULT';
8+
import brightTheme from './themes/BRIGHT';
169

17-
// const builtin: { [key: string]: TableTheme } = {
18-
// DEFAULT,
19-
// SIMPLIFY,
20-
// ARCO,
21-
// DARK,
22-
// BRIGHT
23-
// };
24-
// // let defTheme = DEFAULT;
25-
// export const theme = { TableTheme };
26-
// export function of(value: ITableThemeDefine | string | undefined | null): TableTheme | null {
27-
// if (!value) {
28-
// return null;
29-
// }
30-
// if (typeof value === 'string') {
31-
// const t = getIgnoreCase(get(), value);
32-
// if (t) {
33-
// if (t instanceof TableTheme) {
34-
// return t;
35-
// }
36-
// return new TableTheme(t, t);
37-
// }
38-
// return null;
39-
// }
40-
// if (value instanceof TableTheme) {
41-
// return value;
42-
// }
43-
// return new TableTheme(value, value);
44-
// }
10+
export const SIMPLIFY = new TableTheme(ganttSimplifyTheme, ganttSimplifyTheme);
11+
export const ARCO = new TableTheme(arcoTheme, arcoTheme);
12+
export const DARK = new TableTheme(darkTheme, darkTheme);
13+
export const DEFAULT = new TableTheme(defaultTheme, defaultTheme);
14+
export const BRIGHT = new TableTheme(brightTheme, brightTheme);
4515

46-
// export function get(): { [key: string]: TableTheme } {
47-
// return extend(builtin, plugins);
48-
// }
49-
// export { ITableThemeDefine };
50-
// export default {
51-
// DARK,
52-
// BRIGHT,
53-
// ARCO,
54-
// DEFAULT,
55-
// SIMPLIFY,
56-
// theme,
57-
// of,
58-
// get
59-
// };
16+
const builtin: { [key: string]: TableTheme } = {
17+
SIMPLIFY,
18+
ARCO,
19+
DARK,
20+
DEFAULT,
21+
BRIGHT
22+
};
23+
24+
export const theme = { TableTheme };
25+
26+
export function of(value: any | string | undefined | null): TableTheme | null {
27+
if (!value) {
28+
return null;
29+
}
30+
if (typeof value === 'string') {
31+
const t = getIgnoreCase(get(), value);
32+
if (t) {
33+
if (t instanceof TableTheme) {
34+
return t;
35+
}
36+
return new TableTheme(t, t);
37+
}
38+
return null;
39+
}
40+
if (value instanceof TableTheme) {
41+
return value;
42+
}
43+
return new TableTheme(value, value);
44+
}
45+
46+
export function get(): { [key: string]: TableTheme } {
47+
// 这里可以扩展插件主题
48+
return extend(builtin, {});
49+
}
50+
51+
export default {
52+
SIMPLIFY,
53+
theme,
54+
of,
55+
get
56+
};

‎packages/vtable-gantt/src/themes/ARCO.ts‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
// vtable-gantt/src/themes/ARCO.ts
2+
// 仅迁移甘特相关主题字段
3+
const ARCO = {
4+
name: 'ARCO',
5+
rowSeriesNumber: {
6+
title: '行号',
7+
dragOrder: true,
8+
headerStyle: {
9+
bgColor: '#EEF1F5',
10+
borderColor: '#e1e4e8',
11+
color: '#1B1F23'
12+
},
13+
style: {
14+
bgColor: '#FFF',
15+
color: '#1B1F23',
16+
fontSize: 14
17+
}
18+
},
19+
grid: {
20+
verticalLine: {
21+
lineWidth: 1,
22+
lineColor: '#e1e4e8'
23+
},
24+
horizontalLine: {
25+
lineWidth: 1,
26+
lineColor: '#e1e4e8'
27+
},
28+
backgroundColor: '#FFF'
29+
},
30+
taskBar: {
31+
startDateField: 'start',
32+
endDateField: 'end',
33+
progressField: 'progress',
34+
labelText: '{title} {progress}%',
35+
barStyle: {
36+
barColor: '#ee8800',
37+
completedBarColor: '#91e8e0',
38+
width: 20,
39+
cornerRadius: 8,
40+
borderColor: 'black',
41+
borderWidth: 1
42+
},
43+
milestoneStyle: {
44+
borderColor: '#3073f2',
45+
borderLineWidth: 1,
46+
fillColor: '#c8daf6',
47+
width: 15,
48+
cornerRadius: 0
49+
},
50+
labelTextStyle: {
51+
fontFamily: 'Arial',
52+
fontSize: 14,
53+
color: '#1B1F23',
54+
textAlign: 'left'
55+
}
56+
},
57+
timelineHeader: {
58+
backgroundColor: '#EEF1F5',
59+
colWidth: 60,
60+
verticalLine: {
61+
lineWidth: 1,
62+
lineColor: '#e1e4e8'
63+
},
64+
horizontalLine: {
65+
lineWidth: 1,
66+
lineColor: '#e1e4e8'
67+
}
68+
}
69+
};
70+
71+
export default ARCO;

‎packages/vtable-gantt/src/themes/BRIGHT.ts‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
// vtable-gantt/src/themes/BRIGHT.ts
2+
// 迁移自 vtable，专用于甘特图主题体系
3+
4+
const BRIGHT = {
5+
name: 'BRIGHT',
6+
rowSeriesNumber: {
7+
title: '行号',
8+
dragOrder: true,
9+
headerStyle: {
10+
bgColor: '#5389FF',
11+
borderColor: '#A1C1FF',
12+
color: '#FFF'
13+
},
14+
style: {
15+
bgColor: '#F4F8FF',
16+
color: '#000',
17+
fontSize: 14
18+
}
19+
},
20+
grid: {
21+
verticalLine: {
22+
lineWidth: 1,
23+
lineColor: '#e1e4e8'
24+
},
25+
horizontalLine: {
26+
lineWidth: 1,
27+
lineColor: '#e1e4e8'
28+
},
29+
backgroundColor: '#FFF'
30+
},
31+
taskBar: {
32+
startDateField: 'start',
33+
endDateField: 'end',
34+
progressField: 'progress',
35+
labelText: '{title} {progress}%',
36+
barStyle: {
37+
barColor: '#5389FF',
38+
completedBarColor: '#E0EAFE',
39+
width: 20,
40+
cornerRadius: 8,
41+
borderColor: '#5286FA',
42+
borderWidth: 1
43+
},
44+
milestoneStyle: {
45+
borderColor: '#A1C1FF',
46+
borderLineWidth: 1,
47+
fillColor: '#5389FF',
48+
width: 15,
49+
cornerRadius: 0
50+
},
51+
labelTextStyle: {
52+
fontFamily: 'Arial',
53+
fontSize: 14,
54+
color: '#000',
55+
textAlign: 'left'
56+
}
57+
},
58+
timelineHeader: {
59+
backgroundColor: '#5389FF',
60+
colWidth: 60,
61+
verticalLine: {
62+
lineWidth: 1,
63+
lineColor: '#e1e4e8'
64+
},
65+
horizontalLine: {
66+
lineWidth: 1,
67+
lineColor: '#e1e4e8'
68+
}
69+
}
70+
};
71+
72+
export default BRIGHT;

‎packages/vtable-gantt/src/themes/DARK.ts‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
// vtable-gantt/src/themes/DARK.ts
2+
// 仅迁移甘特相关主题字段
3+
const DARK = {
4+
name: 'DARK',
5+
rowSeriesNumber: {
6+
title: '行号',
7+
dragOrder: true,
8+
headerStyle: {
9+
bgColor: '#373b45',
10+
borderColor: '#444A54',
11+
color: '#D3D5DA'
12+
},
13+
style: {
14+
bgColor: '#2d3137',
15+
color: '#D3D5DA',
16+
fontSize: 12
17+
}
18+
},
19+
grid: {
20+
verticalLine: {
21+
lineWidth: 1,
22+
lineColor: '#444A54'
23+
},
24+
horizontalLine: {
25+
lineWidth: 1,
26+
lineColor: '#444A54'
27+
},
28+
backgroundColor: '#282a2e'
29+
},
30+
taskBar: {
31+
startDateField: 'start',
32+
endDateField: 'end',
33+
progressField: 'progress',
34+
labelText: '{title} {progress}%',
35+
barStyle: {
36+
barColor: '#4284FF',
37+
completedBarColor: '#2F4774',
38+
width: 20,
39+
cornerRadius: 8,
40+
borderColor: '#4284FF',
41+
borderWidth: 1
42+
},
43+
milestoneStyle: {
44+
borderColor: '#4284FF',
45+
borderLineWidth: 1,
46+
fillColor: '#2F4774',
47+
width: 15,
48+
cornerRadius: 0
49+
},
50+
labelTextStyle: {
51+
fontFamily: 'PingFang SC',
52+
fontSize: 12,
53+
color: '#D3D5DA',
54+
textAlign: 'left'
55+
}
56+
},
57+
timelineHeader: {
58+
backgroundColor: '#373b45',
59+
colWidth: 60,
60+
verticalLine: {
61+
lineWidth: 1,
62+
lineColor: '#444A54'
63+
},
64+
horizontalLine: {
65+
lineWidth: 1,
66+
lineColor: '#444A54'
67+
}
68+
}
69+
};
70+
71+
export default DARK;

0 commit comments

Comments
 (0)