fix(ChatLoading): fix text spacing error

anlyyao · anlyyao · commit a9b4b1521236 · 2025-11-05T17:50:11.000+08:00
diff --git a/packages/pro-components/chat/attachments/_example/file/index.js b/packages/pro-components/chat/attachments/_example/file/index.js
@@ -3,13 +3,13 @@ Page({
     items: [
       {
         fileType: 'doc',
-        name: 'word-file.docxf',
-        url: 'https://example.com/word-file.docxf',
+        name: 'word-file.doc',
+        url: 'https://example.com/word-file.doc',
         size: 222859,
         status: 'success',
       },
       {
-        fileType: 'xls',
+        fileType: 'excel',
         name: 'excel-file.xlsx',
         url: 'https://example.com/excel-file.xlsx',
         size: 222859,
@@ -37,8 +37,8 @@ Page({
         status: 'success',
       },
       {
-        fileType: 'audio',
-        name: 'audio-file.mp3',
+        fileType: 'file',
+        name: 'file',
         url: 'https://example.com/audio-file.mp3',
         size: 222859,
         status: 'success',
diff --git a/packages/pro-components/chat/chat-actionbar/chat-actionbar.less b/packages/pro-components/chat/chat-actionbar/chat-actionbar.less
@@ -70,8 +70,8 @@
   // 操作项
   &__item {
     color: @chat-actionbar-item-color;
-    margin: 8rpx 0;
-    padding: 8rpx 28rpx;
+    margin: 12rpx 0;
+    padding: 4rpx 28rpx;
     border-right: 2rpx solid @component-stroke;
     background-color: unset;
     outline: none;
diff --git a/packages/pro-components/chat/chat-list/_example/agent/index.wxml b/packages/pro-components/chat/chat-list/_example/agent/index.wxml
@@ -27,7 +27,7 @@
                       wx:for="{{item.tasks}}"
                       wx:key="index"
                       wx:for-item="taskItem"
-                      class="{{['step-text', taskItem.type]}}"
+                      class="step-text {{taskItem.type}}"
                     >
                       <t-icon
                         wx:if="{{taskItem.type === 'command'}}"
diff --git a/packages/pro-components/chat/chat-list/_example/agent/index.wxss b/packages/pro-components/chat/chat-list/_example/agent/index.wxss
@@ -50,7 +50,7 @@
 
 .step-icon {
   margin-right: 12rpx;
-  margin-top: 4rpx;
+  margin-top: 6rpx;
 }
 
 .t-steps-item__circle--finish {
diff --git a/packages/pro-components/chat/chat-list/_example/hook-component/index.js b/packages/pro-components/chat/chat-list/_example/hook-component/index.js
@@ -19,7 +19,7 @@ const mockData = {
 };
 
 const mockData1 =
-  '嗯，用户问的是南极的自动提款机叫什么名字。这个问题有点有趣，因为南极是一个极端寒冷的地方，而且大部分地区都是无人居住的科研站。首先，我需要确认南极是否有自动提款机存在。\n\n首先，南极大陆没有常住居民，只有各国的科研人员季节性驻扎。主要的设施是各国的科学考察站，比如美国的麦克默多站、中国的长城站等。这些站点通常有基本的生活设施，但像银行这样的商业服务可能非常有限。\n\n接下来，我需要查找是否有关于南极自动提款机的信息。记得之前可能听说过某个银行在南极设立过ATM机作为宣传噱头，但不确定具体细节。比如，可能是一些国际银行为了品牌宣传或者方便科研人员而设置的。\n\n然后，我想到可能是在麦克默多站，那里是南极最大的科研社区之一，由美国运作。那里可能有较多的基础设施，包括可能的ATM机。如果有的话，可能是由某个美国银行设置的，比如富兰克林国家银行，或者是新西兰的银行，因为麦克默多站靠近新西兰的管辖区域。\n\n另外，需要考虑时间因素。ATM机的安装可能是在某个特定时期，比如早期的探险活动或者近年的项目。需要确认这些ATM是否仍然存在，或者是否已经被移除。\n\n还需要考虑是否有相关的新闻报道或官方信息。例如，是否有银行发布过在南极设立ATM的消息，或者科研站的官方网站提到过ATM的存在。\n\n可能还需要区分南极洲本身是否有独立的金融机构，但考虑到南极条约体系规定南极用于和平与科研，商业活动有限，因此可能没有常设的银行机构。ATM机可能是某个国家为了本国科考人员方便而设立的，比如美国的科考站使用美国的ATM机，由某个美国银行运营。\n\n然后，可能涉及到具体名称的问题。如果确实存在，可能ATM机属于某个特定的银行，比如富兰克林国家银行，但需要查证。或者，可能有一个特定的昵称，比如“南极ATM”之类的，但更可能是以所属银行命名。\n\n最后，可能需要综合这些信息，给出一个准确的答案，并指出可能的背景，比如安装时间、所属银行以及现状如何。\n';
+  '嗯，用户问的是南极的自动提款机叫什么名字。这个问题有点有趣，因为南极是一个极端寒冷的地方，而且大部分地区都是无人居住的科研站。\n';
 
 const mockData2 =
   '\n\n南极的自动提款机并没有一个特定的专属名称，但历史上确实有一台ATM机曾短暂存在于南极的**麦克默多站**（McMurdo Station）。这台ATM由美国**富兰克林国家银行**（Wells Fargo）于1998年安装，主要供驻扎在该站的科研人员使用。不过，由于南极的极端环境和极低的人口密度，这台ATM机并未长期运行，最终被移除。\n\n**背景补充：**\n- **麦克默多站**是美国在南极最大的科研基地，夏季人口可达约1,000人，冬季约200人。\n- 该ATM机更多是作为一种象征性服务存在，实际使用频率极低，因为南极科考人员通常依靠预支资金或电子支付。\n- 目前南极已无长期运行的ATM机，现代科考站更多依赖非现金交易方式。\n\n南极作为非主权领土，其基础设施以科研和生活支持为主，商业金融服务非常有限。若有类似设施，通常是临时或实验性质的。';
diff --git a/packages/pro-components/chat/chat-loading/_example/base/index.wxss b/packages/pro-components/chat/chat-loading/_example/base/index.wxss
@@ -2,5 +2,6 @@
   background-color: var(--td-bg-color-container);
   padding: 32rpx;
   display: flex;
+  align-items: center;
   gap: 48rpx;
 }
diff --git a/packages/pro-components/chat/chat-loading/chat-loading.less b/packages/pro-components/chat/chat-loading/chat-loading.less
@@ -14,11 +14,6 @@
   }
 
   &__icon {
-    width: 28rpx;
-    height: 28rpx;
-    padding: 6rpx;
-    margin-right: 8rpx;
-
     .@{chat-loading}__skeleton{
       width: 100%
     }
@@ -41,7 +36,9 @@
     margin: 0 6rpx 0 0;
     scale: 0.8;
 
-    view {
+    &--top,
+    &--left,
+    &--right {
       position: absolute;
       width: 16rpx;
       height: 16rpx;
diff --git a/packages/pro-components/chat/chat-loading/chat-loading.wxml b/packages/pro-components/chat/chat-loading/chat-loading.wxml
@@ -3,7 +3,7 @@
 <view class="class {{[classPrefix]}}" style="{{_._style([style, customStyle])}}">
   <!-- 动态加载动画 -->
   <view wx:if="{{animation !== 'skeleton'}}" class="{{classPrefix}}__icon">
-    <block wx:if="{{animation==='moving'}}">
+    <block wx:if="{{animation === 'moving'}}">
       <view class="{{classPrefix}}__moving">
         <view class="{{classPrefix}}__moving--top" />
         <view class="{{classPrefix}}__moving--left" />
@@ -25,5 +25,5 @@
     </view>
   </block>
   <!-- 文本内容 -->
-  <view class="{{classPrefix}}__text">{{text}}</view>
+  <view wx:if="{{text}}" class="{{classPrefix}}__text">{{text}}</view>
 </view>
diff --git a/packages/pro-components/chat/chat-markdown/chat-markdown.less b/packages/pro-components/chat/chat-markdown/chat-markdown.less
@@ -114,8 +114,8 @@
   // 列表样式
   &-list {
     display: block;
-    padding-left: @spacer-1;
-    margin: @spacer-1 0;
+    padding: 0;
+    margin: 0 0 @spacer 1.5em;;
 
     // 有序列表
     &__decimal {
diff --git a/packages/pro-components/chat/chat-message/_example/content/index.js b/packages/pro-components/chat/chat-message/_example/content/index.js
@@ -98,47 +98,45 @@ Component({
           type: 'attachment',
           data: [
             {
-              fileType: 'image',
-              name: 'sample-image.jpg',
-              url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
-              size: 1024,
+              fileType: 'doc',
+              name: 'word-file.doc',
+              url: 'https://example.com/word-file.doc',
+              size: 222859,
+              status: 'success',
+            },
+            {
+              fileType: 'excel',
+              name: 'excel-file.xlsx',
+              url: 'https://example.com/excel-file.xlsx',
+              size: 222859,
+              status: 'success',
+            },
+            {
+              fileType: 'pdf',
+              name: 'pdf-file.pdf',
+              url: 'https://example.com/pdf-file.pdf',
+              size: 222859,
+              status: 'success',
+            },
+            {
+              fileType: 'ppt',
+              name: 'ppt-file.pptx',
+              url: 'https://example.com/ppt-file.pptx',
+              size: 222859,
+              status: 'success',
+            },
+            {
+              fileType: 'video',
+              name: 'video-file.mp4',
+              url: 'https://example.com/video-file.mp4',
+              size: 222859,
               status: 'success',
-              width: 1920, // 图片实际宽度
-              height: 1080, // 图片实际高度
             },
-            // {
-            //   fileType: 'pdf',
-            //   name: 'document.pdf',
-            //   url: 'https://example.com/document.pdf',
-            //   size: 3072,
-            //   status: 'success',
-            // },
-            // {
-            //   fileType: 'doc',
-            //   name: 'report.docx',
-            //   url: 'https://example.com/report.docx',
-            //   size: 1536,
-            //   status: 'success',
-            // },
-            // {
-            //   fileType: 'audio',
-            //   name: 'audio.mp3',
-            //   url: 'https://example.com/audio.mp3',
-            //   size: 512,
-            //   status: 'success',
-            // },
-            // {
-            //   fileType: 'ppt',
-            //   name: 'presentation.ppt',
-            //   url: 'https://example.com/presentation.ppt',
-            //   size: 512,
-            //   status: 'success',
-            // },
             {
-              fileType: 'xls',
-              name: 'spreadsheet.xls',
-              url: 'https://example.com/spreadsheet.xls',
-              size: 512,
+              fileType: 'file',
+              name: 'file',
+              url: 'https://example.com/audio-file.mp3',
+              size: 222859,
               status: 'success',
             },
           ],
diff --git a/packages/pro-components/chat/chat-message/_example/content/index.wxml b/packages/pro-components/chat/chat-message/_example/content/index.wxml
@@ -1,6 +1,6 @@
 <view class="chat-example">
   <!-- 附件消息 -->
-  <!-- <view class="chat-example-block">
+  <view class="chat-example-block">
     <t-chat-message
       content="{{pic1.content}}"
       role="{{pic1.role}}"
@@ -28,7 +28,7 @@
       role="{{fileMessage.role}}"
       chatContentProps="{{chatContentProps}}"
     ></t-chat-message>
-  </view> -->
+  </view>
   <view class="chat-example-block">
     <t-chat-message
       content="{{fileMessage.content}}"
diff --git a/packages/pro-components/chat/chat-message/_example/error/index.js b/packages/pro-components/chat/chat-message/_example/error/index.js
@@ -6,7 +6,7 @@ Component({
       content: [
         {
           type: 'text',
-          data: '！！！请求出错',
+          data: '´• •`!!!请求出错',
         },
       ],
     },
diff --git a/packages/pro-components/chat/chat-message/chat-message.less b/packages/pro-components/chat/chat-message/chat-message.less
@@ -3,6 +3,7 @@
 @chat-list: ~'@{prefix}-chat-list';
 @chat-content: ~'@{prefix}-chat-content';
 @chat-message: ~'@{prefix}-chat-message';
+@chat-thinking: ~'@{prefix}-chat-thinking';
 @attachments: ~'@{prefix}-attachments';
 
 @chat-message-content-padding: 24rpx 32rpx;
@@ -16,6 +17,11 @@
   }
 }
 
+.@{attachments} + .@{chat-content}:not(:empty),
+.@{chat-thinking} + .@{chat-content}:not(:empty){
+  margin-top: 24rpx;
+}
+
 .@{chat-message} {
   display: flex;
   margin-bottom: @spacer-2;
@@ -231,9 +237,7 @@
     }
   }
 
-  // Actionbar 插槽样式
   &__actionbar {
-    // margin-top: @spacer-1;
     --chat-actionbar-padding: @spacer-1 0 0 0;
 
     &:empty {
diff --git a/packages/pro-components/chat/chat-sender/_example/chat-sender.less b/packages/pro-components/chat/chat-sender/_example/chat-sender.less
@@ -4,7 +4,7 @@
 
 @media (prefers-color-scheme: dark) {
   .chat-sender-placeholder {
-    --demo-chat-sender-placeholder: #fff;
+    --demo-chat-sender-placeholder: rgba(255, 255, 255, .1);
   }
 }
 
diff --git a/packages/pro-components/chat/chat-sender/_example/content-citation/index.wxml b/packages/pro-components/chat/chat-sender/_example/content-citation/index.wxml
@@ -35,7 +35,7 @@
             <t-icon name="enter" size="40rpx" style="transform: scaleX(-1)" />
           </view>
           <view class="header-content"> {{headerText}} </view>
-          <view style="padding: 4rpx; height: 40rpx; margin-left: auto; color: var(--td-text-color-secondary)">
+          <view style="padding: 4rpx; height: 40rpx; margin-left: auto; color: var(--td-text-color-placeholder)">
             <t-icon name="close" size="40rpx" bind:tap="handleCLoseCite" />
           </view>
         </view>
diff --git a/packages/pro-components/chat/chat-sender/chat-sender.less b/packages/pro-components/chat/chat-sender/chat-sender.less
@@ -4,7 +4,7 @@
 
 @chat-sender-border-radius: 32rpx;
 @chat-sender-padding: 22rpx 0;
-@chat-sender-margin: 48rpx 24rpx 80rpx 24rpx;
+@chat-sender-margin: 24rpx 24rpx 80rpx 24rpx;
 @chat-sender-border-width: 2rpx;
 @chat-sender-border-color: @component-border;
 @chat-sender-shadow: @shadow-3;
@@ -73,6 +73,8 @@
 @chat-sender-menu-item-text-line-height: 36rpx;
 @chat-sender-menu-item-text-letter-spacing: 1rpx;
 
+@chat-sender-bg-color: var(--td-bg-color-specialcomponent, #fff);
+
 .@{chat-sender} {
   position: relative;
   border-radius: @chat-sender-border-radius;
@@ -82,6 +84,7 @@
   margin: @chat-sender-margin;
   box-shadow: @chat-sender-shadow;
   transition: @chat-sender-margin-bottom-transition;
+  background-color: @chat-sender-bg-color;
 
   // 头部区域
   &__header {
@@ -212,6 +215,8 @@
       justify-content: center;
 
       .plus-btn {
+        color: @text-color-primary;
+
         .btn-icon {
           display: block;
         }
@@ -235,6 +240,7 @@
       }
 
       .send-btn-icon {
+        color: @bg-color-container;
         width: @chat-sender-send-btn-size;
         height: @chat-sender-send-btn-size;
         margin-left: @chat-sender-send-btn-margin-left;
@@ -246,6 +252,10 @@
         transform: rotate(-90deg);
         transition: @chat-sender-send-btn-transition;
 
+        &.active {
+          color: @text-color-anti;
+        }
+
         &.disabled {
           background-color: @chat-sender-send-btn-bg-color-disabled;
           color: @bg-color-container;
diff --git a/packages/pro-components/chat/chat-sender/chat-sender.wxml b/packages/pro-components/chat/chat-sender/chat-sender.wxml
@@ -80,19 +80,19 @@
                 <block wx:if="{{item.name === 'send'}}">
                   <block wx:if="{{item.type === 'text'}}">
                     <view
-                      class="send-btn-{{item.type}} {{value || loading ? '' : 'disabled'}}"
+                      class="send-btn-{{item.type}} {{value || loading ? 'active' : 'disabled'}}"
                       bindtap="handleSendClick"
                     >
                       {{loading ? '停止' : '发送'}}
                     </view>
                   </block>
                   <block wx:else>
                     <view
-                      class="send-btn-icon send-btn-{{item.type}} {{value || loading ? '' : 'disabled'}} {{loading ? 'stop' : ''}}"
+                      class="send-btn-icon send-btn-{{item.type}} {{value || loading ? 'active' : 'disabled'}} {{loading ? 'stop' : ''}}"
                       bindtap="handleSendClick"
                     >
                       <block wx:if="{{!loading}}">
-                        <t-icon name="send-filled" size="32rpx" color="#ffffff" />
+                        <t-icon name="send-filled" size="32rpx" />
                       </block>
                       <block wx:else>
                         <view style="width: 24rpx; height: 24rpx; background-color: #ffffff" />
diff --git a/packages/pro-components/chat/chat-thinking/_example/pending/index.js b/packages/pro-components/chat/chat-thinking/_example/pending/index.js
@@ -2,7 +2,7 @@ Component({
   data: {
     animation: 'moving',
     content: {
-      text: '嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说， 保持原来的运动状态。',
+      text: '嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律',
       title: '思考中···',
     },
     status: 'pending',
diff --git a/packages/pro-components/chat/chat-thinking/chat-thinking.less b/packages/pro-components/chat/chat-thinking/chat-thinking.less
@@ -19,6 +19,8 @@
   }
 
   &__hd {
+    height: 48rpx;
+    overflow: hidden;
     display: flex;
     align-items: center;
 

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@`
`27`	`27`	`wx:for="{{item.tasks}}"`
`28`	`28`	`wx:key="index"`
`29`	`29`	`wx:for-item="taskItem"`
`30`		`- class="{{['step-text', taskItem.type]}}"`
	`30`	`+ class="step-text {{taskItem.type}}"`
`31`	`31`	`>`
`32`	`32`	`<t-icon`
`33`	`33`	`wx:if="{{taskItem.type === 'command'}}"`
Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,7 @@`
`50`	`50`
`51`	`51`	`.step-icon {`
`52`	`52`	`margin-right: 12rpx;`
`53`		`- margin-top: 4rpx;`
	`53`	`+ margin-top: 6rpx;`
`54`	`54`	`}`
`55`	`55`
`56`	`56`	`.t-steps-item__circle--finish {`
Original file line number	Diff line number	Diff line change
`@@ -2,5 +2,6 @@`
`2`	`2`	`background-color: var(--td-bg-color-container);`
`3`	`3`	`padding: 32rpx;`
`4`	`4`	`display: flex;`
	`5`	`+ align-items: center;`
`5`	`6`	`gap: 48rpx;`
`6`	`7`	`}`