lukeye/kbsearch-extension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化页面

Browse Source
This commit is contained in:
luke 2025-05-24 09:38:22 +08:00
parent e6655dd36c
commit a7279fe067
4 changed files with 183 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
manifest.json
View File

@ -1,9 +1,13 @@
{ {
"manifest_version": 3, "manifest_version": 3,
"name": "知识库搜索助手", "name": "安徽农信知识库",
"version": "1.0", "version": "0.6",
"description": "通过关键词从企业知识库中搜索内容。", "description": "通过关键词快速搜索内部文档",
"permissions": [], "permissions": [],
"host_permissions": [
"http://app.wisdompulse.cn/*",
"http://share.wisdompulse.cn/*"
],
"action": { "action": {
"default_popup": "popup.html", "default_popup": "popup.html",
"default_icon": { "default_icon": {

15
popup.html
View File

@ -2,15 +2,26 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>知识库搜索助手</title> <title>安徽农信知识库</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<div class="header">
<img src="icon.png" alt="logo" class="logo">
<div class="title-box">
<h1>安徽农信知识库</h1>
<a href="https://oa.ahrcu.com/sys/portal/page.jsp" target="_blank" class="oa-link">跳转OA</a>
</div>
</div>
<div class="container"> <div class="container">
<input id="searchInput" type="text" placeholder="输入关键词，多个用空格分隔..." /> <div class="search-bar">
<input id="searchInput" type="text" placeholder="请输入关键词（空格分隔）..." />
<button id="searchBtn">搜索</button> <button id="searchBtn">搜索</button>
</div>
<ul id="results"></ul> <ul id="results"></ul>
</div> </div>
<script src="popup.js"></script> <script src="popup.js"></script>
</body> </body>
</html> </html>

92
popup.js
View File

@ -1,12 +1,52 @@
document.getElementById("searchBtn").addEventListener("click", async () => { const searchBtn = document.getElementById("searchBtn");
const input = document.getElementById("searchInput").value.trim(); const input = document.getElementById("searchInput");
const resultBox = document.getElementById("results"); const resultBox = document.getElementById("results");
resultBox.innerHTML = "";
if (!input) return; let currentPage = 1;
let totalPages = 1;
let lastKeywords = [];
function showLoading() {
resultBox.innerHTML = "<li>加载中...</li>";
}
function renderPagination() {
const pagination = document.createElement("div");
pagination.className = "pagination";
if (currentPage > 1) {
const prevBtn = document.createElement("button");
prevBtn.textContent = "上一页";
prevBtn.onclick = () => fetchResults(lastKeywords, currentPage - 1);
pagination.appendChild(prevBtn);
}
if (currentPage < totalPages) {
const nextBtn = document.createElement("button");
nextBtn.textContent = "下一页";
nextBtn.onclick = () => fetchResults(lastKeywords, currentPage + 1);
pagination.appendChild(nextBtn);
}
resultBox.appendChild(pagination);
}
async function fetchResults(keywords, page) {
currentPage = page;
lastKeywords = keywords;
const keywords = input.split(/\s+/).filter(Boolean);
const keywordGroups = keywords.map(k => [k]); const keywordGroups = keywords.map(k => [k]);
const requestBody = {
keywordGroups,
page: currentPage,
size: 10
};
console.log("[INFO] 请求地址: http://app.wisdompulse.cn/search");
console.log("[INFO] 请求方法: POST");
console.log("[INFO] 请求体:", JSON.stringify(requestBody, null, 2));
showLoading();
try { try {
const response = await fetch("http://app.wisdompulse.cn/search", { const response = await fetch("http://app.wisdompulse.cn/search", {
@ -14,25 +54,29 @@ document.getElementById("searchBtn").addEventListener("click", async () => {
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json"
}, },
body: JSON.stringify({ body: JSON.stringify(requestBody)
keywordGroups,
page: 1,
size: 10
})
}); });
console.log("[INFO] 响应状态:", response.status, response.statusText);
const data = await response.json(); const data = await response.json();
console.log("[INFO] 响应体:", data);
resultBox.innerHTML = "";
if (!data.results || data.results.length === 0) { if (!data.results || data.results.length === 0) {
console.log("[INFO] 未返回结果数据");
resultBox.innerHTML = "<li>未找到相关文档</li>"; resultBox.innerHTML = "<li>未找到相关文档</li>";
return; return;
} }
totalPages = Math.ceil(data.total / data.size);
data.results.forEach(doc => { data.results.forEach(doc => {
const li = document.createElement("li"); const li = document.createElement("li");
const cleanPath = doc.filepath.replace(/^import-data\//, "").replace(/\.md$/, ".html");
const link = document.createElement("a"); const link = document.createElement("a");
link.href = `http://app.wisdompulse.cn/html/${doc.filepath}`; link.href = `http://share.wisdompulse.cn/public/${cleanPath}`;
link.target = "_blank"; link.target = "_blank";
link.textContent = doc.filename; link.textContent = doc.filename;
@ -45,8 +89,32 @@ document.getElementById("searchBtn").addEventListener("click", async () => {
resultBox.appendChild(li); resultBox.appendChild(li);
}); });
renderPagination();
} catch (err) { } catch (err) {
console.error("搜索失败", err); console.error("[ERROR] 搜索失败:", err);
resultBox.innerHTML = "<li>搜索失败，请检查网络或服务状态。</li>"; resultBox.innerHTML = "<li>搜索失败，请检查网络或服务状态。</li>";
} }
}
function triggerSearch() {
const inputValue = input.value.trim();
console.log("[INFO] 用户输入关键词:", inputValue);
if (!inputValue) {
console.warn("[WARN] 输入为空");
return;
}
const keywords = inputValue.split(/\s+/).filter(Boolean);
fetchResults(keywords, 1);
}
searchBtn.addEventListener("click", triggerSearch);
// 支持按回车键直接搜索
input.addEventListener("keydown", e => {
if (e.key === "Enter") {
triggerSearch();
}
}); });

94
styles.css
View File

@ -1,8 +1,46 @@
body { body {
font-family: Arial, sans-serif; font-family: "Microsoft YaHei", sans-serif;
width: 320px; width: 600px;
padding: 10px; padding: 20px;
background-color: #f9f9f9; background-color: #fefefe;
}
.header {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.logo {
width: 32px;
height: 32px;
margin-right: 10px;
}
.title-box {
display: flex;
align-items: center;
gap: 12px;
}
h1 {
font-size: 18px;
color: #2c3e50;
margin: 0;
}
.oa-link {
font-size: 13px;
text-decoration: none;
color: #007bff;
background-color: #f2f2f2;
padding: 4px 8px;
border-radius: 4px;
}
.oa-link:hover {
background-color: #e0e0e0;
} }
.container { .container {
@ -10,15 +48,23 @@ body {
flex-direction: column; flex-direction: column;
} }
input { .search-bar {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
.search-bar input {
flex: 1;
padding: 8px; padding: 8px;
margin-bottom: 8px; font-size: 14px;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
} }
button { .search-bar button {
padding: 8px; padding: 8px 16px;
font-size: 14px;
background-color: #007bff; background-color: #007bff;
color: white; color: white;
border: none; border: none;
@ -26,24 +72,26 @@ button {
cursor: pointer; cursor: pointer;
} }
button:hover { .search-bar button:hover {
background-color: #0056b3; background-color: #0056b3;
} }
#results { #results {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin-top: 10px;
} }
#results li { #results li {
margin-bottom: 12px; margin-bottom: 14px;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
} }
#results a { #results a {
font-weight: bold; font-weight: bold;
color: #007bff; color: #007bff;
text-decoration: none; text-decoration: none;
font-size: 15px;
} }
#results a:hover { #results a:hover {
@ -51,7 +99,27 @@ button:hover {
} }
#results .summary { #results .summary {
font-size: 12px; font-size: 13px;
color: #555; color: #444;
margin-top: 4px; margin-top: 4px;
} }
.pagination {
margin-top: 15px;
display: flex;
justify-content: center;
gap: 10px;
}
.pagination button {
padding: 6px 12px;
font-size: 13px;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
}
.pagination button:hover {
background-color: #ddd;
}