fix: 修复单图模式预览区遮挡导出预览 + 下载按钮宽度

1. 布局重构:右侧主区域改为上下排列(原图预览在上、导出预览在下),
   chartArea 高度 600→420px,导出预览不再被遮挡
2. 下载按钮:根因是 .btn-success 自带 flex:1 把按钮拉伸占满,已用
   flex:0 0 auto + width:auto 覆盖,189px→58px
This commit is contained in:
2026-08-19 13:09:51 +08:00
parent 6a696daeb8
commit 68e4b72d46
3 changed files with 28 additions and 16 deletions
+2
View File
@@ -401,6 +401,7 @@ C, 20, 30, 40</pre>
<!-- 右侧面板:图表预览 + 导出预览 + 风格切换 -->
<div class="right-panel">
<div class="right-main">
<div class="chart-container">
<div id="chartArea" class="chart-area">
<div class="placeholder">
@@ -414,6 +415,7 @@ C, 20, 30, 40</pre>
<div class="export-preview-title" id="exportPreviewTitle">📐 导出预览</div>
<div class="export-preview-inner" id="exportPreviewInner"></div>
</div>
</div>
<!-- 风格快速切换按钮(放在图表右侧) -->
<div class="theme-buttons-section">
<h3>🎨 风格</h3>
+2 -2
View File
@@ -919,7 +919,7 @@ app.get('/api/health', (req, res) => {
res.json({
status: 'ok',
service: 'data-chart-tool',
version: '1.11.0',
version: '1.11.1',
endpoints: {
'POST /api/chart': '生成图表图片(JSON body',
'GET /api/chart': '生成图表图片(URL 参数)',
@@ -934,7 +934,7 @@ app.get('/api/health', (req, res) => {
app.get('/api/docs', (req, res) => {
res.json({
name: '数据可视化图表生成器 API',
version: '1.11.0',
version: '1.11.1',
endpoints: [
{
method: 'POST',
+14 -4
View File
@@ -325,9 +325,18 @@ body {
align-items: flex-start;
}
.chart-container {
/* 右侧主区域:原图预览 + 导出预览 上下排列 */
.right-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.chart-container {
flex: none;
min-width: 0;
background: var(--panel-bg);
border-radius: var(--radius);
padding: 20px;
@@ -337,7 +346,7 @@ body {
.chart-area {
width: 100%;
height: 600px;
height: 420px;
}
.placeholder {
@@ -370,7 +379,7 @@ body {
}
.chart-area {
height: 450px;
height: 320px;
}
/* 小屏幕下风格按钮回到图表下方 */
@@ -725,8 +734,9 @@ input[type="range"]::-moz-range-thumb {
/* 导出设置折叠栏下载按钮(更小,避免挤占) */
.export-header .btn-sm {
flex: 0 0 auto;
width: auto;
padding: 3px 8px;
font-size: 0.74rem;
white-space: nowrap;
flex-shrink: 0;
}