当前位置：首页 > news >正文

基于HTML的政策问答

news 2025/8/10 5:26:47

以下是对该 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 键时触发搜索按钮点击，支持快捷搜索。

总结

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

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

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

完整代码

<!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>

查看全文

http://www.dtcms.com/a/322390.html