Preview Updated 2026-05-10

ToolCallCard 工具调用

展示一次工具调用：name / input / output / status / duration / 错误消息；可折叠。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

四种 status：pending（环形虚线）、running（转圈、accent 边框）、success（绿勾）、error（红 X、红边框 + 红色 output 框）。input / output 接收任意值，组件自动 JSON.stringify 漂亮打印；字符串直接显示。

背景视口

web_search成功820ms

输入

{
  "query": "oklch vs hsl perceptual uniformity",
  "limit": 5
}

输出

{
  "results": [
    "evilmartians.com",
    "developer.chrome.com",
    "w3.org/TR/css-color-4"
  ]
}

bash执行中4.2s

read_file失败

输入

{
  "path": "/etc/missing"
}

错误

ENOENT: no such file or directory

src/App.vue

<script setup lang="ts">
import { CfToolCallCard } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <CfToolCallCard
      name="web_search"
      :input="{ query: 'oklch vs hsl perceptual uniformity', limit: 5 }"
      :output="{ results: ['evilmartians.com', 'developer.chrome.com', 'w3.org/TR/css-color-4'] }"
      status="success"
      :duration="820"
      default-open
    />
    <CfToolCallCard
      name="bash"
      :input="{ command: 'pnpm --filter docs build' }"
      status="running"
      :duration="4200"
    />
    <CfToolCallCard
      name="read_file"
      :input="{ path: '/etc/missing' }"
      status="error"
      error-message="ENOENT: no such file or directory"
      default-open
    />
  </div>
</template>

<script setup>
import { CfToolCallCard } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <CfToolCallCard
      name="web_search"
      :input="{ query: 'oklch vs hsl perceptual uniformity', limit: 5 }"
      :output="{ results: ['evilmartians.com', 'developer.chrome.com', 'w3.org/TR/css-color-4'] }"
      status="success"
      :duration="820"
      default-open
    />
    <CfToolCallCard
      name="bash"
      :input="{ command: 'pnpm --filter docs build' }"
      status="running"
      :duration="4200"
    />
    <CfToolCallCard
      name="read_file"
      :input="{ path: '/etc/missing' }"
      status="error"
      error-message="ENOENT: no such file or directory"
      default-open
    />
  </div>
</template>

import { CfToolCallCard } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div className="demo-stack">
          <CfToolCallCard name="web_search" input={{ query: 'oklch vs hsl perceptual uniformity', limit: 5 }} output={{ results: ['evilmartians.com', 'developer.chrome.com', 'w3.org/TR/css-color-4'] }} status="success" duration={820} defaultOpen />
          <CfToolCallCard name="bash" input={{ command: 'pnpm --filter docs build' }} status="running" duration={4200} />
          <CfToolCallCard name="read_file" input={{ path: '/etc/missing' }} status="error" error-message="ENOENT: no such file or directory" defaultOpen />
        </div>
    </>
  );
}

import { CfToolCallCard } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div className="demo-stack">
          <CfToolCallCard name="web_search" input={{ query: 'oklch vs hsl perceptual uniformity', limit: 5 }} output={{ results: ['evilmartians.com', 'developer.chrome.com', 'w3.org/TR/css-color-4'] }} status="success" duration={820} defaultOpen />
          <CfToolCallCard name="bash" input={{ command: 'pnpm --filter docs build' }} status="running" duration={4200} />
          <CfToolCallCard name="read_file" input={{ path: '/etc/missing' }} status="error" error-message="ENOENT: no such file or directory" defaultOpen />
        </div>
    </>
  );
}

API

属性	类型	默认	说明
`name`	`string`	`—`	工具名（mono 字体显示）
`input`	`unknown`	`—`	参数；非字符串会 JSON 化
`output`	`unknown`	`—`	结果；非字符串会 JSON 化
`status`	`'pending' \| 'running' \| 'success' \| 'error'`	`'success'`	状态
`duration`	`number`	`—`	毫秒，渲染为 `X.Xs`
`collapsible`	`boolean`	`true`	可折叠
`defaultOpen`	`boolean`	`false`	初始展开
`errorMessage`	`string`	`—`	error 状态下覆盖 output 文本