fix: v1.1.2 — 设置页改版：解释 SSH 账号为何不能自动建库 + 排版优化

- 顶部新增提示横幅：当前账号无 Token 时说明「GitHub 创建仓库接口只认 Token 认证，SSH 私钥只能推已存在的仓库」，并给出「去添加 Token」入口 - 账号表格：「不支持」改为「需 Token」徽章（带悬停说明），推送方式改用徽章区分（Token·HTTPS / SSH 私钥），自动建库显示私有/公开徽章 - 每个 SSH 账号行新增「添加 Token」按钮：一键预填添加表单并聚焦 - 排版优化：表单加字段标签、开关/间隔收进选项框、表格列宽/悬停/操作列对齐 - manifest 1.1.1 → 1.1.2
2026-10-13 19:50:46 +08:00
parent 6661354bfa
commit 7260f402d3
2 changed files with 101 additions and 43 deletions
@@ -660,6 +660,32 @@ pre{background:#0d1117;color:#c9d1d9;border-radius:10px;padding:14px;font-size:1
 input[type=checkbox]{accent-color:#7c3aed;cursor:pointer}
 .addrow input[type=password]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.5px}
 td .pill{font-size:12px}
+/* ---------- 设置页 ---------- */
+h2 .h2sub{font-size:12px;font-weight:400;color:#8a919e;margin-left:10px}
+.banner{border-radius:10px;padding:12px 16px;font-size:13px;line-height:1.75;margin-bottom:14px;display:flex;gap:10px;align-items:flex-start}
+.banner.warn{background:#fffaeb;border:1px solid #fec84b;color:#92400e}
+.banner .ic{font-size:16px;line-height:1.5;flex:none}
+.badge{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap;line-height:1.5}
+.badge.b-ok{background:#e3f5e9;color:#0a7d34}
+.badge.b-warn{background:#fef0c7;color:#b45309}
+.badge.b-mute{background:#f0f2f5;color:#646a73}
+.badge.b-info{background:#e8f0fe;color:#1f6feb}
+.flabel{display:block;font-size:13px;font-weight:600;color:#374151;margin:16px 0 6px}
+.flabel:first-child{margin-top:0}
+.flabel .sub{font-weight:400;color:#8a919e;font-size:12px;margin-left:8px}
+.chk{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;padding:4px 0}
+.chk input{width:18px;height:18px}
+.optbox{background:#f6f8fa;border-radius:10px;padding:6px 16px;margin-top:16px}
+.optrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0}
+.optrow+.optrow{border-top:1px solid #eef0f3}
+.opttext{flex:1;min-width:200px}
+.opttext .swlabel{font-size:14px;font-weight:600}
+.opttext .swsub{font-size:12px;color:#646a73;margin-top:2px;line-height:1.6}
+.numin{flex:none;width:110px;border:1px solid #d0d5dd;border-radius:10px;padding:10px 12px;font-size:14px;outline:none;text-align:center}
+.numin:focus{border-color:#7c3aed}
+table.hover tbody tr:hover{background:#f8fafc}
+td.ops{white-space:nowrap}
+td.ops button,td.ops .pill{margin:2px 4px 2px 0}
 /* ---------- 窄屏（手机 / 飞牛桌面小窗口）：表格转卡片 ---------- */
@media (max-width:760px){
  .wrap{padding:14px 10px 40px}
@@ -899,30 +925,30 @@ refresh();setInterval(refresh,5000);

 PAGE_SETTINGS = """
  <div class="card">
-    <h2>GitHub 账号（推送目标）</h2>
+    <h2>GitHub 账号<span class="h2sub">推送目标 · 可添加多个，随时切换</span></h2>
+    <div id="accBanner"></div>
    <div class="tablewrap">
-    <table class="resp">
-      <thead><tr><th>备注</th><th>GitHub 用户名</th><th>Token</th><th>推送方式</th><th>新建仓库</th><th>操作</th></tr></thead>
+    <table class="resp hover">
+      <colgroup><col style="width:15%"><col style="width:21%"><col style="width:15%"><col style="width:14%"><col style="width:12%"><col style="width:23%"></colgroup>
+      <thead><tr><th>备注</th><th>GitHub 用户名</th><th>Token</th><th>推送方式</th><th>自动建库</th><th>操作</th></tr></thead>
      <tbody id="tbAcc"></tbody>
    </table>
    </div>
-    <div class="tip">切换账号后，所有项目改推到该账号名下；每个账号独立记录同步进度，切回原账号不会重复推送。无 Token 的旧账号通过 SSH 私钥推送，无法自动创建仓库。</div>
+    <div class="tip">切换账号后，所有项目改推到该账号名下；每个账号独立记录同步进度，切回原账号不会重复推送。</div>
  </div>
  <div class="card">
-    <h2>添加 / 更新 GitHub 账号</h2>
-    <div class="addrow">
-      <input id="accLabel" placeholder="备注名（如：我的主账号）" style="max-width:220px">
-      <input id="accUser" placeholder="GitHub 用户名（留空则按 Token 自动识别）" style="max-width:300px">
+    <h2>添加 / 更新 GitHub 账号<span class="h2sub">Token 验证通过后自动识别用户名</span></h2>
+    <label class="flabel">备注名<span class="sub">方便自己识别，可留空</span></label>
+    <div class="addrow"><input id="accLabel" placeholder="如：我的主账号"></div>
+    <label class="flabel">GitHub 用户名<span class="sub">留空则按 Token 自动识别</span></label>
+    <div class="addrow"><input id="accUser" placeholder="如 cbb2625274797"></div>
+    <label class="flabel">Personal Access Token</label>
+    <div class="addrow"><input id="accToken" type="password" placeholder="ghp_ 开头"></div>
+    <label class="flabel">自动创建的仓库设为</label>
+    <div class="addrow" style="align-items:center">
+      <label class="chk"><input type="checkbox" id="accPrivate" checked> 私有（推荐）</label>
    </div>
-    <div class="addrow" style="margin-top:10px">
-      <input id="accToken" type="password" placeholder="Personal Access Token（ghp_ 开头）">
-    </div>
-    <div class="addrow" style="margin-top:10px;align-items:center">
-      <label style="display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer">
-        <input type="checkbox" id="accPrivate" checked style="width:18px;height:18px"> 自动创建的仓库设为私有
-      </label>
-    </div>
-    <div class="btns" style="margin-top:12px">
+    <div class="btns" style="margin-top:14px">
      <button class="b-add" id="btnAccAdd" onclick="addAccount()">✓ 验证并添加</button>
    </div>
    <div class="msg" id="msgAcc"></div>
@@ -935,24 +961,33 @@ PAGE_SETTINGS = """
  </div>
  <div class="card">
    <h2>Gitea 与同步设置</h2>
+    <label class="flabel">Gitea 用户名<span class="sub">面板按此用户名列出你可同步的仓库</span></label>
    <div class="addrow">
-      <input id="giteaUser" placeholder="Gitea 用户名" style="max-width:300px">
-      <input id="giteaPass" type="password" placeholder="Gitea 密码（私有仓库必填）" style="max-width:300px">
+      <input id="giteaUser" placeholder="cbb">
      <button class="b-mini" id="btnGitea" onclick="saveGitea()">保存</button>
    </div>
-    <div class="tip">面板按此用户名列出你可添加同步的 Gitea 仓库（本地 Gitea 地址 __GITEAURL__）。
-    密码只保存在 NAS 本地，仅用于读取私有仓库；仓库全部公开可留空，留空保存可清除已存密码。</div>
-    <div style="margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap">
-      <label class="switch"><input type="checkbox" id="swAuto" onchange="saveAuto()"><span class="slider"></span></label>
-      <div>
-        <div class="swlabel" style="font-size:14px">GitHub 上不存在同名仓库时自动创建</div>
-        <div class="swsub">需要当前账号已配置 Token；关闭后添加不存在的仓库会提示手动创建</div>
-      </div>
+    <label class="flabel">Gitea 密码<span class="sub">仅仓库为私有时需要；留空保存可清除</span></label>
+    <div class="addrow">
+      <input id="giteaPass" type="password" placeholder="未设置">
+      <button class="b-mini" onclick="saveGitea()">保存</button>
    </div>
-    <div class="addrow" style="margin-top:16px;align-items:center">
-      <input id="syncInterval" type="number" min="5" max="86400" step="1" placeholder="同步间隔（秒）" style="max-width:200px">
-      <button class="b-mini" id="btnInterval" onclick="saveInterval()">保存间隔</button>
-      <span class="tip" style="margin:0" id="intervalTip"></span>
+    <div class="tip">本地 Gitea 地址 __GITEAURL__；密码只保存在 NAS 本地，仅用于读取私有仓库。</div>
+    <div class="optbox">
+      <div class="optrow">
+        <label class="switch"><input type="checkbox" id="swAuto" onchange="saveAuto()"><span class="slider"></span></label>
+        <div class="opttext">
+          <div class="swlabel">GitHub 上不存在同名仓库时自动创建</div>
+          <div class="swsub">需要当前账号已配置 Token；关闭后添加不存在的仓库会提示手动创建</div>
+        </div>
+      </div>
+      <div class="optrow">
+        <input id="syncInterval" type="number" min="5" max="86400" step="1" class="numin">
+        <button class="b-mini" id="btnInterval" onclick="saveInterval()">保存间隔</button>
+        <div class="opttext">
+          <div class="swlabel">同步间隔（秒）</div>
+          <div class="swsub" id="intervalTip"></div>
+        </div>
+      </div>
    </div>
    <div class="msg" id="msgCfg"></div>
  </div>
@@ -967,26 +1002,49 @@ async function refresh(){
    document.getElementById('giteaPass').placeholder=s.gitea_pass_set
      ?'Gitea 密码（已设置；留空保存可清除）':'Gitea 密码（私有仓库必填）';
    document.getElementById('swAuto').checked=!!s.auto_create;
-    document.getElementById('syncInterval').value=s.interval||10;
-    document.getElementById('syncInterval').min=s.min_interval||5;
-    document.getElementById('syncInterval').max=s.max_interval||86400;
+    const iv=document.getElementById('syncInterval');
+    iv.value=s.interval||10;iv.min=s.min_interval||5;iv.max=s.max_interval||86400;
    document.getElementById('intervalTip').textContent='每隔 '+fmtInterval(s.interval||10)+' 检查一次 Gitea 是否有新提交（'+(s.min_interval||5)+'~'+(s.max_interval||86400)+' 秒），改完立即生效';
+    const cur=(s.accounts||[]).find(a=>a.id===s.active);
+    // 当前账号无 Token 时，顶部提示为什么不能自动建库、怎么解锁
+    document.getElementById('accBanner').innerHTML=(cur&&!cur.has_token)
+      ?`<div class="banner warn"><span class="ic">⚠️</span><div><b>当前账号「${esc(cur.label)}」通过 SSH 私钥推送，暂时无法自动创建仓库。</b>
+        <br>GitHub 的创建仓库接口只认 Token 认证，SSH 私钥只能推送<b>已存在</b>的仓库——这是 GitHub 的限制，不是软件没做。
+        <br>给这个账号配上 Token 即可解锁（推送也会改走 HTTPS，更稳更快）：
+        <button class="b-mini" style="margin-left:6px" onclick="upgradeAcc('${esc(cur.id)}','${esc(cur.gh_user)}')">去添加 Token</button></div></div>`
+      :'';
    document.getElementById('tbAcc').innerHTML=(s.accounts||[]).map(a=>{
-      const cur=a.id===s.active;
-      const ops=cur
-        ? '<span class="pill on" style="font-size:12px">当前使用</span>'
+      const isCur=a.id===s.active;
+      const ops=isCur
+        ? '<span class="pill on">当前使用</span>'
        : `<button class="b-mini" onclick="switchAcc('${esc(a.id)}')">切换到此账号</button>`;
      const verify=a.has_token?`<button class="b-mini" onclick="verifyAcc('${esc(a.id)}')">验证</button>`:'';
-      const del=a.has_token||(s.accounts||[]).length>1
+      const upgrade=a.has_token?'':`<button class="b-mini" onclick="upgradeAcc('${esc(a.id)}','${esc(a.gh_user)}')">添加 Token</button>`;
+      const del=(a.has_token||(s.accounts||[]).length>1)
        ? `<button class="b-del" onclick="delAcc('${esc(a.id)}')">删除</button>`:'';
-      return `<tr><td data-label="备注"><b>${esc(a.label)}</b></td><td data-label="用户名">${esc(a.gh_user)}</td>`
+      const method=a.has_token
+        ?'<span class="badge b-ok">Token · HTTPS</span>'
+        :'<span class="badge b-mute">SSH 私钥</span>';
+      const create=a.has_token
+        ?`<span class="badge ${a.private?'b-ok':'b-info'}">${a.private?'私有':'公开'}</span>`
+        :'<span class="badge b-warn" title="GitHub 创建仓库的接口只能用 Token 认证；添加 Token 后即可自动创建">需 Token</span>';
+      return `<tr><td data-label="备注"><b>${esc(a.label)}</b></td><td data-label="用户名" class="mono">${esc(a.gh_user)}</td>`
        +`<td data-label="Token" class="mono">${esc(a.token||'（未配置）')}</td>`
-        +`<td data-label="推送方式">${a.has_token?'Token（HTTPS）':'SSH 私钥'}</td>`
-        +`<td data-label="新建仓库">${a.has_token?(a.private?'私有':'公开'):'不支持'}</td>`
-        +`<td data-label="操作" style="white-space:nowrap">${ops} ${verify} ${del}</td></tr>`;
+        +`<td data-label="推送方式">${method}</td>`
+        +`<td data-label="自动建库">${create}</td>`
+        +`<td data-label="操作" class="ops">${ops} ${verify} ${upgrade} ${del}</td></tr>`;
    }).join('')||'<tr><td colspan="6" style="color:#646a73">暂无账号</td></tr>';
  }catch(e){showMsg('msgAcc','刷新失败: '+e,false)}
 }
+function upgradeAcc(id,ghUser){
+  // 预填「添加/更新账号」表单并滚动过去，引导给旧账号补 Token
+  document.getElementById('accLabel').value='';
+  document.getElementById('accUser').value=ghUser||'';
+  document.getElementById('accToken').value='';
+  document.getElementById('accToken').focus();
+  document.getElementById('accToken').scrollIntoView({behavior:'smooth',block:'center'});
+  showMsg('msgAcc','已为你填好用户名 '+ghUser+'，把 Token 粘贴进去点「验证并添加」即可（会更新原账号）',true);
+}
 async function addAccount(){
  const label=document.getElementById('accLabel').value.trim();
  const gh_user=document.getElementById('accUser').value.trim();
@@ -1,5 +1,5 @@
 appname               = GiteaHubSync
-version               = 1.1.1
+version               = 1.1.2
 display_name          = Gitea→GitHub 同步助手
 desc                  = 每次推送到飞牛 Gitea 的代码，10 秒内自动镜像到 GitHub 的 7 个私有仓库。内置控制面板：自动同步开关、立即同步、仓库状态、同步日志，一键打开 Gitea。数据全部保存在 NAS 本地。
 platform              = all