skill-forge-hub 1.1.0 → 1.3.0

package/prompt-pouch/resources/reference.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="sf-template" content="prompt-pouch@2">
+<meta name="sf-template" content="prompt-pouch@10">
 <meta name="pouch-id" content="REF-POUCH-0000">
 <title>锦囊 Prompt Pouch — 提示词管理台</title>
 <style>
@@ -200,12 +200,13 @@ header{
 /* 侧栏 */
 aside{ width:200px; flex:0 0 auto;
   display:flex; flex-direction:column;
-  position:sticky; top:80px; align-self:flex-start;
-  height:calc(100vh - 100px);
+  align-self:flex-start; /* 自然流式随页面整体滚动：说明卡完整展示，页面滚到底即可读完 */
 }
-/* 侧栏分组滚动区：收藏 + 分组局部滚动，分组下方紧跟「＋ 新建分组」，滚动流末尾附「锦囊用法」说明——滚动区占满「全部」与侧栏底缘之间的剩余屏幕高度（最大占满屏幕），说明被顶出首屏（滚到底可见）；窄滚动条 */
+/* 侧栏分组滚动区：收藏 + 分组局部滚动——滚动区最大高度 = 视口高度减去顶栏、「全部」行与底部「锦囊用法」说明卡（完整展示不裁剪），分组再多说明卡也完整可见；窄滚动条 */
 .nav-scroll{
-  flex:1 1 auto; min-height:0; overflow-y:auto;
+  flex:0 0 auto; min-height:0;
+  max-height:calc(100vh - 360px);
+  overflow-y:auto;
   margin:0 -4px 0 0; padding-right:4px;
   scrollbar-width:thin; scrollbar-color:var(--border) transparent;
 }
@@ -231,8 +232,8 @@ aside{ width:200px; flex:0 0 auto;
 }
 .nav-item.on .cnt{ color:var(--gold); background:var(--gold-dim); }
 .side-tip{
-  flex:0 0 auto;
-  margin:16px 4px 0 0; padding:12px 14px; border-radius:10px; /* margin-right 补偿 nav-scroll 负 margin（-4px）的右侧裁切，虚线边框完整不裁；滚动流末尾，分组多时被顶出首屏 */
+  flex:0 0 auto; /* 完整展示不裁剪：分组滚动区为其留出空间，侧栏随页面整体滚动即可读完 */
+  margin:12px 0 0 0; padding:12px 14px 14px; border-radius:10px;
   border:1px dashed var(--border); font-size:11px; line-height:1.9; color:var(--muted);
 }
 .side-tip b{ color:var(--gold); font-weight:700; }
@@ -246,13 +247,38 @@ main{ flex:1; min-width:0; }
   font-weight:900;
 }
 .bar .total{ font-size:12px; color:var(--muted); }
-.sort-box{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
-.sort-box select{
+.sort-box{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); position:relative; }
+.sort-sel{
+  display:flex; align-items:center; gap:7px;
   background:var(--panel2); border:1px solid var(--border); color:var(--text);
   font-family:inherit; font-size:12px; letter-spacing:1px;
-  border-radius:999px; padding:5px 12px; outline:none; cursor:pointer;
-}
-.sort-box select:focus{ border-color:var(--gold); }
+  border-radius:999px; padding:5px 13px; outline:none; cursor:pointer;
+  transition:border-color .15s ease;
+}
+.sort-sel:hover,.sort-sel.open{ border-color:var(--gold); }
+.sort-arrow{ font-size:9px; color:var(--gold); line-height:1; transition:transform .2s ease; }
+.sort-sel.open .sort-arrow{ transform:rotate(180deg); }
+.sort-menu{
+  position:absolute; top:calc(100% + 6px); right:0; z-index:130;
+  display:flex; flex-direction:column; gap:2px; min-width:136px;
+  background:var(--panel2); border:1px solid var(--border); border-radius:12px;
+  padding:5px; box-shadow:0 12px 32px rgba(0,0,0,.45);
+  animation:sortMenuIn .16s ease;
+}
+.sort-menu[hidden]{ display:none; }
+@keyframes sortMenuIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
+.sort-opt{
+  display:flex; align-items:center; gap:8px; width:100%;
+  background:transparent; border:none; border-radius:8px;
+  color:var(--text); font-family:inherit; font-size:12px; letter-spacing:1px;
+  padding:7px 10px; cursor:pointer; text-align:left;
+  transition:background .12s ease,color .12s ease;
+}
+.sort-opt:hover{ background:var(--gold-dim); color:var(--gold); }
+.sort-check{ width:14px; font-size:11px; color:var(--gold); opacity:0; flex:0 0 auto; }
+.sort-opt.on{ color:var(--gold); font-weight:600; }
+.sort-opt.on .sort-check{ opacity:1; }
+[data-theme="light"] .sort-menu{ box-shadow:0 10px 28px rgba(30,31,34,.16); }
 .sort-status{
   font-size:12px; color:var(--muted);
   display:flex; align-items:center; gap:10px;
@@ -449,6 +475,38 @@ mark.hl{ background:var(--gold-dim); color:var(--gold); border-radius:3px; paddi
   color:var(--muted); font-family:inherit; font-size:12px; line-height:1.7;
 }
 .fp-ops{ display:flex; justify-content:flex-end; gap:10px; }
+/* ============ 统一确认弹框（替代浏览器原生弹框） ============ */
+.cf-panel{
+  width:460px; max-width:92vw; max-height:82vh; display:flex; flex-direction:column;
+  background:linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
+  border:1px solid var(--border); border-radius:16px; padding:20px 22px;
+  box-shadow:0 20px 60px rgba(0,0,0,.5);
+  animation:cfPop .18s ease;
+}
+@keyframes cfPop{ from{ transform:translateY(10px) scale(.97); opacity:0; } to{ transform:none; opacity:1; } }
+.cf-title{
+  font-size:15px; font-weight:900; letter-spacing:1px; margin-bottom:10px;
+  background:linear-gradient(90deg,var(--star),var(--gold));
+  -webkit-background-clip:text; background-clip:text; color:transparent;
+}
+.cf-body{
+  font-size:13px; line-height:1.9; color:var(--text); white-space:pre-wrap; word-break:break-word;
+  max-height:46vh; overflow-y:auto; padding-right:4px;
+}
+.cf-field{ display:flex; flex-direction:column; gap:4px; margin-top:12px; }
+.cf-field label{ font-size:12px; font-weight:700; color:var(--gold); letter-spacing:.5px; }
+.cf-field input{
+  width:100%; padding:9px 12px; border-radius:9px;
+  background:rgba(0,0,0,.25); border:1px solid var(--border); outline:none;
+  color:var(--text); font-family:inherit; font-size:13px; transition:border-color .18s ease, box-shadow .18s ease;
+}
+.cf-field input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-dim); }
+.cf-ops{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
+.btn.danger{
+  background:linear-gradient(135deg, #a63d34, #e06c5b); color:#fff;
+  font-weight:900; border:none;
+}
+.btn.danger:hover{ box-shadow:0 0 16px rgba(224,108,91,.45); }
 /* 备份与数据安全 */
 .bk-wrap{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
 .bk-status{ font-size:12px; color:var(--muted); letter-spacing:1px; }
@@ -521,9 +579,10 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
 }
 /* 页面直写：侧栏分组管理 / 提示词表单 / toast */
 .nav-add{
-  display:flex; align-items:center; justify-content:center; gap:6px;
-  margin-top:10px; padding:10px 14px; border-radius:10px; cursor:pointer;
-  font-size:13px; letter-spacing:1px; color:var(--gold);
+  flex:0 0 auto; /* 「全部」行右侧迷你 + 图标（新建分组），行内不占独立高度 */
+  width:22px; height:22px; margin-left:6px;
+  display:flex; align-items:center; justify-content:center;
+  border-radius:6px; cursor:pointer; font-size:14px; line-height:1; color:var(--gold);
   border:1px dashed var(--border); background:var(--gold-dim);
   transition:all .18s ease; user-select:none;
 }
@@ -636,13 +695,16 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
       <span class="tag-filter" id="tagFilterChip" style="display:none"><span class="tf-ico">🏷</span><b id="tagFilterName"></b><button class="tf-x" id="tagFilterClear" title="清除标签过滤">✕</button></span>
       <button class="btn primary" id="btnAddItem">＋ 新增提示词</button>
       <div class="sort-box">
-        <label for="sortSel">排序</label>
-        <select id="sortSel" title="切换卡片排序方式">
-          <option value="added">最新添加</option>
-          <option value="recent">最近使用</option>
-          <option value="freq">使用频率</option>
-          <option value="manual">手动顺序</option>
-        </select>
+        <label>排序</label>
+        <button class="sort-sel" id="sortSel" type="button" title="切换卡片排序方式">
+          <span class="sort-sel-txt" id="sortTxt">最新添加</span><span class="sort-arrow">▾</span>
+        </button>
+        <div class="sort-menu" id="sortMenu" hidden>
+          <button class="sort-opt on" data-mode="added" type="button"><span class="sort-check">✓</span>最新添加</button>
+          <button class="sort-opt" data-mode="recent" type="button"><span class="sort-check">✓</span>最近使用</button>
+          <button class="sort-opt" data-mode="freq" type="button"><span class="sort-check">✓</span>使用频率</button>
+          <button class="sort-opt" data-mode="manual" type="button"><span class="sort-check">✓</span>手动顺序</button>
+        </div>
       </div>
       <div class="sort-status" id="sortStatus">
         <button class="btn" id="btnSortCmd" disabled>📋 复制变更指令</button>
@@ -757,6 +819,22 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
   </div>
 </div>
 
+<!-- 统一确认弹框（确认 / 提示 / 输入，替代浏览器原生弹框） -->
+<div class="modal-mask" id="cfMask">
+  <div class="cf-panel">
+    <div class="cf-title" id="cfTitle">确认</div>
+    <div class="cf-body" id="cfBody"></div>
+    <div class="cf-field" id="cfFieldWrap" style="display:none">
+      <label id="cfLabel"></label>
+      <input id="cfInput" />
+    </div>
+    <div class="cf-ops">
+      <button class="btn" id="cfCancel">取消</button>
+      <button class="btn primary" id="cfOk">确定</button>
+    </div>
+  </div>
+</div>
+
 <div class="toast" id="toast"></div>
 
 <footer>
@@ -812,6 +890,9 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
   var searchClear = document.getElementById('searchClear');
   var sortStatus = document.getElementById('sortStatus');
   var sortSel = document.getElementById('sortSel');
+  var sortMenu = document.getElementById('sortMenu');
+  var sortTxt = document.getElementById('sortTxt');
+  var SORT_LABELS = { added:'最新添加', recent:'最近使用', freq:'使用频率', manual:'手动顺序' };
   var btnSortCmd = document.getElementById('btnSortCmd');
   var btnMarkSaved = document.getElementById('btnMarkSaved');
   var bkStatus = document.getElementById('bkStatus');
@@ -944,16 +1025,15 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
     var html = '';
     var all = state.data.prompts.length;
     var favN = state.data.prompts.filter(function(p){ return p.favorite; }).length;
-    html += '<div class="nav-item' + (state.curGroup==='all'?' on':'') + '" data-g="all"><span class="icon">🗂️</span>全部<span class="cnt">' + all + '</span></div>';
+    html += '<div class="nav-item' + (state.curGroup==='all'?' on':'') + '" data-g="all"><span class="icon">🗂️</span>全部<span class="cnt">' + all + '</span><span class="nav-add" id="navAdd" title="新建分组">＋</span></div>';
     html += '<div class="nav-scroll">';
     html += '<div class="nav-item' + (state.curGroup==='fav'?' on':'') + '" data-g="fav"><span class="icon">⭐</span>收藏<span class="cnt">' + favN + '</span></div>';
     state.data.groups.forEach(function(g){
       var n = state.data.prompts.filter(function(p){ return p.group === g.id; }).length;
       html += '<div class="nav-item' + (state.curGroup===g.id?' on':'') + '" data-g="' + g.id + '" draggable="true" title="拖拽调整分组顺序"><span class="icon">' + g.icon + '</span><span class="g-name">' + escapeHtml(g.name) + '</span><span class="cnt">' + n + '</span><span class="g-ops"><button class="g-edit" title="编辑分组">✎</button><button class="g-del" title="删除分组">🗑</button></span></div>';
     });
-    html += '<div class="nav-add" id="navAdd">＋ 新建分组</div>';
-    html += '<div class="side-tip"><b>锦囊用法</b><br>· 页面直接增删改：＋ 新建分组 / ＋ 新增提示词 / ✎ 编辑 / 🗑 删除（授权目录即写即存）<br>· 也可对 AI 说「把 XX 加到写作输出分组」<br>· 顶栏切换排序；⇄ 移组、拖卡片排序自动保存；拖分组条调整分组顺序<br>· 点卡片标签按标签筛选（再点取消）；标签悬停 ✕ 删 / ＋ 加；⤓ 导出 / ⤒ 导入 JSON 备份<br>· ⭐ 收藏常用 · 复制次数在卡片右上角</div>';
     html += '</div>';
+    html += '<div class="side-tip"><b>锦囊用法</b><br>· 页面直接增删改：＋ 新建分组 / ＋ 新增提示词 / ✎ 编辑 / 🗑 删除（授权目录即写即存）<br>· 也可对 AI 说「把 XX 加到写作输出分组」<br>· 顶栏切换排序；⇄ 移组、拖卡片排序自动保存；拖分组条调整分组顺序<br>· 点卡片标签按标签筛选（再点取消）；标签悬停 ✕ 删 / ＋ 加；⤓ 导出 / ⤒ 导入 JSON 备份<br>· ⭐ 收藏常用 · 复制次数在卡片右上角</div>';
     sideNav.innerHTML = html;
     sideNav.querySelectorAll('.nav-item').forEach(function(el){
       el.addEventListener('click', function(){
@@ -1001,7 +1081,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
       });
     });
     var addBtn = sideNav.querySelector('#navAdd');
-    if (addBtn) addBtn.addEventListener('click', function(){ openGroupForm(null); });
+    if (addBtn) addBtn.addEventListener('click', function(e){ e.stopPropagation(); openGroupForm(null); });
   }
 
   function render(){
@@ -1198,7 +1278,12 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
     persistUserState();
     scheduleBackup();
   }
-  function syncSortUI(){ if (sortSel) sortSel.value = state.sortMode; }
+  function syncSortUI(){
+    if (sortTxt) sortTxt.textContent = SORT_LABELS[state.sortMode] || SORT_LABELS.added;
+    if (sortMenu) sortMenu.querySelectorAll('.sort-opt').forEach(function(o){
+      o.classList.toggle('on', o.getAttribute('data-mode') === state.sortMode);
+    });
+  }
   function ensureManual(){
     if (state.sortMode === 'manual') return;
     state.sortMode = 'manual';
@@ -1279,10 +1364,30 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
       if (!gpopEl.contains(e.target) && !onAnchor){ closeGpop(); }
     }
   });
-  sortSel.addEventListener('change', function(){
-    state.sortMode = sortSel.value;
+  function toggleSortMenu(force){
+    if (!sortMenu) return;
+    var willOpen = (force !== undefined) ? force : sortMenu.hidden;
+    sortMenu.hidden = !willOpen;
+    sortSel.classList.toggle('open', willOpen);
+  }
+  sortSel.addEventListener('click', function(e){
+    e.stopPropagation();
+    toggleSortMenu();
+  });
+  sortMenu.addEventListener('click', function(e){
+    var opt = e.target.closest('.sort-opt');
+    if (!opt) return;
+    state.sortMode = opt.getAttribute('data-mode');
     persistUserState();
     render();
+    syncSortUI();
+    toggleSortMenu(false);
+  });
+  document.addEventListener('click', function(e){
+    if (!sortMenu.hidden){
+      var onSel = e.target.closest && e.target.closest('#sortSel');
+      if (!sortMenu.contains(e.target) && !onSel){ toggleSortMenu(false); }
+    }
   });
 
   /* ---------- 模板插值（{{变量}} / {变量}） ---------- */
@@ -1417,6 +1522,71 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
     if (toastTimer) clearTimeout(toastTimer);
     toastTimer = setTimeout(function(){ el.className = 'toast'; }, 2800);
   }
+  /* ---------- 统一确认弹框（替代原生 confirm/alert/prompt） ---------- */
+  var cfMask = document.getElementById('cfMask');
+  var cfTitle = document.getElementById('cfTitle');
+  var cfBody = document.getElementById('cfBody');
+  var cfFieldWrap = document.getElementById('cfFieldWrap');
+  var cfLabel = document.getElementById('cfLabel');
+  var cfInput = document.getElementById('cfInput');
+  var cfOk = document.getElementById('cfOk');
+  var cfCancel = document.getElementById('cfCancel');
+  var cfPending = null; var cfMode = 'confirm';
+  function cfClose(res){
+    cfMask.classList.remove('open');
+    if (cfPending){ cfPending(res); cfPending = null; }
+  }
+  function cfOpen(opts){
+    cfMode = opts.mode || 'confirm';
+    cfTitle.textContent = opts.title || '确认';
+    cfBody.textContent = opts.body || '';
+    if (cfMode === 'prompt'){
+      cfFieldWrap.style.display = '';
+      cfLabel.textContent = opts.label || '';
+      cfInput.value = opts.def || '';
+      cfInput.placeholder = opts.placeholder || '';
+    } else {
+      cfFieldWrap.style.display = 'none';
+    }
+    cfOk.textContent = opts.okText || (cfMode === 'alert' ? '知道了' : '确定');
+    cfOk.classList.toggle('danger', !!opts.danger);
+    cfCancel.textContent = opts.cancelText || '取消';
+    cfCancel.style.display = (cfMode === 'alert') ? 'none' : '';
+    cfMask.classList.add('open');
+    setTimeout(function(){
+      if (cfMode === 'prompt'){ cfInput.focus(); cfInput.select(); }
+      else cfOk.focus();
+    }, 60);
+    return new Promise(function(res){ cfPending = res; });
+  }
+  cfOk.addEventListener('click', function(){
+    cfClose({ ok: true, value: (cfMode === 'prompt') ? cfInput.value : null });
+  });
+  cfCancel.addEventListener('click', function(){ cfClose({ ok: false, canceled: true, value: null }); });
+  cfMask.addEventListener('click', function(e){
+    if (e.target === this) cfClose({ ok: false, canceled: true, value: null });
+  });
+  cfInput.addEventListener('keydown', function(e){
+    if (e.key === 'Enter'){ e.preventDefault(); cfOk.click(); }
+  });
+  document.addEventListener('keydown', function(e){
+    if (!cfMask.classList.contains('open')) return;
+    if (e.key === 'Escape') cfClose({ ok: false, canceled: true, value: null });
+  });
+  function uiConfirm(title, body, opts){
+    opts = opts || {};
+    return cfOpen({
+      mode: 'confirm', title: title, body: body,
+      okText: opts.okText, cancelText: opts.cancelText, danger: opts.danger
+    }).then(function(r){ return !!r.ok; });
+  }
+  function uiAlert(title, body){
+    return cfOpen({ mode: 'alert', title: title, body: body });
+  }
+  function uiPrompt(title, label, def, placeholder){
+    return cfOpen({ mode: 'prompt', title: title, label: label, def: def, placeholder: placeholder })
+      .then(function(r){ return r.canceled ? null : r.value; });
+  }
   function ensureWriteDir(){
     if (bkDirHandle) return Promise.resolve(true);
     return maybeAutoAuth().then(function(){ return !!bkDirHandle; });
@@ -1448,6 +1618,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
         if (next === null) return false;
         return bkWrite('prompts.json', 'data', JSON.stringify(next, null, 2)).then(function(){
           state.data = next;
+          syncMirror(next);
           applyUserState();
           state.dirty = false; state.moves = [];
           persistUserState(); refreshDirtyUI();
@@ -1484,6 +1655,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
         });
         return bkWrite('prompts.json', 'data', JSON.stringify(latest, null, 2)).then(function(){
           state.data = latest;
+          syncMirror(latest);
           applyUserState();
           state.dirty = false; state.moves = [];
           persistUserState(); refreshDirtyUI();
@@ -1613,14 +1785,16 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
     }).then(function(ok){ if (ok) toast(editId ? '提示词已更新' : '提示词已入囊'); });
   }
   function delItem(p){
-    if (!window.confirm('确定删除「' + p.title + '」？删除前会自动备份，可从 ↩ 恢复。')) return;
-    writePromptsJson({
-      apply: function(data){
-        data.prompts = data.prompts.filter(function(x){ return x.id !== p.id; });
-        return data;
-      },
-      cmd: '请删除锦囊里「' + p.title + '」这条'
-    }).then(function(ok){ if (ok) toast('已删除「' + p.title + '」'); });
+    uiConfirm('删除提示词', '确定删除「' + p.title + '」？删除前会自动备份，可从 ↩ 恢复。', { danger: true, okText: '删除' }).then(function(ok){
+      if (!ok) return;
+      writePromptsJson({
+        apply: function(data){
+          data.prompts = data.prompts.filter(function(x){ return x.id !== p.id; });
+          return data;
+        },
+        cmd: '请删除锦囊里「' + p.title + '」这条'
+      }).then(function(ok2){ if (ok2) toast('已删除「' + p.title + '」'); });
+    });
   }
   /* 标签快捷操作：卡片标签悬停 ✕ 删 / ＋ 加（授权目录即写即存，未授权生成指令） */
   function removeTag(p, t){
@@ -1642,21 +1816,22 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
   }
   function quickAddTag(p){
     var cur = (p.tags || []).slice(0, 3);
-    var input = window.prompt('为「' + p.title + '」添加标签（多个用逗号分隔，最多 3 个）：', cur.join(', '));
-    if (input === null) return;
-    var adds = input.split(/[,，]/).map(function(s){ return s.trim(); }).filter(Boolean);
-    if (!adds.length) return;
-    var merged = cur.concat(adds).slice(0, 3);
-    writePromptsJson({
-      apply: function(data){
-        var item = data.prompts.find(function(x){ return x.id === p.id; });
-        if (!item){ toast('该提示词已不存在，请刷新后重试', true); return null; }
-        item.tags = merged;
-        item.updatedAt = nowStamp();
-        return data;
-      },
-      cmd: '请把锦囊里「' + p.title + '」的标签更新为：' + merged.join(', ') + '（同时把 updatedAt 更新为当前时间 YYYY-MM-DD HH:mm:ss）'
-    }).then(function(ok){ if (ok) toast('标签已更新'); });
+    uiPrompt('添加标签', '为「' + p.title + '」添加标签（多个用逗号分隔，最多 3 个）：', cur.join(', '), '如：日报,工作').then(function(input){
+      if (input === null) return;
+      var adds = input.split(/[,，]/).map(function(s){ return s.trim(); }).filter(Boolean);
+      if (!adds.length) return;
+      var merged = cur.concat(adds).slice(0, 3);
+      writePromptsJson({
+        apply: function(data){
+          var item = data.prompts.find(function(x){ return x.id === p.id; });
+          if (!item){ toast('该提示词已不存在，请刷新后重试', true); return null; }
+          item.tags = merged;
+          item.updatedAt = nowStamp();
+          return data;
+        },
+        cmd: '请把锦囊里「' + p.title + '」的标签更新为：' + merged.join(', ') + '（同时把 updatedAt 更新为当前时间 YYYY-MM-DD HH:mm:ss）'
+      }).then(function(ok){ if (ok) toast('标签已更新'); });
+    });
   }
   document.getElementById('itemCancel').addEventListener('click', closeItemForm);
   document.getElementById('itemSave').addEventListener('click', saveItem);
@@ -1726,15 +1901,17 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
   function delGroup(g){
     var n = state.data.prompts.filter(function(p){ return p.group === g.id; }).length;
     if (n > 0){ toast('「' + g.name + '」内还有 ' + n + ' 条提示词，请先移出或删除', true); return; }
-    if (!window.confirm('确定删除分组「' + g.name + '」？')) return;
-    if (state.curGroup === g.id) state.curGroup = 'all';
-    writePromptsJson({
-      apply: function(data){
-        data.groups = data.groups.filter(function(x){ return x.id !== g.id; });
-        return data;
-      },
-      cmd: '请删除锦囊分组「' + g.name + '」'
-    }).then(function(ok){ if (ok) toast('分组「' + g.name + '」已删除'); });
+    uiConfirm('删除分组', '确定删除分组「' + g.name + '」？', { danger: true, okText: '删除' }).then(function(ok){
+      if (!ok) return;
+      if (state.curGroup === g.id) state.curGroup = 'all';
+      writePromptsJson({
+        apply: function(data){
+          data.groups = data.groups.filter(function(x){ return x.id !== g.id; });
+          return data;
+        },
+        cmd: '请删除锦囊分组「' + g.name + '」'
+      }).then(function(ok2){ if (ok2) toast('分组「' + g.name + '」已删除'); });
+    });
   }
   function reorderGroups(moveId, beforeId){
     var ids = state.data.groups.map(function(g){ return g.id; });
@@ -1797,9 +1974,11 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
         }
       } catch(err){ toast('JSON 解析失败，请确认文件内容', true); return; }
       var cur = (state.data && state.data.prompts) ? state.data.prompts.length : 0;
-      if (!window.confirm('导入将覆盖现有 ' + cur + ' 条数据为 ' + d.prompts.length + ' 条（导入前自动备份，可从 ↩ 恢复）。确定继续？')) return;
-      writePromptsJson({ apply: function(){ return d; }, cmd: '' }).then(function(ok){
-        if (ok) toast('已导入 ' + d.prompts.length + ' 条提示词');
+      uiConfirm('覆盖导入', '导入将覆盖现有 ' + cur + ' 条数据为 ' + d.prompts.length + ' 条（导入前自动备份，可从 ↩ 恢复）。确定继续？', { danger: true, okText: '覆盖导入' }).then(function(ok){
+        if (!ok) return;
+        writePromptsJson({ apply: function(){ return d; }, cmd: '' }).then(function(ok2){
+          if (ok2) toast('已导入 ' + d.prompts.length + ' 条提示词');
+        });
       });
     };
     reader.readAsText(f, 'utf-8');
@@ -1868,6 +2047,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
     if (e.key === 'Escape'){
       closeFillPanel();
       closeGpop();
+      toggleSortMenu(false);
       closeItemForm();
       closeGroupForm();
       document.getElementById('bkMask').classList.remove('open');
@@ -2030,6 +2210,19 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
       });
     });
   }
+  /* 数据镜像：localStorage 存全量数据快照（file:// 下 IndexedDB 偶发不可用时兜底恢复，键按 pouch-id 隔离） */
+  function syncMirror(data){
+    try{ localStorage.setItem(SF_NS + '-mirror', JSON.stringify(data)); }catch(e){}
+  }
+  function readMirror(){
+    try{
+      var raw = localStorage.getItem(SF_NS + '-mirror');
+      if (!raw) return null;
+      var d = JSON.parse(raw);
+      if (d && d.groups && d.prompts) return d;
+    }catch(e){}
+    return null;
+  }
   /* 备份文件读：backup/ 优先，读不到回退根目录旧文件（旧目录结构兼容） */
   function readBk(name){
     return bkRead(name, 'backup').then(function(text){
@@ -2109,22 +2302,24 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
     if (bkDirHandle) return Promise.resolve(true);
     if (!bkSupported() || bkDeclined || pendingAuth) return Promise.resolve(false);
     if (!state.data) return Promise.resolve(false);
-    var ok = window.confirm('锦囊自动备份\n\n数据一有变更就会自动备份，建议授权写入 prompt-pouch.html 所在目录（首次弹窗选一次，浏览器会记住）。\n\n点「确定」打开目录选择 → 选 prompt-pouch.html 所在文件夹即可；\n点「取消」则改用浏览器本地快照（保留最近 5 份，清浏览器数据会丢）。');
-    if (!ok){
-      bkDeclined = true;
-      try{ localStorage.setItem(SF_NS + '-bk-declined', '1'); }catch(e){}
-      return Promise.resolve(false);
-    }
-    pendingAuth = true; updateBkUI();
-    return window.showDirectoryPicker({ id: 'pouch-backup', mode: 'readwrite' })
-      .then(function(h){
-        bkDirHandle = h; pendingAuth = false; bkDeclined = false; subDirCache = {};
-        try{ localStorage.removeItem(SF_NS + '-bk-declined'); }catch(e){}
-        idbSet('bkHandle', bkDirHandle);
-        updateBkUI();
-        return true;
-      })
-      .catch(function(){ pendingAuth = false; updateBkUI(); return false; });
+    return uiConfirm('锦囊自动备份', '数据一有变更就会自动备份，建议授权写入 prompt-pouch.html 所在目录（首次选一次，浏览器会记住）。\n\n点「授权目录」打开目录选择 → 选 prompt-pouch.html 所在文件夹即可；\n点「暂不」则改用浏览器本地快照（保留最近 5 份，清浏览器数据会丢）。', { okText: '授权目录', cancelText: '暂不' }).then(function(ok){
+      if (!ok){
+        bkDeclined = true;
+        try{ localStorage.setItem(SF_NS + '-bk-declined', '1'); }catch(e){}
+        return false;
+      }
+      pendingAuth = true; updateBkUI();
+      return window.showDirectoryPicker({ id: 'pouch-backup', mode: 'readwrite' })
+        .then(function(h){
+          bkDirHandle = h; pendingAuth = false; bkDeclined = false; subDirCache = {};
+          try{ localStorage.removeItem(SF_NS + '-bk-declined'); }catch(e){}
+          idbSet('bkHandle', bkDirHandle);
+          updateBkUI();
+          reloadFromDirIfNeeded();
+          return true;
+        })
+        .catch(function(){ pendingAuth = false; updateBkUI(); return false; });
+    });
   }
   function updateBkUI(){
     if (!bkSupported()){
@@ -2168,18 +2363,55 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
       pendingAuth = false;
     }).catch(function(){});
   }
+  /* file:// 直开补洞：fetch 被浏览器拦截读不到数据文件时，授权目录后直读 data/prompts.json 替换示例/快照 */
+  function reloadFromDirIfNeeded(){
+    if (!bkDirHandle || bootMode === 'live') return;
+    readPouch().then(function(text){
+      if (text === null) return;
+      var data = JSON.parse(text);
+      state.data = data;
+      idbSet('lastData', data);
+      syncMirror(data);
+      bootMode = 'live';
+      cacheBadge.style.display = 'none';
+      applyUserState();
+      renderNav(); render();
+      toast('✓ 已直读 data/prompts.json，你的分组与提示词已载入');
+    }).catch(function(){});
+  }
+  /* 「🔓 恢复数据」：已授权过目录但刷新后权限需重新确认（file:// 权限不跨会话持久）→ 一键 requestPermission 后直读，免重新选目录 */
+  function restoreAuth(){
+    if (!bkDirHandle || typeof bkDirHandle.requestPermission !== 'function') return;
+    bkDirHandle.requestPermission({ mode: 'readwrite' }).then(function(st){
+      if (st === 'granted'){
+        pendingAuth = false; updateBkUI();
+        reloadFromDirIfNeeded();
+      } else {
+        toast('未获授权：点「💾 授权目录」重新选择目录', true);
+      }
+    }).catch(function(){ toast('权限恢复失败，请重新授权目录', true); });
+  }
+  function updateBootBadge(){
+    if (bootMode === 'live' || !bkDirHandle || !bootRendered) return;
+    var link = ' <a id="bootRestore" style="cursor:pointer;text-decoration:underline">🔓 恢复数据</a>';
+    cacheBadge.innerHTML = (bootMode === 'cache'
+      ? '⚠️ 快照模式：当前显示上次快照，目录权限需确认后直读最新数据'
+      : '📌 示例模式：检测到曾授权过目录，点击确认权限即可载入你的数据') + link;
+    cacheBadge.style.display = '';
+    document.getElementById('bootRestore').addEventListener('click', restoreAuth);
+  }
   btnBkEnable.addEventListener('click', function(){
     if (bkDirHandle && !pendingAuth){
       writeBackupNow().then(function(ok){ toast(ok ? '✓ 备份完成 · backup/pouch-backup.json' : '备份失败，请重新授权目录', !ok); });
       return;
     }
     if (!bkSupported()){
-      alert('当前浏览器不支持「选择目录」授权（Chrome / Edge 可用）。\n本页已自动使用本地快照备份（保留最近 5 份，随浏览器数据走）；\n也可随时对 AI 说「导出锦囊数据」生成备份文件备用。');
+      uiAlert('目录授权不可用', '当前浏览器不支持「选择目录」授权（Chrome / Edge 可用）。\n本页已自动使用本地快照备份（保留最近 5 份，随浏览器数据走）；\n也可随时对 AI 说「导出锦囊数据」生成备份文件备用。');
       return;
     }
     if (bkDirHandle && pendingAuth){
       bkDirHandle.requestPermission({ mode: 'readwrite' }).then(function(st){
-        if (st === 'granted'){ pendingAuth = false; updateBkUI(); writeBackupNow(); }
+        if (st === 'granted'){ pendingAuth = false; updateBkUI(); writeBackupNow(); reloadFromDirIfNeeded(); }
         else bkStatus.textContent = '未获授权，备份暂停';
       }).catch(function(){});
       return;
@@ -2191,21 +2423,25 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
         idbSet('bkHandle', bkDirHandle);
         updateBkUI();
         writeBackupNow();
+        reloadFromDirIfNeeded();
       })
       .catch(function(){});
   });
   btnBkChange.addEventListener('click', function(){
     if (!bkSupported()){ updateBkUI(); return; }
-    if (!window.confirm('更换备份目录\n\n建议仍选 prompt-pouch.html 所在目录：页面新增/编辑的分组与提示词、自动备份都写在这个目录，选别处会造成页面与数据文件不一致。\n\n确定继续选择目录？')) return;
-    window.showDirectoryPicker({ id: 'pouch-backup', mode: 'readwrite' })
-      .then(function(h){
-        bkDirHandle = h; pendingAuth = false; bkDeclined = false; subDirCache = {};
-        try{ localStorage.removeItem(SF_NS + '-bk-declined'); }catch(e){}
-        idbSet('bkHandle', bkDirHandle);
-        updateBkUI();
-        writeBackupNow();
-      })
-      .catch(function(){});
+    uiConfirm('更换备份目录', '建议仍选 prompt-pouch.html 所在目录：页面新增/编辑的分组与提示词、自动备份都写在这个目录，选别处会造成页面与数据文件不一致。\n\n确定继续选择目录？', { okText: '选择目录' }).then(function(ok){
+      if (!ok) return;
+      window.showDirectoryPicker({ id: 'pouch-backup', mode: 'readwrite' })
+        .then(function(h){
+          bkDirHandle = h; pendingAuth = false; bkDeclined = false; subDirCache = {};
+          try{ localStorage.removeItem(SF_NS + '-bk-declined'); }catch(e){}
+          idbSet('bkHandle', bkDirHandle);
+          updateBkUI();
+          writeBackupNow();
+          reloadFromDirIfNeeded();
+        })
+        .catch(function(){});
+    });
   });
   btnBkRestore.addEventListener('click', function(){
     document.getElementById('bkList').innerHTML = '<div class="bk-empty">读取备份清单…</div>';
@@ -2256,31 +2492,33 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
   }
   function doRestore(content){
     var snap;
-    try{ snap = JSON.parse(content); }catch(e){ alert('备份文件损坏，无法恢复。'); return; }
+    try{ snap = JSON.parse(content); }catch(e){ uiAlert('恢复失败', '备份文件损坏，无法恢复。'); return; }
     if (!snap || !snap.data || !Array.isArray(snap.data.groups) || !Array.isArray(snap.data.prompts)){
-      alert('备份结构不完整，无法恢复。'); return;
+      uiAlert('恢复失败', '备份结构不完整，无法恢复。'); return;
     }
-    var ok = window.confirm('将用这份备份覆盖当前数据：\n\n· 备份时间：' + fmtTime(snap.time)
+    uiConfirm('恢复备份', '将用这份备份覆盖当前数据：\n\n· 备份时间：' + fmtTime(snap.time)
       + '\n· 内容：' + snap.counts.groups + ' 分组 / ' + snap.counts.prompts + ' 条提示词\n\n'
-      + '恢复前会先把当前数据自动另存一份新备份，可随时再恢复回来。\n\n确定恢复？');
-    if (!ok) return;
-    // 先把当前状态固化进备份（目录备份滚入 .prev.json / 快照环记一份），再应用所选备份
-    (bkDirHandle ? writeBackupNow() : writeSnapNow()).then(function(){
-      state.data = snap.data;
-      applyUserStateFrom(snap.userState || {});
-      state.dirty = false; state.moves = [];
-      persistUserState();
-      renderNav(); render();
-      document.getElementById('bkMask').classList.remove('open');
-      if (bkDirHandle){
-        return bkWrite('prompts.json', JSON.stringify(snap.data, null, 2)).then(function(){
-          toast('✓ 已恢复并写入 prompts.json，刷新即见');
-        }).catch(function(){
-          toast('已恢复；写入 prompts.json 失败，请重新授权目录', true);
-        });
-      }
-      markDirty();
-      toast('✓ 已恢复；未授权目录——点「📋 复制变更指令」交给 AI 落盘，或先「💾 授权目录备份」');
+      + '恢复前会先把当前数据自动另存一份新备份，可随时再恢复回来。\n\n确定恢复？', { danger: true, okText: '恢复' }).then(function(ok){
+      if (!ok) return;
+      // 先把当前状态固化进备份（目录备份滚入 .prev.json / 快照环记一份），再应用所选备份
+      (bkDirHandle ? writeBackupNow() : writeSnapNow()).then(function(){
+        state.data = snap.data;
+        syncMirror(snap.data);
+        applyUserStateFrom(snap.userState || {});
+        state.dirty = false; state.moves = [];
+        persistUserState();
+        renderNav(); render();
+        document.getElementById('bkMask').classList.remove('open');
+        if (bkDirHandle){
+          return bkWrite('prompts.json', JSON.stringify(snap.data, null, 2)).then(function(){
+            toast('✓ 已恢复并写入 prompts.json，刷新即见');
+          }).catch(function(){
+            toast('已恢复；写入 prompts.json 失败，请重新授权目录', true);
+          });
+        }
+        markDirty();
+        toast('✓ 已恢复；未授权目录——点「📋 复制变更指令」交给 AI 落盘，或先「💾 授权目录备份」');
+      });
     });
   }
   document.getElementById('bkCancelBtn').addEventListener('click', function(){
@@ -2303,7 +2541,7 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
     render();
     if (bootMode === 'cache') cacheBadge.style.display = '';
     if (bootMode === 'demo'){
-      cacheBadge.textContent = '📌 示例模式：未读到 data/prompts.json，当前展示系统自带示例提示词（file:// 直开或数据文件尚未生成）。经 HTTP 打开页面并生成数据文件后即为你的提示词，示例可随时删除。';
+      cacheBadge.textContent = '📌 示例模式：未读到 data/prompts.json，当前展示系统自带示例。若你有自己的数据文件：点顶部「💾 授权目录」选 prompt-pouch.html 所在文件夹即可直读载入；或经 HTTP 打开页面（file:// 直开会被浏览器拦截文件读取）。';
       cacheBadge.style.display = '';
     }
   }
@@ -2319,26 +2557,49 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
     .then(function(data){
       state.data = data;
       idbSet('lastData', data);
+      syncMirror(data);
       bootMode = 'live';
       firstRender();
     })
     .catch(function(){
-      idbGet('lastData').then(function(cached){
-        if (cached){
-          state.data = cached;
-          bootMode = 'cache';
-          firstRender();
-        } else {
-          state.data = DEFAULT_POUCH;
-          bootMode = 'demo';
-          firstRender();
-        }
+      // file:// 场景：fetch 被浏览器拦截 → 已授权目录则直读 data/prompts.json（File System Access API）
+      return dirHandleReady.then(function(){
+        return readPouch().then(function(text){
+          if (text !== null) return JSON.parse(text);
+          throw new Error('no-fs');
+        });
+      }).then(function(data){
+        state.data = data;
+        idbSet('lastData', data);
+        syncMirror(data);
+        bootMode = 'live';
+        firstRender();
+      }).catch(function(){
+        idbGet('lastData').then(function(cached){
+          if (cached){
+            state.data = cached;
+            bootMode = 'cache';
+            firstRender();
+          } else {
+            var mirror = readMirror();
+            if (mirror){
+              state.data = mirror;
+              bootMode = 'cache';
+              firstRender();
+            } else {
+              state.data = DEFAULT_POUCH;
+              bootMode = 'demo';
+              firstRender();
+            }
+          }
+        });
       });
     });
   // 本地态并行：可用则应用收藏与排序并刷新备份区（不阻塞数据展示）
+  var dirHandleReady = idbOpen().then(function(){ return loadDirHandle(); }).catch(function(){});
   idbOpen()
     .then(loadLocalState)
-    .then(loadDirHandle)
+    .then(function(){ return dirHandleReady; })
     .catch(function(){})
     .then(function(){
       applyUserState();
@@ -2346,6 +2607,7 @@ if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(POUC
       refreshDirtyUI();
       if (bootRendered){ renderNav(); render(); }
       updateBkUI();
+      updateBootBadge();
     });
 })();