237899745/sehuatang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(popup): 重做扩展云同步中心与项目文档

Browse Source 
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
Developer
2026-03-18 00:28:14 +08:00
parent 5d0611de60
commit a7ff557942
4 changed files with 1080 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
popup.html
View File

@@ -2,7 +2,7 @@
<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">
<title>磁力助手</title>
<style>
:root {
--m-bg-deep: #0a0e14;
@@ -10,124 +10,130 @@
--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-accent-2: #00f5c4;
--m-danger: #ef4444;
--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;
--m-border: rgba(255,255,255,0.08);
--m-radius: 12px;
}
* { box-sizing: border-box; }
body {
width: 260px;
padding: 20px;
margin: 0;
min-width: 320px;
background: var(--m-bg-primary);
font-family: var(--m-font-body);
color: var(--m-text-primary);
font: 13px/1.5 "Microsoft YaHei", sans-serif;
padding: 18px;
}
.popup-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
.header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.title { font-size: 18px; font-weight: 700; color: var(--m-accent); }
.subtitle { font-size: 11px; color: var(--m-text-secondary); }
.header-status { display:flex; flex-direction:column; align-items:flex-end; gap:6px; min-width:120px; }
.header-status .status { margin-top:0; }
.card {
background: var(--m-bg-card);
border: 1px solid var(--m-border);
border-radius: 16px;
padding: 14px;
margin-bottom: 12px;
}
.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 {
.card-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.meta { color: var(--m-text-secondary); font-size: 12px; }
.row { display:flex; gap:8px; margin-top:10px; }
.col { display:flex; flex-direction:column; gap:10px; }
input {
width: 100%;
padding: 12px 16px;
background: linear-gradient(135deg, var(--m-accent) 0%, #00f5c4 100%);
color: var(--m-bg-deep);
padding: 10px 12px;
border-radius: var(--m-radius);
border: 1px solid var(--m-border);
background: var(--m-bg-secondary);
color: var(--m-text-primary);
outline: none;
}
input:focus { border-color: var(--m-accent); }
button {
border: none;
border-radius: var(--m-radius-md);
border-radius: var(--m-radius);
padding: 10px 12px;
cursor: pointer;
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;
}
.primary { background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2)); color: var(--m-bg-deep); }
.secondary { background: var(--m-bg-secondary); color: var(--m-text-primary); border: 1px solid var(--m-border); }
.danger { background: rgba(239,68,68,0.16); color: #ff8585; border: 1px solid rgba(239,68,68,0.25); }
.status { display:flex; align-items:center; gap:8px; margin-top:8px; }
.dot { width: 8px; height: 8px; border-radius:50%; background: var(--m-danger); box-shadow: 0 0 8px rgba(239,68,68,.35); }
.dot.ok { background:#10b981; box-shadow:0 0 8px rgba(16,185,129,.35); }
.small { font-size: 11px; color: var(--m-text-muted); }
.hidden { display:none; }
</style>
</head>
<body>
<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 class="header">
<div>
<div class="title">MAGNET CLOUD</div>
<div class="subtitle">扩展独立云同步中心</div>
</div>
<div class="header-status">
<div class="status"><span id="accountDot" class="dot"></span><span id="accountText" class="meta">账号状态加载中</span></div>
<div class="status"><span id="serverDot" class="dot"></span><span id="serverText" class="meta">服务器状态加载中</span></div>
<div id="syncEmail" class="small"></div>
</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 class="card col">
<div class="card-title">云端状态看板</div>
<div id="cloudStatsSummary" class="meta">正在读取云端统计...</div>
<div id="cloudStatsLatest" class="small"></div>
<div id="cloudStatsTables" class="small"></div>
</div>
<div class="card col">
<div class="card-title">本地状态看板</div>
<div id="localStatsSummary" class="meta">正在读取本地统计...</div>
<div id="localStatsStorage" class="small"></div>
<div id="localStatsMeta" class="small"></div>
</div>
<div id="authLoggedOut" class="card col">
<div class="card-title">登录 / 注册</div>
<div class="meta">账号密码只会在扩展页面中输入，不再放在网页里。</div>
<input id="emailInput" type="text" placeholder="邮箱">
<input id="passwordInput" type="password" placeholder="密码，至少6位">
<div class="row">
<button id="loginBtn" class="primary" type="button">登录</button>
<button id="registerBtn" class="secondary" type="button">注册</button>
</div>
</div>
<div id="authLoggedIn" class="card col hidden">
<div class="card-title">已登录</div>
<div id="loggedInEmail" class="meta"></div>
<div class="row">
<button id="syncNowBtn" class="primary" type="button">立即同步</button>
<button id="logoutBtn" class="danger" type="button">退出登录</button>
</div>
<div id="syncProgressText" class="small"></div>
</div>
<div class="card col">
<div class="card-title">下载器推荐</div>
<div class="meta">如果点击磁力“下载”按钮没有反应，请先安装本地下载器。qBittorrent 更适合磁力资源，Motrix 更适合偏轻量的使用习惯。</div>
<div class="row">
<button id="downloadNode2Btn" class="primary" type="button">qB 节点2（推荐）</button>
<button id="downloadOfficialBtn" class="secondary" type="button">qB 官方节点</button>
</div>
<div class="row">
<button id="downloadMotrixBtn" class="secondary" type="button">Motrix 下载</button>
</div>
<div class="small">安装完成后，请确保 qBittorrent 已关联 magnet 磁力链接协议。</div>
</div>
<div id="message" class="small"></div>
<script src="popup.js"></script>
</body>
</html>