120 lines
4.0 KiB
HTML
120 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Thing Extension</title>
|
||
<link rel="stylesheet" href="popup.css" />
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<img src="icons/icon-48.png" alt="Thing" class="logo" />
|
||
<div class="title">
|
||
<h1>Thing Extension</h1>
|
||
<span class="subtitle">Thing 下载引擎 · 资源嗅探</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Tab 切换 -->
|
||
<nav class="tabs">
|
||
<button class="tab active" data-tab="sniff">资源嗅探</button>
|
||
<button class="tab" data-tab="config">设置</button>
|
||
</nav>
|
||
|
||
<!-- ===== 嗅探面板 ===== -->
|
||
<section class="panel" id="panel-sniff">
|
||
<!-- 资源类型子 Tab -->
|
||
<nav class="sniff-tabs">
|
||
<button class="sniff-tab active" data-type="video">
|
||
视频 <span class="sniff-tab-count" id="count-video">0</span>
|
||
</button>
|
||
<button class="sniff-tab" data-type="audio">
|
||
音频 <span class="sniff-tab-count" id="count-audio">0</span>
|
||
</button>
|
||
<button class="sniff-tab" data-type="image">
|
||
图片 <span class="sniff-tab-count" id="count-image">0</span>
|
||
</button>
|
||
<button class="sniff-tab" data-type="other">
|
||
其他 <span class="sniff-tab-count" id="count-other">0</span>
|
||
</button>
|
||
</nav>
|
||
|
||
<div class="sniff-toolbar">
|
||
<button id="sniffRefreshBtn" title="重新嗅探当前页">嗅探本页</button>
|
||
<button id="sniffClearBtn" title="清空所有嗅探记录">清空</button>
|
||
</div>
|
||
<div class="sniff-list" id="sniffList">
|
||
<div class="empty">暂无嗅探记录</div>
|
||
</div>
|
||
<div class="sniff-stats" id="sniffStats"></div>
|
||
</section>
|
||
|
||
<!-- ===== 预览浮层 ===== -->
|
||
<div class="preview-overlay" id="previewOverlay">
|
||
<div class="preview-content">
|
||
<button class="preview-close" id="previewClose" title="关闭">×</button>
|
||
<div class="preview-body" id="previewBody"></div>
|
||
<div class="preview-info" id="previewInfo"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 配置面板 ===== -->
|
||
<section class="panel hidden" id="panel-config">
|
||
<section class="status" id="statusBox">
|
||
<span class="dot" id="statusDot"></span>
|
||
<span id="statusText">检测中...</span>
|
||
</section>
|
||
|
||
<form id="configForm">
|
||
<label class="field">
|
||
<span>API 地址</span>
|
||
<input type="text" id="serverUrl" placeholder="http://127.0.0.1:16800" />
|
||
</label>
|
||
|
||
<label class="field">
|
||
<span>认证密钥</span>
|
||
<input type="password" id="secret" placeholder="未设置时留空" />
|
||
</label>
|
||
|
||
<label class="checkbox">
|
||
<input type="checkbox" id="interceptDownload" />
|
||
<span>接管浏览器下载</span>
|
||
</label>
|
||
|
||
<label class="checkbox">
|
||
<input type="checkbox" id="sniffEnabled" />
|
||
<span>启用资源嗅探</span>
|
||
</label>
|
||
|
||
<label class="checkbox">
|
||
<input type="checkbox" id="showNotifications" />
|
||
<span>显示桌面通知</span>
|
||
</label>
|
||
|
||
<label class="field">
|
||
<span>下载最小文件大小（字节，0=全部）</span>
|
||
<input type="number" id="minSize" min="0" placeholder="0" />
|
||
</label>
|
||
|
||
<label class="field">
|
||
<span>嗅探最小文件大小（字节，0=全部）</span>
|
||
<input type="number" id="sniffMinSize" min="0" placeholder="102400" />
|
||
</label>
|
||
|
||
<label class="field">
|
||
<span>下载排除域名（逗号分隔）</span>
|
||
<input type="text" id="excludeDomains" placeholder="例如：example.com,another.com" />
|
||
</label>
|
||
|
||
<div class="actions">
|
||
<button type="button" id="testBtn">测试连接</button>
|
||
<button type="submit" class="primary">保存</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
<script src="popup.js"></script>
|
||
</body>
|
||
</html>
|