优化页面
This commit is contained in:
parent
e6655dd36c
commit
a7279fe067
@ -1,9 +1,13 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "知识库搜索助手",
|
||||
"version": "1.0",
|
||||
"description": "通过关键词从企业知识库中搜索内容。",
|
||||
"name": "安徽农信知识库",
|
||||
"version": "0.6",
|
||||
"description": "通过关键词快速搜索内部文档",
|
||||
"permissions": [],
|
||||
"host_permissions": [
|
||||
"http://app.wisdompulse.cn/*",
|
||||
"http://share.wisdompulse.cn/*"
|
||||
],
|
||||
"action": {
|
||||
"default_popup": "popup.html",
|
||||
"default_icon": {
|
||||
|
||||
15
popup.html
15
popup.html
@ -2,15 +2,26 @@
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>知识库搜索助手</title>
|
||||
<title>安徽农信知识库</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<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">
|
||||
<input id="searchInput" type="text" placeholder="输入关键词，多个用空格分隔..." />
|
||||
<div class="search-bar">
|
||||
<input id="searchInput" type="text" placeholder="请输入关键词（空格分隔）..." />
|
||||
<button id="searchBtn">搜索</button>
|
||||
</div>
|
||||
<ul id="results"></ul>
|
||||
</div>
|
||||
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
92
popup.js
92
popup.js
@ -1,12 +1,52 @@
|
||||
document.getElementById("searchBtn").addEventListener("click", async () => {
|
||||
const input = document.getElementById("searchInput").value.trim();
|
||||
const searchBtn = document.getElementById("searchBtn");
|
||||
const input = document.getElementById("searchInput");
|
||||
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 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 {
|
||||
const response = await fetch("http://app.wisdompulse.cn/search", {
|
||||
@ -14,25 +54,29 @@ document.getElementById("searchBtn").addEventListener("click", async () => {
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
keywordGroups,
|
||||
page: 1,
|
||||
size: 10
|
||||
})
|
||||
body: JSON.stringify(requestBody)
|
||||
});
|
||||
|
||||
console.log("[INFO] 响应状态:", response.status, response.statusText);
|
||||
const data = await response.json();
|
||||
console.log("[INFO] 响应体:", data);
|
||||
|
||||
resultBox.innerHTML = "";
|
||||
|
||||
if (!data.results || data.results.length === 0) {
|
||||
console.log("[INFO] 未返回结果数据");
|
||||
resultBox.innerHTML = "<li>未找到相关文档</li>";
|
||||
return;
|
||||
}
|
||||
|
||||
totalPages = Math.ceil(data.total / data.size);
|
||||
|
||||
data.results.forEach(doc => {
|
||||
const li = document.createElement("li");
|
||||
|
||||
const cleanPath = doc.filepath.replace(/^import-data\//, "").replace(/\.md$/, ".html");
|
||||
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.textContent = doc.filename;
|
||||
|
||||
@ -45,8 +89,32 @@ document.getElementById("searchBtn").addEventListener("click", async () => {
|
||||
resultBox.appendChild(li);
|
||||
});
|
||||
|
||||
renderPagination();
|
||||
|
||||
} catch (err) {
|
||||
console.error("搜索失败", err);
|
||||
console.error("[ERROR] 搜索失败:", err);
|
||||
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
94
styles.css
@ -1,8 +1,46 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
width: 320px;
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
width: 600px;
|
||||
padding: 20px;
|
||||
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 {
|
||||
@ -10,15 +48,23 @@ body {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
input {
|
||||
.search-bar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px;
|
||||
.search-bar button {
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
@ -26,24 +72,26 @@ button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
.search-bar button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
#results {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#results li {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 14px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#results a {
|
||||
font-weight: bold;
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#results a:hover {
|
||||
@ -51,7 +99,27 @@ button:hover {
|
||||
}
|
||||
|
||||
#results .summary {
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user