feat: sync 2.6.1

alibaba · Jul 5, 2023 · d25234b · d25234b
1 parent 1a58b0b
commit d25234b
Show file tree

Hide file tree

Showing 99 changed files with 895 additions and 521 deletions.
diff --git a/README.md b/README.md
@@ -101,9 +101,9 @@ const App = () => {
 ### Development
 
 ```bash
-cd storybook
+cd demo
 npm i
-npm run storybook
+npm run dev
 ```
 
 ## Theme

diff --git a/demo/.gitignore b/demo/.gitignore
@@ -1,5 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-.DS_Store
 dist
 dist-ssr
 *.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/demo/index.html b/demo/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
     <title>ChatUI DEMO</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-    <script src="//dev.g.alicdn.com/chatui/icons/2.0.1/index.js" async=""></script>
+    <script src="//g.alicdn.com/chatui/icons/2.0.2/index.js" async></script>
   </body>
 </html>
diff --git a/demo/package.json b/demo/package.json
@@ -2,21 +2,21 @@
   "name": "demo",
   "version": "0.1.0",
   "scripts": {
-    "dev": "vite --host",
+    "dev": "vite",
     "build": "tsc && vite build",
-    "serve": "vite preview"
+    "preview": "vite preview"
   },
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.4.1"
   },
   "devDependencies": {
-    "@types/react": "^17.0.45",
+    "@types/react": "^17.0.50",
     "@types/react-dom": "^17.0.17",
     "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react-refresh": "^1.3.6",
-    "typescript": "^4.7.3",
-    "vite": "^2.9.12"
+    "@vitejs/plugin-react": "^2.1.0",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.3"
   }
 }
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
diff --git a/demo/src/components/LangSwitcher.tsx b/demo/src/components/LangSwitcher.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import locales from '../../../src/components/LocaleProvider/locales';
+import locales from '../../../src/components/ConfigProvider/locales';
 
 interface LangSwitcherProps {
   value: string;

diff --git a/demo/src/demo/Card.tsx b/demo/src/demo/Card.tsx
@@ -90,6 +90,11 @@ export default () => (
           <CardText>fluid</CardText>
         </Card>
       </div>
+      <div className="demo-row">
+        <Card fluid="order">
+          <CardText>fluid=order</CardText>
+        </Card>
+      </div>
     </DemoSection>
     <DemoSection title="按钮竖排">
       <Card size="xl">

diff --git a/demo/src/demo/Chat.tsx b/demo/src/demo/Chat.tsx
@@ -1,20 +1,24 @@
 import React from 'react';
-import { DemoPage, DemoSection } from '../components';
+import { useNavigate } from 'react-router-dom';
 import Chat, {
   Bubble,
   MessageProps,
   useMessages,
   QuickReplyItemProps,
   useQuickReplies,
   Card,
+  CardMedia,
   CardTitle,
   CardText,
+  CardActions,
+  Button,
   List,
   ListItem,
   Flex,
   FlexItem,
   ScrollView,
   ToolbarItemProps,
+  RateActions,
 } from '../../../src';
 import OrderSelector from './OrdderSelector';
 
@@ -28,10 +32,24 @@ const initialMessages: MessageWithoutId[] = [
   {
     type: 'text',
     content: { text: 'Hi，我是你的专属智能助理小蜜，有问题请随时找我哦~' },
-    user: { avatar: '//gw.alicdn.com/tfs/TB1DYHLwMHqK1RjSZFEXXcGMXXa-56-62.svg', name: '小小蜜' },
+    user: {
+      avatar: '//gw.alicdn.com/imgextra/i3/O1CN015amSBN287NjjndS06_!!6000000007885-2-tps-99-98.png',
+      name: '小小蜜',
+    },
     createdAt: Date.now(),
     hasTime: true,
   },
+  {
+    type: 'text',
+    content: { text: '你好～' },
+    user: {
+      avatar: '//gw.alicdn.com/tfs/TB1g6n4xQP2gK0jSZPxXXacQpXa-234-216.png',
+      name: '小淘',
+    },
+    createdAt: Date.now(),
+    hasTime: true,
+    position: 'right',
+  },
   {
     type: 'guess-you',
   },
@@ -42,7 +60,7 @@ const initialMessages: MessageWithoutId[] = [
     type: 'text',
     content: { text: '小蜜我要查看我的物流信息' },
     position: 'right',
-    user: { avatar: '//gw.alicdn.com/tfs/TB1DYHLwMHqK1RjSZFEXXcGMXXa-56-62.svg' },
+    user: { avatar: '//gw.alicdn.com/tfs/TB1g6n4xQP2gK0jSZPxXXacQpXa-234-216.png' },
   },
   {
     type: 'image',
@@ -56,6 +74,10 @@ const initialMessages: MessageWithoutId[] = [
       text: '由于您长时间未说话或退出小蜜（离开页面、锁屏等）已自动结束本次服务',
     },
   },
+  {
+    type: 'image-text-button',
+    content: {},
+  },
 ];
 
 const defaultQuickReplies = [
@@ -105,7 +127,8 @@ const skillList = [
   { title: '修改地址', desc: '修改地址' },
 ];
 
-const toolbar = [
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+const toolbar: ToolbarItemProps[] = [
   {
     type: 'smile',
     icon: 'smile',
@@ -129,7 +152,7 @@ const toolbar = [
   {
     type: 'photo',
     title: 'Photo',
-    img: 'https://gw.alicdn.com/tfs/TB1eDjNj.T1gK0jSZFrXXcNCXXa-80-80.png',
+    img: '//gw.alicdn.com/tfs/TB1eDjNj.T1gK0jSZFrXXcNCXXa-80-80.png',
   },
 ];
 
@@ -139,6 +162,8 @@ export default () => {
   const { quickReplies, replace } = useQuickReplies(defaultQuickReplies);
   const msgRef = React.useRef(null);
 
+  const navigate = useNavigate();
+
   window.appendMsg = appendMsg;
   window.msgRef = msgRef;
 
@@ -154,15 +179,15 @@ export default () => {
 
       setTimeout(() => {
         setTyping(true);
-      }, 10);
+      }, 1000);
 
       // 模拟回复消息
       setTimeout(() => {
         appendMsg({
           type: 'text',
           content: { text: '亲，您遇到什么问题啦？请简要描述您的问题~' },
         });
-      }, 1000);
+      }, 1500);
     }
   }
 
@@ -186,6 +211,7 @@ export default () => {
       appendMsg({
         type: 'order-selector',
         content: {},
+        position: 'pop',
       });
     }
   }
@@ -300,47 +326,67 @@ export default () => {
             <img src={content.picUrl} alt="" />
           </Bubble>
         );
+      case 'image-text-button':
+        return (
+          <Flex>
+            <Card fluid>
+              <CardMedia image="//gw.alicdn.com/tfs/TB1Xv5_vlr0gK0jSZFnXXbRRXXa-427-240.png" />
+              <CardTitle>Card title</CardTitle>
+              <CardText>
+                如您希望卖家尽快给您发货，可以进入【我的订单】找到该笔交易，点击【提醒发货】或点击【联系卖家】与卖家进行旺旺沟通尽快发货给您哦，若卖家明确表示无法发货，建议您申请退款重新选购更高品质的商品哦商品。申请退款重新选购更高品质的商品哦商品。
+              </CardText>
+              <CardActions>
+                <Button>次要按钮</Button>
+                <Button color="primary">主要按钮</Button>
+              </CardActions>
+            </Card>
+            <RateActions onClick={console.log} />
+          </Flex>
+        );
       default:
         return null;
     }
   }
 
   return (
-    <DemoPage>
-      <div style={{ height: 'calc(100vh - 48px)', marginTop: '-12px' }}>
-        <Chat
-          onRefresh={handleRefresh}
-          navbar={{
-            leftContent: {
-              icon: 'chevron-left',
-              title: 'Back',
-            },
-            rightContent: [
-              {
-                icon: 'apps',
-                title: 'Applications',
-              },
-              {
-                icon: 'ellipsis-h',
-                title: 'More',
-              },
-            ],
-            title: '智能助理',
-          }}
-          rightAction={{ icon: 'compass' }}
-          toolbar={toolbar}
-          messagesRef={msgRef}
-          onToolbarClick={handleToolbarClick}
-          recorder={{ canRecord: true }}
-          wideBreakpoint="600px"
-          messages={messages}
-          renderMessageContent={renderMessageContent}
-          quickReplies={quickReplies}
-          onQuickReplyClick={handleQuickReplyClick}
-          onSend={handleSend}
-          onImageSend={() => Promise.resolve()}
-        />
-      </div>
-    </DemoPage>
+    <Chat
+      elderMode
+      onRefresh={handleRefresh}
+      navbar={{
+        leftContent: {
+          icon: 'chevron-left',
+          title: 'Back',
+          onClick() {
+            navigate('/');
+          },
+        },
+        rightContent: [
+          {
+            icon: 'apps',
+            title: 'Applications',
+          },
+          {
+            icon: 'ellipsis-h',
+            title: 'More',
+          },
+        ],
+        title: '智能助理',
+        // desc: '客服热线9510211(7:00-次日1:00)',
+        // logo: 'https://gw.alicdn.com/imgextra/i4/O1CN016i66TT24lRwUecIk5_!!6000000007431-2-tps-164-164.png_80x80.jpg',
+        // align: 'left',
+      }}
+      rightAction={{ icon: 'compass' }}
+      toolbar={toolbar}
+      messagesRef={msgRef}
+      onToolbarClick={handleToolbarClick}
+      recorder={{ canRecord: true }}
+      wideBreakpoint="600px"
+      messages={messages}
+      renderMessageContent={renderMessageContent}
+      quickReplies={quickReplies}
+      onQuickReplyClick={handleQuickReplyClick}
+      onSend={handleSend}
+      onImageSend={() => Promise.resolve()}
+    />
   );
 };