Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 hz4th_coder
|
d9b3253fa0 | ||
|
hz4th_coder
|
51d3e09378 |
@@ -648,6 +648,28 @@ function onExportPresetChange() {
|
||||
refreshPreview();
|
||||
}
|
||||
|
||||
// 导出设置面板展开/折叠（默认折叠）
|
||||
let exportSettingsOpen = false;
|
||||
function toggleExportSettings() {
|
||||
exportSettingsOpen = !exportSettingsOpen;
|
||||
const body = document.getElementById('exportSettingsBody');
|
||||
const t = document.getElementById('exportToggle');
|
||||
body.style.display = exportSettingsOpen ? 'block' : 'none';
|
||||
t.textContent = exportSettingsOpen ? '▾' : '▸';
|
||||
}
|
||||
|
||||
// 一键恢复默认（重置全部设置，历史记录保留）
|
||||
function resetExportSettings() {
|
||||
document.getElementById('exportPreset').value = 'original';
|
||||
document.getElementById('customResGroup').style.display = 'none';
|
||||
document.getElementById('customWidth').value = '';
|
||||
document.getElementById('customHeight').value = '';
|
||||
document.getElementById('exportFilename').value = '';
|
||||
document.getElementById('exportHistory').value = '';
|
||||
refreshExportHint();
|
||||
refreshPreview();
|
||||
}
|
||||
|
||||
function onCustomResInput() {
|
||||
refreshExportHint();
|
||||
refreshPreview();
|
||||
@@ -778,12 +800,13 @@ function exportCurrent(prefix) {
|
||||
}).catch(err => alert(err.message));
|
||||
}
|
||||
|
||||
// 导出分辨率提示
|
||||
// 导出分辨率提示 + 折叠栏摘要
|
||||
function refreshExportHint() {
|
||||
const { w, h } = getResolution();
|
||||
const hint = document.getElementById('exportResHint');
|
||||
if (!hint) return;
|
||||
hint.textContent = w > 0 && h > 0 ? `导出分辨率：${w} × ${h}（原图居中缩放）` : '导出分辨率：原始大小';
|
||||
if (hint) hint.textContent = w > 0 && h > 0 ? `导出分辨率：${w} × ${h}（原图居中缩放）` : '导出分辨率：原始大小';
|
||||
const sum = document.getElementById('exportSummary');
|
||||
if (sum) sum.textContent = w > 0 && h > 0 ? `${w} × ${h}` : '原始大小';
|
||||
}
|
||||
|
||||
// 刷新导出预览：以原图为中心，居中展示保存后的图
|
||||
|
||||
+44
-35
@@ -208,47 +208,56 @@ C, 20, 30, 40</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导出设置 + 按钮 -->
|
||||
<!-- 导出设置 + 按钮（默认折叠） -->
|
||||
<div class="panel-section" id="exportSection">
|
||||
<h2>📤 导出设置</h2>
|
||||
|
||||
<div class="config-group">
|
||||
<label>分辨率</label>
|
||||
<select id="exportPreset" onchange="onExportPresetChange()">
|
||||
<option value="original">原始大小</option>
|
||||
<option value="1920x1080">1920 × 1080</option>
|
||||
<option value="1280x720">1280 × 720</option>
|
||||
<option value="1024x768">1024 × 768</option>
|
||||
<option value="800x600">800 × 600</option>
|
||||
<option value="custom">自定义</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="config-group" id="customResGroup" style="display:none;">
|
||||
<label>自定义分辨率（宽 × 高）</label>
|
||||
<div class="res-input-row">
|
||||
<input type="number" id="customWidth" min="1" max="8192" placeholder="宽" oninput="onCustomResInput()">
|
||||
<span class="res-times">×</span>
|
||||
<input type="number" id="customHeight" min="1" max="8192" placeholder="高" oninput="onCustomResInput()">
|
||||
<div class="export-header">
|
||||
<div class="export-header-main" onclick="toggleExportSettings()" title="点击展开/折叠">
|
||||
<h2>📤 导出设置</h2>
|
||||
<span class="export-summary" id="exportSummary">原始大小</span>
|
||||
<span class="export-toggle" id="exportToggle">▸</span>
|
||||
</div>
|
||||
<button class="btn btn-success btn-sm" onclick="exportImage('png')">📥 下载</button>
|
||||
</div>
|
||||
|
||||
<div class="config-group">
|
||||
<label>历史分辨率（最近5个）</label>
|
||||
<select id="exportHistory" onchange="onHistorySelect()">
|
||||
<option value="">— 暂无历史 —</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="exportSettingsBody" class="export-settings-body" style="display:none;">
|
||||
<div class="config-group">
|
||||
<label>分辨率</label>
|
||||
<select id="exportPreset" onchange="onExportPresetChange()">
|
||||
<option value="original">原始大小</option>
|
||||
<option value="1920x1080">1920 × 1080</option>
|
||||
<option value="1280x720">1280 × 720</option>
|
||||
<option value="1024x768">1024 × 768</option>
|
||||
<option value="800x600">800 × 600</option>
|
||||
<option value="custom">自定义</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="config-group">
|
||||
<label>文件名</label>
|
||||
<input type="text" id="exportFilename" placeholder="留空则按日期时间自动命名">
|
||||
<p class="hint-text" id="exportResHint"></p>
|
||||
</div>
|
||||
<div class="config-group" id="customResGroup" style="display:none;">
|
||||
<label>自定义分辨率（宽 × 高）</label>
|
||||
<div class="res-input-row">
|
||||
<input type="number" id="customWidth" min="1" max="8192" placeholder="宽" oninput="onCustomResInput()">
|
||||
<span class="res-times">×</span>
|
||||
<input type="number" id="customHeight" min="1" max="8192" placeholder="高" oninput="onCustomResInput()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-success" onclick="exportImage('png')">📥 下载图片</button>
|
||||
<button class="btn btn-success" id="btnExportSvg" onclick="exportImage('svg')">📥 导出SVG</button>
|
||||
<div class="config-group">
|
||||
<label>历史分辨率（最近5个）</label>
|
||||
<select id="exportHistory" onchange="onHistorySelect()">
|
||||
<option value="">— 暂无历史 —</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="config-group">
|
||||
<label>文件名</label>
|
||||
<input type="text" id="exportFilename" placeholder="留空则按日期时间自动命名">
|
||||
<p class="hint-text" id="exportResHint"></p>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary" onclick="resetExportSettings()">🔄 恢复默认</button>
|
||||
<button class="btn btn-success" id="btnExportSvg" onclick="exportImage('svg')">📥 导出SVG</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -882,7 +882,7 @@ app.get('/api/health', (req, res) => {
|
||||
res.json({
|
||||
status: 'ok',
|
||||
service: 'data-chart-tool',
|
||||
version: '1.10.0',
|
||||
version: '1.10.1',
|
||||
endpoints: {
|
||||
'POST /api/chart': '生成图表图片（JSON body）',
|
||||
'GET /api/chart': '生成图表图片（URL 参数）',
|
||||
@@ -897,7 +897,7 @@ app.get('/api/health', (req, res) => {
|
||||
app.get('/api/docs', (req, res) => {
|
||||
res.json({
|
||||
name: '数据可视化图表生成器 API',
|
||||
version: '1.10.0',
|
||||
version: '1.10.1',
|
||||
endpoints: [
|
||||
{
|
||||
method: 'POST',
|
||||
|
||||
@@ -671,3 +671,54 @@ input[type="range"]::-moz-range-thumb {
|
||||
padding: 1px 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ===== 导出设置折叠栏 ===== */
|
||||
.export-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.export-header-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.export-header h2 {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.export-summary {
|
||||
font-size: 0.75rem;
|
||||
color: var(--primary);
|
||||
background: #eef2ff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.export-toggle {
|
||||
color: var(--text-light);
|
||||
font-size: 0.8rem;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.export-settings-body {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 6px 12px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
Reference in New Issue
Block a user