Merge branch 'main' of http://43.142.9.2:3000/WJB/ai-manus
This commit is contained in:
commit
25f38fb41f
|
@ -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',
|
||||
|
|
|
@ -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: '上傳成功',
|
||||
|
|
|
@ -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: '文件名不能为空',
|
||||
|
|
|
@ -8,8 +8,10 @@
|
|||
: 'vabI18n.knowledge.document.header.descriptionEnd') }}
|
||||
</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>
|
||||
|
@ -153,6 +174,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">
|
||||
|
@ -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;
|
||||
margin-bottom: 12px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 16px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||||
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;
|
||||
font-size: 12px;
|
||||
margin: 6px 0;
|
||||
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>
|
Loading…
Reference in New Issue