From 08e84d194ff24efca6092d1a9ab77d886418300b Mon Sep 17 00:00:00 2001
From: MerCry <jiong1114>
Date: Wed, 25 Feb 2026 14:45:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20RAG=E5=AE=9E=E9=AA=8C=E5=AE=A4=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E6=8C=81=E4=B9=85=E5=8C=96=E4=B8=8ELLM=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8=E4=BC=98=E5=8C=96=20[AC-ASA-05,=20AC-ASA-14,?=
 =?UTF-8?q?=20AC-ASA-15]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增ragLab store，使用localStorage持久化RAG实验参数
- 修复LLM选择器placeholder显示逻辑，正确显示当前配置
- 添加'已选择'标签区分用户选择与系统默认配置
- 优化下拉框样式防止标签被遮挡
---
 ai-service-admin/src/stores/ragLab.ts        | 41 +++++++++++
 ai-service-admin/src/views/rag-lab/index.vue | 75 ++++++++++----------
 2 files changed, 80 insertions(+), 36 deletions(-)
 create mode 100644 ai-service-admin/src/stores/ragLab.ts

diff --git a/ai-service-admin/src/stores/ragLab.ts b/ai-service-admin/src/stores/ragLab.ts
new file mode 100644
index 0000000..63ffe75
--- /dev/null
+++ b/ai-service-admin/src/stores/ragLab.ts
@@ -0,0 +1,41 @@
+import { defineStore } from 'pinia'
+import { ref, watch } from 'vue'
+
+export const useRagLabStore = defineStore('ragLab', () => {
+  const query = ref(localStorage.getItem('ragLab_query') || '')
+  const kbIds = ref<string[]>(JSON.parse(localStorage.getItem('ragLab_kbIds') || '[]'))
+  const llmProvider = ref(localStorage.getItem('ragLab_llmProvider') || '')
+  const topK = ref(parseInt(localStorage.getItem('ragLab_topK') || '3', 10))
+  const scoreThreshold = ref(parseFloat(localStorage.getItem('ragLab_scoreThreshold') || '0.5'))
+  const generateResponse = ref(localStorage.getItem('ragLab_generateResponse') !== 'false')
+  const streamOutput = ref(localStorage.getItem('ragLab_streamOutput') === 'true')
+
+  watch(query, (val) => localStorage.setItem('ragLab_query', val))
+  watch(kbIds, (val) => localStorage.setItem('ragLab_kbIds', JSON.stringify(val)), { deep: true })
+  watch(llmProvider, (val) => localStorage.setItem('ragLab_llmProvider', val))
+  watch(topK, (val) => localStorage.setItem('ragLab_topK', String(val)))
+  watch(scoreThreshold, (val) => localStorage.setItem('ragLab_scoreThreshold', String(val)))
+  watch(generateResponse, (val) => localStorage.setItem('ragLab_generateResponse', String(val)))
+  watch(streamOutput, (val) => localStorage.setItem('ragLab_streamOutput', String(val)))
+
+  const clearParams = () => {
+    query.value = ''
+    kbIds.value = []
+    llmProvider.value = ''
+    topK.value = 3
+    scoreThreshold.value = 0.5
+    generateResponse.value = true
+    streamOutput.value = false
+  }
+
+  return {
+    query,
+    kbIds,
+    llmProvider,
+    topK,
+    scoreThreshold,
+    generateResponse,
+    streamOutput,
+    clearParams
+  }
+})
diff --git a/ai-service-admin/src/views/rag-lab/index.vue b/ai-service-admin/src/views/rag-lab/index.vue
index f307871..b5af4e5 100644
--- a/ai-service-admin/src/views/rag-lab/index.vue
+++ b/ai-service-admin/src/views/rag-lab/index.vue
@@ -21,7 +21,7 @@
           <el-form label-position="top">
             <el-form-item label="查询 Query">
               <el-input
-                v-model="queryParams.query"
+                v-model="query"
                 type="textarea"
                 :rows="4"
                 placeholder="输入测试问题..."
@@ -29,7 +29,7 @@
             </el-form-item>
             <el-form-item label="知识库范围">
               <el-select
-                v-model="queryParams.kbIds"
+                v-model="kbIds"
                 multiple
                 placeholder="请选择知识库"
                 style="width: 100%"
@@ -47,7 +47,7 @@
             </el-form-item>
             <el-form-item label="LLM 模型">
               <LLMSelector
-                v-model="queryParams.llmProvider"
+                v-model="llmProvider"
                 :providers="llmProviders"
                 :loading="llmLoading"
                 :current-provider="currentLLMProvider"
@@ -59,12 +59,12 @@
             <el-form-item label="参数配置">
               <div class="param-item">
                 <span class="label">Top-K</span>
-                <el-input-number v-model="queryParams.topK" :min="1" :max="10" />
+                <el-input-number v-model="topK" :min="1" :max="10" />
               </div>
               <div class="param-item">
                 <span class="label">Score Threshold</span>
                 <el-slider
-                  v-model="queryParams.scoreThreshold"
+                  v-model="scoreThreshold"
                   :min="0"
                   :max="1"
                   :step="0.1"
@@ -73,11 +73,11 @@
               </div>
               <div class="param-item">
                 <span class="label">生成 AI 回复</span>
-                <el-switch v-model="queryParams.generateResponse" />
+                <el-switch v-model="generateResponse" />
               </div>
-              <div class="param-item" v-if="queryParams.generateResponse">
+              <div class="param-item" v-if="generateResponse">
                 <span class="label">流式输出</span>
-                <el-switch v-model="queryParams.streamOutput" />
+                <el-switch v-model="streamOutput" />
               </div>
             </el-form-item>
             <el-button 
@@ -130,9 +130,9 @@
               <pre><code>{{ finalPrompt }}</code></pre>
             </div>
           </el-tab-pane>
-          <el-tab-pane label="AI 回复" name="ai-response" v-if="queryParams.generateResponse">
+          <el-tab-pane label="AI 回复" name="ai-response" v-if="generateResponse">
             <StreamOutput
-              v-if="queryParams.streamOutput"
+              v-if="streamOutput"
               :content="streamContent"
               :is-streaming="streaming"
               :error="streamError"
@@ -157,12 +157,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from 'vue'
+import { ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Edit } from '@element-plus/icons-vue'
 import { runRagExperiment, createSSEConnection, type AIResponse, type RetrievalResult } from '@/api/rag'
 import { getLLMProviders, getLLMConfig, type LLMProviderInfo } from '@/api/llm'
 import { listKnowledgeBases } from '@/api/kb'
+import { useRagLabStore } from '@/stores/ragLab'
+import { storeToRefs } from 'pinia'
 import AIResponseViewer from '@/components/rag/AIResponseViewer.vue'
 import StreamOutput from '@/components/rag/StreamOutput.vue'
 import LLMSelector from '@/components/rag/LLMSelector.vue'
@@ -173,6 +175,17 @@ interface KnowledgeBase {
   documentCount: number
 }
 
+const ragLabStore = useRagLabStore()
+const { 
+  query, 
+  kbIds, 
+  llmProvider, 
+  topK, 
+  scoreThreshold, 
+  generateResponse, 
+  streamOutput 
+} = storeToRefs(ragLabStore)
+
 const loading = ref(false)
 const kbLoading = ref(false)
 const llmLoading = ref(false)
@@ -182,16 +195,6 @@ const knowledgeBases = ref<KnowledgeBase[]>([])
 const llmProviders = ref<LLMProviderInfo[]>([])
 const currentLLMProvider = ref('')
 
-const queryParams = reactive({
-  query: '',
-  kbIds: [] as string[],
-  llmProvider: '',
-  topK: 3,
-  scoreThreshold: 0.5,
-  generateResponse: true,
-  streamOutput: false
-})
-
 const retrievalResults = ref<RetrievalResult[]>([])
 const finalPrompt = ref('')
 const aiResponse = ref<AIResponse | null>(null)
@@ -232,18 +235,18 @@ const fetchLLMProviders = async () => {
 }
 
 const handleLLMChange = (provider: LLMProviderInfo | undefined) => {
-  queryParams.llmProvider = provider?.name || ''
+  llmProvider.value = provider?.name || ''
 }
 
 const handleRun = async () => {
-  if (!queryParams.query.trim()) {
+  if (!query.value.trim()) {
     ElMessage.warning('请输入查询 Query')
     return
   }
 
   clearResults()
   
-  if (queryParams.streamOutput && queryParams.generateResponse) {
+  if (streamOutput.value && generateResponse.value) {
     await runStreamExperiment()
   } else {
     await runNormalExperiment()
@@ -254,12 +257,12 @@ const runNormalExperiment = async () => {
   loading.value = true
   try {
     const res: any = await runRagExperiment({
-      query: queryParams.query,
-      kb_ids: queryParams.kbIds,
-      top_k: queryParams.topK,
-      score_threshold: queryParams.scoreThreshold,
-      llm_provider: queryParams.llmProvider || undefined,
-      generate_response: queryParams.generateResponse
+      query: query.value,
+      kb_ids: kbIds.value,
+      top_k: topK.value,
+      score_threshold: scoreThreshold.value,
+      llm_provider: llmProvider.value || undefined,
+      generate_response: generateResponse.value
     })
     
     retrievalResults.value = res.retrieval_results || res.retrievalResults || []
@@ -268,7 +271,7 @@ const runNormalExperiment = async () => {
     diagnostics.value = res.diagnostics || null
     totalLatencyMs.value = res.total_latency_ms || res.totalLatencyMs || 0
     
-    if (queryParams.generateResponse) {
+    if (generateResponse.value) {
       activeTab.value = 'ai-response'
     } else {
       activeTab.value = 'retrieval'
@@ -292,11 +295,11 @@ const runStreamExperiment = async () => {
   abortStream = createSSEConnection(
     '/admin/rag/experiments/stream',
     {
-      query: queryParams.query,
-      kb_ids: queryParams.kbIds,
-      top_k: queryParams.topK,
-      score_threshold: queryParams.scoreThreshold,
-      llm_provider: queryParams.llmProvider || undefined,
+      query: query.value,
+      kb_ids: kbIds.value,
+      top_k: topK.value,
+      score_threshold: scoreThreshold.value,
+      llm_provider: llmProvider.value || undefined,
       generate_response: true
     },
     (data: string) => {