Merge branch 'feature_addSpiderData' of algorithm/rag-web into master

src/views/DataCrawling/index.vue

@@ -48,8 +48,15 @@
                     {{ selectedTask?.need_store === NeedStoreEnum.需要存储 ? '是' : '否' }}
                 </el-descriptions-item>
             </el-descriptions>
-            <el-collapse @change="handleCollapseChange">
-                <el-collapse-item v-for="query in selectedQueries" :key="query.query" :title="query.query" :name="query.query">
+            <div class="querys-header">Query词条</div>
+            <el-collapse accordion @change="handleCollapseChange">
+                <el-collapse-item 
+                    v-for="query in selectedQueries" 
+                    :key="query.query" 
+                    :title="query.query" 
+                    :name="query.query" 
+                    class="query-title"
+                >
                     <div v-loading="query.loading" class="query-data-container">
                         <div v-if="query.data" class="query-data-content">
                             {{ query.data }}
@@ -90,10 +97,12 @@ export default defineComponent({
         const selectedTaskId = ref<string | null>(null);
         const selectedTask = ref<QuestionTask | null>(null);
         const selectedQueries = ref<QueryTask[]>([]);
+        const activeCollapseName = ref<string | number | null>(null);
         // 监听selectedTaskId变化
         watch(selectedTaskId, (newVal) => {
             selectedTask.value = questionTasks.value.find(task => task.task_id === newVal) || null;
             selectedQueries.value = selectedTask.value?.queries || [];
+            activeCollapseName.value = null; // 重置展开状态
         });
 
         const renderTaskStatus = (status: TaskStatusEnum) => {
@@ -128,45 +137,42 @@ export default defineComponent({
             selectedTaskId.value = taskId;
         };
         
-        const handleCollapseChange = async (activeNames: string | number | (string | number)[]) => {
-            // 如果是展开操作（activeNames 是数组且有内容，或者是字符串/数字）
-            const expandedQueries = Array.isArray(activeNames) ? activeNames : [activeNames];
+        const handleCollapseChange = async (activeName: string | number | (string | number)[]) => {
+            console.log('activeName:', activeName);
+            // 查找对应的 query
+            const query = selectedQueries.value.find(q => q.query === activeName);
             
-            for (const queryName of expandedQueries) {
-                const query = selectedQueries.value.find(q => q.query === queryName);
+            // 如果这个 query 已经有数据了，就不再请求
+            if (query && !query.data && !query.loading) {
+                query.loading = true;
                 
-                // 如果这个 query 已经有数据了，就不再请求
-                if (query && !query.data && !query.loading) {
-                    query.loading = true;
+                try {
+                    // 第一步：请求 knowledge-query/data 接口
+                    const queryResponse = await axios.get(`${DATA_CRAWLING_BASE_URL}/knowledge-query/data`, {
+                        params: {
+                            suggest_task_id: query.task_id || selectedTaskId.value,
+                            query: query.query,
+                        },
+                    });
                     
-                    try {
-                        // 第一步：请求 knowledge-query/data 接口
-                        const queryResponse = await axios.get(`${DATA_CRAWLING_BASE_URL}/knowledge-query/data`, {
+                    if (queryResponse.data && queryResponse.data.request_id) {
+                        query.request_id = queryResponse.data.request_id;
+                        
+                        // 第二步：使用 request_id 请求 knowledge-store/data 接口
+                        const storeResponse = await axios.get(`${DATA_CRAWLING_BASE_URL}/knowledge-store/data`, {
                             params: {
-                                suggest_task_id: query.task_id,
-                                query: query.query,
+                                request_id: query.request_id,
                             },
                         });
                         
-                        if (queryResponse.data && queryResponse.data.request_id) {
-                            query.request_id = queryResponse.data.request_id;
-                            
-                            // 第二步：使用 request_id 请求 knowledge-store/data 接口
-                            const storeResponse = await axios.get(`${DATA_CRAWLING_BASE_URL}/knowledge-store/data`, {
-                                params: {
-                                    request_id: query.request_id,
-                                },
-                            });
-                            
-                            if (storeResponse.data && storeResponse.data.data) {
-                                query.data = storeResponse.data.data;
-                            }
+                        if (storeResponse.data && storeResponse.data.data) {
+                            query.data = storeResponse.data.data;
                         }
-                    } catch (error) {
-                        console.error('Error fetching query data:', error);
-                    } finally {
-                        query.loading = false;
                     }
+                } catch (error) {
+                    console.error('Error fetching query data:', error);
+                } finally {
+                    query.loading = false;
                 }
             }
         };
@@ -275,7 +281,7 @@ export default defineComponent({
 }
 
 .task-question {
-    font-size: 14px;
+    font-size: 16px;
     color: #333;
     line-height: 1.6;
     font-weight: 500;
@@ -304,4 +310,25 @@ export default defineComponent({
     font-size: 14px;
     padding: 40px;
 }
+
+.task-detail-container :deep(.el-descriptions__title) {
+    font-size: 18px;
+    line-height: 1.6;
+    font-weight: 500;
+    color: #666;
+    margin: 10px 0 0;
+}
+
+.querys-header {
+    font-size: 18px;
+    line-height: 1.6;
+    font-weight: 500;
+    color: #666;
+    margin: 25px 0 15px 0;
+}
+
+.query-title :deep(.el-collapse-item__header) {
+    font-size: 15px;
+    color: #333;
+}
 </style>