Tencent · carolin913 · Apr 25, 2025 · Apr 25, 2025 · Apr 25, 2025
@@ -0,0 +1,20 @@
+import React from 'react';
+import { ChatLoading, Space } from 'tdesign-react';
+
+const ChatLoadingExample = () => (
+  <>
+    <Space>
+      <div style={{ width: 600, height: 150 }}>
+        <ChatLoading animation="skeleton"></ChatLoading>
+      </div>
+    </Space>
+    <Space size={60}>
+      <ChatLoading animation="moving" />
+      <ChatLoading animation="gradient" />
+      <ChatLoading animation="circle" />
+      <ChatLoading animation="moving" text={'加载中...'} />
+    </Space>
+  </>
+);
+
+export default ChatLoadingExample;
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+### Button Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+block | Boolean | false | make button to be a block-level element | N
+children | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+content | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+disabled | Boolean | false | disable the button, make it can not be clicked | N
+form | String | undefined |  native `form` attribute，which supports triggering events for a form with a specified id through the use of the form attribute. | N
+ghost | Boolean | false | make background-color to be transparent | N
+href | String | - | \- | N
+icon | TElement | - | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+loading | Boolean | false | set button to be loading state | N
+shape | String | rectangle | button shape。options：rectangle/square/round/circle | N
+size | String | medium | a button has three size。options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+suffix | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+tag | String | - | HTML Tag Element。options：button/a/div | N
+theme | String | - | button theme。options：default/primary/danger/warning/success | N
+type | String | button | type of button element in html。options：submit/reset/button | N
+variant | String | base | variant of button。options：base/outline/dashed/text | N
+onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>trigger on click | N
@@ -0,0 +1,37 @@
+---
+title: ChatLoading 对话加载
+description: 对话加载
+isComponent: true
+usage: { title: '', description: '' }
+spline: navigation
+---
+
+## 基础用法
+
+{{ base }}
+
+
+## API
+### Chatbot Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+block | Boolean | false | 是否为块级元素 | N
+children | TNode | - | 按钮内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+content | TNode | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+disabled | Boolean | false | 禁用状态 | N
+form | String | undefined | 原生的form属性，支持用于通过 form 属性触发对应 id 的 form 的表单事件 | N
+ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
+href | String | - | 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染 | N
+icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+loading | Boolean | false | 是否显示为加载状态 | N
+shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
+size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+suffix | TElement | - | 右侧内容，可用于定义右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+tag | String | - | 渲染按钮的 HTML 标签，默认使用标签 `<button>` 渲染，可以自定义为 `<a>` `<div>` 等。透传全部 HTML 属性，如：`href/target/data-*` 等。⚠️ 禁用按钮 `<button disabled>`无法显示 Popup 浮层信息，可通过修改 `tag=div` 解决这个问题。可选项：button/a/div | N
+theme | String | - | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
+type | String | button | 按钮类型。可选项：submit/reset/button | N
+variant | String | base | 按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text | N
+onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触发 | N
@@ -0,0 +1,10 @@
+import { TdChatLoadingProps } from '@tencent/tdesign-chatbot/lib/chat-loading';
+import reactify from '../_util/reactify';
+
+export const ChatLoading: React.ForwardRefExoticComponent<
+  Omit<TdChatLoadingProps, 'ref'> & React.RefAttributes<HTMLElement | undefined>
+> = reactify<TdChatLoadingProps>('t-chat-loading');
+
+export default ChatLoading;
+
+export type * from '@tencent/tdesign-chatbot';
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { ChatSender } from 'tdesign-react';
+
+const ChatSenderExample = () => {
+  const [inputValue, setInputValue] = useState('输入内容');
+  const [loading, setLoading] = useState(false);
+
+  // 输入变化处理
+  const handleChange = (e) => {
+    console.log('onChange', e.detail);
+    setInputValue(e.detail);
+  };
+
+  // 发送处理
+  const handleSend = () => {
+    console.log('提交', { value: inputValue });
+    setInputValue('');
+    setLoading(true);
+  };
+
+  // 停止处理
+  const handleStop = () => {
+    console.log('停止');
+    setLoading(false);
+  };
+
+  return (
+    <ChatSender
+      value={inputValue}
+      placeholder="请输入内容"
+      loading={loading}
+      autosize={{ minRows: 2 }}
+      onChange={handleChange}
+      onSend={handleSend}
+      onStop={handleStop}
+    />
+  );
+};
+
+export default ChatSenderExample;
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+### Button Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+block | Boolean | false | make button to be a block-level element | N
+children | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+content | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+disabled | Boolean | false | disable the button, make it can not be clicked | N
+form | String | undefined |  native `form` attribute，which supports triggering events for a form with a specified id through the use of the form attribute. | N
+ghost | Boolean | false | make background-color to be transparent | N
+href | String | - | \- | N
+icon | TElement | - | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+loading | Boolean | false | set button to be loading state | N
+shape | String | rectangle | button shape。options：rectangle/square/round/circle | N
+size | String | medium | a button has three size。options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+suffix | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+tag | String | - | HTML Tag Element。options：button/a/div | N
+theme | String | - | button theme。options：default/primary/danger/warning/success | N
+type | String | button | type of button element in html。options：submit/reset/button | N
+variant | String | base | variant of button。options：base/outline/dashed/text | N
+onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>trigger on click | N
@@ -0,0 +1,37 @@
+---
+title: ChatSender 对话输入
+description: 对话输入
+isComponent: true
+usage: { title: '', description: '' }
+spline: navigation
+---
+
+## 基础用法
+
+{{ base }}
+
+
+## API
+### Chatbot Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+block | Boolean | false | 是否为块级元素 | N
+children | TNode | - | 按钮内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+content | TNode | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+disabled | Boolean | false | 禁用状态 | N
+form | String | undefined | 原生的form属性，支持用于通过 form 属性触发对应 id 的 form 的表单事件 | N
+ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
+href | String | - | 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染 | N
+icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+loading | Boolean | false | 是否显示为加载状态 | N
+shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
+size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+suffix | TElement | - | 右侧内容，可用于定义右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+tag | String | - | 渲染按钮的 HTML 标签，默认使用标签 `<button>` 渲染，可以自定义为 `<a>` `<div>` 等。透传全部 HTML 属性，如：`href/target/data-*` 等。⚠️ 禁用按钮 `<button disabled>`无法显示 Popup 浮层信息，可通过修改 `tag=div` 解决这个问题。可选项：button/a/div | N
+theme | String | - | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
+type | String | button | 按钮类型。可选项：submit/reset/button | N
+variant | String | base | 按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text | N
+onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触发 | N
@@ -0,0 +1,13 @@
+import {
+  TdChatSenderProps,
+} from '@tencent/tdesign-chatbot';
+import reactify from '../_util/reactify';
+
+
+export const ChatSender: React.ForwardRefExoticComponent<
+  Omit<TdChatSenderProps, 'ref'> & React.RefAttributes<HTMLElement | undefined>
+> = reactify<TdChatSenderProps>('t-chat-sender');
+
+export default ChatSender;
+
+export type * from '@tencent/tdesign-chatbot';
@@ -0,0 +1,51 @@
+import { type MessageStatus } from '@tencent/tdesign-chatbot';
+import React, { useState, useEffect, useRef } from 'react';
+import { ChatThinking } from 'tdesign-react';
+
+const fullText =
+  '嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说，保持原来的运动状态。那问题来了，这个定律是否适用于所有参考系呢？记得以前学过的参考系分惯性系和非惯性系。惯性系里，牛顿定律成立；非惯性系里，可能需要引入惯性力之类的修正。所以牛顿第一定律应该只在惯性参考系中成立，而在非惯性系中不适用，比如加速的电梯或者旋转的参考系，这时候物体会有看似无外力下的加速度，所以必须引入假想的力来解释。';
+
+export default function ThinkContentDemo() {
+  const [displayText, setDisplayText] = useState('');
+  const [status, setStatus] = useState<MessageStatus>('pending');
+  const [title, setTitle] = useState('正在思考中...');
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(null);
+  const currentIndex = useRef(0);
+  const startTimeRef = useRef(Date.now());
+
+  useEffect(() => {
+    // 模拟打字效果
+    const typeEffect = () => {
+      if (currentIndex.current < fullText.length) {
+        const char = fullText[currentIndex.current];
+        currentIndex.current += 1;
+        setDisplayText((prev) => prev + char);
+        timerRef.current = setTimeout(typeEffect, 50);
+        setStatus('streaming');
+      } else {
+        // 计算耗时并更新状态
+        const costTime = parseInt(((Date.now() - startTimeRef.current) / 1000).toString(), 10);
+        setTitle(`已完成思考（耗时${costTime}秒）`);
+        setStatus('complete');
+      }
+    };
+
+    startTimeRef.current = Date.now();
+    timerRef.current = setTimeout(typeEffect, 500);
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  return (
+    <ChatThinking
+      content={{
+        title,
+        text: displayText,
+      }}
+      status={status}
+      maxHeight={100}
+    />
+  );
+}
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+### Button Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+block | Boolean | false | make button to be a block-level element | N
+children | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+content | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+disabled | Boolean | false | disable the button, make it can not be clicked | N
+form | String | undefined |  native `form` attribute，which supports triggering events for a form with a specified id through the use of the form attribute. | N
+ghost | Boolean | false | make background-color to be transparent | N
+href | String | - | \- | N
+icon | TElement | - | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+loading | Boolean | false | set button to be loading state | N
+shape | String | rectangle | button shape。options：rectangle/square/round/circle | N
+size | String | medium | a button has three size。options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+suffix | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+tag | String | - | HTML Tag Element。options：button/a/div | N
+theme | String | - | button theme。options：default/primary/danger/warning/success | N
+type | String | button | type of button element in html。options：submit/reset/button | N
+variant | String | base | variant of button。options：base/outline/dashed/text | N
+onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>trigger on click | N
@@ -0,0 +1,37 @@
+---
+title: ChatThinking 思考过程
+description: 思考过程
+isComponent: true
+usage: { title: '', description: '' }
+spline: navigation
+---
+
+## 基础用法
+
+{{ base }}
+
+
+## API
+### Chatbot Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+block | Boolean | false | 是否为块级元素 | N
+children | TNode | - | 按钮内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+content | TNode | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+disabled | Boolean | false | 禁用状态 | N
+form | String | undefined | 原生的form属性，支持用于通过 form 属性触发对应 id 的 form 的表单事件 | N
+ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
+href | String | - | 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染 | N
+icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+loading | Boolean | false | 是否显示为加载状态 | N
+shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
+size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+suffix | TElement | - | 右侧内容，可用于定义右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+tag | String | - | 渲染按钮的 HTML 标签，默认使用标签 `<button>` 渲染，可以自定义为 `<a>` `<div>` 等。透传全部 HTML 属性，如：`href/target/data-*` 等。⚠️ 禁用按钮 `<button disabled>`无法显示 Popup 浮层信息，可通过修改 `tag=div` 解决这个问题。可选项：button/a/div | N
+theme | String | - | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
+type | String | button | 按钮类型。可选项：submit/reset/button | N
+variant | String | base | 按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text | N
+onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触发 | N
@@ -0,0 +1,16 @@
+import {
+  TdChatThinkContentProps,
+} from '@tencent/tdesign-chatbot';
+import reactify from '../_util/reactify';
+
+
+
+const ChatThinkContent: React.ForwardRefExoticComponent<
+  Omit<TdChatThinkContentProps, 'ref'> & React.RefAttributes<HTMLElement | undefined>
+> = reactify<TdChatThinkContentProps>('t-chat-thinking-content');
+
+export const ChatThinking = ChatThinkContent;
+
+export default ChatThinking;
+
+export type * from '@tencent/tdesign-chatbot';
+0 −8		.github/workflows/tdesign-component-repositories-ci.yml
+6 −6		docs/mobile/api/fab.md
+0 −39		docs/mobile/api/slider.en-US.md
+16 −16		docs/mobile/api/slider.md
+0 −7		docs/package.json
+0 −10		docs/web/api/breadcrumb.en-US.md
+0 −10		docs/web/api/breadcrumb.md
+1 −1		docs/web/api/color-picker.en-US.md
+1 −1		docs/web/api/color-picker.md
+1 −1		docs/web/api/loading.md
+10 −27		js/color-picker/color.ts
+1 −9		js/color-picker/constants.ts
+22 −31		js/color-picker/gradient.ts
+0 −2		js/global-config/locale/en_US.ts
+0 −2		js/global-config/locale/it_IT.ts
+0 −2		js/global-config/locale/ja_JP.ts
+0 −2		js/global-config/locale/ko_KR.ts
+0 −2		js/global-config/locale/ru_RU.ts
+0 −2		js/global-config/locale/zh_CN.ts
+0 −2		js/global-config/locale/zh_TW.ts
+3 −4		js/input-number/number.ts
+0 −9		js/progress/const.ts
+0 −37		js/progress/utils.ts
+2 −8		js/tabs/base.ts
+0 −1		style/web/components/swiper/_index.less
+0 −23		test/unit/input-number/number.test.js