完成1.1版本

This commit is contained in:
luke 2025-05-25 09:16:35 +08:00
parent 413dc1a4aa
commit 9c33a98984
6 changed files with 117 additions and 28 deletions

BIN
.DS_Store vendored

Binary file not shown.

BIN
delete.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

@ -1,7 +1,7 @@
{ {
"manifest_version": 3, "manifest_version": 3,
"name": "渠道应用开发部知识库", "name": "渠道应用开发部知识库",
"version": "1.0.2", "version": "1.1",
"description": "通过关键词快速搜索内部文档", "description": "通过关键词快速搜索内部文档",
"permissions": ["storage"], "permissions": ["storage"],
"host_permissions": [ "host_permissions": [

View File

@ -6,25 +6,31 @@
<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 class="container">
<div class="search-bar">
<input id="searchInput" type="text" autocomplete="off" placeholder="请输入关键词(空格分隔)..." />
<button id="searchBtn">搜索</button>
</div> </div>
<div class="container"> <div class="history-wrapper hidden" id="historyWrapper">
<div class="search-bar"> <div class="history-header">
<input id="searchInput" type="text" autocomplete="off" placeholder="请输入关键词(空格分隔)..." /> <span>历史搜索:</span>
<button id="searchBtn">搜索</button> <img id="clearHistoryBtn" src="delete.png" title="清空历史记录" class="delete-icon" />
</div> </div>
<div id="historyTags" class="tag-history"></div>
<div id="historyTags" class="tag-history hidden"></div>
<ul id="results"></ul>
</div> </div>
<script src="popup.js"></script> <ul id="results"></ul>
</div>
<script src="popup.js"></script>
</body> </body>
</html> </html>

View File

@ -1,21 +1,33 @@
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const input = document.getElementById("searchInput"); const input = document.getElementById("searchInput");
const searchBtn = document.getElementById("searchBtn"); const searchBtn = document.getElementById("searchBtn");
const clearHistoryBtn = document.getElementById("clearHistoryBtn");
const resultBox = document.getElementById("results"); const resultBox = document.getElementById("results");
const historyBox = document.getElementById("historyTags"); const historyBox = document.getElementById("historyTags");
const historyWrapper = document.getElementById("historyWrapper");
let currentPage = 1; let currentPage = 1;
let totalPages = 1; let totalPages = 1;
let lastKeywords = []; let lastKeywords = [];
function log(...args) { function log(...args) {
console.log("[v1.0.2]", ...args); try {
const version = chrome.runtime?.getManifest?.().version || "dev";
console.log(`[v${version}]`, ...args);
} catch (e) {
console.log("[v?]", ...args);
}
} }
function showLoading() { function showLoading() {
resultBox.innerHTML = "<li>加载中...</li>"; resultBox.innerHTML = "<li>加载中...</li>";
} }
function clearResults() {
resultBox.innerHTML = "";
historyWrapper.classList.add("hidden");
}
function renderPagination() { function renderPagination() {
const pagination = document.createElement("div"); const pagination = document.createElement("div");
pagination.className = "pagination"; pagination.className = "pagination";
@ -38,10 +50,7 @@ document.addEventListener("DOMContentLoaded", () => {
} }
function updateHistory(keyword) { function updateHistory(keyword) {
if (!chrome?.storage?.local) { if (!chrome?.storage?.local) return;
log("chrome.storage.local 不可用,跳过历史记录");
return;
}
chrome.storage.local.get(["searchHistory"], (res) => { chrome.storage.local.get(["searchHistory"], (res) => {
let history = res.searchHistory || []; let history = res.searchHistory || [];
history = [keyword, ...history.filter(item => item !== keyword)]; history = [keyword, ...history.filter(item => item !== keyword)];
@ -56,7 +65,7 @@ document.addEventListener("DOMContentLoaded", () => {
const history = res.searchHistory || []; const history = res.searchHistory || [];
historyBox.innerHTML = ""; historyBox.innerHTML = "";
if (history.length === 0) { if (history.length === 0) {
historyBox.classList.add("hidden"); historyWrapper.classList.add("hidden");
return; return;
} }
@ -71,7 +80,7 @@ document.addEventListener("DOMContentLoaded", () => {
historyBox.appendChild(tag); historyBox.appendChild(tag);
}); });
historyBox.classList.remove("hidden"); historyWrapper.classList.remove("hidden");
}); });
} }
@ -135,7 +144,10 @@ document.addEventListener("DOMContentLoaded", () => {
function triggerSearch() { function triggerSearch() {
const inputValue = input.value.trim(); const inputValue = input.value.trim();
if (!inputValue) return; if (!inputValue) {
clearResults();
return;
}
const keywords = inputValue.split(/\s+/).filter(Boolean); const keywords = inputValue.split(/\s+/).filter(Boolean);
updateHistory(inputValue); updateHistory(inputValue);
fetchResults(keywords, 1); fetchResults(keywords, 1);
@ -147,8 +159,19 @@ document.addEventListener("DOMContentLoaded", () => {
}); });
input.addEventListener("focus", renderHistoryTags); input.addEventListener("focus", renderHistoryTags);
input.addEventListener("input", () => {
if (!input.value.trim()) clearResults();
});
input.addEventListener("blur", () => { input.addEventListener("blur", () => {
setTimeout(() => historyBox.classList.add("hidden"), 200); setTimeout(() => historyWrapper.classList.add("hidden"), 200);
});
clearHistoryBtn.addEventListener("click", () => {
chrome.storage.local.remove("searchHistory", () => {
log("历史记录已清空");
renderHistoryTags();
});
}); });
log("插件初始化完成"); log("插件初始化完成");

View File

@ -147,3 +147,63 @@ h1 {
.pagination button:hover { .pagination button:hover {
background-color: #ddd; background-color: #ddd;
} }
/* 基础结构样式保持不变,新增按钮样式 */
#clearHistoryBtn {
background: #f8f8f8;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
line-height: 28px;
height: 32px;
}
#clearHistoryBtn:hover {
background-color: #eee;
}
/* 原样式基础上追加 */
.history-wrapper {
margin-bottom: 10px;
}
.history-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
margin-bottom: 6px;
}
#clearHistoryBtn {
background: #f8f8f8;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
padding: 2px 8px;
cursor: pointer;
line-height: 20px;
}
#clearHistoryBtn:hover {
background-color: #eee;
}
.delete-icon {
width: 16px;
height: 16px;
max-width: 100%;
object-fit: contain;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s;
}
.delete-icon:hover {
opacity: 1;
background-color: #f0f0f0;
border-radius: 3px;
}