Add product analysis extension release
This commit is contained in:
Caoweijie
+128
-38
@@ -1,41 +1,131 @@
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><style>
|
||||
body{width:360px;margin:0;padding:18px;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;background:#f5faf9;color:#10191d}h1{font-size:18px;margin:0 0 6px;background:linear-gradient(110deg,#00d9b6,#008bd8);-webkit-background-clip:text;color:transparent}.sub{font-size:12px;color:#60757c;line-height:1.6}.card{margin-top:14px;padding:14px;background:#fff;border:1px solid #dbe8e8;border-radius:14px}.state{font-weight:800;margin-bottom:8px}.bar{height:6px;background:#e6f0ef;border-radius:8px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(110deg,#00d9b6,#008bd8);width:0}.btn{width:100%;margin-top:12px;border:0;background:linear-gradient(110deg,#00cdb0,#008fd8);color:#fff;padding:11px;border-radius:999px;font-weight:800;cursor:pointer}.secondary{background:#fff;color:#17434b;border:1px solid #a9cfcc}.tiny{font-size:11px;color:#71858a;margin-top:9px}.monitor{display:flex;gap:8px}.monitor .btn{flex:1}.ok{color:#008b78}.warn{color:#a66d18}.file{display:none}.live{margin-top:10px;padding:10px;background:#edf9f7;border-radius:10px;font-size:11px;line-height:1.6;color:#526a70}.live strong{font-size:12px;color:#10191d}.live-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin-top:6px}.live-preview{margin-top:7px;padding-top:7px;border-top:1px solid #d6e8e5;max-height:78px;overflow:auto}.stop{background:#a83f49!important;color:#fff!important;border:0!important}
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" href="popup.css">
|
||||
<title>三笙商品分析</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="app-header">
|
||||
<div class="brand-row">
|
||||
<div class="brand">
|
||||
<img src="icon-128.png" alt="">
|
||||
<div>
|
||||
<h1>三笙商品分析</h1>
|
||||
<span>电商单品洞察</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="text-action" id="openReports" style="display:none">报告记录</button>
|
||||
</div>
|
||||
<p>采集商品、图片、参数和评论，生成可追溯的产品分析报告。</p>
|
||||
</header>
|
||||
|
||||
.analysis-now{background:#fff;color:#1f1d1a;border:1px solid #1f1d1a}
|
||||
.mode-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
|
||||
.mode{padding:10px;border:1px solid #ded7ce;border-radius:12px;background:#fff;cursor:pointer;font-size:12px}
|
||||
.mode.active{background:#1f1d1a;color:#fff;border-color:#1f1d1a}
|
||||
.mode small{display:block;opacity:.72;margin-top:4px;line-height:1.45}
|
||||
<main>
|
||||
<section class="account-row">
|
||||
<div class="account-copy">
|
||||
<i id="accountDot"></i>
|
||||
<div>
|
||||
<strong>三笙账号</strong>
|
||||
<span id="accountStatus">正在检查登录状态</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="compact-button primary" id="loginAccount">登录</button>
|
||||
<button class="compact-button" id="logoutAccount" style="display:none">退出</button>
|
||||
</section>
|
||||
|
||||
.param-live{margin-top:10px;padding:10px;background:#f6f3ed;border-radius:10px;font-size:11px;line-height:1.6;color:#5f5a54}
|
||||
.param-live strong{font-size:12px;color:#181716}
|
||||
.param-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
|
||||
.param-tag{padding:4px 8px;border-radius:999px;background:#fff;border:1px solid #e0d8cf;font-size:11px}
|
||||
.param-miss{margin-top:8px;padding-top:8px;border-top:1px solid #e5dfd6}
|
||||
</style></head><body>
|
||||
<h1>三笙 · 电商商品分析引擎</h1>
|
||||
<div class="sub">采集当前商品后自动识别类目和分析维度，生成标题、主图、详情、SKU、评论、新品设计与 AI 视觉报告。</div>
|
||||
<div class="card"><div id="server" class="state">检查本地服务…</div><div id="status" class="sub">等待当前商品页</div><div class="bar"><i id="bar"></i></div></div>
|
||||
<div class="card sample-card"><div class="state">采集前先选择评论样本</div><div class="sub">只限制评论样本数量；商品信息、参数、图片、问答和完整分析内容都会保留。</div><div class="mode-row">
|
||||
<button data-sample="50" class="mode">50 条<small>快速判断</small></button>
|
||||
<button data-sample="100" class="mode">100 条<small>常规小样本</small></button>
|
||||
<button data-sample="500" class="mode active">500 条<small>推荐</small></button>
|
||||
<button data-sample="all" class="mode">全部<small>采到可访问末页</small></button>
|
||||
<button data-sample="custom" class="mode">自定义<small>输入数量</small></button>
|
||||
</div><div id="customSampleWrap" style="display:none;margin-top:10px"><input id="customSample" type="number" min="1" max="10000" placeholder="输入评论条数（1-10000）"></div><div class="tiny">采集开始后不能切换样本档位；如中途停止，可按原档位继续。</div></div>
|
||||
<button class="btn" id="run">开始深度采集</button>
|
||||
<button class="btn stop" id="stop" style="display:none">终止采集并保存进度</button>
|
||||
<section class="status-card" id="statusCard" data-state="idle">
|
||||
<div class="status-head">
|
||||
<div class="phase">
|
||||
<span class="phase-indicator"></span>
|
||||
<strong id="phaseLabel">等待开始</strong>
|
||||
</div>
|
||||
<b id="progressValue">0%</b>
|
||||
</div>
|
||||
<div id="status" class="status-message">请打开天猫或淘宝商品详情页</div>
|
||||
<div class="progress-track"><i id="bar"></i></div>
|
||||
<div id="analysisMeta" class="task-meta" style="display:none"></div>
|
||||
<div id="waitHint" class="wait-hint" style="display:none">
|
||||
分析会在后台继续，可以关闭扩展或继续浏览商品。
|
||||
</div>
|
||||
<button class="main-button report-button" id="viewCurrentReport" style="display:none">
|
||||
查看分析报告
|
||||
</button>
|
||||
<button class="secondary-button" id="analyzeAgain" style="display:none">
|
||||
再次分析当前商品
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<div id="paramLive" class="param-live" style="display:none">
|
||||
<strong>参数采集</strong>
|
||||
<div>状态：<b id="paramState">等待采集</b></div>
|
||||
<div>已识别：<b id="paramCount">0</b> 项</div>
|
||||
<div class="param-tags" id="paramTags"></div>
|
||||
<div class="param-miss" id="paramMissing">缺失项：—</div>
|
||||
</div>
|
||||
<div id="reviewLive" class="live" style="display:none"><strong>评论实时采集</strong><div class="live-grid"><span>去重：<b id="liveCount">0</b></span><span>网络对象：<b id="liveNet">0</b></span><span>当前轮次：<b id="liveRound">0</b></span><span>无新增：<b id="liveStagnant">0</b></span><span>模式：<b id="liveMode">—</b></span><span>耗时：<b id="liveElapsed">0s</b></span></div><div id="livePreview" class="live-preview">等待评论数据…</div></div>
|
||||
<div class="card"><div class="state">分析入口</div><div class="sub">已有采集数据时，可直接生成报告；不会清空当前采集进度。</div><button id="analyzeNow" class="btn analysis-now">基于当前数据开始分析</button></div>
|
||||
<button class="btn secondary" id="open">打开本地服务</button>
|
||||
<div class="tiny">不会采集推荐商品。评论会自动去重、分类和抽样；采集过程中可随时停止并继续。</div>
|
||||
<script src="popup.js"></script>
|
||||
</body></html>
|
||||
<div class="service-line">
|
||||
<span id="server">正在检查云端服务</span>
|
||||
</div>
|
||||
|
||||
<section id="collectionControls" class="action-section">
|
||||
<button class="main-button" id="run">标准采集并生成</button>
|
||||
<button class="main-button danger" id="stop" style="display:none">
|
||||
终止采集并保存进度
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section id="paramLive" class="detail-panel" style="display:none">
|
||||
<div class="detail-title">
|
||||
<strong>商品参数</strong>
|
||||
<span id="paramState">等待采集</span>
|
||||
</div>
|
||||
<div class="metric-row">
|
||||
<span>已识别</span>
|
||||
<b><span id="paramCount">0</span> 项</b>
|
||||
</div>
|
||||
<div class="param-tags" id="paramTags"></div>
|
||||
<div class="detail-note" id="paramMissing">缺失项：无</div>
|
||||
</section>
|
||||
|
||||
<section id="reviewLive" class="detail-panel" style="display:none">
|
||||
<div class="detail-title">
|
||||
<strong>评论采集</strong>
|
||||
<span id="liveMode">等待</span>
|
||||
</div>
|
||||
<div class="metric-grid">
|
||||
<div><span>有效评论</span><b id="liveCount">0</b></div>
|
||||
<div><span>网络对象</span><b id="liveNet">0</b></div>
|
||||
<div><span>当前轮次</span><b id="liveRound">0</b></div>
|
||||
<div><span>无新增轮次</span><b id="liveStagnant">0</b></div>
|
||||
</div>
|
||||
<div class="detail-note">采集耗时 <b id="liveElapsed">0s</b></div>
|
||||
<div id="livePreview" class="live-preview">等待评论数据</div>
|
||||
</section>
|
||||
|
||||
<section id="analysisOptions" class="mode-panel">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<strong>采集深度</strong>
|
||||
<span>决定最多分析的评论数量</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mode-row" role="group" aria-label="采集深度">
|
||||
<button id="modeQuick" class="mode">
|
||||
<strong>快速</strong><small>最多 300 条</small>
|
||||
</button>
|
||||
<button id="modeStandard" class="mode active">
|
||||
<strong>标准</strong><small>最多 800 条</small>
|
||||
</button>
|
||||
<button id="modeFull" class="mode">
|
||||
<strong>深度</strong><small>最多 1500 条</small>
|
||||
</button>
|
||||
</div>
|
||||
<button id="analyzeNow" class="secondary-button">
|
||||
基于当前已有数据生成报告
|
||||
</button>
|
||||
<div class="option-note">当前数据可能尚未覆盖全部公开评论。</div>
|
||||
</section>
|
||||
|
||||
<section id="reportHistory" class="detail-panel history-panel" style="display:none">
|
||||
<div class="detail-title"><strong>最近报告</strong><button class="text-action" id="closeHistory">收起</button></div>
|
||||
<div id="historyList" class="history-list"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="auth.js"></script>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user