@alifd/chat 0.3.36-beta.0 → 0.3.37-beta.0

package/es/stop-generate/__docs__/demo/basic/index.js

@@ -0,0 +1,53 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks StopGenerate 组件的基本用法。
+ * - Basic usage of `StopGenerateP`
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { StopGenerate } from '@alifd/chat';
+import '@alifd/chat/es/stop-generate/style';
+ReactDOM.render(React.createElement("div", { className: "origin-basic-demo" },
+    React.createElement("div", { style: {
+            width: '500px'
+        } },
+        React.createElement(StopGenerate, { stopText: '\u505C\u6B62\u751F\u6210\u81EA\u5B9A\u4E49', stopIcon: '', stoppedText: '\u5C0F\u871C\u5DF2\u505C\u6B62\u751F\u6210\u81EA\u5B9A', onStop: () => {
+                console.log('StopGenerate onStop');
+            } }),
+        React.createElement(StopGenerate
+        // stopText='停止生成'
+        // stopIcon=''
+        // @ts-ignore
+        , { 
+            // stopText='停止生成'
+            // stopIcon=''
+            // @ts-ignore
+            status: 'stopped', 
+            // stoppedText='小蜜已停止生成'
+            onStop: () => {
+                console.log('StopGenerate onStop');
+            } }),
+        React.createElement(StopGenerate
+        // stopText='停止生成'
+        , { 
+            // stopText='停止生成'
+            show: false, 
+            // @ts-ignore
+            status: 'stopped', 
+            // stoppedText='小蜜已停止生成'
+            onStop: () => {
+                console.log('StopGenerate onStop');
+            } }),
+        React.createElement(StopGenerate
+        // stopText='停止生成'
+        // show={false}
+        // @ts-ignore
+        , { 
+            // stopText='停止生成'
+            // show={false}
+            // @ts-ignore
+            status: 'stopped', stoppedText: '\u5C0F\u871C\u5DF2\u505C\u6B62\u751F\u6210\u81EA\u5B9A\u4E49\u53C2\u6570', onStop: () => {
+                console.log('StopGenerate onStop');
+            } }))), mountNode);

package/es/tag/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @component 标签
+ * @en Tag
+ * @type 通用 - General
+ * @remarks 同 Next Tag - Same as Next.Tag
+ * @when Tag
+ */
+import '@alifd/chat/es/tag/style';

package/es/tag/__docs__/demo/basic/index.js

@@ -0,0 +1,16 @@
+/**
+ * @component 标签
+ * @en Tag
+ * @type 通用 - General
+ * @remarks 同 Next Tag - Same as Next.Tag
+ * @when Tag
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Tag } from '@alifd/chat';
+import '@alifd/chat/es/tag/style';
+ReactDOM.render(React.createElement("div", null,
+    React.createElement(Tag, { type: 'normal', color: 'blue' }, "\u84DD\u8272"),
+    React.createElement(Tag, { type: 'normal' }, "\u4E0D\u4F20\u989C\u8272normal"),
+    React.createElement(Tag, { type: 'primary' }, "\u4E0D\u4F20\u989C\u8272primary"),
+    React.createElement(Tag, { type: 'primary', color: 'green' }, "\u7EFF\u8272")), mountNode);

package/es/text/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @demo 文本组件
+ * @en Text Component
+ * @order 1
+ * @remarks
+ * - `maxLine`: 控制文本的最大行数。
+ * - `triggerType`: 定义触发方式，支持 `click` 和 `hover`。
+ * - `locale`: 自定义展开和收起文本。
+ * - `showTrigger`: 是否显示触发按钮。
+ * - `renderTrigger`: 自定义触发按钮的渲染。
+ * - `className`: 自定义样式类。
+ *
+ * - `maxLine`: Controls the maximum number of lines for the text.
+ * - `triggerType`: Defines the trigger type, supporting `click` and `hover`.
+ * - `locale`: Customizes the expand and collapse text.
+ * - `showTrigger`: Determines whether to show the trigger button.
+ * - `renderTrigger`: Customizes the rendering of the trigger button.
+ * - `className`: Custom CSS class.
+ */
+import '@alifd/chat/es/text/style';
+import '@alifd/chat/es/icon/style';

package/es/text/__docs__/demo/basic/index.js

@@ -0,0 +1,44 @@
+/**
+ * @demo 文本组件
+ * @en Text Component
+ * @order 1
+ * @remarks
+ * - `maxLine`: 控制文本的最大行数。
+ * - `triggerType`: 定义触发方式，支持 `click` 和 `hover`。
+ * - `locale`: 自定义展开和收起文本。
+ * - `showTrigger`: 是否显示触发按钮。
+ * - `renderTrigger`: 自定义触发按钮的渲染。
+ * - `className`: 自定义样式类。
+ *
+ * - `maxLine`: Controls the maximum number of lines for the text.
+ * - `triggerType`: Defines the trigger type, supporting `click` and `hover`.
+ * - `locale`: Customizes the expand and collapse text.
+ * - `showTrigger`: Determines whether to show the trigger button.
+ * - `renderTrigger`: Customizes the rendering of the trigger button.
+ * - `className`: Custom CSS class.
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Text, Icon } from '@alifd/chat';
+import '@alifd/chat/es/text/style';
+import '@alifd/chat/es/icon/style';
+ReactDOM.render(React.createElement("div", null,
+    React.createElement("div", null,
+        React.createElement(Text, { maxLine: 2, triggerType: "click", locale: { collapseText: '收起', expandText: '展开' }, showTrigger: true, className: "custom-text-class", renderTrigger: (visible, onVisibleChange) => {
+                if (visible) {
+                    return '';
+                }
+                return React.createElement("span", { className: 'expend-container' },
+                    React.createElement(Icon, { className: 'item-icon-expend', type: 'arrow-down', size: 'small', onClick: () => {
+                            onVisibleChange(!visible);
+                        } }));
+            } },
+            "\u6D59\u6C5F\u7701/\u676D\u5DDE\u5E02/\u4F59\u676D\u533A/\u4F59\u676D\u8857\u9053\u540C\u57CE\u5370\u8C61\u82B1\u82D1\u5317\u533A2\u5E622\u5355\u51431104\u5BA4/\u6D59\u6C5F\u7701/\u676D\u5DDE\u5E02/\u4F59\u676D\u533A/\u4F59\u676D\u8857\u9053\u540C\u57CE\u5370\u8C61\u82B1\u82D1\u5317\u533A2\u5E622\u5355\u51431104\u5BA4",
+            React.createElement(Icon, { className: 'item-icon-copy', type: 'copy', size: 'small', onClick: () => {
+                    console.log('onCopy value:');
+                    // copy?.(value?.text);
+                } }))),
+    React.createElement("div", null,
+        React.createElement(Text, { maxLine: 3, triggerType: "click", locale: { collapseText: '收起', expandText: '展开' }, showTrigger: true, className: "custom-text-class", renderTrigger: (visible, onVisibleChange) => (React.createElement("button", { onClick: () => onVisibleChange(!visible) }, visible ? '收起' : '展开')) },
+            "\u8FD9\u662F\u4E00\u4E2A\u5F88\u77ED\u7684\u6D4B\u8BD5\u6587\u672C",
+            React.createElement("span", { style: { color: 'pink' } }, "  \u4F60\u597D\u5440 ")))), mountNode);

package/es/time-picker/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @demo 时间选择器
+ * @en Size
+ * @order 1
+ * @remarks 可以通过设置 `size` 属性控制按钮的尺寸，可选值为 `large` `medium` `small`，其中默认值为 `medium`。
+ * - The size of a Button is controlled by a `size` attribute, supporting `large`, `medium`, `small`, the default value is `medium`.
+ */
+import '@alifd/chat/es/time-picker/style';

package/es/time-picker/__docs__/demo/basic/index.js

@@ -0,0 +1,13 @@
+/**
+ * @demo 时间选择器
+ * @en Size
+ * @order 1
+ * @remarks 可以通过设置 `size` 属性控制按钮的尺寸，可选值为 `large` `medium` `small`，其中默认值为 `medium`。
+ * - The size of a Button is controlled by a `size` attribute, supporting `large`, `medium`, `small`, the default value is `medium`.
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { TimePicker } from '@alifd/chat';
+import '@alifd/chat/es/time-picker/style';
+ReactDOM.render(React.createElement("div", null,
+    React.createElement(TimePicker, { mode: "dingtalk", minuteStep: 15, value: new Date() })), mountNode);

package/es/tool-status/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks ToolStatus 组件的基本用法。
+ * - Basic usage of `ToolStatus`
+ */
+import '@alifd/chat/es/tool-status/style';

package/es/tool-status/__docs__/demo/basic/index.js

@@ -0,0 +1,53 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks ToolStatus 组件的基本用法。
+ * - Basic usage of `ToolStatus`
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ToolStatus } from '@alifd/chat';
+import '@alifd/chat/es/tool-status/style';
+const testList = [
+    {
+        selected: true,
+        status: 'completed',
+        result: "展示工具结果啦啦啦",
+    },
+    {
+        selected: false,
+        status: 'running',
+        result: "展示工具结果啦啦啦",
+    },
+    {
+        selected: true,
+        status: 'failed',
+        name: "工具1",
+        fullWidth: true,
+        result: "展示工具结果啦啦啦",
+    },
+    {
+        selected: false,
+        status: 'auth',
+        name: "工具3",
+        result: "展示工具结果啦啦啦",
+        authInfo: {
+            content: '等待授权',
+            onAuthClick: (data) => console.log('auth clicked:', data)
+        }
+    },
+    {
+        selected: false,
+        status: 'started',
+        result: "展示工具结果啦啦啦"
+    },
+];
+ReactDOM.render(React.createElement("div", { className: "origin-basic-demo" },
+    React.createElement("div", { style: {
+            width: '500px'
+        } }, testList === null || testList === void 0 ? void 0 : testList.map((v, index) => {
+        return React.createElement(ToolStatus, Object.assign({}, v, { key: index, onToolClick: (data) => {
+                console.log('onToolClick:', data);
+            } }));
+    }))), mountNode);

package/lib/ai-loading/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks ai-loading 加载动画组件的基本用法。
+ * - Basic usage of `ai-loading`
+ */
+import '@alifd/chat/es/ai-loading/style';

package/lib/ai-loading/__docs__/demo/basic/index.js

@@ -0,0 +1,19 @@
+"use strict";
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks ai-loading 加载动画组件的基本用法。
+ * - Basic usage of `ai-loading`
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/ai-loading/style");
+react_dom_1.default.render(react_1.default.createElement("div", { className: "origin-basic-demo" },
+    react_1.default.createElement("div", { style: {
+            width: '500px',
+        } },
+        react_1.default.createElement(chat_1.AILoading, null))), mountNode);

package/lib/balloon/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @demo 类型
+ * @en Style Type
+ * @order 0
+ * @remarks 常见气泡使用类型
+ * - Common types of Balloon.
+ */
+import '@alifd/chat/es/button/style';
+import '@alifd/chat/es/balloon/style';

package/lib/balloon/__docs__/demo/basic/index.js

@@ -0,0 +1,19 @@
+"use strict";
+/**
+ * @demo 类型
+ * @en Style Type
+ * @order 0
+ * @remarks 常见气泡使用类型
+ * - Common types of Balloon.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/button/style");
+require("@alifd/chat/es/balloon/style");
+const Demo = () => (react_1.default.createElement("div", { className: "balloon-container" },
+    react_1.default.createElement(chat_1.Balloon, { v2: true, triggerType: "click", title: "Balloon Title", trigger: react_1.default.createElement(chat_1.Button, { type: "secondary", size: "medium" }, "Default"), align: "br" }, "First performed around 1600, Hamlet tells the story of a prince whose duty to revenge his father's death entangles him in philosophical problems he can't solve."),
+    react_1.default.createElement(chat_1.Balloon, { v2: true, type: "primary", triggerType: "click", title: "Balloon Title", trigger: react_1.default.createElement(chat_1.Button, { type: "primary", size: "medium" }, "Primary"), align: "br", closable: false }, "First performed around 1600, Hamlet tells the story of a prince whose duty to revenge his father's death entangles him in philosophical problems he can't solve.")));
+react_dom_1.default.render(react_1.default.createElement(Demo, null), mountNode);

package/lib/button/__docs__/demo/size/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @demo 按钮尺寸
+ * @en Size
+ * @order 1
+ * @remarks 可以通过设置 `size` 属性控制按钮的尺寸，可选值为 `large` `medium` `small`，其中默认值为 `medium`。
+ * - The size of a Button is controlled by a `size` attribute, supporting `large`, `medium`, `small`, the default value is `medium`.
+ */
+import '@alifd/chat/es/button/style';

package/lib/button/__docs__/demo/size/index.js

@@ -0,0 +1,118 @@
+"use strict";
+/**
+ * @demo 按钮尺寸
+ * @en Size
+ * @order 1
+ * @remarks 可以通过设置 `size` 属性控制按钮的尺寸，可选值为 `large` `medium` `small`，其中默认值为 `medium`。
+ * - The size of a Button is controlled by a `size` attribute, supporting `large`, `medium`, `small`, the default value is `medium`.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/button/style");
+const dataSource = [
+    {
+        buttonType: 'primary',
+        buttonStatus: 'disabled',
+        label: '竖排50',
+        onClick: () => {
+            console.log('竖排50');
+        },
+        action: {
+            tapType: 'OpenLink',
+            disabled: true,
+            config: {
+                //pc
+                pcUrl: 'https://alidocs.dingtalk.com/i/nodes/7NkDwLng8Za7QYkeHmnyaM6vJKMEvZBY',
+                //mobile
+                mobileUrl: 'mobilehttps://alidocs.dingtalk.com/i/nodes/7NkDwLng8Za7QYkeHmnyaM6vJKMEvZBY',
+            },
+        },
+    },
+    {
+        buttonType: 'secondary',
+        buttonStatus: 'disabled',
+        disabled: true,
+        label: "竖排51",
+        onClick: () => {
+            console.log('竖排51');
+        },
+        action: {
+            tapType: 'SendTextMessage',
+            config: {
+                message: '测试',
+            }
+        },
+    },
+    {
+        buttonType: 'normal',
+        buttonStatus: 'normal',
+        label: '竖排52',
+        onClick: () => {
+            console.log('竖排52');
+        },
+        action: {
+            tapType: 'Copy',
+            config: {
+                copyText: '复制的内容',
+            }
+        },
+    },
+    {
+        buttonType: 'secondary',
+        buttonStatus: 'normal',
+        label: "竖排53",
+        onClick: () => {
+            console.log('竖排53');
+        },
+        action: {
+            tapType: 'SendTextMessage',
+            config: {
+                message: '测试',
+            }
+        },
+    },
+    {
+        buttonType: 'secondary',
+        buttonStatus: 'normal',
+        label: "竖排54",
+        onClick: () => {
+            console.log('竖排54');
+        },
+        action: {
+            tapType: 'SendTextMessage',
+            config: {
+                message: '测试',
+            }
+        },
+    },
+    {
+        buttonType: 'secondary',
+        buttonStatus: 'normal',
+        label: "竖排55",
+        onClick: () => {
+            console.log('竖排55');
+        },
+        action: {
+            tapType: 'SendTextMessage',
+            config: {
+                message: '测试',
+            }
+        },
+    },
+];
+react_dom_1.default.render(react_1.default.createElement("div", null,
+    react_1.default.createElement(chat_1.Button, { type: "primary", size: "large" }, "Large"),
+    react_1.default.createElement(chat_1.Button, { type: "secondary", size: "medium", icon: 'smile' }, "Large"),
+    react_1.default.createElement(chat_1.Button, { type: "normal", size: "small" }, "Large"),
+    react_1.default.createElement("div", null, "\u7AD6\u63923\u4E2A"),
+    react_1.default.createElement(chat_1.Button.Group, { type: "column", dataSource: dataSource.slice(0, 3) }),
+    react_1.default.createElement("div", null, "\u7AD6\u63924\u4E2A"),
+    react_1.default.createElement(chat_1.Button.Group, { size: "large", type: "column", dataSource: dataSource.slice(0, 4) }),
+    react_1.default.createElement("div", null, "\u7AD6\u63925\u4E2A"),
+    react_1.default.createElement(chat_1.Button.Group, { type: "column", dataSource: dataSource.slice(0, 5) }),
+    react_1.default.createElement("div", null, "\u6A2A\u63923\u4E2A"),
+    react_1.default.createElement(chat_1.Button.Group, { size: "large", dataSource: dataSource.slice(0, 3) }),
+    react_1.default.createElement(chat_1.Button.Group, { size: "large", dataSource: dataSource.slice(0, 3) })), mountNode);

package/lib/card/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks
+ * 最简单的用法。
+ * -
+ * A simple card with title and sub-title.
+ */
+import '@alifd/chat/es/card/style';
+import '@alifd/chat/es/feedback/style';

package/lib/card/__docs__/demo/basic/index.js

@@ -0,0 +1,42 @@
+"use strict";
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks
+ * 最简单的用法。
+ * -
+ * A simple card with title and sub-title.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/card/style");
+require("@alifd/chat/es/feedback/style");
+react_dom_1.default.render(react_1.default.createElement("div", null,
+    react_1.default.createElement("h3", null, "\u666E\u901A"),
+    react_1.default.createElement(chat_1.Card, { style: { width: 300 } },
+        react_1.default.createElement("div", null,
+            "\u5173\u952E\u8BCD:xxx xxx xxx ",
+            react_1.default.createElement("br", null),
+            new Array(10).fill('这是一段创新提案摘要').join('，'))),
+    react_1.default.createElement("h3", null, "\u5E26 Title"),
+    react_1.default.createElement(chat_1.Card, { title: "\u63D0\u6848\u6982\u89C8", style: { width: 300 } },
+        react_1.default.createElement("div", null,
+            "\u5173\u952E\u8BCD:xxx xxx xxx ",
+            react_1.default.createElement("br", null),
+            new Array(10).fill('这是一段创新提案摘要').join('，'))),
+    react_1.default.createElement("h3", null, "\u5E26 Footer"),
+    react_1.default.createElement(chat_1.Card, { title: "\u63D0\u6848\u6982\u89C8", footer: react_1.default.createElement(chat_1.Feedback, null), style: { width: 300 } },
+        react_1.default.createElement("div", null,
+            "\u5173\u952E\u8BCD:xxx xxx xxx ",
+            react_1.default.createElement("br", null),
+            new Array(10).fill('这是一段创新提案摘要').join('，'))),
+    react_1.default.createElement("h3", null, "\u5E26\u5206\u9694\u7EBF"),
+    react_1.default.createElement(chat_1.Card, { title: "\u63D0\u6848\u6982\u89C8", footer: react_1.default.createElement(chat_1.Feedback, null), style: { width: 300 }, titleLine: true, footerLine: true },
+        react_1.default.createElement("div", null,
+            "\u5173\u952E\u8BCD:xxx xxx xxx ",
+            react_1.default.createElement("br", null),
+            new Array(10).fill('这是一段创新提案摘要').join('，')))), mountNode);

package/lib/card/__docs__/demo/demo-legal-affairs/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @demo 法务交付样例
+ * @order 2
+ * @remarks
+ * 法务机器人卡片组件
+ */
+import '@alifd/chat/es/card/style';
+import '@alifd/chat/es/feedback/style';
+import '@alifd/chat/es/text/style';
+import '@alifd/chat/es/tag/style';
+import '@alifd/chat/es/tab/style';
+import '@alifd/chat/es/float-button/style';
+import '@alifd/chat/es/button/style';

package/lib/card/__docs__/demo/demo-legal-affairs/index.js

@@ -0,0 +1,133 @@
+"use strict";
+/**
+ * @demo 法务交付样例
+ * @order 2
+ * @remarks
+ * 法务机器人卡片组件
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/card/style");
+require("@alifd/chat/es/feedback/style");
+require("@alifd/chat/es/text/style");
+require("@alifd/chat/es/tag/style");
+require("@alifd/chat/es/tab/style");
+require("@alifd/chat/es/float-button/style");
+require("@alifd/chat/es/button/style");
+const styled_components_1 = require("styled-components");
+const GlobalStyle = (0, styled_components_1.createGlobalStyle) `
+.card-legal-affairs {
+    .ct-card-header-title {
+        background-image: radial-gradient(
+            ellipse 160px 90px at 20px -20px,
+            rgb(from var(--color-brand1-6, #5584ff) r g b / 0.15) 0%,
+            transparent 100%
+        );
+        color: var(--color-brand1-6, #5584ff);
+    }
+}
+
+.my-trigger {
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    overflow: hidden;
+    box-shadow: 0 2px 10px 0 rgba(31, 56, 88, 0.15);
+    cursor: pointer;
+
+    &--active {
+        background: linear-gradient(0deg, #ff6f00 0%, #ff9616 100%);
+    }
+
+    &-img {
+        width: 100%;
+        height: 100%;
+        background: url('https://img.alicdn.com/imgextra/i3/O1CN01HV78sy1Q8Rieq3nI2_!!6000000001931-0-tps-84-84.jpg')
+            center / contain no-repeat;
+    }
+
+    &-close {
+        width: 100%;
+        height: 100%;
+        background: url('https://img.alicdn.com/tfs/TB1yEj_qhD1gK0jSZFsXXbldVXa-96-96.png') center /
+            contain no-repeat;
+    }
+}
+
+.my-popup {
+    width: 200px;
+    height: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+`;
+function FloatButtonDemo() {
+    const [active, setActive] = (0, react_1.useState)(false);
+    const [active2, setActive2] = (0, react_1.useState)(false);
+    const [target, setTarget] = (0, react_1.useState)('.card-legal-affairs');
+    const [show, setShow] = (0, react_1.useState)(true);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("button", { onClick: () => setShow(!show) }, "toggle"),
+        react_1.default.createElement("button", { onClick: () => {
+                setTarget(target === '.card-legal-affairs'
+                    ? '#demo-legal-affairs-mount'
+                    : '.card-legal-affairs');
+            } }, "change target"),
+        show && (react_1.default.createElement(chat_1.FloatButton.InnerDrawer, { dragable: true, target: target, align: "tl", autoAlign: true, title: "Title", showClose: true, autoHide: true, defaultPosition: [0.8, 0.8], onVisibleChange: v => setActive(v), trigger: react_1.default.createElement("div", { className: (0, classnames_1.default)('my-trigger', { 'my-trigger--active': active }) }, active ? (react_1.default.createElement("div", { className: "my-trigger-close" })) : (react_1.default.createElement("div", { className: "my-trigger-img" }))) },
+            react_1.default.createElement("div", { className: "my-popup" }, "Content"))),
+        react_1.default.createElement(chat_1.FloatButton.Drawer, { dragable: true, align: "tl", autoAlign: true, title: "Title", showClose: true, defaultPosition: [0.8, 0.6], onVisibleChange: v => setActive2(v), trigger: react_1.default.createElement("div", { className: (0, classnames_1.default)('my-trigger', { 'my-trigger--active': active2 }) }, active2 ? (react_1.default.createElement("div", { className: "my-trigger-close" })) : (react_1.default.createElement("div", { className: "my-trigger-img" }))) },
+            react_1.default.createElement("div", { className: "my-popup" }, "Content"))));
+}
+react_dom_1.default.render(react_1.default.createElement("div", { className: "card-legal-affairs" },
+    react_1.default.createElement(GlobalStyle, null),
+    react_1.default.createElement("h3", null, "\u666E\u901A\u6587\u672C\u5361\u7247"),
+    react_1.default.createElement(chat_1.Card, { title: "\u63D0\u6848\u6982\u89C8", style: { width: 300 } },
+        react_1.default.createElement(chat_1.Text, { maxLine: 4 },
+            "\u5173\u952E\u8BCD:xxx xxx xxx ",
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(chat_1.Tag, { color: "green", type: "normal" }, "123"),
+            react_1.default.createElement(chat_1.Tag, { color: "green", type: "primary" }, "xxx"),
+            new Array(101)
+                .fill('')
+                .map((_, i) => `${i}`)
+                .join('，'))),
+    react_1.default.createElement("h3", null, "\u666E\u901A\u6587\u672C\u5361\u7247\u5E26\u8D5E\u8E29"),
+    react_1.default.createElement(chat_1.Card, { title: "\u63D0\u6848\u6982\u89C8", footer: react_1.default.createElement(chat_1.Feedback, null), style: { width: 300 }, footerLine: true },
+        react_1.default.createElement("div", null,
+            "\u5173\u952E\u8BCD:xxx xxx xxx ",
+            react_1.default.createElement("br", null),
+            new Array(10).fill('这是一段创新提案摘要').join('，'))),
+    react_1.default.createElement("h3", null, "hover \u5C55\u793A\u5168\u8C8C"),
+    react_1.default.createElement(chat_1.Card.Collapsable, { title: "\u63D0\u6848\u6982\u89C8", footer: react_1.default.createElement(chat_1.Feedback, null), style: { width: 300 }, footerLine: true, renderContent: ({ visible, onVisibleChange, children }) => {
+            return (react_1.default.createElement(chat_1.Text, { maxLine: 4, visible: visible, onVisibleChange: onVisibleChange, showTrigger: false, triggerType: "hover" }, children));
+        } },
+        "\u5173\u952E\u8BCD:xxx xxx xxx ",
+        react_1.default.createElement("br", null),
+        new Array(15).fill('这是一段创新提案摘要').join('，')),
+    react_1.default.createElement("h3", null, "Tab card"),
+    react_1.default.createElement(chat_1.Card, { title: "\u63D0\u6848\u6982\u89C8", footer: react_1.default.createElement(chat_1.Feedback, null), style: { width: 300 }, footerLine: true },
+        react_1.default.createElement(chat_1.Tab, { contentStyle: { paddingTop: 8 } },
+            react_1.default.createElement(chat_1.Tab.Item, { title: "Tab1" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(chat_1.Button, null, "\u6309\u94AE"),
+                    react_1.default.createElement(chat_1.Button, { type: "primary" }, "\u6309\u94AE"),
+                    "\u5173\u952E\u8BCD:xxx xxx xxx1 ",
+                    react_1.default.createElement("br", null),
+                    new Array(10).fill('这是一段创新提案摘要').join('，'))),
+            react_1.default.createElement(chat_1.Tab.Item, { title: "Tab2" },
+                react_1.default.createElement("div", null,
+                    "\u5173\u952E\u8BCD:xxx xxx xxx2 ",
+                    react_1.default.createElement("br", null),
+                    new Array(10).fill('这是一段创新提案摘要').join('，'))),
+            react_1.default.createElement(chat_1.Tab.Item, { title: "Tab3" },
+                react_1.default.createElement("div", null,
+                    "\u5173\u952E\u8BCD:xxx xxx xxx3 ",
+                    react_1.default.createElement("br", null),
+                    new Array(10).fill('这是一段创新提案摘要').join('，'))))),
+    react_1.default.createElement("h3", null, "Inner drawer float button"),
+    react_1.default.createElement(FloatButtonDemo, null)), mountNode);

package/lib/card-loading/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks CardLoading 组件的基本用法。
+ * - Basic usage of `CardLoading`
+ */
+import '@alifd/chat/es/card-loading/style';

package/lib/card-loading/__docs__/demo/basic/index.js

@@ -0,0 +1,16 @@
+"use strict";
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks CardLoading 组件的基本用法。
+ * - Basic usage of `CardLoading`
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/card-loading/style");
+react_dom_1.default.render(react_1.default.createElement("div", { className: "card-loading-basic-demo" },
+    react_1.default.createElement(chat_1.CardLoading, null)), mountNode);