基于HTML的政策问答

欣然～2025-08-10 6:06

以下是对该 HTML 代码的逐行详细解释，按页面结构和功能模块拆分：

1. 文档声明与基础设置

html

预览

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  • <!DOCTYPE html>：声明文档类型为 HTML5，确保浏览器按 HTML5 标准解析页面。
  • <html lang="zh-CN">：根元素，lang="zh-CN"指定页面主要语言为简体中文，利于 SEO 和无障碍访问。

2. 头部（head）区域

元数据与标题

html

预览

复制代码 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>政策问答系统</title>
  • <meta charset="UTF-8">：指定字符编码为 UTF-8，支持中文等多语言显示。
  • <meta name="viewport"...>：响应式配置，width=device-width使页面宽度适配设备屏幕，initial-scale=1.0禁止初始缩放，确保移动端显示正常。
  • <title>：设置页面标题为 "政策问答系统"，显示在浏览器标签页。
CSS 样式定义

html

预览

复制代码 
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Noto Sans SC", "WenQuanYi Micro Hei", sans-serif;
        }
  • 通配符*清除所有元素默认的margin和padding，box-sizing: border-box确保元素宽高包含边框和内边距，统一字体为中文字体（适配中文显示）。

css

复制代码 
        body {
            background-color: #f0f2f5;
            padding: 15px;
            color: #333;
            line-height: 1.5;
        }
  • 页面背景色设为浅灰（#f0f2f5），全局文字颜色为深灰（#333），行高 1.5 增强可读性，整体内边距 15px。

css

复制代码 
        .container {
            max-width: 900px;
            margin: 0 auto;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            overflow: hidden;
        }
  • 主容器container：最大宽度 900px，居中显示（margin: 0 auto），白色背景，圆角 4px，轻微阴影增强层次感，overflow: hidden避免内容溢出容器。

css

复制代码 
        .title-bar {
            background-color: #1E40AF;
            color: #fff;
            padding: 10px 15px;
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
        }
        
        .title-bar .icon {
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 2px;
            margin-right: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #1E40AF;
        }
  • 标题栏title-bar：深蓝色背景（#1E40AF），白色文字，内边距 10px 15px，使用flex布局使内容垂直居中。
  • 标题前的图标icon：白色方块（20x20px），内部文字 "知"（深蓝色），与标题栏形成对比。

css

复制代码 
        .content {
            padding: 20px;
        }
  • 内容区content：内边距 20px，隔离标题栏与内容。

css

复制代码 
        h2 {
            font-size: 18px;
            color: #1E40AF;
            margin: 25px 0 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
  • 二级标题h2：深蓝色文字，底部边框（浅灰#e0e0e0），flex布局使标题文字与右侧按钮两端对齐，上下外边距控制间距。

css

复制代码 
        .toggle-btn {
            font-size: 14px;
            padding: 3px 8px;
            background-color: #f0f2f5;
            color: #1E40AF;
            border: 1px solid #1E40AF;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .toggle-btn:hover {
            background-color: #e0e5f0;
        }
  • 切换按钮toggle-btn：浅灰背景，深蓝色边框和文字，hover 时背景加深，提示可点击。

css

复制代码 
        .search-box {
            display: flex;
            margin-bottom: 10px;
        }
        
        #question-input {
            flex: 1;
            padding: 9px 12px;
            border: 1px solid #ccc;
            border-radius: 3px 0 0 3px;
            font-size: 14px;
            outline: none;
        }
        
        #question-input:focus {
            border-color: #1E40AF;
            box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.2);
        }
  • 搜索框容器search-box：flex布局使输入框和按钮并排。
  • 输入框#question-input：flex: 1占满剩余宽度，浅灰边框，左侧圆角，聚焦时边框变深蓝色并添加蓝色阴影（增强交互反馈）。

css

复制代码 
        .btn {
            padding: 9px 18px;
            background-color: #1E40AF;
            color: white;
            border: none;
            border-radius: 0 3px 3px 0;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.2s;
        }
        
        .btn:hover {
            background-color: #1E3A8A;
        }
        
        .btn-secondary {
            background-color: #36B37E;
            border-radius: 3px;
            margin-top: 5px;
        }
        
        .btn-secondary:hover {
            background-color: #2D9D6B;
        }
  • 主按钮.btn：深蓝色背景，白色文字，右侧圆角，hover 时背景加深（#1E3A8A），过渡动画 0.2s。
  • 次要按钮.btn-secondary：绿色背景（#36B37E），全圆角，hover 时颜色加深，用于 "查看问答库""添加" 等辅助操作。

css

复制代码 
        .result-area {
            min-height: 120px;
            padding: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 3px;
            margin: 15px 0;
            background-color: #fafafa;
            font-size: 14px;
        }
        
        .result-area .result-header {
            color: #1E40AF;
            font-weight: 500;
            margin-bottom: 12px;
            padding-bottom: 5px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .result-item {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px dashed #e0e0e0;
        }
        
        .result-item:last-child {
            border-bottom: none;
        }
        
        .result-item .question {
            color: #1E40AF;
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .result-item .answer {
            color: #333;
            line-height: 1.6;
        }
        
        .no-results {
            color: #666;
            text-align: center;
            padding: 20px 0;
        }
  • 结果展示区result-area：浅灰背景（#fafafa），最小高度 120px，确保内容少时仍有足够空间。
  • 结果标题result-header：深蓝色文字，底部边框分隔内容。
  • 结果项result-item：问答对容器，虚线分隔，最后一项无虚线。
  • 问题文字question为深蓝色，答案answer为深灰，增强层次。

css

复制代码 
        .knowledge-base {
            margin-top: 10px;
            display: none; /* 默认隐藏政策问答库 */
        }
        
        .knowledge-base.visible {
            display: block;
        }
        
        .qa-list {
            display: grid;
            gap: 10px;
        }
        
        .qa-item {
            padding: 12px 15px;
            background-color: #f8f9fa;
            border-left: 3px solid #1E40AF;
            border-radius: 0 3px 3px 0;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .qa-item:hover {
            background-color: #eef1f5;
        }
        
        .qa-question {
            font-weight: 500;
            margin-bottom: 4px;
            color: #1E40AF;
        }
        
        .qa-answer {
            font-size: 13px;
            color: #555;
        }
  • 问答库knowledge-base：默认隐藏（display: none），添加visible类时显示（display: block）。
  • 问答列表qa-list：grid布局，项间距 10px。
  • 问答项qa-item：左侧蓝色边框（#1E40AF），浅灰背景，hover 时背景加深，光标变为指针（提示可点击）。
  • 问答文字：问题qa-question为深蓝色，答案qa-answer为浅灰小字号。

css

复制代码 
        .add-qa {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px dashed #e0e0e0;
        }
        
        .form-group {
            margin-bottom: 12px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
            color: #555;
        }
        
        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 3px;
            font-size: 14px;
        }
        
        .form-control:focus {
            border-color: #1E40AF;
            outline: none;
        }
        
        textarea.form-control {
            min-height: 80px;
            resize: vertical;
        }
  • 添加问答区add-qa：顶部虚线分隔，与其他区域区分。
  • 表单组form-group：包含标签和输入框，底部间距 12px。
  • 输入框form-control：全宽，浅灰边框，聚焦时变深蓝色，文本框textarea可垂直拉伸（resize: vertical）。

css

复制代码 
        .operation-tips {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
            padding-left: 2px;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 10px 15px;
            background-color: #36B37E;
            color: white;
            border-radius: 3px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }
        
        .notification.show {
            opacity: 1;
        }
    </style>
</head>
  • 操作提示operation-tips：小字号浅灰文字，用于辅助说明。
  • 通知框notification：固定在右上角，绿色背景，默认透明（opacity: 0），添加show类时显示（opacity: 1），pointer-events: none确保不影响下层交互。

3. 主体（body）区域

主容器与标题栏

html

预览

复制代码 
<body>
    <div class="container">
        <div class="title-bar">
            <div class="icon">知</div>
            退役军人公寓政策问答系统
        </div>
  • 主容器container内包含标题栏title-bar，标题栏左侧为 "知" 图标，右侧为系统名称 "退役军人公寓政策问答系统"。
内容区（搜索、结果、问答库）

html

预览

复制代码 
        <div class="content">
            <!-- 搜索区域 -->
            <div>
                <label for="question-input" style="font-weight: 500;">请输入查询内容：</label>
                <div class="search-box">
                    <input type="text" id="question-input" class="form-control" placeholder="例如：退役军人公寓申请条件、租金计算...">
                    <button id="search-btn" class="btn">查询</button>
                </div>
                <div class="operation-tips">提示：支持关键词搜索，可查看所有相关结果</div>
            </div>
  • 搜索区域：包含输入框标签、搜索框（输入框 + 查询按钮）、操作提示。输入框id="question-input"用于用户输入查询，按钮id="search-btn"触发搜索。

html

预览

复制代码 
            <!-- 结果展示区域 -->
            <div class="result-area">
                <div class="result-header">搜索结果将显示在这里</div>
                <div class="initial-message">请输入问题并点击查询按钮，或查看下方政策问答库</div>
            </div>
  • 结果展示区result-area：初始显示提示文字，搜索后动态更新为匹配结果。

html

预览

复制代码 
            <!-- 知识库区域 - 默认隐藏 -->
            <div class="knowledge-base">
                <h2>
                    政策问答库
                    <button class="toggle-btn" id="toggle-kb">隐藏</button>
                </h2>
                
                <div class="qa-list" id="qa-list">
                    <!-- 内容将通过JavaScript从"数据库"加载 -->
                </div>
            </div>
  • 问答库knowledge-base：默认隐藏，包含标题和切换按钮（id="toggle-kb"），qa-list用于动态加载问答内容。

html

预览

复制代码 
            <!-- 显示/隐藏知识库的按钮 -->
            <button id="show-kb-btn" class="btn btn-secondary" style="margin-top: 10px;">
                查看政策问答库
            </button>
  • 按钮id="show-kb-btn"：点击显示问答库。

html

预览

复制代码 
            <!-- 添加新问答 -->
            <div class="add-qa">
                <h2>添加政策问答</h2>
                <div class="form-group">
                    <label for="new-question">问题：</label>
                    <input type="text" id="new-question" class="form-control" placeholder="请输入政策问题">
                </div>
                <div class="form-group">
                    <label for="new-answer">答案：</label>
                    <textarea id="new-answer" class="form-control" placeholder="请输入问题答案"></textarea>
                </div>
                <button id="add-btn" class="btn btn-secondary">添加到知识库</button>
            </div>
        </div>
    </div>
  • 添加问答区：包含问题输入框（id="new-question"）、答案文本框（id="new-answer"）、添加按钮（id="add-btn"），用于用户新增问答内容。

html

预览

复制代码 
    <!-- 通知提示 -->
    <div class="notification" id="notification"></div>
  • 通知框id="notification"：用于显示操作结果（如 "添加成功"）。

4. JavaScript 脚本

html

预览

复制代码 
    <script>
        // 初始化数据 - 从本地存储加载，若无则使用默认数据
        function initData() {
            const savedData = localStorage.getItem('veteranQaData');
            if (savedData) {
                return JSON.parse(savedData);
            } else {
                // 默认数据
                const defaultData = [
                    {
                        question: "哪些？",
                        answer: "根据《XX》第二十九条，。"
                    },
                    {
                        question: "租金如何计算？",
                        answer: "根据《XX》第三十一条，XXXX。"
                    }
                ];
                // 保存默认数据到本地存储
                saveData(defaultData);
                return defaultData;
            }
        }
  • initData函数：从localStorage加载问答数据，若不存在则使用默认数据（2 条示例问答），并保存到本地存储。

javascript

运行

复制代码 
        // 保存数据到本地存储
        function saveData(data) {
            localStorage.setItem('veteranQaData', JSON.stringify(data));
        }
  • saveData函数：将问答数据转换为 JSON 字符串，保存到localStorage（键为veteranQaData）。

javascript

运行

复制代码 
        // 加载并显示问答库
        function loadQAList() {
            const qaListElement = document.getElementById('qa-list');
            qaListElement.innerHTML = '';
            
            // 模拟从数据库加载数据
            qaData.forEach(item => {
                const qaItem = document.createElement('div');
                qaItem.className = 'qa-item';
                qaItem.innerHTML = `
                    <div class="qa-question">${item.question}</div>
                    <div class="qa-answer">${item.answer}</div>
                `;
                qaListElement.appendChild(qaItem);
                
                // 绑定点击事件
                qaItem.addEventListener('click', function() {
                    document.querySelector('.result-area').innerHTML = `
                        <div class="result-header">相关政策结果 (1项)</div>
                        <div class="result-item">
                            <div class="question">${item.question}</div>
                            <div class="answer">${item.answer}</div>
                        </div>
                    `;
                });
            });
        }
  • loadQAList函数：动态生成问答库内容。遍历qaData数组，为每个问答项创建div.qa-item元素，添加到qa-list中，并绑定点击事件（点击时在结果区显示该问答）。

javascript

运行

复制代码 
        // 显示通知
        function showNotification(message) {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.classList.add('show');
            
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }
  • showNotification函数：显示通知消息，3 秒后自动隐藏。

javascript

运行

复制代码 
        // 初始化问答数据
        let qaData = initData();
  • 初始化全局变量qaData，存储问答数据（从本地存储或默认数据加载）。

javascript

运行

复制代码 
        // 搜索功能 - 显示所有匹配结果
        document.getElementById('search-btn').addEventListener('click', function() {
            const question = document.getElementById('question-input').value.trim().toLowerCase();
            const resultArea = document.querySelector('.result-area');
            
            if (!question) {
                resultArea.innerHTML = `
                    <div class="result-header">请输入查询内容</div>
                    <div class="no-results">请在搜索框中输入您想查询的政策关键词</div>
                `;
                return;
            }
            
            // 匹配逻辑（支持关键词模糊匹配）
            const matchedResults = [];
            qaData.forEach(item => {
                if (item.question.toLowerCase().includes(question) || 
                    item.answer.toLowerCase().includes(question)) {
                    matchedResults.push(item);
                }
            });
            
            if (matchedResults.length > 0) {
                let resultsHTML = `<div class="result-header">相关政策结果 (${matchedResults.length}项)</div>`;
                matchedResults.forEach(item => {
                    resultsHTML += `
                        <div class="result-item">
                            <div class="question">${item.question}</div>
                            <div class="answer">${item.answer}</div>
                        </div>
                    `;
                });
                resultArea.innerHTML = resultsHTML;
            } else {
                resultArea.innerHTML = `
                    <div class="result-header">未找到相关结果</div>
                    <div class="no-results">没有找到与"${question}"相关的政策信息，请尝试其他关键词或添加新问答</div>
                `;
            }
        });
  • 搜索按钮点击事件：
    1. 获取用户输入的关键词（转为小写）。
    2. 若输入为空，提示用户输入内容。
    3. 模糊匹配qaData中的问答（问题或答案包含关键词），收集匹配结果。
    4. 动态生成结果 HTML，更新result-area内容（显示匹配项或无结果提示）。

javascript

运行

复制代码 
        // 切换政策问答库显示/隐藏
        document.getElementById('toggle-kb').addEventListener('click', function() {
            const kbElement = document.querySelector('.knowledge-base');
            const toggleBtn = document.getElementById('toggle-kb');
            const showKbBtn = document.getElementById('show-kb-btn');
            
            if (kbElement.classList.contains('visible')) {
                kbElement.classList.remove('visible');
                toggleBtn.textContent = '显示';
                showKbBtn.style.display = 'block';
            } else {
                kbElement.classList.add('visible');
                toggleBtn.textContent = '隐藏';
                showKbBtn.style.display = 'none';
            }
        });
  • 问答库切换按钮事件：点击时切换knowledge-base的visible类（显示 / 隐藏），同步更新按钮文字和 "查看问答库" 按钮的显示状态。

javascript

运行

复制代码 
        // 显示政策问答库
        document.getElementById('show-kb-btn').addEventListener('click', function() {
            const kbElement = document.querySelector('.knowledge-base');
            const toggleBtn = document.getElementById('toggle-kb');
            
            kbElement.classList.add('visible');
            toggleBtn.textContent = '隐藏';
            this.style.display = 'none';
            
            // 实时从"数据库"加载内容
            loadQAList();
        });
  • "查看政策问答库" 按钮事件：显示问答库，隐藏自身，调用loadQAList加载内容。

javascript

运行

复制代码 
        // 添加新问答 - 保存到本地存储
        document.getElementById('add-btn').addEventListener('click', function() {
            const newQuestion = document.getElementById('new-question').value.trim();
            const newAnswer = document.getElementById('new-answer').value.trim();
            
            if (!newQuestion || !newAnswer) {
                showNotification('请同时输入问题和答案');
                return;
            }
            
            // 添加到数据
            qaData.push({ question: newQuestion, answer: newAnswer });
            
            // 保存到本地存储
            saveData(qaData);
            showNotification('已成功添加到知识库并保存');
            
            // 如果问答库可见，则更新显示
            if (document.querySelector('.knowledge-base').classList.contains('visible')) {
                loadQAList();
            }
            
            // 清空输入框
            document.getElementById('new-question').value = '';
            document.getElementById('new-answer').value = '';
        });
  • 添加按钮事件：
    1. 获取问题和答案输入，若为空则提示。
    2. 将新问答添加到qaData数组，调用saveData保存到本地存储。
    3. 显示 "添加成功" 通知，若问答库可见则刷新列表，清空输入框。

javascript

运行

复制代码 
        // 支持回车键搜索
        document.getElementById('question-input').addEventListener('keyup', function(e) {
            if (e.key === 'Enter') {
                document.getElementById('search-btn').click();
            }
        });
    </script>
</body>
</html>
  • 输入框回车键事件：按下 Enter 键时触发搜索按钮点击，支持快捷搜索。

总结

该代码实现了一个 "退役军人公寓政策问答系统"，功能包括：

  1. 关键词搜索政策问答（模糊匹配问题或答案）；
  2. 展示 / 隐藏政策问答库，点击问答项可查看详情；
  3. 新增政策问答并保存到本地存储（刷新页面后不丢失）；
  4. 操作反馈（通知提示）和响应式布局（适配不同设备）。

整体采用 HTML+CSS+JavaScript 实现，数据存储依赖浏览器localStorage，适合本地部署使用。

完整代码

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>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Noto Sans SC", "WenQuanYi Micro Hei", sans-serif;
        }
        
        body {
            background-color: #f0f2f5;
            padding: 15px;
            color: #333;
            line-height: 1.5;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .title-bar {
            background-color: #1E40AF;
            color: #fff;
            padding: 10px 15px;
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
        }
        
        .title-bar .icon {
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 2px;
            margin-right: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #1E40AF;
        }
        
        .content {
            padding: 20px;
        }
        
        h2 {
            font-size: 18px;
            color: #1E40AF;
            margin: 25px 0 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .toggle-btn {
            font-size: 14px;
            padding: 3px 8px;
            background-color: #f0f2f5;
            color: #1E40AF;
            border: 1px solid #1E40AF;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .toggle-btn:hover {
            background-color: #e0e5f0;
        }
        
        .search-box {
            display: flex;
            margin-bottom: 10px;
        }
        
        #question-input {
            flex: 1;
            padding: 9px 12px;
            border: 1px solid #ccc;
            border-radius: 3px 0 0 3px;
            font-size: 14px;
            outline: none;
        }
        
        #question-input:focus {
            border-color: #1E40AF;
            box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.2);
        }
        
        .btn {
            padding: 9px 18px;
            background-color: #1E40AF;
            color: white;
            border: none;
            border-radius: 0 3px 3px 0;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.2s;
        }
        
        .btn:hover {
            background-color: #1E3A8A;
        }
        
        .btn-secondary {
            background-color: #36B37E;
            border-radius: 3px;
            margin-top: 5px;
        }
        
        .btn-secondary:hover {
            background-color: #2D9D6B;
        }
        
        .result-area {
            min-height: 120px;
            padding: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 3px;
            margin: 15px 0;
            background-color: #fafafa;
            font-size: 14px;
        }
        
        .result-area .result-header {
            color: #1E40AF;
            font-weight: 500;
            margin-bottom: 12px;
            padding-bottom: 5px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .result-item {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px dashed #e0e0e0;
        }
        
        .result-item:last-child {
            border-bottom: none;
        }
        
        .result-item .question {
            color: #1E40AF;
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .result-item .answer {
            color: #333;
            line-height: 1.6;
        }
        
        .no-results {
            color: #666;
            text-align: center;
            padding: 20px 0;
        }
        
        .knowledge-base {
            margin-top: 10px;
            display: none; /* 默认隐藏政策问答库 */
        }
        
        .knowledge-base.visible {
            display: block;
        }
        
        .qa-list {
            display: grid;
            gap: 10px;
        }
        
        .qa-item {
            padding: 12px 15px;
            background-color: #f8f9fa;
            border-left: 3px solid #1E40AF;
            border-radius: 0 3px 3px 0;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .qa-item:hover {
            background-color: #eef1f5;
        }
        
        .qa-question {
            font-weight: 500;
            margin-bottom: 4px;
            color: #1E40AF;
        }
        
        .qa-answer {
            font-size: 13px;
            color: #555;
        }
        
        .add-qa {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px dashed #e0e0e0;
        }
        
        .form-group {
            margin-bottom: 12px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
            color: #555;
        }
        
        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 3px;
            font-size: 14px;
        }
        
        .form-control:focus {
            border-color: #1E40AF;
            outline: none;
        }
        
        textarea.form-control {
            min-height: 80px;
            resize: vertical;
        }
        
        .operation-tips {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
            padding-left: 2px;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 10px 15px;
            background-color: #36B37E;
            color: white;
            border-radius: 3px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }
        
        .notification.show {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="title-bar">
            <div class="icon">知</div>
            退役军人公寓政策问答系统
        </div>
        
        <div class="content">
            <!-- 搜索区域 -->
            <div>
                <label for="question-input" style="font-weight: 500;">请输入查询内容：</label>
                <div class="search-box">
                    <input type="text" id="question-input" class="form-control" placeholder="例如：退役军人公寓申请条件、租金计算...">
                    <button id="search-btn" class="btn">查询</button>
                </div>
                <div class="operation-tips">提示：支持关键词搜索，可查看所有相关结果</div>
            </div>
            
            <!-- 结果展示区域 -->
            <div class="result-area">
                <div class="result-header">搜索结果将显示在这里</div>
                <div class="initial-message">请输入问题并点击查询按钮，或查看下方政策问答库</div>
            </div>
            
            <!-- 知识库区域 - 默认隐藏 -->
            <div class="knowledge-base">
                <h2>
                    政策问答库
                    <button class="toggle-btn" id="toggle-kb">隐藏</button>
                </h2>
                
                <div class="qa-list" id="qa-list">
                    <!-- 内容将通过JavaScript从"数据库"加载 -->
                </div>
            </div>
            
            <!-- 显示/隐藏知识库的按钮 -->
            <button id="show-kb-btn" class="btn btn-secondary" style="margin-top: 10px;">
                查看政策问答库
            </button>
            
            <!-- 添加新问答 -->
            <div class="add-qa">
                <h2>添加政策问答</h2>
                <div class="form-group">
                    <label for="new-question">问题：</label>
                    <input type="text" id="new-question" class="form-control" placeholder="请输入政策问题">
                </div>
                <div class="form-group">
                    <label for="new-answer">答案：</label>
                    <textarea id="new-answer" class="form-control" placeholder="请输入问题答案"></textarea>
                </div>
                <button id="add-btn" class="btn btn-secondary">添加到知识库</button>
            </div>
        </div>
    </div>
    
    <!-- 通知提示 -->
    <div class="notification" id="notification"></div>

    <script>
        // 初始化数据 - 从本地存储加载，若无则使用默认数据
        function initData() {
            const savedData = localStorage.getItem('veteranQaData');
            if (savedData) {
                return JSON.parse(savedData);
            } else {
                // 默认数据
                const defaultData = [
                    {
                        question: "哪些？",
                        answer: "根据《XX》第二十九条，。"
                    },
                    {
                        question: "租金如何计算？",
                        answer: "根据《XX》第三十一条，XXXX。"
                    }
                ];
                // 保存默认数据到本地存储
                saveData(defaultData);
                return defaultData;
            }
        }
        
        // 保存数据到本地存储
        function saveData(data) {
            localStorage.setItem('veteranQaData', JSON.stringify(data));
        }
        
        // 加载并显示问答库
        function loadQAList() {
            const qaListElement = document.getElementById('qa-list');
            qaListElement.innerHTML = '';
            
            // 模拟从数据库加载数据
            qaData.forEach(item => {
                const qaItem = document.createElement('div');
                qaItem.className = 'qa-item';
                qaItem.innerHTML = `
                    <div class="qa-question">${item.question}</div>
                    <div class="qa-answer">${item.answer}</div>
                `;
                qaListElement.appendChild(qaItem);
                
                // 绑定点击事件
                qaItem.addEventListener('click', function() {
                    document.querySelector('.result-area').innerHTML = `
                        <div class="result-header">相关政策结果 (1项)</div>
                        <div class="result-item">
                            <div class="question">${item.question}</div>
                            <div class="answer">${item.answer}</div>
                        </div>
                    `;
                });
            });
        }
        
        // 显示通知
        function showNotification(message) {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.classList.add('show');
            
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }
        
        // 初始化问答数据
        let qaData = initData();
        
        // 搜索功能 - 显示所有匹配结果
        document.getElementById('search-btn').addEventListener('click', function() {
            const question = document.getElementById('question-input').value.trim().toLowerCase();
            const resultArea = document.querySelector('.result-area');
            
            if (!question) {
                resultArea.innerHTML = `
                    <div class="result-header">请输入查询内容</div>
                    <div class="no-results">请在搜索框中输入您想查询的政策关键词</div>
                `;
                return;
            }
            
            // 匹配逻辑（支持关键词模糊匹配）
            const matchedResults = [];
            qaData.forEach(item => {
                if (item.question.toLowerCase().includes(question) || 
                    item.answer.toLowerCase().includes(question)) {
                    matchedResults.push(item);
                }
            });
            
            if (matchedResults.length > 0) {
                let resultsHTML = `<div class="result-header">相关政策结果 (${matchedResults.length}项)</div>`;
                matchedResults.forEach(item => {
                    resultsHTML += `
                        <div class="result-item">
                            <div class="question">${item.question}</div>
                            <div class="answer">${item.answer}</div>
                        </div>
                    `;
                });
                resultArea.innerHTML = resultsHTML;
            } else {
                resultArea.innerHTML = `
                    <div class="result-header">未找到相关结果</div>
                    <div class="no-results">没有找到与"${question}"相关的政策信息，请尝试其他关键词或添加新问答</div>
                `;
            }
        });
        
        // 切换政策问答库显示/隐藏
        document.getElementById('toggle-kb').addEventListener('click', function() {
            const kbElement = document.querySelector('.knowledge-base');
            const toggleBtn = document.getElementById('toggle-kb');
            const showKbBtn = document.getElementById('show-kb-btn');
            
            if (kbElement.classList.contains('visible')) {
                kbElement.classList.remove('visible');
                toggleBtn.textContent = '显示';
                showKbBtn.style.display = 'block';
            } else {
                kbElement.classList.add('visible');
                toggleBtn.textContent = '隐藏';
                showKbBtn.style.display = 'none';
            }
        });
        
        // 显示政策问答库
        document.getElementById('show-kb-btn').addEventListener('click', function() {
            const kbElement = document.querySelector('.knowledge-base');
            const toggleBtn = document.getElementById('toggle-kb');
            
            kbElement.classList.add('visible');
            toggleBtn.textContent = '隐藏';
            this.style.display = 'none';
            
            // 实时从"数据库"加载内容
            loadQAList();
        });
        
        // 添加新问答 - 保存到本地存储
        document.getElementById('add-btn').addEventListener('click', function() {
            const newQuestion = document.getElementById('new-question').value.trim();
            const newAnswer = document.getElementById('new-answer').value.trim();
            
            if (!newQuestion || !newAnswer) {
                showNotification('请同时输入问题和答案');
                return;
            }
            
            // 添加到数据
            qaData.push({ question: newQuestion, answer: newAnswer });
            
            // 保存到本地存储
            saveData(qaData);
            showNotification('已成功添加到知识库并保存');
            
            // 如果问答库可见，则更新显示
            if (document.querySelector('.knowledge-base').classList.contains('visible')) {
                loadQAList();
            }
            
            // 清空输入框
            document.getElementById('new-question').value = '';
            document.getElementById('new-answer').value = '';
        });
        
        // 支持回车键搜索
        document.getElementById('question-input').addEventListener('keyup', function(e) {
            if (e.key === 'Enter') {
                document.getElementById('search-btn').click();
            }
        });
    </script>
</body>
</html>
热门推荐
01UV安装并设置国内源02全球最强模型Grok4，国内已可免费使用！（附教程）03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code042025年华数杯C题超详细解题思路05🚀Cursor CLI+GPT-5保姆级教程+编程能力测评！Cursor CLI零成本免费使用GPT-5！Claude Code的劲敌来了！从安装到实战演示06KGG转MP3工具|非KGM文件|解密音频07OpenAI重返开源！GPT-OSS本地部署完全指南08Cursor 终端“卡死/无响应”问题的解法09ChatGPT 5发布日期揭秘：2025年8月上线，多模态推理能力全面升级10如何在 Cursor 中继续使用 Claude