Think 思考过程

展示大模型深度思考过程。

何时使用

• 用于在对话时展示大模型的深度思考过程。

代码演示

基础用法

deep thinking

This is deep thinking content.

基础用法

基础用法。

<script setup lang="tsx">
import { Think } from 'ant-design-x-vue';

defineRender(() => (
  <Think title="deep thinking">This is deep thinking content.</Think>
));
</script>

隐藏源代码

设置状态

Complete thinking

This is deep thinking content.

Complete thinking

Customize status icon.

设置状态

可自定义状态文本和图标。

<script setup lang="tsx">
import { ChromeOutlined, SyncOutlined } from '@ant-design/icons-vue';
import { Button } from 'ant-design-vue';
import { Think } from 'ant-design-x-vue';
import { ref } from 'vue';

const title = ref('Complete thinking');
const loading = ref(false);

const handleClick = () => {
  loading.value = true;
  title.value = 'deep thinking';

  setTimeout(() => {
    loading.value = false;
    title.value = 'Complete thinking';
  }, 2000);
};

defineRender(() => (
  <>
    <div>
      <Button onClick={handleClick}>Run</Button>
    </div>
    <br />
    <Think title={title.value} blink loading={loading.value}>
      This is deep thinking content.
    </Think>
    <br />
    <Think
      title={title.value}
      loading={
        loading.value ? (
          <SyncOutlined style={{ fontSize: '12px', animation: 'spin 1s linear infinite' }} />
        ) : (
          false
        )
      }
      icon={<ChromeOutlined />}
    >
      Customize status icon.
    </Think>
    <style>{`
      @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
    `}</style>
  </>
));
</script>

隐藏源代码

是否展开

deep thinking

This is deep thinking content.

是否展开

控制展开折叠状态。

<script setup lang="tsx">
import { Button } from 'ant-design-vue';
import { Think } from 'ant-design-x-vue';
import { ref } from 'vue';

const value = ref(true);

defineRender(() => (
  <>
    <div>
      <Button onClick={() => (value.value = !value.value)}>Change expand</Button>
    </div>
    <br />
    <Think
      title="deep thinking"
      expanded={value.value}
      onExpand={(val: boolean) => {
        value.value = val;
      }}
    >
      This is deep thinking content.
    </Think>
  </>
));
</script>

隐藏源代码

API

ThinkProps

属性	说明	类型	默认值	版本
classNames	样式类名	Record<SemanticDOM, string>	-	-
styles	样式 style	Record<SemanticDOM, CSSProperties>	-	-
title	状态文本	VNode | string	-	-
icon	状态图标	VNode	-	-
loading	加载中	boolean | VNode	false	-
defaultExpanded	默认是否展开	boolean	true	-
expanded	是否展开	boolean	-	-
onExpand	展开事件	(expand: boolean) => void	-	-
blink	闪动模式	boolean	-	-

Slots

名称	说明
default	思考内容
title	自定义状态文本
icon	自定义状态图标

Semantic DOM

deep thinking

This is deep thinking content.

• root

  根节点

• status

  状态区

• content

  内容区

主题变量（Design Token）

Token	说明	类型	默认值
colorTextBlinkDefault	默认打字动画颜色	string	colorTextDescription
colorTextBlink	打字动画颜色	string	colorTextBase