xinyouhe/xhs_crawler_claude
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7c0b8c4c095c287681b9f0bac8d52dfa06027571
xhs_crawler_claude/templates/index.html
T

293 lines
13 KiB
HTML
Raw Normal View History

first commit
2026-01-12 12:04:05 +08:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ts
2026-01-12 14:59:27 +08:00
<title>XHS数据采集器</title>
first commit
2026-01-12 12:04:05 +08:00
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div class="container">
<!-- 顶部标题栏 -->
<header class="header">
ts
2026-01-12 14:59:27 +08:00
<h1>XHS数据采集器</h1>
first commit
2026-01-12 12:04:05 +08:00
<button class="theme-toggle" id="themeToggle" title="切换主题">
<span id="themeIcon">🌙</span>
</button>
</header>
<!-- 控制面板 -->
<section class="control-panel">
ts
2026-01-12 14:59:27 +08:00
<!-- 第一行：主要控制按钮 -->
first commit
2026-01-12 12:04:05 +08:00
<div class="control-group">
<button class="btn btn-primary" id="startBtn">
<span class="btn-icon">▶</span> 启动采集
</button>
<button class="btn btn-danger" id="stopBtn" disabled>
<span class="btn-icon">⏹</span> 停止
</button>
<button class="btn btn-secondary" id="clearLogsBtn">
<span class="btn-icon">🗑</span> 清空日志
</button>
<button class="btn btn-secondary" id="exportDataBtn">
<span class="btn-icon">📥</span> 导出数据
</button>
</div>
ts
2026-01-12 14:59:27 +08:00
<!-- 第二行：模式和线程控制 -->
first commit
2026-01-12 12:04:05 +08:00
<div class="control-group">
<label class="radio-group">
<span class="label-text">模式:</span>
<label>
<input type="radio" name="mode" value="single" checked>
<span>单线程</span>
</label>
<label>
<input type="radio" name="mode" value="multi">
<span>多线程</span>
</label>
</label>
<div class="thread-control" id="threadControl" style="display: none;">
<label for="threadCount">线程数:</label>
<select id="threadCount" class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
</select>
</div>
</div>
ts
2026-01-12 14:59:27 +08:00
<!-- 第三行：账号管理 -->
<div class="control-group">
<div class="account-section">
<span class="label-text">账号管理:</span>
<div class="account-controls">
<button class="btn btn-secondary btn-small" id="addAccountBtn">
<span class="btn-icon">➕</span> 添加账号
</button>
<button class="btn btn-secondary btn-small" id="refreshAccountsBtn">
<span class="btn-icon">🔄</span> 刷新
</button>
<span class="account-status" id="accountStatus">
<span class="status-indicator" id="loginStatusIndicator"></span>
<span id="loginStatusText">未登录</span>
</span>
</div>
</div>
</div>
first commit
2026-01-12 12:04:05 +08:00
</section>
<!-- 进度概览 -->
<section class="progress-section">
<div class="progress-card">
<h3>整体进度</h3>
<div class="progress-bar-container">
<div class="progress-bar" id="progressBar">
<span class="progress-text" id="progressText">0%</span>
</div>
</div>
<div class="progress-stats">
<div class="stat-item">
<span class="stat-label">总数</span>
<span class="stat-value" id="totalUsers">0</span>
</div>
<div class="stat-item">
<span class="stat-label">已完成</span>
<span class="stat-value stat-success" id="completedUsers">0</span>
</div>
<div class="stat-item">
<span class="stat-label">失败</span>
<span class="stat-value stat-error" id="failedUsers">0</span>
</div>
<div class="stat-item" id="activeThreadsStat" style="display: none;">
<span class="stat-label">活跃线程</span>
<span class="stat-value stat-info" id="activeThreads">0</span>
</div>
</div>
</div>
</section>
<!-- 主内容区 -->
<div class="main-content">
<!-- 左侧：用户列表 -->
<section class="panel user-list-panel">
<div class="panel-header">
<h2>用户列表</h2>
<span class="badge" id="userCount">0</span>
</div>
<div class="panel-body">
<div class="user-list" id="userList">
<!-- 用户项将动态添加 -->
<div class="empty-state">
<p>暂无用户数据</p>
<p class="hint">请在 data/users.txt 中添加用户 ID</p>
</div>
</div>
</div>
</section>
<!-- 中间：线程监控（多线程模式） -->
<section class="panel thread-monitor-panel" id="threadMonitorPanel" style="display: none;">
<div class="panel-header">
<h2>线程监控</h2>
</div>
<div class="panel-body">
<div class="thread-list" id="threadList">
<!-- 线程状态将动态添加 -->
</div>
</div>
</section>
<!-- 右侧：日志面板 -->
<section class="panel log-panel">
<div class="panel-header">
<h2>日志</h2>
<div class="log-controls">
<select id="logFilter" class="select-small">
<option value="all">ALL</option>
<option value="INFO">INFO</option>
<option value="SUCCESS">SUCCESS</option>
<option value="WARNING">WARNING</option>
<option value="ERROR">ERROR</option>
<option value="DEBUG">DEBUG</option>
</select>
<input type="text" id="logSearch" placeholder="搜索日志..." class="input-small">
</div>
</div>
<div class="panel-body">
<div class="log-container" id="logContainer">
<!-- 日志将动态添加 -->
</div>
</div>
</section>
</div>
<!-- 错误截图区 -->
<section class="screenshot-panel" id="screenshotPanel" style="display: none;">
<div class="panel-header">
<h2>错误截图</h2>
<button class="btn-small btn-secondary" id="closeScreenshot">关闭</button>
</div>
<div class="panel-body">
<img id="screenshotImage" src="" alt="错误截图">
</div>
</section>
ts
2026-01-12 14:59:27 +08:00
<!-- 账号管理模态框 -->
<div class="modal" id="accountModal">
<div class="modal-content">
<div class="modal-header">
<h3>账号管理</h3>
<button class="modal-close" id="closeAccountModal">&times;</button>
</div>
<div class="modal-body">
<!-- 登录状态 -->
<div class="login-status-section">
<h4>登录状态</h4>
<div class="login-info" id="loginInfo">
<div class="login-status-item">
<span class="status-label">状态:</span>
<span class="status-value" id="modalLoginStatus">未登录</span>
</div>
<div class="login-status-item">
<span class="status-label">登录时间:</span>
<span class="status-value" id="loginTime">-</span>
</div>
</div>
<div class="login-actions">
ts
2026-01-12 15:49:09 +08:00
<button class="btn btn-primary" id="loginBtn" title="模拟登录，不是真实扫码">
<span class="btn-icon">🔐</span> 模拟登录
ts
2026-01-12 14:59:27 +08:00
</button>
<button class="btn btn-danger" id="logoutBtn">
<span class="btn-icon">🚪</span> 退出登录
</button>
</div>
</div>
<!-- 用户管理 -->
<div class="users-management-section">
<h4>用户列表管理</h4>
<div class="user-input-group">
<input type="text" id="newUserIdInput" placeholder="输入用户 ID" class="input-medium">
<button class="btn btn-primary btn-small" id="addUserIdBtn">
<span class="btn-icon">➕</span> 添加
</button>
</div>
<div class="user-tips">
<p class="hint">• 用户 ID 格式：5ef74296000000000100003a</p>
<p class="hint">• 每行一个用户 ID</p>
<p class="hint">• 支持从 data/users.txt 批量导入</p>
</div>
<div class="users-list-container">
<div class="users-list-header">
<span>已添加的用户 (<span id="modalUserCount">0</span>)</span>
<button class="btn btn-secondary btn-small" id="clearAllUsersBtn">
<span class="btn-icon">🗑</span> 清空全部
</button>
</div>
<div class="users-list" id="modalUserList">
<!-- 用户列表将在这里显示 -->
</div>
</div>
</div>
<!-- 批量导入 -->
<div class="batch-import-section">
<h4>批量导入</h4>
<div class="batch-import-controls">
<button class="btn btn-secondary" id="importFromTxtBtn">
<span class="btn-icon">📁</span> 从 users.txt 导入
</button>
<button class="btn btn-secondary" id="exportToTxtBtn">
<span class="btn-icon">💾</span> 导出到 users.txt
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 登录二维码模态框 -->
<div class="modal" id="loginQrModal">
<div class="modal-content">
<div class="modal-header">
<h3>扫码登录小红书</h3>
<button class="modal-close" id="closeLoginQrModal">&times;</button>
</div>
<div class="modal-body">
<div class="qr-login-container">
<div class="qr-code-section">
<div id="qrcodeContainer">
<!-- 二维码将在这里显示 -->
</div>
<p class="qr-tips">请使用小红书App扫描二维码登录</p>
</div>
<div class="login-status-section">
<h4>登录状态</h4>
<div class="login-status-item">
<span class="status-label">状态:</span>
<span class="status-value" id="qrLoginStatus">等待扫码...</span>
</div>
<div class="login-status-item">
<span class="status-label">二维码过期时间:</span>
<span class="status-value" id="qrExpireTime">120秒</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 浮动提示 -->
<div class="toast" id="toast"></div>
first commit
2026-01-12 12:04:05 +08:00
<script src="/static/app.js"></script>
</body>
</html>
Reference in New Issue Copy Permalink