代码提交

parallel-agents-vue/src/components/MessageStepsCard.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+/** 步骤条 / 思维链卡：折叠展示该气泡运行期间的工具调用步骤（对齐 Step2 MessageStepsCard）。 */
+import { ref } from "vue";
+import type { DialogueStep } from "@/types";
+
+defineProps<{ steps: DialogueStep[]; streaming?: boolean }>();
+const open = ref(true);
+
+function argSummary(args?: Record<string, unknown> | null): string {
+  if (!args) return "";
+  const path = (args as { path?: unknown }).path;
+  if (typeof path === "string") return path;
+  try {
+    const s = JSON.stringify(args);
+    return s.length > 60 ? s.slice(0, 60) + "…" : s;
+  } catch {
+    return "";
+  }
+}
+</script>
+
+<template>
+  <div class="pa-surface pa-border mb-2 rounded-lg border p-0.5">
+    <button
+      type="button"
+      class="flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-left text-[11px] font-semibold pa-text-muted"
+      @click="open = !open"
+    >
+      <span
+        class="inline-block transition-transform"
+        :class="open ? 'rotate-90' : ''"
+        >▶</span
+      >
+      <span>执行步骤（{{ steps.length }}）</span>
+      <span v-if="streaming" class="pa-spin inline-block">◜</span>
+    </button>
+    <ol v-show="open" class="space-y-0.5 px-2 pb-1.5 pt-0.5">
+      <li
+        v-for="s in steps"
+        :key="s.id"
+        class="flex items-start gap-2 text-[11px] pa-text"
+      >
+        <span class="mt-1 inline-block size-1.5 shrink-0 rounded-full" style="background: var(--pa-primary)" />
+        <span class="min-w-0">
+          <span class="font-semibold">{{ s.label }}</span>
+          <span v-if="argSummary(s.args)" class="pa-text-muted"> · {{ argSummary(s.args) }}</span>
+          <span class="pa-text-muted"> · {{ s.ts }}</span>
+        </span>
+      </li>
+    </ol>
+  </div>
+</template>