From 0175a7a1d4accfea09e6f01d7aaf9e08c6f73bdc Mon Sep 17 00:00:00 2001 From: hrz <1710360675@qq.com> Date: Wed, 1 Oct 2025 02:52:32 +0800 Subject: [PATCH] =?UTF-8?q?add:=E9=A6=96=E9=A1=B5=E6=99=BA=E8=83=BD?= =?UTF-8?q?=E4=BD=93=E6=B7=BB=E5=8A=A0=E6=90=9C=E7=B4=A2=E8=AE=B0=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- main/manager-web/src/components/HeaderBar.vue | 191 +++++++++++++++++- main/manager-web/src/i18n/en.js | 2 + main/manager-web/src/i18n/zh_CN.js | 2 + main/manager-web/src/i18n/zh_TW.js | 2 + 4 files changed, 191 insertions(+), 6 deletions(-) diff --git a/main/manager-web/src/components/HeaderBar.vue b/main/manager-web/src/components/HeaderBar.vue index e6048b00..1941e795 100644 --- a/main/manager-web/src/components/HeaderBar.vue +++ b/main/manager-web/src/components/HeaderBar.vue @@ -66,10 +66,29 @@
- - - +
+ + + + +
+
+ {{ $t('header.searchHistory') }} + + {{ $t('header.clearHistory') }} + +
+
+
+ {{ item }} + +
+
+
+
@@ -99,7 +118,7 @@ {{ $t('header.changePassword') - }} + }} {{ $t('header.logout') }} @@ -134,7 +153,12 @@ export default { userDropdownVisible: false, paramDropdownVisible: false, languageDropdownVisible: false, - isSmallScreen: false + isSmallScreen: false, + // 搜索历史相关 + searchHistory: [], + showHistory: false, + SEARCH_HISTORY_KEY: 'xiaozhi_search_history', + MAX_HISTORY_COUNT: 3 } }, computed: { @@ -165,6 +189,8 @@ export default { this.fetchUserInfo(); this.checkScreenSize(); window.addEventListener('resize', this.checkScreenSize); + // 从localStorage加载搜索历史 + this.loadSearchHistory(); }, //移除事件监听器 beforeDestroy() { @@ -222,6 +248,9 @@ export default { return; } + // 保存搜索历史 + this.saveSearchHistory(searchValue); + try { // 创建不区分大小写的正则表达式 const regex = new RegExp(searchValue, 'i'); @@ -234,6 +263,85 @@ export default { showClose: true }); } + + // 搜索完成后让输入框失去焦点，从而触发blur事件隐藏搜索历史 + if (this.$refs.searchInput) { + this.$refs.searchInput.blur(); + } + }, + + // 显示搜索历史 + showSearchHistory() { + this.showHistory = true; + }, + + // 隐藏搜索历史 + hideSearchHistory() { + // 延迟隐藏，以便点击事件能够执行 + setTimeout(() => { + this.showHistory = false; + }, 200); + }, + + // 加载搜索历史 + loadSearchHistory() { + try { + const history = localStorage.getItem(this.SEARCH_HISTORY_KEY); + if (history) { + this.searchHistory = JSON.parse(history); + } + } catch (error) { + console.error('加载搜索历史失败:', error); + this.searchHistory = []; + } + }, + + // 保存搜索历史 + saveSearchHistory(keyword) { + if (!keyword || this.searchHistory.includes(keyword)) { + return; + } + + // 添加到历史记录开头 + this.searchHistory.unshift(keyword); + + // 限制历史记录数量 + if (this.searchHistory.length > this.MAX_HISTORY_COUNT) { + this.searchHistory = this.searchHistory.slice(0, this.MAX_HISTORY_COUNT); + } + + // 保存到localStorage + try { + localStorage.setItem(this.SEARCH_HISTORY_KEY, JSON.stringify(this.searchHistory)); + } catch (error) { + console.error('保存搜索历史失败:', error); + } + }, + + // 选择搜索历史项 + selectSearchHistory(keyword) { + this.search = keyword; + this.handleSearch(); + }, + + // 移除单个搜索历史项 + removeSearchHistory(index) { + this.searchHistory.splice(index, 1); + try { + localStorage.setItem(this.SEARCH_HISTORY_KEY, JSON.stringify(this.searchHistory)); + } catch (error) { + console.error('更新搜索历史失败:', error); + } + }, + + // 清空所有搜索历史 + clearSearchHistory() { + this.searchHistory = []; + try { + localStorage.removeItem(this.SEARCH_HISTORY_KEY); + } catch (error) { + console.error('清空搜索历史失败:', error); + } }, // 显示修改密码弹窗 showChangePasswordDialog() { @@ -371,6 +479,77 @@ export default { max-width: none; } +.search-wrapper { + position: relative; +} + +.search-history-dropdown { + position: absolute; + top: 100%; + left: 0; + right: 0; + background: white; + border: 1px solid #e4e6ef; + border-radius: 4px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + z-index: 1000; + margin-top: 2px; +} + +.search-history-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 12px; + border-bottom: 1px solid #f0f0f0; + font-size: 12px; + color: #909399; +} + +.clear-history-btn { + color: #909399; + font-size: 11px; + padding: 0; + height: auto; +} + +.clear-history-btn:hover { + color: #606266; +} + +.search-history-list { + max-height: 200px; + overflow-y: auto; +} + +.search-history-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 12px; + cursor: pointer; + font-size: 12px; + color: #606266; +} + +.search-history-item:hover { + background-color: #f5f7fa; +} + +.clear-item-icon { + font-size: 10px; + color: #909399; + visibility: hidden; +} + +.search-history-item:hover .clear-item-icon { + visibility: visible; +} + +.clear-item-icon:hover { + color: #ff4949; +} + .custom-search-input>>>.el-input__inner { height: 18px; border-radius: 9px; diff --git a/main/manager-web/src/i18n/en.js b/main/manager-web/src/i18n/en.js index c3650da2..e1166979 100644 --- a/main/manager-web/src/i18n/en.js +++ b/main/manager-web/src/i18n/en.js @@ -15,6 +15,8 @@ export default { 'header.paramManagement': 'Params Management', 'header.dictManagement': 'Dict Management', 'header.agentTemplate': 'Default Role Templates', // 添加这一行 + 'header.searchHistory': 'Search History', + 'header.clearHistory': 'Clear History', // McpToolCallDialog component text 'mcpToolCall.title': 'Tool Call', diff --git a/main/manager-web/src/i18n/zh_CN.js b/main/manager-web/src/i18n/zh_CN.js index 79d6a49a..6afc2426 100644 --- a/main/manager-web/src/i18n/zh_CN.js +++ b/main/manager-web/src/i18n/zh_CN.js @@ -15,6 +15,8 @@ export default { 'header.paramManagement': '参数管理', 'header.dictManagement': '字典管理', 'header.agentTemplate': '默认角色模板', + 'header.searchHistory': '搜索历史', + 'header.clearHistory': '清空历史', // McpToolCallDialog组件文本 'mcpToolCall.title': '工具调用', diff --git a/main/manager-web/src/i18n/zh_TW.js b/main/manager-web/src/i18n/zh_TW.js index f03cc97d..e9defa8e 100644 --- a/main/manager-web/src/i18n/zh_TW.js +++ b/main/manager-web/src/i18n/zh_TW.js @@ -15,6 +15,8 @@ export default { 'header.paramManagement': '參數管理', 'header.dictManagement': '字典管理', 'header.agentTemplate': '預設角色模板', // 添加这一行 + 'header.searchHistory': '搜索歷史', + 'header.clearHistory': '清空歷史', // McpToolCallDialog组件文本 'mcpToolCall.title': '工具調用',