From dcd53b2691bd9c4b4198b08592dbfedd15eb665e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E8=88=AA=E5=AE=87?= <3364451258@qq.com>
Date: Thu, 18 Jun 2026 11:52:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20web=20=E7=AB=AF=20GUI=20=E9=A3=8E?=
 =?UTF-8?q?=E6=A0=BC=E7=95=8C=E9=9D=A2=20+=20SVG=20=E6=94=AF=E6=8C=81=20+?=
 =?UTF-8?q?=20=E9=A2=84=E8=A7=88=E6=B8=85=E6=99=B0=E5=BA=A6=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- index.html: 完整复刻 GUI 三栏布局（模式/预览/设置）
  7 种编码模式切换,实时防抖预览,下载 PNG/SVG/复制
- main.rs: API 新增 fmt=svg 参数,预览用 PNG size=8 避免拉伸模糊
- Dockerfile: 多阶段构建(alpine),部署就绪

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/main.rs              |  20 ++-
 web/src/templates/index.html | 335 +++++++++++++++++++++++++----------
 2 files changed, 253 insertions(+), 102 deletions(-)

diff --git a/web/src/main.rs b/web/src/main.rs
index 6331355..57ad21b 100644
--- a/web/src/main.rs
+++ b/web/src/main.rs
@@ -19,6 +19,9 @@ struct QrParams {
     margin: u8,
     #[serde(default = "default_size")]
     size: u8,
+    /// fmt=svg 返回 SVG，否则返回 PNG
+    #[serde(default)]
+    fmt: String,
 }
 
 fn default_level() -> String { "M".into() }
@@ -40,7 +43,7 @@ async fn index() -> Html<&'static str> {
     Html(include_str!("templates/index.html"))
 }
 
-/// QR 码生成 API → PNG 图片
+/// QR 码生成 API → PNG 或 SVG
 async fn generate_qr(Query(params): Query<QrParams>) -> impl IntoResponse {
     let level = match parse_level(&params.level) {
         Ok(l) => l,
@@ -58,12 +61,15 @@ async fn generate_qr(Query(params): Query<QrParams>) -> impl IntoResponse {
         Err(e) => return (StatusCode::BAD_REQUEST, e).into_response(),
     };
 
-    let png = match qr.to_png_bytes(params.size) {
-        Ok(b) => b,
-        Err(e) => return (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()).into_response(),
-    };
-
-    ([(header::CONTENT_TYPE, "image/png")], png).into_response()
+    if params.fmt == "svg" {
+        let svg = qr.to_svg();
+        ([(header::CONTENT_TYPE, "image/svg+xml")], svg).into_response()
+    } else {
+        match qr.to_png_bytes(params.size) {
+            Ok(b) => ([(header::CONTENT_TYPE, "image/png")], b).into_response(),
+            Err(e) => (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()).into_response(),
+        }
+    }
 }
 
 #[tokio::main]
diff --git a/web/src/templates/index.html b/web/src/templates/index.html
index a002824..4684a35 100644
--- a/web/src/templates/index.html
+++ b/web/src/templates/index.html
@@ -6,117 +6,262 @@
 <title>QRGen Web</title>
 <style>
   :root { color-scheme: light dark; }
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    min-height: 100vh; display: flex; align-items: center; justify-content: center;
-    background: #f5f5f5;
-  }
-  @media (prefers-color-scheme: dark) { body { background: #1a1a2e; color: #e0e0e0; } }
-  .card {
-    background: #fff; border-radius: 16px; padding: 32px;
-    box-shadow: 0 2px 16px rgba(0,0,0,.08); max-width: 420px; width: 90%;
-    display: flex; flex-direction: column; gap: 16px;
-  }
-  @media (prefers-color-scheme: dark) { .card { background: #16213e; } }
-  h1 { font-size: 20px; font-weight: 600; text-align: center; }
-  textarea, input, select {
-    width: 100%; padding: 10px 12px; border: 1px solid #ddd;
-    border-radius: 8px; font-size: 14px; background: #fafafa;
-    font-family: inherit;
-  }
-  @media (prefers-color-scheme: dark) {
-    textarea, input, select { background: #0f3460; border-color: #1a1a2e; color: #e0e0e0; }
-  }
-  textarea { resize: vertical; min-height: 80px; }
-  .row { display: flex; gap: 12px; align-items: center; }
-  .row label { font-size: 13px; white-space: nowrap; min-width: 60px; }
-  button {
-    padding: 10px 24px; border: none; border-radius: 8px;
-    background: #2563eb; color: #fff; font-size: 14px; font-weight: 500;
-    cursor: pointer; transition: background .15s;
-  }
-  button:hover { background: #1d4ed8; }
-  button:disabled { opacity: .4; cursor: not-allowed; }
-  .preview {
-    display: flex; justify-content: center; padding: 16px;
-    background: #fff; border-radius: 12px; min-height: 200px;
-    align-items: center;
-  }
-  .preview img { max-width: 240px; }
-  .info { font-size: 12px; color: #888; text-align: center; }
-  .actions { display: flex; gap: 8px; }
-  .actions button { flex: 1; }
+  *{margin:0;padding:0;box-sizing:border-box}
+  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;height:100vh;display:flex;flex-direction:column;background:#f3f4f6;overflow:hidden}
+  @media(prefers-color-scheme:dark){body{background:#0a0a0f;color:#e0e0e0}}
+
+  /* 标题栏 */
+  .titlebar{height:40px;display:flex;align-items:center;padding:0 16px;background:rgba(255,255,255,.8);border-bottom:1px solid #e5e7eb;backdrop-filter:blur(20px);font-size:13px;font-weight:600;color:#374151}
+  @media(prefers-color-scheme:dark){.titlebar{background:rgba(15,15,25,.8);border-color:#1e1e30;color:#d1d5db}}
+
+  /* 主体三栏 */
+  .main{flex:1;display:flex;overflow:hidden}
+
+  /* 左栏 — 模式 */
+  .sidebar-l{width:160px;display:flex;flex-direction:column;padding:8px;gap:2px;background:rgba(255,255,255,.5);border-right:1px solid #e5e7eb;overflow-y:auto}
+  @media(prefers-color-scheme:dark){.sidebar-l{background:rgba(15,15,25,.5);border-color:#1e1e30}}
+  .sidebar-l .label{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.5px;padding:4px 8px;margin-bottom:4px}
+  .sidebar-l button{all:unset;display:block;padding:8px 12px;border-radius:8px;font-size:13px;cursor:pointer;transition:all .15s;color:#4b5563}
+  @media(prefers-color-scheme:dark){.sidebar-l button{color:#9ca3af}}
+  .sidebar-l button:hover{background:#f3f4f6}
+  @media(prefers-color-scheme:dark){.sidebar-l button:hover{background:#1e1e30}}
+  .sidebar-l button.active{background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.25)}
+
+  /* 中栏 — 预览 */
+  .center{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:16px}
+  .preview-box{width:240px;height:240px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
+  .preview-box img{width:216px;height:216px}
+  .preview-box .placeholder{color:#9ca3af;font-size:13px}
+  .preview-box .loading{color:#9ca3af;font-size:13px;animation:pulse 1.5s infinite}
+  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
+  .preview-info{display:flex;gap:12px;font-size:11px;color:#9ca3af}
+
+  /* 右栏 — 设置 */
+  .sidebar-r{width:200px;display:flex;flex-direction:column;padding:12px;gap:12px;background:rgba(255,255,255,.5);border-left:1px solid #e5e7eb;overflow-y:auto}
+  @media(prefers-color-scheme:dark){.sidebar-r{background:rgba(15,15,25,.5);border-color:#1e1e30}}
+  .sidebar-r .label{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.5px}
+  .sidebar-r select,.sidebar-r input[type=range]{width:100%;margin-top:4px;padding:6px 8px;border:1px solid #d1d5db;border-radius:6px;font-size:12px;background:#fff;outline:none}
+  @media(prefers-color-scheme:dark){.sidebar-r select,.sidebar-r input[type=range]{background:#1a1a2e;border-color:#2a2a40;color:#d1d5db}}
+  .sidebar-r select:focus,.sidebar-r input:focus{ring:2px solid rgba(37,99,235,.3)}
+  .sidebar-r .slider-row{font-size:11px;color:#6b7280}
+  .sidebar-r button{width:100%;padding:8px;border:none;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;color:#fff;transition:all .15s}
+  .sidebar-r button:disabled{opacity:.35;cursor:not-allowed}
+  .btn-copy{background:#2563eb}.btn-copy:hover{background:#1d4ed8}
+  .btn-png{background:#16a34a}.btn-png:hover{background:#15803d}
+  .btn-svg{background:#9333ea}.btn-svg:hover{background:#7e22ce}
+
+  /* 底部输入 */
+  .bottom{height:88px;border-top:1px solid #e5e7eb;background:rgba(255,255,255,.8);backdrop-filter:blur(20px);padding:12px 16px;display:flex;align-items:center;gap:8px}
+  @media(prefers-color-scheme:dark){.bottom{background:rgba(15,15,25,.8);border-color:#1e1e30}}
+  .bottom input,.bottom textarea,.bottom select{flex:1;min-width:0;padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:13px;outline:none;background:#fafafa;font-family:inherit}
+  @media(prefers-color-scheme:dark){.bottom input,.bottom textarea,.bottom select{background:#1a1a2e;border-color:#2a2a40;color:#d1d5db}}
+  .bottom textarea{resize:none;height:100%}
+  .bottom input:focus,.bottom textarea:focus{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.15)}
+  .bottom input[type=checkbox]{flex:none;width:auto}
+  .bottom .wifi-check{display:flex;align-items:center;gap:4px;font-size:12px;color:#6b7280;white-space:nowrap}
+  .error{font-size:11px;color:#ef4444;background:rgba(239,68,68,.1);padding:6px 8px;border-radius:6px}
 </style>
 </head>
 <body>
-<div class="card">
-  <h1>QRGen Web</h1>
-  <textarea id="text" placeholder="输入要编码的内容…"></textarea>
-  <div class="row">
-    <label>纠错级别</label>
-    <select id="level">
-      <option value="L">L — 7%</option>
-      <option value="M" selected>M — 15%</option>
-      <option value="Q">Q — 25%</option>
-      <option value="H">H — 30%</option>
-    </select>
-    <label>边距</label>
-    <input id="margin" type="number" value="4" min="1" max="20" style="width:64px">
+
+<!-- 标题栏 -->
+<div class="titlebar">QRGen</div>
+
+<!-- 主体 -->
+<div class="main">
+  <!-- 左栏 — 编码模式 -->
+  <div class="sidebar-l">
+    <div class="label">编码模式</div>
+    <button class="active" data-mode="text">📝 文本</button>
+    <button data-mode="url">🔗 URL</button>
+    <button data-mode="wifi">📶 WiFi</button>
+    <button data-mode="vcard">👤 名片</button>
+    <button data-mode="email">📧 Email</button>
+    <button data-mode="phone">📞 电话</button>
+    <button data-mode="sms">💬 SMS</button>
   </div>
-  <div class="row">
-    <label>模块大小</label>
-    <input id="size" type="range" value="8" min="2" max="20" oninput="document.getElementById('sizeVal').textContent=this.value">
-    <span id="sizeVal" style="font-size:13px">8</span>px
+
+  <!-- 中栏 — QR 预览 -->
+  <div class="center">
+    <div class="preview-box" id="preview">
+      <span class="placeholder" id="previewPlaceholder">输入内容生成 QR 码</span>
+      <img id="previewImg" alt="QR" style="display:none">
+      <span class="loading" id="previewLoading" style="display:none">生成中…</span>
+    </div>
+    <div class="preview-info" id="previewInfo"></div>
   </div>
-  <div class="preview" id="preview">
-    <span style="color:#999">输入内容生成 QR 码</span>
-  </div>
-  <div class="info" id="info"></div>
-  <div class="actions">
-    <button id="btnDownload" disabled>下载 PNG</button>
-    <button id="btnCopy" disabled>复制链接</button>
+
+  <!-- 右栏 — 设置 + 导出 -->
+  <div class="sidebar-r">
+    <div class="label">导出选项</div>
+    <div>
+      <div class="slider-row">纠错级别</div>
+      <select id="cfgLevel">
+        <option value="L">L — 7%</option>
+        <option value="M" selected>M — 15%</option>
+        <option value="Q">Q — 25%</option>
+        <option value="H">H — 30%</option>
+      </select>
+    </div>
+    <div>
+      <div class="slider-row">模块大小: <span id="sizeVal">8</span>px</div>
+      <input type="range" id="cfgSize" min="2" max="20" value="8">
+    </div>
+    <div>
+      <div class="slider-row">边距: <span id="marginVal">4</span></div>
+      <input type="range" id="cfgMargin" min="1" max="10" value="4">
+    </div>
+    <div id="errorBox"></div>
+    <button class="btn-copy" id="btnCopy" disabled>复制 SVG</button>
+    <button class="btn-png" id="btnPng" disabled>导出 PNG</button>
+    <button class="btn-svg" id="btnSvg" disabled>导出 SVG</button>
   </div>
 </div>
 
+<!-- 底部输入区 -->
+<div class="bottom" id="bottomInput"></div>
+
 <script>
-  const textEl   = document.getElementById('text');
-  const levelEl  = document.getElementById('level');
-  const marginEl = document.getElementById('margin');
-  const sizeEl   = document.getElementById('size');
-  const preview  = document.getElementById('preview');
-  const info     = document.getElementById('info');
-  let timer, currentUrl = '';
+// ── 状态 ──
+let mode = 'text';
+let cfg = { level:'M', margin:4, size:8 };
+let currentPngUrl = '';
 
-  function update() {
-    const text = textEl.value.trim();
-    if (!text) { preview.innerHTML='<span style="color:#999">输入内容生成 QR 码</span>'; info.textContent=''; return; }
+// ── 每个模式下构建 QR 编码文本 ──
+function buildQrText() {
+  switch (mode) {
+    case 'url':   return docVal('url') || '';
+    case 'wifi':  return (docVal('ssid') ? `WIFI:T:${docVal('enc','WPA')};S:${docVal('ssid')};P:${docVal('pwd')};${docVal('hidden')==='1'?'H:true;':''};` : '');
+    case 'vcard': return `BEGIN:VCARD\nVERSION:3.0\nFN:${docVal('name')}\nTEL:${docVal('phone')}\nEMAIL:${docVal('email')}\nORG:${docVal('org')}\nADR:${docVal('addr')}\nEND:VCARD`;
+    case 'email': return `mailto:${docVal('to')}?subject=${encodeURIComponent(docVal('sub'))}&body=${encodeURIComponent(docVal('body'))}`;
+    case 'phone': return `tel:${docVal('num')}`;
+    case 'sms':   return `smsto:${docVal('snum')}:${docVal('msg')}`;
+    default:      return docVal('text') || '';
+  }
+}
+function docVal(id,d){ const el=document.getElementById('f_'+id); return el ? (el.type==='checkbox' ? el.checked : el.value) : (d||''); }
 
-    clearTimeout(timer);
-    timer = setTimeout(async () => {
-      const p = new URLSearchParams({ text, level: levelEl.value, margin: marginEl.value, size: sizeEl.value });
-      currentUrl = `/api/qr?${p}`;
-      preview.innerHTML = `<img src="${currentUrl}" alt="QR">`;
-      document.getElementById('btnDownload').disabled = false;
-      document.getElementById('btnCopy').disabled = false;
-      info.textContent = `${p.get('size')}px/模块 · ${p.get('margin')}px边距`;
-    }, 300);
+// ── 底部输入 — 模式表单 ──
+const MODE_FORMS = {
+  text:   '<textarea id="f_text" placeholder="输入任意文本…" class="flex:1" style="resize:none;height:100%"></textarea>',
+  url:    '<input id="f_url" type="url" placeholder="https://example.com" style="flex:1">',
+  wifi:   '<input id="f_ssid" placeholder="SSID" style="flex:1"><input id="f_pwd" type="password" placeholder="密码" style="flex:1"><select id="f_enc" style="flex:1"><option value="WPA">WPA/WPA2</option><option value="WEP">WEP</option><option value="nopass">无密码</option></select><label class="wifi-check"><input type="checkbox" id="f_hidden" value="1"> 隐藏</label>',
+  vcard:  '<input id="f_name" placeholder="姓名" style="flex:1"><input id="f_phone" placeholder="电话" style="flex:1"><input id="f_email" placeholder="邮箱" style="flex:1"><input id="f_org" placeholder="公司" style="flex:1"><input id="f_addr" placeholder="地址" style="flex:1">',
+  email:  '<input id="f_to" placeholder="收件人" style="flex:1"><input id="f_sub" placeholder="主题" style="flex:1"><input id="f_body" placeholder="正文" style="flex:2">',
+  phone:  '<input id="f_num" type="tel" placeholder="输入电话号码" style="flex:1">',
+  sms:    '<input id="f_snum" type="tel" placeholder="电话号码" style="flex:1"><input id="f_msg" placeholder="短信内容" style="flex:2">',
+};
+
+function renderBottom() {
+  document.getElementById('bottomInput').innerHTML = MODE_FORMS[mode] || MODE_FORMS.text;
+  bindInputs();
+}
+
+// ── 实时预览（防抖） ──
+let timer;
+function scheduleUpdate() {
+  clearTimeout(timer);
+  document.getElementById('previewLoading').style.display = 'block';
+  document.getElementById('previewImg').style.display = 'none';
+  document.getElementById('previewPlaceholder').style.display = 'none';
+  timer = setTimeout(doUpdate, 200);
+}
+
+function doUpdate() {
+  const text = buildQrText();
+  if (!text) {
+    document.getElementById('previewLoading').style.display = 'none';
+    document.getElementById('previewPlaceholder').style.display = 'block';
+    document.getElementById('previewInfo').textContent = '';
+    document.getElementById('btnCopy').disabled = true;
+    document.getElementById('btnPng').disabled = true;
+    document.getElementById('btnSvg').disabled = true;
+    currentPngUrl = '';
+    return;
   }
 
-  textEl.addEventListener('input', update);
-  levelEl.addEventListener('change', update);
-  marginEl.addEventListener('input', update);
-  sizeEl.addEventListener('input', update);
+  // 预览用 PNG（size=8, 清晰不拉伸），下载用用户选择的 size
+  const previewUrl = `/api/qr?text=${encodeURIComponent(text)}&level=${cfg.level}&margin=${cfg.margin}&size=8`;
+  currentPngUrl = `/api/qr?text=${encodeURIComponent(text)}&level=${cfg.level}&margin=${cfg.margin}&size=${cfg.size}`;
 
-  document.getElementById('btnDownload').onclick = () => {
-    if (currentUrl) { const a = document.createElement('a'); a.href = currentUrl; a.download = 'qrcode.png'; a.click(); }
+  const img = document.getElementById('previewImg');
+  img.onload = () => {
+    document.getElementById('previewLoading').style.display = 'none';
+    img.style.display = 'block';
   };
-  document.getElementById('btnCopy').onclick = async () => {
-    if (currentUrl) {
-      try { await navigator.clipboard.writeText(location.origin + currentUrl); alert('已复制'); }
-      catch { prompt('复制以下链接:', location.origin + currentUrl); }
-    }
+  img.onerror = () => {
+    document.getElementById('previewLoading').style.display = 'none';
+    document.getElementById('previewPlaceholder').style.display = 'block';
+    document.getElementById('previewPlaceholder').textContent = '编码失败';
   };
+  img.src = previewUrl;
+  document.getElementById('previewInfo').textContent = `${cfg.size}px/模块 · ${cfg.margin}px边距 · ${cfg.level}级`;
+  document.getElementById('btnCopy').disabled = false;
+  document.getElementById('btnPng').disabled = false;
+  document.getElementById('btnSvg').disabled = false;
+}
+
+// ── 事件绑定 ──
+function bindInputs() {
+  document.querySelectorAll('#bottomInput input, #bottomInput textarea, #bottomInput select').forEach(el => {
+    el.addEventListener('input', scheduleUpdate);
+  });
+  // URL 模式：失焦自动补 https://
+  const urlEl = document.getElementById('f_url');
+  if (urlEl) {
+    urlEl.addEventListener('blur', () => {
+      const v = urlEl.value.trim();
+      if (v && !/^https?:\/\//i.test(v)) { urlEl.value = 'https://' + v; scheduleUpdate(); }
+    });
+  }
+}
+
+// ── 模式切换 ──
+document.querySelectorAll('.sidebar-l button').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.sidebar-l button').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    mode = btn.dataset.mode;
+    renderBottom();
+    scheduleUpdate();
+  });
+});
+
+// ── 设置变更 ──
+['cfgLevel','cfgMargin','cfgSize'].forEach(id => {
+  const el = document.getElementById(id);
+  el.addEventListener('input', () => {
+    if (id === 'cfgLevel') cfg.level = el.value;
+    if (id === 'cfgMargin') { cfg.margin = +el.value; document.getElementById('marginVal').textContent = el.value; }
+    if (id === 'cfgSize')   { cfg.size   = +el.value; document.getElementById('sizeVal').textContent = el.value; }
+    scheduleUpdate();
+  });
+});
+
+// ── 导出按钮 ──
+document.getElementById('btnPng').onclick = () => {
+  if (currentPngUrl) { const a = document.createElement('a'); a.href = currentPngUrl; a.download = 'qrcode.png'; a.click(); }
+};
+document.getElementById('btnSvg').onclick = () => {
+  const text = buildQrText();
+  if (!text) return;
+  const url = `/api/qr?text=${encodeURIComponent(text)}&level=${cfg.level}&margin=${cfg.margin}&size=1&fmt=svg`;
+  const a = document.createElement('a'); a.href = url; a.download = 'qrcode.svg'; a.click();
+};
+document.getElementById('btnCopy').onclick = async () => {
+  try {
+    const resp = await fetch(`/api/qr?text=${encodeURIComponent(buildQrText())}&level=${cfg.level}&margin=${cfg.margin}&size=1&fmt=svg`);
+    const svg = await resp.text();
+    await navigator.clipboard.writeText(svg);
+  } catch(e) {
+    const err = document.getElementById('errorBox');
+    err.innerHTML = `<div class="error">复制失败</div>`;
+    setTimeout(()=>err.innerHTML='',2000);
+  }
+};
+
+// ── 启动 ──
+renderBottom();
 </script>
 </body>
 </html>