sansyn-pc-extension/release/sansheng-product-analysis-extension-v9.3.0-webstore 2/popup.html

<!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>电商单品洞察 V1.0</span>
        </div>
      </div>
      <button class="text-action" id="openReports" style="display:none">报告记录</button>
    </div>
    <p>采集商品、图片、参数和评论，生成可追溯的产品分析报告。</p>
  </header>

  <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>

    <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 class="steps-tracker" id="stepsTracker">
        <div class="tracker-item" id="stepInfo">
          <span class="tracker-dot"></span>
          <span class="tracker-label">基本信息</span>
        </div>
        <div class="tracker-line"></div>
        <div class="tracker-item" id="stepParams">
          <span class="tracker-dot"></span>
          <span class="tracker-label">规格参数</span>
        </div>
        <div class="tracker-line"></div>
        <div class="tracker-item" id="stepReviews">
          <span class="tracker-dot"></span>
          <span class="tracker-label">买家评价 <small id="liveReviewBadge" style="display:none"></small></span>
        </div>
        <div class="tracker-line"></div>
        <div class="tracker-item" id="stepReport">
          <span class="tracker-dot"></span>
          <span class="tracker-label">云端报告</span>
        </div>
      </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 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>最多 50 条</small>
        </button>
        <button id="modeStandard" class="mode active">
          <strong>标准</strong><small>最多 100 条</small>
        </button>
        <button id="modeFull" class="mode">
          <strong>深度</strong><small>最多 200 条</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>