hz4th_coder/data-chart-tool
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 导出设置支持展开/折叠（默认折叠）+ 恢复默认按钮

Browse Source 
- 导出设置面板默认折叠，点击标题栏展开/收起，折叠栏显示当前分辨率摘要
- 折叠栏保留快速下载按钮，始终可用
- 新增🔄恢复默认按钮：一键重置分辨率/自定义/文件名/历史选择到初始状态（历史记录保留）
This commit is contained in:
hz4th_coder
2026-08-19 12:50:26 +08:00
parent 9a8cbb125c
commit 51d3e09378
3 changed files with 121 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+44 -35
View File
@@ -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>