Merge branch 'feature/chat' of https://github.com/Tencent/tdesign-miniprogram into feature/chat

Author: zydemail

packages/pro-components/chat/attachments/attachments.less

@@ -91,11 +91,15 @@
   // 文件项样式
   &__file {
     border-radius: @radius-extraLarge;
-    margin-top: @attachments-file-margin-tiny;
     display: block;
     position: relative;
     background-color: @attachments-background-color;
 
+    // 仅当有删除按钮时，增加上边距
+    &--removable {
+      margin-top: @attachments-file-margin-tiny;
+    }
+
     // 删除按钮样式
     .@{attachments}__remove {
       background-color: @text-color-primary;
@@ -185,13 +189,10 @@
 
 // 对话中附件样式覆盖
 .@{attachments}--chatting {
-  .@{attachments}__file {
-    margin-top: 0;
-    margin-bottom: @attachments-file-margin;
-  }
 
   &.all_images {
     width: 100%;
+
     .file-image.@{attachments}__file {
       background-color: transparent !important;
     }
@@ -209,6 +210,11 @@
 
   &.all_files {
     width: auto;
+
+    .@{attachments}__files:not(:last-child) {
+      margin-bottom: @attachments-file-margin;
+    }
+
     .file-image.@{attachments}__file {
       background-color: transparent !important;
     }

packages/pro-components/chat/attachments/attachments.wxml

@@ -10,7 +10,7 @@
       <block wx:for="{{files}}" wx:for-item="item" wx:for-index="index" wx:key="index">
         <view class="{{classPrefix}}__files" bindtap="onFileWrapTap" data-index="{{index}}">
           <block wx:if="{{item.fileType==='image'}}">
-            <view class="file-image {{classPrefix}}__file">
+            <view class="file-image {{classPrefix}}__file {{removable ? classPrefix + '__file--removable' : ''}}">
               <block wx:if="{{item.status==='pending' || item.status==='fail' || item.status==='error'}}">
                 <view class="{{item.status}} {{classPrefix}}__file--{{item.status}}">
                   <t-loading theme="circular" size="48rpx" />
@@ -20,7 +20,7 @@
                 <image
                   class="image"
                   src="{{item.url}}"
-                  mode="{{ _this.getImageMode(item)}}"
+                  mode="{{_this.getImageMode(item)}}"
                   lazy-load="false"
                   style="{{inChat ? _this.imageStyle(item) : ''}}"
                 ></image>
@@ -31,7 +31,7 @@
             </view>
           </block>
           <block wx:else>
-            <view class="file {{classPrefix}}__file">
+            <view class="file {{classPrefix}}__file {{removable ? classPrefix + '__file--removable' : ''}}">
               <view class="image">
                 <block wx:if="{{item.status==='pending'}}">
                   <view class="loading {{classPrefix}}__file--pending">

packages/pro-components/chat/chat-list/_example/image/index.js

@@ -177,7 +177,7 @@ Component({
           data: [
             {
               name: 'sample1.png',
-              url: 'https://tdesign.gtimg.com/site/avatar.jpg',
+              url: 'https://tdesign.gtimg.com/site/square.png',
               fileType: 'image',
               status: 'success',
               size: 1032,
@@ -186,7 +186,7 @@ Component({
             },
             {
               name: 'sample2.png',
-              url: 'https://tdesign.gtimg.com/site/avatar.jpg',
+              url: 'https://tdesign.gtimg.com/site/square.png',
               fileType: 'image',
               status: 'success',
               size: 1032,
@@ -195,7 +195,7 @@ Component({
             },
             {
               name: 'sample3.png',
-              url: 'https://tdesign.gtimg.com/site/avatar.jpg',
+              url: 'https://tdesign.gtimg.com/site/square.png',
               fileType: 'image',
               status: 'success',
               size: 1032,
@@ -204,7 +204,7 @@ Component({
             },
             {
               name: 'sample4.png',
-              url: 'https://tdesign.gtimg.com/site/avatar.jpg',
+              url: 'https://tdesign.gtimg.com/site/square.png',
               fileType: 'image',
               status: 'success',
               size: 1032,
@@ -213,7 +213,7 @@ Component({
             },
             {
               name: 'sample5.png',
-              url: 'https://tdesign.gtimg.com/site/avatar.jpg',
+              url: 'https://tdesign.gtimg.com/site/square.png',
               fileType: 'image',
               status: 'success',
               size: 1032,

packages/pro-components/chat/chat-loading/chat-loading.less

@@ -49,19 +49,19 @@
     }
 
     &--top {
-      top: -8rpx;
+      top: -6rpx;
       left: 7rpx;
       animation: dot-moving-top @chat-loading-animation-duration ease-in-out alternate infinite;
     }
 
     &--left {
-      bottom: -8rpx;
+      bottom: -6rpx;
       left: -6rpx;
       animation: dot-moving-left @chat-loading-animation-duration ease-in-out alternate infinite;
     }
 
     &--right {
-      bottom: -8rpx;
+      bottom: -6rpx;
       right: -6rpx;
       animation: dot-moving-right @chat-loading-animation-duration ease-in-out alternate infinite;
     }
@@ -94,37 +94,37 @@
 @keyframes dot-moving-top {
   0% {
     transform: scale(1);
-    top: -7rpx;
+    top: -6rpx;
   }
   to {
-    transform: scale(1.75);
-    top: 6rpx;
+    transform: scale(2);
+    top: 7rpx;
   }
 }
 
 @keyframes dot-moving-left {
   0% {
     transform: scale(1);
-    bottom: -7rpx;
-    left: -7rpx;
+    bottom: -6rpx;
+    left: -6rpx;
   }
   to {
-    transform: scale(1.75);
-    bottom: 6rpx;
-    left: 6rpx;
+    transform: scale(2);
+    bottom: 7rpx;
+    left: 7rpx;
   }
 }
 
 @keyframes dot-moving-right {
   0% {
     transform: scale(1);
-    bottom: -7rpx;
-    right: -7rpx;
+    bottom: -6rpx;
+    right: -6rpx;
   }
   to {
-    transform: scale(1.75);
-    bottom: 6rpx;
-    right: 6rpx;
+    transform: scale(2);
+    bottom: 7rpx;
+    right: 7rpx;
   }
 }
 

packages/pro-components/chat/chat-message/_example/configure/index.js

@@ -1,7 +1,7 @@
 Component({
   data: {
     message: {
-      role: 'user',
+      role: 'system',
       content: [
         {
           type: 'text',

packages/pro-components/chat/chat-message/chat-message.less

@@ -62,6 +62,10 @@
     .@{chat-message}__base {
       padding-right: @spacer-2;
     }
+
+    .@{chat-content} {
+      max-width: 90%;
+    }
   }
 
   // 助手消息样式

packages/pro-components/chat/chat-sender/_example/attachments/index.js

@@ -9,7 +9,7 @@ Page({
       {
         fileType: 'image',
         name: '图片1.png',
-        url: 'https://tdesign.gtimg.com/site/avatar.jpg',
+        url: 'https://tdesign.gtimg.com/site/square.png',
       },
       {
         fileType: 'pdf',
@@ -32,7 +32,7 @@ Page({
         {
           fileType: 'image',
           name: '图片1.png',
-          url: 'https://tdesign.gtimg.com/site/avatar.jpg',
+          url: 'https://tdesign.gtimg.com/site/square.png',
         },
         {
           fileType: 'pdf',