Code Manager Panel with javgg site support (Preact + htm) + magnet screenshot preview + Linear UI
// ==UserScript== // @name Enhanced_Media_Helper // @version 3.6.0 // @description Code Manager Panel with javgg site support (Preact + htm) + magnet screenshot preview + Linear UI // @author cores // @match https://javgg.net/tag/to-be-release/* // @match https://javgg.net/featured/* // @match https://javgg.net/ // @match https://javgg.net/new-post/* // @match https://javgg.net/jav/* // @match https://javgg.net/star/* // @match https://javgg.net/trending/* // @include *://*jav*/* // @include https://1cili.com/* // @include https://btnets.net/* // @include *://*av*/* // @include *://*fc2*/* // @include *://*missav*/* // @include *://*javdb*/* // @include *://*javlibrary*/* // @include *://*dmm.co.jp/* // @include *://*dmm.com/* // @include *://*heyzo*/* // @include *://*caribbeancom*/* // @include *://*1pondo*/* // @include *://*pacopaco*/* // @include *://*xvideos*/* // @include *://*pornhub*/* // @include *://*xhamster*/* // @include *://*reddit.com/* // @include *://*redditmedia.com/* // @include *://*t66y.com/* // @include *://*sis001.com/* // @include *://*cl*forum*/* // @include *://*91porn*/* // @include *://*jable*/* // @include *://*avple*/* // @include *://*.cbox.ws/* // @include *://cbox.ws/* // @include *://my.cbox.ws/* // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/preact.umd.js // @require https://cdn.jsdelivr.net/npm/[email protected]/hooks/dist/hooks.umd.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/htm.umd.js // @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== // @grant GM_setValue // @grant GM_getValue // @grant GM_addValueChangeListener // @grant GM_xmlhttpRequest // @grant GM_openInTab // @connect 1cili.com // @connect whatslink.info // @connect avwikidb.com // @run-at document-start // @noframes // @license MPL // @namespace cdn.bootcss.com // ==/UserScript== (function () { 'use strict'; const CONFIG = { codeManager: { storageKey: 'emh_code_library', trashStorageKey: 'emh_code_trash', trashRetentionDays: 7, statusColors: { unmarked: '#6b7280', favorite: '#f87171', watched: '#34d399' } }, magnetPreview: { cacheTtlMs: 7 * 24 * 60 * 60 * 1000, errorTtlMs: 5 * 60 * 1000 }, alternateUrl: { av123: 'https://123av.com/cn/v/', jable: 'https://jable.tv/videos/', cili1: 'https://1cili.com/search?q=' } }; const CODE_LIBRARY = { data: null, trash: null, initialized: false, init: function(force) { if (this.initialized && !force) return true; try { const savedData = GM_getValue(CONFIG.codeManager.storageKey); this.data = savedData ? JSON.parse(savedData) : { items: [], lastUpdated: new Date().toISOString() }; const savedTrash = GM_getValue(CONFIG.codeManager.trashStorageKey); this.trash = savedTrash ? JSON.parse(savedTrash) : { items: [], lastUpdated: new Date().toISOString() }; this.cleanupTrash(); // 自愈：清理历史遗留的非字符串 remarks（如误写入的 [object Object]） let dataFixed = false; const fixRemarks = (list) => { for (const it of list) { if (it && it.remarks != null && typeof it.remarks !== 'string') { it.remarks = ''; dataFixed = true; } } }; if (Array.isArray(this.data.items)) fixRemarks(this.data.items); if (Array.isArray(this.trash.items)) fixRemarks(this.trash.items); if (dataFixed) { this.data.lastUpdated = new Date().toISOString(); GM_setValue(CONFIG.codeManager.storageKey, JSON.stringify(this.data)); this.trash.lastUpdated = new Date().toISOString(); GM_setValue(CONFIG.codeManager.trashStorageKey, JSON.stringify(this.trash)); } this.initialized = true; return true; } catch (e) { console.error('番号库初始化失败:', e); this.data = { items: [], lastUpdated: new Date().toISOString() }; this.trash = { items: [], lastUpdated: new Date().toISOString() }; this.initialized = true; return false; } }, save: function() { try { this.data.lastUpdated = new Date().toISOString(); GM_setValue(CONFIG.codeManager.storageKey, JSON.stringify(this.data)); this.trash.lastUpdated = new Date().toISOString(); GM_setValue(CONFIG.codeManager.trashStorageKey, JSON.stringify(this.trash)); window.dispatchEvent(new CustomEvent('emh_library_updated', { detail: { type: 'library_update', data: this.data } })); if (typeof GM_setValue !== 'undefined') { GM_setValue('emh_sync_timestamp', Date.now().toString()); } return true; } catch (e) { console.error('保存番号库失败:', e); UTILS.showToast('保存番号库失败', 'error'); return false; } }, getAll: function() { if (!this.initialized) this.init(); return [...this.data.items]; }, getFavorites: function() { if (!this.initialized) this.init(); return this.data.items.filter(item => item.status === 'favorite'); }, getWatched: function() { if (!this.initialized) this.init(); return this.data.items.filter(item => item.status === 'watched'); }, getTrash: function() { if (!this.initialized) this.init(); return [...this.trash.items]; }, add: function(code, title = '', remarks = '') { if (!this.initialized) this.init(); if (!code) return false; const normalizedCode = code.toUpperCase(); if (this.getItem(normalizedCode)) { UTILS.showToast(`番号 ${normalizedCode} 已存在于番号库中`, 'warning'); return false; } this.data.items.unshift({ code: normalizedCode, title: title || normalizedCode, status: 'unmarked', remarks: remarks || '', tags: [], createdDate: new Date().toISOString(), modifiedDate: new Date().toISOString() }); this.save(); return true; }, delete: function(code) { if (!this.initialized) this.init(); if (!code) return false; const normalizedCode = code.toUpperCase(); const itemIndex = this.data.items.findIndex(item => item.code.toUpperCase() === normalizedCode); if (itemIndex === -1) return false; const item = this.data.items[itemIndex]; item.deleteDate = new Date().toISOString(); this.data.items.splice(itemIndex, 1); this.trash.items.unshift(item); return this.save(); }, cleanupTrash: function() { if (!this.trash || !this.trash.items || !this.trash.items.length) return; const now = new Date(); const retentionPeriod = CONFIG.codeManager.trashRetentionDays * 24 * 60 * 60 * 1000; const before = this.trash.items.length; this.trash.items = this.trash.items.filter(item => { return (now - new Date(item.deleteDate)) < retentionPeriod; }); if (this.trash.items.length !== before) { this.data.lastUpdated = new Date().toISOString(); GM_setValue(CONFIG.codeManager.storageKey, JSON.stringify(this.data)); this.trash.lastUpdated = new Date().toISOString(); GM_setValue(CONFIG.codeManager.trashStorageKey, JSON.stringify(this.trash)); } }, getItem: function(code) { if (!this.initialized) this.init(); if (!code) return null; const normalizedCode = code.toUpperCase(); return this.data.items.find(item => item.code.toUpperCase() === normalizedCode); }, getStatus: function(code) { const item = this.getItem(code); return item ? item.status : 'unmarked'; }, // 归一化 magnet 字段：兼容三种形态（单值字符串 / 旧字符串数组 / 新对象数组）， // 统一返回对象数组 [{ id, value, preview? }]。旧数据自动生成 id（数据迁移）。 // preview 为 whatslink 缓存：{ name, type, fileType, size, count, screenshots, fetchedAt, error? } normMagnets: function(m) { let arr = []; if (!m) { arr = []; } else if (Array.isArray(m)) { arr = m.slice(); } else { arr = [m]; } // 统一为 { id, value, preview? } 对象 return arr.map((entry, i) => { if (entry && typeof entry === 'object' && entry.value) { const out = { id: entry.id || ('m-' + Date.now().toString(36) + '-' + i), value: String(entry.value).trim() }; const pv = this.sanitizeMagnetPreview(entry.preview); if (pv) out.preview = pv; return out; } const v = entry == null ? '' : String(entry).trim(); if (!v) return null; return { id: 'm-' + Date.now().toString(36) + '-' + i, value: v }; }).filter(Boolean); }, sanitizeMagnetPreview: function(preview) { if (!preview || typeof preview !== 'object' || Array.isArray(preview)) return null; const isSafeHttpUrl = (url) => { if (typeof url !== 'string') return false; try { const u = new URL(url.trim()); return u.protocol === 'https:' || u.protocol === 'http:'; } catch (_) { return false; } }; const shotsRaw = Array.isArray(preview.screenshots) ? preview.screenshots : []; const screenshots = []; const seen = new Set(); for (let i = 0; i < shotsRaw.length && screenshots.length < 48; i++) { const item = shotsRaw[i]; if (item == null) continue; let url = ''; let time = null; if (typeof item === 'string') url = item; else if (typeof item === 'object') { url = item.screenshot || item.url || item.src || item.image || ''; if (item.time != null && Number.isFinite(Number(item.time))) time = Number(item.time); } url = String(url || '').trim(); if (!isSafeHttpUrl(url) || seen.has(url)) continue; seen.add(url); screenshots.push(time != null ? { screenshot: url, time } : { screenshot: url }); } const sizeN = Number(preview.size); const countN = Number(preview.count); return { name: typeof preview.name === 'string' ? preview.name : (typeof preview.title === 'string' ? preview.title : ''), type: typeof preview.type === 'string' ? preview.type : '', fileType: typeof preview.fileType === 'string' ? preview.fileType : (typeof preview.file_type === 'string' ? preview.file_type : ''), size: Number.isFinite(sizeN) ? sizeN : null, count: Number.isFinite(countN) ? countN : null, screenshots, fetchedAt: typeof preview.fetchedAt === 'string' ? preview.fetchedAt : (preview.fetchedAt ? String(preview.fetchedAt) : ''), error: typeof preview.error === 'string' ? preview.error : '' }; }, // 在 data / trash 中定位番号条目 findItemRecord: function(code) { if (!this.initialized) this.init(); if (!code) return null; const normalizedCode = String(code).toUpperCase(); const mainIdx = this.data.items.findIndex(item => item.code.toUpperCase() === normalizedCode); if (mainIdx >= 0) return { list: this.data.items, index: mainIdx, item: this.data.items[mainIdx], inTrash: false }; const trashIdx = this.trash.items.findIndex(item => item.code.toUpperCase() === normalizedCode); if (trashIdx >= 0) return { list: this.trash.items, index: trashIdx, item: this.trash.items[trashIdx], inTrash: true }; return null; }, // 写入某条磁力的 whatslink 预览缓存并持久化 setMagnetPreview: function(code, magnetIdOrIdx, preview) { const rec = this.findItemRecord(code); if (!rec) return false; const magnets = this.normMagnets(rec.item.magnet); if (!magnets.length) return false; const t = String(magnetIdOrIdx); let idx = magnets.findIndex((e, i) => { const eid = this.magnetId(e); return (eid && String(eid) === t) || (!eid && String(i) === t); }); if (idx < 0 && /^\d+$/.test(t)) idx = Number(t); if (idx < 0 || idx >= magnets.length) return false; const cleaned = this.sanitizeMagnetPreview(preview); if (cleaned) magnets[idx].preview = cleaned; else delete magnets[idx].preview; rec.item.magnet = magnets; rec.item.modifiedDate = new Date().toISOString(); return this.save(); }, getMagnetPreview: function(code, magnetIdOrIdx) { const rec = this.findItemRecord(code); if (!rec) return null; const magnets = this.normMagnets(rec.item.magnet); const t = String(magnetIdOrIdx); let idx = magnets.findIndex((e, i) => { const eid = this.magnetId(e); return (eid && String(eid) === t) || (!eid && String(i) === t); }); if (idx < 0 && /^\d+$/.test(t)) idx = Number(t); if (idx < 0 || idx >= magnets.length) return null; return this.sanitizeMagnetPreview(magnets[idx].preview); }, // 取磁力对象的值（兼容对象/字符串） magnetValue: function(m) { if (m == null) return ''; if (typeof m === 'object') return m.value || ''; return String(m).trim(); }, // 取磁力对象的 id（兼容对象/字符串；字符串返回 null） magnetId: function(m) { if (m && typeof m === 'object') return m.id || null; return null; }, // 清理磁力链接用于显示：去掉 &dn=xxx 参数（dn 可能带乱码/番号后缀） cleanMagnet: function(m) { const s = this.magnetValue(m); if (!s) return ''; // 去掉以 &dn= 或 ?dn= 开头的参数（保留 magnet:?xt=urn:... 主体及其余 tr 参数） return s.replace(/([&?])dn=[^&]*/gi, ''); }, // 提取磁力链接的 dn 参数值作为展示名；无 dn 时返回 cleanMagnet 后的精简磁力 magnetName: function(m) { const s = this.magnetValue(m); if (!s) return ''; const dm = s.match(/(?:[&?])dn=([^&]*)/i); if (dm && dm[1]) { try { return decodeURIComponent(dm[1]); } catch (e) { return dm[1]; } } return this.cleanMagnet(s); }, markItem: function(code, status, title = '', remark, magnet) { if (!this.initialized) this.init(); if (!code) return false; // remark 规范化：仅接受字符串；对象/数组转为空（防止 [object Object] 写入） if (remark != null && typeof remark !== 'string') { remark = ''; } const normalizedCode = code.toUpperCase(); if (!['unmarked', 'favorite', 'watched'].includes(status)) { status = 'unmarked'; } const existingIndex = this.data.items.findIndex(item => item.code.toUpperCase() === normalizedCode); if (existingIndex >= 0) { const cur = this.data.items[existingIndex]; // 不可变更新：换新对象引用，保证 memo(ItemRow) 能感知状态/备注/磁力变化 this.data.items[existingIndex] = { ...cur, status: status, ...(title ? { title: title } : {}), ...(remark !== undefined ? { remarks: remark } : {}), ...(magnet !== undefined ? { magnet: this.normMagnets(magnet) } : {}), modifiedDate: new Date().toISOString() }; } else { this.data.items.unshift({ code: normalizedCode, title: title || normalizedCode, status: status, remarks: remark || '', magnet: this.normMagnets(magnet), tags: [], createdDate: new Date().toISOString(), modifiedDate: new Date().toISOString() }); } return this.save(); }, setTags: function(code, tags) { if (!this.initialized) this.init(); if (!code) return false; const rec = this.findItemRecord(code); if (!rec || rec.inTrash) return false; const arr = Array.isArray(tags) ? tags : (tags == null ? [] : [tags]); const cleaned = []; const seen = new Set(); for (const t of arr) { const s = String(t == null ? '' : t).trim(); if (s && !seen.has(s.toLowerCase())) { seen.add(s.toLowerCase()); cleaned.push(s); } } rec.item.tags = cleaned; rec.item.modifiedDate = new Date().toISOString(); return this.save(); }, clearAllPreviewCaches: function() { if (!this.initialized) this.init(); let cleared = 0; const scan = (list) => { for (const it of list) { const ms = this.normMagnets(it && it.magnet); let changed = false; for (const m of ms) { if (m.preview) { delete m.preview; changed = true; cleared++; } } if (changed) { it.magnet = ms; } } }; scan(this.data.items); scan(this.trash.items); if (cleared) this.save(); try { if (typeof AVWIKI_PREVIEW !== 'undefined') AVWIKI_PREVIEW.clearCache(); } catch (e) {} return cleared; }, previewCacheStats: function() { if (!this.initialized) this.init(); let magnets = 0, screenshots = 0, bytes = 0; const scan = (list) => { for (const it of list) { const ms = this.normMagnets(it && it.magnet); for (const m of ms) { if (m.preview) { magnets++; screenshots += (Array.isArray(m.preview.screenshots) ? m.preview.screenshots.length : 0); try { bytes += JSON.stringify(m.preview).length; } catch (e) {} } } } }; scan(this.data.items); scan(this.trash.items); return { magnets, screenshots, bytes }; }, exportData: function(filter = 'all') { if (!this.initialized) this.init(); let exportData = { version: "1.0", exportDate: new Date().toISOString(), filter: filter, items: [] }; if (filter === 'trash') { exportData.items = [...this.trash.items]; } else if (filter === 'all') { exportData.items = [...this.data.items]; } else { exportData.items = this.data.items.filter(item => item.status === filter); } return exportData; }, importData: function(data, mode = 'merge') { if (!this.initialized) this.init(); try { if (!data.items || !Array.isArray(data.items)) { throw new Error('导入的数据格式不正确'); } if (mode === 'replace') { this.data.items = data.items; } else if (mode === 'merge') { for (const importedItem of data.items) { if (!importedItem.code) continue; const normalizedCode = importedItem.code.toUpperCase(); const existingIndex = this.data.items.findIndex(item => item.code.toUpperCase() === normalizedCode ); if (existingIndex >= 0) { this.data.items[existingIndex] = { ...this.data.items[existingIndex], ...importedItem, code: normalizedCode, modifiedDate: new Date().toISOString() }; } else { this.data.items.unshift({ ...importedItem, code: normalizedCode, createdDate: importedItem.createdDate || new Date().toISOString(), modifiedDate: new Date().toISOString() }); } } } this.save(); return { success: true, message: `成功导入 ${data.items.length} 个番号条目` }; } catch (e) { console.error('导入番号数据失败:', e); return { success: false, message: '导入失败: ' + e.message }; } } }; const UTILS = { showToast: (message, type = 'info') => { const evt = new CustomEvent('emh_toast', { detail: { message, type } }); window.dispatchEvent(evt); }, formatBytes: (bytes) => { const n = Number(bytes); if (!Number.isFinite(n) || n < 0) return ''; if (n < 1024) return n + ' B'; const units = ['KB', 'MB', 'GB', 'TB']; let v = n; let i = -1; do { v /= 1024; i += 1; } while (v >= 1024 && i < units.length - 1); return v.toFixed(v >= 100 || i === 0 ? 0 : 1) + ' ' + units[i]; }, isSafeHttpUrl: (url) => { if (typeof url !== 'string') return false; try { const u = new URL(url.trim()); return u.protocol === 'https:' || u.protocol === 'http:'; } catch (_) { return false; } }, formatTime: (sec) => { const s = Number(sec); if (!Number.isFinite(s) || s < 0) return ''; const h = Math.floor(s / 3600); const m = Math.floor((s % 3600) / 60); const ss = Math.floor(s % 60); return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${String(ss).padStart(2, '0')}` : `${m}:${String(ss).padStart(2, '0')}`; } }; // 磁力宫格缩略图懒加载（IntersectionObserver） const LAZY = { _io: null, get io() { if (!this._io && typeof IntersectionObserver !== 'undefined') { this._io = new IntersectionObserver((entries) => { for (const en of entries) { if (!en.isIntersecting) continue; const el = en.target; const src = el.getAttribute('data-src'); if (src) el.style.backgroundImage = 'url("' + src + '")'; this._io.unobserve(el); } }, { rootMargin: '240px' }); } return this._io; }, observe(el) { if (el.dataset.lazy) return; el.dataset.lazy = '1'; if (!this.io) { const src = el.getAttribute('data-src'); if (src) el.style.backgroundImage = 'url("' + src + '")'; return; } this.io.observe(el); } }; // 通用内联 SVG 图标（线性描边，跟随 currentColor） const ICONS = { grid: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>' }; // ===== 主题管理（深色优先默认 · data-emh-theme 属性驱动） ===== const THEME = { KEY: 'emh_ui_theme', ORDER: ['dark', 'light', 'system'], get: function() { let t = 'dark'; try { const saved = typeof GM_getValue === 'function' ? GM_getValue(this.KEY) : null; if (saved === 'dark' || saved === 'light' || saved === 'system') t = saved; } catch (e) {} return t; }, apply: function(theme) { document.documentElement.setAttribute('data-emh-theme', theme); }, set: function(theme) { if (!['dark', 'light', 'system'].includes(theme)) theme = 'dark'; this.apply(theme); try { if (typeof GM_setValue === 'function') GM_setValue(this.KEY, theme); } catch (e) {} }, next: function() { const cur = this.get(); return this.ORDER[(this.ORDER.indexOf(cur) + 1) % this.ORDER.length]; } }; // ===== standalone 独立页：后台加载同源真实网址（原生 GM 能力，不依赖父页） ===== const STANDALONE = { // 同源真实网址 + #emh-standalone 标记；该页脚本原生运行 → GM 数据/网络齐全，父页可关闭 standaloneUrl: function() { return location.href.split('#')[0] + '#emh-standalone'; }, open: function() { const url = this.standaloneUrl(); // 后台加载（不抢焦点）；GM_openInTab 不可用时回退 window.open try { if (typeof GM_openInTab === 'function') { GM_openInTab(url, { active: false, insert: true }); UTILS.showToast('已在后台加载番号库独立页', 'success'); return; } } catch (e) {} const w = window.open(url, '_blank'); if (w) UTILS.showToast('已在新标签页打开番号库', 'success'); else UTILS.showToast('浏览器拦截了新窗口，请允许弹窗后重试', 'warning'); } }; // whatslink 磁力截图预览（灯箱 + API 解析） const MAGNET_PREVIEW = { API: 'https://whatslink.info/api/v1/link', TIMEOUT: 20000, _ready: false, _urls: [], _index: 0, _open: false, _touchX: null, _els: null, _requestSeq: 0, _inflight: {}, _lastErrorIdx: -1, _isCacheFresh: function(preview) { if (!preview || !preview.fetchedAt) return false; const t = new Date(preview.fetchedAt).getTime(); if (!Number.isFinite(t)) return false; const ttl = preview.error ? CONFIG.magnetPreview.errorTtlMs : CONFIG.magnetPreview.cacheTtlMs; return (Date.now() - t) < ttl; }, _errPreview: function(err) { return CODE_LIBRARY.sanitizeMagnetPreview({ error: err || '预览失败', screenshots: [], fetchedAt: new Date().toISOString() }); }, ensureUi: function() { if (this._ready) return; if (!document.getElementById('emh-magnet-lb-style')) { const st = document.createElement('style'); st.id = 'emh-magnet-lb-style'; st.textContent = ` #emh-magnet-lightbox { position: fixed; inset: 0; z-index: 10050; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.88); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); user-select: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } #emh-magnet-lightbox.open { display: flex; } #emh-magnet-lb-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 48px 64px 56px; box-sizing: border-box; } #emh-magnet-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); background: #111; transition: opacity 0.25s ease; } #emh-magnet-lb-img.is-loading { opacity: 0.35; } .emh-lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background 0.15s, opacity 0.15s; } .emh-lb-btn:hover { background: rgba(255,255,255,0.22); } .emh-lb-btn:disabled { opacity: 0.25; cursor: default; } #emh-magnet-lb-close:focus-visible, .emh-lb-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; } #emh-magnet-lb-prev { left: 12px; } #emh-magnet-lb-next { right: 12px; } #emh-magnet-lb-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; font-size: 24px; cursor: pointer; z-index: 3; line-height: 1; transition: background 0.15s; } #emh-magnet-lb-close:hover { background: rgba(255,255,255,0.22); } #emh-magnet-lb-counter { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.9); font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,0.45); z-index: 2; pointer-events: none; } #emh-magnet-lb-meta { position: absolute; top: 14px; left: 16px; right: 64px; color: rgba(255,255,255,0.85); font-size: 12px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 2; pointer-events: none; } #emh-magnet-lb-hint { position: absolute; bottom: 14px; right: 16px; color: rgba(255,255,255,0.45); font-size: 11px; z-index: 2; pointer-events: none; } #emh-magnet-lb-thumbs { position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; max-width: 72%; overflow-x: auto; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,0.45); z-index: 2; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; } #emh-magnet-lb-thumbs::-webkit-scrollbar { height: 4px; } #emh-magnet-lb-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; } .emh-lb-thumb { flex-shrink: 0; width: 56px; height: 36px; padding: 0; border: none; cursor: pointer; border-radius: 4px; overflow: hidden; opacity: 0.55; transition: opacity 0.15s, box-shadow 0.15s; background: #111; } .emh-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .emh-lb-thumb:hover { opacity: 0.85; } .emh-lb-thumb.active { opacity: 1; box-shadow: 0 0 0 2px var(--emh-primary); } .emh-lb-thumb:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 1px; } @media (max-width: 640px) { #emh-magnet-lb-stage { padding: 44px 52px 52px; } .emh-lb-btn { width: 38px; height: 38px; font-size: 24px; } #emh-magnet-lb-hint { display: none; } #emh-magnet-lb-thumbs { display: none; } } `; document.head.appendChild(st); } const root = document.createElement('div'); root.id = 'emh-magnet-lightbox'; root.setAttribute('role', 'dialog'); root.setAttribute('aria-modal', 'true'); root.setAttribute('aria-label', '磁力截图预览'); root.innerHTML = ` <div id="emh-magnet-lb-stage"> <div id="emh-magnet-lb-meta"></div> <button type="button" id="emh-magnet-lb-close" aria-label="关闭">×</button> <button type="button" class="emh-lb-btn" id="emh-magnet-lb-prev" aria-label="上一张">‹</button> <img id="emh-magnet-lb-img" alt="Screenshot" referrerpolicy="no-referrer" /> <button type="button" class="emh-lb-btn" id="emh-magnet-lb-next" aria-label="下一张">›</button> <div id="emh-magnet-lb-counter"></div> <div id="emh-magnet-lb-thumbs"></div> <div id="emh-magnet-lb-hint">← → 切换 · Esc 关闭</div> </div> `; document.body.appendChild(root); this._els = { root, img: root.querySelector('#emh-magnet-lb-img'), prev: root.querySelector('#emh-magnet-lb-prev'), next: root.querySelector('#emh-magnet-lb-next'), close: root.querySelector('#emh-magnet-lb-close'), counter: root.querySelector('#emh-magnet-lb-counter'), meta: root.querySelector('#emh-magnet-lb-meta'), thumbs: root.querySelector('#emh-magnet-lb-thumbs') }; this._els.prev.addEventListener('click', (e) => { e.stopPropagation(); this.step(-1); }); this._els.next.addEventListener('click', (e) => { e.stopPropagation(); this.step(1); }); this._els.close.addEventListener('click', (e) => { e.stopPropagation(); this.close(); }); root.addEventListener('click', (e) => { if (e.target === root || e.target.id === 'emh-magnet-lb-stage') this.close(); }); root.addEventListener('touchstart', (e) => { if (e.touches && e.touches[0]) this._touchX = e.touches[0].clientX; }, { passive: true }); root.addEventListener('touchend', (e) => { if (this._touchX == null || !e.changedTouches || !e.changedTouches[0]) { this._touchX = null; return; } const dx = e.changedTouches[0].clientX - this._touchX; this._touchX = null; if (Math.abs(dx) < 40) return; this.step(dx < 0 ? 1 : -1); }, { passive: true }); document.addEventListener('keydown', (e) => { // 灯箱打开时接管方向键：必须 preventDefault 阻止浏览器前进/后退 const visible = this._open || (this._els && this._els.root && this._els.root.classList.contains('open')); if (!visible) return; const k = e.key; if (k === 'Escape') { e.preventDefault(); e.stopPropagation(); this.close(); } else if (k === 'ArrowLeft') { e.preventDefault(); e.stopPropagation(); this.step(-1); } else if (k === 'ArrowRight') { e.preventDefault(); e.stopPropagation(); this.step(1); } }, { passive: false }); this._ready = true; }, _update: function() { const { img, prev, next, counter } = this._els; const total = this._urls.length; if (!total) { counter.textContent = ''; prev.disabled = true; next.disabled = true; img.classList.remove('is-loading'); img.removeAttribute('src'); img.alt = 'Screenshot'; if (this._els.thumbs) this._els.thumbs.innerHTML = ''; return; } const idx = this._index; const url = this._urls[idx]; counter.textContent = (idx + 1) + ' / ' + total; prev.disabled = total <= 1; next.disabled = total <= 1; if (img.getAttribute('src') === url) { img.classList.remove('is-loading'); return; } img.classList.add('is-loading'); img.onload = () => img.classList.remove('is-loading'); img.onerror = () => { img.classList.remove('is-loading'); if (total > 1 && idx !== this._lastErrorIdx) { // 跳过失效截图自动切到下一张；同一张不重复跳过，避免坏图死循环 this._lastErrorIdx = idx; this.step(1); return; } img.removeAttribute('src'); img.alt = '图片加载失败'; }; img.alt = 'Screenshot ' + (idx + 1); img.src = url; [idx - 1, idx + 1].forEach((n) => { if (n >= 0 && n < total) { const pre = new Image(); pre.referrerPolicy = 'no-referrer'; pre.src = this._urls[n]; } }); if (this._els.thumbs) { const thumbs = this._els.thumbs; thumbs.innerHTML = ''; this._urls.forEach((u, i) => { const b = document.createElement('button'); b.type = 'button'; b.className = 'emh-lb-thumb' + (i === idx ? ' active' : ''); b.title = '跳转到截图 ' + (i + 1); const im = new Image(); im.referrerPolicy = 'no-referrer'; im.alt = ''; im.src = u; b.appendChild(im); b.addEventListener('click', (e) => { e.stopPropagation(); this._index = i; this._update(); }); thumbs.appendChild(b); }); thumbs.scrollLeft = Math.max(0, idx * 62 - thumbs.clientWidth / 2); } }, open: function(urls, startIndex, metaText) { this.ensureUi(); const list = (Array.isArray(urls) ? urls : []).filter(UTILS.isSafeHttpUrl); if (!list.length) { UTILS.showToast('暂无可用截图', 'warning'); return; } let idx = Number(startIndex); if (!Number.isFinite(idx) || idx < 0) idx = 0; if (idx >= list.length) idx = list.length - 1; this._urls = list; this._index = idx; this._open = true; this._lastErrorIdx = -1; this._els.meta.textContent = metaText || ''; this._els.root.classList.add('open'); this._update(); }, close: function() { if (!this._open || !this._els) return; this._open = false; this._els.root.classList.remove('open'); this._urls = []; this._index = 0; this._lastErrorIdx = -1; this._els.img.removeAttribute('src'); this._els.img.alt = 'Screenshot'; this._els.img.classList.remove('is-loading'); this._els.counter.textContent = ''; this._els.meta.textContent = ''; if (this._els.thumbs) this._els.thumbs.innerHTML = ''; }, step: function(delta) { if (!this._open || !this._urls.length) return; const total = this._urls.length; this._index = (this._index + delta + total) % total; this._update(); }, parseApiResponse: function(rawText) { let data; try { data = JSON.parse(rawText); } catch (_) { return { ok: false, error: '接口返回非 JSON' }; } if (data == null || typeof data !== 'object' || Array.isArray(data)) { return { ok: false, error: '接口数据结构异常' }; } const apiError = typeof data.error === 'string' ? data.error.trim() : ''; if (apiError) return { ok: false, error: apiError }; const preview = CODE_LIBRARY.sanitizeMagnetPreview({ name: data.name || data.title || '', type: data.type || '', file_type: data.file_type || data.type || '', size: data.size, count: data.count, screenshots: data.screenshots, fetchedAt: new Date().toISOString(), error: '' }); if (!preview) return { ok: false, error: '预览数据无效' }; return { ok: true, preview }; }, fetchAndCache: function(code, magnetId, magnetValue, opts) { const options = opts || {}; const force = !!options.force; const onStart = typeof options.onStart === 'function' ? options.onStart : null; const onDone = typeof options.onDone === 'function' ? options.onDone : null; const magnet = String(magnetValue || '').trim(); if (!magnet || magnet.indexOf('magnet:') !== 0) { UTILS.showToast('无效的磁力链接', 'error'); if (onDone) onDone(new Error('invalid magnet')); return; } if (typeof GM_xmlhttpRequest !== 'function') { UTILS.showToast('当前环境不支持跨域请求', 'error'); if (onDone) onDone(new Error('no gm')); return; } // 全局递增序号：并发竞态下仅“最新一次用户请求”能打开灯箱/弹提示 const mySeq = ++this._requestSeq; const key = String(code) + '::' + String(magnetId); // 命中缓存：优先展示旧截图；若过期则在展示的同时后台刷新 const cached = !force ? CODE_LIBRARY.getMagnetPreview(code, magnetId) : null; if (cached && Array.isArray(cached.screenshots) && cached.screenshots.length) { const urls = cached.screenshots.map(s => s.screenshot || s.url || '').filter(Boolean); const metaParts = [cached.name, cached.fileType || cached.type, UTILS.formatBytes(cached.size)].filter(Boolean); this.open(urls, 0, metaParts.join(' · ')); if (onDone) onDone(null, cached); if (this._isCacheFresh(cached)) return; } else if (cached && cached.error && !force && this._isCacheFresh(cached)) { // 错误缓存仍在有效期内：直接提示并跳过重复请求 UTILS.showToast(cached.error || '上次预览失败', 'warning'); if (onDone) onDone(new Error(cached.error || 'cached error')); return; } // 并发去重：同一磁力已有在途请求时复用结果，不重复发起 HTTP const existing = this._inflight[key]; if (existing && !force) { existing.latestSeq = Math.max(existing.latestSeq, mySeq); existing.p.then((r) => { if (existing.superseded) { if (onDone) onDone(new Error('superseded')); return; } if (onDone) onDone((r && r.error) ? new Error(r.error) : null, (r && r.preview) || null); }); return; } if (existing && force) existing.superseded = true; if (onStart) onStart(); UTILS.showToast('正在获取截图预览…', 'info'); // 预先登记在途条目：请求回调据此判断自己是否仍是“最新且未被作废” const entry = this._inflight[key] = { p: null, latestSeq: mySeq, superseded: false }; const p = new Promise((resolve) => { const finish = (errText, preview, noShotToast) => { const isLatest = !entry.superseded && this._inflight[key] === entry && entry.latestSeq === this._requestSeq; const urls = preview ? preview.screenshots.map(s => s.screenshot || s.url || '').filter(Boolean) : []; if (isLatest) { if (urls.length) { const metaParts = [preview.name, preview.fileType || preview.type, UTILS.formatBytes(preview.size)].filter(Boolean); this.open(urls, 0, metaParts.join(' · ')); if (!errText) UTILS.showToast('截图已缓存', 'success'); } else if (noShotToast) { UTILS.showToast('接口未返回截图', 'warning'); } else if (errText) { UTILS.showToast(errText, 'error'); } } // 仅在最新请求时持久化错误，避免旧请求的失败污染新结果 if (isLatest && errText && !preview) { CODE_LIBRARY.setMagnetPreview(code, magnetId, this._errPreview(errText)); } if (onDone) onDone(errText ? new Error(errText) : null, preview || null); resolve({ error: errText, urls, meta: [preview && preview.name, preview && (preview.fileType || preview.type), UTILS.formatBytes(preview && preview.size)].filter(Boolean).join(' · '), preview: preview || null }); }; const url = this.API + '?url=' + encodeURIComponent(magnet); GM_xmlhttpRequest({ method: 'GET', url, timeout: this.TIMEOUT, headers: { 'Accept': 'application/json, text/plain, */*' }, onload: (res) => { const status = res && typeof res.status === 'number' ? res.status : 0; if (status < 200 || status >= 300) { finish('预览失败：HTTP ' + status, null); return; } const parsed = this.parseApiResponse(res.responseText || ''); if (!parsed.ok) { finish(parsed.error || '预览失败', null); return; } CODE_LIBRARY.setMagnetPreview(code, magnetId, parsed.preview); if (!parsed.preview || !parsed.preview.screenshots || !parsed.preview.screenshots.length) { finish('', parsed.preview, true); return; } finish('', parsed.preview, false); }, onerror: () => finish('网络请求失败', null), ontimeout: () => finish('请求超时', null) }); }); entry.p = p; p.then(() => { if (this._inflight[key] === entry) delete this._inflight[key]; }); } }; // avwikidb 作品页宫格截图预览（按番号抓取，独立于 whatslink 磁力预览） const AVWIKI_PREVIEW = { BASE: 'https://avwikidb.com/work/', TIMEOUT: 20000, _requestSeq: 0, _inflight: {}, _cacheKey: 'emh_avwiki_cache', _loadCache: function() { try { const raw = GM_getValue(this._cacheKey); return (raw && typeof raw === 'object') ? raw : {}; } catch (e) {} return {}; }, _saveCache: function(cache) { try { GM_setValue(this._cacheKey, cache); } catch (e) {} }, _isFresh: function(rec, force) { if (force || !rec || !rec.fetchedAt) return false; const t = new Date(rec.fetchedAt).getTime(); if (!Number.isFinite(t)) return false; const ttl = rec.error ? CONFIG.magnetPreview.errorTtlMs : CONFIG.magnetPreview.cacheTtlMs; return (Date.now() - t) < ttl; }, codeUrl: function(code) { return this.BASE + encodeURIComponent(String(code || '').trim().toUpperCase()) + '/'; }, // 从 avwikidb work 页 HTML 提取宫格截图：优先 dmm 的 {cid}jp-N 场景图（#gallery）， // 找不到时回退页内其它 jp/ps/pl 作品图；排除 logo/avatar/icon 等静态资源 parseHtml: function(html) { const all = []; const seen = new Set(); const RE = /<img\b[^>]*\bsrc=["']([^"']+)["'][^>]*>/gi; let m; while ((m = RE.exec(html)) !== null) { let raw = m[1] ? m[1].trim() : ''; if (!raw) continue; // 反转义 HTML 实体（src 里的 & 等） raw = raw.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); let u = raw; // 相对路径拼成绝对 if (/^\//.test(u)) u = 'https://avwikidb.com' + u; if (!UTILS.isSafeHttpUrl(u)) continue; if (/\.(?:svg)($|\?)/i.test(u)) continue; if (/logo|\.x\.svg|\/x\.svg|avatar|icon/i.test(u)) continue; const clean = u.split('?')[0]; if (!/\.(?:jpg|png|jpeg|webp)$/i.test(clean)) continue; if (seen.has(clean)) continue; seen.add(clean); all.push(u); if (all.length >= 48) break; } // 优先 jp-N 场景截图（宫格），保持出现顺序 const gallery = all.filter(u => /\/[^/]*?jp-\d+\.(?:jpg|png|jpeg|webp)(?:\?|$)/i.test(u)); return (gallery.length ? gallery : all).slice(0, 48); }, parseTitle: function(html) { const m = html.match(/<title[^>]*>([^<]*)<\/title>/i); if (m && m[1]) { const t = m[1].replace(/\s+/g, ' ').trim(); return t ? t.slice(0, 120) : ''; } return ''; }, fetchAndShow: function(code, opts) { const options = opts || {}; const force = !!options.force; const onDone = typeof options.onDone === 'function' ? options.onDone : null; const itemCode = String(code || '').trim().toUpperCase(); if (!itemCode) { UTILS.showToast('无效番号', 'error'); if (onDone) onDone(new Error('invalid code')); return; } if (typeof GM_xmlhttpRequest !== 'function') { UTILS.showToast('当前环境不支持跨域请求', 'error'); if (onDone) onDone(new Error('no gm')); return; } const mySeq = ++this._requestSeq; const cache = this._loadCache(); const rec = cache[itemCode]; if (this._isFresh(rec, force)) { if (rec && rec.error) { // 错误缓存仍在有效期：直接提示并跳过重复请求 UTILS.showToast(rec.error || '上次预览失败', 'warning'); if (onDone) onDone(new Error(rec.error || 'cached error')); return; } if (Array.isArray(rec && rec.screenshots) && rec.screenshots.length) { const urls = rec.screenshots.map(s => s.screenshot || s.url || '').filter(Boolean); MAGNET_PREVIEW.open(urls, 0, [rec.name, 'AVWikiDB'].filter(Boolean).join(' · ')); if (onDone) onDone(null, rec); return; } } const existing = this._inflight[itemCode]; if (existing && !force) { existing.latestSeq = Math.max(existing.latestSeq, mySeq); existing.p.then((r) => { if (existing.superseded) { if (onDone) onDone(new Error('superseded')); return; } if (onDone) onDone(r.error ? new Error(r.error) : null, r.preview || null); }); return; } if (existing && force) existing.superseded = true; const entry = this._inflight[itemCode] = { p: null, latestSeq: mySeq, superseded: false }; UTILS.showToast('正在获取 AVWikiDB 截图…', 'info'); const failCache = (err) => { cache[itemCode] = { error: err, screenshots: [], fetchedAt: new Date().toISOString() }; this._saveCache(cache); }; const p = new Promise((resolve) => { GM_xmlhttpRequest({ method: 'GET', url: this.codeUrl(itemCode), timeout: this.TIMEOUT, headers: { 'Accept': 'text/html,application/xhtml+xml' }, onload: (res) => { const status = res && typeof res.status === 'number' ? res.status : 0; const html = (res && res.responseText) || ''; if (status < 200 || status >= 300) { const err = 'AVWikiDB 请求失败：HTTP ' + status; failCache(err); UTILS.showToast(err, 'error'); resolve({ error: err, preview: null }); return; } const urls = this.parseHtml(html); if (!urls.length) { const err = 'AVWikiDB 未收录该番号或页面无宫格截图'; failCache(err); UTILS.showToast(err, 'warning'); resolve({ error: err, preview: null }); return; } const name = this.parseTitle(html); const preview = CODE_LIBRARY.sanitizeMagnetPreview({ name: name || itemCode, type: 'AVWikiDB', screenshots: urls, fetchedAt: new Date().toISOString(), error: '' }); cache[itemCode] = preview; this._saveCache(cache); const isLatest = !entry.superseded && this._inflight[itemCode] === entry && entry.latestSeq === this._requestSeq; if (isLatest) MAGNET_PREVIEW.open(urls, 0, [preview.name, 'AVWikiDB'].filter(Boolean).join(' · ')); UTILS.showToast('已获取 AVWikiDB 截图 ' + urls.length + ' 张', 'success'); resolve({ error: '', preview }); }, onerror: () => { const err = 'AVWikiDB 网络请求失败'; failCache(err); UTILS.showToast(err, 'error'); resolve({ error: err, preview: null }); }, ontimeout: () => { const err = 'AVWikiDB 请求超时'; failCache(err); UTILS.showToast(err, 'error'); resolve({ error: err, preview: null }); } }); }); entry.p = p; p.then((r) => { if (onDone) onDone(r.error ? new Error(r.error) : null, r.preview || null); if (this._inflight[itemCode] === entry) delete this._inflight[itemCode]; }); }, // 清除全部 avwikidb 缓存 clearCache: function() { try { GM_setValue(this._cacheKey, {}); } catch (e) {} } }; function waitForElement(selector, callback, timeout = 7000) { const startTime = Date.now(); const intervalId = setInterval(() => { const elements = document.querySelectorAll(selector); if (elements.length > 0) { clearInterval(intervalId); callback(elements[0]); } else if (Date.now() - startTime > timeout) { clearInterval(intervalId); console.warn(`EMH: Element "${selector}" not found within ${timeout}ms.`); callback(null); } }, 200); } function createCodeStatusIndicator(container, code) { if (!code || !container) return null; if (!CODE_LIBRARY.initialized) CODE_LIBRARY.init(); const currentStatus = CODE_LIBRARY.getStatus(code); const statusIndicator = document.createElement('div'); statusIndicator.className = 'emh-code-status-indicator'; statusIndicator.dataset.code = code; statusIndicator.dataset.status = currentStatus; const statusColors = CONFIG.codeManager.statusColors; statusIndicator.style.backgroundColor = statusColors[currentStatus] || statusColors.unmarked; let statusText = '未标记'; if (currentStatus === 'favorite') statusText = '已关注'; if (currentStatus === 'watched') statusText = '已看过'; if (currentStatus === 'watched') { statusIndicator.title = `状态: ${statusText} (请在番号库中修改状态)`; statusIndicator.style.cursor = 'default'; } else { statusIndicator.title = `状态: ${statusText} (点击${currentStatus === 'favorite' ? '取消' : ''}关注)`; statusIndicator.style.cursor = 'pointer'; } statusIndicator.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const curStatus = CODE_LIBRARY.getStatus(code); if (curStatus === 'watched') { UTILS.showToast('已看状态请在番号库中修改', 'warning'); return; } const newStatus = curStatus === 'favorite' ? 'unmarked' : 'favorite'; CODE_LIBRARY.markItem(code, newStatus); updateCodeStatusIndicators(); UTILS.showToast(`番号 ${code} ${newStatus === 'favorite' ? '已关注' : '已取消关注'}`, 'success'); }); container.appendChild(statusIndicator); return statusIndicator; } function updateCodeStatusIndicators() { document.querySelectorAll('.emh-code-status-indicator').forEach(indicator => { const code = indicator.dataset.code; if (!code) return; const currentStatus = CODE_LIBRARY.getStatus(code); indicator.dataset.status = currentStatus; const statusColors = CONFIG.codeManager.statusColors; indicator.style.backgroundColor = statusColors[currentStatus] || statusColors.unmarked; let statusText = '未标记'; if (currentStatus === 'favorite') statusText = '已关注'; if (currentStatus === 'watched') statusText = '已看过'; if (currentStatus === 'watched') { indicator.title = `状态: ${statusText} (请在番号库中修改状态)`; indicator.style.cursor = 'default'; } else { indicator.title = `状态: ${statusText} (点击${currentStatus === 'favorite' ? '取消' : ''}关注)`; indicator.style.cursor = 'pointer'; } }); } const SITE_HANDLERS = { javgg: { isMatch: () => document.domain.includes('javgg'), targetSelector: 'article.item.movies .data, h1.post-title, .videoinfo .meta', process: (targetElement) => { if (document.querySelector("article.item.movies")) { const sidebar = document.querySelector("#contenedor > div > div.sidebar.right.scrolling"); if (sidebar) sidebar.remove(); const linkProviders = [ { code: "njav", url: CONFIG.alternateUrl.av123 + "$p", target: "_blank" }, { code: "jable", url: CONFIG.alternateUrl.jable + "$p/", target: "_blank" }, { code: "1cili", url: CONFIG.alternateUrl.cili1 + "$p", target: "_blank" } ]; document.querySelectorAll("article.item.movies").forEach(entry => { const dataElement = entry.querySelector(".data"); const anchorTag = dataElement ? dataElement.querySelector("h3 a") : null; if (anchorTag) { const videoCode = anchorTag.textContent.trim(); if (!videoCode) return; if (dataElement.querySelector('.emh-javgg-controls')) return; const statusContainer = document.createElement('div'); statusContainer.className = 'emh-code-status-container'; statusContainer.style.display = 'inline-block'; statusContainer.style.marginLeft = '10px'; createCodeStatusIndicator(statusContainer, videoCode); anchorTag.parentNode.appendChild(statusContainer); const controlsDiv = document.createElement('div'); controlsDiv.className = 'emh-javgg-controls'; linkProviders.forEach(provider => { const newAnchorTag = document.createElement("a"); newAnchorTag.href = provider.url.replace("$p", videoCode); newAnchorTag.target = provider.target; newAnchorTag.textContent = provider.code; controlsDiv.appendChild(newAnchorTag); }); dataElement.appendChild(controlsDiv); } }); } } } }; // ===== Preact 依赖加载（多 CDN fallback） ===== const DEPS = { preact: [ 'https://cdn.jsdelivr.net/npm/[email protected]/dist/preact.umd.js', 'https://cdnjs.cloudflare.com/ajax/libs/preact/10.19.6/preact.umd.js' ], hooks: [ 'https://cdn.jsdelivr.net/npm/[email protected]/hooks/dist/hooks.umd.js', 'https://cdnjs.cloudflare.com/ajax/libs/preact/10.19.6/hooks.umd.js' ], htm: [ 'https://cdn.jsdelivr.net/npm/[email protected]/dist/htm.umd.js', 'https://cdnjs.cloudflare.com/ajax/libs/htm/3.1.1/htm.umd.js' ] }; function loadScriptOnce(src) { return new Promise((resolve, reject) => { const existing = document.querySelector(`script[data-emh-src="${src}"]`); if (existing) { resolve(); return; } const script = document.createElement('script'); script.src = src; script.dataset.emhSrc = src; script.onload = () => resolve(); script.onerror = () => reject(new Error('加载失败: ' + src)); document.head.appendChild(script); }); } function getGlobal(name) { try { if (typeof unsafeWindow !== 'undefined' && unsafeWindow[name]) return unsafeWindow[name]; } catch (e) {} try { if (window[name]) return window[name]; } catch (e) {} return null; } async function ensurePreact() { if (getGlobal('preact') && getGlobal('preactHooks') && getGlobal('htm')) return true; const targets = [ { name: 'preact', check: () => !!getGlobal('preact'), urls: DEPS.preact }, { name: 'hooks', check: () => !!getGlobal('preactHooks'), urls: DEPS.hooks }, { name: 'htm', check: () => !!getGlobal('htm'), urls: DEPS.htm } ]; for (const dep of targets) { if (dep.check()) continue; let loaded = false; for (const url of dep.urls) { try { await loadScriptOnce(url); loaded = true; break; } catch (e) { console.warn(`EMH: ${dep.name} ${url}`, e.message); } } if (!loaded) { console.error(`EMH: 无法加载 ${dep.name}`); return false; } } return true; } function injectCoreStyles() { const id = 'emh-core-styles'; if (document.getElementById(id)) return; const style = document.createElement('style'); style.id = id; style.textContent = ` :root, :root[data-emh-theme="dark"] { /* Linear 系 — 深色默认（暖黑基底） */ --emh-primary: #5e6ad2; --emh-primary-hover: #6673e0; --emh-primary-soft: rgba(94, 106, 210, 0.14); --emh-primary-softer: rgba(94, 106, 210, 0.08); --emh-on-primary: #ffffff; /* 中性灰阶 */ --emh-text: #f7f8f8; --emh-text-secondary: #9ca3af; --emh-text-muted: #6b7280; --emh-border: rgba(255, 255, 255, 0.06); --emh-border-strong: rgba(255, 255, 255, 0.12); --emh-bg: #08090a; --emh-surface: #16171c; --emh-surface-raised: #26272e; /* 极淡阴影（无发光/无彩色） */ --emh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --emh-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --emh-shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 48px -12px rgba(0, 0, 0, 0.5), 0 8px 16px -8px rgba(0, 0, 0, 0.4); /* 语义状态色 */ --emh-danger: #f87171; --emh-danger-soft: rgba(248, 113, 113, 0.14); --emh-success: #34d399; --emh-success-soft: rgba(52, 211, 153, 0.14); --emh-warning: #fbbf24; --emh-warning-soft: rgba(251, 191, 36, 0.14); --emh-on-solid: #18181b; /* 按钮灰阶 */ --emh-btn-bg: rgba(255, 255, 255, 0.06); --emh-btn-hover: rgba(255, 255, 255, 0.12); --emh-btn-active: rgba(255, 255, 255, 0.18); --emh-focus-ring: rgba(94, 106, 210, 0.35); --emh-overlay: rgba(0, 0, 0, 0.6); --emh-radius: 12px; --emh-radius-sm: 6px; --emh-glass: rgba(22, 23, 28, 0.8); --emh-ease: cubic-bezier(0.22, 1, 0.36, 1); --emh-font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', Menlo, ui-monospace, monospace; } :root[data-emh-theme="light"] { --emh-primary: #5e6ad2; --emh-primary-hover: #4f5cc8; --emh-primary-soft: rgba(94, 106, 210, 0.1); --emh-primary-softer: rgba(94, 106, 210, 0.06); --emh-on-primary: #ffffff; --emh-text: #18181b; --emh-text-secondary: #52525b; --emh-text-muted: #a1a1aa; --emh-border: rgba(0, 0, 0, 0.08); --emh-border-strong: rgba(0, 0, 0, 0.14); --emh-bg: #fafafa; --emh-surface: #ffffff; --emh-surface-raised: #f4f4f5; --emh-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.04); --emh-shadow-md: 0 2px 8px rgba(24, 24, 27, 0.06), 0 1px 2px rgba(24, 24, 27, 0.04); --emh-shadow-lg: 0 0 0 1px rgba(24, 24, 27, 0.04), 0 24px 48px -12px rgba(24, 24, 27, 0.18), 0 8px 16px -8px rgba(24, 24, 27, 0.12); --emh-danger: #dc2626; --emh-danger-soft: rgba(220, 38, 38, 0.1); --emh-success: #059669; --emh-success-soft: rgba(5, 150, 105, 0.12); --emh-warning: #d97706; --emh-warning-soft: rgba(217, 119, 6, 0.12); --emh-on-solid: #ffffff; --emh-btn-bg: rgba(24, 24, 27, 0.05); --emh-btn-hover: rgba(24, 24, 27, 0.09); --emh-btn-active: rgba(24, 24, 27, 0.13); --emh-focus-ring: rgba(94, 106, 210, 0.3); --emh-overlay: rgba(24, 24, 27, 0.35); --emh-radius: 12px; --emh-radius-sm: 6px; --emh-glass: rgba(255, 255, 255, 0.72); --emh-ease: cubic-bezier(0.22, 1, 0.36, 1); --emh-font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', Menlo, ui-monospace, monospace; } /* 主题跟随系统（浅色系统）— 仅当用户选择 system 时生效，默认深色优先 */ @media (prefers-color-scheme: light) { :root[data-emh-theme="system"] { --emh-primary: #5e6ad2; --emh-primary-hover: #4f5cc8; --emh-primary-soft: rgba(94, 106, 210, 0.1); --emh-primary-softer: rgba(94, 106, 210, 0.06); --emh-on-primary: #ffffff; --emh-text: #18181b; --emh-text-secondary: #52525b; --emh-text-muted: #a1a1aa; --emh-border: rgba(0, 0, 0, 0.08); --emh-border-strong: rgba(0, 0, 0, 0.14); --emh-bg: #fafafa; --emh-surface: #ffffff; --emh-surface-raised: #f4f4f5; --emh-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.04); --emh-shadow-md: 0 2px 8px rgba(24, 24, 27, 0.06), 0 1px 2px rgba(24, 24, 27, 0.04); --emh-shadow-lg: 0 0 0 1px rgba(24, 24, 27, 0.04), 0 24px 48px -12px rgba(24, 24, 27, 0.18), 0 8px 16px -8px rgba(24, 24, 27, 0.12); --emh-danger: #dc2626; --emh-danger-soft: rgba(220, 38, 38, 0.1); --emh-success: #059669; --emh-success-soft: rgba(5, 150, 105, 0.12); --emh-warning: #d97706; --emh-warning-soft: rgba(217, 119, 6, 0.12); --emh-on-solid: #ffffff; --emh-btn-bg: rgba(24, 24, 27, 0.05); --emh-btn-hover: rgba(24, 24, 27, 0.09); --emh-btn-active: rgba(24, 24, 27, 0.13); --emh-focus-ring: rgba(94, 106, 210, 0.3); --emh-overlay: rgba(24, 24, 27, 0.35); --emh-radius: 12px; --emh-radius-sm: 6px; --emh-glass: rgba(255, 255, 255, 0.72); --emh-ease: cubic-bezier(0.22, 1, 0.36, 1); --emh-font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', Menlo, ui-monospace, monospace; } } .emh-code-manager-toggle { position: fixed; bottom: 24px; right: 24px; z-index: 10000; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background: var(--emh-primary); color: var(--emh-on-primary); border: 1px solid transparent; cursor: pointer; font-size: 14px; font-weight: 600; letter-spacing: 0.1px; box-shadow: 0 4px 16px var(--emh-primary-soft), var(--emh-shadow-md); transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .emh-code-manager-toggle:hover { background-color: var(--emh-primary-hover); transform: translateY(-1px); box-shadow: 0 6px 20px var(--emh-primary-soft), var(--emh-shadow-md); } .emh-code-manager-toggle:active { transform: scale(0.96); } .emh-code-manager-toggle:focus-visible { outline: 2px solid var(--emh-on-primary); outline-offset: 2px; } .emh-javgg-controls { margin-top: 6px; display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: 10px; vertical-align: middle; padding: 4px 6px; background-color: var(--emh-btn-bg); border-radius: var(--emh-radius-sm); } .emh-javgg-controls a { padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--emh-text-secondary); text-decoration: none; transition: background 0.15s, color 0.15s; } .emh-javgg-controls a:hover { background: var(--emh-primary-soft); color: var(--emh-primary); } .btn { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 9px; text-decoration: none; font-size: 13px; font-weight: 600; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, transform 0.1s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; cursor: pointer; border: 1px solid transparent; white-space: nowrap; line-height: 1.2; font-family: inherit; box-sizing: border-box; color: var(--emh-text); } .btn:active { transform: scale(0.92); } .btn:focus-visible { outline: 2px solid var(--emh-primary); outline-offset: 2px; } /* 图标按钮：默认仅图标，hover/焦点展开文字标签 */ .btn.emh-expand { gap: 0; padding: 8px 10px; } .btn .emh-expand-label { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; vertical-align: middle; transition: max-width 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s ease, margin-left 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .btn.emh-expand:hover .emh-expand-label, .btn.emh-expand:focus-visible .emh-expand-label { max-width: 12em; opacity: 1; margin-left: 6px; } @media (prefers-reduced-motion: reduce) { .btn .emh-expand-label { transition: none !important; } .btn.emh-expand:hover .emh-expand-label, .btn.emh-expand:focus-visible .emh-expand-label { max-width: 12em; opacity: 1; margin-left: 6px; } } .my-btn-primary { background: var(--emh-primary-soft); color: var(--emh-primary); } .my-btn-primary:hover { background: var(--emh-primary); color: var(--emh-on-primary); box-shadow: 0 2px 8px var(--emh-primary-soft); } .my-btn-success { background: var(--emh-success-soft); color: var(--emh-success); } .my-btn-success:hover { background: var(--emh-success); color: var(--emh-on-solid); } .my-btn-danger { background: var(--emh-danger-soft); color: var(--emh-danger); } .my-btn-danger:hover { background: var(--emh-danger); color: var(--emh-on-solid); } .btn-outline { background: var(--emh-surface); color: var(--emh-text-secondary); border-color: var(--emh-border); } .btn-outline:hover { background: var(--emh-btn-hover); color: var(--emh-text); border-color: var(--emh-border-strong); } .emh-code-status-indicator { width: 16px; height: 16px; border-radius: 50%; cursor: pointer; margin-right: 8px; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; border: 1px solid var(--emh-border); display: inline-block; vertical-align: middle; } .emh-code-status-indicator:hover { transform: scale(1.2); box-shadow: var(--emh-shadow-sm); } .emh-code-status-indicator[data-status="favorite"] { background-color: var(--emh-danger); } .emh-code-status-indicator[data-status="watched"] { background-color: var(--emh-success); } .emh-code-status-indicator[data-status="unmarked"] { background-color: var(--emh-text-muted); } #custom-toast-container { position: fixed; top: 70px; right: 20px; z-index: 10060; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; } .custom-toast { padding: 10px 16px; border-radius: 12px; color: var(--emh-on-solid); box-shadow: var(--emh-shadow-md); max-width: min(320px, calc(100vw - 40px)); text-align: left; pointer-events: auto; transition: opacity 0.3s ease, transform 0.3s ease; opacity: 0; transform: translateX(120%); font-size: 13px; font-weight: 500; display: flex; align-items: center; line-height: 1.4; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .custom-toast.show { opacity: 1; transform: translateX(0); } .custom-toast.leaving { opacity: 0; transform: translateX(120%); } .custom-toast svg { margin-right: 8px; flex-shrink: 0; } .custom-toast-success { background: var(--emh-success); } .custom-toast-error { background: var(--emh-danger); } .custom-toast-info { background: var(--emh-primary); color: var(--emh-on-primary); } .custom-toast-warning { background: var(--emh-warning); color: var(--emh-on-solid); } @media (prefers-reduced-motion: reduce) { .emh-code-manager-toggle, .emh-code-manager-toggle:hover, .emh-code-manager-toggle:active, .btn, .btn:active, .emh-javgg-controls a, .emh-code-status-indicator, .custom-toast { transition: none !important; animation: none !important; transform: none !important; } .custom-toast { opacity: 1; transform: none; } .custom-toast.show { opacity: 1; transform: none; } .custom-toast.leaving { opacity: 0; transform: none; } } `; (document.head || document.documentElement).appendChild(style); } // standalone 加载封面：document-start 起隐藏站点内容，面板就绪前显示"加载中" function injectStandaloneCover() { if (document.getElementById('emh-standalone-cover-style')) return; const st = document.createElement('style'); st.id = 'emh-standalone-cover-style'; st.textContent = ` html { background: #08090a !important; } body { visibility: hidden !important; } #emh-standalone-loading { position: fixed; inset: 0; z-index: 2147483646; display: flex; align-items: center; justify-content: center; gap: 12px; background: #08090a; color: #9ca3af; font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .emh-loading-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.12); border-top-color: #5e6ad2; animation: emh-loading-spin 0.8s linear infinite; } @keyframes emh-loading-spin { to { transform: rotate(360deg); } } `; (document.head || document.documentElement).appendChild(st); const ov = document.createElement('div'); ov.id = 'emh-standalone-loading'; ov.innerHTML = '<span class="emh-loading-spinner"></span>正在加载番号库…'; document.documentElement.appendChild(ov); } function removeStandaloneCover() { const st = document.getElementById('emh-standalone-cover-style'); if (st) st.remove(); const ov = document.getElementById('emh-standalone-loading'); if (ov) ov.remove(); } // standalone 独立页布局：全屏面板 + 左列表右详情双栏 function injectStandaloneStyles() { if (document.getElementById('emh-standalone-style')) return; const style = document.createElement('style'); style.id = 'emh-standalone-style'; style.textContent = ` html, body { margin: 0; height: 100%; background: var(--emh-bg); } #emh-code-manager-toggle, .emh-panel-backdrop { display: none !important; } #emh-code-manager-panel .emh-panel-resize { display: none !important; } #emh-code-manager-panel { position: fixed; inset: 0; width: auto; height: 100vh; border-radius: 0; border-left: none; padding-right: min(580px, 47vw); background: var(--emh-bg); } /* 顶栏协调：左右栏等高等同背景，消除玻璃毛玻璃割裂 */ /* 注：以下 padding/font-size 与 createStyles 同优先级且晚注入， 必须 !important 才能覆盖（与 background/backdrop 同理） */ .emh-panel-header, .emh-detail-header { height: 52px; padding: 0 16px !important; box-sizing: border-box; background: var(--emh-bg) !important; border-bottom: 1px solid var(--emh-border) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .emh-panel-header h2 { font-size: 14px !important; } .emh-detail-code { font-size: 15px !important; } .emh-panel-header .emh-panel-close { display: none !important; } .emh-detail-backdrop { display: none !important; } /* 组件样式（CodeManagerPanel.createStyles）在 bootPanel 中晚于本样式注入， 同优先级时后注入者胜出，故对冲突属性加 !important 保证双栏覆盖生效 */ /* 右栏：与左栏同基底，hairline 边框 + 阴影作分隔 */ .emh-detail-drawer { position: fixed !important; top: 0; right: 0; bottom: 0; width: min(580px, 47vw) !important; background: var(--emh-bg) !important; border-radius: 0 !important; border-left: 1px solid var(--emh-border) !important; box-shadow: -16px 0 40px rgba(0, 0, 0, 0.35) !important; animation: none !important; } /* 详情 Hero/卡片层次已迁移至 createStyles（.emh-detail-body.unified）， standalone 仅保留双栏面板覆盖，不再重复定义 */ `; (document.head || document.documentElement).appendChild(style); } function createFallbackToggle(clickHandler) { const existing = document.getElementById('emh-code-manager-toggle'); if (existing) existing.remove(); const btn = document.createElement('button'); btn.id = 'emh-code-manager-toggle'; btn.className = 'emh-code-manager-toggle'; btn.innerHTML = ICONS.grid + '<span>番号库</span>'; btn.title = '管理番号库'; btn.addEventListener('click', clickHandler); document.body.appendChild(btn); return btn; } // ===== 面板工厂：依赖就绪后构建 Preact 组件 ===== function buildPanel() { const { h, render, Fragment } = getGlobal('preact'); const { useEffect, useRef, useReducer, useState, useCallback } = getGlobal('preactHooks'); const html = getGlobal('htm').bind(h); // 注意：preact.umd.js 不导出 memo（核心包才有），用 Component.shouldComponentUpdate 实现浅比较 memo const Memorize = (Comp) => class extends getGlobal('preact').Component { shouldComponentUpdate(nextProps) { const cur = this.props; for (const k in nextProps) { if (Object.prototype.hasOwnProperty.call(nextProps, k) && nextProps[k] !== cur[k]) return true; } return false; } render() { return h(Comp, this.props); } }; // 通用按钮图标（VNode，可直接插值到 htm JSX） const ICON = { heart: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>`, check: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`, checkCircle: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>`, trash: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>`, restore: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>`, edit: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>`, search: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`, copy: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`, unfav: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>`, plus: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>`, list: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>`, import: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>`, export: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>`, checkSquare: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>`, refresh: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>`, x: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>` }; // 状态存储 const PanelStore = { state: { visible: false, currentFilter: 'all', searchQuery: '', timeFilter: '', magnetFilter: '', selectedItems: [], multiSelectMode: false, confirm: null, prompt: null, detail: null, magnetSearch: null, batchProgress: null, toasts: [], selectedIndex: -1, helpOpen: false, menuOpen: false, lastSyncTimestamp: null, revision: 0 }, listeners: new Set(), set(patch) { this.state = { ...this.state, ...patch, revision: this.state.revision + 1 }; this.notify(); }, get() { return this.state; }, refresh() { this.set({}); }, notify() { this.listeners.forEach(fn => fn()); }, subscribe(fn) { this.listeners.add(fn); return () => this.listeners.delete(fn); } }; const STATUS_TEXT = { favorite: '关注', watched: '已看', unmarked: '未标记' }; const ICON_TOAST = { success: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`, error: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`, warning: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`, info: html`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>` }; const EMPTY_ICONS = { library: html`<svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>`, favorite: html`<svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>`, watched: html`<svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>`, trash: html`<svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>`, time: html`<svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>`, has: html`<svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>`, none: html`<svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>`, search: html`<svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>` }; // 监听外部 toast 事件，桥接到组件状态 window.addEventListener('emh_toast', function handler(e) { const { message, type } = e.detail || {}; if (!message) return; const id = Date.now() + Math.random().toString(36).slice(2, 7); const toasts = [...PanelStore.state.toasts, { id, message, type: type || 'info' }].slice(-5); PanelStore.set({ toasts }); // 两阶段退场：先进入 leaving 过渡，再移除 setTimeout(() => { PanelStore.set({ toasts: PanelStore.state.toasts.map(t => t.id === id ? { ...t, leaving: true } : t) }); }, 3000); setTimeout(() => { PanelStore.set({ toasts: PanelStore.state.toasts.filter(t => t.id !== id) }); }, 3300); }); function ToastContainer() { const st = PanelStore.get(); if (!st.toasts.length) return null; return html` <div id="custom-toast-container"> ${st.toasts.map(t => html` <div key=${t.id} class="custom-toast custom-toast-${t.type} show ${t.leaving ? 'leaving' : ''}" role="status"> ${ICON_TOAST[t.type] || ICON_TOAST.info} <span>${t.message}</span> </div> `)} </div> `; } function PromptModal({ promptState, onSubmit, onCancel }) { if (!promptState) return null; const inputRef = useRef(null); useEffect(() => { if (inputRef.current) inputRef.current.focus(); }, []); const submit = (e) => { e.preventDefault(); onSubmit(inputRef.current ? inputRef.current.value : ''); }; return html` <div class="emh-panel-modal" style="display:flex;"> <div class="emh-panel-modal-content"> <h3>${promptState.title}</h3> <form onSubmit=${submit}> <input ref=${inputRef} class="emh-prompt-input" type="text" defaultValue=${promptState.initial || ''} placeholder=${promptState.placeholder || ''} /> <div class="emh-panel-modal-buttons"> <button type="submit" class="btn my-btn-primary emh-panel-modal-confirm">确定</button> <button type="button" class="btn btn-outline emh-panel-modal-cancel" onClick=${onCancel}>取消</button> </div> </form> </div> </div> `; } function StatusTag({ status }) { return html`<span class="emh-status-tag ${status}">${STATUS_TEXT[status] || '未标记'}</span>`; } function MagnetListModal({ magnetSearch, onPick, onClose }) { if (!magnetSearch) return null; return html` <div class="emh-panel-modal" style="display:flex;"> <div class="emh-panel-modal-content emh-magnet-modal-content"> <h3><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> 磁力搜索结果：${magnetSearch.code}</h3> ${magnetSearch.loading ? html` <div class="emh-magnet-loading">加载中...</div> ` : magnetSearch.error ? html` <div class="emh-magnet-error">${magnetSearch.error}</div> ` : magnetSearch.results.length ? html` <ul class="emh-magnet-list"> ${magnetSearch.results.map(r => html` <li key=${r.href} class="emh-magnet-item" onClick=${() => onPick(magnetSearch.code, r.href)}> <span class="emh-magnet-item-title" title="${r.title}">${r.title}</span> ${r.size ? html`<span class="emh-magnet-item-size">${r.size}</span>` : ''} </li> `)} </ul> <div class="emh-magnet-hint">点击条目获取磁力链接并保存</div> ` : html` <div class="emh-magnet-error">暂无结果</div> `} <div class="emh-panel-modal-buttons"> <button class="btn btn-outline emh-panel-modal-cancel" onClick=${onClose}>关闭</button> </div> </div> </div> `; } function BatchProgressModal({ progress }) { if (!progress || !progress.running) return null; const total = progress.total || 0; const done = progress.done || 0; const pct = total ? Math.round((done / total) * 100) : 0; return html` <div class="emh-panel-modal" style="display:flex;"> <div class="emh-panel-modal-content emh-batch-modal-content"> <h3><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg> 批量获取磁力</h3> <div class="emh-batch-progress"> <div class="emh-batch-progress-track"> <div class="emh-batch-progress-bar" style="width:${pct}%"></div> </div> <div class="emh-batch-progress-info"> <span class="emh-batch-progress-pct">${pct}%</span> <span class="emh-batch-progress-text">${done}/${total}</span> </div> </div> ${progress.current ? html` <div class="emh-batch-current">正在处理：${progress.current}</div> ` : ''} ${progress.skipped || progress.failed ? html` <div class="emh-batch-stats"> ${progress.skipped ? html`<span class="emh-batch-stat">跳过 ${progress.skipped}</span>` : ''} ${progress.failed ? html`<span class="emh-batch-stat emh-batch-stat-fail">失败 ${progress.failed}</span>` : ''} </div> ` : ''} <div class="emh-panel-modal-buttons"> <button class="btn btn-outline emh-panel-modal-cancel" disabled>处理中…</button> </div> </div> </div> `; } function HeaderMenu({ onClose, onClear, onOpenStandalone, stats }) { return html` <div class="emh-header-menu-backdrop" onClick=${onClose}></div> <div class="emh-header-menu"> <div class="emh-header-menu-title">预览缓存</div> ${stats ? html` <div class="emh-header-menu-stat">已缓存 ${stats.magnets} 条磁力 · ${stats.screenshots} 张截图 · ${UTILS.formatBytes(stats.bytes)}</div> ` : ''} ${onOpenStandalone ? html` <button type="button" class="emh-header-menu-item emh-header-menu-item-plain" onClick=${onOpenStandalone}>在新标签页打开</button> ` : ''} <button type="button" class="emh-header-menu-item" onClick=${onClear}>清除全部预览缓存</button> </div> `; } function HelpModal({ onClose }) { const shortcuts = [ ['↑ ↓ · Home · End', '在列表中选择番号'], ['Enter', '打开选中番号详情'], ['Esc', '关闭 / 逐层返回'], ['/', '聚焦搜索'], ['n', '新建番号'], ['Del', '移入回收站'], ['⌘C / Ctrl+C', '复制磁力'], ['r', '刷新预览（详情内）'], ['?', '本帮助'] ]; return html` <div class="emh-panel-modal" style="display:flex;" onClick=${onClose}> <div class="emh-panel-modal-content emh-help-modal-content" onClick=${e => e.stopPropagation()}> <h3><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><line x1="6" y1="8" x2="6.01" y2="8"/><line x1="10" y1="8" x2="10.01" y2="8"/><line x1="14" y1="8" x2="14.01" y2="8"/><line x1="18" y1="8" x2="18.01" y2="8"/><line x1="6" y1="12" x2="6.01" y2="12"/><line x1="10" y1="12" x2="10.01" y2="12"/><line x1="14" y1="12" x2="14.01" y2="12"/><line x1="18" y1="12" x2="18.01" y2="12"/><line x1="6" y1="16" x2="18" y2="16"/></svg> 键盘快捷键</h3> <ul class="emh-help-list"> ${shortcuts.map(s => html` <li key=${s[0]}><span class="emh-kbd-chip">${s[0]}</span><span class="emh-help-desc">${s[1]}</span></li> `)} </ul> <div class="emh-panel-modal-buttons"> <button class="btn btn-outline emh-panel-modal-cancel" onClick=${onClose}>关闭</button> </div> </div> </div> `; } function ItemRow({ item, view, multi, selected, kbdSel, onToggle, onOpenDetail, onFav, onWatch, onUnfav, onDelete, onRestore, onPurge }) { return html` <div class="emh-item ${item.status} ${selected ? 'selected' : ''} ${kbdSel ? 'kbd-sel' : ''}" data-code="${item.code}" aria-selected=${kbdSel || undefined} onClick=${multi ? () => onToggle(item.code) : null}> <label class="emh-checkbox-wrap" style=${multi ? '' : 'visibility:hidden;'}> <input type="checkbox" checked=${selected} onClick=${e => e.stopPropagation()} onChange=${() => onToggle(item.code)} /> </label> <div class="emh-col-code" onClick=${multi ? null : e => { e.stopPropagation(); onOpenDetail(item.code); }} style=${multi ? '' : 'cursor:pointer;'} title="查看详情"> <div class="emh-item-code" title="${item.code}">${item.code}</div> ${typeof item.remarks === 'string' && item.remarks ? html`<div class="emh-item-remarks" title="${item.remarks.length > 80 ? item.remarks.slice(0, 80) + '…' : item.remarks}">${item.remarks}</div>` : null} </div> <span class="emh-col-status"><${StatusTag} status=${item.status} /></span> <span class="emh-col-actions"> ${!multi ? html` <span class="emh-item-actions" role="group" aria-label="操作"> ${view === 'trash' ? html` <button class="emh-act-restore" title="恢复" onClick=${e => { e.stopPropagation(); onRestore(item.code); }} aria-label="恢复"> <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg> </button> <button class="emh-act-purge" title="彻底删除" onClick=${e => { e.stopPropagation(); onPurge(item.code); }} aria-label="彻底删除"> <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg> </button> ` : item.status === 'watched' ? html` <button class="emh-act-delete" title="删除到回收站" onClick=${e => { e.stopPropagation(); onDelete(item.code); }} aria-label="删除到回收站"> <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg> </button> ` : item.status === 'favorite' ? html` <button class="emh-act-watched" title="标记已看" onClick=${e => { e.stopPropagation(); onWatch(item.code); }} aria-label="标记已看"> <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> </button> <button class="emh-act-unfav" title="取消关注" onClick=${e => { e.stopPropagation(); onUnfav(item.code); }} aria-label="取消关注"> <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg> </button> ` : html` <button class="emh-act-favorite" title="标记关注" onClick=${e => { e.stopPropagation(); onFav(item.code); }} aria-label="标记关注"> <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg> </button> <button class="emh-act-watched" title="标记已看" onClick=${e => { e.stopPropagation(); onWatch(item.code); }} aria-label="标记已看"> <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> </button> `} </span> ` : null} </span> </div> `; } // memo 化：仅当 item/selected/kbdSel/view/multi 或稳定回调变化时重建行 const ItemRowMemo = Memorize(ItemRow); function ConfirmModal({ confirm, onConfirm, onCancel }) { if (!confirm) return null; const confirmBtnClass = confirm.danger === 'soft' ? 'btn btn-outline emh-panel-modal-confirm' : 'btn my-btn-danger emh-panel-modal-confirm'; return html` <div class="emh-panel-modal" style="display:flex;"> <div class="emh-panel-modal-content"> <h3>${confirm.message}</h3> <div class="emh-panel-modal-buttons"> <button class="${confirmBtnClass}" onClick=${onConfirm}>确定</button> <button class="btn btn-outline emh-panel-modal-cancel" onClick=${onCancel}>取消</button> </div> </div> </div> `; } function DetailDrawer({ item, inTrash, onClose, onEdit, onEditTags, onEditMagnet, onEditMagnetItem, onRemoveMagnet, onCopyMagnet, onCopyMagnetItem, onPreviewMagnet, onPreviewMagnetAt, onSearchMagnet, onFav, onWatch, onUnfav, onDelete, onRestore, onPurge, onPreviewAvwiki }) { const drawerBodyRef = useRef(null); // 宫格缩略图懒加载 useEffect(() => { if (!drawerBodyRef.current) return; drawerBodyRef.current.querySelectorAll('.emh-preview-thumb[data-src]').forEach(el => LAZY.observe(el)); }); if (!item) return null; const created = item.createdDate ? new Date(item.createdDate).toLocaleString() : ''; const modified = item.modifiedDate ? new Date(item.modifiedDate).toLocaleString() : ''; const deleted = item.deleteDate ? new Date(item.deleteDate).toLocaleString() : ''; const magnets = CODE_LIBRARY.normMagnets(item.magnet); const metaParts = [created ? `创建 ${created}` : '', modified ? `更新 ${modified}` : ''].filter(Boolean); const tagList = []; (function extract(input) { if (input == null) return; if (Array.isArray(input)) return input.forEach(extract); if (typeof input === 'string') { if (input.trim()) tagList.push(input.trim()); return; } if (typeof input === 'number') { tagList.push(String(input)); return; } if (typeof input === 'object' && input.value != null) extract(input.value); })(item.tags); // 详情层次统一（侧栏/新页签一致）：Hero 标题 → meta 行 → 信息/磁力卡片 const metaLine = html`<div class="emh-detail-meta-line">${metaParts.join(' · ')}</div>`; const titleBlock = (item.title && typeof item.title === 'string' && item.title !== item.code) ? html` <div class="emh-detail-field emh-detail-hero"> <span class="emh-detail-label">标题</span> <span class="emh-detail-value">${item.title}</span> </div> ` : null; const remarksBlock = html` <div class="emh-detail-field"> <span class="emh-detail-label">备注</span> <span class="emh-detail-value ${item.remarks ? '' : 'emh-detail-empty'}">${typeof item.remarks === 'string' && item.remarks ? item.remarks : '暂无备注'}</span> </div> `; const tagsBlock = html` <div class="emh-detail-field"> <span class="emh-detail-label">标签</span> <div class="emh-detail-tags"> ${tagList.length ? tagList.map(t => html`<span class="emh-detail-tag">#${t}</span>`) : html`<span class="emh-detail-value emh-detail-empty">暂无标签</span>`} ${!inTrash ? html` <button class="emh-magnet-op emh-tag-edit" title="编辑标签" aria-label="编辑标签" onClick=${() => onEditTags(item.code)}> <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg> </button> ` : ''} </div> </div> `; const infoBlock = html`${remarksBlock}${tagsBlock}`; const magnetBlock = html` <div class="emh-detail-field"> <span class="emh-detail-label">磁力链接 ${magnets.length ? `(${magnets.length})` : ''}</span> ${magnets.length ? html` <ul class="emh-magnet-list"> ${magnets.map((m, idx) => { const mid = CODE_LIBRARY.magnetId(m) || ('idx-' + idx); const mvalue = CODE_LIBRARY.magnetValue(m); const displayM = CODE_LIBRARY.magnetName(m); const pv = CODE_LIBRARY.sanitizeMagnetPreview(m.preview); const hasCache = !!(pv && Array.isArray(pv.screenshots) && pv.screenshots.length); const shotCount = hasCache ? pv.screenshots.length : 0; return html` <li key=${mid} class="emh-magnet-item-static" title="${mvalue}"> <span class="emh-magnet-item-idx">#${idx + 1}</span> <span class="emh-magnet-item-text">${displayM.length > 60 ? displayM.slice(0, 60) + '…' : displayM}</span> <span class="emh-magnet-item-ops"> <button class="emh-magnet-op emh-magnet-op-preview ${hasCache ? 'has-cache' : ''}" title=${hasCache ? `预览截图（已缓存 ${shotCount} 张，右键强制刷新）` : '预览截图'} onClick=${(e) => onPreviewMagnet(item.code, mid, { force: !!(e && e.shiftKey) })} onContextMenu=${(e) => { e.preventDefault(); onPreviewMagnet(item.code, mid, { force: true }); }}> <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>${hasCache ? html`<span class="emh-magnet-preview-badge">${shotCount}</span>` : ''} </button> <button class="emh-magnet-op" title="复制该磁力" onClick=${() => onCopyMagnetItem(item.code, mid)}> <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> </button> ${!inTrash ? html` <button class="emh-magnet-op" title="修改该磁力" onClick=${() => onEditMagnetItem(item.code, mid)}> <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg> </button> <button class="emh-magnet-op emh-magnet-op-del" title="删除该磁力" onClick=${() => onRemoveMagnet(item.code, mid)}> <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg> </button> ` : null} </span> ${hasCache ? html` <div class="emh-preview-grid"> ${pv.screenshots.slice(0, 24).map((s, si) => html` <button type="button" class="emh-preview-cell" data-idx=${si} title=${(s.time != null ? '跳转到 ' + UTILS.formatTime(s.time) + ' 的截图' : '查看截图')} onClick=${() => onPreviewMagnetAt(item.code, mid, si)}> <span class="emh-preview-thumb" data-src="${s.screenshot}"></span> ${s.time != null ? html`<span class="emh-preview-time">${UTILS.formatTime(s.time)}</span>` : ''} </button> `)} </div> ` : ''} </li> `; })} </ul> <span class="emh-magnet-actions"> <button class="btn btn-outline emh-magnet-btn emh-expand" aria-label="复制全部" onClick=${() => onCopyMagnet(item.code)}>${ICON.copy}<span class="emh-expand-label">复制全部</span></button> ${!inTrash ? html` <button class="btn btn-outline emh-magnet-btn emh-expand" aria-label="搜索" onClick=${() => onSearchMagnet(item.code)}>${ICON.search}<span class="emh-expand-label">搜索</span></button> ` : null} </span> ` : html` <span class="emh-detail-value emh-detail-empty">暂无磁力链接</span> ${!inTrash ? html` <span class="emh-magnet-actions"> <button class="btn btn-outline emh-magnet-btn emh-expand" aria-label="搜索磁力" onClick=${() => onSearchMagnet(item.code)}>${ICON.search}<span class="emh-expand-label">搜索磁力</span></button> <button class="btn btn-outline emh-magnet-btn emh-expand" aria-label="手动添加" onClick=${() => onEditMagnet(item.code)}>${ICON.edit}<span class="emh-expand-label">手动添加</span></button> </span> ` : null} `} </div> `; const deletedBlock = deleted ? html` <div class="emh-detail-field"> <span class="emh-detail-label">删除时间</span> <span class="emh-detail-value">${deleted}</span> </div> ` : null; return html` <div class="emh-detail-backdrop" onClick=${onClose}></div> <div class="emh-detail-drawer"> <div class="emh-detail-header"> <div class="emh-detail-title"> <span class="emh-detail-code" title="${item.code}">${item.code}</span> <${StatusTag} status=${item.status} /> </div> <button class="emh-panel-close" title="关闭 (Esc)" onClick=${onClose}>×</button> </div> <div class="emh-detail-body unified" ref=${drawerBodyRef}> ${titleBlock} ${metaParts.length ? metaLine : ''} <div class="emh-detail-section">${infoBlock}</div> <div class="emh-detail-section">${magnetBlock}</div> ${deletedBlock} </div> <div class="emh-detail-actions"> ${!inTrash ? html` <button class="btn btn-outline emh-expand" aria-label="编辑备注" onClick=${() => onEdit(item.code)}>${ICON.edit}<span class="emh-expand-label">编辑备注</span></button> <button class="btn btn-outline emh-expand" aria-label="AVWikiDB 截图预览" title="从 AVWikiDB 抓取该番号作品页宫格截图（Shift 强制刷新）" onClick=${(e) => onPreviewAvwiki(item.code, { force: !!(e && e.shiftKey) })}>${ICON.refresh}<span class="emh-expand-label">AVWikiDB 截图</span></button> ` : null} ${inTrash ? html` <button class="btn btn-outline emh-expand" aria-label="恢复" onClick=${() => onRestore(item.code)}>${ICON.restore}<span class="emh-expand-label">恢复</span></button> <button class="btn my-btn-danger emh-expand" aria-label="彻底删除" onClick=${() => onPurge(item.code)}>${ICON.trash}<span class="emh-expand-label">彻底删除</span></button> ` : item.status === 'unmarked' ? html` <button class="btn btn-outline emh-expand" aria-label="关注" onClick=${() => onFav(item.code)}>${ICON.heart}<span class="emh-expand-label">关注</span></button> <button class="btn btn-outline emh-expand" aria-label="标记已看" onClick=${() => onWatch(item.code)}>${ICON.checkCircle}<span class="emh-expand-label">标记已看</span></button> ` : item.status === 'favorite' ? html` <button class="btn btn-outline emh-expand" aria-label="标记已看" onClick=${() => onWatch(item.code)}>${ICON.checkCircle}<span class="emh-expand-label">标记已看</span></button> <button class="btn btn-outline emh-expand" aria-label="取消关注" onClick=${() => onUnfav(item.code)}>${ICON.unfav}<span class="emh-expand-label">取消关注</span></button> ` : html` <button class="btn my-btn-danger emh-expand" aria-label="删除到回收站" onClick=${() => onDelete(item.code)}>${ICON.trash}<span class="emh-expand-label">删除到回收站</span></button> `} </div> ${!inTrash && item.status !== 'watched' ? html` <div class="emh-detail-danger"> <button class="btn btn-outline" onClick=${() => onDelete(item.code)}>${ICON.trash} 删除到回收站</button> </div> ` : null} </div> `; } function CodeManagerApp() { const [, forceUpdate] = useReducer(x => x + 1, 0); const headRef = useRef(null); const searchRef = useRef(null); const contentRef = useRef(null); const resizeRef = useRef(null); const actionsRef = useRef(null); const debounceRef = useRef(null); const [searchDraft, setSearchDraft] = useState(''); // 搜索防抖：200ms 后才写 store，避免逐字符全量重渲染 const onSearchInput = (e) => { const v = e.target.value; setSearchDraft(v); if (debounceRef.current) clearTimeout(debounceRef.current); debounceRef.current = setTimeout(() => { debounceRef.current = null; PanelStore.set({ searchQuery: v }); }, 200); }; const clearSearch = () => { if (debounceRef.current) { clearTimeout(debounceRef.current); debounceRef.current = null; } setSearchDraft(''); PanelStore.set({ searchQuery: '' }); if (searchRef.current) searchRef.current.focus(); }; useEffect(() => { return () => { if (debounceRef.current) clearTimeout(debounceRef.current); }; }, []); useEffect(() => { const unsub = PanelStore.subscribe(() => forceUpdate()); return unsub; }, []); const st = PanelStore.get(); // store 的 searchQuery 外部变化（清空/同步）时回写草稿 useEffect(() => { setSearchDraft(st.searchQuery); }, [st.searchQuery]); const actions = { hidePanel: () => PanelStore.set({ visible: false, multiSelectMode: false, selectedItems: [], helpOpen: false, menuOpen: false }), setFilter: (f) => PanelStore.set({ currentFilter: f, timeFilter: f === 'all' ? st.timeFilter : '', multiSelectMode: false, selectedItems: [], selectedIndex: -1 }), toggleMulti: () => PanelStore.set({ multiSelectMode: !st.multiSelectMode, selectedItems: [], selectedIndex: -1 }), toggleItem: (code) => { const sel = st.selectedItems.includes(code) ? st.selectedItems.filter(c => c !== code) : [...st.selectedItems, code]; PanelStore.set({ selectedItems: sel }); }, selectAll: () => { if (st.selectedItems.length === items.length) PanelStore.set({ selectedItems: [] }); else PanelStore.set({ selectedItems: items.map(i => i.code) }); }, markFav: (code) => { CODE_LIBRARY.markItem(code, 'favorite'); UTILS.showToast(`番号 ${code} 已标记为关注`, 'success'); }, markWatched: (code) => { CODE_LIBRARY.markItem(code, 'watched'); UTILS.showToast(`番号 ${code} 已标记为已看`, 'success'); }, unfavorite: (code) => { CODE_LIBRARY.markItem(code, 'unmarked'); UTILS.showToast(`番号 ${code} 已取消关注`, 'success'); }, editRemark: (code) => { const cur = CODE_LIBRARY.getItem(code); if (!cur) { UTILS.showToast('回收站条目请先恢复再编辑', 'warning'); return; } PanelStore.set({ prompt: { title: `编辑备注 (${code})`, initial: (cur.remarks || cur.remark) || '', placeholder: '输入备注内容', onSubmit: (remark) => { if (remark !== null) { CODE_LIBRARY.markItem(code, cur.status || 'unmarked', undefined, remark); UTILS.showToast('备注已更新', 'success'); } } } }); }, editTags: (code) => { const cur = CODE_LIBRARY.getItem(code); if (!cur) { UTILS.showToast('回收站条目请先恢复再编辑标签', 'warning'); return; } const list = []; (function extract(input) { if (input == null) return; if (Array.isArray(input)) return input.forEach(extract); if (typeof input === 'string') { if (input.trim()) list.push(input.trim()); return; } if (typeof input === 'number') { list.push(String(input)); return; } if (typeof input === 'object' && input.value != null) extract(input.value); })(cur.tags); PanelStore.set({ prompt: { title: `编辑标签 (${code})`, initial: list.join(', '), placeholder: '多个标签用逗号分隔', onSubmit: (val) => { if (val !== null) { const arr = String(val).split(/[,，、]/).map(s => s.trim()).filter(Boolean); CODE_LIBRARY.setTags(code, arr); UTILS.showToast('标签已更新', 'success'); } } } }); }, editMagnet: (code) => { const cur = CODE_LIBRARY.getItem(code); if (!cur) { UTILS.showToast('回收站条目请先恢复再编辑', 'warning'); return; } const curMag = CODE_LIBRARY.normMagnets(cur.magnet); PanelStore.set({ prompt: { title: `编辑磁力链接 (${code})`, initial: curMag.map(e => CODE_LIBRARY.magnetValue(e)).join('\n'), placeholder: '每行一个磁力链接，可多行', onSubmit: (magnet) => { if (magnet !== null) { const arr = CODE_LIBRARY.normMagnets(String(magnet).split('\n')); CODE_LIBRARY.markItem(code, cur.status || 'unmarked', undefined, undefined, arr); UTILS.showToast('磁力链接已保存', 'success'); } } } }); }, editMagnetItem: (code, idOrIdx) => { const cur = CODE_LIBRARY.getItem(code); if (!cur) { UTILS.showToast('回收站条目请先恢复再编辑', 'warning'); return; } const arr = CODE_LIBRARY.normMagnets(cur.magnet); // 按 id 定位；若无 id（旧数据）回退按索引 const findIdx = (target) => { const t = String(target); return arr.findIndex(e => { const eid = CODE_LIBRARY.magnetId(e); return (eid && String(eid) === t) || (!eid && (typeof target === 'number' ? true : false)); }); }; const idx = findIdx(idOrIdx); if (idx === -1 || !arr[idx]) return; const target = arr[idx]; PanelStore.set({ prompt: { title: `修改磁力 #${idx + 1} (${code})`, initial: CODE_LIBRARY.magnetValue(target), placeholder: '粘贴新磁力链接', onSubmit: (magnet) => { if (magnet !== null && magnet.trim()) { const nextVal = magnet.trim(); const newArr = arr.map((e, i) => { if (i !== idx) return e; const next = { id: e.id, value: nextVal }; // 磁力变更后清除旧预览缓存 return next; }); CODE_LIBRARY.markItem(code, cur.status || 'unmarked', undefined, undefined, newArr); UTILS.showToast('磁力已修改', 'success'); } } } }); }, removeMagnet: (code, idOrIdx) => { const cur = CODE_LIBRARY.getItem(code); if (!cur) { UTILS.showToast('回收站条目请先恢复再编辑', 'warning'); return; } const arr = CODE_LIBRARY.normMagnets(cur.magnet); const t = String(idOrIdx); const idx = arr.findIndex(e => { const eid = CODE_LIBRARY.magnetId(e); return (eid && String(eid) === t) || (!eid && typeof idOrIdx === 'number' && arr.indexOf(e) === idOrIdx); }); if (idx === -1 || !arr[idx]) return; PanelStore.set({ confirm: { message: `确定删除磁力 #${idx + 1} 吗？`, danger: 'soft', onConfirm: () => { const newArr = arr.filter((_, i) => i !== idx); CODE_LIBRARY.markItem(code, cur.status || 'unmarked', undefined, undefined, newArr); UTILS.showToast('磁力已删除', 'success'); } } }); }, searchMagnet: (code) => { // 从 1cili 拉取磁力搜索结果列表；回收站条目禁止写入 if (!CODE_LIBRARY.getItem(code)) { UTILS.showToast('回收站条目请先恢复再搜索磁力', 'warning'); return; } PanelStore.set({ magnetSearch: { code, loading: true, results: [], error: '' } }); const url = `https://1cili.com/search?q=${encodeURIComponent(code)}`; const done = (results, error) => { if (error) PanelStore.set({ magnetSearch: { code, loading: false, results: [], error } }); else PanelStore.set({ magnetSearch: { code, loading: false, results, error: '' } }); }; const onload = (resp) => { try { const htmlText = resp.responseText || ''; const parser = new DOMParser(); const doc = parser.parseFromString(htmlText, 'text/html'); const rows = []; doc.querySelectorAll('table.file-list tbody tr').forEach(tr => { const a = tr.querySelector('td a[href^="/!"]'); if (!a) return; const title = (a.textContent || '').trim().replace(/\s+/g, ' '); const sizeEl = tr.querySelector('.td-size'); const size = sizeEl ? sizeEl.textContent.trim() : ''; rows.push({ title, size, href: a.getAttribute('href') }); }); done(rows, rows.length ? '' : '未找到相关磁力资源'); } catch (e) { done([], '解析搜索结果失败'); } }; if (typeof GM_xmlhttpRequest !== 'undefined') { GM_xmlhttpRequest({ method: 'GET', url, onload, onerror: (e) => done([], '网络请求失败'), timeout: 15000, ontimeout: () => done([], '请求超时') }); } else { fetch(url).then(r => r.text()).then(t => onload({ responseText: t })).catch(() => done([], '网络请求失败')); } }, fetchMagnetDetail: (code, href) => { const base = 'https://1cili.com'; const url = base + href; const onload = (resp) => { try { const htmlText = resp.responseText || ''; const doc = new DOMParser().parseFromString(htmlText, 'text/html'); const input = doc.querySelector('#input-magnet'); const magnet = input ? (input.value || '').trim() : ''; if (magnet) { const cur = CODE_LIBRARY.getItem(code); // 回收站条目禁止 markItem，避免静默重建主库条目 if (!cur) { UTILS.showToast('回收站条目请先恢复再添加磁力', 'warning'); return; } // 提取影片信息（标题）填入备注 let remark = (cur.remarks || cur.remark) || ''; const infoDd = Array.prototype.slice.call(doc.querySelectorAll('.torrent-info dt') || []) .find(dt => (dt.textContent || '').includes('影片信息')); const titleText = infoDd && infoDd.nextElementSibling ? (infoDd.nextElementSibling.textContent || '').replace(/\s+/g, ' ').trim() : ''; if (titleText && !remark) { remark = titleText; } else if (titleText && !remark.includes(titleText)) { remark = remark ? `${remark} | ${titleText}` : titleText; } // 追加到现有磁力数组（去重），不覆盖已有磁力 const existingMagnets = CODE_LIBRARY.normMagnets(cur && cur.magnet); const existingVals = existingMagnets.map(e => CODE_LIBRARY.magnetValue(e)); if (existingVals.includes(magnet)) { UTILS.showToast('该磁力已存在', 'info'); } else { const newArr = [...existingMagnets, magnet]; // normMagnets 在 markItem 内统一转对象数组 CODE_LIBRARY.markItem(code, cur.status || 'unmarked', undefined, remark, newArr); UTILS.showToast('磁力链接已添加' + (titleText ? '，并填入影片信息' : ''), 'success'); } PanelStore.set({ magnetSearch: null }); } else { UTILS.showToast('详情页未找到磁力链接', 'error'); } } catch (e) { UTILS.showToast('解析详情失败', 'error'); } }; if (typeof GM_xmlhttpRequest !== 'undefined') { GM_xmlhttpRequest({ method: 'GET', url, onload, onerror: () => UTILS.showToast('请求失败', 'error'), timeout: 15000, ontimeout: () => UTILS.showToast('请求超时', 'error') }); } else { fetch(url).then(r => r.text()).then(t => onload({ responseText: t })).catch(() => UTILS.showToast('请求失败', 'error')); } }, closeMagnetSearch: () => PanelStore.set({ magnetSearch: null }), batchFetchMagnets: () => { // 深拷贝选中番号，避免处理过程中 selectedItems 变化导致循环无限追加 const codes = (st.selectedItems || []).slice(); const totalCount = codes.length; if (!totalCount) { UTILS.showToast('请先勾选番号', 'warning'); return; } // 立即清空选中项（副本已捕获），防止处理中任何追加/重渲染干扰循环 PanelStore.set({ multiSelectMode: false, selectedItems: [] }); // 初始化进度 PanelStore.set({ batchProgress: { running: true, total: totalCount, done: 0, skipped: 0, failed: 0, current: '' } }); // 串行处理，避免并发请求过多 (async () => { const doGet = (url) => new Promise((resolve) => { const cb = (resp) => resolve(resp.responseText || ''); if (typeof GM_xmlhttpRequest !== 'undefined') { GM_xmlhttpRequest({ method: 'GET', url, onload: cb, onerror: () => resolve(''), timeout: 15000, ontimeout: () => resolve('') }); } else { fetch(url).then(r => r.text()).then(cb).catch(() => resolve('')); } }); const extractMagnetFromDetail = (htmlText) => { const doc = new DOMParser().parseFromString(htmlText, 'text/html'); const input = doc.querySelector('#input-magnet'); // 用 .value 而非 getAttribute('value')，HTML 实体（&）会正确解码为 & return input ? (input.value || '').trim() : ''; }; const extractTitleFromDetail = (htmlText) => { const doc = new DOMParser().parseFromString(htmlText, 'text/html'); const infoDd = Array.prototype.slice.call(doc.querySelectorAll('.torrent-info dt') || []) .find(dt => (dt.textContent || '').includes('影片信息')); return infoDd && infoDd.nextElementSibling ? (infoDd.nextElementSibling.textContent || '').replace(/\s+/g, ' ').trim() : ''; }; const isVariantMatch = (title, code) => { // 匹配 番号 的 C/UC/CH 变体（如 番号-C、番号_C、764ch、_HD_CH、-UC 等） if (!title) return false; const t = String(title).toUpperCase().replace(/\s+/g, ''); const c = String(code).toUpperCase().replace(/\s+/g, ''); if (!t.startsWith(c)) return false; const rest = t.slice(c.length); if (!rest) return false; // 变体 C/UC/CH 前允许 - _ . 分隔，后跟非字母数字或结束 return /[-_.]?(C|UC|CH)([^A-Z0-9]|$)/.test(rest); }; let okCount = 0; let skipCount = 0; let failCount = 0; const upd = (partial) => PanelStore.set({ batchProgress: { ...PanelStore.state.batchProgress, ...partial } }); for (let i = 0; i < codes.length; i++) { const code = codes[i]; upd({ current: code }); // 已有磁力的番号直接跳过，避免重复获取/覆盖 const existing = CODE_LIBRARY.getItem(code); if (existing && CODE_LIBRARY.normMagnets(existing.magnet).length) { skipCount++; upd({ done: i + 1, skipped: skipCount }); continue; } const searchHtml = await doGet(`https://1cili.com/search?q=${encodeURIComponent(code)}`); if (!searchHtml) { failCount++; upd({ done: i + 1, failed: failCount }); continue; } const doc = new DOMParser().parseFromString(searchHtml, 'text/html'); const rows = []; doc.querySelectorAll('table.file-list tbody tr').forEach(tr => { const a = tr.querySelector('td a[href^="/!"]'); if (a && a.getAttribute('href')) { rows.push({ href: a.getAttribute('href'), title: (a.textContent || '').trim().replace(/\s+/g, ' ') }); } }); const filteredRows = rows.filter(r => isVariantMatch(r.title, code)); if (!filteredRows.length) { failCount++; upd({ done: i + 1, failed: failCount }); continue; } const magnets = []; let firstTitle = ''; for (const row of filteredRows) { const detailHtml = await doGet('https://1cili.com' + row.href); if (!detailHtml) continue; const m = extractMagnetFromDetail(detailHtml); if (m && !magnets.includes(m)) { magnets.push(m); if (!firstTitle) firstTitle = extractTitleFromDetail(detailHtml); } } if (!magnets.length) { failCount++; upd({ done: i + 1, failed: failCount }); continue; } const cur = CODE_LIBRARY.getItem(code); const remark = firstTitle || (cur && (cur.remarks || cur.remark)) || ''; CODE_LIBRARY.markItem(code, (cur && cur.status) || 'unmarked', undefined, remark, magnets); okCount++; upd({ done: i + 1 }); } PanelStore.set({ multiSelectMode: false, selectedItems: [] }); const processed = codes.length - skipCount; PanelStore.set({ batchProgress: null }); UTILS.showToast(`批量完成：${okCount}/${processed} 个番号${skipCount ? `，${skipCount} 个已有磁力已跳过` : ''}${failCount ? `，${failCount} 个失败` : ''}`, okCount === processed ? 'success' : 'warning'); })(); }, resolveItem: (code) => CODE_LIBRARY.getItem(code) || CODE_LIBRARY.trash.items.find(i => i.code.toUpperCase() === String(code).toUpperCase()) || null, previewAvwiki: (code, opts) => { const item = actions.resolveItem(code); if (!item) { UTILS.showToast('未找到该番号', 'warning'); return; } AVWIKI_PREVIEW.fetchAndShow(item.code, opts || {}); }, previewMagnet: (code, idOrIdx, opts) => { const item = actions.resolveItem(code); if (!item) { UTILS.showToast('未找到该番号', 'warning'); return; } const magnets = CODE_LIBRARY.normMagnets(item.magnet); const t = String(idOrIdx); let idx = magnets.findIndex((e, i) => { const eid = CODE_LIBRARY.magnetId(e); return (eid && String(eid) === t) || String(i) === t; }); if (idx < 0 && /^\d+$/.test(t)) idx = Number(t); if (idx < 0 || idx >= magnets.length) { UTILS.showToast('磁力不存在', 'warning'); return; } const entry = magnets[idx]; const mid = CODE_LIBRARY.magnetId(entry) || String(idx); const mval = CODE_LIBRARY.magnetValue(entry); MAGNET_PREVIEW.fetchAndCache(code, mid, mval, opts || {}); }, previewMagnetAt: (code, idOrIdx, shotIdx) => { // 宫格点击：直接打开已缓存截图的灯箱（指定起始索引），不触发新请求 const item = actions.resolveItem(code); if (!item) return; const magnets = CODE_LIBRARY.normMagnets(item.magnet); const t = String(idOrIdx); let idx = magnets.findIndex((e, i) => { const eid = CODE_LIBRARY.magnetId(e); return (eid && String(eid) === t) || String(i) === t; }); if (idx < 0 && /^\d+$/.test(t)) idx = Number(t); if (idx < 0 || idx >= magnets.length) return; const pv = CODE_LIBRARY.sanitizeMagnetPreview(magnets[idx].preview); if (!pv || !Array.isArray(pv.screenshots) || !pv.screenshots.length) return; const urls = pv.screenshots.map(s => s.screenshot || s.url || '').filter(Boolean); const meta = [pv.name, pv.fileType || pv.type, UTILS.formatBytes(pv.size)].filter(Boolean).join(' · '); MAGNET_PREVIEW.open(urls, Number.isFinite(Number(shotIdx)) ? Number(shotIdx) : 0, meta); }, copyMagnetItem: (code, idOrIdx) => { const item = actions.resolveItem(code); const magnets = CODE_LIBRARY.normMagnets(item && item.magnet); const t = String(idOrIdx); const entry = magnets.find(e => { const eid = CODE_LIBRARY.magnetId(e); return (eid && String(eid) === t) || (!eid && typeof idOrIdx === 'number' && magnets.indexOf(e) === idOrIdx); }) || magnets[Number(idOrIdx)]; if (!entry) { UTILS.showToast('磁力不存在', 'warning'); return; } const mval = CODE_LIBRARY.magnetValue(entry); const text = CODE_LIBRARY.cleanMagnet(entry) || mval; if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(() => UTILS.showToast('磁力已复制', 'success')).catch(() => UTILS.showToast('复制失败', 'error')); } else { const ta = document.createElement('textarea'); ta.value = text; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); UTILS.showToast('磁力已复制', 'success'); } catch (e) { UTILS.showToast('复制失败', 'error'); } document.body.removeChild(ta); } }, copyMagnet: (code) => { const item = actions.resolveItem(code); const magnets = CODE_LIBRARY.normMagnets(item && item.magnet); if (!magnets.length) { UTILS.showToast('该番号暂无磁力链接', 'warning'); return; } const text = magnets.map(e => CODE_LIBRARY.magnetValue(e)).join('\n'); if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(() => UTILS.showToast(`已复制 ${magnets.length} 条磁力`, 'success')).catch(() => UTILS.showToast('复制失败', 'error')); } else { const ta = document.createElement('textarea'); ta.value = text; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); UTILS.showToast(`已复制 ${magnets.length} 条磁力`, 'success'); } catch (e) { UTILS.showToast('复制失败', 'error'); } document.body.removeChild(ta); } }, deleteToTrash: (code) => PanelStore.set({ confirm: { message: '将从列表移除，可在回收站恢复', danger: 'soft', onConfirm: () => { CODE_LIBRARY.delete(code); if (st.detail === code) PanelStore.set({ detail: null }); UTILS.showToast(`番号 ${code} 已移至回收站`, 'success'); } } }), restoreFromTrash: (code) => { const trashItems = CODE_LIBRARY.trash.items; const idx = trashItems.findIndex(i => i.code.toUpperCase() === code.toUpperCase()); if (idx === -1) { UTILS.showToast('未找到该记录', 'error'); return; } if (CODE_LIBRARY.getItem(code)) { UTILS.showToast('番号库中已存在该番号', 'warning'); return; } const item = trashItems.splice(idx, 1)[0]; delete item.deleteDate; CODE_LIBRARY.data.items.unshift(item); CODE_LIBRARY.save(); if (st.detail === code) PanelStore.set({ detail: null }); UTILS.showToast(`番号 ${code} 已恢复`, 'success'); }, permanentDelete: (code) => PanelStore.set({ confirm: { message: `将永久删除 ${code}，无法恢复`, danger: 'hard', onConfirm: () => { CODE_LIBRARY.trash.items = CODE_LIBRARY.trash.items.filter(i => i.code.toUpperCase() !== code.toUpperCase()); CODE_LIBRARY.save(); if (st.detail === code) PanelStore.set({ detail: null }); UTILS.showToast(`番号 ${code} 已永久删除`, 'success'); } } }), addCode: () => { PanelStore.set({ prompt: { title: '添加番号', initial: '', placeholder: '输入番号，如 ABC-123', onSubmit: (code) => { if (code && code.trim()) { CODE_LIBRARY.add(code.trim()); UTILS.showToast(`番号 ${code.trim()} 已添加`, 'success'); } } } }); }, exportData: () => { const data = CODE_LIBRARY.exportData(st.currentFilter); const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'emh_code_library.json'; a.click(); URL.revokeObjectURL(url); UTILS.showToast('数据导出成功', 'success'); }, importData: () => { const input = document.createElement('input'); input.type = 'file'; input.accept = '.json'; input.onchange = (e) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { try { CODE_LIBRARY.importData(JSON.parse(e.target.result)); UTILS.showToast('数据导入成功', 'success'); } catch (err) { UTILS.showToast('数据导入失败', 'error'); } }; reader.readAsText(file); } }; input.click(); }, batchMark: (status) => { const count = st.selectedItems.length; st.selectedItems.forEach(code => CODE_LIBRARY.markItem(code, status)); PanelStore.set({ multiSelectMode: false, selectedItems: [] }); UTILS.showToast(`已批量标记 ${count} 个番号`, 'success'); }, batchDelete: () => PanelStore.set({ confirm: { message: `将从列表移除选中的 ${st.selectedItems.length} 项，可在回收站恢复`, danger: 'soft', onConfirm: () => { const count = st.selectedItems.length; st.selectedItems.forEach(code => CODE_LIBRARY.delete(code)); PanelStore.set({ multiSelectMode: false, selectedItems: [] }); UTILS.showToast(`已将 ${count} 个番号移至回收站`, 'success'); } } }), clearTrash: () => { if (!CODE_LIBRARY.trash.items.length) { UTILS.showToast('回收站已经是空的', 'info'); return; } PanelStore.set({ confirm: { message: '确定要清空回收站吗？此操作不可撤销！', danger: 'hard', onConfirm: () => { CODE_LIBRARY.trash.items = []; CODE_LIBRARY.save(); UTILS.showToast('回收站已清空', 'success'); } } }); }, doConfirm: () => { if (st.confirm) { const cb = st.confirm.onConfirm; PanelStore.set({ confirm: null }); if (cb) cb(); } }, cancelConfirm: () => PanelStore.set({ confirm: null }), doPromptSubmit: (value) => { if (st.prompt) { const cb = st.prompt.onSubmit; PanelStore.set({ prompt: null }); if (cb) cb(value); } }, cancelPrompt: () => PanelStore.set({ prompt: null }), openDetail: (code) => { const item = CODE_LIBRARY.getItem(code) || CODE_LIBRARY.trash.items.find(i => i.code.toUpperCase() === code.toUpperCase()); if (item) PanelStore.set({ detail: code }); }, closeDetail: () => PanelStore.set({ detail: null }), toggleTheme: () => { THEME.set(THEME.next()); PanelStore.set({}); }, toggleHelp: () => PanelStore.set({ helpOpen: !PanelStore.state.helpOpen }), toggleMenu: () => PanelStore.set({ menuOpen: !PanelStore.state.menuOpen }), openStandalone: () => { PanelStore.set({ menuOpen: false }); STANDALONE.open(); }, clearPreviewCaches: () => { const s = CODE_LIBRARY.previewCacheStats(); PanelStore.set({ menuOpen: false, confirm: { message: `确定清除全部预览缓存（${s.magnets} 条磁力 / ${s.screenshots} 张截图）？之后可重新拉取。`, danger: 'soft', onConfirm: () => { const n = CODE_LIBRARY.clearAllPreviewCaches(); UTILS.showToast(`已清除 ${n} 条磁力 + AVWikiDB 的预览缓存`, 'success'); } } }); }, kbdStep: (delta) => { const len = items.length; if (!len) return; const cur = st.selectedIndex < 0 ? (delta > 0 ? -1 : 0) : st.selectedIndex; PanelStore.set({ selectedIndex: Math.max(0, Math.min(len - 1, cur + delta)) }); }, kbdJump: (i) => { if (!items.length) return; PanelStore.set({ selectedIndex: Math.max(0, Math.min(items.length - 1, i)) }); }, kbdOpen: () => { const it = items[st.selectedIndex]; if (it) actions.openDetail(it.code); }, kbdDelete: () => { if (st.currentFilter === 'trash') return; const it = items[st.selectedIndex]; if (it) actions.deleteToTrash(it.code); }, kbdCopy: () => { const it = items[st.selectedIndex]; if (it) actions.copyMagnet(it.code); }, kbdRefreshPreview: () => { const code = st.detail; if (!code) return; const item = actions.resolveItem(code); if (!item) return; const magnets = CODE_LIBRARY.normMagnets(item.magnet); if (!magnets.length) return; const entry = magnets[0]; const mid = CODE_LIBRARY.magnetId(entry) || '0'; actions.previewMagnet(code, mid, { force: true }); } }; // actions 每次渲染重建；经 ref 转发给稳定回调，保证 memo(ItemRow) 生效且无过期闭包 actionsRef.current = actions; const stableOnToggle = useCallback((code) => actionsRef.current.toggleItem(code), []); const stableOnOpenDetail = useCallback((code) => actionsRef.current.openDetail(code), []); const stableOnFav = useCallback((code) => actionsRef.current.markFav(code), []); const stableOnWatch = useCallback((code) => actionsRef.current.markWatched(code), []); const stableOnUnfav = useCallback((code) => actionsRef.current.unfavorite(code), []); const stableOnDelete = useCallback((code) => actionsRef.current.deleteToTrash(code), []); const stableOnRestore = useCallback((code) => actionsRef.current.restoreFromTrash(code), []); const stableOnPurge = useCallback((code) => actionsRef.current.permanentDelete(code), []); const kbdRef = useRef(null); kbdRef.current = (e) => { if (!st.visible) return; // 灯箱打开时由 MAGNET_PREVIEW 处理键盘；方向键兜底 preventDefault 防止浏览器历史导航 if (MAGNET_PREVIEW._open) { if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') e.preventDefault(); return; } const key = e.key; if (key === 'Escape') { if (st.menuOpen) { e.preventDefault(); actions.toggleMenu(); return; } if (st.helpOpen) { e.preventDefault(); actions.toggleHelp(); return; } if (st.prompt) { e.preventDefault(); actions.cancelPrompt(); return; } if (st.confirm) { e.preventDefault(); actions.cancelConfirm(); return; } if (st.magnetSearch) { e.preventDefault(); actions.closeMagnetSearch(); return; } if (st.detail) { e.preventDefault(); actions.closeDetail(); return; } e.preventDefault(); actions.hidePanel(); return; } // 文本输入焦点时不劫持快捷键 const ae = document.activeElement; if (ae && (ae.tagName === 'INPUT' || ae.tagName === 'TEXTAREA' || ae.isContentEditable)) return; if (key === '?') { e.preventDefault(); actions.toggleHelp(); return; } if (st.helpOpen || st.menuOpen || st.prompt || st.confirm || st.magnetSearch || st.batchProgress) return; if (st.detail) { if (key === 'r' || key === 'R') { e.preventDefault(); actions.kbdRefreshPreview(); } return; } if (key === '/') { e.preventDefault(); if (searchRef.current) searchRef.current.focus(); return; } if (key === 'n' || key === 'N') { e.preventDefault(); actions.addCode(); return; } if (key === 'ArrowDown') { e.preventDefault(); actions.kbdStep(1); return; } if (key === 'ArrowUp') { e.preventDefault(); actions.kbdStep(-1); return; } if (key === 'Home') { e.preventDefault(); actions.kbdJump(0); return; } if (key === 'End') { e.preventDefault(); actions.kbdJump(items.length - 1); return; } if (key === 'Enter') { // 面板内交互控件（按钮/链接/下拉）聚焦时，Enter 交由原生激活，避免劫持导致按钮失效 if (ae && (ae.tagName === 'BUTTON' || ae.tagName === 'A' || ae.tagName === 'SELECT') && ae.closest && ae.closest('.emh-code-manager-panel')) return; e.preventDefault(); actions.kbdOpen(); return; } if (key === 'Delete' || key === 'Backspace') { // 仅在确有选中行（且非回收站视图）时劫持，避免无谓吞掉浏览器默认行为 if (st.selectedIndex >= 0 && st.currentFilter !== 'trash' && items[st.selectedIndex]) { e.preventDefault(); actions.kbdDelete(); } return; } if ((e.metaKey || e.ctrlKey) && (key === 'c' || key === 'C')) { // 仅在确有选中行时劫持复制 if (st.selectedIndex >= 0 && items[st.selectedIndex]) { e.preventDefault(); actions.kbdCopy(); } return; } }; useEffect(() => { const onKey = (e) => { if (kbdRef.current) kbdRef.current(e); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, []); useEffect(() => { document.body.style.overflow = st.visible ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [st.visible]); // 面板宽度可调：左缘拖拽 320-900px，持久化 GM useEffect(() => { const panel = document.getElementById('emh-code-manager-panel'); const handle = resizeRef.current; if (!panel || !handle) return; let w = 520; try { const saved = typeof GM_getValue === 'function' ? GM_getValue('emh_panel_size') : null; if (saved) { const n = Number(saved); if (Number.isFinite(n) && n >= 320 && n <= 900) w = n; } } catch (e) {} panel.style.setProperty('--emh-panel-w', w + 'px'); let startX = 0, startW = w, active = false; const onMove = (e) => { if (!active) return; const nw = Math.max(320, Math.min(900, startW + (startX - e.clientX))); panel.style.setProperty('--emh-panel-w', nw + 'px'); }; const onUp = () => { if (!active) return; active = false; panel.style.transition = ''; document.removeEventListener('pointermove', onMove); document.removeEventListener('pointerup', onUp); const cur = parseFloat(panel.style.getPropertyValue('--emh-panel-w')) || 520; try { if (typeof GM_setValue === 'function') GM_setValue('emh_panel_size', String(Math.round(cur))); } catch (err) {} }; const onDown = (e) => { e.preventDefault(); active = true; startX = e.clientX; startW = parseFloat(panel.style.getPropertyValue('--emh-panel-w')) || 520; panel.style.transition = 'none'; document.addEventListener('pointermove', onMove); document.addEventListener('pointerup', onUp); }; handle.addEventListener('pointerdown', onDown); return () => { handle.removeEventListener('pointerdown', onDown); document.removeEventListener('pointermove', onMove); document.removeEventListener('pointerup', onUp); }; }, [st.visible]); const all = CODE_LIBRARY.getAll(); const favList = CODE_LIBRARY.getFavorites(); const watchedList = CODE_LIBRARY.getWatched(); const trashList = CODE_LIBRARY.getTrash(); let items = st.currentFilter === 'favorite' ? favList : st.currentFilter === 'watched' ? watchedList : st.currentFilter === 'trash' ? trashList : all; if (st.timeFilter) { const now = Date.now(); const day = 86400000; let cutoff = now; if (st.timeFilter === 'today') cutoff = new Date().setHours(0, 0, 0, 0); else if (st.timeFilter === '7d') cutoff = now - 7 * day; else if (st.timeFilter === '30d') cutoff = now - 30 * day; items = items.filter(i => i.createdDate && new Date(i.createdDate).getTime() >= cutoff); } if (st.magnetFilter === 'has') { items = items.filter(i => CODE_LIBRARY.normMagnets(i.magnet).length > 0); } else if (st.magnetFilter === 'none') { items = items.filter(i => CODE_LIBRARY.normMagnets(i.magnet).length === 0); } const q = st.searchQuery.toLowerCase(); if (q) items = items.filter(i => i.code.toLowerCase().includes(q) || (typeof i.remarks === 'string' && i.remarks.toLowerCase().includes(q))); // 键盘选中索引随列表变化收敛到有效范围（须在 items 计算之后） useEffect(() => { if (items.length === 0) { if (st.selectedIndex !== -1) PanelStore.set({ selectedIndex: -1 }); } else if (st.selectedIndex >= items.length) { PanelStore.set({ selectedIndex: items.length - 1 }); } }, [items.length, st.selectedIndex]); // 键盘选中项滚动到可视区（用 scrollTop，不用 scrollIntoView） useEffect(() => { if (st.selectedIndex < 0 || !contentRef.current) return; const el = contentRef.current.querySelectorAll('.emh-item[data-code]')[st.selectedIndex]; if (!el) return; const cont = contentRef.current; cont.scrollTop = Math.max(0, el.offsetTop - cont.clientHeight / 2); }, [st.selectedIndex]); // standalone 双栏：选中行 → 右侧详情联动 useEffect(() => { if (window.__EMH_STANDALONE && st.selectedIndex >= 0) { const it = items[st.selectedIndex]; if (it && st.detail !== it.code) actions.openDetail(it.code); } }, [st.selectedIndex]); let emptyMsg = '番号库为空，点击"添加"开始'; let emptyIcon = 'library'; if (st.currentFilter === 'favorite') { emptyMsg = '暂无关注番号'; emptyIcon = 'favorite'; } else if (st.currentFilter === 'watched') { emptyMsg = '暂无已看记录'; emptyIcon = 'watched'; } else if (st.currentFilter === 'trash') { emptyMsg = '回收站为空'; emptyIcon = 'trash'; } if (st.timeFilter) { emptyMsg = st.timeFilter === 'today' ? '今天暂无新增' : '该时间段内无记录'; emptyIcon = 'time'; } if (st.magnetFilter === 'has') { emptyMsg = '没有有磁力的番号'; emptyIcon = 'has'; } else if (st.magnetFilter === 'none') { emptyMsg = '没有无磁力的番号'; emptyIcon = 'none'; } if (q) { emptyMsg = `未找到匹配 "${st.searchQuery}" 的番号`; emptyIcon = 'search'; } useEffect(() => { if (!headRef.current) return; const total = items.length; const selCount = st.selectedItems.length; headRef.current.checked = total > 0 && selCount === total; headRef.current.indeterminate = selCount > 0 && selCount < total; }, [items, st.selectedItems]); const isTrash = st.currentFilter === 'trash'; const rowView = st.currentFilter === 'favorite' ? 'favorite' : st.currentFilter === 'watched' ? 'watched' : st.currentFilter === 'trash' ? 'trash' : 'unmarked'; const tabDefs = [ { f: 'all', label: '全部', n: all.length }, { f: 'favorite', label: '关注', n: favList.length }, { f: 'watched', label: '已看', n: watchedList.length }, { f: 'trash', label: '回收站', n: trashList.length } ]; const headChange = (e) => { if (isTrash) return; if (e.target.checked) PanelStore.set({ multiSelectMode: true, selectedItems: items.map(i => i.code) }); else PanelStore.set({ multiSelectMode: false, selectedItems: [] }); }; return html` <${Fragment}> ${st.visible ? html` <div class="emh-panel-backdrop" onClick=${actions.hidePanel}></div> <div id="emh-code-manager-panel" class="emh-code-manager-panel visible"> <div ref=${resizeRef} class="emh-panel-resize" title="拖动调整宽度"></div> <div class="emh-panel-header"> <h2><span class="emh-panel-logo"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></span> ${window.__EMH_STANDALONE ? '番号库' : '管理中心'} <span class="emh-header-count">${items.length > 0 ? `(${items.length})` : ''}</span></h2> <div class="emh-panel-controls"> <button class="emh-theme-toggle" title="更多选项" onClick=${actions.toggleMenu}> <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><circle cx="12" cy="5" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="12" cy="19" r="1.6"/></svg> </button> <button class="emh-theme-toggle" title="快捷键帮助 (? )" onClick=${actions.toggleHelp}> <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> </button> <button class="emh-theme-toggle" title="切换主题（当前：${THEME.get() === 'dark' ? '深色' : THEME.get() === 'light' ? '浅色' : '跟随系统'}）" onClick=${actions.toggleTheme}> ${THEME.get() === 'dark' ? html`<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>` : THEME.get() === 'light' ? html`<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>` : html`<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>`} </button> <button class="emh-panel-close" title="关闭 (Esc)" onClick=${actions.hidePanel}>×</button> </div> </div> <div class="emh-panel-tabs"> ${tabDefs.map(t => html` <button data-filter="${t.f}" class="${st.currentFilter === t.f ? 'active' : ''}" onClick=${() => actions.setFilter(t.f)}>${t.label} ${t.n > 0 ? html`<span class="emh-tab-count">${t.n}</span>` : ''}</button> `)} </div> <div class="emh-panel-search"> <div class="emh-search-wrapper"> <input ref=${searchRef} type="text" placeholder="搜索番号或备注…" value=${searchDraft} onInput=${onSearchInput} /> <button class="emh-search-clear ${searchDraft ? 'visible' : ''}" title="清除" onClick=${clearSearch}>×</button> </div> <div class="emh-filter-row"> <span class="emh-filter-tag ${st.timeFilter === '' ? 'active' : ''}" onClick=${() => PanelStore.set({ timeFilter: '' })}>全部</span> <span class="emh-filter-tag ${st.timeFilter === 'today' ? 'active' : ''}" onClick=${() => PanelStore.set({ timeFilter: 'today' })}>今天</span> <span class="emh-filter-tag ${st.timeFilter === '7d' ? 'active' : ''}" onClick=${() => PanelStore.set({ timeFilter: '7d' })}>7天</span> <span class="emh-filter-tag ${st.timeFilter === '30d' ? 'active' : ''}" onClick=${() => PanelStore.set({ timeFilter: '30d' })}>30天</span> <span class="emh-filter-divider"></span> <span class="emh-filter-tag ${st.magnetFilter === '' ? 'active' : ''}" onClick=${() => PanelStore.set({ magnetFilter: '' })}>磁力不限</span> <span class="emh-filter-tag ${st.magnetFilter === 'has' ? 'active' : ''}" onClick=${() => PanelStore.set({ magnetFilter: 'has' })}>有磁力</span> <span class="emh-filter-tag ${st.magnetFilter === 'none' ? 'active' : ''}" onClick=${() => PanelStore.set({ magnetFilter: 'none' })}>无磁力</span> </div> </div> <div class="emh-list-header"> <label class="emh-checkbox-wrap" style=${isTrash ? 'visibility:hidden;' : ''}><input type="checkbox" ref=${headRef} onClick=${e => e.stopPropagation()} onChange=${headChange} /></label> <span class="emh-col-code">番号</span> <span class="emh-col-status">状态</span> <span class="emh-col-actions">操作</span> </div> <div class="emh-panel-content ${st.multiSelectMode ? 'multi-select' : ''}" ref=${contentRef}> ${items.length > 0 ? items.map((item, idx) => html` <${ItemRowMemo} key=${item.code} item=${item} view=${rowView} multi=${st.multiSelectMode} selected=${st.selectedItems.includes(item.code)} kbdSel=${!st.multiSelectMode && st.selectedIndex === idx} onToggle=${stableOnToggle} onOpenDetail=${stableOnOpenDetail} onFav=${stableOnFav} onWatch=${stableOnWatch} onUnfav=${stableOnUnfav} onDelete=${stableOnDelete} onRestore=${stableOnRestore} onPurge=${stableOnPurge} /> `) : html` <div class="emh-empty-state"><div class="emh-empty-state-icon">${EMPTY_ICONS[emptyIcon] || EMPTY_ICONS.library}</div><div>${emptyMsg}</div></div> `} </div> ${st.multiSelectMode ? html` <div class="emh-panel-multi-actions" style="display:flex;"> <span class="emh-selected-count">已选 ${st.selectedItems.length} 项</span> <button class="btn btn-outline emh-expand" aria-label="全选" onClick=${actions.selectAll}>${ICON.checkSquare}<span class="emh-expand-label">全选</span></button> <button class="btn my-btn-primary emh-expand" aria-label="磁力" onClick=${actions.batchFetchMagnets}>${ICON.refresh}<span class="emh-expand-label">磁力</span></button> <button class="btn my-btn-success emh-expand" aria-label="关注" onClick=${() => actions.batchMark('favorite')}>${ICON.heart}<span class="emh-expand-label">关注</span></button> <button class="btn my-btn-success emh-expand" aria-label="已看" onClick=${() => actions.batchMark('watched')}>${ICON.checkCircle}<span class="emh-expand-label">已看</span></button> <button class="btn my-btn-danger emh-expand" aria-label="删除" onClick=${actions.batchDelete}>${ICON.trash}<span class="emh-expand-label">删除</span></button> <button class="btn btn-outline emh-expand" aria-label="取消" onClick=${actions.toggleMulti}>${ICON.x}<span class="emh-expand-label">取消</span></button> </div> ` : html` <div class="emh-panel-actions"> <button class="btn my-btn-primary emh-btn-add emh-expand" aria-label="添加" onClick=${actions.addCode} style=${isTrash ? 'display:none;' : ''}>${ICON.plus}<span class="emh-expand-label">添加</span></button> <button class="btn btn-outline emh-expand" aria-label="批量" onClick=${actions.toggleMulti} style=${isTrash ? 'display:none;' : ''}>${ICON.list}<span class="emh-expand-label">批量</span></button> <button class="btn btn-outline emh-expand" aria-label="导入" onClick=${actions.importData}>${ICON.import}<span class="emh-expand-label">导入</span></button> <button class="btn btn-outline emh-expand" aria-label="导出" onClick=${actions.exportData}>${ICON.export}<span class="emh-expand-label">导出</span></button> <button class="btn my-btn-danger emh-expand" aria-label="清空" onClick=${actions.clearTrash} style=${isTrash && trashList.length > 0 ? '' : 'display:none;'}>${ICON.trash}<span class="emh-expand-label">清空</span></button> </div> `} <${ConfirmModal} confirm=${st.confirm} onConfirm=${actions.doConfirm} onCancel=${actions.cancelConfirm} /> <${PromptModal} promptState=${st.prompt} onSubmit=${actions.doPromptSubmit} onCancel=${actions.cancelPrompt} /> <${MagnetListModal} magnetSearch=${st.magnetSearch} onPick=${actions.fetchMagnetDetail} onClose=${actions.closeMagnetSearch} /> <${BatchProgressModal} progress=${st.batchProgress} /> ${st.helpOpen ? html`<${HelpModal} onClose=${actions.toggleHelp} />` : ''} ${st.menuOpen ? html`<${HeaderMenu} onClose=${actions.toggleMenu} onClear=${actions.clearPreviewCaches} onOpenStandalone=${window.__EMH_STANDALONE ? null : actions.openStandalone} stats=${CODE_LIBRARY.previewCacheStats()} />` : ''} ${st.detail ? (() => { const detailItem = CODE_LIBRARY.getItem(st.detail) || (trashList.find(i => i.code.toUpperCase() === st.detail.toUpperCase())) || null; const detailInTrash = detailItem ? trashList.some(i => i.code.toUpperCase() === detailItem.code.toUpperCase()) : false; return detailItem ? html` <${DetailDrawer} item=${detailItem} inTrash=${detailInTrash} onClose=${actions.closeDetail} onEdit=${actions.editRemark} onEditTags=${actions.editTags} onEditMagnet=${actions.editMagnet} onEditMagnetItem=${actions.editMagnetItem} onRemoveMagnet=${actions.removeMagnet} onCopyMagnetItem=${actions.copyMagnetItem} onCopyMagnet=${actions.copyMagnet} onPreviewMagnet=${actions.previewMagnet} onPreviewMagnetAt=${actions.previewMagnetAt} onPreviewAvwiki=${actions.previewAvwiki} onSearchMagnet=${actions.searchMagnet} onFav=${actions.markFav} onWatch=${actions.markWatched} onUnfav=${actions.unfavorite} onDelete=${actions.deleteToTrash} onRestore=${actions.restoreFromTrash} onPurge=${actions.permanentDelete} /> ` : null; })() : null} </div> ` : null} <${ToastContainer} /> </${Fragment}> `; } const CodeManagerPanel = { get isVisible() { return PanelStore.state.visible; }, get lastSyncTimestamp() { return PanelStore.state.lastSyncTimestamp; }, set lastSyncTimestamp(v) { PanelStore.set({ lastSyncTimestamp: v }); }, initialized: false, mountEl: null, init: function() { if (this.initialized) return; this.initialized = true; // standalone：首帧即展开（render 前设 visible），避免 showPanel 在 // useEffect 订阅注册前丢失更新（preact useEffect 延迟执行） if (window.__EMH_STANDALONE) PanelStore.set({ visible: true }); this.createStyles(); this.createToggleButton(); this.mountEl = document.createElement('div'); this.mountEl.id = 'emh-code-manager-mount'; document.body.appendChild(this.mountEl); render(h(CodeManagerApp), this.mountEl); }, createToggleButton: function() { const existing = document.getElementById('emh-code-manager-toggle'); if (existing) existing.remove(); const btn = document.createElement('button'); btn.id = 'emh-code-manager-toggle'; btn.className = 'emh-code-manager-toggle'; btn.innerHTML = ICONS.grid + '<span>番号库</span>'; btn.title = '管理番号库'; btn.addEventListener('click', () => this.togglePanel()); document.body.appendChild(btn); }, togglePanel: function() { PanelStore.state.visible ? PanelStore.set({ visible: false, multiSelectMode: false, selectedItems: [], helpOpen: false }) : PanelStore.set({ visible: true }); }, showPanel: function() { PanelStore.set({ visible: true }); }, hidePanel: function() { PanelStore.set({ visible: false, multiSelectMode: false, selectedItems: [], helpOpen: false }); }, refreshPanelContent: function() { PanelStore.refresh(); }, createStyles: function() { const styleElement = document.createElement('style'); styleElement.textContent = ` .emh-code-manager-panel { position: fixed; top: 0; right: calc(-1 * (min(var(--emh-panel-w, 520px), calc(100vw - 24px)) + 40px)); width: min(var(--emh-panel-w, 520px), calc(100vw - 24px)); height: 100vh; background: var(--emh-bg); box-shadow: var(--emh-shadow-lg); z-index: 10010; border-left: 1px solid var(--emh-border); transition: right 0.3s cubic-bezier(0.25,0.8,0.25,1); display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 13px; color: var(--emh-text); border-radius: 16px 0 0 16px; overflow: hidden; } .emh-code-manager-panel.visible { right: 0; } .emh-panel-resize { position: absolute; left: 0; top: 0; bottom: 0; width: 12px; cursor: ew-resize; z-index: 5; touch-action: none; } .emh-panel-resize::after { content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 4px; height: 44px; border-radius: 999px; background: var(--emh-border-strong); opacity: 0; transition: opacity 0.15s; } .emh-panel-resize:hover::after, .emh-panel-resize:active::after { opacity: 1; } .emh-panel-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--emh-overlay); z-index: 10009; animation: emh-fade-in 0.2s ease; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } @keyframes emh-fade-in { from { opacity: 0; } to { opacity: 1; } } .emh-panel-header { display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 16px; box-sizing: border-box; background: var(--emh-bg); border-bottom: 1px solid var(--emh-border); position: relative; z-index: 1; flex-shrink: 0; } .emh-panel-header h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--emh-text); letter-spacing: 0.1px; display: flex; align-items: center; gap: 8px; } .emh-panel-logo { font-size: 18px; line-height: 1; color: var(--emh-primary); display: inline-flex; align-items: center; } .emh-panel-close { background: var(--emh-btn-bg); border: none; font-size: 18px; cursor: pointer; color: var(--emh-text-secondary); width: 30px; height: 30px; border-radius: var(--emh-radius-sm); transition: background 0.15s, color 0.15s; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .emh-panel-close:hover { background: var(--emh-danger-soft); color: var(--emh-danger); } .emh-panel-controls { display: inline-flex; align-items: center; gap: 6px; } .emh-theme-toggle { background: var(--emh-btn-bg); border: none; cursor: pointer; color: var(--emh-text-secondary); width: 30px; height: 30px; border-radius: var(--emh-radius-sm); transition: background 0.15s, color 0.15s; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .emh-theme-toggle:hover { background: var(--emh-primary-soft); color: var(--emh-primary); } .emh-theme-toggle:focus-visible { outline: 2px solid var(--emh-primary); outline-offset: 2px; } .emh-header-menu-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10011; background: transparent; } .emh-header-menu { position: absolute; top: 48px; right: 12px; z-index: 10012; min-width: 224px; padding: 8px; border-radius: var(--emh-radius); background: var(--emh-surface-raised); border: 1px solid var(--emh-border); box-shadow: var(--emh-shadow-lg); animation: emh-modal-in 0.16s cubic-bezier(0.16, 1, 0.3, 1); } .emh-header-menu-title { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--emh-text-muted); padding: 4px 8px 6px; } .emh-header-menu-stat { font-size: 12px; color: var(--emh-text-secondary); padding: 2px 8px 8px; line-height: 1.5; } .emh-header-menu-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: none; background: none; cursor: pointer; font-size: 13px; color: var(--emh-text); transition: background 0.15s, color 0.15s; } .emh-header-menu-item:hover { background: var(--emh-danger-soft); color: var(--emh-danger); } .emh-header-menu-item:focus-visible { outline: 2px solid var(--emh-primary); outline-offset: -2px; } .emh-header-menu-item-plain:hover { background: var(--emh-primary-soft); color: var(--emh-primary); } .emh-panel-close:focus-visible, .emh-search-clear:focus-visible, .emh-magnet-op:focus-visible { outline: 2px solid var(--emh-primary); outline-offset: 2px; } .emh-header-count { font-size: 12px; font-weight: 500; color: var(--emh-text-muted); margin-left: 6px; } .emh-tab-count { font-size: 11px; background: var(--emh-btn-bg); color: var(--emh-text-secondary); padding: 1px 7px; border-radius: 999px; margin-left: 5px; font-weight: 600; } .emh-panel-tabs button.active .emh-tab-count { background: var(--emh-primary-soft); color: var(--emh-primary); } .emh-panel-tabs { display: flex; background: var(--emh-surface); border-bottom: 1px solid var(--emh-border); padding: 0 12px; flex-shrink: 0; } .emh-panel-tabs button { background: none; border: none; padding: 11px 14px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--emh-text-secondary); position: relative; transition: color 0.15s, background-color 0.15s; letter-spacing: 0.1px; border-radius: 8px; } .emh-panel-tabs button:hover { color: var(--emh-primary); background: var(--emh-primary-softer); } .emh-panel-tabs button:focus-visible { outline: 2px solid var(--emh-primary); outline-offset: -2px; } .emh-panel-tabs button.active { color: var(--emh-primary); font-weight: 600; background: none; } .emh-panel-tabs button.active::after { content: ''; position: absolute; bottom: 0; left: 12px; right: 12px; height: 2.5px; background: var(--emh-primary); border-radius: 2px; } .emh-panel-search { padding: 14px 20px 12px; background: var(--emh-surface); border-bottom: 1px solid var(--emh-border); flex-shrink: 0; } .emh-search-wrapper { position: relative; display: flex; } .emh-search-wrapper input { flex: 1; width: 100%; box-sizing: border-box; padding: 9px 36px 9px 14px; border: 1px solid var(--emh-border); border-radius: 10px; outline: none; font-size: 13px; letter-spacing: 0.1px; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; background: var(--emh-bg); font-family: inherit; box-shadow: inset 0 1px 2px rgba(0,0,0,0.03); color: var(--emh-text); } .emh-search-wrapper input:hover { border-color: var(--emh-border-strong); } .emh-search-wrapper input:focus { border-color: var(--emh-primary); box-shadow: 0 0 0 3px var(--emh-focus-ring); background: var(--emh-surface); } .emh-search-wrapper input::placeholder { color: var(--emh-text-muted); } .emh-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: var(--emh-btn-bg); border: none; color: var(--emh-text-muted); font-size: 14px; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; line-height: 1; display: none; transition: background 0.15s, color 0.15s; align-items: center; justify-content: center; } .emh-search-clear:hover { background: var(--emh-btn-hover); color: var(--emh-text); } .emh-search-clear.visible { display: inline-flex; } .emh-filter-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; } .emh-filter-divider { width: 1px; height: 16px; background: var(--emh-border-strong); margin: 0 2px; flex-shrink: 0; } .emh-filter-tag { display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--emh-text-secondary); background: var(--emh-surface); border: 1px solid var(--emh-border); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; user-select: none; } .emh-filter-tag:hover { border-color: var(--emh-primary); color: var(--emh-primary); background: var(--emh-primary-softer); } .emh-filter-tag.active { background: var(--emh-primary); color: var(--emh-on-primary); border-color: var(--emh-primary); box-shadow: 0 2px 8px var(--emh-primary-soft); } .emh-list-header { display: flex; align-items: center; padding: 8px 20px; background: var(--emh-bg); border-bottom: 1px solid var(--emh-border); font-size: 11px; font-weight: 600; color: var(--emh-text-muted); text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; } .emh-col-code { flex: 1; padding-left: 8px; } .emh-col-status { width: 64px; text-align: center; } .emh-col-actions { width: 80px; text-align: right; } .emh-checkbox-wrap { display: inline-flex; align-items: center; } .emh-checkbox-wrap input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--emh-primary); } .emh-panel-content { flex: 1; overflow-y: auto; padding: 10px 14px; background: var(--emh-bg); scrollbar-width: thin; scrollbar-color: var(--emh-border-strong) transparent; position: relative; } .emh-panel-content::-webkit-scrollbar { width: 6px; } .emh-panel-content::-webkit-scrollbar-thumb { background: var(--emh-border-strong); border-radius: 3px; } .emh-panel-content::-webkit-scrollbar-track { background: transparent; } .emh-panel-actions, .emh-panel-multi-actions { padding: 12px 20px; display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; border-top: 1px solid var(--emh-border); flex-shrink: 0; background: var(--emh-bg); } .emh-panel-actions .btn, .emh-panel-multi-actions .btn { flex: 0 0 auto; margin-left: 0; justify-content: center; padding: 9px 12px; min-height: 36px; } .emh-panel-actions .emh-btn-add { font-size: 13px; box-shadow: 0 2px 8px var(--emh-primary-soft); } .emh-panel-multi-actions { align-items: center; flex-wrap: wrap; gap: 8px; } .emh-panel-multi-actions .btn { flex: 0 0 auto; padding: 8px 10px; min-height: 34px; } .emh-panel-multi-actions .emh-selected-count { flex: 1 1 100%; text-align: center; margin-bottom: 2px; } .emh-item { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid var(--emh-border); border-radius: 10px; margin-bottom: 6px; background: var(--emh-surface); box-shadow: var(--emh-shadow-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease; } .emh-item:hover { border-color: var(--emh-border-strong); box-shadow: var(--emh-shadow-md); transform: translateY(-1px); } .emh-item.favorite { border-left: 3px solid var(--emh-danger); } .emh-item.watched { border-left: 3px solid var(--emh-success); } .emh-item.selected { background: var(--emh-primary-soft); border-color: var(--emh-primary); box-shadow: 0 0 0 1px var(--emh-focus-ring); } .emh-item.kbd-sel { border-color: var(--emh-primary); box-shadow: 0 0 0 2px var(--emh-focus-ring); } .emh-item-code { font-weight: 600; color: var(--emh-text); font-size: 13px; font-family: var(--emh-font-mono); letter-spacing: 0.1px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .emh-item-remarks { font-size: 12px; color: var(--emh-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; letter-spacing: 0.1px; max-width: 100%; } .emh-item-actions { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--emh-radius-sm); background: var(--emh-surface-raised); border: 1px solid var(--emh-border); opacity: 0; transform: translateX(6px); transition: opacity 0.18s ease, transform 0.18s ease; box-shadow: var(--emh-shadow-sm); } .emh-item:hover .emh-item-actions { opacity: 1; transform: translateX(0); } .emh-item-actions button { background: none; border: none; cursor: pointer; padding: 0; width: 28px; height: 28px; min-width: 28px; min-height: 28px; border-radius: 6px; font-size: 13px; opacity: 0.75; transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: var(--emh-text-secondary); } .emh-item-actions button:hover { opacity: 1; background: var(--emh-btn-hover); transform: scale(1.06); box-shadow: var(--emh-shadow-sm); } .emh-item-actions button.emh-act-favorite:hover { background: var(--emh-danger-soft); color: var(--emh-danger); } .emh-item-actions button.emh-act-watched:hover { background: var(--emh-success-soft); color: var(--emh-success); } .emh-item-actions button.emh-act-delete:hover { background: var(--emh-danger-soft); color: var(--emh-danger); } .emh-item-actions button.emh-act-unfav:hover { background: var(--emh-warning-soft); color: var(--emh-warning); } .emh-item-actions button.emh-act-restore:hover { background: var(--emh-primary-soft); color: var(--emh-primary); } .emh-item-actions button.emh-act-purge:hover { background: var(--emh-danger-soft); color: var(--emh-danger); } .emh-item > .emh-checkbox-wrap { width: 22px; flex-shrink: 0; } .emh-item > .emh-col-code { flex: 1; min-width: 0; padding-left: 2px; overflow: hidden; } .emh-item > .emh-col-status { width: 64px; text-align: center; flex-shrink: 0; } .emh-item > .emh-col-actions { width: 80px; text-align: right; flex-shrink: 0; display: flex; justify-content: flex-end; } .emh-panel-content.multi-select .emh-item > .emh-col-actions { width: 0; overflow: hidden; } .emh-panel-content.multi-select .emh-list-header .emh-col-actions { display: none; } .emh-status-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 9px; border-radius: 999px; line-height: 1.7; white-space: nowrap; letter-spacing: 0.1px; border: 1px solid transparent; } .emh-status-tag.unmarked { background: var(--emh-btn-bg); color: var(--emh-text-secondary); border-color: var(--emh-border); } .emh-status-tag.favorite { background: var(--emh-danger-soft); color: var(--emh-danger); border-color: var(--emh-danger-soft); } .emh-status-tag.watched { background: var(--emh-success-soft); color: var(--emh-success); border-color: var(--emh-success-soft); } .emh-empty-state { text-align: center; color: var(--emh-text-muted); padding: 48px 0; font-size: 13px; letter-spacing: 0.2px; } .emh-empty-state-icon { font-size: 36px; margin-bottom: 10px; opacity: 0.45; } .emh-panel-content .emh-item { animation: emh-item-in 0.18s ease both; } .emh-panel-content .emh-item:nth-child(1) { animation-delay: 0s; } .emh-panel-content .emh-item:nth-child(2) { animation-delay: 0.02s; } .emh-panel-content .emh-item:nth-child(3) { animation-delay: 0.04s; } .emh-panel-content .emh-item:nth-child(4) { animation-delay: 0.06s; } .emh-panel-content .emh-item:nth-child(5) { animation-delay: 0.08s; } @keyframes emh-item-in { from { opacity: 0; } to { opacity: 1; } } .emh-panel-modal { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--emh-overlay); display: none; justify-content: center; align-items: center; z-index: 10014; backdrop-filter: blur(2px); } .emh-panel-modal-content { background: var(--emh-surface-raised); padding: 24px; border-radius: var(--emh-radius); width: 80%; max-width: 320px; text-align: center; box-shadow: var(--emh-shadow-lg); border: 1px solid var(--emh-border); animation: emh-modal-in 0.18s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes emh-modal-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .emh-panel-modal-content h3 { margin: 0 0 18px 0; color: var(--emh-text); font-size: 15px; font-weight: 600; line-height: 1.5; } .emh-prompt-input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--emh-border); border-radius: var(--emh-radius-sm); font-size: 13px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit; color: var(--emh-text); background: var(--emh-bg); } .emh-prompt-input:focus { border-color: var(--emh-primary); box-shadow: 0 0 0 3px var(--emh-focus-ring); background: var(--emh-surface); } .emh-panel-modal-buttons { display: flex; justify-content: center; gap: 12px; margin-top: 18px; } .emh-panel-modal-buttons .btn { margin-left: 0; min-height: 36px; } .emh-help-modal-content { max-width: 360px; text-align: left; } .emh-help-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .emh-help-list li { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--emh-text); } .emh-kbd-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 2px 8px; border-radius: 6px; font-family: var(--emh-font-mono); font-size: 11px; font-weight: 600; color: var(--emh-primary); background: var(--emh-btn-bg); border: 1px solid var(--emh-border); white-space: nowrap; flex-shrink: 0; } .emh-help-desc { color: var(--emh-text-secondary); } .emh-selected-count { align-self: center; font-size: 12px; font-weight: 600; color: var(--emh-primary); letter-spacing: 0.2px; white-space: nowrap; } .emh-detail-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--emh-overlay); z-index: 10012; animation: emh-fade-in 0.2s ease; backdrop-filter: blur(2px); } .emh-detail-drawer { position: absolute; top: 0; right: 0; width: clamp(320px, 42%, 460px); height: 100%; background: var(--emh-bg); z-index: 10013; box-shadow: var(--emh-shadow-lg); animation: emh-detail-in 0.3s cubic-bezier(0.25,0.8,0.25,1); display: flex; flex-direction: column; border-radius: 16px 0 0 16px; border-left: 1px solid var(--emh-border); overflow: hidden; font-family: inherit; } @keyframes emh-detail-in { from { transform: translateX(100%); } to { transform: translateX(0); } } .emh-detail-header { display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 16px; box-sizing: border-box; border-bottom: 1px solid var(--emh-border); background: var(--emh-bg); flex-shrink: 0; } .emh-detail-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .emh-detail-code { font-weight: 700; color: var(--emh-text); font-size: 15px; font-family: var(--emh-font-mono); letter-spacing: 0.1px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emh-detail-body { flex: 1; overflow-y: auto; padding: 16px 20px; background: var(--emh-bg); scrollbar-width: thin; scrollbar-color: var(--emh-border-strong) transparent; } .emh-detail-body::-webkit-scrollbar { width: 6px; } .emh-detail-body::-webkit-scrollbar-thumb { background: var(--emh-border-strong); border-radius: 3px; } .emh-detail-body::-webkit-scrollbar-track { background: transparent; } /* 详情层次（侧栏/新页签统一）：Hero 标题 → meta 行 → 信息/磁力卡片 */ .emh-detail-body.unified { padding: 14px 16px 20px; } .emh-detail-body.unified .emh-detail-hero { padding: 0 0 12px; margin: 2px 0 10px; border-bottom: 1px solid var(--emh-border); } .emh-detail-body.unified .emh-detail-hero .emh-detail-label { display: none; } .emh-detail-body.unified .emh-detail-hero .emh-detail-value { font-size: 18px; font-weight: 700; color: var(--emh-text); line-height: 1.35; } .emh-detail-body.unified .emh-detail-section { background: var(--emh-surface); border: 1px solid var(--emh-border); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; } .emh-detail-body.unified .emh-detail-section .emh-detail-field { padding: 9px 0; border-bottom: 1px solid var(--emh-border); } .emh-detail-body.unified .emh-detail-section .emh-detail-field:last-child { border-bottom: none; } .emh-detail-body.unified .emh-detail-meta-line { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--emh-text-muted); padding: 0 2px 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--emh-border); } .emh-detail-field { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--emh-border); } .emh-detail-field:last-child { border-bottom: none; } .emh-detail-label { font-size: 11px; font-weight: 600; color: var(--emh-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .emh-detail-value { font-size: 13px; color: var(--emh-text); line-height: 1.5; word-break: break-all; } .emh-detail-empty { color: var(--emh-text-muted); } .emh-magnet-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .emh-magnet-btn { padding: 4px 10px; font-size: 12px; margin-left: 0; } .emh-magnet-btn.emh-expand { padding: 4px 10px; } .emh-magnet-modal-content { max-width: 420px; max-height: 70vh; display: flex; flex-direction: column; text-align: left; } .emh-batch-modal-content { max-width: 380px; } .emh-batch-progress { margin: 4px 0 14px; } .emh-batch-progress-track { height: 8px; border-radius: 4px; background: var(--emh-btn-bg); overflow: hidden; } .emh-batch-progress-bar { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--emh-primary), var(--emh-primary-hover)); transition: width 0.3s ease; } .emh-batch-progress-info { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--emh-text-muted); } .emh-batch-progress-pct { font-weight: 700; color: var(--emh-primary); } .emh-batch-current { margin: 8px 0; padding: 8px 10px; border-radius: var(--emh-radius-sm); background: var(--emh-bg); border: 1px solid var(--emh-border); font-size: 13px; color: var(--emh-text); word-break: break-all; } .emh-batch-stats { display: flex; gap: 12px; justify-content: center; margin-top: 4px; font-size: 12px; color: var(--emh-text-muted); } .emh-batch-stat-fail { color: var(--emh-danger); } .emh-magnet-loading { padding: 24px 0; text-align: center; color: var(--emh-text-muted); font-size: 13px; } .emh-magnet-error { padding: 24px 0; text-align: center; color: var(--emh-danger); font-size: 13px; } .emh-magnet-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 45vh; scrollbar-width: thin; scrollbar-color: var(--emh-border-strong) transparent; } .emh-magnet-list::-webkit-scrollbar { width: 6px; } .emh-magnet-list::-webkit-scrollbar-thumb { background: var(--emh-border-strong); border-radius: 3px; } .emh-magnet-list::-webkit-scrollbar-track { background: transparent; } .emh-magnet-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; margin-bottom: 4px; border-radius: var(--emh-radius-sm); background: var(--emh-bg); border: 1px solid var(--emh-border); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .emh-magnet-item:hover { border-color: var(--emh-primary); background: var(--emh-primary-soft); } .emh-magnet-item-title { flex: 1; font-size: 13px; color: var(--emh-text); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emh-magnet-item-size { font-size: 12px; color: var(--emh-text-muted); white-space: nowrap; } .emh-magnet-hint { margin-top: 10px; text-align: center; font-size: 12px; color: var(--emh-text-muted); } .emh-magnet-item-static { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; padding: 6px 8px; margin-bottom: 3px; border-radius: 6px; background: var(--emh-bg); border: 1px solid var(--emh-border); } .emh-magnet-item-idx { flex-shrink: 0; font-size: 11px; color: var(--emh-text-muted); background: var(--emh-btn-bg); border-radius: 4px; padding: 1px 5px; margin-top: 1px; } .emh-magnet-item-text { flex: 1; min-width: 0; font-size: 11px; color: var(--emh-text); word-break: break-all; line-height: 1.5; font-family: var(--emh-font-mono); } .emh-magnet-item-ops { flex-shrink: 0; display: inline-flex; gap: 2px; align-items: center; } .emh-magnet-op { background: none; border: none; cursor: pointer; padding: 0; width: 24px; height: 24px; min-width: 24px; min-height: 24px; border-radius: 6px; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: var(--emh-text-muted); transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease; opacity: 0.7; } .emh-magnet-op:hover { opacity: 1; background: var(--emh-btn-hover); color: var(--emh-primary); } .emh-magnet-op-del:hover { background: var(--emh-danger-soft); color: var(--emh-danger); } .emh-magnet-op-preview { position: relative; } .emh-magnet-op-preview.has-cache { color: var(--emh-primary); opacity: 0.95; } .emh-magnet-op-preview:hover { color: var(--emh-primary); } .emh-magnet-preview-badge { position: absolute; top: -4px; right: -5px; min-width: 12px; height: 12px; padding: 0 3px; border-radius: 999px; font-size: 9px; font-weight: 700; line-height: 12px; background: var(--emh-primary); color: var(--emh-on-primary); text-align: center; pointer-events: none; } .emh-preview-grid { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--emh-border); } .emh-preview-cell { position: relative; padding: 0; border: none; cursor: pointer; border-radius: 6px; overflow: hidden; background: var(--emh-surface-raised); aspect-ratio: 16 / 9; display: block; width: 100%; transition: opacity 0.15s ease, transform 0.15s ease; } .emh-preview-cell:hover { transform: translateY(-1px); } .emh-preview-cell:focus-visible { outline: 2px solid var(--emh-primary); outline-offset: 2px; } .emh-preview-thumb { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; background-color: var(--emh-surface-raised); } .emh-preview-time { position: absolute; right: 3px; top: 3px; font-family: var(--emh-font-mono); font-size: 9px; font-weight: 600; line-height: 1; padding: 2px 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); color: #fff; pointer-events: none; } .emh-detail-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .emh-tag-edit { opacity: 0.7; } .emh-detail-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--emh-btn-bg); color: var(--emh-text-secondary); } .emh-detail-actions { padding: 12px 16px; border-top: 1px solid var(--emh-border); display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; background: var(--emh-bg); } .emh-detail-actions .btn { margin-left: 0; justify-content: center; min-height: 34px; } .emh-detail-danger { padding: 12px 20px 16px; border-top: 1px solid var(--emh-danger-soft); display: flex; gap: 8px; background: var(--emh-danger-soft); flex-shrink: 0; } .emh-detail-danger .btn { margin-left: 0; justify-content: center; width: 100%; color: var(--emh-danger); min-height: 36px; } @media (max-width: 576px) { .emh-code-manager-panel { width: 100%; right: -100%; border-radius: 0; } .emh-panel-resize { display: none; } } @media (prefers-reduced-motion: reduce) { .emh-code-manager-panel, .emh-panel-backdrop, .emh-item, .emh-item:hover, .emh-item-actions, .emh-item:hover .emh-item-actions, .emh-item-actions button, .emh-item-actions button:hover, .emh-filter-tag, .emh-panel-tabs button, .emh-search-wrapper input, .emh-detail-drawer, .emh-detail-backdrop, .emh-magnet-item, .emh-batch-progress-bar, .emh-panel-modal-content, .emh-header-menu { transition: none !important; animation: none !important; } .emh-item:hover { transform: none; } .emh-item-actions { opacity: 1; transform: none; } .emh-item-actions button:hover { transform: none; } .emh-panel-content .emh-item { animation: none; } } `; document.head.appendChild(styleElement); } }; return CodeManagerPanel; } function main() { for (const [name, handler] of Object.entries(SITE_HANDLERS)) { if (handler.isMatch()) { if (handler.targetSelector) { waitForElement(handler.targetSelector, (targetElement) => { if (targetElement || name === 'javgg') { try { setTimeout(() => handler.process(targetElement), 50); } catch (e) { console.error(`EMH: Error processing handler ${name}:`, e); } } }); } else { try { setTimeout(() => handler.process(null), 150); } catch (e) { console.error(`EMH: Error processing handler ${name}:`, e); } } break; } } } function setupSyncListeners() { window.addEventListener('emh_library_updated', function(e) { if (e.detail.type === 'library_update') { updateCodeStatusIndicators(); if (window.CodeManagerPanel && window.CodeManagerPanel.isVisible) window.CodeManagerPanel.refreshPanelContent(); } }); if (typeof GM_addValueChangeListener !== 'undefined') { GM_addValueChangeListener('emh_sync_timestamp', function(name, old_value, new_value, remote) { if (remote) { CODE_LIBRARY.init(true); updateCodeStatusIndicators(); if (window.CodeManagerPanel && window.CodeManagerPanel.isVisible) window.CodeManagerPanel.refreshPanelContent(); } }); } setInterval(function() { if (typeof GM_getValue !== 'undefined' && window.CodeManagerPanel) { const lastUpdate = GM_getValue('emh_sync_timestamp'); if (lastUpdate && lastUpdate !== window.CodeManagerPanel.lastSyncTimestamp) { window.CodeManagerPanel.lastSyncTimestamp = lastUpdate; CODE_LIBRARY.init(true); updateCodeStatusIndicators(); if (window.CodeManagerPanel.isVisible) window.CodeManagerPanel.refreshPanelContent(); } } }, 2000); } async function bootPanel() { injectCoreStyles(); if (window.__EMH_STANDALONE) injectStandaloneStyles(); // @run-at document-start：body 可能尚未解析，等待其出现再挂载面板 if (!document.body) { await new Promise((resolve) => { const iv = setInterval(() => { if (document.body) { clearInterval(iv); resolve(); } }, 15); }); } try { if (await ensurePreact()) { window.CodeManagerPanel = buildPanel(); window.CodeManagerPanel.init(); // init 内部 createToggleButton 创建按钮 if (window.__EMH_STANDALONE) { window.CodeManagerPanel.showPanel(); removeStandaloneCover(); } } else { console.error('EMH: Preact 依赖加载失败，使用降级按钮'); if (window.__EMH_STANDALONE) removeStandaloneCover(); createFallbackToggle(() => UTILS.showToast('面板组件依赖加载失败，请检查网络后刷新页面', 'error')); } } catch (e) { console.error('EMH: 面板初始化失败', e); // 初始化异常时也保证按钮可见 if (window.__EMH_STANDALONE) removeStandaloneCover(); createFallbackToggle(() => UTILS.showToast('面板初始化失败，请刷新页面重试', 'error')); } } function initialize() { // standalone 独立页：同源真实网址 + #emh-standalone 标记 → 原生 GM 能力，无需父页桥 if (location.hash.indexOf('emh-standalone') >= 0 || location.search.indexOf('emh-standalone') >= 0) { window.__EMH_STANDALONE = true; try { document.title = '番号库 · 独立页'; } catch (e) {} // document-start 起隐藏站点、显示加载中 injectStandaloneCover(); } THEME.apply(THEME.get()); CODE_LIBRARY.init(); if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => main()); } else { main(); } setupSyncListeners(); bootPanel(); } initialize(); })();
