feat(Attachments): use the multiply icon instead

Author: anlyyao

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 0;
-
   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;

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-loading/_example/chat-loading.wxml

@@ -8,7 +8,7 @@
   <t-demo title="01 组件类型" desc="支持多种加载中动效类型，包括 gradient、moving、dots">
     <base />
   </t-demo>
-  <t-demo desc="带文案描述的加载组件">
+  <t-demo desc="带文案描述的类型">
     <text />
   </t-demo>
 </view>

packages/pro-components/chat/chat-markdown/_example/chat-markdown.wxml

@@ -1,7 +1,7 @@
 <t-navbar class="demo-navbar" title="ChatMarkdown" leftArrow />
 <view class="demo">
   <t-demo-header title="ChatMarkdown" desc="对话 Markdown 渲染器" notice="渲染框架支持情况：WebView" />
-  <t-demo title="01 基础Markdown样式" desc="标题与文本">
+  <t-demo title="01 基础 Markdown 样式" desc="标题与文本">
     <base />
   </t-demo>
   <t-demo desc="列表">

packages/pro-components/chat/chat-message/_example/chat-message.wxml

@@ -17,7 +17,7 @@
   <t-demo title="02 组件状态" desc="加载状态">
     <status />
   </t-demo>
-  <t-demo desc="错误状态">
+  <t-demo desc="出错状态">
     <error />
   </t-demo>
   <t-demo title="03 组件样式" desc="气泡样式">

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

@@ -38,7 +38,7 @@
 .chat-sender-placeholder {
   font-size: 32rpx;
   font-weight: 600;
-  color: var(--td-text-color-placeholder);
+  color: var(--demo-chat-sender-placeholder);
   text-align: center;
   height: 48rpx;
 }

packages/pro-components/chat/chat-sender/_example/chat-sender.less

@@ -1,5 +1,11 @@
-page {
-  // background-color: var(--td-bg-color-container);
+.chat-sender-placeholder {
+  --demo-chat-sender-placeholder: rgba(0, 0, 0, .1);
+}
+
+@media (prefers-color-scheme: dark) {
+  .chat-sender-placeholder {
+    --demo-chat-sender-placeholder: #fff;
+  }
 }
 
 .t-button {
@@ -9,3 +15,4 @@ page {
 .t-button:last-child {
   margin-right: 0;
 }
+

packages/pro-components/chat/chat-sender/_example/content-citation/index.wxss

@@ -70,7 +70,8 @@
 }
 
 .header-content {
-  padding: 0 24rpx;
+  padding: 2rpx 24rpx;
+  box-sizing: border-box;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;