skill-forge-hub 0.5.4 → 1.0.1

package/prompt-pouch/resources/reference.html

@@ -15,6 +15,7 @@
   --tag-bg:rgba(232,176,75,.1);
   --star:#f7d9a0;
   --glow:rgba(232,176,75,.35);
+  --scan:rgba(232,176,75,.2); --scan-dim:rgba(232,176,75,.04);
   --btn-ink:#241505;
   --bar-hi:rgba(23,17,12,.96); --bar-lo:rgba(23,17,12,.88);
 }
@@ -27,37 +28,71 @@
   --tag-bg:rgba(56,189,248,.1);
   --star:#7dd3fc;
   --glow:rgba(56,189,248,.35);
+  --scan:rgba(56,189,248,.2); --scan-dim:rgba(56,189,248,.04);
   --btn-ink:#041018;
   --bar-hi:rgba(10,25,41,.96); --bar-lo:rgba(10,25,41,.88);
 }
-/* ═══ mono 深灰蓝：JetBrains Darcula 色系（深灰底 + 蓝灰文字 + 灰阶面板，IDE 同款观感） ═══ */
+/* ═══ mono IDEA 黑亮：JetBrains New UI Dark 官方色系（编辑区 #1e1f22 + 面板/弹框 #2b2d30 + 描边 #3c3f41，IDE 同款） ═══ */
 [data-theme="mono"]{
-  --bg:#2b2b2b; --bg2:#313335;
-  --panel:#3c3f41; --panel2:#313335;
-  --text:#a9b7c6; --muted:#808080;
-  --gold:#a9b7c6; --gold2:#6b7280; --gold-dim:rgba(169,183,198,.12);
-  --border:#4e5254;
-  --tag-bg:#3c3f41;
-  --star:#d7dce3;
-  --glow:rgba(169,183,198,.18);
-  --btn-ink:#2b2b2b;
-  --bar-hi:rgba(43,43,43,.96); --bar-lo:rgba(43,43,43,.88);
-}
-/* mono 深灰蓝组件适配：魔法棒灰化、蓝灰标签、浅蓝灰星标、深灰弹层、输入区微亮蓝灰、色点蓝灰描边 */
-[data-theme="mono"] .lg{ filter:grayscale(1) brightness(.45); }
+  --bg:#1e1f22; --bg2:#2b2d30;
+  --panel:#2b2d30; --panel2:#313438;
+  --text:#dfe1e5; --muted:#9aa0a6;
+  --gold:#3574f0; --gold2:#5e9aff; --gold-dim:rgba(53,116,240,.14);
+  --border:#3c3f41;
+  --tag-bg:rgba(53,116,240,.1);
+  --star:#dfe1e5;
+  --glow:rgba(53,116,240,.22);
+  --scan:rgba(223,225,229,.18); --scan-dim:rgba(223,225,229,.05);
+  --btn-ink:#1e1f22;
+  --bar-hi:rgba(30,31,34,.96); --bar-lo:rgba(30,31,34,.88);
+}
+/* mono IDEA 黑亮组件适配：魔法棒提亮、图标灰白提亮、蓝标签、白星标、深灰弹层、输入区微亮、色点蓝描边 */
+[data-theme="mono"] .lg{ filter:grayscale(1) brightness(.5); }
 [data-theme="mono"] .nav-item .icon,
-[data-theme="mono"] .search .kw{ filter:grayscale(1) brightness(1.15); }
-[data-theme="mono"] .tpl-badge{ color:#a9b7c6; background:rgba(169,183,198,.14); }
-[data-theme="mono"] .op.star-on{ color:#d7dce3; border-color:rgba(169,183,198,.45); background:rgba(169,183,198,.16); }
-[data-theme="mono"] .gpop{ background:#3c3f41; border-color:#4e5254; box-shadow:0 12px 32px rgba(0,0,0,.6); }
+[data-theme="mono"] .search .kw{ filter:grayscale(1) brightness(1.25); }
+[data-theme="mono"] .tpl-badge{ color:#dfe1e5; background:rgba(223,225,229,.12); }
+[data-theme="mono"] .op.star-on{ color:#dfe1e5; border-color:rgba(223,225,229,.5); background:rgba(223,225,229,.16); }
+[data-theme="mono"] .gpop{ background:#2b2d30; border-color:#3c3f41; box-shadow:0 12px 32px rgba(0,0,0,.55); }
 [data-theme="mono"] .fp-preview,
 [data-theme="mono"] .fp-field input,
 [data-theme="mono"] .fp-field textarea,
 [data-theme="mono"] .fp-field select,
 [data-theme="mono"] .fp-live textarea,
 [data-theme="mono"] .bk-item,
-[data-theme="mono"] .detail-content{ background:rgba(169,183,198,.07); }
-[data-theme="mono"] .theme-dock .th-dot[data-theme="mono"]{ border:1.5px solid rgba(169,183,198,.55); }
+[data-theme="mono"] .detail-content{ background:rgba(223,225,229,.06); }
+[data-theme="mono"] .theme-dock .th-dot[data-theme="mono"]{ border:1.5px solid rgba(94,154,255,.6); }
+[data-theme="mono"] body{ background:var(--bg); } /* 主体纯 #1e1f22：去掉顶部光晕/160° 渐变，消除上灰下黑断层（JetBrains New UI Dark 编辑区同色）；四层氛围独立于 body，mono 下星点换装灰白、条纹灰白不泛蓝 */
+
+/* ═══ light IDEA 白亮：IntelliJ Light 官方色系（白编辑区 + 浅灰面板 #f2f2f2 + IDEA 蓝强调） ═══ */
+[data-theme="light"]{
+  --bg:#ffffff; --bg2:#f2f2f2;
+  --panel:#f2f2f2; --panel2:#ffffff;
+  --text:#1e1f22; --muted:#6e7781;
+  --gold:#2675bf; --gold2:#4a9be0; --gold-dim:rgba(38,117,191,.12);
+  --border:#d1d1d1;
+  --tag-bg:rgba(38,117,191,.08);
+  --star:#e5a33c;
+  --glow:rgba(38,117,191,.16);
+  --scan:rgba(38,117,191,.12); --scan-dim:rgba(38,117,191,.03);
+  --btn-ink:#ffffff;
+  --bar-hi:rgba(255,255,255,.96); --bar-lo:rgba(255,255,255,.88);
+}
+/* light IDEA 白亮组件适配：魔法棒灰黑、图标灰化、蓝标签、暖金星标、白弹层、输入区浅灰、色点蓝描边 */
+[data-theme="light"] .lg{ filter:grayscale(1) brightness(.7); }
+[data-theme="light"] .nav-item .icon,
+[data-theme="light"] .search .kw{ filter:grayscale(1) brightness(.85); }
+[data-theme="light"] .tpl-badge{ color:#2675bf; background:rgba(38,117,191,.1); }
+[data-theme="light"] .op.star-on{ color:#e5a33c; border-color:rgba(229,163,60,.5); background:rgba(229,163,60,.14); }
+[data-theme="light"] .gpop{ background:#ffffff; border-color:#d1d1d1; box-shadow:0 12px 32px rgba(30,31,34,.14); }
+[data-theme="light"] .fp-preview,
+[data-theme="light"] .fp-field input,
+[data-theme="light"] .fp-field textarea,
+[data-theme="light"] .fp-field select,
+[data-theme="light"] .fp-live textarea,
+[data-theme="light"] .bk-item,
+[data-theme="light"] .detail-content{ background:#f7f9fb; }
+[data-theme="light"] .theme-dock .th-dot[data-theme="light"]{ border:1.5px solid rgba(38,117,191,.5); }
+[data-theme="light"] body{ background:var(--bg); } /* 主体纯白 #ffffff：去掉顶部光晕/160° 渐变，对齐 IntelliJ Light 编辑区；四层氛围独立于 body */
 [data-theme="mint"]{ /* 薄荷绿 */
   --bg:#0d1a12; --bg2:#12241a;
   --panel:#182f22; --panel2:#1e3a2a;
@@ -67,6 +102,7 @@
   --tag-bg:rgba(74,222,128,.1);
   --star:#b9ffd8;
   --glow:rgba(74,222,128,.35);
+  --scan:rgba(74,222,128,.2); --scan-dim:rgba(74,222,128,.04);
   --btn-ink:#04150a;
   --bar-hi:rgba(13,26,18,.96); --bar-lo:rgba(13,26,18,.88);
 }
@@ -75,12 +111,52 @@ html,body{ height:100%; }
 body{
   background:
     radial-gradient(1200px 500px at 70% -10%, var(--gold-dim), transparent 60%),
-    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 90px),
     linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);
   color:var(--text);
   font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'PingFang SC','Microsoft YaHei',monospace;
   min-height:100%;
 }
+
+/* ============ 四层科技氛围（与日报/周报/年报同源，透明度淡半档——工具页不扰读） ============ */
+.grid-pattern{
+  position:fixed; inset:0; z-index:0; pointer-events:none;
+  background-image:linear-gradient(var(--scan-dim) 1px, transparent 1px),linear-gradient(90deg, var(--scan-dim) 1px, transparent 1px);
+  background-size:60px 60px;
+}
+.stars{
+  position:fixed; inset:0; z-index:0; pointer-events:none;
+  background-image:
+    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.3), transparent),
+    radial-gradient(1px 1px at 28% 64%, var(--scan), transparent),
+    radial-gradient(1.5px 1.5px at 41% 32%, rgba(255,255,255,.24), transparent),
+    radial-gradient(1px 1px at 56% 78%, var(--scan), transparent),
+    radial-gradient(1px 1px at 67% 12%, var(--scan), transparent),
+    radial-gradient(1.5px 1.5px at 79% 52%, var(--scan), transparent),
+    radial-gradient(1px 1px at 88% 86%, rgba(255,255,255,.26), transparent),
+    radial-gradient(1px 1px at 93% 24%, var(--scan), transparent);
+}
+.scanlines{
+  position:fixed; inset:0; z-index:999; pointer-events:none;
+  background:repeating-linear-gradient(0deg, transparent 0 2px, var(--scan-dim) 2px 4px);
+}
+.scanband{
+  position:fixed; left:0; right:0; height:150px; z-index:998; pointer-events:none;
+  background:linear-gradient(180deg, transparent, var(--scan-dim) 50%, transparent);
+  animation:scanMove 11s linear infinite;
+}
+@keyframes scanMove{ from{top:-22%;} to{top:112%;} }
+/* mono 黑亮下氛围换装：条纹留存、颜色去彩——星点改中性灰白（IDEA 文本色系），与报表 mono 同源 */
+[data-theme="mono"] .stars{ background-image:
+  radial-gradient(1px 1px at 12% 18%, rgba(223,225,229,.26), transparent),
+  radial-gradient(1px 1px at 28% 64%, rgba(223,225,229,.22), transparent),
+  radial-gradient(1.5px 1.5px at 41% 32%, rgba(223,225,229,.2), transparent),
+  radial-gradient(1px 1px at 56% 78%, rgba(223,225,229,.18), transparent),
+  radial-gradient(1px 1px at 67% 12%, rgba(223,225,229,.2), transparent),
+  radial-gradient(1.5px 1.5px at 79% 52%, rgba(223,225,229,.22), transparent),
+  radial-gradient(1px 1px at 88% 86%, rgba(223,225,229,.24), transparent),
+  radial-gradient(1px 1px at 93% 24%, rgba(223,225,229,.24), transparent); }
+/* 浅色主题下星点氛围自然淡出 */
+[data-theme="light"] .stars{ opacity:.28; }
 /* ============ 顶栏 ============ */
 header{
   position:sticky; top:0; z-index:30;
@@ -190,7 +266,9 @@ main{ flex:1; min-width:0; }
 /* 卡片列表 */
 .list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:14px; }
 .card{
-  background:linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
+  background:
+    repeating-linear-gradient(180deg, var(--scan-dim) 0 1px, transparent 1px 8px),
+    linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
   border:1px solid var(--border); border-radius:14px;
   padding:16px 18px 14px; position:relative;
   transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
@@ -211,7 +289,7 @@ main{ flex:1; min-width:0; }
   overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
 }
 
-/* 搜索命中高亮（四主题令牌适配） */
+/* 搜索命中高亮（五主题令牌适配） */
 mark.hl{ background:var(--gold-dim); color:var(--gold); border-radius:3px; padding:0 2px; font-weight:700; }
 .hl-note{ font-size:10px; color:var(--gold); background:var(--gold-dim); border:1px solid var(--border); border-radius:4px; padding:0 5px; line-height:16px; margin-left:6px; vertical-align:middle; }
 .gbadge{
@@ -238,9 +316,49 @@ mark.hl{ background:var(--gold-dim); color:var(--gold); border-radius:3px; paddi
 .card-time .ct-ico{ color:var(--gold); flex:0 0 auto; }
 .card-foot{ display:flex; align-items:center; gap:8px; margin-top:2px; }
 .tag{
+  display:inline-flex; align-items:center; gap:2px;
   font-size:10px; color:var(--muted); background:var(--panel2);
   border:1px solid var(--border); border-radius:999px; padding:2px 8px; letter-spacing:.5px;
+  cursor:pointer; transition:color .15s ease, border-color .15s ease, background .15s ease;
+}
+.tag:hover{ color:var(--gold); border-color:var(--gold2); }
+.tag.on{ color:var(--btn-ink); background:var(--gold); border-color:var(--gold); }
+.tag .tag-x{
+  display:none; border:none; background:none; color:inherit; cursor:pointer;
+  font-size:11px; line-height:1; padding:0 2px; margin-right:-3px;
+}
+.tag:hover .tag-x{ display:inline-block; }
+.tag .tag-x:hover{ color:var(--gold); }
+.tag-add{
+  display:none; border:1px dashed var(--border); background:none; color:var(--muted);
+  border-radius:999px; font-size:10px; line-height:1; padding:3px 7px; cursor:pointer;
+}
+.tags-wrap:hover .tag-add{ display:inline-block; }
+.tag-add:hover{ color:var(--gold); border-color:var(--gold2); }
+.emoji-pick{
+  display:grid; grid-template-columns:repeat(9,1fr); gap:6px;
+  max-height:200px; overflow-y:auto; padding:4px 4px 4px 0;
+}
+.emoji-pick button{
+  font-size:28px; line-height:1.4; padding:5px 0; text-align:center;
+  background:none; border:1px solid transparent; border-radius:8px; cursor:pointer;
 }
+.emoji-pick button:hover{ background:var(--tag-bg); border-color:var(--border); transform:scale(1.12); }
+.emoji-pick button.sel{ background:var(--gold-dim); border-color:var(--gold); }
+.tag-filter{
+  display:inline-flex; align-items:center; gap:6px;
+  font-size:11px; color:var(--gold); background:var(--gold-dim);
+  border:1px solid var(--border); border-radius:999px; padding:3px 6px 3px 10px;
+}
+.tag-filter b{ font-weight:600; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.tag-filter .tf-x{
+  border:none; background:var(--border); color:var(--text); width:16px; height:16px;
+  border-radius:50%; cursor:pointer; font-size:10px; line-height:1; padding:0;
+  display:inline-flex; align-items:center; justify-content:center;
+}
+.tag-filter .tf-x:hover{ background:var(--gold); color:var(--btn-ink); }
+.nav-item.drag-over{ opacity:.35; }
+.nav-item.drop-target{ box-shadow:inset 0 2px 0 var(--gold); }
 .card-ops{ margin-left:auto; display:flex; gap:6px; opacity:0; transition:opacity .18s ease; }
 .card:hover .card-ops{ opacity:1; }
 .op{
@@ -463,7 +581,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
   .list{ grid-template-columns:1fr; }
   .card-ops{ opacity:1; }
 }
-/* 主题换肤坞：右下角四色点随点随换，记忆上次选择；打印隐藏 */
+/* 主题换肤坞：右下角五色点随点随换，记忆上次选择；打印隐藏 */
 .theme-dock{ position:fixed; right:18px; bottom:18px; z-index:1001; display:flex; gap:8px;
   padding:8px 10px; border-radius:999px; background:var(--panel2); border:1px solid var(--border);
   box-shadow:0 4px 18px rgba(0,0,0,.3); }
@@ -473,12 +591,17 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
 .theme-dock .th-dot.on{ border-color:var(--text); }
 .theme-dock .th-dot[data-theme="gold"]{ background:#e8b04b; }
 .theme-dock .th-dot[data-theme="tech"]{ background:#0ea5e9; }
-.theme-dock .th-dot[data-theme="mono"]{ background:#2b2b2b; }
+.theme-dock .th-dot[data-theme="mono"]{ background:#1e1f22; }
+.theme-dock .th-dot[data-theme="light"]{ background:#ffffff; }
 .theme-dock .th-dot[data-theme="mint"]{ background:#4ade80; }
 @media print{ .theme-dock{ display:none; } }
 </style>
 </head>
 <body>
+<div class="grid-pattern"></div>
+<div class="stars"></div>
+<div class="scanband"></div>
+<div class="scanlines"></div>
 
 <header>
   <div class="hd-row">
@@ -502,6 +625,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
     <div class="bar">
       <h2 id="curTitle">全部提示词</h2>
       <span class="total" id="curTotal"></span>
+      <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>
@@ -522,6 +646,9 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
         <span class="bk-status" id="bkStatus">本地快照备份中</span>
         <button class="btn" id="btnBkChange" style="display:none">📂 换目录</button>
         <button class="btn" id="btnBkRestore" style="display:none">↩ 恢复备份</button>
+        <button class="btn" id="btnBkExport" title="把当前全部数据导出为 JSON 文件">⤓ 导出</button>
+        <button class="btn" id="btnBkImport" title="从 JSON 文件导入（覆盖现有数据，导入前自动备份）">⤒ 导入</button>
+        <input type="file" id="importFile" accept=".json,application/json" style="display:none" />
       </div>
     </div>
     <div class="list" id="cardList"></div>
@@ -587,7 +714,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
 
 <!-- 新建/编辑分组 -->
 <div class="modal-mask" id="groupMask">
-  <div class="fill-panel" style="width:460px;">
+  <div class="fill-panel" style="width:640px;">
     <div class="fp-head">
       <div class="fp-title" id="groupTitle">新建分组</div>
       <span class="fp-count">落盘 data/prompts.json · 刷新即见</span>
@@ -595,6 +722,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
     <div class="fp-fields">
       <div class="fp-field"><label for="groupName">分组名</label><input id="groupName" placeholder="如：灵感" /></div>
       <div class="fp-field"><label for="groupIcon">图标（一个 emoji）</label><input id="groupIcon" placeholder="如：✨" maxlength="4" /></div>
+      <div class="fp-field"><label>快捷选择（点击填入，输入框仍可手输/粘贴任意字符）</label><div class="emoji-pick" id="emojiPick"></div></div>
     </div>
     <div class="fp-ops">
       <button class="btn" id="groupCancel">取消</button>
@@ -664,6 +792,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
     sortMode: 'added', // 'added' 最新添加 | 'recent' 最近使用 | 'freq' 使用频率 | 'manual' 手动顺序
     usage: {},         // id -> { lastUsed: ts, useCount: n }（复制时统计，存浏览器本地态）
     moves: [],         // 跨组移动待办 [{title, from, to}]（随变更指令交给 AI 落盘）
+    tagFilter: '',     // 标签过滤（点卡片标签设置，再点取消；切分组自动清除）
   };
 
   /* ---------- 数据加载 ---------- */
@@ -723,10 +852,25 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
   function showErr(msg){
     listEl.innerHTML = '<div class="empty">' + msg + '</div>';
   }
+  function applyTagFilter(t){
+    state.tagFilter = (state.tagFilter === t) ? '' : t;
+    syncTagFilterUI();
+    render();
+  }
+  function syncTagFilterUI(){
+    var chip = document.getElementById('tagFilterChip');
+    var nameEl = document.getElementById('tagFilterName');
+    if (!chip) return;
+    if (!state.tagFilter){ chip.style.display = 'none'; }
+    else { chip.style.display = ''; nameEl.textContent = state.tagFilter; }
+  }
   function visiblePrompts(){
     var ps = state.data.prompts.slice();
     if (state.curGroup === 'fav') ps = ps.filter(function(p){ return p.favorite; });
     else if (state.curGroup !== 'all') ps = ps.filter(function(p){ return p.group === state.curGroup; });
+    if (state.tagFilter){
+      ps = ps.filter(function(p){ return (p.tags || []).indexOf(state.tagFilter) > -1; });
+    }
     if (state.query){
       var q = state.query.toLowerCase();
       ps = ps.filter(function(p){
@@ -797,16 +941,17 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
     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 + '"><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-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>';
     html += '<div class="nav-add" id="navAdd">＋ 新建分组</div>';
-    html += '<div class="side-tip"><b>锦囊用法</b><br>· 页面直接增删改：＋ 新建分组 / ＋ 新增提示词 / ✎ 编辑 / 🗑 删除（授权目录即写即存）<br>· 也可对 AI 说「把 XX 加到写作输出分组」<br>· 顶栏切换排序；⇄ 移组、拖卡片排序自动保存<br>· ⭐ 收藏常用 · 复制次数在卡片右上角</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(){
         var gv = el.getAttribute('data-g');
         state.curGroup = (gv === 'all' || gv === 'fav') ? gv : Number(gv);
+        state.tagFilter = ''; syncTagFilterUI();
         renderNav(); render();
       });
     });
@@ -824,6 +969,29 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
         delGroup(groupOf(gid));
       });
     });
+    var dragGid = null;
+    sideNav.querySelectorAll('.nav-item[draggable="true"]').forEach(function(el){
+      el.addEventListener('dragstart', function(e){
+        dragGid = Number(el.getAttribute('data-g'));
+        el.classList.add('drag-over');
+        try { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', String(dragGid)); } catch(err){}
+      });
+      el.addEventListener('dragover', function(e){ e.preventDefault(); });
+      el.addEventListener('dragenter', function(e){
+        if (el.getAttribute('data-g') !== String(dragGid)) el.classList.add('drop-target');
+      });
+      el.addEventListener('dragleave', function(){ el.classList.remove('drop-target'); });
+      el.addEventListener('drop', function(e){
+        e.preventDefault();
+        el.classList.remove('drop-target');
+        if (dragGid === null || el.getAttribute('data-g') === String(dragGid)) return;
+        reorderGroups(dragGid, Number(el.getAttribute('data-g')));
+      });
+      el.addEventListener('dragend', function(){
+        sideNav.querySelectorAll('.nav-item').forEach(function(x){ x.classList.remove('drag-over','drop-target'); });
+        dragGid = null;
+      });
+    });
     var addBtn = sideNav.querySelector('#navAdd');
     if (addBtn) addBtn.addEventListener('click', function(){ openGroupForm(null); });
   }
@@ -877,7 +1045,32 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
         card.querySelector('.card-top').appendChild(note);
       }
       var tw = card.querySelector('.tags-wrap');
-      (p.tags || []).forEach(function(t){ tw.insertAdjacentHTML('beforeend', '<span class="tag">' + hlHtml(t, state.query) + '</span>'); });
+      (p.tags || []).forEach(function(t){
+        var tg = document.createElement('span');
+        tg.className = 'tag' + (state.tagFilter === t ? ' on' : '');
+        var lb = document.createElement('span');
+        lb.innerHTML = hlHtml(t, state.query);
+        var x = document.createElement('button');
+        x.type = 'button';
+        x.className = 'tag-x';
+        x.textContent = '✕';
+        x.title = '删除标签「' + t + '」';
+        x.addEventListener('click', function(e){ e.stopPropagation(); removeTag(p, t); });
+        tg.appendChild(lb);
+        tg.appendChild(x);
+        tg.title = '点击筛选该标签（再点取消）';
+        tg.addEventListener('click', function(){ applyTagFilter(t); });
+        tw.appendChild(tg);
+      });
+      if ((p.tags || []).length < 3){
+        var ta = document.createElement('button');
+        ta.type = 'button';
+        ta.className = 'tag-add';
+        ta.textContent = '＋';
+        ta.title = '添加标签（多个用逗号分隔，最多 3 个）';
+        ta.addEventListener('click', function(e){ e.stopPropagation(); quickAddTag(p); });
+        tw.appendChild(ta);
+      }
 
       /* 详情弹窗 */
       card.querySelector('.card-expand').addEventListener('click', function(){ openDetail(p); });
@@ -1421,6 +1614,42 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
       cmd: '请删除锦囊里「' + p.title + '」这条'
     }).then(function(ok){ if (ok) toast('已删除「' + p.title + '」'); });
   }
+  /* 标签快捷操作：卡片标签悬停 ✕ 删 / ＋ 加（授权目录即写即存，未授权生成指令） */
+  function removeTag(p, t){
+    writePromptsJson({
+      apply: function(data){
+        var item = data.prompts.find(function(x){ return x.id === p.id; });
+        if (!item){ toast('该提示词已不存在，请刷新后重试', true); return null; }
+        item.tags = (item.tags || []).filter(function(x){ return x !== t; });
+        item.updatedAt = nowStamp();
+        return data;
+      },
+      cmd: '请删除锦囊里「' + p.title + '」的标签「' + t + '」（tags 中移除该项，同时把 updatedAt 更新为当前时间 YYYY-MM-DD HH:mm:ss）'
+    }).then(function(ok){
+      if (ok){
+        if (state.tagFilter === t) applyTagFilter(t);
+        toast('已删除标签「' + t + '」');
+      }
+    });
+  }
+  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('标签已更新'); });
+  }
   document.getElementById('itemCancel').addEventListener('click', closeItemForm);
   document.getElementById('itemSave').addEventListener('click', saveItem);
   itemName.addEventListener('keydown', function(e){ if (e.key === 'Enter'){ e.preventDefault(); saveItem(); } });
@@ -1432,11 +1661,28 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
   var groupName = document.getElementById('groupName');
   var groupIcon = document.getElementById('groupIcon');
   var editingGroupId = null;
+  /* 分组图标快捷面板：预置 emoji 点击填入，输入框仍可手输/粘贴任意字符 */
+  var EMOJI_PRESETS = ['✨','✍️','🖋','✏️','📝','📄','📋','🗒','📚','📖','📎','🔗','🧾','📊','📈','📉','🗂','📁','📦','🗃','🧰','💬','🗣','📣','☎️','📧','✉️','🤝','🔄','👥','🎙','🎧','📌','🗓','📅','⏰','⏱','⚙️','🔧','🛠','🧭','🗺','🚀','🏁','🎯','📍','🧠','💡','🔍','🧩','🔬','🧪','🏆','🥇','⭐','🌟','🔥','✅','✔️','⚠️','🚨','🔒','🛡','💎','🎨','🖌','🎬','🎵','📷','🌈','🍀','🌱','🌸','⚡','❄️','☀️','🌙','🍎','☕','🍵','🎂','🎁','🎉','🎊','🧸','🐣','🦄','💻','🖥','⌨️','🖱','📱','🔋','💾','📡'];
+  var emojiPickEl = document.getElementById('emojiPick');
+  EMOJI_PRESETS.forEach(function(e){
+    var b = document.createElement('button');
+    b.type = 'button';
+    b.textContent = e;
+    b.title = e;
+    b.addEventListener('click', function(){ groupIcon.value = e; syncEmojiSel(); });
+    emojiPickEl.appendChild(b);
+  });
+  function syncEmojiSel(){
+    var v = groupIcon.value.trim();
+    Array.prototype.forEach.call(emojiPickEl.children, function(b){ b.classList.toggle('sel', b.textContent === v); });
+  }
+  groupIcon.addEventListener('input', syncEmojiSel);
   function openGroupForm(g){
     editingGroupId = g ? g.id : null;
     groupTitleEl.textContent = g ? '编辑分组' : '新建分组';
     groupName.value = g ? g.name : '';
     groupIcon.value = g ? g.icon : '✨';
+    syncEmojiSel();
     groupMask.classList.add('open');
     setTimeout(function(){ groupName.focus(); }, 60);
   }
@@ -1482,6 +1728,22 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
       cmd: '请删除锦囊分组「' + g.name + '」'
     }).then(function(ok){ if (ok) toast('分组「' + g.name + '」已删除'); });
   }
+  function reorderGroups(moveId, beforeId){
+    var ids = state.data.groups.map(function(g){ return g.id; });
+    var mi = ids.indexOf(moveId), bi = ids.indexOf(beforeId);
+    if (mi < 0 || bi < 0 || mi === bi) return;
+    ids.splice(mi, 1);
+    ids.splice(ids.indexOf(beforeId), 0, moveId);
+    writePromptsJson({
+      apply: function(data){
+        var byId = {};
+        data.groups.forEach(function(g){ byId[g.id] = g; });
+        data.groups = ids.map(function(id){ return byId[id]; });
+        return data;
+      },
+      cmd: '请把锦囊分组顺序调整为：' + ids.map(function(id){ var g = groupOf(id); return g ? g.name : id; }).join('、')
+    }).then(function(ok){ if (ok) toast('分组顺序已保存'); });
+  }
   document.getElementById('groupCancel').addEventListener('click', closeGroupForm);
   document.getElementById('groupSave').addEventListener('click', saveGroup);
   groupName.addEventListener('keydown', function(e){ if (e.key === 'Enter'){ e.preventDefault(); saveGroup(); } });
@@ -1489,6 +1751,56 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
   var btnAddItem = document.getElementById('btnAddItem');
   if (btnAddItem) btnAddItem.addEventListener('click', function(){ openItemForm(null); });
 
+  /* ---------- 导入 / 导出 ---------- */
+  var btnBkExport = document.getElementById('btnBkExport');
+  var btnBkImport = document.getElementById('btnBkImport');
+  var importFile = document.getElementById('importFile');
+  function doExport(){
+    if (!state.data){ toast('暂无数据可导出', true); return; }
+    var blob = new Blob([JSON.stringify(state.data, null, 2)], { type: 'application/json' });
+    var url = URL.createObjectURL(blob);
+    var a = document.createElement('a');
+    function p(n){ return (n < 10 ? '0' : '') + n; }
+    var d = new Date();
+    a.href = url;
+    a.download = 'prompts-backup-' + d.getFullYear() + p(d.getMonth()+1) + p(d.getDate()) + '-' + p(d.getHours()) + p(d.getMinutes()) + p(d.getSeconds()) + '.json';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    setTimeout(function(){ URL.revokeObjectURL(url); }, 1500);
+    toast('已导出 ' + state.data.prompts.length + ' 条提示词');
+  }
+  function doImport(){
+    if (!bkDirHandle){ toast('请先授权目录（页面顶部「💾 授权目录备份」）', true); return; }
+    importFile.value = '';
+    importFile.click();
+  }
+  importFile.addEventListener('change', function(){
+    var f = importFile.files[0];
+    if (!f) return;
+    var reader = new FileReader();
+    reader.onload = function(){
+      var d = null;
+      try {
+        d = JSON.parse(String(reader.result));
+        if (!d || !Array.isArray(d.groups) || !Array.isArray(d.prompts)){
+          toast('文件格式不对：需要含 groups 与 prompts 的锦囊数据', true);
+          return;
+        }
+      } 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 + ' 条提示词');
+      });
+    };
+    reader.readAsText(f, 'utf-8');
+  });
+  btnBkExport.addEventListener('click', doExport);
+  btnBkImport.addEventListener('click', doImport);
+  var tagFilterClear = document.getElementById('tagFilterClear');
+  if (tagFilterClear) tagFilterClear.addEventListener('click', function(){ applyTagFilter(''); });
+
   /* ---------- 排序指令 ---------- */
   function buildSortCmd(){
     var lines = ['请帮我调整 prompt-pouch 锦囊（按以下内容落盘 prompts.json）：'];
@@ -2009,9 +2321,9 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
     });
 })();
 
-/* 主题换肤：四套配色随点随换；记忆上次选择（localStorage，失败静默） */
+/* 主题换肤：五套配色随点随换；记忆上次选择（localStorage，失败静默） */
 (function(){
-  var THEMES = ['gold','tech','mono','mint'];
+  var THEMES = ['gold','tech','mono','light','mint'];
   function init(){
     var dock = document.getElementById('themeDock');
     if (!dock) return;
@@ -2043,7 +2355,8 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
   <div class="theme-dock" id="themeDock">
     <button class="th-dot" type="button" data-theme="gold" title="gold 暖棕金"></button>
     <button class="th-dot" type="button" data-theme="tech" title="tech 深蓝科技"></button>
-    <button class="th-dot" type="button" data-theme="mono" title="mono Darcula 深灰蓝"></button>
+    <button class="th-dot" type="button" data-theme="mono" title="mono IDEA 黑亮"></button>
+    <button class="th-dot" type="button" data-theme="light" title="light IDEA 白亮"></button>
     <button class="th-dot" type="button" data-theme="mint" title="mint 薄荷绿"></button>
   </div>
 </body>

package/prompt-pouch/resources/usage-guide.md

@@ -1,6 +1,6 @@
 # 锦囊使用指南
 
-锦囊（prompt-pouch）是一个本地 HTML 提示词管理台：暖棕金默认配色，内置四套主题（暖棕金/深蓝科技/Darcula 深灰蓝/薄荷绿，右下角换肤坞随时切换），分组侧栏 + 搜索 + 卡片网格，妙计入囊、随取随用。页面与数据分离——页面可直写、AI 可代笔（双笔协作），你只管说，刷新即见。
+锦囊（prompt-pouch）是一个本地 HTML 提示词管理台：暖棕金默认配色，内置五套主题（暖棕金/深蓝科技/IDEA 黑亮/IDEA 白亮/薄荷绿，右下角换肤坞随时切换），分组侧栏 + 搜索 + 卡片网格（背景四层科技氛围与卡片细纹，与日报/周报/年报同源），妙计入囊、随取随用。页面与数据分离——页面可直写、AI 可代笔（双笔协作），你只管说，刷新即见。
 
 ## 怎么用
 
@@ -10,17 +10,23 @@
 4. **删除**：页面点卡片「🗑」；或对 AI 说「删掉锦囊里『XX』这条」
 5. **排序与移组**：顶栏「排序」切换四种方式——最新添加（默认）/ 最近使用 / 使用频率 / 手动顺序；想手动排时拖动卡片或点 ▲▼（自动切回手动），点卡片 ⇄ 可把提示词移到其它分组；已授权目录时排序/移组 2 秒内自动保存，未授权时点「📋 复制变更指令」把指令发给 AI 落盘；复制过提示词后卡片右上角会显示「⧉ N 次 · 最近时间」（最近使用/使用频率排序即按复制统计）；AI 落盘后回页面点「✓ 已落盘」清除未保存标记
 6. **收藏**：卡片右上角星标，收藏/取消收藏指令由 AI 同步到数据文件
-7. **分组管理**：侧栏底部「＋ 新建分组」；悬停分组名出现「✎ 改名 / 🗑 删除」（组内还有提示词时不允许删，先移出或删条目）；重名分组会提示
+7. **分组管理**：侧栏底部「＋ 新建分组」；悬停分组名出现「✎ 改名 / 🗑 删除」（组内还有提示词时不允许删，先移出或删条目）；重名分组会提示；新建/编辑分组时图标输入框下方有快捷 emoji 面板（点击即填入、选中高亮，输入框仍可手输/粘贴任意 emoji）
+8. **标签全交互**：点卡片标签立即按标签筛选（顶栏出现「🏷 标签」胶囊，点 ✕ 或再点同标签取消，切分组自动清除，与搜索叠加）；标签悬停出「✕」点它直接删除该标签；标签不满 3 个时悬停出「＋」快速加标签（多个用逗号分隔）——已授权目录即写即存，未授权时操作指令复制给 AI 落盘
+9. **分组排序**：左侧分组条可直接拖拽调整顺序（已授权目录即写即存，未授权时指令自动复制给 AI 落盘）
+10. **导入 / 导出**：顶栏「⤓ 导出」把当前全部数据下载为 JSON 备份文件（文件名带时间戳）；「⤒ 导入」选择 JSON 文件整库覆盖现有数据（导入前自动备份，可从「↩ 恢复」回滚；未授权目录时导出仍可用、导入需先授权）
 
 ## 特色功能
 
-- **搜索高亮**：搜索框输入关键词，命中卡片的标题/正文/标签中匹配词以主题色徽标高亮（四主题自适应）；命中落在正文三行折叠区之外时，卡片顶部提示「正文命中，详见详情」，点开详情弹窗全文同样高亮
+- **搜索高亮**：搜索框输入关键词，命中卡片的标题/正文/标签中匹配词以主题色徽标高亮（五主题自适应）；命中落在正文三行折叠区之外时，卡片顶部提示「正文命中，详见详情」，点开详情弹窗全文同样高亮
 - **{变量} 插值**：内容含花括号占位（如「{功能名}」）的提示词，点复制会自动弹出填充面板，填入变量后实时预览再复制
 - **自动备份（默认开启）**：数据一有变更 2 秒内自动备份——首次变更会请求授权写入 prompt-pouch.html 所在目录（弹窗选同目录即可，选一次后浏览器记住），写 backup/pouch-backup.json 并滚动保留上一版 .prev.json；未授权或浏览器不支持时自动降级为本地快照（浏览器内保留最近 5 份），页内「↩ 恢复」均可一键回滚；顶栏「📂 换目录」可随时重新配置备份目录
 - **详情弹窗**：点卡片「👁 详情」弹出全文查看（超长内容限高 52vh 内滚动），带复制与修改入口，附时间线（创建 / 上次修改 / 最近使用）；含 {变量} 的模板会在弹窗里标出变量清单，复制时自动进入填充面板
 - **页面直写（双笔）**：页面增删改直接写入 data/prompts.json（与自动备份共用同一目录授权）；未授权时自动降级——生成操作指令复制到剪贴板，粘贴给 AI 落盘
 - **侧栏局部滚动**：分组较多时，左侧「收藏 + 分组列表」区域独立滚动（窄滚动条），「全部」「＋ 新建分组」「锦囊用法」固定不滚；窄屏下自动恢复平铺排列
-- **批量整理入囊**：把一堆文字/文件交给 AI，或说「把最近对话框内容整理进锦囊」，AI 按现有分组归档、装不下的推荐新分组、含具体词的可泛化为 {变量} 插值（附改写示例），你调整确认后一次性写入
+- **批量整理入囊**：把一堆文字/文件交给 AI，或说「把最近对话框内容整理进锦囊」——两段确认：先定条目（AI 默认智能打标——每条自动配 1-3 个语义标签，可改可删；含具体词的可泛化为 {变量} 插值，附改写示例）→ 再定分组（归组理由 + 装不下的推荐新分组名），都确认后一次性写入；条目少（≤3 条）两段合一
+- **标签全交互**：点标签即筛选（顶栏胶囊一键清除，再点取消，切分组自动清除，与搜索叠加）；标签悬停「✕」删、「＋」加（最多 3 个），授权目录即写即存，未授权指令交 AI
+- **导入 / 导出 JSON**：顶栏「⤓ 导出」一键下载全量数据为 JSON 备份文件（文件名带时间戳）；「⤒ 导入」选择 JSON 文件整库覆盖（导入前自动备份、可恢复）；未授权目录时导出仍可用、导入需先授权
+- **分组拖拽排序**：左侧分组条拖拽即可重排分组顺序（授权目录即写即存；未授权时生成「请把锦囊分组顺序调整为…」指令复制给 AI 落盘）
 - **四种排序**：最新添加（按添加时间倒序，全时间范围）/ 最近使用 / 使用频率 / 手动顺序；排序选择会自动记住，下次打开不变
 - **使用统计**：每次点复制，页面自动记录该提示词的最近使用时间与累计次数（存浏览器本地），供「最近使用」「使用频率」排序使用，数据文件不写这些字段
 - **修改时间**：每次修改提示词（页面直写或 AI 代笔），数据文件会记下 updatedAt 修改时间，详情弹窗时间线可见；新增不写、仅排序不写
@@ -29,4 +35,5 @@
 ## 提醒
 
 - 数据在 data/prompts.json（备份在 backup/ 目录）；迁移/备份复制 data/ 与 backup/ 两个目录即可
+- 「⤓ 导出」的 JSON 文件可直接在另一台电脑「⤒ 导入」整库恢复（含分组与标签）
 - 页面样式与脚本升级由仓库 reference.html 重新复制完成，不影响你的数据

package/prompt-pouch/user-config.md

@@ -15,7 +15,7 @@ BACKUP_DIR: backup
 INIT_DATA: example
 
 # 页面主题（初始化时写入页面根标签 data-theme；页面右下角换肤坞可随时切换）
-# 可选：gold 暖棕金（默认）/ tech 深蓝科技 / mono Darcula 深灰蓝 / mint 薄荷绿
+# 可选：gold 暖棕金（默认）/ tech 深蓝科技 / mono IDEA 黑亮 / light IDEA 白亮 / mint 薄荷绿
 THEME: gold
 
 # 初始化/落盘前是否先确认目标目录