feat(ui): 全面重设计 - 暗色科技风UI
## 设计变更 - 全新暗色主题配色（深灰蓝 + 霓虹青强调色） - 引入 Rajdhani + Noto Sans SC 字体组合 - 悬浮球添加脉冲呼吸动画和发光效果 - 面板添加入场动画和玻璃拟态效果 - 列表项添加交错入场动画 - 按钮添加发光 hover 和按下反馈 - 自定义滚动条样式 - 优化状态栏颜色区分（加载/成功/错误） ## 文件变更 - content.js: 完全重写 CSS 样式系统 - popup.html: 重新设计弹窗界面 - manifest.json: 版本升级到 1.3 ## 版本管理 - master 分支保留原始版本 - ui-redesign 分支为当前工作版本 - 可通过 `git checkout master` 随时回滚
This commit is contained in:
Developer
498
content.js
498
content.js
@@ -22,49 +22,457 @@
|
||||
var style = document.createElement('style');
|
||||
style.id = 'magnet-panel-style';
|
||||
style.textContent = [
|
||||
'#magnet-float-ball{position:fixed;bottom:18px;right:18px;width:56px;height:56px;background:linear-gradient(135deg,#2e7d32,#43a047);border-radius:18px;box-shadow:0 16px 30px rgba(46,125,50,.35);z-index:2147483647;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-family:"Trebuchet MS","Segoe UI","Microsoft YaHei",sans-serif !important;transition:transform .18s ease,box-shadow .18s ease;}',
|
||||
'#magnet-float-ball:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(46,125,50,.42);}',
|
||||
'#magnet-floating-panel{position:fixed;right:16px;bottom:16px;width:min(760px,calc(100vw - 20px));height:min(82vh,820px);background:linear-gradient(180deg,#f9fbff 0%,#f3f6fb 100%);border:1px solid rgba(133,151,178,.25);border-radius:18px;box-shadow:0 24px 54px rgba(15,23,42,.24);z-index:2147483647;font-family:"Trebuchet MS","Segoe UI","Microsoft YaHei",sans-serif;font-size:13px;color:#122033;display:none;flex-direction:column;overflow:hidden;backdrop-filter:blur(10px);}',
|
||||
'#magnet-floating-panel .magnet-panel-header{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px 14px;background:linear-gradient(135deg,#1f5f3e 0%,#2f7c52 58%,#4caf50 100%);color:#fff;gap:14px;}',
|
||||
'#magnet-floating-panel .magnet-panel-brand{display:flex;flex-direction:column;gap:4px;min-width:0;}',
|
||||
'#magnet-floating-panel .magnet-panel-title{font-size:20px;font-weight:700;letter-spacing:.3px;}',
|
||||
'#magnet-floating-panel .magnet-panel-subtitle{font-size:12px;opacity:.88;line-height:1.45;}',
|
||||
'#magnet-floating-panel .magnet-panel-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}',
|
||||
'#magnet-floating-panel .magnet-panel-switch{padding:8px 14px;border:none;border-radius:999px;background:rgba(255,255,255,.16);color:#eff8f0;cursor:pointer;font-size:12px;font-weight:700;transition:background .18s ease,transform .18s ease;}',
|
||||
'#magnet-floating-panel .magnet-panel-switch:hover{background:rgba(255,255,255,.24);transform:translateY(-1px);}',
|
||||
'#magnet-floating-panel .magnet-panel-switch.is-active{background:#fff;color:#1f5f3e;box-shadow:0 10px 20px rgba(14,30,37,.18);}',
|
||||
'#magnet-floating-panel .magnet-panel-close{width:34px;height:34px;border:none;border-radius:12px;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;font-size:18px;line-height:1;}',
|
||||
'#magnet-floating-panel .magnet-panel-close:hover{background:rgba(255,255,255,.24);}',
|
||||
'#magnet-settings{padding:16px 18px;background:rgba(255,255,255,.88);border-bottom:1px solid rgba(214,223,235,.95);display:flex;flex-direction:column;gap:10px;}',
|
||||
'#magnet-floating-panel .magnet-control-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}',
|
||||
/* === 字体引入 === */
|
||||
'@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap");',
|
||||
|
||||
/* === CSS 变量 === */
|
||||
':root {',
|
||||
' --m-bg-deep: #0a0e14;',
|
||||
' --m-bg-primary: #0f1419;',
|
||||
' --m-bg-secondary: #1a1f2e;',
|
||||
' --m-bg-card: rgba(26, 31, 46, 0.92);',
|
||||
' --m-bg-card-hover: rgba(35, 41, 58, 0.95);',
|
||||
' --m-accent: #00d4aa;',
|
||||
' --m-accent-glow: rgba(0, 212, 170, 0.4);',
|
||||
' --m-accent-secondary: #a78bfa;',
|
||||
' --m-text-primary: #f0f4f8;',
|
||||
' --m-text-secondary: #8892a4;',
|
||||
' --m-text-muted: #5c6578;',
|
||||
' --m-border: rgba(255, 255, 255, 0.06);',
|
||||
' --m-border-accent: rgba(0, 212, 170, 0.3);',
|
||||
' --m-success: #10b981;',
|
||||
' --m-error: #ef4444;',
|
||||
' --m-warning: #f59e0b;',
|
||||
' --m-font-display: "Rajdhani", "Microsoft YaHei", sans-serif;',
|
||||
' --m-font-body: "Noto Sans SC", "Microsoft YaHei", sans-serif;',
|
||||
' --m-radius-sm: 8px;',
|
||||
' --m-radius-md: 12px;',
|
||||
' --m-radius-lg: 16px;',
|
||||
' --m-radius-xl: 20px;',
|
||||
' --m-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);',
|
||||
' --m-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);',
|
||||
' --m-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);',
|
||||
' --m-shadow-glow: 0 0 20px var(--m-accent-glow), 0 0 40px rgba(0, 212, 170, 0.15);',
|
||||
'}',
|
||||
|
||||
/* === 悬浮球 === */
|
||||
'#magnet-float-ball{',
|
||||
' position:fixed;bottom:24px;right:24px;',
|
||||
' width:60px;height:60px;',
|
||||
' background:linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);',
|
||||
' border:2px solid var(--m-accent);',
|
||||
' border-radius:50%;',
|
||||
' box-shadow:var(--m-shadow-glow), inset 0 0 20px rgba(0, 212, 170, 0.1);',
|
||||
' z-index:2147483647;',
|
||||
' cursor:pointer;',
|
||||
' display:flex;align-items:center;justify-content:center;',
|
||||
' color:var(--m-accent);',
|
||||
' font-size:24px;',
|
||||
' font-family:var(--m-font-display);',
|
||||
' font-weight:700;',
|
||||
' transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);',
|
||||
' animation:magnet-pulse 2.5s ease-in-out infinite;',
|
||||
'}',
|
||||
'#magnet-float-ball:hover{',
|
||||
' transform:scale(1.08);',
|
||||
' box-shadow:0 0 30px var(--m-accent-glow), 0 0 60px rgba(0, 212, 170, 0.2), inset 0 0 30px rgba(0, 212, 170, 0.15);',
|
||||
'}',
|
||||
'#magnet-float-ball:active{transform:scale(0.95);}',
|
||||
|
||||
/* === 脉冲动画 === */
|
||||
'@keyframes magnet-pulse{',
|
||||
' 0%, 100%{box-shadow:var(--m-shadow-glow), inset 0 0 20px rgba(0, 212, 170, 0.1);}',
|
||||
' 50%{box-shadow:0 0 30px var(--m-accent-glow), 0 0 50px rgba(0, 212, 170, 0.2), inset 0 0 25px rgba(0, 212, 170, 0.15);}',
|
||||
'}',
|
||||
|
||||
/* === 主面板 === */
|
||||
'#magnet-floating-panel{',
|
||||
' position:fixed;right:20px;bottom:20px;',
|
||||
' width:min(800px, calc(100vw - 40px));',
|
||||
' height:min(85vh, 860px);',
|
||||
' background:var(--m-bg-primary);',
|
||||
' border:1px solid var(--m-border-accent);',
|
||||
' border-radius:var(--m-radius-xl);',
|
||||
' box-shadow:var(--m-shadow-lg), 0 0 80px rgba(0, 212, 170, 0.08);',
|
||||
' z-index:2147483647;',
|
||||
' font-family:var(--m-font-body);',
|
||||
' font-size:13px;',
|
||||
' color:var(--m-text-primary);',
|
||||
' display:none;flex-direction:column;',
|
||||
' overflow:hidden;',
|
||||
' backdrop-filter:blur(20px);',
|
||||
' animation:magnet-panel-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);',
|
||||
'}',
|
||||
'@keyframes magnet-panel-in{',
|
||||
' from{opacity:0;transform:translateY(20px) scale(0.98);}',
|
||||
' to{opacity:1;transform:translateY(0) scale(1);}',
|
||||
'}',
|
||||
|
||||
/* === 面板头部 === */
|
||||
'#magnet-floating-panel .magnet-panel-header{',
|
||||
' display:flex;justify-content:space-between;align-items:flex-start;',
|
||||
' padding:20px 24px 16px;',
|
||||
' background:linear-gradient(180deg, rgba(0, 212, 170, 0.08) 0%, transparent 100%);',
|
||||
' border-bottom:1px solid var(--m-border);',
|
||||
' gap:16px;',
|
||||
'}',
|
||||
'#magnet-floating-panel .magnet-panel-brand{',
|
||||
' display:flex;flex-direction:column;gap:6px;min-width:0;',
|
||||
'}',
|
||||
'#magnet-floating-panel .magnet-panel-title{',
|
||||
' font-family:var(--m-font-display);',
|
||||
' font-size:24px;font-weight:700;',
|
||||
' letter-spacing:1px;',
|
||||
' background:linear-gradient(135deg, var(--m-accent) 0%, #00f5c4 50%, var(--m-accent-secondary) 100%);',
|
||||
' -webkit-background-clip:text;',
|
||||
' -webkit-text-fill-color:transparent;',
|
||||
' background-clip:text;',
|
||||
'}',
|
||||
'#magnet-floating-panel .magnet-panel-subtitle{',
|
||||
' font-size:12px;color:var(--m-text-secondary);line-height:1.5;',
|
||||
'}',
|
||||
'#magnet-floating-panel .magnet-panel-head-actions{',
|
||||
' display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;',
|
||||
'}',
|
||||
|
||||
/* === 切换按钮 === */
|
||||
'#magnet-floating-panel .magnet-panel-switch{',
|
||||
' padding:10px 18px;',
|
||||
' border:1px solid var(--m-border);',
|
||||
' border-radius:var(--m-radius-lg);',
|
||||
' background:var(--m-bg-card);',
|
||||
' color:var(--m-text-secondary);',
|
||||
' cursor:pointer;',
|
||||
' font-family:var(--m-font-display);',
|
||||
' font-size:13px;font-weight:600;',
|
||||
' letter-spacing:0.5px;',
|
||||
' transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);',
|
||||
'}',
|
||||
'#magnet-floating-panel .magnet-panel-switch:hover{',
|
||||
' background:var(--m-bg-card-hover);',
|
||||
' border-color:var(--m-accent);',
|
||||
' color:var(--m-text-primary);',
|
||||
'}',
|
||||
'#magnet-floating-panel .magnet-panel-switch.is-active{',
|
||||
' background:linear-gradient(135deg, rgba(0, 212, 170, 0.2) 0%, rgba(0, 212, 170, 0.1) 100%);',
|
||||
' border-color:var(--m-accent);',
|
||||
' color:var(--m-accent);',
|
||||
' box-shadow:0 0 15px rgba(0, 212, 170, 0.2);',
|
||||
'}',
|
||||
|
||||
/* === 关闭按钮 === */
|
||||
'#magnet-floating-panel .magnet-panel-close{',
|
||||
' width:36px;height:36px;',
|
||||
' border:1px solid var(--m-border);',
|
||||
' border-radius:var(--m-radius-md);',
|
||||
' background:var(--m-bg-card);',
|
||||
' color:var(--m-text-secondary);',
|
||||
' cursor:pointer;',
|
||||
' font-size:20px;line-height:1;',
|
||||
' transition:all 0.2s ease;',
|
||||
'}',
|
||||
'#magnet-floating-panel .magnet-panel-close:hover{',
|
||||
' background:rgba(239, 68, 68, 0.15);',
|
||||
' border-color:var(--m-error);',
|
||||
' color:var(--m-error);',
|
||||
'}',
|
||||
|
||||
/* === 设置区域 === */
|
||||
'#magnet-settings{',
|
||||
' padding:16px 20px;',
|
||||
' background:var(--m-bg-secondary);',
|
||||
' border-bottom:1px solid var(--m-border);',
|
||||
' display:flex;flex-direction:column;gap:12px;',
|
||||
'}',
|
||||
'#magnet-floating-panel .magnet-control-row{',
|
||||
' display:flex;gap:12px;align-items:center;flex-wrap:wrap;',
|
||||
'}',
|
||||
'#magnet-floating-panel .magnet-control-row > *{min-width:0;}',
|
||||
'#magnet-floating-panel .magnet-panel-content{flex:1;min-height:0;padding:16px 18px;background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(247,250,255,.95));}',
|
||||
'#magnet-floating-panel .magnet-view{display:none;height:100%;flex-direction:column;gap:12px;min-height:0;}',
|
||||
|
||||
/* === 输入框样式 === */
|
||||
'#magnet-settings input[type="text"],',
|
||||
'#magnet-settings input[type="number"],',
|
||||
'#magnet-settings select{',
|
||||
' padding:10px 14px;',
|
||||
' background:var(--m-bg-primary);',
|
||||
' border:1px solid var(--m-border);',
|
||||
' border-radius:var(--m-radius-md);',
|
||||
' color:var(--m-text-primary);',
|
||||
' font-family:var(--m-font-body);',
|
||||
' font-size:13px;',
|
||||
' transition:all 0.2s ease;',
|
||||
'}',
|
||||
'#magnet-settings input:focus,',
|
||||
'#magnet-settings select:focus{',
|
||||
' outline:none;',
|
||||
' border-color:var(--m-accent);',
|
||||
' box-shadow:0 0 0 3px rgba(0, 212, 170, 0.15);',
|
||||
'}',
|
||||
'#magnet-settings input::placeholder{color:var(--m-text-muted);}',
|
||||
|
||||
/* === 主按钮 === */
|
||||
'#magnet-settings button:not(.magnet-panel-switch){',
|
||||
' padding:10px 20px;',
|
||||
' background:linear-gradient(135deg, var(--m-accent) 0%, #00f5c4 100%);',
|
||||
' border:none;',
|
||||
' border-radius:var(--m-radius-md);',
|
||||
' color:var(--m-bg-deep);',
|
||||
' font-family:var(--m-font-display);',
|
||||
' font-size:14px;font-weight:700;',
|
||||
' letter-spacing:0.5px;',
|
||||
' cursor:pointer;',
|
||||
' transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);',
|
||||
'}',
|
||||
'#magnet-settings button:not(.magnet-panel-switch):hover{',
|
||||
' transform:translateY(-2px);',
|
||||
' box-shadow:0 8px 25px rgba(0, 212, 170, 0.4);',
|
||||
'}',
|
||||
'#magnet-settings button:not(.magnet-panel-switch):active{',
|
||||
' transform:translateY(0);',
|
||||
'}',
|
||||
|
||||
/* === 内容区域 === */
|
||||
'#magnet-floating-panel .magnet-panel-content{',
|
||||
' flex:1;min-height:0;',
|
||||
' padding:16px 20px;',
|
||||
' background:var(--m-bg-primary);',
|
||||
' overflow:hidden;',
|
||||
'}',
|
||||
'#magnet-floating-panel .magnet-view{',
|
||||
' display:none;height:100%;flex-direction:column;gap:14px;min-height:0;',
|
||||
'}',
|
||||
'#magnet-floating-panel .magnet-view.is-active{display:flex;}',
|
||||
'#magnet-floating-panel .magnet-view-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;background:#fff;border:1px solid #e4ebf5;border-radius:14px;box-shadow:0 10px 20px rgba(31,48,74,.06);}',
|
||||
'#magnet-floating-panel .magnet-view-toolbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}',
|
||||
'#magnet-floating-panel .magnet-view-title{font-size:14px;font-weight:700;color:#19324d;}',
|
||||
'#magnet-floating-panel .magnet-view-meta{font-size:12px;color:#5d6b82;}',
|
||||
'#magnet-list{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;padding-right:4px;}',
|
||||
'#magnet-cache-panel{flex:1;min-height:0;overflow-y:auto;padding-right:4px;}',
|
||||
'#magnet-floating-panel .magnet-panel-footer{padding:14px 18px 18px;background:rgba(255,255,255,.96);border-top:1px solid rgba(214,223,235,.95);display:flex;flex-direction:column;gap:10px;}',
|
||||
'#magnet-status{padding:10px 12px;border-radius:12px;font-size:12px;line-height:1.5;}',
|
||||
'#magnet-copy-all{width:100%;padding:12px 14px;background:linear-gradient(135deg,#1e88e5,#42a5f5);color:#fff;border:none;border-radius:12px;cursor:pointer;font-size:13px;font-weight:700;box-shadow:0 10px 22px rgba(30,136,229,.25);}',
|
||||
'#magnet-copy-all:hover{filter:brightness(1.03);}',
|
||||
'.magnet-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:#fff;border:1px solid #e3eaf2;border-radius:14px;box-shadow:0 10px 18px rgba(31,48,74,.06);}',
|
||||
'.magnet-title{flex:1;cursor:pointer;color:#20324d;min-width:0;font-size:12px;line-height:1.55;word-break:break-all;font-weight:600;}',
|
||||
'.magnet-copy-btn{padding:8px 12px;background:linear-gradient(135deg,#43a047,#66bb6a);color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:11px;font-weight:700;white-space:nowrap;flex-shrink:0;}',
|
||||
'.magnet-copy-btn:hover{filter:brightness(1.03);}',
|
||||
'.magnet-cache-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px;}',
|
||||
'.magnet-cache-card{padding:12px;background:#fff;border:1px solid #e4ebf5;border-radius:14px;box-shadow:0 10px 18px rgba(31,48,74,.05);}',
|
||||
'.magnet-cache-card-label{font-size:11px;color:#6b778c;margin-bottom:6px;}',
|
||||
'.magnet-cache-card-value{font-size:18px;font-weight:700;color:#163049;}',
|
||||
'.magnet-cache-section{margin-top:12px;}',
|
||||
'.magnet-cache-section-title{font-size:12px;font-weight:700;color:#5c6b82;margin-bottom:8px;}',
|
||||
'.magnet-cache-entry{padding:10px 12px;margin-top:8px;background:#fff;border:1px solid #e4ebf5;border-radius:12px;box-shadow:0 8px 14px rgba(31,48,74,.05);}',
|
||||
'.magnet-cache-entry-title{font-size:12px;font-weight:700;color:#1b314b;line-height:1.5;word-break:break-all;}',
|
||||
'.magnet-cache-entry-meta{font-size:11px;color:#6a768d;margin-top:4px;line-height:1.45;}',
|
||||
'@media (max-width: 900px){#magnet-floating-panel{right:10px;bottom:10px;width:calc(100vw - 20px);height:min(84vh,760px);}#magnet-floating-panel .magnet-panel-header{padding:16px 16px 12px;}#magnet-settings,#magnet-floating-panel .magnet-panel-content,#magnet-floating-panel .magnet-panel-footer{padding-left:14px;padding-right:14px;}}'
|
||||
|
||||
/* === 视图工具栏 === */
|
||||
'#magnet-floating-panel .magnet-view-toolbar{',
|
||||
' display:flex;justify-content:space-between;align-items:center;',
|
||||
' gap:12px;padding:14px 18px;',
|
||||
' background:var(--m-bg-card);',
|
||||
' border:1px solid var(--m-border);',
|
||||
' border-radius:var(--m-radius-lg);',
|
||||
'}',
|
||||
'#magnet-floating-panel .magnet-view-toolbar-actions{',
|
||||
' display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;',
|
||||
'}',
|
||||
'#magnet-floating-panel .magnet-view-title{',
|
||||
' font-family:var(--m-font-display);',
|
||||
' font-size:16px;font-weight:700;',
|
||||
' color:var(--m-text-primary);',
|
||||
' letter-spacing:0.5px;',
|
||||
'}',
|
||||
'#magnet-floating-panel .magnet-view-meta{',
|
||||
' font-size:12px;color:var(--m-text-secondary);',
|
||||
'}',
|
||||
|
||||
/* === 磁力列表 === */
|
||||
'#magnet-list{',
|
||||
' display:flex;flex-direction:column;gap:10px;',
|
||||
' min-height:0;overflow-y:auto;padding-right:6px;',
|
||||
' scrollbar-width:thin;scrollbar-color:var(--m-accent) var(--m-bg-secondary);',
|
||||
'}',
|
||||
'#magnet-list::-webkit-scrollbar{width:6px;}',
|
||||
'#magnet-list::-webkit-scrollbar-track{background:var(--m-bg-secondary);border-radius:3px;}',
|
||||
'#magnet-list::-webkit-scrollbar-thumb{background:var(--m-accent);border-radius:3px;}',
|
||||
|
||||
/* === 列表项 === */
|
||||
'.magnet-item{',
|
||||
' display:flex;align-items:flex-start;gap:14px;',
|
||||
' padding:14px 16px;',
|
||||
' background:var(--m-bg-card);',
|
||||
' border:1px solid var(--m-border);',
|
||||
' border-radius:var(--m-radius-lg);',
|
||||
' transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);',
|
||||
' animation:magnet-item-in 0.3s ease forwards;',
|
||||
' opacity:0;',
|
||||
'}',
|
||||
'@keyframes magnet-item-in{',
|
||||
' from{opacity:0;transform:translateX(-10px);}',
|
||||
' to{opacity:1;transform:translateX(0);}',
|
||||
'}',
|
||||
'.magnet-item:hover{',
|
||||
' background:var(--m-bg-card-hover);',
|
||||
' border-color:var(--m-border-accent);',
|
||||
' transform:translateX(4px);',
|
||||
'}',
|
||||
'.magnet-title{',
|
||||
' flex:1;cursor:pointer;',
|
||||
' color:var(--m-text-primary);',
|
||||
' min-width:0;font-size:13px;line-height:1.6;',
|
||||
' word-break:break-all;font-weight:500;',
|
||||
' transition:color 0.2s ease;',
|
||||
'}',
|
||||
'.magnet-title:hover{color:var(--m-accent);}',
|
||||
|
||||
/* === 复制按钮 === */
|
||||
'.magnet-copy-btn{',
|
||||
' padding:8px 16px;',
|
||||
' background:linear-gradient(135deg, var(--m-accent) 0%, #00f5c4 100%);',
|
||||
' color:var(--m-bg-deep);',
|
||||
' border:none;border-radius:var(--m-radius-md);',
|
||||
' cursor:pointer;',
|
||||
' font-family:var(--m-font-display);',
|
||||
' font-size:12px;font-weight:700;',
|
||||
' white-space:nowrap;flex-shrink:0;',
|
||||
' transition:all 0.2s ease;',
|
||||
'}',
|
||||
'.magnet-copy-btn:hover{',
|
||||
' transform:scale(1.05);',
|
||||
' box-shadow:0 4px 15px rgba(0, 212, 170, 0.4);',
|
||||
'}',
|
||||
'.magnet-copy-btn:active{transform:scale(0.98);}',
|
||||
|
||||
/* === 缓存面板 === */
|
||||
'#magnet-cache-panel{',
|
||||
' flex:1;min-height:0;overflow-y:auto;padding-right:6px;',
|
||||
' scrollbar-width:thin;scrollbar-color:var(--m-accent) var(--m-bg-secondary);',
|
||||
'}',
|
||||
'#magnet-cache-panel::-webkit-scrollbar{width:6px;}',
|
||||
'#magnet-cache-panel::-webkit-scrollbar-track{background:var(--m-bg-secondary);border-radius:3px;}',
|
||||
'#magnet-cache-panel::-webkit-scrollbar-thumb{background:var(--m-accent);border-radius:3px;}',
|
||||
|
||||
/* === 缓存网格 === */
|
||||
'.magnet-cache-grid{',
|
||||
' display:grid;',
|
||||
' grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));',
|
||||
' gap:12px;margin-bottom:16px;',
|
||||
'}',
|
||||
'.magnet-cache-card{',
|
||||
' padding:16px;',
|
||||
' background:var(--m-bg-card);',
|
||||
' border:1px solid var(--m-border);',
|
||||
' border-radius:var(--m-radius-lg);',
|
||||
' transition:all 0.2s ease;',
|
||||
'}',
|
||||
'.magnet-cache-card:hover{',
|
||||
' border-color:var(--m-border-accent);',
|
||||
'}',
|
||||
'.magnet-cache-card-label{',
|
||||
' font-size:11px;color:var(--m-text-muted);margin-bottom:8px;',
|
||||
' text-transform:uppercase;letter-spacing:0.5px;',
|
||||
'}',
|
||||
'.magnet-cache-card-value{',
|
||||
' font-family:var(--m-font-display);',
|
||||
' font-size:22px;font-weight:700;',
|
||||
' color:var(--m-accent);',
|
||||
'}',
|
||||
|
||||
/* === 缓存区块 === */
|
||||
'.magnet-cache-section{margin-top:16px;}',
|
||||
'.magnet-cache-section-title{',
|
||||
' font-family:var(--m-font-display);',
|
||||
' font-size:13px;font-weight:700;',
|
||||
' color:var(--m-text-secondary);',
|
||||
' margin-bottom:10px;letter-spacing:0.5px;',
|
||||
'}',
|
||||
'.magnet-cache-entry{',
|
||||
' padding:12px 14px;margin-top:8px;',
|
||||
' background:var(--m-bg-card);',
|
||||
' border:1px solid var(--m-border);',
|
||||
' border-radius:var(--m-radius-md);',
|
||||
' transition:all 0.2s ease;',
|
||||
'}',
|
||||
'.magnet-cache-entry:hover{',
|
||||
' border-color:var(--m-border-accent);',
|
||||
'}',
|
||||
'.magnet-cache-entry-title{',
|
||||
' font-size:13px;font-weight:600;',
|
||||
' color:var(--m-text-primary);',
|
||||
' line-height:1.5;word-break:break-all;',
|
||||
'}',
|
||||
'.magnet-cache-entry-meta{',
|
||||
' font-size:11px;color:var(--m-text-muted);',
|
||||
' margin-top:6px;line-height:1.5;',
|
||||
'}',
|
||||
|
||||
/* === 底部 === */
|
||||
'#magnet-floating-panel .magnet-panel-footer{',
|
||||
' padding:16px 20px 20px;',
|
||||
' background:var(--m-bg-secondary);',
|
||||
' border-top:1px solid var(--m-border);',
|
||||
' display:flex;flex-direction:column;gap:12px;',
|
||||
'}',
|
||||
|
||||
/* === 状态栏 === */
|
||||
'#magnet-status{',
|
||||
' padding:12px 16px;border-radius:var(--m-radius-md);',
|
||||
' font-size:12px;line-height:1.6;',
|
||||
' background:var(--m-bg-card);',
|
||||
' border:1px solid var(--m-border);',
|
||||
' color:var(--m-text-secondary);',
|
||||
'}',
|
||||
'#magnet-status[data-type="loading"]{',
|
||||
' border-color:var(--m-warning);',
|
||||
' color:var(--m-warning);',
|
||||
' background:rgba(245, 158, 11, 0.1);',
|
||||
'}',
|
||||
'#magnet-status[data-type="error"]{',
|
||||
' border-color:var(--m-error);',
|
||||
' color:var(--m-error);',
|
||||
' background:rgba(239, 68, 68, 0.1);',
|
||||
'}',
|
||||
'#magnet-status[data-type="done"]{',
|
||||
' border-color:var(--m-success);',
|
||||
' color:var(--m-success);',
|
||||
' background:rgba(16, 185, 129, 0.1);',
|
||||
'}',
|
||||
|
||||
/* === 一键复制按钮 === */
|
||||
'#magnet-copy-all{',
|
||||
' width:100%;padding:14px 20px;',
|
||||
' background:linear-gradient(135deg, var(--m-accent) 0%, #00f5c4 100%);',
|
||||
' color:var(--m-bg-deep);',
|
||||
' border:none;border-radius:var(--m-radius-lg);',
|
||||
' cursor:pointer;',
|
||||
' font-family:var(--m-font-display);',
|
||||
' font-size:15px;font-weight:700;',
|
||||
' letter-spacing:0.5px;',
|
||||
' transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);',
|
||||
'}',
|
||||
'#magnet-copy-all:hover{',
|
||||
' transform:translateY(-2px);',
|
||||
' box-shadow:0 10px 30px rgba(0, 212, 170, 0.4);',
|
||||
'}',
|
||||
'#magnet-copy-all:active{transform:translateY(0);}',
|
||||
|
||||
/* === 调试菜单 === */
|
||||
'#magnet-debug-menu{',
|
||||
' background:var(--m-bg-card) !important;',
|
||||
' border:1px solid var(--m-border-accent) !important;',
|
||||
' border-radius:var(--m-radius-md) !important;',
|
||||
' box-shadow:var(--m-shadow-lg) !important;',
|
||||
'}',
|
||||
'#magnet-debug-menu label{',
|
||||
' color:var(--m-text-primary) !important;',
|
||||
'}',
|
||||
'#magnet-debug-menu input[type="checkbox"]{',
|
||||
' accent-color:var(--m-accent);',
|
||||
'}',
|
||||
|
||||
/* === 响应式 === */
|
||||
'@media (max-width: 900px){',
|
||||
' #magnet-floating-panel{',
|
||||
' right:10px;bottom:10px;',
|
||||
' width:calc(100vw - 20px);',
|
||||
' height:min(88vh, 800px);',
|
||||
' }',
|
||||
' #magnet-floating-panel .magnet-panel-header{padding:16px 18px 14px;}',
|
||||
' #magnet-settings,',
|
||||
' #magnet-floating-panel .magnet-panel-content,',
|
||||
' #magnet-floating-panel .magnet-panel-footer{padding-left:16px;padding-right:16px;}',
|
||||
'}',
|
||||
|
||||
/* === 空状态 === */
|
||||
'.magnet-empty-state{',
|
||||
' display:flex;flex-direction:column;align-items:center;justify-content:center;',
|
||||
' padding:40px 20px;text-align:center;',
|
||||
' color:var(--m-text-muted);',
|
||||
'}',
|
||||
'.magnet-empty-state-icon{',
|
||||
' font-size:48px;margin-bottom:16px;opacity:0.5;',
|
||||
'}',
|
||||
'.magnet-empty-state-text{',
|
||||
' font-size:14px;line-height:1.6;',
|
||||
'}'
|
||||
].join('');
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
@@ -94,15 +502,15 @@
|
||||
|
||||
var ball = document.createElement('div');
|
||||
ball.id = 'magnet-float-ball';
|
||||
ball.innerHTML = '⚡';
|
||||
ball.innerHTML = '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>';
|
||||
ball.oncontextmenu = function(e) {
|
||||
e.preventDefault();
|
||||
var menu = document.getElementById('magnet-debug-menu');
|
||||
if (menu) menu.remove();
|
||||
menu = document.createElement('div');
|
||||
menu.id = 'magnet-debug-menu';
|
||||
menu.style.cssText = 'position:fixed;bottom:80px;right:20px;background:#fff;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,0.3);z-index:999999;padding:5px 0;font-size:12px';
|
||||
menu.innerHTML = '<label style="display:block;padding:8px 15px;cursor:pointer"><input type="checkbox" id="debug-check"' + (DEBUG_MODE ? ' checked' : '') + '> 调试模式</label>';
|
||||
menu.style.cssText = 'position:fixed;bottom:90px;right:28px;background:var(--m-bg-card);border:1px solid var(--m-border-accent);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,0.5);z-index:999999;padding:8px 0;font-size:12px;font-family:var(--m-font-body);';
|
||||
menu.innerHTML = '<label style="display:block;padding:10px 16px;cursor:pointer;color:var(--m-text-primary)"><input type="checkbox" id="debug-check" style="accent-color:var(--m-accent);margin-right:8px;"' + (DEBUG_MODE ? ' checked' : '') + '> 调试模式</label>';
|
||||
document.body.appendChild(menu);
|
||||
menu.querySelector('input').onchange = function() {
|
||||
DEBUG_MODE = this.checked;
|
||||
@@ -119,7 +527,7 @@
|
||||
|
||||
var panel = document.createElement('div');
|
||||
panel.id = 'magnet-floating-panel';
|
||||
panel.innerHTML = '<div class="magnet-panel-header"><div class="magnet-panel-brand"><div class="magnet-panel-title">磁力链接助手</div><div class="magnet-panel-subtitle">更大的面板、更清晰的缓存视图、智能增量搜索</div></div><div class="magnet-panel-head-actions"><button id="magnet-view-results" class="magnet-panel-switch is-active">结果</button><button id="magnet-view-cache" class="magnet-panel-switch">缓存</button><button class="magnet-panel-close" title="关闭">×</button></div></div><div class="magnet-settings" id="magnet-settings"></div><div class="magnet-panel-content"><div id="magnet-results-view" class="magnet-view is-active"><div class="magnet-view-toolbar"><div><div class="magnet-view-title">搜索结果</div><div class="magnet-view-meta">当前关键词命中的磁链会显示在这里</div></div><div class="magnet-view-meta">共 <span id="magnet-count-num">0</span> 条磁链</div></div><div class="magnet-list" id="magnet-list"></div></div><div id="magnet-cache-view" class="magnet-view"><div class="magnet-view-toolbar"><div><div class="magnet-view-title">缓存总览</div><div class="magnet-view-meta">查看当前板块与全部缓存的占用、快照和最近命中</div></div><div class="magnet-view-toolbar-actions"><button id="magnet-refresh-cache" class="magnet-panel-switch is-active" style="background:#e8f1ff;color:#2456a6">刷新缓存</button><button id="magnet-clear-cache-inline" class="magnet-panel-switch" style="background:#fbe9e7;color:#8d3b2f">清缓存</button></div></div><div id="magnet-cache-panel"></div></div></div><div class="magnet-panel-footer"><div id="magnet-status">输入页码范围获取磁力</div><button id="magnet-copy-all">一键复制全部</button></div>';
|
||||
panel.innerHTML = '<div class="magnet-panel-header"><div class="magnet-panel-brand"><div class="magnet-panel-title">MAGNET LINKS</div><div class="magnet-panel-subtitle">智能抓取 · 缓存加速 · 一键复制</div></div><div class="magnet-panel-head-actions"><button id="magnet-view-results" class="magnet-panel-switch is-active">结果</button><button id="magnet-view-cache" class="magnet-panel-switch">缓存</button><button class="magnet-panel-close" title="关闭">×</button></div></div><div class="magnet-settings" id="magnet-settings"></div><div class="magnet-panel-content"><div id="magnet-results-view" class="magnet-view is-active"><div class="magnet-view-toolbar"><div><div class="magnet-view-title">搜索结果</div><div class="magnet-view-meta">关键词命中的磁力链接</div></div><div class="magnet-view-meta">共 <span id="magnet-count-num">0</span> 条</div></div><div class="magnet-list" id="magnet-list"></div></div><div id="magnet-cache-view" class="magnet-view"><div class="magnet-view-toolbar"><div><div class="magnet-view-title">缓存总览</div><div class="magnet-view-meta">数据统计与快照管理</div></div><div class="magnet-view-toolbar-actions"><button id="magnet-refresh-cache" class="magnet-panel-switch is-active">刷新</button><button id="magnet-clear-cache-inline" class="magnet-panel-switch">清空</button></div></div><div id="magnet-cache-panel"></div></div></div><div class="magnet-panel-footer"><div id="magnet-status">设置参数后开始抓取</div><button id="magnet-copy-all">一键复制全部</button></div>';
|
||||
document.body.appendChild(panel);
|
||||
|
||||
setPanelView('results');
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "涩花塘磁力助手",
|
||||
"version": "1.2",
|
||||
"description": "一键获取当前页所有帖子的磁力链接",
|
||||
"version": "1.3",
|
||||
"description": "一键获取磁力链接 - 暗色科技风UI",
|
||||
"permissions": [
|
||||
"activeTab",
|
||||
"clipboardWrite",
|
||||
|
||||
132
popup.html
132
popup.html
@@ -1,27 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body { width: 200px; padding: 15px; font-family: Arial; }
|
||||
h3 { margin: 0 0 10px; font-size: 14px; }
|
||||
p { font-size: 12px; color: #666; margin: 5px 0; }
|
||||
:root {
|
||||
--m-bg-deep: #0a0e14;
|
||||
--m-bg-primary: #0f1419;
|
||||
--m-bg-secondary: #1a1f2e;
|
||||
--m-bg-card: rgba(26, 31, 46, 0.92);
|
||||
--m-accent: #00d4aa;
|
||||
--m-accent-glow: rgba(0, 212, 170, 0.4);
|
||||
--m-text-primary: #f0f4f8;
|
||||
--m-text-secondary: #8892a4;
|
||||
--m-text-muted: #5c6578;
|
||||
--m-border: rgba(255, 255, 255, 0.06);
|
||||
--m-border-accent: rgba(0, 212, 170, 0.3);
|
||||
--m-font-display: "Rajdhani", "Microsoft YaHei", sans-serif;
|
||||
--m-font-body: "Noto Sans SC", "Microsoft YaHei", sans-serif;
|
||||
--m-radius-md: 12px;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 260px;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
background: var(--m-bg-primary);
|
||||
font-family: var(--m-font-body);
|
||||
color: var(--m-text-primary);
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.popup-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, rgba(0, 212, 170, 0.2) 0%, rgba(0, 212, 170, 0.1) 100%);
|
||||
border: 1px solid var(--m-border-accent);
|
||||
border-radius: 10px;
|
||||
color: var(--m-accent);
|
||||
}
|
||||
|
||||
.popup-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-family: var(--m-font-display);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
background: linear-gradient(135deg, var(--m-accent) 0%, #00f5c4 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.popup-desc {
|
||||
font-size: 12px;
|
||||
color: var(--m-text-secondary);
|
||||
margin: 0 0 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
background: linear-gradient(135deg, var(--m-accent) 0%, #00f5c4 100%);
|
||||
color: var(--m-bg-deep);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--m-radius-md);
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
font-family: var(--m-font-display);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 212, 170, 0.4);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.popup-footer {
|
||||
margin-top: 16px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--m-border);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.popup-footer-text {
|
||||
font-size: 10px;
|
||||
color: var(--m-text-muted);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
button:hover { background: #45a049; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3>磁力链接复制助手</h3>
|
||||
<p>在论坛页面提取当前页磁力链接并复制到剪贴板</p>
|
||||
<button id="copyBtn">手动复制当前页面</button>
|
||||
<div class="popup-header">
|
||||
<div class="popup-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="Magnet">
|
||||
<path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="popup-title">MAGNET</div>
|
||||
</div>
|
||||
|
||||
<p class="popup-desc">提取当前页面的磁力链接并复制到剪贴板</p>
|
||||
|
||||
<button id="copyBtn" type="button">复制当前页磁力链接</button>
|
||||
|
||||
<div class="popup-footer">
|
||||
<span class="popup-footer-text">仅支持涩花塘论坛页面</span>
|
||||
</div>
|
||||
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user