浅念
105 lines
5.2 KiB
HTML
105 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { width: 360px; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 13px; color: #333; }
|
|
.header { background: #ff6a00; color: #fff; padding: 12px 16px; }
|
|
.header h1 { font-size: 15px; font-weight: 600; }
|
|
.header p { font-size: 11px; opacity: 0.85; margin-top: 2px; }
|
|
.status-bar { padding: 10px 16px; background: #f8f8f8; border-bottom: 1px solid #e5e5e5; display: flex; justify-content: space-between; align-items: center; }
|
|
.status-bar .label { color: #888; font-size: 11px; }
|
|
.status-bar .value { font-weight: 600; color: #ff6a00; }
|
|
.controls { padding: 12px 16px; }
|
|
.controls select, .controls button { width: 100%; padding: 8px; margin-bottom: 8px; border-radius: 6px; font-size: 13px; }
|
|
.controls select { border: 1px solid #ddd; background: #fff; }
|
|
.btn-primary { background: #ff6a00; color: #fff; border: none; cursor: pointer; }
|
|
.btn-primary:hover { background: #e55d00; }
|
|
.btn-primary:disabled { background: #ccc; cursor: not-allowed; }
|
|
.btn-secondary { background: #fff; color: #333; border: 1px solid #ddd; cursor: pointer; }
|
|
.btn-secondary:hover { background: #f5f5f5; }
|
|
.btn-secondary:disabled { color: #ccc; cursor: not-allowed; }
|
|
.log { padding: 8px 16px; max-height: 200px; overflow-y: auto; background: #fafafa; border-top: 1px solid #e5e5e5; }
|
|
.log p { font-size: 11px; color: #666; margin-bottom: 2px; word-break: break-all; }
|
|
.log .success { color: #52c41a; }
|
|
.log .error { color: #f5222d; }
|
|
.log .info { color: #1890ff; }
|
|
.progress-bar { height: 3px; background: #e5e5e5; }
|
|
.progress-bar .fill { height: 100%; background: #ff6a00; transition: width 0.3s; width: 0%; }
|
|
.options { padding: 8px 16px; border-top: 1px solid #e5e5e5; }
|
|
.options label { font-size: 11px; color: #666; display: block; margin-bottom: 4px; }
|
|
.options label input { margin-right: 4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>阿里询盘数据抓取</h1>
|
|
<p>message.alibaba.com 询盘列表 + 详情</p>
|
|
</div>
|
|
|
|
<div id="riskBanner" style="display:none;background:#fff1f0;color:#cf1322;padding:8px 16px;font-size:12px;line-height:1.4;border-bottom:1px solid #ffa39e;">
|
|
⚠️ 疑似触发 alibaba 风控,抓取已暂停。请到 alibaba 页面检查是否有验证码,处理后再继续。
|
|
</div>
|
|
|
|
<div class="status-bar">
|
|
<span class="label">状态</span>
|
|
<span class="value" id="statusText">就绪</span>
|
|
</div>
|
|
|
|
<div class="progress-bar"><div class="fill" id="progressFill"></div></div>
|
|
|
|
<div class="push-status" id="pushStatus" style="padding:6px 16px;font-size:11px;color:#666;background:#fafafa;border-bottom:1px solid #e5e5e5;cursor:pointer;">
|
|
推送:加载中...
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<select id="modeSelect">
|
|
<option value="list">仅抓取列表页数据</option>
|
|
<option value="detail" selected>列表 + 详情页完整数据</option>
|
|
</select>
|
|
<select id="limitSelect">
|
|
<option value="0" selected>全部抓取</option>
|
|
<option value="10">测试：前 10 条</option>
|
|
<option value="50">前 50 条</option>
|
|
</select>
|
|
|
|
<button class="btn-primary" id="btnStart">开始抓取</button>
|
|
<button class="btn-secondary" id="btnPause" disabled>暂停</button>
|
|
<button class="btn-secondary" id="btnExport" disabled>导出 CSV</button>
|
|
<button class="btn-secondary" id="btnClear">清空数据</button>
|
|
|
|
<div class="options">
|
|
<label><input type="checkbox" id="optDedup" checked> customerId 去重（保留最新询价单）</label>
|
|
<label><input type="checkbox" id="optChat"> 包含聊天记录</label>
|
|
<label>每询盘聊天上限(0=全量;测试可设小值加快): <input type="number" id="chatLimitInput" value="0" min="0" style="width:64px;"> 条 <span id="chatLimitHint" style="color:#999;"></span></label>
|
|
<label>聊天时间范围:
|
|
<select id="chatTimeRange" style="width:120px;">
|
|
<option value="all" selected>全部(不限)</option>
|
|
<option value="1m">近 1 个月</option>
|
|
<option value="2m">近 2 个月</option>
|
|
<option value="3m">近 3 个月</option>
|
|
<option value="custom">自定义日期…</option>
|
|
</select>
|
|
</label>
|
|
<div id="chatCustomDates" style="display:none;margin:4px 0;">
|
|
<input type="date" id="chatSinceDate"> ~ <input type="date" id="chatUntilDate">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="push-config" style="padding:8px 16px;border-top:1px solid #e5e5e5;">
|
|
<div style="font-size:11px;color:#888;margin-bottom:4px;">后端推送设置</div>
|
|
<input id="cfgServerUrl" placeholder="https://your-server.com" style="width:100%;padding:6px;margin-bottom:6px;border:1px solid #ddd;border-radius:6px;font-size:12px;">
|
|
<input id="cfgToken" placeholder="推送 Token" style="width:100%;padding:6px;margin-bottom:6px;border:1px solid #ddd;border-radius:6px;font-size:12px;">
|
|
<label style="font-size:11px;color:#666;display:block;margin-bottom:6px;"><input type="checkbox" id="cfgEnabled"> 启用推送</label>
|
|
<button id="btnAuthorize" class="btn-secondary" style="margin-bottom:6px;">授权域名</button>
|
|
<button id="btnSaveConfig" class="btn-primary">保存设置</button>
|
|
</div>
|
|
|
|
<div class="log" id="logBox"></div>
|
|
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|