popup.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Linux DO 自动浏览</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body data-site="linuxdo">
  <div class="container">
    <!-- Tab 导航 -->
    <div class="tab-nav" role="tablist">
      <button class="tab-button active" data-tab="control" role="tab" aria-selected="true">控制中心</button>
      <button class="tab-button" data-tab="stats" role="tab" aria-selected="false">数据统计</button>
      <button class="tab-button" data-tab="invites" role="tab" aria-selected="false">邀请榜单</button>
    </div>

    <!-- 控制面板 -->
    <div class="tab-panel active" data-panel="control" role="tabpanel">
      <!-- 状态卡片 -->
      <div class="status-area">
        <div class="status-badge" id="statusBadge">
          <span class="status-dot"></span>
          <span class="status-text">未运行</span>
        </div>
        <p class="subtitle">已浏览 <strong id="browsedCount">0</strong> 帖</p>
      </div>

      <!-- 主控制按钮 -->
      <div class="main-actions">
        <button id="startBtn" class="btn-primary">开始浏览</button>
        <button id="stopBtn" class="btn-secondary" disabled>停止</button>
      </div>

      <!-- 次要操作 -->
      <div class="secondary-actions">
        <button id="resetBtn" class="btn-text">重置并重启</button>
        <span class="divider">/</span>
        <button id="clearHistoryBtn" class="btn-text">清空历史</button>
      </div>

        <div class="level-banner" id="levelBanner">
          <div class="level-banner__head">
            <div>
              <div class="level-banner__hint">当前等级</div>
              <div class="level-banner__title" id="levelTitle">信任级别 —</div>
              <div class="level-banner__meta" id="levelMeta">正在读取 Connect 数据…</div>
            </div>
            <div class="level-banner__actions">
              <span class="badge" id="levelBadge">加载中</span>
              <button id="levelLoginBtn" class="level-login-btn" type="button" hidden>去登录</button>
            </div>
          </div>
        <div class="level-banner__hero">
          <div class="level-hero">
            <div class="level-hero__label">等级</div>
            <div class="level-hero__value" id="levelHeroValue">—</div>
          </div>
          <div class="level-hero__divider"></div>
          <div class="level-hero__meta">
            <div class="level-hero__name" id="levelHeroName">信任级别</div>
            <div class="level-hero__desc" id="levelHeroDesc">—</div>
          </div>
        </div>
        <div class="level-banner__metrics">
          <div class="level-metric">
            <span class="level-metric__label">访问天数</span>
            <span class="level-metric__value" id="levelVisitDays">—</span>
            <div class="level-metric__bar"><span class="level-metric__bar-fill"></span></div>
          </div>
          <div class="level-metric">
            <span class="level-metric__label">浏览话题</span>
            <span class="level-metric__value" id="levelTopics">—</span>
            <div class="level-metric__bar"><span class="level-metric__bar-fill"></span></div>
          </div>
          <div class="level-metric">
            <span class="level-metric__label">浏览帖子</span>
            <span class="level-metric__value" id="levelPosts">—</span>
            <div class="level-metric__bar"><span class="level-metric__bar-fill"></span></div>
          </div>
        </div>
      </div>

      <!-- 滚动容器 (所有可变高度内容放这里) -->
      <div class="scroll-container">
        <div class="site-switcher">
          <div class="site-switcher__header">
            <div>
              <div class="site-switcher__title">站点</div>
              <div class="site-switcher__subtitle">点击切换目标站点</div>
            </div>
            <div class="site-switcher__current">当前：<span id="currentSiteNameInline">Linux DO</span></div>
          </div>
          <div class="site-switcher__grid" role="radiogroup" aria-label="站点选择">
            <button class="site-chip is-active" type="button" role="radio" aria-checked="true" data-site-id="linuxdo">
              <span class="site-chip__title">Linux DO</span>
              <span class="site-chip__tag">主站</span>
            </button>
            <button class="site-chip" type="button" role="radio" aria-checked="false" data-site-id="idcflare">
              <span class="site-chip__title">IDCFlare</span>
              <span class="site-chip__tag">镜像</span>
            </button>
            <button class="site-chip is-disabled" type="button" role="radio" aria-checked="false" data-site-id="connect" disabled>
              <span class="site-chip__title">Nodeseek</span>
              <span class="site-chip__tag">即将支持</span>
            </button>
          </div>
        </div>

        <!-- 设置面板 -->
        <details class="settings settings-container" id="settingsPanel">
          <summary>高级浏览设置</summary>
          <div class="settings-grid">
            <div class="setting-item">
              <label>阅读时长 (秒)</label>
              <div class="input-group">
                <input type="number" id="minCommentRead" value="1" step="0.5">
                <span style="color:#ccc">-</span>
                <input type="number" id="maxCommentRead" value="4" step="0.5">
              </div>
            </div>
            <div class="setting-item">
              <label>页面停留 (秒)</label>
              <div class="input-group">
                <input type="number" id="minPageStay" value="5">
                <span style="color:#ccc">-</span>
                <input type="number" id="maxPageStay" value="15">
              </div>
            </div>
            <div class="setting-item">
              <label>点击概率 (0-1)</label>
              <div class="input-group">
                <input type="number" id="clickProbability" value="0.6" step="0.1">
              </div>
            </div>
            <div class="setting-switch-grid">
              <div class="setting-item setting-item--switch">
                <label class="switch-label" style="padding:0">
                  <input type="checkbox" id="quickMode" class="switch-checkbox">
                  <span class="switch-text">
                    <span class="switch-title">快速模式</span>
                    <span class="switch-sub">跳过评论</span>
                  </span>
                </label>
              </div>
              <div class="setting-item setting-item--switch">
                <label class="switch-label" style="padding:0">
                  <input type="checkbox" id="skipDailyIdleWait" class="switch-checkbox">
                  <span class="switch-text">
                    <span class="switch-title">切换直达</span>
                    <span class="switch-sub">等待 10m</span>
                  </span>
                </label>
              </div>
            </div>
            <button id="applySettings" class="btn-apply">应用并保存</button>
          </div>
        </details>

        <!-- 日志区域 -->
        <div id="logsSection" class="logs-section" hidden>
          <div class="logs-header">
            <span>运行日志</span>
            <div style="display:flex;gap:4px;">
              <button id="copyLogs" class="btn-text" style="font-size:10px;padding:2px 6px;">复制</button>
              <button id="clearLogs" class="btn-text" style="font-size:10px;padding:2px 6px;">清空</button>
            </div>
          </div>
          <div class="logs-content" id="logsContent">
            <div class="log-empty">
              <div class="log-illustration" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
                  <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
                  <line x1="12" y1="19" x2="12" y2="22"/>
                  <line x1="8" y1="22" x2="16" y2="22"/>
                </svg>
              </div>
              <span style="font-size:10px;margin-top:4px;">暂无活动</span>
            </div>
          </div>
        </div>
        <div id="internalLogTools" class="internal-log-tools" hidden>
          <span>内部日志</span>
          <div class="internal-log-actions">
            <button id="exportInternalLogs" class="btn-text" style="font-size:10px;padding:2px 6px;">导出</button>
            <button id="clearInternalLogs" class="btn-text" style="font-size:10px;padding:2px 6px;">清空</button>
          </div>
        </div>
      </div>

    </div>

    <!-- 统计面板 -->
    <div class="tab-panel" data-panel="stats" role="tabpanel">
      <div class="scroll-container" id="statsContent">
        <div class="stats-loading" style="text-align: center; padding: 40px; color: #999; font-size:12px;">
          加载数据中...
        </div>
      </div>

    </div>

    <!-- 邀请榜单面板 -->
    <div class="tab-panel" data-panel="invites" role="tabpanel">
      <div class="scroll-container">
        <div class="invites-header">
          <div class="invites-title">邀请榜单</div>
          <div class="invites-status" id="invitesStatus">每 5 分钟自动刷新</div>
          <div class="invites-controls">
            <select id="invitesSort" class="invites-select">
              <option value="used">按已用</option>
              <option value="rate">按使用率</option>
              <option value="recent">按最近创建</option>
            </select>
            <label class="invites-filter">
              <input type="checkbox" id="invitesFilterUsed">
              <span>仅已用</span>
            </label>
            <input
              type="text"
              id="invitesExactId"
              class="invites-exact-id"
              placeholder="精确ID(用户名)"
              inputmode="search"
              autocomplete="off"
              spellcheck="false"
              hidden>
            <button id="invitesRefresh" class="btn-text invites-refresh" style="font-size:10px;padding:2px 6px;">刷新</button>
          </div>
        </div>
        <div class="invites-body" id="invitesBody">
          <div class="invites-loading">加载中...</div>
        </div>
      </div>
    </div>

    <div class="corner-tools">
      <!-- 版本号显示（右下角） -->
      <button id="versionBadge" class="version-badge" type="button" aria-label="当前版本">v0.0.0</button>

      <!-- 站名显示（主题按钮左侧） -->
      <span id="currentSiteName" class="site-name">Linux DO</span>

      <!-- 使用教程入口（主题按钮左侧） -->
      <button id="openGuidePanel" class="guide-switcher theme-open" aria-haspopup="dialog" aria-controls="guidePanel" aria-label="查看使用教程">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M4 5.5c0-1.4 1.1-2.5 2.5-2.5H18c1.1 0 2 .9 2 2v13.5c0 .8-.7 1.5-1.5 1.5H7c-1.7 0-3 1.3-3 3V5.5Z" stroke="currentColor" stroke-width="1.5" fill="none"/>
          <path d="M7 4h11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
          <path d="M7 8h9M7 11.5h9M7 15h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
      </button>

      <!-- 主题切换入口（固定底部） -->
      <button id="openThemePanel" class="theme-switcher theme-open" aria-haspopup="dialog" aria-controls="themePanel" aria-label="选择主题">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <circle cx="12" cy="12" r="8.5" stroke="currentColor" stroke-width="1.5" fill="none" />
          <circle cx="9" cy="10" r="1.4" fill="currentColor" />
          <circle cx="14.5" cy="9" r="1.2" fill="currentColor" />
          <circle cx="16" cy="13" r="1.3" fill="currentColor" />
          <circle cx="11" cy="15.5" r="1.2" fill="currentColor" />
          <path d="M8 12.5c-.5 1.8.8 3.5 2.7 3.5h2.8c1 0 1.7-.9 1.4-1.9l-.4-1.6" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    </div>
  </div>

  <!-- 主题弹窗 -->
  <div id="themePanel" class="theme-modal" role="dialog" aria-modal="true" aria-labelledby="themePanelTitle" hidden>
    <div class="theme-modal__backdrop"></div>
    <div class="theme-modal__dialog">
      <div class="theme-modal__header">
        <div>
          <h2 id="themePanelTitle">选择主题</h2>
        </div>
        <button class="theme-modal__close" id="closeThemePanel" aria-label="关闭主题面板">✕</button>
      </div>

      <div class="theme-section">
        <div class="theme-grid">
          <button class="theme-card" data-theme-id="system" aria-label="跟随系统">
            <span class="theme-dot theme-dot--system"></span>
          </button>
          <button class="theme-card" data-theme-id="healing" aria-label="治愈">
            <span class="theme-dot theme-dot--healing"></span>
          </button>
          <button class="theme-card" data-theme-id="newyear" aria-label="新年">
            <span class="theme-dot theme-dot--newyear"></span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 使用教程弹窗 -->
  <div id="guidePanel" class="theme-modal guide-modal" role="dialog" aria-modal="true" aria-labelledby="guidePanelTitle" hidden>
    <div class="theme-modal__backdrop"></div>
    <div class="theme-modal__dialog">
      <div class="theme-modal__header">
        <div>
          <h2 id="guidePanelTitle">使用教程</h2>
        </div>
        <button class="theme-modal__close" id="closeGuidePanel" aria-label="关闭使用教程">✕</button>
      </div>
      <div class="guide-content">
        <div class="guide-section">
          <div class="guide-section-title">基础使用</div>
          <ol class="guide-list">
            <li>确认已登录 Linux DO 或 IDCFlare</li>
            <li>设置浏览参数后点击「开始浏览」</li>
            <li>每日自动任务固定每天执行 10 次（浏览 10 个话题），开始时间固定为 01:00（仅 Linux DO）</li>
            <li>切换到 tab 后，默认等待 10 分钟无操作才开始，可在高级浏览设置中开启「切换直接执行」免等待</li>
            <li>任何时候点击「停止」即可终止</li>
            <li>插件里的「帖子」对应论坛里的「话题」（文章）</li>
            <li>插件里的「评论」对应论坛里的「帖子」</li>
          </ol>
        </div>
        <div class="guide-section">
          <div class="guide-section-title">版本号与开发者模式</div>
          <ol class="guide-list">
            <li>右下角显示当前版本号</li>
            <li>短时间连续点击版本号 3 次可开启开发者模式，显示「运行日志」与「内部日志」</li>
            <li>开发者模式仅在当前浏览器会话有效，关闭浏览器后失效</li>
          </ol>
        </div>
      </div>
    </div>
  </div>

  <script src="statsModules.js"></script>
  <script src="popup.js"></script>
</body>
</html>