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

Author: zydemail

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

@@ -2,44 +2,44 @@ Page({
   data: {
     items: [
       {
-        fileType: 'pdf',
-        name: 'document.pdf',
-        url: 'https://example.com/document.pdf',
+        fileType: 'doc',
+        name: 'word-file.docxf',
+        url: 'https://example.com/word-file.docxf',
         size: 222859,
         status: 'success',
       },
       {
-        fileType: 'doc',
-        name: 'report.docx',
-        url: 'https://example.com/report.docx',
+        fileType: 'xls',
+        name: 'excel-file.xlsx',
+        url: 'https://example.com/excel-file.xlsx',
         size: 222859,
         status: 'success',
       },
       {
-        fileType: 'audio',
-        name: 'audio.mp3',
-        url: 'https://example.com/audio.mp3',
+        fileType: 'pdf',
+        name: 'pdf-file.pdf',
+        url: 'https://example.com/pdf-file.pdf',
         size: 222859,
         status: 'success',
       },
       {
         fileType: 'ppt',
-        name: 'presentation.ppt',
-        url: 'https://example.com/presentation.ppt',
+        name: 'ppt-file.pptx',
+        url: 'https://example.com/ppt-file.pptx',
         size: 222859,
         status: 'success',
       },
       {
-        fileType: 'xls',
-        name: 'spreadsheet.xls',
-        url: 'https://example.com/spreadsheet.xls',
+        fileType: 'video',
+        name: 'video-file.mp4',
+        url: 'https://example.com/video-file.mp4',
         size: 222859,
         status: 'success',
       },
       {
-        fileType: 'video',
-        name: 'video.mp4',
-        url: 'https://example.com/video.mp4',
+        fileType: 'audio',
+        name: 'audio-file.mp3',
+        url: 'https://example.com/audio-file.mp3',
         size: 222859,
         status: 'success',
       },

packages/pro-components/chat/attachments/_example/file/index.wxml

@@ -5,12 +5,6 @@
   </view> -->
 
   <view class="chat-example-block" wx:for="{{items}}" wx:for-item="item" wx:key="url">
-    <t-attachments
-      style="display: inline"
-      items="{{[item]}}"
-      bind:fileClick="onFileClick"
-      bind:remove="onRemove"
-      bind:add="onAdd"
-    />
+    <t-attachments items="{{[item]}}" bind:fileClick="onFileClick" bind:remove="onRemove" bind:add="onAdd" />
   </view>
 </view>

packages/pro-components/chat/attachments/_example/file/index.wxss

@@ -1,9 +1,11 @@
 .chat-example {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 32rpx;
-
   padding: 32rpx;
   box-sizing: border-box;
   background-color: var(--td-bg-color-container);
 }
+
+.chat-example-block {
+  display: inline-flex;
+  width: 336rpx;
+  margin-bottom: 26rpx;
+}

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

@@ -98,7 +98,9 @@
 
     // 删除按钮样式
     .@{attachments}__remove {
-      color: @text-color-primary;
+      background-color: @text-color-primary;
+      color: @bg-color-container;
+      border-radius: @radius-circle;
       position: absolute;
       right: -4px;
       top: -4px;
@@ -174,6 +176,7 @@
           font-style: normal;
           font-weight: 400;
           line-height: @attachments-desc-line-height;
+          margin-top: -4rpx;
         }
       }
     }

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

@@ -25,15 +25,9 @@
                   style="{{inChat ? _this.imageStyle(item) : ''}}"
                 ></image>
               </block>
-              <block wx:if="{{removable}}">
-                <t-icon
-                  catchtap="onRemoveTap"
-                  data-index="{{index}}"
-                  class="{{classPrefix}}__remove"
-                  name="close-circle-filled"
-                  size="16px"
-                />
-              </block>
+              <view wx:if="{{removable}}" class="{{classPrefix}}__remove">
+                <t-icon data-index="{{index}}" name="multiply" size="16px" catchtap="onRemoveTap" />
+              </view>
             </view>
           </block>
           <block wx:else>
@@ -69,15 +63,9 @@
                   <view wx:else class="{{classPrefix}}__desc">{{item.desc}}</view>
                 </block>
               </view>
-              <block wx:if="{{removable}}">
-                <t-icon
-                  catchtap="onRemoveTap"
-                  data-index="{{index}}"
-                  class="{{classPrefix}}__remove"
-                  name="close-circle-filled"
-                  size="16px"
-                />
-              </block>
+              <view wx:if="{{removable}}" class="{{classPrefix}}__remove">
+                <t-icon data-index="{{index}}" name="multiply" size="16px" catchtap="onRemoveTap" />
+              </view>
             </view>
           </block>
         </view>

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

@@ -70,7 +70,8 @@
   // 操作项
   &__item {
     color: @chat-actionbar-item-color;
-    padding: @chat-actionbar-item-padding;
+    margin: 8rpx 0;
+    padding: 8rpx 28rpx;
     border-right: 2rpx solid @component-stroke;
     background-color: unset;
     outline: none;

packages/pro-components/chat/chat-list/_example/agent/index.wxss

@@ -7,16 +7,15 @@
   padding: 0 0 0 32rpx;
   box-sizing: border-box;
 }
-
 .t-chat-message {
-  padding-right: 32rpx;
+  padding: 0 32rpx;
 }
 
 .preview {
   padding: 16rpx;
   display: flex;
   justify-content: space-between;
-  border: 1px solid black;
+  border: 1px solid var(--td-component-border);
 }
 
 .step {
@@ -36,17 +35,17 @@
 .step-text.command {
   padding: 16rpx;
   border-radius: 16rpx;
-  background-color: #f3f3f3;
+  background-color: var(--td-bg-color-secondarycontainer);
   display: flex;
   font-size: 28rpx;
   line-height: 44rpx;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-secondary);
 }
 
 .step-text.result {
   font-size: 28rpx;
   line-height: 44rpx;
-  color: rgba(0, 0, 0, 0.9);
+  color: var(--td-text-color-primary);
 }
 
 .step-icon {
@@ -56,8 +55,8 @@
 
 .t-steps-item__circle--finish {
   background-color: transparent;
-  color: #000000e5;
-  border: 1px solid #000000e5;
+  color: var(--td-text-color-primary);
+  border: 1px solid var(--td-text-color-primary);
   width: 16px;
   height: 16px;
 }
@@ -67,10 +66,10 @@
 }
 
 .t-steps-item__line--finish {
-  background-color: #dcdcdc;
+  background-color: var(--td-component-border);
 }
 
 .t-steps-item__title--finish {
-  color: #000000e5;
+  color: var(--td-text-color-primary);
   font-weight: 600;
 }

packages/pro-components/chat/chat-list/_example/base/index.wxss

@@ -9,5 +9,5 @@
 }
 
 .t-chat-message {
-  padding-right: 32rpx;
+  padding: 0 32rpx;
 }

packages/pro-components/chat/chat-list/_example/code/index.wxss

@@ -9,7 +9,7 @@
 }
 
 .t-chat-message {
-  padding-right: 32rpx;
+  padding: 0 32rpx;
 }
 
 .preview {

packages/pro-components/chat/chat-list/_example/custom/index.wxss

@@ -9,7 +9,7 @@
 }
 
 .t-chat-message {
-  padding-right: 32rpx;
+  padding: 0 32rpx;
 }
 
 .chart-chat .assistant .t-chat__detail {