From 60c1e9b45af9b4cfa33f4ff10bbfbf3215d90c33 Mon Sep 17 00:00:00 2001
From: jhy <184825448@qq.com>
Date: Thu, 15 Oct 2026 20:09:48 +0800
Subject: [PATCH] feat: improve source search interaction

---
 frontend/src/App.vue          | 4 +++-
 frontend/src/enhancements.css | 1 +
 frontend/src/main.ts          | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/enhancements.css

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 5a4e7a8..f3e80d1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { Activity, BookOpen, Bot, CheckCircle2, ChevronRight, Database, FileText, Globe2, Link2, MessageSquareText, Plus, Search, Send, ShieldCheck, Sparkles, AlertCircle } from 'lucide-vue-next'
 import { askQuestion, createKnowledge, createSource, getHealth, getKnowledge, getSources, type SourceItem } from './api'
 type Page='chat'|'knowledge'|'sources'|'evaluation'
@@ -12,6 +12,8 @@ const filtered=computed(()=>items.value.filter(x=>`${x.title} ${x.category} ${x.
 async function refresh(){try{items.value=await getKnowledge();error.value=''}catch{error.value='无法读取后端知识库，请确认 API 和 PostgreSQL 已启动。'}}
 async function refreshSources(){try{sources.value=(await getSources(sourceSearch.value)).items;error.value=''}catch{error.value='无法读取来源列表，请确认 API 和 PostgreSQL 已启动。'}}
 async function saveSource(){error.value='';notice.value='';try{await createSource({...sourceForm.value,...(sourceForm.value.source_url?{source_url:sourceForm.value.source_url}:{})});sourceForm.value={name:'',source_url:'',notes:''};showSourceForm.value=false;notice.value='来源已登记，可继续创建关联文档和知识条目。';await refreshSources()}catch(e){error.value=e instanceof Error?e.message:'保存失败'}}
+let sourceSearchTimer:number|undefined
+watch(sourceSearch,()=>{window.clearTimeout(sourceSearchTimer);sourceSearchTimer=window.setTimeout(refreshSources,260)})
 onMounted(async()=>{try{await getHealth();apiStatus.value='已连接'}catch{apiStatus.value='未连接'}await Promise.all([refresh(),refreshSources()])})
 async function send(){const q=question.value.trim();if(!q||busy.value)return;messages.value.push({role:'user',content:q});question.value='';busy.value=true;try{const r=await askQuestion(q);messages.value.push({role:'assistant',content:r.answer,sources:r.sources})}catch{messages.value.push({role:'assistant',content:'暂时无法连接后端 API。请确认 FastAPI 已启动。'})}finally{busy.value=false}}
 async function save(){error.value='';notice.value='';try{await createKnowledge({...form.value,...(form.value.source_url?{source_url:form.value.source_url}:{})});form.value={title:'',category:'旅游资源',content:'',source_url:''};showForm.value=false;notice.value='已保存为待审核条目，尚未进入检索索引。';await refresh()}catch(e){error.value=e instanceof Error?e.message:'保存失败'}}
diff --git a/frontend/src/enhancements.css b/frontend/src/enhancements.css
new file mode 100644
index 0000000..b310e6d
--- /dev/null
+++ b/frontend/src/enhancements.css
@@ -0,0 +1 @@
+.search:focus-within{border-color:#8eaa91;box-shadow:0 0 0 3px #dcebdc}.knowledge-form input:focus,.knowledge-form select:focus,.knowledge-form textarea:focus{border-color:#7e9f83;box-shadow:0 0 0 3px #e4f0e4}.table-card tbody tr{transition:background .15s ease}.table-card tbody tr:hover{background:#fafbf7}.success,.error{animation:feedback-in .2s ease-out}@keyframes feedback-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index d47787a..c409869 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import './style.css'
+import './enhancements.css'
 import App from './App.vue'
 createApp(App).mount('#app')