wonder/xinfra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(delivery): refine base service integrations

Browse Source
This commit is contained in:
mac
2026-07-29 16:36:27 +08:00
parent 2ca08f9360
commit 35875218c9
22 changed files with 1042 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/task/TaskCenter.vue
+8 -199
View File
@@ -42,11 +42,7 @@
暂无任务记录
</div>
<div class="pagination">
<span>共 {{ totalTasks }} 条 · 第 {{ currentPage }}/{{ totalPages }} 页 · 当前业务线：{{ currentName }}</span>
<div class="pagination-actions">
<el-button size="small" :disabled="currentPage <= 1" @click="prevPage">上一页</el-button>
<el-button size="small" :disabled="currentPage >= totalPages" @click="nextPage">下一页</el-button>
</div>
<span>共 {{ tasks.length }} 条 · 当前业务线：{{ currentName }}</span>
</div>
</div>
</div>
@@ -56,29 +52,11 @@
<h3>
<span>任务日志</span>
<span class="selected-name">{{ selectedTaskName }}</span>
<span v-if="isStreaming" class="streaming-indicator">● 实时更新中</span>
<span v-if="streamRetryCount > 0" class="retry-indicator">重试中 ({{ streamRetryCount }}/3)</span>
</h3>
<div class="panel-actions">
<el-switch
v-model="autoScroll"
active-text="自动滚动"
class="auto-scroll-switch"
/>
<span class="meta">{{ selectedTaskMeta }}</span>
</div>
<span class="meta">{{ selectedTaskMeta }}</span>
</div>
<div
ref="logContainerRef"
class="panel-body log-stream"
@scroll="handleScroll"
>
<!-- 简单滚动容器 -->
<div
v-for="(log, index) in logs"
:key="index"
:class="['task-log-line', log.class]"
>
<div class="panel-body log-stream">
<div v-for="(log, index) in logs" :key="index" :class="['task-log-line', log.class]">
<span class="t">{{ log.time }}</span>{{ log.message }}
</div>
<div v-if="loadingLogs" class="task-log-line">
@@ -94,8 +72,8 @@
</template>
<script setup lang="ts">
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import { taskLogApi, createTaskLogStream, type TaskLogLine, type TaskLogSummary } from '@/api/taskLog'
import { computed, onMounted, ref, watch } from 'vue'
import { taskLogApi, type TaskLogLine, type TaskLogSummary } from '@/api/taskLog'
import { useBusinessLineStore } from '@/stores/businessLine'
import { useBusinessLineMockProfile } from '@/utils/businessLineMock'
@@ -109,21 +87,6 @@ const logs = ref<TaskLogLine[]>([])
const loadingTasks = ref(false)
const loadingLogs = ref(false)
const lastLoadedAt = ref<Date | null>(null)
const isStreaming = ref(false)
let eventSource: EventSource | null = null
const autoScroll = ref(true)
const logContainerRef = ref<HTMLDivElement | null>(null)
// 分页相关
const currentPage = ref(1)
const pageSize = ref(20)
const totalTasks = ref(0)
const totalPages = computed(() => Math.ceil(totalTasks.value / pageSize.value))
// SSE 重试相关
const streamRetryCount = ref(0)
const maxRetryCount = 3
let retryTimeout: ReturnType<typeof setTimeout> | null = null
const selectedTask = computed(() => tasks.value.find((task) => task.id === selectedTaskId.value))
const selectedTaskName = computed(() => selectedTask.value?.name || '未选择')
@@ -133,14 +96,11 @@ const lastLoadedText = computed(() => lastLoadedAt.value ? `更新于 ${formatTi
async function loadTasks() {
loadingTasks.value = true
try {
const result = await taskLogApi.list({
const data = await taskLogApi.list({
source: sourceFilter.value,
businessLineId: businessLineStore.current?.id,
page: currentPage.value,
pageSize: pageSize.value,
})
tasks.value = result.items
totalTasks.value = result.total
tasks.value = data.items
lastLoadedAt.value = new Date()
if (!tasks.value.some((task) => task.id === selectedTaskId.value)) {
selectedTaskId.value = tasks.value[0]?.id || ''
@@ -163,9 +123,6 @@ async function loadLogs(taskId: string) {
const data = await taskLogApi.get(taskId)
logs.value = data.lines
lastLoadedAt.value = new Date()
scrollToBottom()
// 启动 SSE 流式更新
startStream(taskId)
} catch (error) {
logs.value = [{ time: formatTime(new Date()), message: error instanceof Error ? error.message : '任务日志加载失败', class: 'err' }]
} finally {
@@ -173,93 +130,10 @@ async function loadLogs(taskId: string) {
}
}
function startStream(taskId: string) {
stopStream() // 关闭之前的连接
streamRetryCount.value = 0
eventSource = createTaskLogStream(taskId, {
onInit: (lines) => {
logs.value = lines
lastLoadedAt.value = new Date()
scrollToBottom()
},
onUpdate: (newLines) => {
logs.value = newLines
lastLoadedAt.value = new Date()
scrollToBottom()
},
onFinished: () => {
isStreaming.value = false
streamRetryCount.value = 0
},
onError: (error) => {
console.error('SSE error:', error)
isStreaming.value = false
// 尝试重连
retryStream(taskId)
},
})
isStreaming.value = true
}
function retryStream(taskId: string) {
if (streamRetryCount.value >= maxRetryCount) {
console.error('Max retry count reached')
return
}
streamRetryCount.value++
// 指数退避：1s, 2s, 4s
const delay = Math.pow(2, streamRetryCount.value - 1) * 1000
retryTimeout = setTimeout(() => {
startStream(taskId)
}, delay)
}
function stopStream() {
if (retryTimeout) {
clearTimeout(retryTimeout)
retryTimeout = null
}
if (eventSource) {
eventSource.close()
eventSource = null
isStreaming.value = false
}
}
function scrollToBottom() {
if (!autoScroll.value) return
nextTick(() => {
if (logContainerRef.value) {
logContainerRef.value.scrollTop = logContainerRef.value.scrollHeight
}
})
}
function handleScroll() {
if (!logContainerRef.value) return
const { scrollTop, scrollHeight, clientHeight } = logContainerRef.value
const distanceFromBottom = scrollHeight - scrollTop - clientHeight
// 距离底部小于 50px 时认为在底部，恢复自动滚动
if (distanceFromBottom < 50) {
autoScroll.value = true
} else if (distanceFromBottom > 100) {
// 用户向上滚动超过 100px 时暂停自动滚动
autoScroll.value = false
}
}
function selectTask(taskId: string) {
if (selectedTaskId.value === taskId) {
return
}
stopStream() // 停止之前的流
selectedTaskId.value = taskId
void loadLogs(taskId)
}
@@ -268,20 +142,6 @@ function refreshCurrent() {
void loadTasks()
}
function prevPage() {
if (currentPage.value > 1) {
currentPage.value--
void loadTasks()
}
}
function nextPage() {
if (currentPage.value < totalPages.value) {
currentPage.value++
void loadTasks()
}
}
function formatTime(date: Date) {
return date.toLocaleTimeString('zh-CN', { hour12: false })
}
@@ -289,7 +149,6 @@ function formatTime(date: Date) {
watch(
() => businessLineStore.current?.id,
() => {
currentPage.value = 1
void loadTasks()
},
)
@@ -297,10 +156,6 @@ watch(
onMounted(() => {
void loadTasks()
})
onUnmounted(() => {
stopStream()
})
</script>
<style scoped>
@@ -394,7 +249,6 @@ onUnmounted(() => {
.task-log-panel .panel-head {
gap: 14px;
flex-wrap: wrap;
}
.task-log-panel .panel-head h3 {
@@ -404,36 +258,11 @@ onUnmounted(() => {
gap: 10px;
}
.task-log-panel .panel-head .panel-actions {
margin-left: auto;
}
.selected-name {
color: var(--text-dim);
font-weight: 500;
}
.streaming-indicator {
font-size: 11px;
color: var(--accent);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.panel-actions {
display: flex;
align-items: center;
gap: 12px;
}
.auto-scroll-switch {
--el-switch-on-color: var(--accent);
}
.log-stream {
max-height: calc(100vh - 210px);
min-height: 520px;
@@ -458,26 +287,6 @@ onUnmounted(() => {
font-size: 13px;
}
.pagination {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
font-size: 12px;
color: var(--text-dim);
}
.pagination-actions {
display: flex;
gap: 8px;
}
.retry-indicator {
font-size: 11px;
color: var(--warn);
animation: pulse 1s ease-in-out infinite;
}
@media (max-width: 1180px) {
.task-layout {
grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);