添加历史记录
This commit is contained in:
parent
8e8df8897c
commit
413dc1a4aa
@ -1,9 +1,9 @@
|
|||||||
{
|
{
|
||||||
"manifest_version": 3,
|
"manifest_version": 3,
|
||||||
"name": "渠道应用开发部知识库",
|
"name": "渠道应用开发部知识库",
|
||||||
"version": "1.0.1",
|
"version": "1.0.2",
|
||||||
"description": "通过关键词快速搜索内部文档",
|
"description": "通过关键词快速搜索内部文档",
|
||||||
"permissions": [],
|
"permissions": ["storage"],
|
||||||
"host_permissions": [
|
"host_permissions": [
|
||||||
"http://app.wisdompulse.cn/*",
|
"http://app.wisdompulse.cn/*",
|
||||||
"http://share.wisdompulse.cn/*"
|
"http://share.wisdompulse.cn/*"
|
||||||
@ -27,4 +27,4 @@
|
|||||||
"128": "icon.png"
|
"128": "icon.png"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
33
popup.html
33
popup.html
@ -1,27 +1,30 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<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">
|
<div class="header">
|
||||||
<img src="icon.png" alt="logo" class="logo">
|
<img src="icon.png" alt="logo" class="logo" />
|
||||||
<div class="title-box">
|
<div class="title-box">
|
||||||
<h1>渠道应用开发部知识库</h1>
|
<h1>渠道应用开发部知识库</h1>
|
||||||
<a href="https://oa.ahrcu.com/sys/portal/page.jsp" target="_blank" class="oa-link">跳转OA</a>
|
<a href="https://oa.ahrcu.com/sys/portal/page.jsp" target="_blank" class="oa-link">跳转OA</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="search-bar">
|
<div class="search-bar">
|
||||||
<input id="searchInput" type="text" placeholder="请输入关键词（空格分隔）..." />
|
<input id="searchInput" type="text" autocomplete="off" placeholder="请输入关键词（空格分隔）..." />
|
||||||
<button id="searchBtn">搜索</button>
|
<button id="searchBtn">搜索</button>
|
||||||
</div>
|
</div>
|
||||||
<ul id="results"></ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="popup.js"></script>
|
<div id="historyTags" class="tag-history hidden"></div>
|
||||||
|
|
||||||
|
<ul id="results"></ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="popup.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
193
popup.js
193
popup.js
@ -1,120 +1,155 @@
|
|||||||
const searchBtn = document.getElementById("searchBtn");
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
const input = document.getElementById("searchInput");
|
const input = document.getElementById("searchInput");
|
||||||
const resultBox = document.getElementById("results");
|
const searchBtn = document.getElementById("searchBtn");
|
||||||
|
const resultBox = document.getElementById("results");
|
||||||
|
const historyBox = document.getElementById("historyTags");
|
||||||
|
|
||||||
let currentPage = 1;
|
let currentPage = 1;
|
||||||
let totalPages = 1;
|
let totalPages = 1;
|
||||||
let lastKeywords = [];
|
let lastKeywords = [];
|
||||||
|
|
||||||
function showLoading() {
|
function log(...args) {
|
||||||
|
console.log("[v1.0.2]", ...args);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showLoading() {
|
||||||
resultBox.innerHTML = "<li>加载中...</li>";
|
resultBox.innerHTML = "<li>加载中...</li>";
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderPagination() {
|
function renderPagination() {
|
||||||
const pagination = document.createElement("div");
|
const pagination = document.createElement("div");
|
||||||
pagination.className = "pagination";
|
pagination.className = "pagination";
|
||||||
|
|
||||||
if (currentPage > 1) {
|
if (currentPage > 1) {
|
||||||
const prevBtn = document.createElement("button");
|
const prevBtn = document.createElement("button");
|
||||||
prevBtn.textContent = "上一页";
|
prevBtn.textContent = "上一页";
|
||||||
prevBtn.onclick = () => fetchResults(lastKeywords, currentPage - 1);
|
prevBtn.onclick = () => fetchResults(lastKeywords, currentPage - 1);
|
||||||
pagination.appendChild(prevBtn);
|
pagination.appendChild(prevBtn);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (currentPage < totalPages) {
|
if (currentPage < totalPages) {
|
||||||
const nextBtn = document.createElement("button");
|
const nextBtn = document.createElement("button");
|
||||||
nextBtn.textContent = "下一页";
|
nextBtn.textContent = "下一页";
|
||||||
nextBtn.onclick = () => fetchResults(lastKeywords, currentPage + 1);
|
nextBtn.onclick = () => fetchResults(lastKeywords, currentPage + 1);
|
||||||
pagination.appendChild(nextBtn);
|
pagination.appendChild(nextBtn);
|
||||||
}
|
}
|
||||||
|
|
||||||
resultBox.appendChild(pagination);
|
resultBox.appendChild(pagination);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchResults(keywords, page) {
|
function updateHistory(keyword) {
|
||||||
|
if (!chrome?.storage?.local) {
|
||||||
|
log("chrome.storage.local 不可用，跳过历史记录");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
chrome.storage.local.get(["searchHistory"], (res) => {
|
||||||
|
let history = res.searchHistory || [];
|
||||||
|
history = [keyword, ...history.filter(item => item !== keyword)];
|
||||||
|
if (history.length > 5) history = history.slice(0, 5);
|
||||||
|
chrome.storage.local.set({ searchHistory: history });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderHistoryTags() {
|
||||||
|
if (!chrome?.storage?.local) return;
|
||||||
|
chrome.storage.local.get(["searchHistory"], (res) => {
|
||||||
|
const history = res.searchHistory || [];
|
||||||
|
historyBox.innerHTML = "";
|
||||||
|
if (history.length === 0) {
|
||||||
|
historyBox.classList.add("hidden");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
history.forEach(tagText => {
|
||||||
|
const tag = document.createElement("span");
|
||||||
|
tag.className = "tag";
|
||||||
|
tag.textContent = tagText;
|
||||||
|
tag.onclick = () => {
|
||||||
|
input.value = tagText;
|
||||||
|
triggerSearch();
|
||||||
|
};
|
||||||
|
historyBox.appendChild(tag);
|
||||||
|
});
|
||||||
|
|
||||||
|
historyBox.classList.remove("hidden");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchResults(keywords, page) {
|
||||||
currentPage = page;
|
currentPage = page;
|
||||||
lastKeywords = keywords;
|
lastKeywords = keywords;
|
||||||
|
|
||||||
const keywordGroups = keywords.map(k => [k]);
|
const keywordGroups = keywords.map(k => [k]);
|
||||||
const requestBody = {
|
const requestBody = {
|
||||||
keywordGroups,
|
keywordGroups,
|
||||||
page: currentPage,
|
page: currentPage,
|
||||||
size: 10
|
size: 10
|
||||||
};
|
};
|
||||||
|
|
||||||
console.log("[INFO] 请求地址: http://app.wisdompulse.cn/search");
|
log("触发搜索:", requestBody);
|
||||||
console.log("[INFO] 请求方法: POST");
|
|
||||||
console.log("[INFO] 请求体:", JSON.stringify(requestBody, null, 2));
|
|
||||||
|
|
||||||
showLoading();
|
showLoading();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch("http://app.wisdompulse.cn/search", {
|
const response = await fetch("http://app.wisdompulse.cn/search", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json"
|
"Content-Type": "application/json"
|
||||||
},
|
},
|
||||||
body: JSON.stringify(requestBody)
|
body: JSON.stringify(requestBody)
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log("[INFO] 响应状态:", response.status, response.statusText);
|
const data = await response.json();
|
||||||
const data = await response.json();
|
resultBox.innerHTML = "";
|
||||||
console.log("[INFO] 响应体:", data);
|
|
||||||
|
|
||||||
resultBox.innerHTML = "";
|
if (!data.results || data.results.length === 0) {
|
||||||
|
resultBox.innerHTML = "<li>未找到相关文档</li>";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (!data.results || data.results.length === 0) {
|
totalPages = Math.ceil(data.total / data.size);
|
||||||
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://share.wisdompulse.cn/public/${cleanPath}`;
|
||||||
|
link.target = "_blank";
|
||||||
|
link.textContent = doc.filename;
|
||||||
|
|
||||||
data.results.forEach(doc => {
|
const snippet = document.createElement("div");
|
||||||
const li = document.createElement("li");
|
snippet.className = "summary";
|
||||||
|
snippet.innerHTML = doc.summary?.slice(0, 300) + "...";
|
||||||
|
|
||||||
const cleanPath = doc.filepath.replace(/^import-data\//, "").replace(/\.md$/, ".html");
|
li.appendChild(link);
|
||||||
const link = document.createElement("a");
|
li.appendChild(snippet);
|
||||||
link.href = `http://share.wisdompulse.cn/public/${cleanPath}`;
|
resultBox.appendChild(li);
|
||||||
link.target = "_blank";
|
});
|
||||||
link.textContent = doc.filename;
|
|
||||||
|
|
||||||
const snippet = document.createElement("div");
|
renderPagination();
|
||||||
snippet.className = "summary";
|
|
||||||
snippet.innerHTML = doc.summary?.slice(0, 300) + "...";
|
|
||||||
|
|
||||||
li.appendChild(link);
|
|
||||||
li.appendChild(snippet);
|
|
||||||
resultBox.appendChild(li);
|
|
||||||
});
|
|
||||||
|
|
||||||
renderPagination();
|
|
||||||
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("[ERROR] 搜索失败:", err);
|
console.error("[ERROR] 搜索失败:", err);
|
||||||
resultBox.innerHTML = "<li>搜索失败，请检查网络或服务状态。</li>";
|
resultBox.innerHTML = "<li>搜索失败，请检查网络或服务状态。</li>";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function triggerSearch() {
|
function triggerSearch() {
|
||||||
const inputValue = input.value.trim();
|
const inputValue = input.value.trim();
|
||||||
console.log("[INFO] 用户输入关键词:", inputValue);
|
if (!inputValue) return;
|
||||||
|
|
||||||
if (!inputValue) {
|
|
||||||
console.warn("[WARN] 输入为空");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const keywords = inputValue.split(/\s+/).filter(Boolean);
|
const keywords = inputValue.split(/\s+/).filter(Boolean);
|
||||||
|
updateHistory(inputValue);
|
||||||
fetchResults(keywords, 1);
|
fetchResults(keywords, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
searchBtn.addEventListener("click", triggerSearch);
|
searchBtn.addEventListener("click", triggerSearch);
|
||||||
|
input.addEventListener("keydown", e => {
|
||||||
|
if (e.key === "Enter") triggerSearch();
|
||||||
|
});
|
||||||
|
|
||||||
// 支持按回车键直接搜索
|
input.addEventListener("focus", renderHistoryTags);
|
||||||
input.addEventListener("keydown", e => {
|
input.addEventListener("blur", () => {
|
||||||
if (e.key === "Enter") {
|
setTimeout(() => historyBox.classList.add("hidden"), 200);
|
||||||
triggerSearch();
|
});
|
||||||
}
|
|
||||||
});
|
log("插件初始化完成");
|
||||||
|
});
|
||||||
158
styles.css
158
styles.css
@ -1,125 +1,149 @@
|
|||||||
body {
|
body {
|
||||||
font-family: "Microsoft YaHei", sans-serif;
|
font-family: "Microsoft YaHei", sans-serif;
|
||||||
width: 600px;
|
width: 600px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background-color: #fefefe;
|
background-color: #fefefe;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-box {
|
.title-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.oa-link {
|
.oa-link {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #007bff;
|
color: #007bff;
|
||||||
background-color: #f2f2f2;
|
background-color: #f2f2f2;
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.oa-link:hover {
|
.oa-link:hover {
|
||||||
background-color: #e0e0e0;
|
background-color: #e0e0e0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-bar {
|
.search-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-bar input {
|
.search-bar input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-bar button {
|
.search-bar button {
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
background-color: #007bff;
|
background-color: #007bff;
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-bar button:hover {
|
.search-bar button:hover {
|
||||||
background-color: #0056b3;
|
background-color: #0056b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-history {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-history .tag {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
color: #333;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-history .tag:hover {
|
||||||
|
background-color: #dcdcdc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#results {
|
#results {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#results li {
|
#results li {
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
padding-bottom: 10px;
|
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;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#results a:hover {
|
#results a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
#results .summary {
|
#results .summary {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #444;
|
color: #444;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination button {
|
.pagination button {
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination button:hover {
|
.pagination button:hover {
|
||||||
background-color: #ddd;
|
background-color: #ddd;
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user