ldoSurfer/popup.html at main · SakuraByteCore/ldoSurfer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
<!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>