feat: 新增5种主题风格 + 风格快速切换按钮
新增主题: - cherry 樱花粉:甜美可爱 - midnight 午夜:深紫高端 - gold 金色:奢华典雅 - coral 珊瑚:时尚活泼 - mint 薄荷:清新凉爽 UI改进: - 在图表展示区下方添加15种风格快速切换按钮 - 每个按钮带渐变色预览,点击即切换 - 图表模式和表格模式都支持全部15种主题 - 下拉框和按钮状态双向同步
This commit is contained in:
@@ -29,7 +29,17 @@ const colorPalettes = {
|
||||
dark: ['#4fc3f7', '#81c784', '#fff176', '#ff8a65', '#ba68c8', '#4dd0e1', '#ffab91', '#aed581', '#f48fb1'],
|
||||
macarons: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80', '#8d98b3', '#e5cf0d', '#97b552', '#95706d'],
|
||||
gradient: ['#7f7fd5', '#86a8e7', '#91eae4', '#ff6b6b', '#feca57', '#48dbfb', '#ff9ff3', '#54a0ff', '#5f27cd'],
|
||||
retro: ['#d4a5a5', '#95b9c7', '#f6e8c3', '#dfceb4', '#a4c3b5', '#c9b1ff', '#f5c7b8', '#b8d4e3', '#e8c8a0']
|
||||
retro: ['#d4a5a5', '#95b9c7', '#f6e8c3', '#dfceb4', '#a4c3b5', '#c9b1ff', '#f5c7b8', '#b8d4e3', '#e8c8a0'],
|
||||
ocean: ['#0077b6', '#00b4d8', '#90e0ef', '#caf0f8', '#023e8a', '#48cae4', '#ade8f4', '#0096c7', '#03045e'],
|
||||
forest: ['#2d6a4f', '#40916c', '#52b788', '#74c69d', '#95d5b2', '#b7e4c7', '#d8f3dc', '#1b4332', '#344e41'],
|
||||
sunset: ['#e85d04', '#f48c06', '#faa307', '#ffba08', '#dc2f02', '#d00000', '#9d0208', '#6a040f', '#370617'],
|
||||
lavender: ['#7c3aed', '#8b5cf6', '#a78bfa', '#c4b5fd', '#ddd6fe', '#ede9fe', '#5b21b6', '#4c1d95', '#6d28d9'],
|
||||
minimal: ['#111827', '#374151', '#6b7280', '#9ca3af', '#d1d5db', '#e5e7eb', '#f3f4f6', '#4b5563', '#1f2937'],
|
||||
cherry: ['#e91e63', '#f06292', '#f48fb1', '#f8bbd0', '#fce4ec', '#c2185b', '#ad1457', '#880e4f', '#d81b60'],
|
||||
midnight: ['#6c63ff', '#5a52d5', '#483fb5', '#7c79ff', '#3d3d5c', '#8b89ff', '#9d9bff', '#2c2c4a', '#b3b2ff'],
|
||||
gold: ['#b8860b', '#daa520', '#f0c040', '#ffd700', '#ffe066', '#996515', '#cc9900', '#e6b800', '#8b6914'],
|
||||
coral: ['#ff6f61', '#ff8a70', '#ffa07a', '#ffab91', '#ffccbc', '#e64a19', '#f4511e', '#ff5722', '#d84315'],
|
||||
mint: ['#00bfa5', '#26a69a', '#4db6ac', '#80cbc4', '#b2dfdb', '#00897b', '#00796b', '#004d40', '#009688']
|
||||
};
|
||||
|
||||
// ===== 数据解析(与前端一致) =====
|
||||
@@ -515,6 +525,51 @@ const tableThemes = {
|
||||
borderColor: '#dee2e6',
|
||||
stripeColor: '#f8f9fa',
|
||||
titleColor: '#212529'
|
||||
},
|
||||
cherry: {
|
||||
bgColor: '#fff5f7',
|
||||
headerBg: '#e91e63',
|
||||
headerColor: '#ffffff',
|
||||
cellColor: '#880e4f',
|
||||
borderColor: '#f48fb1',
|
||||
stripeColor: '#fce4ec',
|
||||
titleColor: '#880e4f'
|
||||
},
|
||||
midnight: {
|
||||
bgColor: '#1a1a2e',
|
||||
headerBg: '#6c63ff',
|
||||
headerColor: '#ffffff',
|
||||
cellColor: '#e0e0e0',
|
||||
borderColor: '#3d3d5c',
|
||||
stripeColor: '#22223a',
|
||||
titleColor: '#e0e0e0'
|
||||
},
|
||||
gold: {
|
||||
bgColor: '#fffef5',
|
||||
headerBg: '#b8860b',
|
||||
headerColor: '#ffffff',
|
||||
cellColor: '#5c4a00',
|
||||
borderColor: '#daa520',
|
||||
stripeColor: '#fdf6e3',
|
||||
titleColor: '#5c4a00'
|
||||
},
|
||||
coral: {
|
||||
bgColor: '#fff5f2',
|
||||
headerBg: '#ff6f61',
|
||||
headerColor: '#ffffff',
|
||||
cellColor: '#5d2b1f',
|
||||
borderColor: '#ffab91',
|
||||
stripeColor: '#fff0ed',
|
||||
titleColor: '#5d2b1f'
|
||||
},
|
||||
mint: {
|
||||
bgColor: '#f0fff8',
|
||||
headerBg: '#00bfa5',
|
||||
headerColor: '#ffffff',
|
||||
cellColor: '#004d40',
|
||||
borderColor: '#80cbc4',
|
||||
stripeColor: '#e0f2f1',
|
||||
titleColor: '#004d40'
|
||||
}
|
||||
};
|
||||
|
||||
@@ -769,7 +824,7 @@ app.get('/api/docs', (req, res) => {
|
||||
data: { type: 'string', required: true, description: 'CSV 格式数据(第一行表头,第一列横坐标)' },
|
||||
chartType: { type: 'string', default: 'bar', options: ['bar', 'line', 'bar-line'], description: '图表类型' },
|
||||
title: { type: 'string', default: '', description: '图表标题' },
|
||||
theme: { type: 'string', default: 'default', options: ['default', 'dark', 'macarons', 'gradient', 'retro'], description: '主题风格' },
|
||||
theme: { type: 'string', default: 'default', options: ['default', 'dark', 'macarons', 'gradient', 'retro', 'ocean', 'forest', 'sunset', 'lavender', 'minimal', 'cherry', 'midnight', 'gold', 'coral', 'mint'], description: '主题风格' },
|
||||
showLegend: { type: 'boolean', default: true, description: '是否显示图例' },
|
||||
showGrid: { type: 'boolean', default: true, description: '是否显示网格线' },
|
||||
showLabel: { type: 'boolean', default: false, description: '是否显示数据标签' },
|
||||
@@ -825,7 +880,7 @@ app.get('/api/docs', (req, res) => {
|
||||
params: {
|
||||
data: { type: 'string', required: true, description: 'CSV 格式数据(第一行表头)' },
|
||||
title: { type: 'string', default: '', description: '表格标题' },
|
||||
theme: { type: 'string', default: 'default', options: ['default', 'dark', 'macarons', 'gradient', 'retro', 'ocean', 'forest', 'sunset', 'lavender', 'minimal'], description: '主题风格' },
|
||||
theme: { type: 'string', default: 'default', options: ['default', 'dark', 'macarons', 'gradient', 'retro', 'ocean', 'forest', 'sunset', 'lavender', 'minimal', 'cherry', 'midnight', 'gold', 'coral', 'mint'], description: '主题风格' },
|
||||
fontSize: { type: 'number', default: 14, description: '字体大小' },
|
||||
cellPadding: { type: 'number', default: 12, description: '单元格内边距' },
|
||||
borderWidth: { type: 'number', default: 1, description: '边框宽度' },
|
||||
|
||||
Reference in New Issue
Block a user