293 lines
13 KiB
HTML
293 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>XHS数据采集器</title>
|
||
<link rel="stylesheet" href="/static/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 顶部标题栏 -->
|
||
<header class="header">
|
||
<h1>XHS数据采集器</h1>
|
||
<button class="theme-toggle" id="themeToggle" title="切换主题">
|
||
<span id="themeIcon">🌙</span>
|
||
</button>
|
||
</header>
|
||
|
||
<!-- 控制面板 -->
|
||
<section class="control-panel">
|
||
<!-- 第一行：主要控制按钮 -->
|
||
<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>
|
||
|
||
<!-- 第二行：模式和线程控制 -->
|
||
<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>
|
||
|
||
<!-- 第三行：账号管理 -->
|
||
<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>
|
||
</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>
|
||
|
||
<!-- 账号管理模态框 -->
|
||
<div class="modal" id="accountModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>账号管理</h3>
|
||
<button class="modal-close" id="closeAccountModal">×</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">
|
||
<button class="btn btn-primary" id="loginBtn">
|
||
<span class="btn-icon">🔐</span> 登录小红书
|
||
</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">×</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>
|
||
|
||
<script src="/static/app.js"></script>
|
||
</body>
|
||
</html>
|