Merge branch 'main' of http://43.142.9.2:3000/WJB/ai-manus

chat-client/src/locales/en.ts

@@ -296,6 +296,7 @@ export default {
           rename: 'Rename',
           delete: 'Delete',
           deepAnalysis: 'Deep Analysis',
+          taskMonitor: 'Task Monitor',
         },
         search: {
           placeholder: 'Enter keywords to search',
@@ -341,6 +342,38 @@ export default {
           taskId: 'Task ID',
           createTime: 'Create Time',
           close: 'Close',
+          totalTasks: 'Total Tasks',
+          runningTasks: 'Running',
+          completedTasks: 'Completed',
+          completed: 'Completed',
+          running: 'Running',
+          pending: 'Pending',
+        },
+        progressPanel: {
+          title: 'Deep Analysis Progress',
+          show: 'Show Details',
+          hide: 'Hide Details',
+        },
+        tooltips: {
+          hasRunningTasks: '{count} tasks in progress',
+          viewDeepAnalysis: 'View deep analysis tasks',
+          showSidebar: 'Show task monitor panel',
+          hideSidebar: 'Hide task monitor panel',
+        },
+        sidebar: {
+          title: 'Task Monitor',
+        },
+        timeAgo: {
+          justNow: 'Just now',
+          minutes: '{count} minutes ago',
+          hours: '{count} hours ago',
+          days: '{count} days ago',
+        },
+        notifications: {
+          allTasksCompleted: 'Tasks Completed',
+          allTasksCompletedMessage: 'All deep analysis tasks have been completed!',
+          taskCompleted: 'Task Completed',
+          taskCompletedMessage: 'Deep analysis task "{name}" has been completed',
         },
         messages: {
           FilenamecantEmpty: 'Filename cannot be empty',

chat-client/src/locales/zh-TW.ts

@@ -293,6 +293,8 @@ export default {
           download: '下載',
           rename: '重命名',
           delete: '刪除',
+          deepAnalysis: '深度解析',
+          taskMonitor: '任務監控',
         },
         search: {
           placeholder: '請輸入關鍵詞查詢',
@@ -328,6 +330,46 @@ export default {
           confirm: '確定',
           deleteconfirm: '刪除確認',
         },
+        deepAnalysisDialog: {
+          title: '深度解析任務列表',
+          noTasks: '當前沒有正在進行的深度解析任務',
+          datasetName: '知識庫',
+          taskId: '任務ID',
+          createTime: '創建時間',
+          close: '關閉',
+          totalTasks: '總任務數',
+          runningTasks: '進行中',
+          completedTasks: '已完成',
+          completed: '已完成',
+          running: '進行中',
+          pending: '等待中',
+        },
+        progressPanel: {
+          title: '深度解析進度',
+          show: '展開詳情',
+          hide: '收起詳情',
+        },
+        tooltips: {
+          hasRunningTasks: '有 {count} 個任務正在進行',
+          viewDeepAnalysis: '查看深度解析任務',
+          showSidebar: '顯示任務監控面板',
+          hideSidebar: '隱藏任務監控面板',
+        },
+        sidebar: {
+          title: '任務監控',
+        },
+        timeAgo: {
+          justNow: '剛剛',
+          minutes: '{count} 分鐘前',
+          hours: '{count} 小時前',
+          days: '{count} 天前',
+        },
+        notifications: {
+          allTasksCompleted: '任務完成',
+          allTasksCompletedMessage: '所有深度解析任務已完成！',
+          taskCompleted: '任務完成',
+          taskCompletedMessage: '深度解析任務 "{name}" 已完成',
+        },
         messages: {
           FilenamecantEmpty: '文件名不能为空',
           uploadSuccess: '上傳成功',

chat-client/src/locales/zh.ts

@@ -304,6 +304,7 @@ export default {
           rename: '重命名',
           delete: '删除',
           deepAnalysis: '深度解析',
+          taskMonitor: '任务监控',
         },
         search: {
           placeholder: '请输入关键词查询',
@@ -348,6 +349,38 @@ export default {
           taskId: '任务ID',
           createTime: '创建时间',
           close: '关闭',
+          totalTasks: '总任务数',
+          runningTasks: '进行中',
+          completedTasks: '已完成',
+          completed: '已完成',
+          running: '进行中',
+          pending: '等待中',
+        },
+        progressPanel: {
+          title: '深度解析进度',
+          show: '展开详情',
+          hide: '收起详情',
+        },
+        tooltips: {
+          hasRunningTasks: '有 {count} 个任务正在进行',
+          viewDeepAnalysis: '查看深度解析任务',
+          showSidebar: '显示任务监控面板',
+          hideSidebar: '隐藏任务监控面板',
+        },
+        sidebar: {
+          title: '任务监控',
+        },
+        timeAgo: {
+          justNow: '刚刚',
+          minutes: '{count} 分钟前',
+          hours: '{count} 小时前',
+          days: '{count} 天前',
+        },
+        notifications: {
+          allTasksCompleted: '任务完成',
+          allTasksCompletedMessage: '所有深度解析任务已完成！',
+          taskCompleted: '任务完成',
+          taskCompletedMessage: '深度解析任务 "{name}" 已完成',
         },
         messages: {
           FilenamecantEmpty: '文件名不能为空',

chat-client/src/views/datasets/components/DocumentList.vue

@@ -9,7 +9,9 @@
             </div>
         </div>
 
-        <div class="file-manager-container">
+        <!-- 主要内容区域 -->
+        <div class="content-layout" :class="{ 'has-sidebar': showTaskSidebar }">
+            <div class="file-manager-container">
             <!-- 操作栏 -->
             <div class="action-bar">
                 <div class="left-group">
@@ -37,7 +39,26 @@
                         {{t('vabI18n.knowledge.document.buttons.batchDelete', { count: selectedRows.length })}}
                     </el-button>
                     <el-button :icon="Refresh" @click="handleRefresh">{{t('vabI18n.knowledge.document.buttons.refresh')}}</el-button>
-                    <el-button type="info" @click="handleDeepAnalysis">{{t('vabI18n.knowledge.document.buttons.deepAnalysis')}}</el-button>
+                    
+                    <!-- 任务监控切换按钮 -->
+                    <el-tooltip 
+                        :content="showTaskSidebar ? 
+                            t('vabI18n.knowledge.document.tooltips.hideSidebar') : 
+                            t('vabI18n.knowledge.document.tooltips.showSidebar')" 
+                        placement="top"
+                    >
+                        <el-button 
+                            type="info" 
+                            @click="showTaskSidebar ? hideSidebar() : showSidebar()"
+                            :class="{ 'has-running-tasks': hasRunningTasks }"
+                        >
+                            <el-icon v-if="hasRunningTasks" class="rotating-icon"><Loading /></el-icon>
+                            <el-icon v-else><DataAnalysis /></el-icon>
+                            {{t('vabI18n.knowledge.document.buttons.taskMonitor')}}
+                            <el-badge v-if="hasRunningTasks" :value="runningTasksCount" class="task-badge" />
+                        </el-button>
+                    </el-tooltip>
+                    
                     <el-button type="primary" :icon="Upload" @click="triggerFileInput">{{t('vabI18n.knowledge.document.buttons.upload')}}</el-button>
                 </div>
             </div>
@@ -154,6 +175,82 @@
             </div>
         </div>
 
+        <!-- 右侧任务面板 -->
+        <transition name="slide-fade" mode="out-in">
+            <div v-if="showTaskSidebar" class="task-sidebar">
+                <div class="sidebar-header">
+                    <div class="sidebar-title">
+                        <el-icon class="rotating-icon"><Loading /></el-icon>
+                        <span>{{t('vabI18n.knowledge.document.sidebar.title')}}</span>
+                        <el-badge :value="runningTasksCount" class="task-count-badge" />
+                    </div>
+                    <div class="sidebar-actions">
+                        <el-button 
+                            text 
+                            :icon="Refresh" 
+                            @click="fetchDeepAnalysisList"
+                            :loading="deepAnalysisLoading"
+                            size="small"
+                        >
+                            {{t('vabI18n.knowledge.document.buttons.refresh')}}
+                        </el-button>
+                        <el-button 
+                            text 
+                            :icon="Close" 
+                            @click="hideSidebar"
+                            size="small"
+                        />
+                    </div>
+                </div>
+
+                <div class="sidebar-content">
+                    <!-- 快速统计 -->
+                    <div class="quick-stats">
+                        <div class="stat-card">
+                            <div class="stat-number">{{ runningTasksCount }}</div>
+                            <div class="stat-label">{{t('vabI18n.knowledge.document.deepAnalysisDialog.running')}}</div>
+                        </div>
+                        <div class="stat-card">
+                            <div class="stat-number">{{ completedTasksCount }}</div>
+                            <div class="stat-label">{{t('vabI18n.knowledge.document.deepAnalysisDialog.completed')}}</div>
+                        </div>
+                    </div>
+
+                    <!-- 任务列表 -->
+                    <div class="sidebar-task-list">
+                        <div v-for="task in deepAnalysisList" :key="task.taskId" class="sidebar-task-item" :class="{ 'completed': task.percent >= 100 }">
+                            <div class="task-header">
+                                <div class="task-name" :title="task.name">{{ task.name }}</div>
+                                <div class="task-percent">{{ Math.round(task.percent) }}%</div>
+                            </div>
+                            
+                            <el-progress 
+                                :percentage="Math.round(task.percent)" 
+                                :status="getProgressStatus(task.percent)"
+                                :stroke-width="4"
+                                :show-text="false"
+                                class="task-progress-bar"
+                            />
+                            
+                            <div class="task-meta">
+                                <el-tag size="small" :type="getTaskStatusType(task.percent)" class="task-status-tag">
+                                    {{ getTaskStatusText(task.percent) }}
+                                </el-tag>
+                                <span class="task-time">{{ formatTimeAgo(task.createTime) }}</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 空状态 -->
+                    <div v-if="deepAnalysisList.length === 0" class="sidebar-empty">
+                        <el-icon size="48" color="#c0c4cc"><Document /></el-icon>
+                        <p>{{t('vabI18n.knowledge.document.deepAnalysisDialog.noTasks')}}</p>
+                    </div>
+                </div>
+            </div>
+        </transition>
+        </div>
+        
         <!-- 上传文件对话框 -->
         <el-dialog v-model="uploadDialogVisible" :title="t('vabI18n.knowledge.document.buttons.upload')" width="600px" class="upload-dialog">
             <el-form :model="uploadForm" label-width="120px" class="upload-form">
@@ -275,43 +372,13 @@
             </template>
         </el-dialog>
 
-        <!-- 深度解析任务列表对话框 -->
+
-        <el-dialog v-model="deepAnalysisDialogVisible" :title="t('vabI18n.knowledge.document.deepAnalysisDialog.title')" width="800px" class="deep-analysis-dialog">
-            <div v-loading="deepAnalysisLoading" :element-loading-text="t('vabI18n.knowledge.document.messages.loading')">
-                <div v-if="deepAnalysisList.length === 0 && !deepAnalysisLoading" class="empty-state">
-                    <el-empty :description="t('vabI18n.knowledge.document.deepAnalysisDialog.noTasks')" />
-                </div>
-                <div v-else class="task-list">
-                    <div v-for="task in deepAnalysisList" :key="task.taskId" class="task-item">
-                                                 <div class="task-header">
-                             <div class="task-info">
-                                 <h4 class="task-name">{{ task.name }}</h4>
-                                 <p class="task-dataset">{{t('vabI18n.knowledge.document.deepAnalysisDialog.datasetName')}}: {{ task.datasetName }}</p>
-                                 <p class="task-id">{{t('vabI18n.knowledge.document.deepAnalysisDialog.taskId')}}: {{ task.taskId }}</p>
-                                 <p class="task-time">{{t('vabI18n.knowledge.document.deepAnalysisDialog.createTime')}}: {{ formatTimestampToLocaleString(task.createTime) }}</p>
-                             </div>
-                            <div class="task-progress">
-                                <el-progress 
-                                    :percentage="Math.round(task.percent * 100)" 
-                                    :status="task.percent >= 1 ? 'success' : 'warning'"
-                                    :stroke-width="8"
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <template #footer>
-                <el-button @click="fetchDeepAnalysisList" :loading="deepAnalysisLoading">{{t('vabI18n.knowledge.document.buttons.refresh')}}</el-button>
-                <el-button type="primary" @click="deepAnalysisDialogVisible = false">{{t('vabI18n.knowledge.document.deepAnalysisDialog.close')}}</el-button>
-            </template>
-        </el-dialog>
     </div>
 </template>
   
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import VueOfficePdf from '@vue-office/pdf'
 import { getDatasetDocPage, uploadDocument, deleteDocument, downloadDocument, previewDocumentUrl, renameDocument, getDeepAnalysisList } from '@/api/dataset'
 //引入VueOfficeDocx组件
@@ -343,7 +410,9 @@ import {
   Delete,
   Check,
   Close,
-  Loading
+  Loading,
+  DataAnalysis,
+  Document
 } from '@element-plus/icons-vue'
 import { watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -379,10 +448,14 @@ const renameForm = reactive({
 })
 
 // 深度解析相关
-const deepAnalysisDialogVisible = ref(false)
 const deepAnalysisLoading = ref(false)
 const deepAnalysisList = ref<PdfTask[]>([])
 
+// 实时进度监控相关
+const progressPollingTimer = ref<NodeJS.Timeout | null>(null)
+const showTaskSidebar = ref(false)
+const POLLING_INTERVAL = 3000 // 3秒轮询一次
+
 // 定义深度解析任务类型
 interface PdfTask {
   name: string
@@ -390,9 +463,162 @@ interface PdfTask {
   percent: number
   datasetName: string
   createTime: number
-  
 }
 
+// 计算属性
+const runningTasks = computed(() => 
+  deepAnalysisList.value.filter(task => task.percent < 100)
+)
+
+const hasRunningTasks = computed(() => runningTasks.value.length > 0)
+
+const runningTasksCount = computed(() => runningTasks.value.length)
+
+const completedTasksCount = computed(() => 
+  deepAnalysisList.value.filter(task => task.percent >= 100).length
+)
+
+// 进度状态获取
+const getProgressStatus = (percent: number) => {
+  if (percent >= 100) return 'success'
+  if (percent > 0) return 'warning'
+  return 'exception'
+}
+
+const getTaskStatusType = (percent: number) => {
+  if (percent >= 100) return 'success'
+  if (percent > 0) return 'warning'
+  return 'info'
+}
+
+const getTaskStatusText = (percent: number) => {
+  if (percent >= 100) return t('vabI18n.knowledge.document.deepAnalysisDialog.completed')
+  if (percent > 0) return t('vabI18n.knowledge.document.deepAnalysisDialog.running')
+  return t('vabI18n.knowledge.document.deepAnalysisDialog.pending')
+}
+
+// 时间格式化
+const formatTimeAgo = (timestamp: number): string => {
+  const now = Date.now()
+  const time = timestamp * 1000
+  const diff = now - time
+  
+  const minutes = Math.floor(diff / (1000 * 60))
+  const hours = Math.floor(diff / (1000 * 60 * 60))
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+  
+  if (days > 0) return t('vabI18n.knowledge.document.timeAgo.days', { count: days })
+  if (hours > 0) return t('vabI18n.knowledge.document.timeAgo.hours', { count: hours })
+  if (minutes > 0) return t('vabI18n.knowledge.document.timeAgo.minutes', { count: minutes })
+  return t('vabI18n.knowledge.document.timeAgo.justNow')
+}
+
+// 轮询控制
+const startProgressPolling = () => {
+  if (progressPollingTimer.value) return
+  
+  progressPollingTimer.value = setInterval(async () => {
+    await fetchDeepAnalysisList(false) // false表示静默获取，不显示loading
+    
+    // 如果没有正在运行的任务，停止轮询
+    if (!hasRunningTasks.value) {
+      stopProgressPolling()
+    }
+  }, POLLING_INTERVAL)
+}
+
+const stopProgressPolling = () => {
+  if (progressPollingTimer.value) {
+    clearInterval(progressPollingTimer.value)
+    progressPollingTimer.value = null
+  }
+}
+
+// 侧边栏控制
+const hideSidebar = () => {
+  showTaskSidebar.value = false
+}
+
+const showSidebar = () => {
+  showTaskSidebar.value = true
+}
+
+// 监听运行中的任务变化
+watch(hasRunningTasks, (newVal, oldVal) => {
+  if (newVal && !oldVal) {
+    // 有新的运行任务，开始轮询和显示侧边栏
+    startProgressPolling()
+    showTaskSidebar.value = true // 自动显示侧边栏
+  } else if (!newVal && oldVal) {
+    // 所有任务完成，停止轮询
+    stopProgressPolling()
+    // 显示完成通知
+    ElNotification({
+      title: t('vabI18n.knowledge.document.notifications.allTasksCompleted'),
+      message: t('vabI18n.knowledge.document.notifications.allTasksCompletedMessage'),
+      type: 'success',
+      duration: 5000
+    })
+    // 可选：任务完成后延迟隐藏侧边栏
+    setTimeout(() => {
+      showTaskSidebar.value = false
+    }, 3000)
+  }
+})
+
+// 修改 fetchDeepAnalysisList 方法
+const fetchDeepAnalysisList = async (showLoading = true) => {
+  if (showLoading) {
+    deepAnalysisLoading.value = true
+  }
+  
+  try {
+    const { data } = await getDeepAnalysisList()
+    const newList = data || []
+    
+    // 检查是否有任务完成
+    if (deepAnalysisList.value.length > 0) {
+      const previousRunning = deepAnalysisList.value.filter(task => task.percent < 100)
+      const currentRunning = newList.filter(task => task.percent < 100)
+      const completedTasks = previousRunning.filter(prev => 
+        !currentRunning.some(curr => curr.taskId === prev.taskId)
+      )
+      
+      // 为每个完成的任务显示通知
+      completedTasks.forEach(task => {
+        ElNotification({
+          title: t('vabI18n.knowledge.document.notifications.taskCompleted'),
+          message: t('vabI18n.knowledge.document.notifications.taskCompletedMessage', { name: task.name }),
+          type: 'success',
+          duration: 4000
+        })
+      })
+    }
+    
+    deepAnalysisList.value = newList
+  } catch (error) {
+    console.error('获取深度解析任务列表失败:', error)
+    if (showLoading) {
+      ElNotification({
+        title: t('vabI18n.knowledge.document.errors.fetchDeepAnalysisFailed'),
+        message: error instanceof Error ? error.message : t('vabI18n.knowledge.document.messages.NoKnowError'),
+        type: 'error'
+      })
+    }
+  } finally {
+    if (showLoading) {
+      deepAnalysisLoading.value = false
+    }
+  }
+}
+
+
+
+// 组件卸载时清理定时器
+onUnmounted(() => {
+  stopProgressPolling()
+})
+
 const getFileTypeIcon = (fileType: string) => {
     const icons = require.context('@/assets/img/filetype-icon', false, /\.png$/)
     // console.log(icons)
@@ -701,6 +927,13 @@ const handleUpload = async () => {
     
     uploadDialogVisible.value = false
     await fetchDocuments()
+    
+    // 如果启用了深度解析，开始监控进度
+    if (uploadForm.deepAnalysis) {
+      setTimeout(async () => {
+        await fetchDeepAnalysisList()
+      }, 2000) // 2秒后获取任务列表
+    }
   } catch (error) {
     console.error('上传错误:', error)
     ElNotification({
@@ -867,29 +1100,6 @@ const handleRefresh = () => {
   fetchDocuments()
 }
 
-// 深度解析方法
-const handleDeepAnalysis = async () => {
-  deepAnalysisDialogVisible.value = true
-  await fetchDeepAnalysisList()
-}
-
-const fetchDeepAnalysisList = async () => {
-  deepAnalysisLoading.value = true
-  try {
-    const { data } = await getDeepAnalysisList()
-    deepAnalysisList.value = data || []
-  } catch (error) {
-    console.error('获取深度解析任务列表失败:', error)
-    ElNotification({
-      title: t('vabI18n.knowledge.document.errors.fetchDeepAnalysisFailed'),
-      message: error instanceof Error ? error.message : t('vabI18n.knowledge.document.messages.NoKnowError'),
-      type: 'error'
-    })
-  } finally {
-    deepAnalysisLoading.value = false
-  }
-}
-
 const formatTimestampToLocaleString = (timestamp: number): string => {
   const date = new Date(timestamp * 1000)
   return date.toLocaleString()
@@ -944,11 +1154,14 @@ const handleDelete = async (row: FileItem) => {
   }
 }
 
-onMounted(() => {
+onMounted(async () => {
   datasetId.value = route.params.id as string
   datasetName.value  = route.query.name as string
   // 这里可以调用API获取详细数据
-   fetchDocuments()
+  await fetchDocuments()
+  
+  // 初始化时获取深度解析任务列表
+  await fetchDeepAnalysisList(false)
 })
 
 // 分页变化处理
@@ -987,6 +1200,217 @@ const handleSearch = () => {
   }
 }
 
+// 内容布局样式
+.content-layout {
+  display: flex;
+  gap: 20px;
+  position: relative;
+  transition: all 0.3s ease;
+  
+  &.has-sidebar {
+    .file-manager-container {
+      margin-right: 320px; // 为侧边栏留出空间
+    }
+  }
+}
+
+// 任务侧边栏样式
+.task-sidebar {
+  position: fixed;
+  top: 120px;
+  right: 20px;
+  width: 320px;
+  height: calc(100vh - 140px);
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  border: 1px solid #e4e7ed;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  
+  .sidebar-header {
+    padding: 16px 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+    
+    .sidebar-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 16px;
+      font-weight: 600;
+      
+      .rotating-icon {
+        animation: spin 2s linear infinite;
+      }
+      
+      .task-count-badge {
+        ::v-deep .el-badge__content {
+          background: #f56c6c;
+          border: 2px solid white;
+        }
+      }
+    }
+    
+    .sidebar-actions {
+      display: flex;
+      gap: 4px;
+      
+      ::v-deep .el-button {
+        color: white;
+        border: none;
+        background: rgba(255, 255, 255, 0.1);
+        
+        &:hover {
+          background: rgba(255, 255, 255, 0.2);
+        }
+      }
+    }
+  }
+  
+  .sidebar-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    
+    .quick-stats {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 20px;
+      
+      .stat-card {
+        flex: 1;
+        text-align: center;
+        padding: 12px 8px;
+        background: linear-gradient(135deg, #f8f9ff 0%, #e8f4fd 100%);
+        border-radius: 8px;
+        border: 1px solid #e1e8f0;
+        
+        .stat-number {
+          font-size: 20px;
+          font-weight: 700;
+          color: #409eff;
+          margin-bottom: 4px;
+        }
+        
+        .stat-label {
+          font-size: 11px;
+          color: #666;
+          text-transform: uppercase;
+          letter-spacing: 0.5px;
+        }
+      }
+    }
+    
+    .sidebar-task-list {
+      .sidebar-task-item {
+        background: #fafafa;
+        border-radius: 8px;
+        padding: 12px;
+        margin-bottom: 12px;
+        border: 1px solid #e4e7ed;
+        transition: all 0.3s ease;
+        
+        &:hover {
+          background: #f0f9ff;
+          border-color: #409eff;
+          transform: translateY(-1px);
+          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
+        }
+        
+        &:last-child {
+          margin-bottom: 0;
+        }
+        
+        &.completed {
+          background: linear-gradient(135deg, #f0f9ff 0%, #e6fffa 100%);
+          border-color: #67c23a;
+        }
+        
+        .task-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 8px;
+          
+          .task-name {
+            font-weight: 600;
+            color: #303133;
+            font-size: 13px;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-right: 8px;
+          }
+          
+          .task-percent {
+            font-weight: 700;
+            color: #409eff;
+            font-size: 12px;
+            white-space: nowrap;
+          }
+        }
+        
+        .task-progress-bar {
+          margin-bottom: 8px;
+        }
+        
+        .task-meta {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          
+          .task-status-tag {
+            font-size: 11px;
+          }
+          
+          .task-time {
+            font-size: 11px;
+            color: #909399;
+          }
+        }
+      }
+    }
+    
+    .sidebar-empty {
+      text-align: center;
+      padding: 40px 20px;
+      color: #909399;
+      
+      p {
+        margin-top: 12px;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+// 侧边栏动画
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.3s ease-in;
+}
+
+.slide-fade-enter-from {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.slide-fade-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
 .file-manager-container {
   background: white;
   border-radius: 8px;
@@ -1017,6 +1441,33 @@ const handleSearch = () => {
   display: flex;
   align-items: center;
   gap: 12px;
+  
+  // 深度解析按钮样式
+  .has-running-tasks {
+    background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
+    border: none;
+    color: white;
+    position: relative;
+    
+    &:hover {
+      background: linear-gradient(135deg, #337ecc 0%, #529e2b 100%);
+    }
+    
+    .rotating-icon {
+      animation: spin 2s linear infinite;
+    }
+    
+    .task-badge {
+      position: absolute;
+      top: -8px;
+      right: -8px;
+      
+      ::v-deep .el-badge__content {
+        background: #f56c6c;
+        border: 2px solid white;
+      }
+    }
+  }
 }
 
 .batch-delete-btn {
@@ -1028,6 +1479,11 @@ const handleSearch = () => {
   to { opacity: 1; transform: translateX(0); }
 }
 
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 .file-table {
   border-radius: 8px;
   overflow: hidden;
@@ -1333,11 +1789,6 @@ const handleSearch = () => {
   }
 }
 
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
 // 深度解析对话框样式
 .deep-analysis-dialog {
   ::v-deep .el-dialog__header {
@@ -1352,28 +1803,63 @@ const handleSearch = () => {
   }
 }
 
+// 任务统计样式
+.task-statistics {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 20px;
+  
+  .stat-item {
+    flex: 1;
+    text-align: center;
+    padding: 16px;
+    background: linear-gradient(135deg, #f8f9ff 0%, #e8f4fd 100%);
+    border-radius: 8px;
+    border: 1px solid #e1e8f0;
+    
+    .stat-number {
+      font-size: 24px;
+      font-weight: 700;
+      color: #409eff;
+      margin-bottom: 4px;
+    }
+    
+    .stat-label {
+      font-size: 12px;
+      color: #666;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+  }
+}
+
 .empty-state {
   padding: 40px 20px;
   text-align: center;
 }
 
 .task-list {
-  max-height: 400px;
+  max-height: 500px;
   overflow-y: auto;
   padding: 10px 0;
 }
 
 .task-item {
   border: 1px solid #ebeef5;
-  border-radius: 8px;
+  border-radius: 12px;
-  margin-bottom: 12px;
+  margin-bottom: 16px;
-  padding: 16px;
+  padding: 20px;
   background: #fafafa;
   transition: all 0.3s ease;
   
   &:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
-    transform: translateY(-2px);
+    transform: translateY(-3px);
+  }
+  
+  &.completed {
+    background: linear-gradient(135deg, #f0f9ff 0%, #e6fffa 100%);
+    border-color: #67c23a;
   }
 }
 
@@ -1381,14 +1867,14 @@ const handleSearch = () => {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  gap: 20px;
+  gap: 24px;
 }
 
 .task-info {
   flex: 1;
   
   .task-name {
-    margin: 0 0 8px 0;
+    margin: 0 0 12px 0;
     font-size: 16px;
     font-weight: 600;
     color: #303133;
@@ -1396,8 +1882,8 @@ const handleSearch = () => {
   }
   
   .task-dataset, .task-id, .task-time {
-    margin: 4px 0;
+    margin: 6px 0;
-    font-size: 12px;
+    font-size: 13px;
     color: #909399;
   }
   
@@ -1408,7 +1894,16 @@ const handleSearch = () => {
 }
 
 .task-progress {
-  flex: 0 0 200px;
+  flex: 0 0 220px;
+  
+  .progress-status {
+    margin-top: 8px;
+    text-align: center;
+    
+    .status-tag {
+      font-weight: 600;
+    }
+  }
   
   ::v-deep .el-progress__text {
     font-weight: 600;
@@ -1421,6 +1916,39 @@ const handleSearch = () => {
     padding: 12px;
   }
   
+  .content-layout {
+    &.has-sidebar {
+      .file-manager-container {
+        margin-right: 0; // 移动端不预留侧边栏空间
+      }
+    }
+  }
+  
+  .task-sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100vh;
+    z-index: 2000;
+    border-radius: 0;
+    
+    .sidebar-content {
+      padding: 16px;
+      
+      .quick-stats {
+        flex-direction: column;
+        gap: 8px;
+        
+        .stat-card {
+          padding: 16px;
+        }
+      }
+    }
+  }
+  
   .action-bar {
     flex-direction: column;
     gap: 12px;
@@ -1440,14 +1968,5 @@ const handleSearch = () => {
     flex-direction: column;
     gap: 4px;
   }
-  
-  .task-header {
-    flex-direction: column;
-    gap: 12px;
-  }
-  
-  .task-progress {
-    flex: 1;
-  }
 }
 </style>