shalu-agent-workflow/apps/web/src/features/editorFooter/index.vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import { IconButton } from '@repo/ui'

import { useRunnerStore, type NodeStatus, type RunnerStatus } from '@/store/modules/runner.store'
import { useI18n } from '@/composables/useI18n'

const emit = defineEmits<{
	toggle: [open: boolean]
}>()

const open = ref(false)
const runnerStore = useRunnerStore()
const { t } = useI18n()

const executions = computed(() => runnerStore.executions)

const onClick = () => {
	open.value = !open.value
	emit('toggle', open.value)
}

const formatJson = (value: unknown) => {
	if (value === null || value === undefined) return '-'
	try {
		return JSON.stringify(value, null, 2)
	} catch {
		return String(value)
	}
}

const statusText = (status: NodeStatus | RunnerStatus) => {
	if (status === 'running') return t('pages.editorFooter.running')
	if (status === 'success') return t('pages.editorFooter.success')
	if (status === 'finished') return t('pages.editorFooter.finished')
	if (status === 'failed') return t('pages.editorFooter.failed')
	if (status === 'error') return t('pages.editorFooter.error')
	if (status === 'suspended') return t('pages.runWorkflow.suspended')
	return t('pages.editorFooter.ready')
}

const statusTagType = (
	status: NodeStatus | RunnerStatus
): 'info' | 'success' | 'warning' | 'danger' => {
	if (status === 'running') return 'warning'
	if (status === 'suspended') return 'warning'
	if (status === 'success' || status === 'finished') return 'success'
	if (status === 'failed' || status === 'error') return 'danger'
	return 'info'
}
</script>

<template>
	<div class="flex w-full h-full overflow-hidden">
		<div class="flex-1 flex flex-col">
			<div
				class="h-32px shrink-0 px-12px flex items-center justify-between border border-solid border-gray-200"
				@click="onClick"
			>
				<span class="text-12px">{{ t('pages.editorFooter.logs') }}</span>
				<IconButton :icon="open ? 'lucide:chevron-down' : 'lucide:chevron-up'" link />
			</div>
			<div class="flex-1 text-12px p-12px overflow-auto">
				<div v-if="executions.length === 0" class="text-gray-400">
					{{ t('pages.editorFooter.empty') }}
				</div>
				<el-table v-else :data="executions" row-key="runnerKey" size="small" border class="w-full">
					<el-table-column type="expand" width="48">
						<template #default="scope">
							<div class="p-8px">
								<el-table
									:data="scope.row.nodes"
									row-key="nodeId"
									size="small"
									border
									class="w-full"
								>
									<el-table-column
										prop="nodeName"
										:label="t('pages.editorFooter.nodeName')"
										min-width="160"
									/>
									<el-table-column
										prop="nodeType"
										:label="t('pages.editorFooter.type')"
										width="120"
									/>
									<el-table-column :label="t('pages.editorFooter.status')" width="100">
										<template #default="{ row }">
											<el-tag :type="statusTagType(row.status)" size="small">
												{{ statusText(row.status) }}
											</el-tag>
										</template>
									</el-table-column>
									<el-table-column
										prop="lastUpdateTime"
										:label="t('pages.editorFooter.lastTime')"
										width="180"
									/>
									<el-table-column
										:label="t('pages.editorFooter.detail')"
										min-width="260"
									>
										<template #default="{ row }">
											<el-tabs type="border-card" class="w-full">
												<el-tab-pane :label="t('pages.editorFooter.input')">
													<pre class="bg-#f7f7f7 rounded p-6px whitespace-pre-wrap break-all max-h-160px overflow-auto">{{ formatJson(row.track?.input_variable) }}</pre>
												</el-tab-pane>
												<el-tab-pane :label="t('pages.editorFooter.output')">
													<pre class="bg-#f7f7f7 rounded p-6px whitespace-pre-wrap break-all max-h-160px overflow-auto">{{ formatJson(row.track?.output_variable) }}</pre>
												</el-tab-pane>
											</el-tabs>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</template>
					</el-table-column>
					<el-table-column type="index" label="#" width="48" />
					<el-table-column prop="runnerKey" :label="t('pages.editorFooter.runId')" min-width="220" />
					<el-table-column :label="t('pages.editorFooter.status')" width="100">
						<template #default="{ row }">
							<el-tag :type="statusTagType(row.status)" size="small">
								{{ statusText(row.status) }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="startedAt" :label="t('pages.editorFooter.startedAt')" width="180" />
					<el-table-column prop="finishedAt" :label="t('pages.editorFooter.finishedAt')" width="180" />
					<el-table-column :label="t('pages.editorFooter.nodeCount')" width="80">
						<template #default="{ row }">
							{{ row.nodes?.length || 0 }}
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>