SmartChat/templates/qa.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/css/qa.css">
</head>
<body>
<div class="container">
    <div class="nav">
        <a href="./" class="nav-btn">聊天记录</a>
        <a href="./qa" class="nav-btn active">问答管理</a>
        <a href="./daily_report" class="nav-btn">日报生成</a>
        <a href="./weekly_report" class="nav-btn">周报生成</a>
    </div>
    <div class="header">
        <h1>问答管理系统</h1>
        <p>管理问题和答案的关联关系</p>

    </div>
    <div class="controls">
        <div class="filter-section">
            <div class="filter-header">
                <h3>搜索条件</h3>
                <div class="filter-actions">
                    <button class="btn btn-primary" onclick="advancedSearch()">搜索</button>
                    <button class="btn btn-secondary" onclick="searchMessages()">快速搜索</button>
                    <button class="btn btn-outline" onclick="clearFilters()">清空</button>
                </div>
            </div>
            
            <div class="filter-grid">
                <div class="filter-item search-container">
                    <label for="searchInput">关键词搜索</label>
                    <div class="search-input-wrapper">
                        <input type="text" id="searchInput" placeholder="搜索群组ID或问题内容..." 
                               oninput="showSearchSuggestions()" onfocus="showSearchSuggestions()">
                        <div id="searchSuggestions" class="search-suggestions"></div>
                    </div>
                    <div id="searchHistory" class="search-history"></div>
                </div>
                
                <div class="filter-item">
                    <label for="groupFilter">群组ID</label>
                    <select id="groupFilter">
                        <option value="">全部群组</option>
                    </select>
                </div>
                
                <div class="filter-item">
                    <label for="startDateFilter">开始时间</label>
                    <input type="date" id="startDateFilter">
                </div>
                
                <div class="filter-item">
                    <label for="endDateFilter">结束时间</label>
                    <input type="date" id="endDateFilter">
                </div>
            </div>
        </div>
        
        <div class="action-section">
            <div class="stats-section">
                <div id="statsInfo" class="stats-info">正在加载...</div>
            </div>
            <div class="create-section">
                <button class="btn btn-success" onclick="openCreateModal()">创建新QA</button>
            </div>
        </div>
    </div>

    <!-- 批量操作区域 -->
    <div id="batchActions" class="batch-actions" style="display: none;">
        <div class="batch-header">
            <div class="batch-select">
                <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                <label for="selectAll">全选</label>
            </div>
            <div class="batch-info" id="batchInfo">已选择 0 条记录</div>
            <div class="batch-buttons">
                <button class="btn btn-danger" id="batchDeleteBtn" onclick="batchDeleteQA()" disabled>批量删除</button>
            </div>
        </div>
    </div>
    
    <div class="qa-list" id="qaList">
        <div class="loading">加载中...</div>
    </div>
</div>

<!-- 创建/编辑QA模态框 -->
<div id="qaModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="modalTitle">创建QA记录</h2>
            <span class="close" onclick="closeModal()">&times;</span>
        </div>

        <form id="qaForm">
            <div class="form-group">
                <label for="groupId">群组ID:</label>
                <select id="groupId">
                    <option value="">选择群组（可选）</option>
                </select>
            </div>

            <div class="message-selector">
                <h4>选择问题消息</h4>
                <div class="search-box">
                    <input type="text" id="questionSearch" placeholder="搜索问题消息..."
                           oninput="searchQuestionMessages()">
                </div>
                <div class="search-results" id="questionResults"></div>
                <div class="selected-messages">
                    <h5>已选择的问题消息:</h5>
                    <div id="selectedQuestions"></div>
                </div>
            </div>

            <div class="message-selector">
                <h4>选择答案消息</h4>
                <div class="search-box">
                    <input type="text" id="answerSearch" placeholder="搜索答案消息..." oninput="searchAnswerMessages()">
                </div>
                <div class="search-results" id="answerResults"></div>
                <div class="selected-messages">
                    <h5>已选择的答案消息:</h5>
                    <div id="selectedAnswers"></div>
                </div>
            </div>

            <div style="text-align: right; margin-top: 20px;">
                <button type="button" class="btn btn-primary" onclick="saveQA()">保存</button>
                <button type="button" class="btn" onclick="closeModal()" style="margin-left: 10px;">取消</button>
            </div>
        </form>
    </div>
</div>

<!-- 预览模态框 -->
<div id="previewModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>QA预览</h2>
            <span class="close" onclick="closePreviewModal()">&times;</span>
        </div>

        <div id="previewContent"></div>
    </div>
</div>

<script src="/static/js/qa.js"></script>

</body>
</html>