feat: 实现剧本创作与拆解前端工作台

src/features/workflows/HistoryPanel.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Clock3 } from '@lucide/vue'
+import { formatDate, nodeLabel } from '../../lib/format'
+import { workflowCheckpoints } from './selectors'
+import type { Checkpoint } from './types'
+
+/** 时间线只说明 checkpoint 已保存，不把每条记录误标为工作流成功。 */
+const props = defineProps<{ checkpoints: Checkpoint[]; workflow: string }>()
+const history = computed(() => workflowCheckpoints(props.checkpoints, props.workflow).slice(-18).toReversed())
+</script>
+
+<template>
+    <aside class="history-panel">
+        <h3 class="mb-1 flex items-center gap-2 text-sm font-semibold"><Clock3 :size="15" />执行记录</h3>
+        <p class="mb-6 text-xs leading-5 text-muted">最近 18 个 checkpoint · 自动刷新</p>
+        <p v-if="!history.length" class="text-xs leading-6 text-muted">工作流尚未保存执行记录。</p>
+        <ol v-else class="timeline">
+            <li v-for="(item, index) in history" :key="item.checkpointId" :class="{ 'timeline-latest': index === 0 }">
+                <p class="text-xs font-medium">{{ nodeLabel(item.metadata?.nodeName) }}</p>
+                <p class="mt-1 text-[11px] text-muted">
+                    {{ formatDate(item.createdAt)
+                    }}<span v-if="item.metadata?.nodeDurationMs">
+                        · {{ (item.metadata.nodeDurationMs / 1000).toFixed(1) }}s</span
+                    >
+                </p>
+                <span v-if="item.state.workflowExecution?.status === 'failed'" class="mt-1 block text-xs text-danger"
+                    >运行失败</span
+                >
+            </li>
+        </ol>
+        <p class="mt-5 border-t border-line pt-4 text-[11px] leading-5 text-muted">
+            记录在节点或批次结束后更新，长时间无新记录不一定意味着任务失败。
+        </p>
+    </aside>
+</template>