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

package/es/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/es/ai-loading/__docs__/demo/basic/index.js

@@ -0,0 +1,16 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks ai-loading 加载动画组件的基本用法。
+ * - Basic usage of `ai-loading`
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AILoading } from '@alifd/chat';
+import '@alifd/chat/es/ai-loading/style';
+ReactDOM.render(React.createElement("div", { className: "origin-basic-demo" },
+    React.createElement("div", { style: {
+            width: '500px',
+        } },
+        React.createElement(AILoading, null))), mountNode);

package/es/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/es/balloon/__docs__/demo/basic/index.js

@@ -0,0 +1,16 @@
+/**
+ * @demo 类型
+ * @en Style Type
+ * @order 0
+ * @remarks 常见气泡使用类型
+ * - Common types of Balloon.
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Button, Balloon } from '@alifd/chat';
+import '@alifd/chat/es/button/style';
+import '@alifd/chat/es/balloon/style';
+const Demo = () => (React.createElement("div", { className: "balloon-container" },
+    React.createElement(Balloon, { v2: true, triggerType: "click", title: "Balloon Title", trigger: React.createElement(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.createElement(Balloon, { v2: true, type: "primary", triggerType: "click", title: "Balloon Title", trigger: React.createElement(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.")));
+ReactDOM.render(React.createElement(Demo, null), mountNode);

package/es/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/es/button/__docs__/demo/size/index.js

@@ -0,0 +1,115 @@
+/**
+ * @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 { Button } from '@alifd/chat';
+import '@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: '测试',
+            }
+        },
+    },
+];
+ReactDOM.render(React.createElement("div", null,
+    React.createElement(Button, { type: "primary", size: "large" }, "Large"),
+    React.createElement(Button, { type: "secondary", size: "medium", icon: 'smile' }, "Large"),
+    React.createElement(Button, { type: "normal", size: "small" }, "Large"),
+    React.createElement("div", null, "\u7AD6\u63923\u4E2A"),
+    React.createElement(Button.Group, { type: "column", dataSource: dataSource.slice(0, 3) }),
+    React.createElement("div", null, "\u7AD6\u63924\u4E2A"),
+    React.createElement(Button.Group, { size: "large", type: "column", dataSource: dataSource.slice(0, 4) }),
+    React.createElement("div", null, "\u7AD6\u63925\u4E2A"),
+    React.createElement(Button.Group, { type: "column", dataSource: dataSource.slice(0, 5) }),
+    React.createElement("div", null, "\u6A2A\u63923\u4E2A"),
+    React.createElement(Button.Group, { size: "large", dataSource: dataSource.slice(0, 3) }),
+    React.createElement(Button.Group, { size: "large", dataSource: dataSource.slice(0, 3) })), mountNode);

package/es/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/es/card/__docs__/demo/basic/index.js

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

package/es/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/es/card/__docs__/demo/demo-legal-affairs/index.js

@@ -0,0 +1,130 @@
+/**
+ * @demo 法务交付样例
+ * @order 2
+ * @remarks
+ * 法务机器人卡片组件
+ */
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import cs from 'classnames';
+import { Card, Feedback, Text, Tag, Tab, FloatButton, Button } from '@alifd/chat';
+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';
+import { createGlobalStyle } from 'styled-components';
+const GlobalStyle = 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] = useState(false);
+    const [active2, setActive2] = useState(false);
+    const [target, setTarget] = useState('.card-legal-affairs');
+    const [show, setShow] = useState(true);
+    return (React.createElement("div", null,
+        React.createElement("button", { onClick: () => setShow(!show) }, "toggle"),
+        React.createElement("button", { onClick: () => {
+                setTarget(target === '.card-legal-affairs'
+                    ? '#demo-legal-affairs-mount'
+                    : '.card-legal-affairs');
+            } }, "change target"),
+        show && (React.createElement(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.createElement("div", { className: cs('my-trigger', { 'my-trigger--active': active }) }, active ? (React.createElement("div", { className: "my-trigger-close" })) : (React.createElement("div", { className: "my-trigger-img" }))) },
+            React.createElement("div", { className: "my-popup" }, "Content"))),
+        React.createElement(FloatButton.Drawer, { dragable: true, align: "tl", autoAlign: true, title: "Title", showClose: true, defaultPosition: [0.8, 0.6], onVisibleChange: v => setActive2(v), trigger: React.createElement("div", { className: cs('my-trigger', { 'my-trigger--active': active2 }) }, active2 ? (React.createElement("div", { className: "my-trigger-close" })) : (React.createElement("div", { className: "my-trigger-img" }))) },
+            React.createElement("div", { className: "my-popup" }, "Content"))));
+}
+ReactDOM.render(React.createElement("div", { className: "card-legal-affairs" },
+    React.createElement(GlobalStyle, null),
+    React.createElement("h3", null, "\u666E\u901A\u6587\u672C\u5361\u7247"),
+    React.createElement(Card, { title: "\u63D0\u6848\u6982\u89C8", style: { width: 300 } },
+        React.createElement(Text, { maxLine: 4 },
+            "\u5173\u952E\u8BCD:xxx xxx xxx ",
+            React.createElement("br", null),
+            React.createElement(Tag, { color: "green", type: "normal" }, "123"),
+            React.createElement(Tag, { color: "green", type: "primary" }, "xxx"),
+            new Array(101)
+                .fill('')
+                .map((_, i) => `${i}`)
+                .join('，'))),
+    React.createElement("h3", null, "\u666E\u901A\u6587\u672C\u5361\u7247\u5E26\u8D5E\u8E29"),
+    React.createElement(Card, { title: "\u63D0\u6848\u6982\u89C8", footer: React.createElement(Feedback, null), style: { width: 300 }, footerLine: true },
+        React.createElement("div", null,
+            "\u5173\u952E\u8BCD:xxx xxx xxx ",
+            React.createElement("br", null),
+            new Array(10).fill('这是一段创新提案摘要').join('，'))),
+    React.createElement("h3", null, "hover \u5C55\u793A\u5168\u8C8C"),
+    React.createElement(Card.Collapsable, { title: "\u63D0\u6848\u6982\u89C8", footer: React.createElement(Feedback, null), style: { width: 300 }, footerLine: true, renderContent: ({ visible, onVisibleChange, children }) => {
+            return (React.createElement(Text, { maxLine: 4, visible: visible, onVisibleChange: onVisibleChange, showTrigger: false, triggerType: "hover" }, children));
+        } },
+        "\u5173\u952E\u8BCD:xxx xxx xxx ",
+        React.createElement("br", null),
+        new Array(15).fill('这是一段创新提案摘要').join('，')),
+    React.createElement("h3", null, "Tab card"),
+    React.createElement(Card, { title: "\u63D0\u6848\u6982\u89C8", footer: React.createElement(Feedback, null), style: { width: 300 }, footerLine: true },
+        React.createElement(Tab, { contentStyle: { paddingTop: 8 } },
+            React.createElement(Tab.Item, { title: "Tab1" },
+                React.createElement("div", null,
+                    React.createElement(Button, null, "\u6309\u94AE"),
+                    React.createElement(Button, { type: "primary" }, "\u6309\u94AE"),
+                    "\u5173\u952E\u8BCD:xxx xxx xxx1 ",
+                    React.createElement("br", null),
+                    new Array(10).fill('这是一段创新提案摘要').join('，'))),
+            React.createElement(Tab.Item, { title: "Tab2" },
+                React.createElement("div", null,
+                    "\u5173\u952E\u8BCD:xxx xxx xxx2 ",
+                    React.createElement("br", null),
+                    new Array(10).fill('这是一段创新提案摘要').join('，'))),
+            React.createElement(Tab.Item, { title: "Tab3" },
+                React.createElement("div", null,
+                    "\u5173\u952E\u8BCD:xxx xxx xxx3 ",
+                    React.createElement("br", null),
+                    new Array(10).fill('这是一段创新提案摘要').join('，'))))),
+    React.createElement("h3", null, "Inner drawer float button"),
+    React.createElement(FloatButtonDemo, null)), mountNode);

package/es/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/es/card-loading/__docs__/demo/basic/index.js

@@ -0,0 +1,13 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks CardLoading 组件的基本用法。
+ * - Basic usage of `CardLoading`
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { CardLoading } from '@alifd/chat';
+import '@alifd/chat/es/card-loading/style';
+ReactDOM.render(React.createElement("div", { className: "card-loading-basic-demo" },
+    React.createElement(CardLoading, null)), mountNode);

package/es/checkbox-group/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @demo 基础用法
+ * @en Basic
+ * @order 1
+ */
+import '@alifd/chat/es/checkbox-group/style';

package/es/checkbox-group/__docs__/demo/basic/index.js

@@ -0,0 +1,26 @@
+/**
+ * @demo 基础用法
+ * @en Basic
+ * @order 1
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { CheckboxGroup } from '@alifd/chat';
+import '@alifd/chat/es/checkbox-group/style';
+const options1 = [
+    { label: '苹果', value: 'Apple', description: '很好吃的苹果' },
+    { label: '梨', value: 'Pear', description: '鲜嫩多汁' },
+    { label: '桔子', value: 'Orange', description: '同样很好吃的桔子' }
+];
+const options2 = [
+    { label: '因公', value: 'Company' },
+    { label: '因私', value: 'Personal' },
+];
+const onChange = (value) => {
+    console.log(value);
+};
+ReactDOM.render(React.createElement("div", null,
+    React.createElement("div", { style: { maxWidth: 400 } },
+        React.createElement(CheckboxGroup, { options: options1, value: ["Pear"], confirmButtonText: "\u63D0 \u4EA4", onChange: onChange })),
+    React.createElement("div", { style: { maxWidth: 400, marginTop: 40 } },
+        React.createElement(CheckboxGroup, { options: options2, onChange: onChange }))), mountNode);

package/es/date-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/date-picker/style';

package/es/date-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 { DatePicker } from '@alifd/chat';
+import '@alifd/chat/es/date-picker/style';
+ReactDOM.render(React.createElement("div", null,
+    React.createElement(DatePicker, null)), mountNode);

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

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

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

@@ -0,0 +1,30 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks Drawer 组件的基本用法。
+ * - Basic usage of `Drawer`
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Drawer, Button } from '@alifd/chat';
+import '@alifd/chat/es/drawer/style';
+import '@alifd/chat/es/button/style';
+ReactDOM.render(React.createElement("div", null,
+    React.createElement(Drawer, { v2: true, title: "\u6807\u9898", height: 500, visible: true, placement: 'bottom', hasMask: false, headerStyle: {
+            background: 'pink'
+        }, bodyStyle: {
+            background: 'blue'
+        }, footer: [React.createElement(Button, { key: "ok", size: 'large' }, "\u786E\u5B9A"), React.createElement(Button, { key: "cancel", size: 'large' }, "\u53D6\u6D88")] },
+        React.createElement("div", { style: {
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            } },
+            React.createElement("img", { src: 'https://img.alicdn.com/imgextra/i3/O1CN01Pr17oD1nEcFc2YQtz_!!6000000005058-0-tps-334-334.jpg', style: {
+                    width: '100%',
+                    height: 'auto',
+                    display: 'block',
+                } })))), mountNode);

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

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

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

@@ -0,0 +1,12 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks 反馈组件的基本用法。
+ * - Basic usage of `Feedback`
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Feedback } from '@alifd/chat';
+import '@alifd/chat/es/feedback/style';
+ReactDOM.render(React.createElement(Feedback, { defaultValue: 'good' }), mountNode);

package/es/feedback/__docs__/demo/size/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @demo 指定尺寸
+ * @en Size
+ * @order 2
+ * @remarks 控制组件尺寸大小。
+ * - Control the size of `Feedback`
+ */
+import '@alifd/chat/es/feedback/style';

package/es/feedback/__docs__/demo/size/index.js

@@ -0,0 +1,25 @@
+/**
+ * @demo 指定尺寸
+ * @en Size
+ * @order 2
+ * @remarks 控制组件尺寸大小。
+ * - Control the size of `Feedback`
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Feedback } from '@alifd/chat';
+import '@alifd/chat/es/feedback/style';
+ReactDOM.render(React.createElement("div", null,
+    React.createElement("div", null, "\u666E\u901A\u5927\u5C0F"),
+    React.createElement(Feedback, null),
+    React.createElement("div", null,
+        "\u901A\u8FC7 ",
+        React.createElement("b", null, "fontSize"),
+        " \u63A7\u5236\uFF0C\u95F4\u8DDD\u901A\u8FC7 css \u6837\u5F0F\u56FA\u5B9A"),
+    React.createElement(Feedback, { style: { fontSize: 20 } }),
+    React.createElement("br", null),
+    React.createElement("div", null,
+        "\u901A\u8FC7 ",
+        React.createElement("b", null, "size"),
+        " \u5C5E\u6027\u63A7\u5236\uFF0C\u95F4\u8DDD\u6839\u636E\u4F20\u5165\u7684 size \u81EA\u52A8\u8BA1\u7B97"),
+    React.createElement(Feedback, { size: 20 })), mountNode);

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

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

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

@@ -0,0 +1,23 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks flip 折叠组件的基本用法。
+ * - Basic usage of `flip`
+ */
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Flip } from '@alifd/chat';
+import '@alifd/chat/es/flip/style';
+const Demo = () => {
+    const [expanded, setExpanded] = useState(true);
+    return (React.createElement("div", { className: "origin-basic-demo" },
+        React.createElement("div", { style: {
+                width: '500px',
+            } },
+            React.createElement(Flip, { defaultExpanded: true, onToggle: onToggle => {
+                    console.log('onToggle：', onToggle);
+                }, animated: false })),
+        React.createElement("button", { onClick: () => setExpanded(!expanded) }, "Toggle")));
+};
+ReactDOM.render(React.createElement(Demo, null), mountNode);

package/es/float-button/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @demo 基本使用
+ * @en Basic usage
+ * @order 1
+ * @remarks remarks.- 111
+ */
+import '@alifd/chat/es/float-button/style';