hz4th_coder/data-chart-tool
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增7种简约纯色表格风格

Browse Source 
新增风格：
- slate 石板灰：专业商务
- sky 天空蓝：清爽明亮
- rose 玫瑰红：优雅大方
- amber 琥珀黄：温暖柔和
- emerald 翡翠绿：高贵典雅
- indigo 靛蓝色：沉稳内敛
- stone 石灰白：极简现代

特点：纯色表头，简洁干净，无渐变效果
This commit is contained in:
hz4th_coder
2026-07-17 13:14:47 +08:00
parent 3833742d4d
commit 2f85dd5b28
2 changed files with 106 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+42
View File
@@ -81,6 +81,13 @@ C, 20, 30, 40</pre>
<option value="gold">金色</option>
<option value="coral">珊瑚</option>
<option value="mint">薄荷</option>
<option value="slate">石板灰</option>
<option value="sky">天空蓝</option>
<option value="rose">玫瑰红</option>
<option value="amber">琥珀黄</option>
<option value="emerald">翡翠绿</option>
<option value="indigo">靛蓝色</option>
<option value="stone">石灰白</option>
</select>
</div>
@@ -123,6 +130,13 @@ C, 20, 30, 40</pre>
<option value="gold">金色</option>
<option value="coral">珊瑚</option>
<option value="mint">薄荷</option>
<option value="slate">石板灰</option>
<option value="sky">天空蓝</option>
<option value="rose">玫瑰红</option>
<option value="amber">琥珀黄</option>
<option value="emerald">翡翠绿</option>
<option value="indigo">靛蓝色</option>
<option value="stone">石灰白</option>
</select>
</div>
@@ -260,6 +274,34 @@ C, 20, 30, 40</pre>
<span class="theme-preview" style="background: linear-gradient(135deg, #00bfa5, #80cbc4)"></span>
<span class="theme-name">薄荷</span>
</button>
<button class="theme-btn" data-theme="slate" onclick="quickSwitchTheme('slate')">
<span class="theme-preview" style="background: #475569"></span>
<span class="theme-name">石板灰</span>
</button>
<button class="theme-btn" data-theme="sky" onclick="quickSwitchTheme('sky')">
<span class="theme-preview" style="background: #0ea5e9"></span>
<span class="theme-name">天空蓝</span>
</button>
<button class="theme-btn" data-theme="rose" onclick="quickSwitchTheme('rose')">
<span class="theme-preview" style="background: #e11d48"></span>
<span class="theme-name">玫瑰红</span>
</button>
<button class="theme-btn" data-theme="amber" onclick="quickSwitchTheme('amber')">
<span class="theme-preview" style="background: #f59e0b"></span>
<span class="theme-name">琥珀黄</span>
</button>
<button class="theme-btn" data-theme="emerald" onclick="quickSwitchTheme('emerald')">
<span class="theme-preview" style="background: #10b981"></span>
<span class="theme-name">翡翠绿</span>
</button>
<button class="theme-btn" data-theme="indigo" onclick="quickSwitchTheme('indigo')">
<span class="theme-preview" style="background: #6366f1"></span>
<span class="theme-name">靛蓝色</span>
</button>
<button class="theme-btn" data-theme="stone" onclick="quickSwitchTheme('stone')">
<span class="theme-preview" style="background: #78716c"></span>
<span class="theme-name">石灰白</span>
</button>
</div>
</div>
</div>
server.js
+64
View File
@@ -570,6 +570,70 @@ const tableThemes = {
borderColor: '#80cbc4',
stripeColor: '#e0f2f1',
titleColor: '#004d40'
},
// 简约纯色风格
slate: {
bgColor: '#ffffff',
headerBg: '#475569',
headerColor: '#ffffff',
cellColor: '#334155',
borderColor: '#cbd5e1',
stripeColor: '#f8fafc',
titleColor: '#1e293b'
},
sky: {
bgColor: '#ffffff',
headerBg: '#0ea5e9',
headerColor: '#ffffff',
cellColor: '#0c4a6e',
borderColor: '#bae6fd',
stripeColor: '#f0f9ff',
titleColor: '#0c4a6e'
},
rose: {
bgColor: '#ffffff',
headerBg: '#e11d48',
headerColor: '#ffffff',
cellColor: '#881337',
borderColor: '#fecdd3',
stripeColor: '#fff1f2',
titleColor: '#881337'
},
amber: {
bgColor: '#ffffff',
headerBg: '#f59e0b',
headerColor: '#ffffff',
cellColor: '#78350f',
borderColor: '#fde68a',
stripeColor: '#fffbeb',
titleColor: '#78350f'
},
emerald: {
bgColor: '#ffffff',
headerBg: '#10b981',
headerColor: '#ffffff',
cellColor: '#064e3b',
borderColor: '#a7f3d0',
stripeColor: '#ecfdf5',
titleColor: '#064e3b'
},
indigo: {
bgColor: '#ffffff',
headerBg: '#6366f1',
headerColor: '#ffffff',
cellColor: '#312e81',
borderColor: '#c7d2fe',
stripeColor: '#eef2ff',
titleColor: '#312e81'
},
stone: {
bgColor: '#ffffff',
headerBg: '#78716c',
headerColor: '#ffffff',
cellColor: '#44403c',
borderColor: '#d6d3d1',
stripeColor: '#fafaf9',
titleColor: '#292524'
}
};