shalu-agent-workflow/apps/web/src/views/LogStream.vue

<template>
	<div class="log-stream-container">
		<div class="header">
			<h1>Agent 日志跟踪</h1>
			<div class="header-actions">
				<el-input
					v-model="searchKeyword"
					placeholder="搜索日志..."
					:prefix-icon="Search"
					style="width: 300px"
				/>
				<el-button type="primary" @click="refreshLogs">
					<el-icon>
						<RefreshRight />
					</el-icon>
					刷新
				</el-button>
			</div>
		</div>

		<div class="filters">
			<el-select v-model="selectedLevel" placeholder="日志级别" style="width: 150px">
				<el-option label="全部" value="" />
				<el-option label="信息" value="info" />
				<el-option label="警告" value="warning" />
				<el-option label="错误" value="error" />
			</el-select>
			<el-date-picker
				v-model="dateRange"
				type="daterange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
			/>
		</div>

		<div class="logs-container">
			<div v-for="log in filteredLogs" :key="log.id" :class="['log-item', `log-${log.level}`]">
				<div class="log-header">
					<span :class="['log-level', `level-${log.level}`]">{{ log.level.toUpperCase() }}</span>
					<span class="log-time">{{ log.timestamp }}</span>
					<span class="log-workflow">{{ log.workflowName }}</span>
				</div>
				<div class="log-message">{{ log.message }}</div>
				<div v-if="log.details" class="log-details">
					<pre>{{ JSON.stringify(log.details, null, 2) }}</pre>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { Search, RefreshRight } from '@element-plus/icons-vue'
import { ref, computed } from 'vue'

const searchKeyword = ref('')
const selectedLevel = ref('')
const dateRange = ref([])

const logs = ref([
	{
		id: 1,
		level: 'info',
		timestamp: '2026-01-28 14:23:45',
		workflowName: '数据同步工作流',
		message: '工作流执行成功',
		details: { executionTime: '2.5s', nodesExecuted: 5 }
	},
	{
		id: 2,
		level: 'warning',
		timestamp: '2026-01-28 14:20:12',
		workflowName: 'API 调用工作流',
		message: '请求响应时间超过阈值',
		details: { responseTime: '3200ms', threshold: '3000ms' }
	},
	{
		id: 3,
		level: 'error',
		timestamp: '2026-01-28 14:15:33',
		workflowName: '邮件发送工作流',
		message: '邮件发送失败: SMTP 连接超时',
		details: { error: 'Connection timeout', host: 'xxxxx.com' }
	},
	{
		id: 4,
		level: 'info',
		timestamp: '2026-01-28 14:10:08',
		workflowName: '数据处理工作流',
		message: '处理了 1000 条数据记录',
		details: { processed: 1000, failed: 0 }
	},
	{
		id: 5,
		level: 'info',
		timestamp: '2026-01-28 14:05:22',
		workflowName: '定时任务工作流',
		message: '定时任务触发执行',
		details: { schedule: '*/5 * * * *', triggeredBy: 'cron' }
	}
])

const filteredLogs = computed(() => {
	return logs.value.filter((log) => {
		const matchesKeyword =
			!searchKeyword.value ||
			log.message.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
			log.workflowName.toLowerCase().includes(searchKeyword.value.toLowerCase())
		const matchesLevel = !selectedLevel.value || log.level === selectedLevel.value
		return matchesKeyword && matchesLevel
	})
})

const refreshLogs = () => {
	console.log('Refreshing logs...')
}
</script>

<style lang="less" scoped>
.log-stream-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;

		h1 {
			font-size: 28px;
			font-weight: 600;
			color: #333;
		}

		.header-actions {
			display: flex;
			gap: 12px;
			align-items: center;
		}
	}

	.filters {
		display: flex;
		gap: 16px;
		margin-bottom: 24px;
	}

	.logs-container {
		display: flex;
		flex-direction: column;
		gap: 12px;

		.log-item {
			background: #fff;
			border-radius: 8px;
			padding: 16px;
			border-left: 4px solid #e5e7eb;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
			transition: all 0.3s;

			&:hover {
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
			}

			&.log-info {
				border-left-color: #3b82f6;
			}

			&.log-warning {
				border-left-color: #f59e0b;
			}

			&.log-error {
				border-left-color: #ef4444;
			}

			.log-header {
				display: flex;
				align-items: center;
				gap: 12px;
				margin-bottom: 8px;

				.log-level {
					font-size: 11px;
					font-weight: 700;
					padding: 4px 8px;
					border-radius: 4px;
					text-transform: uppercase;

					&.level-info {
						background: #dbeafe;
						color: #1e40af;
					}

					&.level-warning {
						background: #fef3c7;
						color: #92400e;
					}

					&.level-error {
						background: #fee2e2;
						color: #991b1b;
					}
				}

				.log-time {
					font-size: 13px;
					color: #666;
				}

				.log-workflow {
					font-size: 13px;
					color: var(--el-color-primary);
					font-weight: 500;
				}
			}

			.log-message {
				font-size: 14px;
				color: #333;
				line-height: 1.6;
				margin-bottom: 8px;
			}

			.log-details {
				background: #f8f9fa;
				border-radius: 4px;
				padding: 12px;
				margin-top: 12px;

				pre {
					margin: 0;
					font-size: 12px;
					color: #666;
					line-height: 1.6;
					overflow-x: auto;
				}
			}
		}
	}
}
</style>