fix: 修复单图模式预览区遮挡导出预览 + 下载按钮宽度
1. 布局重构:右侧主区域改为上下排列(原图预览在上、导出预览在下), chartArea 高度 600→420px,导出预览不再被遮挡 2. 下载按钮:根因是 .btn-success 自带 flex:1 把按钮拉伸占满,已用 flex:0 0 auto + width:auto 覆盖,189px→58px
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user