Merge pull request #4 from Albert-PZY/refactor/mobile-and-cleanup

refactor: 移动端遮挡修复 + 冗余代码精简

Author: Albert-PZY

src/lib/app.ts

@@ -1,7 +1,7 @@
 /** 应用入口：装配各视图、绑定全局事件与快捷键 */
 import { on, store } from './state';
 import type { BackgroundConfig } from './types';
-import { $ } from './util';
+import { $, el, onScrollRAF, prefersReducedMotion } from './util';
 import { Crumbs } from './ui/crumbs';
 import { editBookmark } from './ui/dialogs';
 import { openExportDialog } from './ui/exporter';
@@ -44,6 +44,7 @@ async function boot(): Promise<void> {
   bindShortcuts(list, topbar);
   bindFileDrop();
   bindSidebarResizer();
+  bindTopbarHeight();
   bindTopbarAutohide();
   bindBackTop();
   bindScrollProgress();
@@ -64,10 +65,9 @@ function bindFooter(): void {
   const foot = document.getElementById('sidebar-foot');
   if (!foot) return;
   const paint = () => {
-    foot.replaceChildren();
-    foot.append(
-      Object.assign(document.createElement('span'), { textContent: `${store.bookmarks.size} 书签` }),
-      Object.assign(document.createElement('span'), { textContent: `${store.folders.size} 分类` }),
+    foot.replaceChildren(
+      el('span', { text: `${store.bookmarks.size} 书签` }),
+      el('span', { text: `${store.folders.size} 分类` }),
     );
   };
   on('data', paint);
@@ -292,6 +292,20 @@ function bindSidebarResizer(): void {
   handle.addEventListener('pointercancel', finish);
 }
 
+/**
+ * 实时测量顶栏真实高度写入 --topbar-h。
+ * 移动端顶栏换行后高度可变，主区/侧栏抽屉据此定位，避免搜索行遮挡内容。
+ */
+function bindTopbarHeight(): void {
+  const bar = document.querySelector('.topbar');
+  if (!bar) return;
+  const sync = () => {
+    document.documentElement.style.setProperty('--topbar-h', `${bar.getBoundingClientRect().height}px`);
+  };
+  new ResizeObserver(sync).observe(bar);
+  sync();
+}
+
 /**
  * 顶栏下滑自动隐藏、上滑恢复。
  * 监听主滚动容器，用 rAF 节流；累计滚动超阈值才切换，避免抖动误触。
@@ -304,11 +318,9 @@ function bindTopbarAutohide(): void {
   let lastY = 0;
   let acc = 0;
   let hidden = false;
-  let ticking = false;
   const THRESHOLD = 48;
 
   const update = () => {
-    ticking = false;
     const y = scroller.scrollTop;
     const dy = y - lastY;
     lastY = y;
@@ -335,16 +347,7 @@ function bindTopbarAutohide(): void {
     }
   };
 
-  scroller.addEventListener(
-    'scroll',
-    () => {
-      if (!ticking) {
-        ticking = true;
-        requestAnimationFrame(update);
-      }
-    },
-    { passive: true },
-  );
+  onScrollRAF(scroller, update);
 }
 
 /**
@@ -357,25 +360,13 @@ function bindScrollProgress(): void {
   const bar = document.querySelector('.scrollprog__bar') as HTMLElement | null;
   if (!scroller || !bar) return;
 
-  let ticking = false;
-
   const update = () => {
-    ticking = false;
     const sh = scroller.scrollHeight - scroller.clientHeight;
     const pct = sh > 0 ? (scroller.scrollTop / sh) * 100 : 0;
     bar.style.width = `${Math.min(100, Math.max(0, pct))}%`;
   };
 
-  scroller.addEventListener(
-    'scroll',
-    () => {
-      if (!ticking) {
-        ticking = true;
-        requestAnimationFrame(update);
-      }
-    },
-    { passive: true },
-  );
+  onScrollRAF(scroller, update);
 }
 
 /** 回到顶部按钮：滚动超阈值后左下角浮现，点击平滑返顶 */
@@ -386,31 +377,19 @@ function bindBackTop(): void {
 
   const THRESHOLD = 600;
   let shown = false;
-  let ticking = false;
 
   const update = () => {
-    ticking = false;
     const next = scroller.scrollTop > THRESHOLD;
     if (next !== shown) {
       shown = next;
       btn.classList.toggle('is-shown', shown);
     }
   };
 
-  scroller.addEventListener(
-    'scroll',
-    () => {
-      if (!ticking) {
-        ticking = true;
-        requestAnimationFrame(update);
-      }
-    },
-    { passive: true },
-  );
+  onScrollRAF(scroller, update);
 
   btn.addEventListener('click', () => {
-    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    scroller.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' });
+    scroller.scrollTo({ top: 0, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
   });
 }
 

src/lib/db.ts

@@ -151,7 +151,7 @@ export async function bulkWrite(payload: {
 }
 
 /** 去掉内存态检索缓存字段后再持久化 */
-function stripRuntime(b: Bookmark): Bookmark {
+export function stripRuntime(b: Bookmark): Bookmark {
   if (b._s === undefined) return b;
   const { _s, ...rest } = b;
   void _s;

src/lib/state.ts

@@ -596,7 +596,7 @@ class Store {
   }
 
   private persistTrash(): Promise<void> {
-    return db.setMeta('trash', this.trash.map((t) => ({ ...t, bookmarks: t.bookmarks.map(stripCache) })));
+    return db.setMeta('trash', this.trash.map((t) => ({ ...t, bookmarks: t.bookmarks.map(db.stripRuntime) })));
   }
 
   /** 软删除入站；保留最近 200 条，超出则丢弃最旧 */
@@ -668,14 +668,6 @@ export function indexOf(b: Bookmark): Bookmark {
   return b;
 }
 
-/** 去掉内存态检索缓存字段，用于持久化回收站 */
-function stripCache(b: Bookmark): Bookmark {
-  if (b._s === undefined) return b;
-  const { _s, ...rest } = b;
-  void _s;
-  return rest as Bookmark;
-}
-
 export function tokenize(q: string): string[] {
   return q
     .trim()

src/lib/ui/dialogs.ts

@@ -425,38 +425,25 @@ export async function openSettings(): Promise<void> {
   const bgHint = el('div', { class: 'bg-preview__hint' });
   bgPreview.append(bgMedia, bgHint);
 
-  /* 背景图不透明度：仅控制背景层 */
-  const bgOpacityLabel = el('div', { class: 'field__hint', text: `背景不透明度 ${store.background.opacity}%` });
-  const bgOpacityRange = el('input', { class: 'range', type: 'range', min: '0', max: '100', value: String(store.background.opacity) });
-  bgOpacityRange.addEventListener('input', () => {
-    const v = Number(bgOpacityRange.value);
-    bgOpacityLabel.textContent = `背景不透明度 ${v}%`;
-    void store.setBackground({ opacity: v });
-  });
-  const bgOpacityWrap = el('div', { style: 'flex:1;min-width:160px;display:flex;flex-direction:column;gap:6px' });
-  bgOpacityWrap.append(bgOpacityLabel, bgOpacityRange);
-
-  /* 页面内容层不透明度：让顶栏/侧栏/卡片半透明，背景透出 */
-  const pageOpacityLabel = el('div', { class: 'field__hint', text: `页面不透明度 ${store.background.pageOpacity}%` });
-  const pageOpacityRange = el('input', { class: 'range', type: 'range', min: '0', max: '100', value: String(store.background.pageOpacity) });
-  pageOpacityRange.addEventListener('input', () => {
-    const v = Number(pageOpacityRange.value);
-    pageOpacityLabel.textContent = `页面不透明度 ${v}%`;
-    void store.setBackground({ pageOpacity: v });
-  });
-  const pageOpacityWrap = el('div', { style: 'flex:1;min-width:160px;display:flex;flex-direction:column;gap:6px' });
-  pageOpacityWrap.append(pageOpacityLabel, pageOpacityRange);
-
-  /* 视频音量：仅当背景为视频时显示 */
-  const volumeLabel = el('div', { class: 'field__hint', text: `视频音量 ${store.background.volume}%` });
-  const volumeRange = el('input', { class: 'range', type: 'range', min: '0', max: '100', value: String(store.background.volume) });
-  volumeRange.addEventListener('input', () => {
-    const v = Number(volumeRange.value);
-    volumeLabel.textContent = `视频音量 ${v}%`;
-    void store.setBackground({ volume: v });
-  });
-  const volumeWrap = el('div', { style: 'flex:1;min-width:160px;display:flex;flex-direction:column;gap:6px' });
-  volumeWrap.append(volumeLabel, volumeRange);
+  /* 百分比滑块工厂：label + range，返回 wrap 与同步函数 */
+  const percentSlider = (name: string, value: number, onInput: (v: number) => void) => {
+    const label = el('div', { class: 'field__hint', text: `${name} ${value}%` });
+    const range = el('input', { class: 'range', type: 'range', min: '0', max: '100', value: String(value) });
+    range.addEventListener('input', () => {
+      const v = Number(range.value);
+      label.textContent = `${name} ${v}%`;
+      onInput(v);
+    });
+    const wrap = el('div', { style: 'flex:1;min-width:160px;display:flex;flex-direction:column;gap:6px' });
+    wrap.append(label, range);
+    const sync = (v: number) => { range.value = String(v); label.textContent = `${name} ${v}%`; };
+    return { wrap, sync };
+  };
+
+  // 背景层不透明度、页面内容层不透明度、视频音量（音量仅视频时显示）
+  const bgOpacity = percentSlider('背景不透明度', store.background.opacity, (v) => void store.setBackground({ opacity: v }));
+  const pageOpacity = percentSlider('页面不透明度', store.background.pageOpacity, (v) => void store.setBackground({ pageOpacity: v }));
+  const volume = percentSlider('视频音量', store.background.volume, (v) => void store.setBackground({ volume: v }));
 
   const enToggle = toggle('启用背景', '', store.background.enabled, (v) => { void store.setBackground({ enabled: v }); });
 
@@ -514,7 +501,7 @@ export async function openSettings(): Promise<void> {
   bgPreview.addEventListener('pointercancel', () => { dragging = false; });
 
   const bgControls = el('div', { style: 'display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-top:10px' });
-  bgControls.append(bgOpacityWrap, pageOpacityWrap, volumeWrap);
+  bgControls.append(bgOpacity.wrap, pageOpacity.wrap, volume.wrap);
   const bgActions = el('div', { style: 'display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px' });
   bgActions.append(enToggle, uploadBtn, clearBtn);
   bgField.append(bgPreview, bgControls, bgActions, fileInput);
@@ -528,13 +515,10 @@ export async function openSettings(): Promise<void> {
     bgMedia.style.backgroundPosition = `${bg.posX}% ${bg.posY}%`;
     bgHint.textContent = bg.enabled ? (bg.src ? '拖动调整展示区域' : '请先上传图片') : '未启用';
     enToggle.querySelector('.switch')?.classList.toggle('is-on', bg.enabled);
-    bgOpacityRange.value = String(bg.opacity);
-    bgOpacityLabel.textContent = `背景不透明度 ${bg.opacity}%`;
-    pageOpacityRange.value = String(bg.pageOpacity);
-    pageOpacityLabel.textContent = `页面不透明度 ${bg.pageOpacity}%`;
-    volumeRange.value = String(bg.volume);
-    volumeLabel.textContent = `视频音量 ${bg.volume}%`;
-    volumeWrap.style.display = bg.mime.startsWith('video/') ? '' : 'none';
+    bgOpacity.sync(bg.opacity);
+    pageOpacity.sync(bg.pageOpacity);
+    volume.sync(bg.volume);
+    volume.wrap.style.display = bg.mime.startsWith('video/') ? '' : 'none';
   };
   paintBg();
 

src/lib/ui/importer.ts

@@ -2,7 +2,7 @@
 import { flattenSelection, parseNetscape } from '../netscape';
 import { normalizeUrl, store } from '../state';
 import type { Bookmark, Folder, ParsedNode, ParseResult } from '../types';
-import { el, formatBytes } from '../util';
+import { el, formatBytes, hostOf } from '../util';
 import { pickFolder } from './dialogs';
 import { icon } from './icons';
 import { openModal, type ModalHandle } from './modal';
@@ -213,18 +213,10 @@ function toTreeNodes(nodes: readonly ParsedNode[]): TreeNode[] {
     label: n.title,
     kind: n.type === 'folder' ? 'folder' : 'link',
     children: n.children ? toTreeNodes(n.children) : undefined,
-    meta: n.type === 'link' ? hostLabel(n.url ?? '') : undefined,
+    meta: n.type === 'link' ? hostOf(n.url ?? '') : undefined,
   }));
 }
 
-function hostLabel(url: string): string {
-  try {
-    return new URL(url).hostname.replace(/^www\./, '');
-  } catch {
-    return '';
-  }
-}
-
 /** 把勾选态回写到解析树 */
 function applyChecked(nodes: readonly ParsedNode[], checked: ReadonlySet<string>): void {
   for (const n of nodes) {

src/lib/ui/listview.ts

@@ -1,7 +1,7 @@
 /** 书签主视图：虚拟网格 + 选择 / 拖拽 / 右键菜单 / 键盘导航 */
 import { store, on, tokenize } from '../state';
 import type { Bookmark, ViewMode } from '../types';
-import { dataUrlToObjectUrl, el, escapeHtml, hueOf, relativeDate } from '../util';
+import { dataUrlToObjectUrl, el, escapeHtml, hueOf, openUrl, relativeDate } from '../util';
 import { VirtualGrid, type VirtualMetrics } from '../virtual';
 import { icon } from './icons';
 import { openMenu } from './menu';
@@ -352,8 +352,7 @@ export class ListView {
   private open(id: string): void {
     const b = store.getBookmark(id);
     if (!b) return;
-    if (store.settings.openInNewTab) window.open(b.url, '_blank', 'noopener,noreferrer');
-    else location.href = b.url;
+    openUrl(b.url, store.settings.openInNewTab);
   }
 
   private async runAction(act: string, id: string): Promise<void> {
@@ -397,10 +396,13 @@ export class ListView {
     if (!b) return;
     const ids = store.selection.size && store.selection.has(id) ? [...store.selection] : [id];
     const many = ids.length > 1;
+    // 打开/复制两项两种作用域通用（getBookmark 在非回收站作用域回退到 bookmarks）
+    const openItem = { label: many ? `打开 ${ids.length} 个标签页` : '打开', icon: 'external' as const, onClick: () => ids.slice(0, 20).forEach((i) => this.open(i)) };
+    const copyItem = { label: '复制链接', icon: 'copy' as const, onClick: () => void navigator.clipboard.writeText(ids.map((i) => store.getBookmark(i)?.url ?? '').join('\n')).then(() => toast('链接已复制')) };
     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('链接已复制')) },
+        openItem,
+        copyItem,
         'sep',
         {
           label: many ? `恢复 ${ids.length} 条` : '恢复',
@@ -432,8 +434,8 @@ export class ListView {
       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('链接已复制')) },
+      openItem,
+      copyItem,
       'sep',
       {
         label: '移动到…',

src/lib/ui/palette.ts

@@ -1,7 +1,7 @@
 /** 命令面板：Ctrl/⌘ + K —— 命令、分类跳转与书签直达三合一 */
 import { score, store, tokenize } from '../state';
 import type { Bookmark } from '../types';
-import { el } from '../util';
+import { el, openUrl } from '../util';
 import { editBookmark, openSettings } from './dialogs';
 import { icon, type IconName } from './icons';
 import { isModalOpen, openModal } from './modal';
@@ -94,8 +94,7 @@ export function openPalette(): void {
       hint: b.host,
       run: () => {
         m.close();
-        if (store.settings.openInNewTab) window.open(b.url, '_blank', 'noopener,noreferrer');
-        else location.href = b.url;
+        openUrl(b.url, store.settings.openInNewTab);
       },
     }));
   };

src/lib/ui/selbar.ts

@@ -26,13 +26,16 @@ export class SelBar {
     this.actions.replaceChildren(...(this.mode === 'trash' ? this.trashButtons() : this.buttons()));
   }
 
+  /** 图标+文字按钮工厂 */
+  private btn(name: IconName, label: string, run: () => void, danger = false): HTMLElement {
+    const b = el('button', { class: `btn btn--sm${danger ? ' btn--danger' : ''}`, type: 'button', html: icon(name) });
+    b.appendChild(el('span', { text: label }));
+    b.addEventListener('click', run);
+    return b;
+  }
+
   private trashButtons(): HTMLElement[] {
-    const make = (name: IconName, label: string, run: () => void, danger = false) => {
-      const b = el('button', { class: `btn btn--sm${danger ? ' btn--danger' : ''}`, type: 'button', html: icon(name) });
-      b.appendChild(el('span', { text: label }));
-      b.addEventListener('click', run);
-      return b;
-    };
+    const make = this.btn.bind(this);
     return [
       make('undo', '恢复', async () => {
         const ids = [...store.selection];
@@ -64,12 +67,7 @@ export class SelBar {
   }
 
   private buttons(): HTMLElement[] {
-    const make = (name: IconName, label: string, run: () => void, danger = false) => {
-      const b = el('button', { class: `btn btn--sm${danger ? ' btn--danger' : ''}`, type: 'button', html: icon(name) });
-      b.appendChild(el('span', { text: label }));
-      b.addEventListener('click', run);
-      return b;
-    };
+    const make = this.btn.bind(this);
     return [
       make('move', '移动到', async () => {
         const ids = [...store.selection];