feat: 风格切换按钮移至图表右侧

布局调整:
- 风格按钮区域移到图表展示区右侧并排显示
- 右侧面板改为 flex 横向布局
- 风格区域固定宽度 160px,每行2个按钮
- 风格区域支持独立滚动
- 小屏幕下自动回到图表下方(响应式)
This commit is contained in:
2026-07-17 13:21:52 +08:00
parent 9f4d67a65f
commit 0e1ef77054
2 changed files with 54 additions and 21 deletions
+3 -3
View File
@@ -200,7 +200,7 @@ C, 20, 30, 40</pre>
</div>
</div>
<!-- 右侧面板:图表预览 -->
<!-- 右侧面板:图表预览 + 风格切换 -->
<div class="right-panel">
<div class="chart-container">
<div id="chartArea" class="chart-area">
@@ -210,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>