feat(ui): 全面重设计 - 暗色科技风UI

## 设计变更
- 全新暗色主题配色（深灰蓝 + 霓虹青强调色）
- 引入 Rajdhani + Noto Sans SC 字体组合
- 悬浮球添加脉冲呼吸动画和发光效果
- 面板添加入场动画和玻璃拟态效果
- 列表项添加交错入场动画
- 按钮添加发光 hover 和按下反馈
- 自定义滚动条样式
- 优化状态栏颜色区分（加载/成功/错误）

## 文件变更
- content.js: 完全重写 CSS 样式系统
- popup.html: 重新设计弹窗界面
- manifest.json: 版本升级到 1.3

## 版本管理
- master 分支保留原始版本
- ui-redesign 分支为当前工作版本
- 可通过 `git checkout master` 随时回滚

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);}',
+      '@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap");',
-      '#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;}',
+      /* === CSS 变量 === */
-      '#magnet-floating-panel .magnet-panel-brand{display:flex;flex-direction:column;gap:4px;min-width:0;}',
+      ':root {',
-      '#magnet-floating-panel .magnet-panel-title{font-size:20px;font-weight:700;letter-spacing:.3px;}',
+      '  --m-bg-deep: #0a0e14;',
-      '#magnet-floating-panel .magnet-panel-subtitle{font-size:12px;opacity:.88;line-height:1.45;}',
+      '  --m-bg-primary: #0f1419;',
-      '#magnet-floating-panel .magnet-panel-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}',
+      '  --m-bg-secondary: #1a1f2e;',
-      '#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;}',
+      '  --m-bg-card: rgba(26, 31, 46, 0.92);',
-      '#magnet-floating-panel .magnet-panel-switch:hover{background:rgba(255,255,255,.24);transform:translateY(-1px);}',
+      '  --m-bg-card-hover: rgba(35, 41, 58, 0.95);',
-      '#magnet-floating-panel .magnet-panel-switch.is-active{background:#fff;color:#1f5f3e;box-shadow:0 10px 20px rgba(14,30,37,.18);}',
+      '  --m-accent: #00d4aa;',
-      '#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;}',
+      '  --m-accent-glow: rgba(0, 212, 170, 0.4);',
-      '#magnet-floating-panel .magnet-panel-close:hover{background:rgba(255,255,255,.24);}',
+      '  --m-accent-secondary: #a78bfa;',
-      '#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;}',
+      '  --m-text-primary: #f0f4f8;',
-      '#magnet-floating-panel .magnet-control-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}',
+      '  --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-toolbar{',
-      '#magnet-floating-panel .magnet-view-meta{font-size:12px;color:#5d6b82;}',
+      '  display:flex;justify-content:space-between;align-items:center;',
-      '#magnet-list{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;padding-right:4px;}',
+      '  gap:12px;padding:14px 18px;',
-      '#magnet-cache-panel{flex:1;min-height:0;overflow-y:auto;padding-right:4px;}',
+      '  background:var(--m-bg-card);',
-      '#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;}',
+      '  border:1px solid var(--m-border);',
-      '#magnet-status{padding:10px 12px;border-radius:12px;font-size:12px;line-height:1.5;}',
+      '  border-radius:var(--m-radius-lg);',
-      '#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-floating-panel .magnet-view-toolbar-actions{',
-      '.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);}',
+      '  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;',
-      '.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-floating-panel .magnet-view-title{',
-      '.magnet-copy-btn:hover{filter:brightness(1.03);}',
+      '  font-family:var(--m-font-display);',
-      '.magnet-cache-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px;}',
+      '  font-size:16px;font-weight:700;',
-      '.magnet-cache-card{padding:12px;background:#fff;border:1px solid #e4ebf5;border-radius:14px;box-shadow:0 10px 18px rgba(31,48,74,.05);}',
+      '  color:var(--m-text-primary);',
-      '.magnet-cache-card-label{font-size:11px;color:#6b778c;margin-bottom:6px;}',
+      '  letter-spacing:0.5px;',
-      '.magnet-cache-card-value{font-size:18px;font-weight:700;color:#163049;}',
+      '}',
-      '.magnet-cache-section{margin-top:12px;}',
+      '#magnet-floating-panel .magnet-view-meta{',
-      '.magnet-cache-section-title{font-size:12px;font-weight:700;color:#5c6b82;margin-bottom:8px;}',
+      '  font-size:12px;color:var(--m-text-secondary);',
-      '.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-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.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:8px 15px;cursor:pointer"><input type="checkbox" id="debug-check"' + (DEBUG_MODE ? ' checked' : '') + '> 调试模式</label>';
+      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');

manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "涩花塘磁力助手",
-  "version": "1.2",
+  "version": "1.3",
-  "description": "一键获取当前页所有帖子的磁力链接",
+  "description": "一键获取磁力链接 - 暗色科技风UI",
   "permissions": [
     "activeTab",
     "clipboardWrite",

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; }
+    :root {
-    h3 { margin: 0 0 10px; font-size: 14px; }
+      --m-bg-deep: #0a0e14;
-    p { font-size: 12px; color: #666; margin: 5px 0; }
+      --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;
+      padding: 12px 16px;
-      background: #4CAF50;
+      background: linear-gradient(135deg, var(--m-accent) 0%, #00f5c4 100%);
-      color: white;
+      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>
+  <div class="popup-header">
-  <p>在论坛页面提取当前页磁力链接并复制到剪贴板</p>
+    <div class="popup-icon">
-  <button id="copyBtn">手动复制当前页面</button>
+      <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>