xhs_crawler_claude/templates/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小红书数据采集器</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="container">
        <!-- 顶部标题栏 -->
        <header class="header">
            <h1>小红书数据采集器</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>
        </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>

    <script src="/static/app.js"></script>
</body>
</html>