test-repo/docs/.vitepress/theme/components/appendix/agent-intro/AgentTaskFlowDemo.vue

<!--
  AgentTaskFlowDemo.vue
  任务执行流：像看“回放”一样看 Agent 一步步完成一个任务。
-->
<template>
  <div class="flow">
    <div class="header">
      <div>
        <div class="title">任务回放：Agent 怎么一步步做完？</div>
        <div class="subtitle">点步骤，看“工具调用”和“中间结果”。</div>
      </div>
      <div class="actions">
        <button
          class="btn"
          @click="step = Math.max(0, step - 1)"
          :disabled="step === 0"
        >
          上一步
        </button>
        <button
          class="btn primary"
          @click="step = Math.min(steps.length - 1, step + 1)"
          :disabled="step === steps.length - 1"
        >
          下一步
        </button>
      </div>
    </div>

    <div class="timeline">
      <button
        v-for="(s, i) in steps"
        :key="s.title"
        :class="['t', { active: i === step }]"
        @click="step = i"
      >
        <span class="n">{{ i + 1 }}</span>
        <span class="txt">{{ s.title }}</span>
      </button>
    </div>

    <div class="grid">
      <div class="panel">
        <div class="panel-title">当前步骤</div>
        <div class="panel-body">{{ steps[step].desc }}</div>
      </div>
      <div class="panel">
        <div class="panel-title">工具调用（示意）</div>
        <pre><code>{{ steps[step].tool }}</code></pre>
      </div>
      <div class="panel">
        <div class="panel-title">结果（示意）</div>
        <pre><code>{{ steps[step].result }}</code></pre>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const step = ref(0)

const steps = [
  {
    title: '理解目标',
    desc: '把用户需求拆成“可交付”的输出结构。',
    tool: 'LLM: parse_goal({ task, constraints, output_format })',
    result: '目标：找 3 篇文章；输出：标题 + 一句话总结（Markdown 列表）'
  },
  {
    title: '搜索',
    desc: '先用搜索工具拿到候选链接。',
    tool: 'tool:web_search({ query: \"agent introduction\" })',
    result: '- link1\n- link2\n- link3\n- link4 ...'
  },
  {
    title: '读取页面',
    desc: '打开前三个链接，取出核心段落。',
    tool: 'tool:read_page({ url: link1/link2/link3 })',
    result: '每篇文章的核心段落（已截取）'
  },
  {
    title: '压缩与整理',
    desc: '把每篇文章压缩成“一句话总结”，统一格式。',
    tool: 'LLM: summarize_each({ paragraphs, max_len: 25 })',
    result: '- 标题A：一句话…\n- 标题B：一句话…\n- 标题C：一句话…'
  },
  {
    title: '自检与交付',
    desc: '检查是否满足“3 条 + 一句话 + 格式正确”，再输出。',
    tool: 'LLM: self_check({ checklist })',
    result: '✅ 满足要求；输出已就绪'
  }
]
</script>

<style scoped>
.flow {
  border: 1px solid var(--vp-c-divider);
  border-radius: 12px;
  background: var(--vp-c-bg-soft);
  padding: 16px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.title {
  font-weight: 800;
}
.subtitle {
  color: var(--vp-c-text-2);
  font-size: 13px;
}
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn {
  border: 1px solid var(--vp-c-divider);
  background: var(--vp-c-bg);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.btn.primary {
  border-color: var(--vp-c-brand);
  color: var(--vp-c-brand);
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.t {
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  text-align: left;
}
.t.active {
  border-color: var(--vp-c-brand);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.n {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--vp-c-bg-soft);
  border: 1px solid var(--vp-c-divider);
  font-weight: 800;
}
.txt {
  font-weight: 800;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.panel {
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 12px;
  padding: 12px;
}
.panel-title {
  font-weight: 700;
  margin-bottom: 6px;
}
.panel-body {
  color: var(--vp-c-text-2);
  line-height: 1.6;
}
pre {
  margin: 0;
  background: #0b1221;
  color: #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  font-family: var(--vp-font-family-mono);
  font-size: 13px;
  overflow-x: auto;
  white-space: pre-wrap;
}
</style>