ReasoningBlock 思维链展示

可折叠的思维链展示组件，用于显示 AI 模型的推理过程，支持耗时和 token 数元信息。

基础用法

分析过程

用户询问了一个关于 Vue 3 组合式 API 的问题。我需要分析 Composition API 的核心概念，包括 ref、reactive、computed 和 watch。然后对比 Options API 的差异，给出实际使用建议。

<script setup>
import ReasoningBlock from '@/vue/components/ReasoningBlock.vue'
</script>
<template>
  <ReasoningBlock>
    用户询问了一个关于 Vue 3 组合式 API 的问题。我需要分析 Composition API 的核心概念，包括 ref、reactive、computed 和 watch。然后对比 Options API 的差异，给出实际使用建议。
  </ReasoningBlock>
</template>

默认展开

设置 expanded 属性默认展开内容。

分析过程

这是默认展开的思维链内容。用户可以直接看到 AI 的推理过程。

<script setup>
import ReasoningBlock from '@/vue/components/ReasoningBlock.vue'
</script>
<template>
  <ReasoningBlock expanded>
    这是默认展开的思维链内容。用户可以直接看到 AI 的推理过程。
  </ReasoningBlock>
</template>

元信息

通过 duration 和 tokenCount 显示推理耗时和 token 消耗。

分析过程 2.3s156 tokens

首先分析问题的关键点，然后逐步推理，最后得出结论。整个过程耗时 2.3 秒，消耗了 156 个 token。

<script setup>
import ReasoningBlock from '@/vue/components/ReasoningBlock.vue'
</script>
<template>
  <ReasoningBlock :duration="2300" :token-count="156">
    首先分析问题的关键点，然后逐步推理，最后得出结论。整个过程耗时 2.3 秒，消耗了 156 个 token。
  </ReasoningBlock>
</template>

React 用法

import { ReasoningBlock } from '@bobocn/element/react'
import '@bobocn/element/style.css'

function App() {
  return (
    <ReasoningBlock duration={2300} tokenCount={156}>
      AI 的推理过程内容...
    </ReasoningBlock>
  )
}

API

属性 (Attributes)

属性名	说明	类型	默认值
title	标题	string	'分析过程'
expanded	是否默认展开	boolean	false
duration	推理耗时 (ms)	number	—
tokenCount	token 消耗量	number	—

事件 (Events)

事件名	说明	回调参数
update:expanded / onExpandedChange	展开状态变化时触发	(expanded: boolean)

插槽 (Slots)

插槽名	说明
default	思维链内容