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

优化UI

Browse Source
This commit is contained in:
luke 2025-05-28 23:46:54 +08:00
parent 64dad6ed63
commit af4f2965ab
3 changed files with 101 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
pages/popup.html
View File

@ -6,49 +6,53 @@
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="header">
<img src="../assets/icon.png" alt="logo" class="logo" />
<h1>渠道应用开发部知识库</h1>
<a href="https://oa.ahrcu.com/sys/portal/page.jsp" target="_blank" class="oa-link">跳转OA</a>
<div class="draggable-panel" id="draggablePanel">
<div class="header">
<img src="../assets/icon.png" alt="logo" class="logo" />
<h1>渠道应用开发部知识库</h1>
<a href="https://oa.ahrcu.com/sys/portal/page.jsp" target="_blank" class="oa-link">跳转OA</a>
<button class="open-tab-btn" id="openTabBtn" title="以标签页方式打开">↗</button>
<div class="user-menu">
<div class="user-avatar" id="userAvatar">👤</div>
<div class="user-dropdown hidden" id="userDropdown">
<div id="userName">未登录</div>
<div id="logoutBtn" class="logout-option">退出登录</div>
</div>
</div>
</div>
<div class="container">
<div class="search-bar">
<input id="searchInput" type="text" autocomplete="off" placeholder="请输入关键词（空格分隔）..." />
<button id="searchBtn">搜索</button>
</div>
<div class="user-menu">
<div class="user-avatar" id="userAvatar">👤</div>
<div class="user-dropdown hidden" id="userDropdown">
<div id="userName">未登录</div>
<div id="logoutBtn" class="logout-option">退出登录</div>
<div class="tab-bar">
<button class="tab-btn active" id="tabEs">知识库文档</button>
<button class="tab-btn" id="tabAi">智能助手</button>
</div>
<div id="tabContentEs" class="tab-content active">
<div class="history-wrapper hidden" id="historyWrapper">
<div class="history-header">
<span>历史搜索：</span>
<img id="clearHistoryBtn" src="../assets/delete.png" title="清空历史记录" class="delete-icon" />
</div>
<div id="historyTags" class="tag-history"></div>
</div>
<ul id="results"></ul>
</div>
<div id="tabContentAi" class="tab-content">
<div id="llmResultContainer" class="llm-result-container">
<div class="llm-title">智能助手答案</div>
<div class="llm-result-content" id="llmResultContent"></div>
<div class="llm-input-bar">
<input id="llmInput" type="text" placeholder="请输入您的问题..." />
<button id="llmSendBtn">发送</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="search-bar">
<input id="searchInput" type="text" autocomplete="off" placeholder="请输入关键词（空格分隔）..." />
<button id="searchBtn">搜索</button>
</div>
<div class="history-wrapper hidden" id="historyWrapper">
<div class="history-header">
<span>历史搜索：</span>
<img id="clearHistoryBtn" src="../assets/delete.png" title="清空历史记录" class="delete-icon" />
</div>
<div id="historyTags" class="tag-history"></div>
</div>
<!-- AnythingLLM结果区域 -->
<div id="llmResultContainer" class="llm-result-container hidden">
<div class="llm-title">智能助手答案</div>
<div class="llm-result-content" id="llmResultContent"></div>
<div class="llm-input-bar">
<input id="llmInput" type="text" placeholder="请输入您的问题..." />
<button id="llmSendBtn">发送</button>
</div>
</div>
<ul id="results"></ul>
</div>
<script src="popup.js"></script>
</body>
</html>

24
pages/popup.js
View File

@ -30,6 +30,30 @@ document.addEventListener("DOMContentLoaded", async () => {
const LLM_STREAM_API_BASE = "http://llm.wisdompulse.cn/api/workspace";
const LLM_TOKEN_EXPIRE_MS = 23 * 60 * 60 * 1000;
// 新增tab切换功能
const tabEs = document.getElementById("tabEs");
const tabAi = document.getElementById("tabAi");
const tabContentEs = document.getElementById("tabContentEs");
const tabContentAi = document.getElementById("tabContentAi");
tabEs.onclick = function() {
tabEs.classList.add("active");
tabAi.classList.remove("active");
tabContentEs.classList.add("active");
tabContentAi.classList.remove("active");
};
tabAi.onclick = function() {
tabEs.classList.remove("active");
tabAi.classList.add("active");
tabContentEs.classList.remove("active");
tabContentAi.classList.add("active");
// 自动滚动到最底部
setTimeout(() => {
const llmContent = document.getElementById("llmResultContent");
if (llmContent) llmContent.scrollTop = llmContent.scrollHeight;
}, 100);
};
// 动态获取 AnythingLLM 密码
async function getLLMPassword() {
return new Promise((resolve) => {

34
pages/styles.css
View File

@ -403,4 +403,38 @@ h1 {
white-space: pre-wrap;
}
.tab-bar {
display: flex;
margin-bottom: 8px;
border-bottom: 1.5px solid #e2e7f4;
background: #f8fbff;
}
.tab-btn {
flex: 1;
padding: 9px 0;
border: none;
background: #f7faff;
color: #2764bb;
font-weight: bold;
cursor: pointer;
border-bottom: 2.5px solid transparent;
font-size: 15px;
transition: background 0.2s, border-color 0.2s;
}
.tab-btn.active {
background: #e7eefb;
color: #2050b0;
border-bottom: 2.5px solid #3070ed;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* 调整智能助手内容区边距，避免太拥挤 */
#tabContentAi .llm-result-container {
margin-bottom: 0;
}