Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d9b3253fa0 | ||
|
|
51d3e09378 |
@@ -648,6 +648,28 @@ function onExportPresetChange() {
|
|||||||
refreshPreview();
|
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() {
|
function onCustomResInput() {
|
||||||
refreshExportHint();
|
refreshExportHint();
|
||||||
refreshPreview();
|
refreshPreview();
|
||||||
@@ -778,12 +800,13 @@ function exportCurrent(prefix) {
|
|||||||
}).catch(err => alert(err.message));
|
}).catch(err => alert(err.message));
|
||||||
}
|
}
|
||||||
|
|
||||||
// 导出分辨率提示
|
// 导出分辨率提示 + 折叠栏摘要
|
||||||
function refreshExportHint() {
|
function refreshExportHint() {
|
||||||
const { w, h } = getResolution();
|
const { w, h } = getResolution();
|
||||||
const hint = document.getElementById('exportResHint');
|
const hint = document.getElementById('exportResHint');
|
||||||
if (!hint) return;
|
if (hint) hint.textContent = w > 0 && h > 0 ? `导出分辨率:${w} × ${h}(原图居中缩放)` : '导出分辨率:原始大小';
|
||||||
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>
|
</div>
|
||||||
|
|
||||||
<!-- 导出设置 + 按钮 -->
|
<!-- 导出设置 + 按钮(默认折叠) -->
|
||||||
<div class="panel-section" id="exportSection">
|
<div class="panel-section" id="exportSection">
|
||||||
<h2>📤 导出设置</h2>
|
<div class="export-header">
|
||||||
|
<div class="export-header-main" onclick="toggleExportSettings()" title="点击展开/折叠">
|
||||||
<div class="config-group">
|
<h2>📤 导出设置</h2>
|
||||||
<label>分辨率</label>
|
<span class="export-summary" id="exportSummary">原始大小</span>
|
||||||
<select id="exportPreset" onchange="onExportPresetChange()">
|
<span class="export-toggle" id="exportToggle">▸</span>
|
||||||
<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>
|
</div>
|
||||||
|
<button class="btn btn-success btn-sm" onclick="exportImage('png')">📥 下载</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="config-group">
|
<div id="exportSettingsBody" class="export-settings-body" style="display:none;">
|
||||||
<label>历史分辨率(最近5个)</label>
|
<div class="config-group">
|
||||||
<select id="exportHistory" onchange="onHistorySelect()">
|
<label>分辨率</label>
|
||||||
<option value="">— 暂无历史 —</option>
|
<select id="exportPreset" onchange="onExportPresetChange()">
|
||||||
</select>
|
<option value="original">原始大小</option>
|
||||||
</div>
|
<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">
|
<div class="config-group" id="customResGroup" style="display:none;">
|
||||||
<label>文件名</label>
|
<label>自定义分辨率(宽 × 高)</label>
|
||||||
<input type="text" id="exportFilename" placeholder="留空则按日期时间自动命名">
|
<div class="res-input-row">
|
||||||
<p class="hint-text" id="exportResHint"></p>
|
<input type="number" id="customWidth" min="1" max="8192" placeholder="宽" oninput="onCustomResInput()">
|
||||||
</div>
|
<span class="res-times">×</span>
|
||||||
|
<input type="number" id="customHeight" min="1" max="8192" placeholder="高" oninput="onCustomResInput()">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="btn-group">
|
<div class="config-group">
|
||||||
<button class="btn btn-success" onclick="exportImage('png')">📥 下载图片</button>
|
<label>历史分辨率(最近5个)</label>
|
||||||
<button class="btn btn-success" id="btnExportSvg" onclick="exportImage('svg')">📥 导出SVG</button>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -882,7 +882,7 @@ app.get('/api/health', (req, res) => {
|
|||||||
res.json({
|
res.json({
|
||||||
status: 'ok',
|
status: 'ok',
|
||||||
service: 'data-chart-tool',
|
service: 'data-chart-tool',
|
||||||
version: '1.10.0',
|
version: '1.10.1',
|
||||||
endpoints: {
|
endpoints: {
|
||||||
'POST /api/chart': '生成图表图片(JSON body)',
|
'POST /api/chart': '生成图表图片(JSON body)',
|
||||||
'GET /api/chart': '生成图表图片(URL 参数)',
|
'GET /api/chart': '生成图表图片(URL 参数)',
|
||||||
@@ -897,7 +897,7 @@ app.get('/api/health', (req, res) => {
|
|||||||
app.get('/api/docs', (req, res) => {
|
app.get('/api/docs', (req, res) => {
|
||||||
res.json({
|
res.json({
|
||||||
name: '数据可视化图表生成器 API',
|
name: '数据可视化图表生成器 API',
|
||||||
version: '1.10.0',
|
version: '1.10.1',
|
||||||
endpoints: [
|
endpoints: [
|
||||||
{
|
{
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
|
|||||||
@@ -671,3 +671,54 @@ input[type="range"]::-moz-range-thumb {
|
|||||||
padding: 1px 8px;
|
padding: 1px 8px;
|
||||||
font-weight: 600;
|
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