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>Screen2Feishu - AI任务管理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        body {
            background: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background: #2c3e50;
            color: white;
            padding: 20px 0;
            margin-bottom: 30px;
        }

        header h1 {
            font-size: 24px;
            font-weight: 600;
            text-align: center;
        }

        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
            }
        }

        .card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .card h2 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 8px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #555;
        }

        input[type="text"],
        input[type="datetime-local"],
        select,
        input[type="file"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        input[type="text"]:focus,
        input[type="datetime-local"]:focus,
        select:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }

        .radio-group {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .radio-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .radio-item input[type="radio"] {
            width: auto;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s;
        }

        .btn-primary {
            background: #3498db;
            color: white;
        }

        .btn-primary:hover {
            background: #2980b9;
        }

        .btn-success {
            background: #27ae60;
            color: white;
        }

        .btn-success:hover {
            background: #219653;
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .btn-group {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .status-section {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 4px;
            font-size: 14px;
        }

        .status-section h3 {
            font-size: 16px;
            margin-bottom: 10px;
            color: #2c3e50;
        }

        .status-item {
            margin-bottom: 8px;
            padding: 8px;
            background: white;
            border-radius: 4px;
            border-left: 3px solid #3498db;
        }

        .status-item.success {
            border-left-color: #27ae60;
            background: #e8f5e9;
        }

        .status-item.warning {
            border-left-color: #f39c12;
            background: #fff3e0;
        }

        .status-item.error {
            border-left-color: #e74c3c;
            background: #ffebee;
        }

        .ai-result {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 4px;
            margin-top: 15px;
            font-size: 14px;
        }

        .ai-result h4 {
            margin-bottom: 10px;
            color: #1976d2;
        }

        .ai-result p {
            margin-bottom: 5px;
        }

        .ai-result .highlight {
            font-weight: 600;
            color: #d32f2f;
        }

        .config-info {
            background: #f3e5f5;
            padding: 15px;
            border-radius: 4px;
            margin-top: 15px;
            font-size: 13px;
        }

        .config-info h4 {
            margin-bottom: 10px;
            color: #7b1fa2;
        }

        .config-item {
            margin-bottom: 5px;
        }

        .config-item span {
            font-weight: 500;
        }

        .loading {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 8px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            background: #2c3e50;
            color: white;
            border-radius: 4px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            z-index: 1000;
            max-width: 400px;
            animation: slideIn 0.3s ease-out;
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .notification.success {
            background: #27ae60;
        }

        .notification.error {
            background: #e74c3c;
        }

        .notification.warning {
            background: #f39c12;
        }

        .file-upload-area {
            border: 2px dashed #ddd;
            border-radius: 4px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: 15px;
        }

        .file-upload-area:hover {
            border-color: #3498db;
            background: #f0f8ff;
        }

        .file-upload-area.dragover {
            border-color: #3498db;
            background: #e3f2fd;
        }

        .file-upload-area p {
            color: #666;
            margin: 10px 0;
        }

        .file-upload-area i {
            font-size: 24px;
            color: #3498db;
        }

        .hidden {
            display: none;
        }

        .stats {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .stat-item {
            background: white;
            padding: 15px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            flex: 1;
            min-width: 150px;
        }

        .stat-item h3 {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }

        .stat-item p {
            font-size: 24px;
            font-weight: 600;
            color: #2c3e50;
        }

        .progress-bar {
            width: 100%;
            height: 4px;
            background: #e0e0e0;
            border-radius: 2px;
            overflow: hidden;
            margin-top: 10px;
        }

        .progress-fill {
            height: 100%;
            background: #3498db;
            width: 0%;
            transition: width 0.3s;
        }

        .section-divider {
            height: 1px;
            background: #e0e0e0;
            margin: 20px 0;
        }

        .info-text {
            font-size: 13px;
            color: #666;
            margin-top: 10px;
            line-height: 1.5;
        }

        .badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            margin-left: 5px;
        }

        .badge.success {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .badge.warning {
            background: #fff3e0;
            color: #ef6c00;
        }

        .badge.error {
            background: #ffebee;
            color: #c62828;
        }

        .badge.info {
            background: #e3f2fd;
            color: #1565c0;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1>Screen2Feishu - AI任务管理</h1>
        </div>
    </header>

    <div class="container">
        <!-- 统计信息 -->
        <div class="stats" id="statsSection">
            <div class="stat-item">
                <h3>用户缓存</h3>
                <p id="userCount">-</p>
            </div>
            <div class="stat-item">
                <h3>最近联系人</h3>
                <p id="recentCount">-</p>
            </div>
            <div class="stat-item">
                <h3>缓存状态</h3>
                <p id="cacheStatus">-</p>
            </div>
        </div>

        <div class="main-content">
            <!-- 左侧：图片上传 -->
            <div class="card">
                <h2>📸 图片上传分析</h2>
                
                <div class="file-upload-area" id="uploadArea">
                    <i>📁</i>
                    <p>点击选择图片或拖拽到此处</p>
                    <p style="font-size: 12px; color: #999;">支持 JPG, PNG, GIF 等格式</p>
                    <input type="file" id="imageInput" accept="image/*" class="hidden">
                </div>

                <div class="form-group">
                    <label>文件名:</label>
                    <input type="text" id="fileName" readonly placeholder="未选择文件">
                </div>

                <div class="btn-group">
                    <button class="btn btn-success" id="uploadBtn" disabled>
                        <span id="uploadBtnText">上传并分析</span>
                    </button>
                    <button class="btn btn-primary" id="clearBtn">清空</button>
                </div>

                <div class="status-section" id="uploadStatus" style="display: none;">
                    <h3>上传状态</h3>
                    <div id="uploadStatusContent"></div>
                </div>

                <div class="ai-result" id="aiResult" style="display: none;">
                    <h4>AI分析结果</h4>
                    <div id="aiResultContent"></div>
                </div>
            </div>

            <!-- 右侧：配置信息和状态 -->
            <div class="card">
                <h2>⚙️ 系统配置</h2>
                
                <div class="config-info" id="configInfo">
                    <h4>当前配置</h4>
                    <div class="config-item">内存处理: <span id="configMemory">-</span></div>
                    <div class="config-item">用户匹配: <span id="configUserMatch">-</span></div>
                    <div class="config-item">随机匹配: <span id="configRandom">-</span></div>
                    <div class="config-item">缓存功能: <span id="configCache">-</span></div>
                    <div class="config-item">文件处理: <span id="configPostProcess">-</span></div>
                </div>

                <div class="section-divider"></div>

                <h2>📊 操作说明</h2>
                <div class="info-text">
                    <p><strong>1. 图片上传:</strong> 选择截图文件，系统会自动分析图片内容</p>
                    <p><strong>2. AI分析:</strong> 识别任务描述、优先级、发起人等信息</p>
                    <p><strong>3. 用户匹配:</strong> 自动匹配飞书用户，处理重名情况</p>
                    <p><strong>4. 写入飞书:</strong> 将分析结果写入飞书多维表格</p>
                    <p><strong>5. 结果反馈:</strong> 显示AI分析结果和操作状态</p>
                </div>

                <div class="section-divider"></div>

                <h2>📝 状态日志</h2>
                <div class="status-section" id="logSection">
                    <div id="logContent"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let currentFile = null;
        let isUploading = false;

        // DOM元素
        const uploadArea = document.getElementById('uploadArea');
        const imageInput = document.getElementById('imageInput');
        const fileName = document.getElementById('fileName');
        const uploadBtn = document.getElementById('uploadBtn');
        const uploadBtnText = document.getElementById('uploadBtnText');
        const clearBtn = document.getElementById('clearBtn');
        const uploadStatus = document.getElementById('uploadStatus');
        const uploadStatusContent = document.getElementById('uploadStatusContent');
        const aiResult = document.getElementById('aiResult');
        const aiResultContent = document.getElementById('aiResultContent');
        const logContent = document.getElementById('logContent');

        // 统计元素
        const userCount = document.getElementById('userCount');
        const recentCount = document.getElementById('recentCount');
        const cacheStatus = document.getElementById('cacheStatus');

        // 配置元素
        const configMemory = document.getElementById('configMemory');
        const configUserMatch = document.getElementById('configUserMatch');
        const configRandom = document.getElementById('configRandom');
        const configCache = document.getElementById('configCache');
        const configPostProcess = document.getElementById('configPostProcess');

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            loadConfig();
            loadUserCache();
            setupEventListeners();
            addLog('系统已启动，等待操作...');
        });

        // 设置事件监听器
        function setupEventListeners() {
            // 文件上传区域点击
            uploadArea.addEventListener('click', () => {
                if (!isUploading) {
                    imageInput.click();
                }
            });

            // 文件选择变化
            imageInput.addEventListener('change', (e) => {
                if (e.target.files.length > 0) {
                    handleFileSelect(e.target.files[0]);
                }
            });

            // 拖拽上传
            uploadArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                uploadArea.classList.add('dragover');
            });

            uploadArea.addEventListener('dragleave', () => {
                uploadArea.classList.remove('dragover');
            });

            uploadArea.addEventListener('drop', (e) => {
                e.preventDefault();
                uploadArea.classList.remove('dragover');
                
                if (e.dataTransfer.files.length > 0) {
                    const file = e.dataTransfer.files[0];
                    if (file.type.startsWith('image/')) {
                        handleFileSelect(file);
                    } else {
                        showNotification('请选择图片文件', 'error');
                    }
                }
            });

            // 上传按钮
            uploadBtn.addEventListener('click', uploadImage);

            // 清空按钮
            clearBtn.addEventListener('click', clearForm);
        }

        // 处理文件选择
        function handleFileSelect(file) {
            currentFile = file;
            fileName.value = file.name;
            uploadBtn.disabled = false;
            addLog(`已选择文件: ${file.name} (${formatFileSize(file.size)})`);
            showNotification('文件已选择，点击上传分析', 'success');
        }

        // 上传图片并分析
        async function uploadImage() {
            if (!currentFile || isUploading) {
                return;
            }

            isUploading = true;
            uploadBtn.disabled = true;
            uploadBtnText.innerHTML = '<span class="loading"></span>分析中...';

            // 显示上传状态
            uploadStatus.style.display = 'block';
            uploadStatusContent.innerHTML = '<div class="status-item">正在上传图片...</div>';

            try {
                // 创建FormData
                const formData = new FormData();
                formData.append('image', currentFile);

                // 调用后端API
                const response = await fetch('/api/upload', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();

                if (result.success) {
                    // 显示成功状态
                    uploadStatusContent.innerHTML = '<div class="status-item success">上传成功，正在分析...</div>';
                    addLog(`图片上传成功: ${currentFile.name}`);

                    // 显示AI分析结果
                    if (result.ai_result) {
                        displayAIResult(result.ai_result);
                        addLog('AI分析完成，结果已显示');
                    }

                    // 显示成功消息
                    showNotification(result.message, 'success');
                    addLog(`任务已成功添加到飞书`);

                    // 清空文件选择
                    clearForm();
                } else {
                    // 显示错误状态
                    uploadStatusContent.innerHTML = `<div class="status-item error">分析失败: ${result.error}</div>`;
                    addLog(`分析失败: ${result.error}`, 'error');
                    showNotification(`分析失败: ${result.error}`, 'error');
                }
            } catch (error) {
                // 显示错误状态
                uploadStatusContent.innerHTML = `<div class="status-item error">网络错误: ${error.message}</div>`;
                addLog(`网络错误: ${error.message}`, 'error');
                showNotification(`网络错误: ${error.message}`, 'error');
            } finally {
                isUploading = false;
                uploadBtn.disabled = false;
                uploadBtnText.textContent = '上传并分析';
            }
        }

        // 显示AI分析结果
        function displayAIResult(aiResult) {
            let html = '';

            // 任务描述
            if (aiResult.task_description) {
                html += `<p><strong>任务描述:</strong> ${aiResult.task_description}</p>`;
            }

            // 优先级
            if (aiResult.priority) {
                const priorityClass = getPriorityClass(aiResult.priority);
                html += `<p><strong>优先级:</strong> <span class="badge ${priorityClass}">${aiResult.priority}</span></p>`;
            }

            // 状态
            if (aiResult.status) {
                html += `<p><strong>状态:</strong> ${aiResult.status}</p>`;
            }

            // 发起人
            if (aiResult.initiator) {
                html += `<p><strong>发起人:</strong> ${aiResult.initiator}</p>`;
            }

            // 部门
            if (aiResult.department) {
                html += `<p><strong>部门:</strong> ${aiResult.department}</p>`;
            }

            // 任务发起方（匹配结果）
            if (aiResult["任务发起方"]) {
                html += `<p><strong>匹配用户:</strong> ${aiResult["任务发起方"].id || '未匹配'}</p>`;
            }

            // 任务发起方.部门（匹配结果）
            if (aiResult["任务发起方.部门"]) {
                html += `<p><strong>匹配部门:</strong> ${aiResult["任务发起方.部门"]}</p>`;
            }

            // 日期
            if (aiResult.start_date) {
                html += `<p><strong>开始日期:</strong> ${aiResult.start_date}</p>`;
            }
            if (aiResult.due_date) {
                html += `<p><strong>截止日期:</strong> ${aiResult.due_date}</p>`;
            }

            aiResultContent.innerHTML = html;
            aiResult.style.display = 'block';
        }

        // 获取优先级样式类
        function getPriorityClass(priority) {
            const priorityMap = {
                '紧急': 'error',
                '较紧急': 'warning',
                '一般': 'info',
                '普通': 'success'
            };
            return priorityMap[priority] || 'info';
        }

        // 清空表单
        function clearForm() {
            currentFile = null;
            imageInput.value = '';
            fileName.value = '';
            uploadBtn.disabled = true;
            uploadStatus.style.display = 'none';
            aiResult.style.display = 'none';
            addLog('表单已清空');
        }

        // 加载配置
        async function loadConfig() {
            try {
                const response = await fetch('/api/config');
                const result = await response.json();

                if (result.success) {
                    const config = result.config;
                    configMemory.textContent = config.memory_processing ? '启用' : '禁用';
                    configUserMatch.textContent = config.user_matching_enabled ? '启用' : '禁用';
                    configRandom.textContent = config.fallback_to_random ? '启用' : '禁用';
                    configCache.textContent = config.cache_enabled ? '启用' : '禁用';
                    configPostProcess.textContent = config.post_process;
                    
                    addLog('配置加载成功');
                } else {
                    addLog(`加载配置失败: ${result.error}`, 'error');
                }
            } catch (error) {
                addLog(`加载配置失败: ${error.message}`, 'error');
            }
        }

        // 加载用户缓存信息
        async function loadUserCache() {
            try {
                const response = await fetch('/api/user_cache');
                const result = await response.json();

                if (result.success) {
                    const stats = result.stats;
                    userCount.textContent = stats.user_count || 0;
                    recentCount.textContent = stats.recent_contact_count || 0;
                    cacheStatus.textContent = stats.is_expired ? '已过期' : '有效';
                    
                    if (stats.cache_age_hours > 0) {
                        cacheStatus.textContent += ` (${stats.cache_age_hours.toFixed(1)}小时)`;
                    }
                    
                    addLog('用户缓存信息加载成功');
                } else {
                    addLog(`加载用户缓存失败: ${result.error}`, 'error');
                }
            } catch (error) {
                addLog(`加载用户缓存失败: ${error.message}`, 'error');
            }
        }

        // 添加日志
        function addLog(message, type = 'info') {
            const timestamp = new Date().toLocaleTimeString();
            const logEntry = document.createElement('div');
            logEntry.className = `status-item ${type}`;
            logEntry.innerHTML = `<strong>[${timestamp}]</strong> ${message}`;
            
            logContent.insertBefore(logEntry, logContent.firstChild);
            
            // 限制日志数量
            while (logContent.children.length > 20) {
                logContent.removeChild(logContent.lastChild);
            }
        }

        // 显示通知
        function showNotification(message, type = 'info') {
            // 移除现有通知
            const existingNotification = document.querySelector('.notification');
            if (existingNotification) {
                existingNotification.remove();
            }

            // 创建新通知
            const notification = document.createElement('div');
            notification.className = `notification ${type}`;
            notification.textContent = message;
            document.body.appendChild(notification);

            // 3秒后自动移除
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.remove();
                }
            }, 3000);
        }

        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        // 定期更新用户缓存信息
        setInterval(() => {
            loadUserCache();
        }, 30000); // 每30秒更新一次
    </script>
</body>
</html>