数据爬取页面逻辑完善

src/config.ts

@@ -1,3 +1,8 @@
 export const API_BASE_URL = "http://61.48.133.26:8001/api";
-export const DATA_CRAWLING_BASE_URL = "/api/crawling";
+
+// 开发环境使用代理，生产环境使用完整URL
+export const DATA_CRAWLING_BASE_URL = process.env.NODE_ENV === 'development' 
+  ? '/api/data-crawling' 
+  : 'http://8.219.186.16:8079';
+
 // export const API_BASE_URL = "http://127.0.0.1:8001/api";

src/types/DataCrawing.ts

@@ -1,17 +1,18 @@
 export enum KnowledgeType {
-    内容知识 = '内容知识',
-    工具知识 = '工具知识',
+    '内容知识' = '内容知识',
+    '工具知识' = '工具知识',
+    '工具使用知识' = '工具使用知识',
 }
 
 export enum QueryTypeEnum {
-    How = 'How',
-    What = 'What',
-    Pattern = 'Pattern',
+    'How' = 'How',
+    'What' = 'What',
+    'Pattern' = 'Pattern',
 }
 
 export enum NeedStoreEnum {
-    不需要存储 = 0,
-    需要存储 = 1,
+    '不需要存储' = 0,
+    '需要存储' = 1,
 }
 
 export enum TaskStatusEnum {
@@ -24,16 +25,20 @@ export enum TaskStatusEnum {
 export interface QueryTask {
     query: string;
     knowledgeType: KnowledgeType;
-    suggestTaskId: string;
+    task_id: string;
+    request_id?: string;
+    data?: string;
+    loading?: boolean;
 }
 
 export interface QuestionTask {
     question: string;
     task_id: string;
     status: TaskStatusEnum;
+    statusText: string;
     queries: QueryTask[];
     knowledgeType: KnowledgeType;
-    queryType: QueryTypeEnum;
+    query_type: QueryTypeEnum;
     need_store: NeedStoreEnum;
 
 }

src/views/DataCrawling/index.vue

@@ -24,11 +24,42 @@
             </div>
         </div>
         <div class="task-detail-container">
-            <div class="task-detail-id">{{ selectedTask?.task_id }}</div>
-            <div class="task-detail-status">{{ selectedTask?.status }}</div>
-            <div class="task-detail-created_at" v-for="query in selectedTask?.queries" :key="query.query">
-                {{ query.query }}
-            </div>
+            <el-descriptions
+                class="margin-top"
+                title="任务详情"
+                :column="3"
+                border
+                v-if="selectedTask"
+            >
+                <el-descriptions-item label="任务ID">
+                    {{ selectedTask?.task_id }}
+                </el-descriptions-item>
+                <el-descriptions-item label="问题">
+                    {{ selectedTask?.question }}
+                </el-descriptions-item>
+                <el-descriptions-item label="任务状态">{{ selectedTask?.statusText }}</el-descriptions-item>
+                <el-descriptions-item label="知识类别">
+                    {{ KnowledgeType[selectedTask?.knowledgeType] || '' }}
+                </el-descriptions-item>
+                <el-descriptions-item label="内容知识子类别">
+                    {{ QueryTypeEnum[selectedTask?.query_type] || '-' }}
+                </el-descriptions-item>
+                <el-descriptions-item label="是否需要存储">
+                    {{ 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 v-loading="query.loading" class="query-data-container">
+                        <div v-if="query.data" class="query-data-content">
+                            {{ query.data }}
+                        </div>
+                        <div v-else-if="!query.loading" class="query-data-empty">
+                            暂无数据
+                        </div>
+                    </div>
+                </el-collapse-item>
+            </el-collapse>
         </div>
     </div>
     
@@ -37,15 +68,18 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch } from 'vue';
-import { ElPagination } from 'element-plus';
+import { ElPagination, ElDescriptions, ElCollapse, ElCollapseItem } from 'element-plus';
 import { DATA_CRAWLING_BASE_URL } from "@/config";
 import axios from 'axios';
-import { QuestionTask } from '@/types/DataCrawing';
+import { KnowledgeType, NeedStoreEnum, QueryTask, QueryTypeEnum, QuestionTask, TaskStatusEnum } from '@/types/DataCrawing';
 
 export default defineComponent({
     name: 'DataCrawling',
     components: {
         ElPagination,
+        ElDescriptions,
+        ElCollapse,
+        ElCollapseItem,
     },
     setup() {
         const questionTasks = ref<QuestionTask[]>([]);
@@ -55,10 +89,16 @@ export default defineComponent({
         const loading = ref(false);
         const selectedTaskId = ref<string | null>(null);
         const selectedTask = ref<QuestionTask | null>(null);
+        const selectedQueries = ref<QueryTask[]>([]);
         // 监听selectedTaskId变化
         watch(selectedTaskId, (newVal) => {
             selectedTask.value = questionTasks.value.find(task => task.task_id === newVal) || null;
+            selectedQueries.value = selectedTask.value?.queries || [];
         });
+
+        const renderTaskStatus = (status: TaskStatusEnum) => {
+            return TaskStatusEnum[status];
+        };
         const fetchData = async () => {
             loading.value = true;
             try {
@@ -87,6 +127,50 @@ export default defineComponent({
         const handleTaskClick = (taskId: string) => {
             selectedTaskId.value = taskId;
         };
+        
+        const handleCollapseChange = async (activeNames: string | number | (string | number)[]) => {
+            // 如果是展开操作（activeNames 是数组且有内容，或者是字符串/数字）
+            const expandedQueries = Array.isArray(activeNames) ? activeNames : [activeNames];
+            
+            for (const queryName of expandedQueries) {
+                const query = selectedQueries.value.find(q => q.query === queryName);
+                
+                // 如果这个 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,
+                                query: query.query,
+                            },
+                        });
+                        
+                        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;
+                            }
+                        }
+                    } catch (error) {
+                        console.error('Error fetching query data:', error);
+                    } finally {
+                        query.loading = false;
+                    }
+                }
+            }
+        };
+        
         fetchData();
         return {
             questionTasks,
@@ -98,6 +182,12 @@ export default defineComponent({
             selectedTaskId,
             selectedTask,
             handleTaskClick,
+            renderTaskStatus,
+            NeedStoreEnum,
+            KnowledgeType,
+            QueryTypeEnum,
+            selectedQueries,
+            handleCollapseChange,
         };
     },
 });
@@ -190,4 +280,28 @@ export default defineComponent({
     line-height: 1.6;
     font-weight: 500;
 }
+
+.query-data-container {
+    padding: 16px;
+    min-height: 100px;
+}
+
+.query-data-content {
+    font-size: 14px;
+    color: #333;
+    line-height: 1.8;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    background: #f8f9fa;
+    padding: 16px;
+    border-radius: 6px;
+    border-left: 3px solid rgba(138, 147, 228, 0.6);
+}
+
+.query-data-empty {
+    text-align: center;
+    color: #999;
+    font-size: 14px;
+    padding: 40px;
+}
 </style>

vue.config.js

@@ -3,11 +3,11 @@ module.exports = defineConfig({
   transpileDependencies: true,
   devServer: {
     proxy: {
-      '/api/crawling': {
+      '/api/data-crawling': {
         target: 'http://8.219.186.16:8079',
         changeOrigin: true,
         pathRewrite: {
-          '^/api/crawling': ''
+          '^/api/data-crawling': ''
         }
       }
     }