web/static/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>
            <div class="status-bar">
                <span id="scheduler-status">状态: 加载中...</span>
                <span id="capture-count">拍照次数: 0</span>
                <span id="refresh-info">刷新间隔: 5秒</span>
            </div>
        </header>

        <!-- 控制面板 -->
        <section class="control-panel">
            <div class="panel-section">
                <h3>📹 摄像头控制</h3>
                <div class="control-buttons">
                    <button onclick="startScheduler()" id="start-btn" class="btn-primary">▶ 启动</button>
                    <button onclick="stopScheduler()" id="stop-btn" class="btn-danger">⏹ 停止</button>
                    <button onclick="captureNow()" class="btn-secondary">📸 立即拍照</button>
                </div>
            </div>

            <div class="panel-section">
                <h3>⚙️ 系统设置</h3>
                <button onclick="openSettingsModal()" class="btn-settings">🔧 设置参数</button>
            </div>

            <div class="panel-section">
                <h3>📊 系统统计</h3>
                <div class="stats-grid" id="stats-display">
                    <div class="stat-item">
                        <span class="stat-label">总图片数</span>
                        <span class="stat-value" id="total-images">0</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">已分析</span>
                        <span class="stat-value" id="analyzed-images">0</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">总事件数</span>
                        <span class="stat-value" id="total-events">0</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 图片时间线 -->
            <section class="images-section">
                <h2>📷 图片时间线</h2>
                <div class="filter-bar">
                    <select id="date-filter">
                        <option value="all">全部日期</option>
                    </select>
                    <select id="image-filter">
                        <option value="all">全部</option>
                        <option value="analyzed">已分析</option>
                        <option value="unanalyzed">未分析</option>
                    </select>
                    <button onclick="analyzeUnanalyzed()" class="btn-small">分析未处理</button>
                </div>
                <div class="images-list" id="images-list">
                    <!-- 图片列表将显示序号+分析信息 -->
                </div>
            </section>

            <!-- 事件列表 -->
            <section class="events-section">
                <h2>📋 事件列表</h2>
                <div class="filter-bar">
                    <select id="event-filter">
                        <option value="all">全部类型</option>
                    </select>
                </div>
                <div class="events-list" id="events-list">
                    <!-- 事件卡片 -->
                </div>
            </section>
        </div>

        <!-- 设置模态框 -->
        <div class="modal" id="settings-modal">
            <div class="modal-content settings-modal-content">
                <span class="modal-close" onclick="closeSettingsModal()">×</span>
                <h2>⚙️ 系统设置</h2>
                
                <div class="settings-section">
                    <h4>保存设置</h4>
                    <div class="setting-item">
                        <label>图片保存目录:</label>
                        <input type="text" id="setting-images-dir" placeholder="例如: D:\vision-images">
                        <button onclick="browseImagesDir()" class="btn-small">选择目录</button>
                    </div>
                    <p class="setting-note">每天的图片会自动保存到子文件夹（如 2026-04-16）</p>
                </div>
                
                <div class="settings-section">
                    <h4>拍照设置</h4>
                    <div class="setting-item">
                        <label>拍照间隔 (秒):</label>
                        <input type="number" id="setting-interval" value="60" min="10" max="3600">
                    </div>
                    <div class="setting-item">
                        <label>摄像头索引:</label>
                        <input type="number" id="setting-camera-index" value="0" min="0" max="10">
                    </div>
                    <div class="setting-item">
                        <label>自动分析:</label>
                        <input type="checkbox" id="setting-auto-analyze" checked>
                    </div>
                </div>
                
                <div class="settings-section">
                    <h4>显示设置</h4>
                    <div class="setting-item">
                        <label>显示最近数量:</label>
                        <input type="number" id="setting-display-limit" value="20" min="5" max="100">
                    </div>
                    <div class="setting-item">
                        <label>页面刷新间隔 (秒):</label>
                        <input type="number" id="setting-refresh-interval" value="5" min="1" max="60">
                    </div>
                </div>
                
                <div class="settings-section">
                    <h4>API 设置</h4>
                    <div class="setting-item">
                        <label>Vision API URL:</label>
                        <input type="text" id="setting-api-url" placeholder="API URL">
                    </div>
                    <div class="setting-item">
                        <label>API Key:</label>
                        <input type="password" id="setting-api-key" placeholder="API Key">
                    </div>
                    <div class="setting-item">
                        <label>模型名称:</label>
                        <input type="text" id="setting-model" placeholder="模型名称">
                    </div>
                </div>
                
                <div class="settings-actions">
                    <button onclick="saveSettings()" class="btn-primary">保存设置</button>
                    <button onclick="closeSettingsModal()" class="btn-secondary">取消</button>
                </div>
            </div>
        </div>

        <!-- 图片详情模态框 -->
        <div class="modal" id="image-modal" onclick="closeModalOnBackground(event, 'image-modal')">
            <div class="modal-content" onclick="event.stopPropagation()">
                <span class="modal-close" onclick="closeImageModal()">×</span>
                <img id="modal-image" src="" alt="图片详情">
                <div class="modal-info">
                    <h3 id="modal-title">图片详情</h3>
                    <p id="modal-time">时间: </p>
                    <p id="modal-folder">日期文件夹: </p>
                    <div id="modal-events" class="modal-events">
                    </div>
                    <div class="modal-actions">
                        <button onclick="analyzeCurrentImage()" class="btn-secondary">🔍 分析</button>
                        <button onclick="deleteCurrentImage()" class="btn-danger">🗑 删除</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

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