Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 hz4th_coder
|
0e1ef77054 | ||
|
hz4th_coder
|
9f4d67a65f | ||
|
hz4th_coder
|
2f85dd5b28 |
+45
-3
@@ -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>
|
||||
|
||||
@@ -186,7 +200,7 @@ C, 20, 30, 40</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧面板：图表预览 -->
|
||||
<!-- 右侧面板：图表预览 + 风格切换 -->
|
||||
<div class="right-panel">
|
||||
<div class="chart-container">
|
||||
<div id="chartArea" class="chart-area">
|
||||
@@ -196,9 +210,9 @@ C, 20, 30, 40</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 风格快速切换按钮 -->
|
||||
<!-- 风格快速切换按钮（放在图表右侧） -->
|
||||
<div class="theme-buttons-section">
|
||||
<h3>🎨 快速切换风格</h3>
|
||||
<h3>🎨 风格</h3>
|
||||
<div class="theme-buttons-grid" id="themeButtonsGrid">
|
||||
<button class="theme-btn" data-theme="default" onclick="quickSwitchTheme('default')">
|
||||
<span class="theme-preview" style="background: linear-gradient(135deg, #5470c6, #91cc75)"></span>
|
||||
@@ -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>
|
||||
|
||||
@@ -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'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -320,9 +320,14 @@ body {
|
||||
.right-panel {
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: var(--panel-bg);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px;
|
||||
@@ -367,6 +372,20 @@ body {
|
||||
.chart-area {
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
/* 小屏幕下风格按钮回到图表下方 */
|
||||
.right-panel {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.theme-buttons-section {
|
||||
width: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.theme-buttons-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 动画 ===== */
|
||||
@@ -458,67 +477,67 @@ input[type="range"]::-moz-range-thumb {
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* ===== 风格快速切换按钮区 ===== */
|
||||
/* ===== 风格快速切换按钮区（右侧） ===== */
|
||||
.theme-buttons-section {
|
||||
margin-top: 16px;
|
||||
width: 160px;
|
||||
flex-shrink: 0;
|
||||
background: var(--panel-bg);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px 20px;
|
||||
padding: 16px;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid var(--border);
|
||||
max-height: calc(100vh - 140px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.theme-buttons-section h3 {
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.theme-buttons-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.theme-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
gap: 4px;
|
||||
padding: 6px 4px;
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 10px;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
min-width: 72px;
|
||||
}
|
||||
|
||||
.theme-btn:hover {
|
||||
border-color: var(--primary);
|
||||
transform: translateY(-2px);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.theme-btn.active {
|
||||
border-color: var(--primary);
|
||||
background: rgba(79, 70, 229, 0.05);
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
|
||||
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
|
||||
}
|
||||
|
||||
.theme-preview {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
width: 32px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.theme-name {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -527,3 +546,17 @@ input[type="range"]::-moz-range-thumb {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
.theme-buttons-section::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.theme-buttons-section::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.theme-buttons-section::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
Reference in New Issue
Block a user