Merge pull request #2 from Albert-PZY/feat/recycle-bin-tab

回收站改为标签页展示

Author: Albert-PZY

scripts/bundle-single-file.mjs

@@ -58,7 +58,9 @@ async function main() {
     }
     const size = Buffer.byteLength(r.code);
     console.log(`[bundle] 内联脚本 ${path.relative(dist, r.file)}  ${kb(size)}`);
-    html = html.replace(r.token, `<script type="module">${guard(r.code)}</script>`);
+    // 用替换函数而非替换字符串，避免代码里的 $&、$1、$$ 等被 String.replace 当成特殊模式解释
+    const replacement = `<script type="module">${guard(r.code)}</script>`;
+    html = html.replace(r.token, () => replacement);
   }
 
   // 2) 内联遗留的 <link rel="stylesheet">（正常情况下 Astro 已内联，这里兜底）
@@ -71,7 +73,8 @@ async function main() {
     try {
       const css = await readFile(file, 'utf8');
       console.log(`[bundle] 内联样式 ${path.relative(dist, file)}  ${kb(Buffer.byteLength(css))}`);
-      html = html.replace(tag, `<style>${css}</style>`);
+      const style = `<style>${css}</style>`;
+      html = html.replace(tag, () => style);
     } catch {
       console.warn(`[bundle] 跳过（读不到）：${href}`);
     }

src/lib/app.ts

@@ -170,6 +170,10 @@ function bindShortcuts(list: ListView, topbar: Topbar): void {
     if ((e.key === 'Delete' || e.key === 'Backspace') && store.selection.size) {
       e.preventDefault();
       const ids = [...store.selection];
+      if (store.scope.kind === 'trash') {
+        void store.purgeBookmarks(ids).then((n) => notice(`已彻底删除 ${n} 条书签`, { kind: 'warn' }));
+        return;
+      }
       void store.deleteBookmarks(ids).then(() => {
         notice(`已将 ${ids.length} 条书签移入回收站`, { kind: 'ok' });
         toast(`已删除 ${ids.length} 条书签`, { action: { label: '撤销', onClick: () => void store.undo() } });

src/lib/state.ts

@@ -70,6 +70,8 @@ class Store {
   undoStack: string[] = [];
   /** 回收站：软删除的书签/分类，用户可恢复或彻底删除 */
   trash: TrashItem[] = [];
+  /** 回收站作用域下的书签查找表（拍平自 trash），供主视图渲染 */
+  trashView = new Map<string, Bookmark>();
 
   /* --------------------------- 初始化 --------------------------- */
 
@@ -212,6 +214,34 @@ class Store {
   recompute(): void {
     const { scope, query } = this;
     let pool: Bookmark[];
+
+    if (scope.kind === 'trash') {
+      this.trashView.clear();
+      const bag: Bookmark[] = [];
+      // 回收站按删除时间倒序拍平，最新删除的在前
+      for (const t of this.trash) {
+        for (const b of t.bookmarks) {
+          const indexed = indexOf({ ...b });
+          this.trashView.set(b.id, indexed);
+          bag.push(indexed);
+        }
+      }
+      const tks = tokenize(query);
+      if (tks.length) {
+        const scored: Array<[Bookmark, number]> = [];
+        for (const b of bag) {
+          const s = score(b, tks);
+          if (s > 0) scored.push([b, s]);
+        }
+        scored.sort((a, b) => b[1] - a[1]);
+        this.visible = scored.map((x) => x[0].id);
+      } else {
+        this.visible = bag.map((b) => b.id);
+      }
+      return;
+    }
+
+    this.trashView.clear();
     const all = [...this.bookmarks.values()];
 
     if (scope.kind === 'folder') {
@@ -492,6 +522,79 @@ class Store {
 
   /* --------------------------- 回收站 / 撤销 --------------------------- */
 
+  /** 统一取书签：回收站作用域优先取拍平表，其余取正常表 */
+  getBookmark(id: string): Bookmark | undefined {
+    if (this.scope.kind === 'trash') return this.trashView.get(id) ?? this.bookmarks.get(id);
+    return this.bookmarks.get(id);
+  }
+
+  /** 取分类名：正常表没有则回落到回收站里被删的分类，保证原样展示 */
+  folderNameOf(folderId: string | null): string | null {
+    if (!folderId) return null;
+    const live = this.folders.get(folderId);
+    if (live) return live.name;
+    for (const t of this.trash) {
+      const f = t.folders.find((x) => x.id === folderId);
+      if (f) return f.name;
+    }
+    return null;
+  }
+
+  /** 从回收站里恢复指定的若干书签（及其所需的父级分类） */
+  async restoreBookmarks(ids: readonly string[]): Promise<number> {
+    const idset = new Set(ids);
+    const restoredBookmarks: Bookmark[] = [];
+    const restoredFolders: Folder[] = [];
+    const emptied: string[] = [];
+    for (const t of this.trash) {
+      const hit = t.bookmarks.filter((b) => idset.has(b.id));
+      if (!hit.length) continue;
+      // 补回这些书签所依赖、且当前缺失的分类
+      for (const b of hit) {
+        if (b.folderId && !this.folders.has(b.folderId)) {
+          for (const f of t.folders) {
+            if (f.id === b.folderId && !this.folders.has(f.id)) {
+              this.folders.set(f.id, f);
+              restoredFolders.push(f);
+            }
+          }
+        }
+        this.bookmarks.set(b.id, indexOf({ ...b }));
+        restoredBookmarks.push(b);
+      }
+      t.bookmarks = t.bookmarks.filter((b) => !idset.has(b.id));
+      if (!t.bookmarks.length) emptied.push(t.id);
+    }
+    if (!restoredBookmarks.length) return 0;
+    this.trash = this.trash.filter((t) => !emptied.includes(t.id));
+    this.undoStack = this.undoStack.filter((x) => !emptied.includes(x));
+    await db.bulkWrite({ folders: restoredFolders, bookmarks: restoredBookmarks });
+    await this.persistTrash();
+    this.recompute();
+    emit('data', 'view', 'selection');
+    return restoredBookmarks.length;
+  }
+
+  /** 从回收站里彻底删除指定书签（不可恢复） */
+  async purgeBookmarks(ids: readonly string[]): Promise<number> {
+    const idset = new Set(ids);
+    let removed = 0;
+    const emptied: string[] = [];
+    for (const t of this.trash) {
+      const before = t.bookmarks.length;
+      t.bookmarks = t.bookmarks.filter((b) => !idset.has(b.id));
+      removed += before - t.bookmarks.length;
+      if (!t.bookmarks.length) emptied.push(t.id);
+    }
+    if (!removed) return 0;
+    this.trash = this.trash.filter((t) => !emptied.includes(t.id));
+    this.undoStack = this.undoStack.filter((x) => !emptied.includes(x));
+    await this.persistTrash();
+    this.recompute();
+    emit('data', 'view', 'selection');
+    return removed;
+  }
+
   private persistTrash(): Promise<void> {
     return db.setMeta('trash', this.trash.map((t) => ({ ...t, bookmarks: t.bookmarks.map(stripCache) })));
   }

src/lib/types.ts

@@ -75,7 +75,7 @@ export type FontFamily = 'default' | 'hei' | 'song' | 'kai' | 'yuan' | 'custom';
 export type SmartScope = 'all' | 'recent' | 'favorite' | 'unsorted' | 'duplicates';
 
 export interface Scope {
-  kind: 'smart' | 'folder' | 'tag';
+  kind: 'smart' | 'folder' | 'tag' | 'trash';
   value: string;
 }
 

src/lib/ui/crumbs.ts

@@ -33,12 +33,14 @@ export class Crumbs {
       frag.appendChild(el('h1', { class: 'crumbs__title', text: last ? last.name : '分类' }));
     } else if (scope.kind === 'tag') {
       frag.appendChild(el('h1', { class: 'crumbs__title', text: `# ${scope.value}` }));
+    } else if (scope.kind === 'trash') {
+      frag.appendChild(el('h1', { class: 'crumbs__title', text: '回收站' }));
     } else {
       frag.appendChild(el('h1', { class: 'crumbs__title', text: SMART_LABEL[scope.value] ?? '全部书签' }));
     }
 
     const n = store.visible.length;
-    const total = store.bookmarks.size;
+    const total = scope.kind === 'trash' ? store.trashView.size : store.bookmarks.size;
     const text = store.query.trim() ? `${n} / ${total}` : String(n);
     frag.appendChild(el('span', { class: 'crumbs__count', text }));
 

src/lib/ui/listview.ts

@@ -6,6 +6,7 @@ import { VirtualGrid, type VirtualMetrics } from '../virtual';
 import { icon } from './icons';
 import { openMenu } from './menu';
 import { editBookmark, pickFolder } from './dialogs';
+import { confirmDialog } from './modal';
 import { toast, notice } from './toast';
 
 const METRICS: Record<ViewMode, VirtualMetrics> = {
@@ -114,10 +115,14 @@ export class ListView {
     host.classList.add(`view-${store.settings.view}`);
   }
 
+  private get isTrash(): boolean {
+    return store.scope.kind === 'trash';
+  }
+
   private items(): Bookmark[] {
     const out: Bookmark[] = [];
     for (const id of store.visible) {
-      const b = store.bookmarks.get(id);
+      const b = store.getBookmark(id);
       if (b) out.push(b);
     }
     return out;
@@ -133,6 +138,15 @@ export class ListView {
   }
 
   private paintEmpty(): void {
+    if (this.isTrash) {
+      const searching = store.query.trim().length > 0;
+      this.emptyBox.replaceChildren(
+        el('div', { class: 'empty__art', html: icon(searching ? 'search' : 'trash') }),
+        el('div', { class: 'empty__title', text: searching ? '回收站里没有匹配项' : '回收站是空的' }),
+        el('p', { class: 'empty__desc', text: searching ? '换个关键词试试。' : '删除的书签会先进入这里，可随时恢复或彻底清除。' }),
+      );
+      return;
+    }
     const hasData = store.bookmarks.size > 0;
     const searching = store.query.trim().length > 0;
     const title = searching ? '没有匹配的书签' : hasData ? '这个分类还是空的' : '开始导入你的书签';
@@ -232,13 +246,26 @@ export class ListView {
     }
 
     const folder = node.querySelector<HTMLElement>('.item__folder')!;
-    const path = b.folderId ? store.folders.get(b.folderId)?.name : null;
+    const path = store.folderNameOf(b.folderId);
     folder.textContent = path ?? '未分类';
     folder.classList.toggle('chip--accent', !path);
 
-    const star = node.querySelector<HTMLElement>('[data-act="star"]')!;
-    star.classList.toggle('is-on', b.favorite);
-    star.innerHTML = icon(b.favorite ? 'starOn' : 'star');
+    const actions = node.querySelector<HTMLElement>('.item__actions')!;
+    const trash = this.isTrash;
+    if (actions.dataset.mode !== (trash ? 'trash' : 'normal')) {
+      actions.dataset.mode = trash ? 'trash' : 'normal';
+      actions.innerHTML = trash
+        ? `<button class="item__act" data-act="restore" type="button" tabindex="-1" title="恢复">${icon('undo')}</button>
+           <button class="item__act item__act--danger" data-act="purge" type="button" tabindex="-1" title="彻底删除">${icon('trash')}</button>`
+        : `<button class="item__act" data-act="star" type="button" tabindex="-1" title="星标">${icon('star')}</button>
+           <button class="item__act" data-act="edit" type="button" tabindex="-1" title="编辑">${icon('pencil')}</button>
+           <button class="item__act item__act--danger" data-act="del" type="button" tabindex="-1" title="删除">${icon('trash')}</button>`;
+    }
+    if (!trash) {
+      const star = actions.querySelector<HTMLElement>('[data-act="star"]')!;
+      star.classList.toggle('is-on', b.favorite);
+      star.innerHTML = icon(b.favorite ? 'starOn' : 'star');
+    }
 
     const cb = node.querySelector<HTMLInputElement>('input[type=checkbox]')!;
     cb.checked = store.selection.has(b.id);
@@ -296,6 +323,11 @@ export class ListView {
     });
 
     node.addEventListener('dragstart', (e) => {
+      // 回收站里的书签不参与归类拖拽
+      if (this.isTrash) {
+        e.preventDefault();
+        return;
+      }
       const id = this.idOf(node);
       const ids = store.selection.has(id) ? [...store.selection] : [id];
       e.dataTransfer?.setData('application/x-cozytag', JSON.stringify(ids));
@@ -318,14 +350,14 @@ export class ListView {
   }
 
   private open(id: string): void {
-    const b = store.bookmarks.get(id);
+    const b = store.getBookmark(id);
     if (!b) return;
     if (store.settings.openInNewTab) window.open(b.url, '_blank', 'noopener,noreferrer');
     else location.href = b.url;
   }
 
   private async runAction(act: string, id: string): Promise<void> {
-    const b = store.bookmarks.get(id);
+    const b = store.getBookmark(id);
     if (!b) return;
     switch (act) {
       case 'star':
@@ -339,14 +371,66 @@ export class ListView {
         notice('已移入回收站', { kind: 'ok' });
         toast('已删除 1 条书签', { action: { label: '撤销', onClick: () => void store.undo() } });
         break;
+      case 'restore':
+        await store.restoreBookmarks([id]);
+        notice('已恢复', { kind: 'ok' });
+        toast('已恢复 1 条书签');
+        break;
+      case 'purge': {
+        const ok = await confirmDialog({
+          title: '彻底删除',
+          message: '该书签将被永久删除，无法恢复。',
+          confirmText: '彻底删除',
+          danger: true,
+        });
+        if (ok) {
+          await store.purgeBookmarks([id]);
+          notice('已彻底删除', { kind: 'warn' });
+        }
+        break;
+      }
     }
   }
 
   private itemMenu(id: string, x: number, y: number): void {
-    const b = store.bookmarks.get(id);
+    const b = store.getBookmark(id);
     if (!b) return;
     const ids = store.selection.size && store.selection.has(id) ? [...store.selection] : [id];
     const many = ids.length > 1;
+    if (this.isTrash) {
+      openMenu(x, y, [
+        { label: many ? `打开 ${ids.length} 个标签页` : '打开', icon: 'external', onClick: () => ids.slice(0, 20).forEach((i) => this.open(i)) },
+        { label: '复制链接', icon: 'copy', onClick: () => void navigator.clipboard.writeText(ids.map((i) => store.getBookmark(i)?.url ?? '').join('\n')).then(() => toast('链接已复制')) },
+        'sep',
+        {
+          label: many ? `恢复 ${ids.length} 条` : '恢复',
+          icon: 'undo',
+          onClick: async () => {
+            const n = await store.restoreBookmarks(ids);
+            notice(`已恢复 ${n} 条书签`, { kind: 'ok' });
+            toast(`已恢复 ${n} 条书签`);
+          },
+        },
+        {
+          label: many ? `彻底删除 ${ids.length} 条` : '彻底删除',
+          icon: 'trash',
+          danger: true,
+          onClick: async () => {
+            const ok = await confirmDialog({
+              title: many ? `彻底删除 ${ids.length} 条书签` : '彻底删除',
+              message: '选中的书签将被永久删除，无法恢复。',
+              confirmText: '彻底删除',
+              danger: true,
+            });
+            if (ok) {
+              const n = await store.purgeBookmarks(ids);
+              notice(`已彻底删除 ${n} 条书签`, { kind: 'warn' });
+            }
+          },
+        },
+      ]);
+      return;
+    }
     openMenu(x, y, [
       { label: many ? `打开 ${ids.length} 个标签页` : '打开', icon: 'external', onClick: () => ids.slice(0, 20).forEach((i) => this.open(i)) },
       { label: '复制链接', icon: 'copy', onClick: () => void navigator.clipboard.writeText(ids.map((i) => store.bookmarks.get(i)?.url ?? '').join('\n')).then(() => toast('链接已复制')) },