Revert "修改聊天功能"

This reverts commit c523e165986a2a6a807293911f692aa2f9822172.

src/TUIKit/.github/README.md

@@ -35,7 +35,7 @@ chat-uikit-vue Web 端 和 H5 端界面效果如下图所示：
 - node（12.13.0 <= node 版本 <= 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0）
 - npm（版本请与 node 版本匹配）
 
-### TUIKit 源码集成 - github 方式集成
+### TUIKit 源码集成 - github方式集成
 
 #### 步骤 1：创建项目
 
@@ -66,7 +66,7 @@ cd chat-example
 
 #### 步骤 2：下载 TUIKit 组件
 
-通过 `git clone` 方式下载 TUIKit 组件及其相关依赖， 为了方便您的后续使用，建议您通过以下命令将整个 `chat-uikit-vue` 复制到您项目的 src 目录下，并重命名为 TUIKit：
+通过 `git clone` 方式下载 TUIKit 组件及其相关依赖， 为了方便您的后续使用，建议您通过以下命令将整个 `chat-uikit-vue` 复制到您项目的 src目录下，并重命名为TUIKit：
 
 ```shell
 # 项目根目录命令行执行
@@ -102,7 +102,7 @@ const userID = ''; // User ID
 
 // init TUIKit
 const TUIKit = TUICore.init({
-  SDKAppID
+  SDKAppID,
 });
 // TUIKit add TUIComponents
 TUIKit.use(TUIComponents);
@@ -115,8 +115,8 @@ TUIKit.login({
   userSig: genTestUserSig({
     SDKAppID,
     secretKey,
-    userID
-  }).userSig // The password with which the user logs in to IM. It is the ciphertext generated by encrypting information such as userID.For the detailed generation method, see Generating UserSig
+    userID,
+  }).userSig, // The password with which the user logs in to IM. It is the ciphertext generated by encrypting information such as userID.For the detailed generation method, see Generating UserSig
 });
 
 createApp(App).use(TUIKit).mount('#app');
@@ -225,16 +225,16 @@ export default defineComponent({
   overflow: hidden;
 }
 .search {
-  padding: 12Px;
+  padding: 12px;
 }
 .conversation {
-  min-width: 285Px;
+  min-width: 285px;
   flex: 0 0 24%;
-  border-right: 1Px solid #f4f5f9;
+  border-right: 1px solid #f4f5f9;
 }
 .conversation-h5 {
   flex: 1;
-  border-right: 1Px solid #f4f5f9;
+  border-right: 1px solid #f4f5f9;
 }
 .chat {
   flex: 1;
@@ -247,24 +247,22 @@ export default defineComponent({
   top: calc(50% - 18rem);
   width: 50rem;
   height: 36rem;
-  border-radius: 16Px;
-  box-shadow: rgba(0, 0, 0, 0.16) 0Px 3Px 6Px, rgba(0, 0, 0, 0.23) 0Px 3Px 6Px;
+  border-radius: 16px;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }
 .callkit-drag-container-mini {
   position: fixed;
-  width: 168Px;
-  height: 56Px;
-  right: 10Px;
-  top: 70Px;
+  width: 168px;
+  height: 56px;
+  right: 10px;
+  top: 70px;
 }
 </style>
 
 ```
 
 #### 步骤 6：启动项目
-
 在您项目的根目录执行：
-
 ```javascript
 npm run serve
 ```
@@ -274,29 +272,29 @@ npm run serve
 ![send your first message](https://user-images.githubusercontent.com/57951148/192585549-2cc65785-0d6d-4d48-a0ce-0abe0b927bf4.png)
 
 #### 步骤 8: 拨打您的第一通电话
-
 自 @tencentcloud/chat-uikit-vue v1.4.0 版本起自动接入音视频通话功能，无需手动集成。
-如果您是 v1.4.0 以下版本，可以通过接入 call-uikit-vue 体验通话功能。详情请参考 [音视频通话 ( Web & H5 )](https://cloud.tencent.com/document/product/269/79861)
-<img width="1015" alt="page05" src="https://user-images.githubusercontent.com/57951148/196082955-e046f0b1-bba2-491d-91b3-f30f2c6f4aae.png">
+如果您是 v1.4.0 以下版本，可以通过接入 call-uikit-vue 体验通话功能。详情请参考 [音视频通话 ( Web & H5 )](https://cloud.tencent.com/document/product/269/79861) 
+ <img width="1015" alt="page05" src="https://user-images.githubusercontent.com/57951148/196082955-e046f0b1-bba2-491d-91b3-f30f2c6f4aae.png">
 
 ### 常见问题
-
 #### 1. TUIKit 与 Demo 有何区别？
 
-<table style="text-align:center; vertical-align:middle; width:1000Px">
+<table style="text-align:center; vertical-align:middle; width:1000px">
   <tr>
-    <th style="text-align:center;" width="500Px">TUIKit 运行效果</th>
-    <th style="text-align:center;" width="500Px">Demo 运行效果</th>
+    <th style="text-align:center;" width="500px">TUIKit 运行效果</th>
+    <th style="text-align:center;" width="500px">Demo 运行效果</th>
   </tr>
   <tr>
-    <td><img style="width:500Px" src="https://user-images.githubusercontent.com/57951148/225872424-c530e7ef-593d-472a-a77d-420d18bafefa.png"/></td>
-    <td><img style="width:500Px" src="https://user-images.githubusercontent.com/57951148/225871366-f24b0abe-2829-4886-83fe-eb129338380a.png"/></td>
+    <td><img style="width:500px" src="https://user-images.githubusercontent.com/57951148/225872424-c530e7ef-593d-472a-a77d-420d18bafefa.png"/></td>
+    <td><img style="width:500px" src="https://user-images.githubusercontent.com/57951148/225871366-f24b0abe-2829-4886-83fe-eb129338380a.png"/></td>
    </tr>
 </table>
 
 TUIKit 是基于腾讯云 Web IM SDK 的一款 VUE UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、音视频通话、关系链、资料、群组等功能。通过以上“TUIKit 源码集成”教程，您可以快速接入并体验 TUIKit 中的基础功能，并可以直接将 TUIKit 集成到您的现有项目中进行使用。
 
 Demo 是基于 TUIKit 搭建的一套完整的 即时通信含 UI 解决方案，他是一个基于 VUE3 + TS + TUIKit 的完整项目，其 views/Home.vue 文件中展示了丰富的 TUIKit 组合使用方案供您参考使用。
+ 
+
 
 #### 2. 什么是 UserSig？
 
@@ -324,11 +322,9 @@ module.exports = {
   },
 };
 ```
-
 ### 相关文档
-
 - [快速跑通 Demo](https://github.com/TencentCloud/chat-uikit-vue/tree/main/Demo)
-- [@tencentcloud/chat-uikit-vue npm 仓库](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue)
-- [SDK API 手册](https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html)
+- [@tencentcloud/chat-uikit-vue npm仓库](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue)
+- [SDK API手册](https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html)
 - [SDK 更新日志](https://cloud.tencent.com/document/product/269/38492)
-- [音视频通话](https://cloud.tencent.com/document/product/269/79861)
+- [音视频通话](https://cloud.tencent.com/document/product/269/79861) 

src/TUIKit/TUIComponents/assets/icon/arrow-left-center.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg class="icon" width="32Px" height="32.00Px" viewBox="0 0 1024 1024" version="1.1"
+<svg class="icon" width="32px" height="32.00px" viewBox="0 0 1024 1024" version="1.1"
   xmlns="http://www.w3.org/2000/svg">
   <path fill="#444444"
     d="M384 512L731.733333 202.666667c17.066667-14.933333 19.2-42.666667 4.266667-59.733334-14.933333-17.066667-42.666667-19.2-59.733333-4.266666l-384 341.333333c-10.666667 8.533333-14.933333 19.2-14.933334 32s4.266667 23.466667 14.933334 32l384 341.333333c8.533333 6.4 19.2 10.666667 27.733333 10.666667 12.8 0 23.466667-4.266667 32-14.933333 14.933333-17.066667 14.933333-44.8-4.266667-59.733334L384 512z" />
-</svg>
+</svg>

src/TUIKit/TUIComponents/assets/icon/at.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="18Px" height="18Px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>画板</title>
     <g id="画板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="at" fill-rule="nonzero">
@@ -9,4 +9,4 @@
             </g>
         </g>
     </g>
-</svg>
+</svg>

src/TUIKit/TUIComponents/assets/icon/back.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48Px" height="48Px" viewBox="0 0 48 48" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="48px" viewBox="0 0 48 48" version="1.1">
   <title>ic_back_white</title>
   <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
     <g id="02.-查看信息-示例好友" transform="translate(-32.000000, -200.000000)">

src/TUIKit/TUIComponents/assets/icon/c2c.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="43Px" height="42Px" viewBox="0 0 43 42" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="43px" height="42px" viewBox="0 0 43 42" version="1.1">
   <title>编组 3</title>
   <defs>
     <path d="M52.1440033,262.168279 C53.7071313,260.607213 56.2397907,260.608885 57.8008563,262.172013 L57.8008563,262.172013 L71.61,275.999572 L301,276 C308.731986,276 315,282.268014 315,290 L315,449 C315,456.731986 308.731986,463 301,463 L29,463 C21.2680135,463 15,456.731986 15,449 L15,290 C15,282.268014 21.2680135,276 29,276 L38.33,275.999572 L52.1402692,262.172013 L52.1402692,262.172013 Z" id="path-1"></path>

src/TUIKit/TUIComponents/assets/icon/cancel.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16Px" height="16Px" viewBox="0 0 16 16" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
   <title>清除</title>
   <g id="页面-2备份" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
     <g id="创建群聊" transform="translate(-1243.000000, -413.000000)">

src/TUIKit/TUIComponents/assets/icon/emoj.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16Px" height="16Px" viewBox="0 0 16 16" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
   <title>ic/消息备份 8</title>
   <defs>
     <circle id="path-1" cx="8" cy="8" r="8"></circle>

src/TUIKit/TUIComponents/assets/icon/evaluate.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16Px" height="16Px" viewBox="0 0 16 16" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
   <title>编组 9备份 4</title>
   <defs>
     <rect id="path-1" x="1" y="1" width="14" height="14" rx="2.25"></rect>

src/TUIKit/TUIComponents/assets/icon/msg-copy.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40Px" height="40Px" viewBox="0 0 40 40" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" version="1.1">
   <title>编组 14</title>
   <defs>
     <path d="M467,0 C474.731986,-2.71135202e-14 481,6.2680135 481,14 L481,247 C481,254.731986 474.731986,261 467,261 L353.036,261 L340.862492,273.204941 C339.302377,274.769018 336.769719,274.77223 335.205642,273.212116 C335.203247,273.209727 335.200856,273.207335 335.198467,273.204941 L323.024,261 L14,261 C6.2680135,261 2.72325209e-15,254.731986 0,247 L0,14 C8.29461588e-16,6.2680135 6.2680135,3.19669972e-15 14,0 L467,0 Z" id="path-1"></path>

src/TUIKit/TUIComponents/assets/icon/msg-del.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40Px" height="40Px" viewBox="0 0 40 40" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" version="1.1">
   <title>矩形</title>
   <defs>
     <path d="M467,0 C474.731986,-2.71135202e-14 481,6.2680135 481,14 L481,247 C481,254.731986 474.731986,261 467,261 L353.036,261 L340.862492,273.204941 C339.302377,274.769018 336.769719,274.77223 335.205642,273.212116 C335.203247,273.209727 335.200856,273.207335 335.198467,273.204941 L323.024,261 L14,261 C6.2680135,261 2.72325209e-15,254.731986 0,247 L0,14 C8.29461588e-16,6.2680135 6.2680135,3.19669972e-15 14,0 L467,0 Z" id="path-1"></path>

src/TUIKit/TUIComponents/assets/icon/msg-forward.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40Px" height="40Px" viewBox="0 0 40 40" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" version="1.1">
   <title>编组</title>
   <defs>
     <path d="M467,0 C474.731986,-2.71135202e-14 481,6.2680135 481,14 L481,247 C481,254.731986 474.731986,261 467,261 L353.036,261 L340.862492,273.204941 C339.302377,274.769018 336.769719,274.77223 335.205642,273.212116 C335.203247,273.209727 335.200856,273.207335 335.198467,273.204941 L323.024,261 L14,261 C6.2680135,261 2.72325209e-15,254.731986 0,247 L0,14 C8.29461588e-16,6.2680135 6.2680135,3.19669972e-15 14,0 L467,0 Z" id="path-1"></path>

src/TUIKit/TUIComponents/assets/icon/msg-play.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="130Px" height="130Px" viewBox="0 0 130 130" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="130px" height="130px" viewBox="0 0 130 130" version="1.1">
   <title>编组</title>
   <defs>
     <filter x="-20.0%" y="-20.0%" width="140.0%" height="140.0%" filterUnits="objectBoundingBox" id="filter-1">

src/TUIKit/TUIComponents/assets/icon/msg-reply.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40Px" height="40Px" viewBox="0 0 40 40" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" version="1.1">
   <title>编组 12</title>
   <defs>
     <path d="M467,0 C474.731986,-2.71135202e-14 481,6.2680135 481,14 L481,247 C481,254.731986 474.731986,261 467,261 L353.036,261 L340.862492,273.204941 C339.302377,274.769018 336.769719,274.77223 335.205642,273.212116 C335.203247,273.209727 335.200856,273.207335 335.198467,273.204941 L323.024,261 L14,261 C6.2680135,261 2.72325209e-15,254.731986 0,247 L0,14 C8.29461588e-16,6.2680135 6.2680135,3.19669972e-15 14,0 L467,0 Z" id="path-1"></path>

src/TUIKit/TUIComponents/assets/icon/msg-revoke.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40Px" height="40Px" viewBox="0 0 40 40" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" version="1.1">
   <title>矩形</title>
   <defs>
     <path d="M467,0 C474.731986,-2.71135202e-14 481,6.2680135 481,14 L481,247 C481,254.731986 474.731986,261 467,261 L353.036,261 L340.862492,273.204941 C339.302377,274.769018 336.769719,274.77223 335.205642,273.212116 C335.203247,273.209727 335.200856,273.207335 335.198467,273.204941 L323.024,261 L14,261 C6.2680135,261 2.72325209e-15,254.731986 0,247 L0,14 C8.29461588e-16,6.2680135 6.2680135,3.19669972e-15 14,0 L467,0 Z" id="path-1"></path>

src/TUIKit/TUIComponents/assets/icon/rotate-left.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg class="icon" width="200Px" height="200.00Px" viewBox="0 0 1024 1024" version="1.1"
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1"
   xmlns="http://www.w3.org/2000/svg">
   <path fill="#444444"
     d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H188V494h440v326zM819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-0.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7 0.4 12.6-6.1v-63.9c12.9 0.1 25.9 0.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-0.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3z" />
-</svg>
+</svg>

src/TUIKit/TUIComponents/assets/icon/rotate-right.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg class="icon" width="200Px" height="200.00Px" viewBox="0 0 1024 1024" version="1.1"
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1"
   xmlns="http://www.w3.org/2000/svg">
   <path fill="#444444"
     d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-0.4-12.6 6.1l-0.2 64c-118.6 0.5-235.8 53.4-314.6 154.2-69.6 89.2-95.7 198.6-81.1 302.4h74.9c-0.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8zM880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H396V494h440v326z" />
-</svg>
+</svg>

src/TUIKit/TUIComponents/assets/icon/selected.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16Px" height="16Px" viewBox="0 0 16 16" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
   <title>编组 14</title>
   <defs>
     <filter x="-10.6%" y="-5.4%" width="121.2%" height="110.9%" filterUnits="objectBoundingBox" id="filter-1">

src/TUIKit/TUIComponents/assets/icon/star-light.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34Px" height="33Px" viewBox="0 0 34 33" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34px" height="33px" viewBox="0 0 34 33" version="1.1">
   <title>编组 10</title>
   <defs>
     <filter x="-27.3%" y="-28.6%" width="154.5%" height="157.1%" filterUnits="objectBoundingBox" id="filter-1">

src/TUIKit/TUIComponents/assets/icon/star.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24Px" height="23Px" viewBox="0 0 24 23" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="23px" viewBox="0 0 24 23" version="1.1">
   <title>路径</title>
   <g id="页面-2备份" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
     <g id="评价" transform="translate(-1145.000000, -442.000000)" fill="#E5E7E9" fill-rule="nonzero">

src/TUIKit/TUIComponents/assets/icon/words.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16Px" height="16Px" viewBox="0 0 16 16" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
   <title>编组 9备份 5</title>
   <defs>
     <path d="M3.25,1 L12.75,1 C13.9926407,1 15,2.00735931 15,3.25 L15,8.80223083 L15,8.80223083 L15,10.6730769 C15,11.9157176 13.9926407,12.9230769 12.75,12.9230769 L9.60349397,12.9230769 L9.60349397,12.9230769 L8.41095925,14.4677057 C8.24220503,14.6862843 7.9282097,14.726675 7.70963106,14.5579208 C7.6710256,14.5281153 7.63698877,14.4928218 7.60860204,14.4531614 L6.51344888,12.9230769 L6.51344888,12.9230769 L3.25,12.9230769 C2.00735931,12.9230769 1,11.9157176 1,10.6730769 L1,3.25 C1,2.00735931 2.00735931,1 3.25,1 Z" id="path-1"></path>

src/TUIKit/TUIComponents/assets/icon/zoom-in.svg

@@ -1,9 +1,9 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg class="icon" width="200Px" height="200.00Px" viewBox="0 0 1024 1024" version="1.1"
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1"
   xmlns="http://www.w3.org/2000/svg">
   <path fill="#444444"
     d="M945.066667 898.133333l-189.866667-189.866666c55.466667-64 87.466667-149.333333 87.466667-241.066667 0-204.8-168.533333-373.333333-373.333334-373.333333S96 264.533333 96 469.333333 264.533333 842.666667 469.333333 842.666667c91.733333 0 174.933333-34.133333 241.066667-87.466667l189.866667 189.866667c6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333c8.533333-12.8 8.533333-34.133333-2.133333-46.933334zM469.333333 778.666667C298.666667 778.666667 160 640 160 469.333333S298.666667 160 469.333333 160 778.666667 298.666667 778.666667 469.333333 640 778.666667 469.333333 778.666667z" />
   <path fill="#444444"
     d="M597.333333 437.333333h-96V341.333333c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v96H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h96V597.333333c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-96H597.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" />
-</svg>
+</svg>

src/TUIKit/TUIComponents/assets/icon/zoom-out.svg

@@ -1,9 +1,9 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg class="icon" width="200Px" height="200.00Px" viewBox="0 0 1024 1024" version="1.1"
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1"
   xmlns="http://www.w3.org/2000/svg">
   <path fill="#444444"
     d="M945.066667 898.133333l-189.866667-189.866666c55.466667-64 87.466667-149.333333 87.466667-241.066667 0-204.8-168.533333-373.333333-373.333334-373.333333S96 264.533333 96 469.333333 264.533333 842.666667 469.333333 842.666667c91.733333 0 174.933333-34.133333 241.066667-87.466667l189.866667 189.866667c6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333c8.533333-12.8 8.533333-34.133333-2.133333-46.933334zM469.333333 778.666667C298.666667 778.666667 160 640 160 469.333333S298.666667 160 469.333333 160 778.666667 298.666667 778.666667 469.333333 640 778.666667 469.333333 778.666667z" />
   <path fill="#444444"
     d="M597.333333 437.333333H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h256c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" />
-</svg>
+</svg>

src/TUIKit/TUIComponents/components/dialog/style/color.scss

@@ -1,6 +1,5 @@
 .dialog {
-  background: rgba(0, 0, 0, 0.3);
-
+  background: rgba(0 ,0, 0, .3);
   header {
     h1 {
       font-family: PingFangSC-Medium;
@@ -8,34 +7,28 @@
       color: #333333;
     }
   }
-
   &-main {
-    background: #ffffff;
-
+    background: #FFFFFF;
     header {
       font-weight: 500;
       color: #333333;
     }
-
     &-content {
       font-weight: 400;
       color: #333333;
     }
   }
 }
-
 .btn {
   font-weight: 400;
-  color: #ffffff;
+  color: #FFFFFF;
   letter-spacing: 0;
-
   &-cancel {
-    border: 1Px solid #dddddd;
+    border: 1px solid #dddddd;
     color: #666666;
   }
-
   &-default {
-    background: #006eff;
-    border: 1Px solid #006eff;
+    background: #006EFF;
+    border: 1px solid #006EFF;
   }
 }

src/TUIKit/TUIComponents/components/dialog/style/h5.scss

@@ -12,7 +12,6 @@
       display: flex;
       flex-direction: column;
       overflow: hidden;
-
       &-content {
         flex: 1;
         padding: 0;
@@ -22,16 +21,16 @@
       }
 
       footer {
-        border-top: 1Px solid #dddddd;
+        border-top: 1px solid #DDDDDD;
 
         .btn {
           flex: 1;
           margin: 0;
           background: none;
-          border-right: 1Px solid #dddddd;
+          border-right: 1px solid #DDDDDD;
 
           &-default {
-            color: #ff584c;
+            color: #FF584C;
             border: none;
           }
         }
@@ -42,6 +41,6 @@
 
 .center {
   align-items: center;
-  padding: 20Px;
+  padding: 20px;
   box-sizing: border-box;
 }

src/TUIKit/TUIComponents/components/dialog/style/web.scss

@@ -11,27 +11,27 @@
 
   header {
     h1 {
-      font-size: 16Px;
-      line-height: 30Px;
+      font-size: 16px;
+      line-height: 30px;
     }
   }
 
   &-main {
-    min-width: 368Px;
-    border-radius: 10Px;
-    padding: 20Px 30Px;
+    min-width: 368px;
+    border-radius: 10px;
+    padding: 20px 30px;
 
     header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      font-size: 16Px;
-      line-height: 30Px;
+      font-size: 16px;
+      line-height: 30px;
     }
 
     &-content {
-      padding: 20Px 0 40Px;
-      font-size: 14Px;
+      padding: 20px 0 40px;
+      font-size: 14px;
     }
 
     footer {
@@ -42,13 +42,13 @@
 }
 
 .btn {
-  padding: 8Px 20Px;
-  margin: 0 6Px;
-  border-radius: 4Px;
+  padding: 8px 20px;
+  margin: 0 6px;
+  border-radius: 4px;
   border: none;
-  font-size: 14Px;
+  font-size: 14px;
   text-align: center;
-  line-height: 20Px;
+  line-height: 20px;
 
   &:disabled {
     opacity: 0.3;

src/TUIKit/TUIComponents/components/drag/index.vue

@@ -11,28 +11,28 @@ import {
   toRefs,
   onMounted,
   watch,
-  watchEffect
-} from 'vue';
+  watchEffect,
+} from "vue";
 export default defineComponent({
   props: {
     show: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     domClassName: {
       type: String,
-      default: ''
-    }
+      default: "",
+    },
   },
   setup(props: any, ctx: any) {
     const data = reactive({
       show: false,
-      domClassName: '',
+      domClassName: "",
       startPosition: {
-        left: '',
-        top: '',
-        cssText: ''
-      }
+        left: "",
+        top: "",
+        cssText: "",
+      },
     });
 
     watchEffect(() => {
@@ -42,7 +42,7 @@ export default defineComponent({
 
     onMounted(() => {
       const dragDom = document.getElementsByClassName(
-        props.domClassName ? props.domClassName : 'drag-container'
+        props.domClassName ? props.domClassName : "drag-container"
       )[0] as HTMLElement;
       if (!dragDom) return;
       let isDrag = false;
@@ -65,17 +65,17 @@ export default defineComponent({
         const move = (e: MouseEvent) => {
           e.preventDefault();
           if (isDrag) {
-            dragDom.style.left = `${e.clientX - X}Px`;
-            dragDom.style.top = `${e.clientY - Y}Px`;
+            dragDom.style.left = `${e.clientX - X}px`;
+            dragDom.style.top = `${e.clientY - Y}px`;
           }
         };
-        document.addEventListener('mousemove', throttle(move, 20), false);
-        document.addEventListener('mouseup', () => {
+        document.addEventListener("mousemove", throttle(move, 20), false);
+        document.addEventListener("mouseup", () => {
           isDrag = false;
-          document.removeEventListener('mousemove', move);
+          document.removeEventListener("mousemove", move);
         });
       };
-      dragDom.addEventListener('mousedown', mouseDown);
+      dragDom.addEventListener("mousedown", mouseDown);
     });
 
     function throttle(
@@ -94,12 +94,12 @@ export default defineComponent({
 
     const positionReset = () => {
       const dragDom = document.getElementsByClassName(
-        props.domClassName ? props.domClassName : 'drag-container'
+        props.domClassName ? props.domClassName : "drag-container"
       )[0] as HTMLElement;
       data.startPosition = {
-        left: '',
-        top: '',
-        cssText: ''
+        left: "",
+        top: "",
+        cssText: "",
       };
       dragDom.style.left = data.startPosition?.left;
       dragDom.style.top = data.startPosition?.top;
@@ -107,19 +107,19 @@ export default defineComponent({
     };
 
     ctx.expose({
-      positionReset
+      positionReset,
     });
 
     return {
       ...toRefs(data),
-      throttle
+      throttle,
     };
-  }
+  },
 });
 </script>
 <style lang="scss" scoped>
-@import url('../../styles/common.scss');
-@import url('../../styles/icon.scss');
+@import url("../../styles/common.scss");
+@import url("../../styles/icon.scss");
 .drag-container {
   position: fixed;
   z-index: 100;

src/TUIKit/TUIComponents/components/message/index.vue

@@ -1,15 +1,6 @@
 <template>
-  <transition
-    name="fade"
-    @before-leave="onClose"
-    @after-leave="$emit('destroy')"
-  >
-    <div
-      class="message"
-      :class="[handleStyle(type), isH5 && 'message-h5']"
-      :style="customStyle"
-      v-show="visible"
-    >
+  <transition name="fade" @before-leave="onClose" @after-leave="$emit('destroy')">
+    <div class="message" :class="[handleStyle(type), isH5 && 'message-h5']" :style="customStyle" v-show="visible">
       <p v-if="!isH5">{{ message }}</p>
       <span v-if="isH5">{{ message }}</span>
     </div>
@@ -17,53 +8,46 @@
 </template>
 <script lang="ts">
 import { useTimeoutFn } from '@vueuse/core';
-import {
-  computed,
-  CSSProperties,
-  defineComponent,
-  onMounted,
-  ref,
-  watch
-} from 'vue';
+import { computed, CSSProperties, defineComponent, onMounted, ref, watch } from 'vue';
 export default defineComponent({
   name: 'TUIMessage',
   props: {
     message: {
       type: String,
-      default: ''
+      default: '',
     },
     duration: {
       type: Number,
-      default: 3000
+      default: 3000,
     },
     repeatNum: {
       type: Number,
-      default: 1
+      default: 1,
     },
     id: {
       type: String,
-      default: ''
+      default: '',
     },
     onClose: {
       type: Function,
-      required: false
+      required: false,
     },
     offset: {
       type: Number,
-      default: 20
+      default: 20,
     },
     zIndex: {
       type: Number,
-      default: 0
+      default: 0,
     },
     isH5: {
       type: Boolean,
-      default: false
+      default: false,
     },
     type: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
   },
   setup(props) {
     const visible = ref(false);
@@ -95,8 +79,8 @@ export default defineComponent({
     );
 
     const customStyle = computed<CSSProperties>(() => ({
-      top: `${props.offset}Px`,
-      zIndex: props.zIndex
+      top: `${props.offset}px`,
+      zIndex: props.zIndex,
     }));
 
     onMounted(() => {
@@ -105,20 +89,16 @@ export default defineComponent({
     });
 
     const handleStyle = (type?: string) => {
-      if (
-        type &&
-        (type === 'error' || type === 'success' || type === 'warning')
-      )
-        return type;
+      if (type && (type === 'error' || type === 'success' || type === 'warning')) return type;
       return 'normal';
     };
 
     return {
       visible,
       customStyle,
-      handleStyle
+      handleStyle,
     };
-  }
+  },
 });
 </script>
 <style lang="scss" scoped>
@@ -129,33 +109,33 @@ export default defineComponent({
   left: 0;
   right: 0;
   margin: 0 auto;
-  max-width: 450Px;
+  max-width: 450px;
   width: fit-content;
   justify-content: center;
   align-items: center;
   p {
-    box-shadow: 0 2Px 12Px 0 rgba(0, 0, 0, 0.2);
-    border-radius: 3Px;
-    padding: 10Px 15Px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    padding: 10px 15px;
     width: fit-content;
     word-break: break-all;
   }
 }
 .message-h5 {
   position: absolute;
-  top: 300Px !important;
+  top: 300px !important;
   margin: 0 auto;
   width: fit-content;
   max-width: 80%;
   width: fit-content;
   justify-content: center;
   align-items: center;
-  border-radius: 5Px;
-  padding: 10Px 15Px;
+  border-radius: 5px;
+  padding: 10px 15px;
   span {
     font-family: PingFangSC-Regular;
     font-weight: 400;
-    font-size: 14Px;
+    font-size: 14px;
     letter-spacing: 0;
     text-align: center;
     word-break: break-all;
@@ -163,22 +143,22 @@ export default defineComponent({
 }
 
 .success {
-  border: 1Px solid #e4f2da;
+  border: 1px solid #e4f2da;
   background: #f2f9ec;
   color: #7ebf50;
 }
 .error {
-  border: 1Px solid #fde2e2;
+  border: 1px solid #fde2e2;
   background: #fef0f0;
   color: #f46c6e;
 }
 .normal {
-  border: 1Px solid #e9e9eb;
+  border: 1px solid #e9e9eb;
   background: #f4f4f5;
   color: #909398;
 }
 .warning {
-  border: 1Px solid #faf0e2;
+  border: 1px solid #faf0e2;
   background: #fdf8f1;
   color: #e4b877;
 }

src/TUIKit/TUIComponents/components/slider/index.vue

@@ -11,18 +11,19 @@ export default defineComponent({
   props: {
     open: {
       type: Boolean,
-      default: () => false
-    }
+      default: () => false,
+    },
   },
-  setup(props: any, ctx: any) {
+  setup(props:any, ctx:any) {
     const data = reactive({
-      open: false
+      open: false,
     });
 
     watchEffect(() => {
       data.open = props.open;
     });
 
+
     const toggle = () => {
       data.open = !data.open;
       ctx.emit('change', data.open);
@@ -30,9 +31,9 @@ export default defineComponent({
 
     return {
       ...toRefs(data),
-      toggle
+      toggle,
     };
-  }
+  },
 });
 </script>
 
@@ -43,24 +44,24 @@ export default defineComponent({
   &-box {
     display: flex;
     align-items: center;
-    width: 34Px;
-    height: 20Px;
-    border-radius: 10Px;
-    background: #e1e1e3;
+    width: 34px;
+    height: 20px;
+    border-radius: 10px;
+    background: #E1E1E3;
   }
   &-open {
-    background: #006eff !important;
+    background: #006EFF !important;
     justify-content: flex-end;
   }
   &-block {
     display: inline-block;
-    width: 16Px;
-    height: 16Px;
-    border-radius: 8Px;
-    margin: 0 2Px;
-    background: #ffffff;
-    border: 0 solid rgba(0, 0, 0, 0.85);
-    box-shadow: 0 2Px 4Px 0 #d1d1d1;
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+    margin: 0 2px;
+    background: #FFFFFF;
+    border: 0 solid rgba(0,0,0,0.85);
+    box-shadow: 0 2px 4px 0 #D1D1D1;
   }
 }
 </style>

src/TUIKit/TUIComponents/components/transfer/index.vue

@@ -34,8 +34,8 @@
               <template v-if="!isCustomItem">
                 <img
                   class="avatar"
-                  :src="item?.avatar || 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
-                  onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
+                  :src="item?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+                  onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
                 />
                 <span class="name">{{ item?.nick || item?.userID }}</span>
                 <span v-if="item?.isDisabled">（{{ $t('component.已在群聊中') }}）</span>
@@ -58,8 +58,8 @@
               <template v-if="!isCustomItem">
                 <img
                   class="avatar"
-                  :src="item?.avatar || 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
-                  onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
+                  :src="item?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+                  onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
                 />
                 <span v-if="!isH5">{{ item.nick || item.userID }}</span>
               </template>

src/TUIKit/TUIComponents/components/transfer/style/color.scss

@@ -1,33 +1,28 @@
 .main {
-  background: #ffffff;
-  border: 1Px solid #e0e0e0;
-  box-shadow: 0 -4Px 12Px 0 rgba(0, 0, 0, 0.06);
-
+  background: #FFFFFF;
+  border: 1px solid #E0E0E0;
+  box-shadow: 0 -4px 12px 0 rgba(0,0,0,0.06);
   .left {
-    border-right: 1Px solid #e8e8e9;
+    border-right: 1px solid #E8E8E9;
   }
-
   header {
     font-weight: 500;
     color: #000000;
     letter-spacing: 0;
-
     input {
-      background: #ffffff;
-      border: 1Px solid #dee0e3;
+      background: #FFFFFF;
+      border: 1px solid #DEE0E3;
       font-weight: 500;
-      color: #8f959e;
+      color: #8F959E;
       letter-spacing: 0;
     }
   }
-
   .list {
     p {
       font-weight: 500;
-      color: #8f959e;
+      color: #8F959E;
       letter-spacing: 0;
     }
-
     &-item {
       .disabled {
         background: #eeeeee;
@@ -35,35 +30,30 @@
     }
   }
 }
-
 .avatar {
-  background: #f4f5f9;
+  background: #F4F5F9;
   color: #000000;
 }
-
 .btn {
-  background: #3370ff;
-  border: 0 solid #2f80ed;
+  background: #3370FF;
+  border: 0 solid #2F80ED;
   font-weight: 400;
-  color: #ffffff;
-
+  color: #FFFFFF;
   &-cancel {
-    background: #ffffff;
-    border: 1Px solid #dddddd;
+    background: #FFFFFF;
+    border: 1px solid #DDDDDD;
     color: #828282;
   }
 }
-
 .btn-no {
   background: #e8e8e9;
-  border: 1Px solid #dddddd;
+  border: 1px solid #DDDDDD;
   font-weight: 400;
-  color: #ffffff;
+  color: #FFFFFF;
 }
 
 .transfer-h5-header {
-  background: #ffffff;
-
+  background: #FFFFFF;
   .title {
     font-family: PingFangSC-Medium;
     font-weight: 500;

src/TUIKit/TUIComponents/components/transfer/style/h5.scss

@@ -3,21 +3,18 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-
   &-header {
     position: relative;
     display: flex;
     justify-content: center;
-    font-size: 18Px;
-    padding: 16Px 18Px;
-
+    font-size: 18px;
+    padding: 16px 18px;
     .icon {
       position: absolute;
-      left: 18Px;
-      top: 18Px;
+      left: 18px;
+      top: 18px;
     }
   }
-
   .main {
     flex: 1;
     flex-direction: column;
@@ -26,56 +23,47 @@
     border-radius: 0;
     border: none;
     box-shadow: none;
-    max-height: calc(100% - 54Px);
+    max-height: calc( 100% - 54px);
     padding: 0;
-
     .avatar {
       border-radius: 0;
     }
-
     .left {
       padding: 0;
       flex: 1;
       border: none;
       display: flex;
       flex-direction: column;
-
       header {
         position: sticky;
         top: 0;
-        padding: 0 18Px;
-
+        padding: 0 18px;
         input {
-          border-radius: 5Px;
-          font-size: 14Px;
+          border-radius: 5px;
+          font-size: 14px;
         }
       }
-
       .list {
-        padding: 0 18Px;
+        padding: 0 18px;
       }
     }
-
     .right {
       flex: 0;
       padding: 0;
       flex-direction: row;
       align-items: center;
-      box-shadow: inset 0 1Px 0 0 #eeeeee;
-      padding: 0 18Px 8Px;
-
+      box-shadow: inset 0 1px 0 0 #EEEEEE;
+      padding: 0 18px 8px;
       .list {
         flex-direction: row;
         width: 0;
       }
-
       footer {
-        padding: 6Px 0;
+        padding: 6px 0;
         display: flex;
         align-items: center;
-
         .btn {
-          font-size: 14Px;
+          font-size: 14px;
         }
       }
     }

src/TUIKit/TUIComponents/components/transfer/style/web.scss

@@ -1,17 +1,17 @@
 .main {
   box-sizing: border-box;
-  width: 620Px;
-  height: 394Px;
+  width: 620px;
+  height: 394px;
   display: flex;
-  border-radius: 8Px;
-  padding: 20Px 0;
+  border-radius: 8px;
+  padding: 20px 0;
 
   .right {
-    padding: 0 20Px;
+    padding: 0 20px;
     flex: 1;
 
     ul {
-      padding-right: 20Px;
+      padding-right: 20px;
     }
   }
 
@@ -22,13 +22,13 @@
     flex-direction: column;
 
     header {
-      padding: 0 20Px;
+      padding: 0 20px;
     }
 
     main {
       flex: 1;
       overflow-y: auto;
-      padding: 0 20Px;
+      padding: 0 20px;
     }
   }
 
@@ -40,7 +40,7 @@
       align-self: flex-end;
 
       .btn-cancel {
-        margin-right: 12Px;
+        margin-right: 12px;
       }
     }
 
@@ -50,17 +50,17 @@
   }
 
   header {
-    font-size: 14Px;
-    line-height: 14Px;
-    padding-bottom: 20Px;
+    font-size: 14px;
+    line-height: 14px;
+    padding-bottom: 20px;
 
     input {
       box-sizing: border-box;
       width: 100%;
-      border-radius: 30Px;
-      font-size: 10Px;
-      line-height: 14Px;
-      padding: 9Px 12Px;
+      border-radius: 30px;
+      font-size: 10px;
+      line-height: 14px;
+      padding: 9px 12px;
     }
   }
 
@@ -70,15 +70,15 @@
     flex-direction: column;
 
     p {
-      font-size: 10Px;
-      line-height: 14Px;
+      font-size: 10px;
+      line-height: 14px;
     }
 
     &-item {
-      padding: 6Px 0;
+      padding: 6px 0;
       display: flex;
       align-items: center;
-      font-size: 14Px;
+      font-size: 14px;
 
       aside {
         display: flex;
@@ -86,7 +86,7 @@
       }
 
       .avatar {
-        margin: 0 5Px 0 8Px;
+        margin: 0 5px 0 8px;
         border-radius: 50%;
       }
 
@@ -102,27 +102,27 @@
 
 img,
 .avatar {
-  width: 36Px;
-  height: 36Px;
-  border-radius: 4Px;
-  font-size: 12Px;
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  font-size: 12px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .btn {
-  padding: 4Px 28Px;
-  font-size: 12Px;
-  line-height: 24Px;
-  border-radius: 4Px;
+  padding: 4px 28px;
+  font-size: 12px;
+  line-height: 24px;
+  border-radius: 4px;
 }
 
 .btn-no {
-  padding: 4Px 28Px;
-  font-size: 12Px;
-  line-height: 24Px;
-  border-radius: 4Px;
+  padding: 4px 28px;
+  font-size: 12px;
+  line-height: 24px;
+  border-radius: 4px;
 }
 
 .space-between {
@@ -130,6 +130,6 @@ img,
 }
 
 .all {
-  padding-left: 8Px;
-  font-size: 14Px;
+  padding-left: 8px;
+  font-size: 14px;
 }

src/TUIKit/TUIComponents/container/TUIChat/components/message-audio.vue

@@ -3,12 +3,9 @@
     class="message-audio"
     :class="[data.message.flow === 'out' && 'reserve']"
     @click.stop="play"
-    :style="`width: ${data?.second * 10 + 40}Px`"
+    :style="`width: ${data?.second * 10 + 40}px`"
   >
-    <i
-      class="icon icon-voice"
-      :class="[data.message.flow === 'out' && 'icon-reserve']"
-    ></i>
+    <i class="icon icon-voice" :class="[data.message.flow === 'out' && 'icon-reserve']"></i>
     <label>{{ data.second }}s</label>
     <audio ref="audio" :src="data.url"></audio>
   </div>
@@ -21,13 +18,13 @@ export default defineComponent({
   props: {
     data: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
   setup(props: any, ctx: any) {
     const data = reactive({
       data: {},
-      show: false
+      show: false,
     });
 
     const audio = ref(null);
@@ -62,9 +59,9 @@ export default defineComponent({
     return {
       ...toRefs(data),
       audio,
-      play
+      play,
     };
-  }
+  },
 });
 </script>
 <style lang="scss" scoped>
@@ -78,7 +75,7 @@ export default defineComponent({
   max-width: 100%;
   overflow: hidden;
   .icon {
-    margin: 0 4Px;
+    margin: 0 4px;
   }
   audio {
     width: 0;

src/TUIKit/TUIComponents/container/TUIChat/components/message-bubble.vue

@@ -1,38 +1,19 @@
 <template>
-  <div
-    class="message-bubble"
-    :class="[message.flow === 'in' ? '' : 'reverse']"
-    ref="htmlRefHook"
-  >
+  <div class="message-bubble" :class="[message.flow === 'in' ? '' : 'reverse']" ref="htmlRefHook">
     <img
       class="avatar"
-      :src="
-        message?.avatar ||
-        'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
-      "
-      onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
+      :src="message?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+      onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
     />
     <main class="message-area">
-      <label
-        class="name"
-        v-if="message.flow === 'in' && message.conversationType === 'GROUP'"
-      >
+      <label class="name" v-if="message.flow === 'in' && message.conversationType === 'GROUP'">
         {{ message.nameCard || message.nick || message.from }}
       </label>
-      <div
-        :class="handleImageOrVideoBubbleStyle(message)"
-        @click.prevent.right="toggleDialog"
-      >
+      <div :class="handleImageOrVideoBubbleStyle(message)" @click.prevent.right="toggleDialog">
         <div
           class="message-replie-area"
-          :class="[
-            message?.flow === 'in' ? '' : 'message-replies-area-reverse'
-          ]"
-          v-if="
-            message?.cloudCustomData &&
-            referenceMessage &&
-            referenceMessage?.messageRootID
-          "
+          :class="[message?.flow === 'in' ? '' : 'message-replies-area-reverse']"
+          v-if="message?.cloudCustomData && referenceMessage && referenceMessage?.messageRootID"
           @click="showRepliesDialog(message, false)"
         >
           <MessageReference
@@ -47,28 +28,14 @@
         </div>
         <slot />
         <div v-if="dropdown" ref="dropdownRef" class="dropdown-inner">
-          <div
-            class="dialog"
-            :class="[message.flow === 'in' ? '' : 'dialog-right']"
-            @click="dropdown = false"
-          >
+          <div class="dialog" :class="[message.flow === 'in' ? '' : 'dialog-right']" @click="dropdown = false">
             <slot name="dialog" />
           </div>
         </div>
-        <MessageEmojiReact
-          :message="message"
-          type="content"
-          v-if="needEmojiReact && isEmojiReactionInMessage(message)"
-        />
+        <MessageEmojiReact :message="message" type="content" v-if="needEmojiReact && isEmojiReactionInMessage(message)" />
       </div>
     </main>
-    <label
-      class="message-label fail"
-      v-if="message.status === 'fail'"
-      @click="resendMessage(message)"
-    >
-      !
-    </label>
+    <label class="message-label fail" v-if="message.status === 'fail'" @click="resendMessage(message)">!</label>
     <label
       class="message-label"
       :class="readReceiptStyle(message)"
@@ -81,11 +48,7 @@
   <div
     class="message-reference-area"
     :class="[message.flow === 'in' ? '' : 'message-reference-area-reverse']"
-    v-if="
-      message?.cloudCustomData &&
-      referenceMessage &&
-      !referenceMessage?.messageRootID
-    "
+    v-if="message?.cloudCustomData && referenceMessage && !referenceMessage?.messageRootID"
     @click="jumpToAim(referenceMessage)"
   >
     <MessageReference
@@ -112,15 +75,7 @@
 <script lang="ts">
 import { decodeText } from '../utils/decodeText';
 import constant from '../../constant';
-import {
-  defineComponent,
-  watchEffect,
-  reactive,
-  toRefs,
-  ref,
-  nextTick,
-  watch
-} from 'vue';
+import { defineComponent, watchEffect, reactive, toRefs, ref, nextTick, watch } from 'vue';
 import { onClickOutside, onLongPress, useElementBounding } from '@vueuse/core';
 import { deepCopy, JSONToObject } from '../utils/utils';
 import { handleErrorPrompts } from '../../utils';
@@ -135,43 +90,37 @@ const messageBubble = defineComponent({
   props: {
     data: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     messagesList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     isH5: {
       type: Boolean,
-      default: false
+      default: false,
     },
     needGroupReceipt: {
       type: Boolean,
-      default: false
+      default: false,
     },
     needReplies: {
       type: Boolean,
-      default: true
+      default: true,
     },
     flow: {
       type: String,
-      default: ''
+      default: '',
     },
     needEmojiReact: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
-  emits: [
-    'jumpID',
-    'resendMessage',
-    'showReadReceiptDialog',
-    'showRepliesDialog',
-    'dropDownOpen'
-  ],
+  emits: ['jumpID', 'resendMessage', 'showReadReceiptDialog', 'showRepliesDialog', 'dropDownOpen'],
   components: {
     MessageReference,
-    MessageEmojiReact
+    MessageEmojiReact,
   },
   setup(props: any, ctx: any) {
     const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
@@ -190,7 +139,7 @@ const messageBubble = defineComponent({
       replies: [],
       face: [],
       url: '',
-      needEmojiReact: false
+      needEmojiReact: false,
     });
 
     watchEffect(() => {
@@ -198,47 +147,26 @@ const messageBubble = defineComponent({
       data.messagesList = props.messagesList;
       data.needEmojiReact = props.needEmojiReact;
       data.message = deepCopy(
-        data.messagesList?.find(
-          (item: any) => (item as any)?.ID === props.message?.ID
-        ) || props.data
+        data.messagesList?.find((item: any) => (item as any)?.ID === props.message?.ID) || props.data
       );
       data.needGroupReceipt = props.needGroupReceipt;
       data.needReplies = props.needReplies;
       if ((data.message as any).cloudCustomData) {
         const messageIDList: any[] = [];
-        const cloudCustomData = JSONToObject(
-          (data.message as any).cloudCustomData
-        );
+        const cloudCustomData = JSONToObject((data.message as any).cloudCustomData);
         data.replies = cloudCustomData?.messageReplies?.replies || [];
-        data.referenceMessage = cloudCustomData.messageReply
-          ? cloudCustomData.messageReply
-          : '';
-        for (
-          let index = 0;
-          index < (data.messagesList as any).length;
-          index++
-        ) {
+        data.referenceMessage = cloudCustomData.messageReply ? cloudCustomData.messageReply : '';
+        for (let index = 0; index < (data.messagesList as any).length; index++) {
           // To determine whether the referenced message is still in the message list, the corresponding field of the referenced message is displayed if it is in the message list. Otherwise, messageabstract/messagesender is displayed
           messageIDList.push((data.messagesList as any)[index].ID);
           (data as any).allMessageID = JSON.stringify(messageIDList);
-          if (
-            (data.messagesList as any)[index].ID ===
-            (data.referenceMessage as any)?.messageID
-          ) {
+          if ((data.messagesList as any)[index].ID === (data.referenceMessage as any)?.messageID) {
             data.referenceForShow = (data.messagesList as any)[index];
-            if (
-              (data.referenceMessage as any).messageType === constant.typeText
-            ) {
-              (data as any).face = decodeText(
-                (data.referenceForShow as any).payload
-              );
+            if ((data.referenceMessage as any).messageType === constant.typeText) {
+              (data as any).face = decodeText((data.referenceForShow as any).payload);
             }
-            if (
-              (data.referenceMessage as any).messageType === constant.typeFace
-            ) {
-              (
-                data as any
-              ).url = `https://web.sdk.qcloud.com/im/assets/face-elem/${
+            if ((data.referenceMessage as any).messageType === constant.typeFace) {
+              (data as any).url = `https://web.sdk.qcloud.com/im/assets/face-elem/${
                 (data.referenceForShow as any).payload.data
               }@2x.png`;
             }
@@ -259,91 +187,66 @@ const messageBubble = defineComponent({
         ctx.emit('dropDownOpen', dropdownRef);
         nextTick(() => {
           const dialogDom = (dropdownRef as any)?.value?.children[0];
-          const dialogElement = document.getElementsByClassName(
-            'dialog-item'
-          )[0] as HTMLElement;
+          const dialogElement = document.getElementsByClassName('dialog-item')[0] as HTMLElement;
           const parentDom = (dropdownRef as any)?.value?.offsetParent;
           const parentBound = useElementBounding(parentDom);
-          const messageListDom = document.getElementById(
-            'messageEle'
-          ) as HTMLElement;
+          const messageListDom = document.getElementById('messageEle') as HTMLElement;
           const messageListBound = useElementBounding(messageListDom);
           const leftRange = messageListBound?.left?.value;
           const rightRange =
-            messageListBound?.left?.value +
-            (messageListDom as any).clientWidth -
-            dialogDom.clientWidth +
-            76;
+            messageListBound?.left?.value + (messageListDom as any).clientWidth - dialogDom.clientWidth + 76;
           const topRange = messageListBound?.top?.value;
           const bottomRange =
-            messageListBound?.top?.value +
-            (messageListDom as any).clientHeight -
-            dialogDom.clientHeight;
+            messageListBound?.top?.value + (messageListDom as any).clientHeight - dialogDom.clientHeight;
           const { clientX, clientY } = e;
           if (data?.env?.isH5) {
             if (parentBound?.top?.value <= dialogElement?.clientHeight) {
-              dialogDom.style.bottom = `-${dialogElement?.clientHeight}Px`;
+              dialogDom.style.bottom = `-${dialogElement?.clientHeight}px`;
             } else {
               if (data?.message?.flow === 'in') {
-                dialogDom.style.top = `-${dialogElement?.clientHeight - 20}Px`;
+                dialogDom.style.top = `-${dialogElement?.clientHeight - 20}px`;
               } else {
-                dialogDom.style.top = `-${dialogElement?.clientHeight}Px`;
+                dialogDom.style.top = `-${dialogElement?.clientHeight}px`;
               }
             }
-            const centerWidth =
-              parentBound?.left?.value + parentBound?.width?.value / 2;
+            const centerWidth = parentBound?.left?.value + parentBound?.width?.value / 2;
             if (
               centerWidth > dialogElement.clientWidth / 2 &&
-              centerWidth <
-                messageListDom?.clientWidth - dialogElement.clientWidth / 2
+              centerWidth < messageListDom?.clientWidth - dialogElement.clientWidth / 2
             ) {
-              dialogDom.style.left = 'calc(50% - 135Px)';
+              dialogDom.style.left = 'calc(50% - 135px)';
             } else if (centerWidth <= dialogElement.clientWidth / 2) {
-              dialogDom.style.left = '-20Px';
+              dialogDom.style.left = '-20px';
             } else {
-              dialogDom.style.left = `-${dialogElement.clientWidth / 2 + 10}Px`;
+              dialogDom.style.left = `-${dialogElement.clientWidth / 2 + 10}px`;
             }
             return;
           }
           switch (true) {
             case clientX > leftRange && clientX < rightRange:
-              dialogDom.style.left = `${Math.max(
-                e.clientX - parentBound?.left?.value - 76,
-                -40
-              )}Px`;
+              dialogDom.style.left = `${Math.max(e.clientX - parentBound?.left?.value - 76, -40)}px`;
               break;
             case clientX <= leftRange:
-              dialogDom.style.left = '20Px';
+              dialogDom.style.left = '20px';
               break;
             case clientX >= rightRange:
               dialogDom.style.right = `${Math.max(
-                parentBound?.left?.value +
-                  parentDom?.clientWidth -
-                  e.clientX -
-                  256,
+                parentBound?.left?.value + parentDom?.clientWidth - e.clientX - 256,
                 -10
-              )}Px`;
+              )}px`;
               break;
           }
           switch (true) {
             case clientY > topRange && clientY < bottomRange:
-              dialogDom.style.top = `${e.clientY - parentBound?.top?.value}Px`;
-              dialogDom.style.cssText = dialogDom.style.cssText.replace(
-                'align-items:end;',
-                ''
-              );
+              dialogDom.style.top = `${e.clientY - parentBound?.top?.value}px`;
+              dialogDom.style.cssText = dialogDom.style.cssText.replace('align-items:end;', '');
               break;
             case clientY <= topRange:
-              dialogDom.style.top = '0Px';
-              dialogDom.style.cssText = dialogDom.style.cssText.replace(
-                'align-items:end;',
-                ''
-              );
+              dialogDom.style.top = '0px';
+              dialogDom.style.cssText = dialogDom.style.cssText.replace('align-items:end;', '');
               break;
             case clientY >= bottomRange:
-              dialogDom.style.bottom = `${
-                parentBound?.top?.value + parentDom?.clientHeight - e.clientY
-              }Px`;
+              dialogDom.style.bottom = `${parentBound?.top?.value + parentDom?.clientHeight - e.clientY}px`;
               dialogDom.style.cssText += 'align-items:end;';
               break;
           }
@@ -379,11 +282,7 @@ const messageBubble = defineComponent({
     };
 
     const showReadReceiptTag = (message: any) => {
-      if (
-        message.flow === 'out' &&
-        message.status === 'success' &&
-        message.needReadReceipt
-      ) {
+      if (message.flow === 'out' && message.status === 'success' && message.needReadReceipt) {
         return true;
       }
       return false;
@@ -392,8 +291,7 @@ const messageBubble = defineComponent({
     const readReceiptStyle = (message: any) => {
       if (
         message?.readReceiptInfo?.isPeerRead ||
-        (message?.readReceiptInfo?.isPeerRead === undefined &&
-          message?.isPeerRead) ||
+        (message?.readReceiptInfo?.isPeerRead === undefined && message?.isPeerRead) ||
         message?.readReceiptInfo?.unreadCount === 0
       ) {
         return '';
@@ -406,8 +304,7 @@ const messageBubble = defineComponent({
         case TUIServer.TUICore.TIM.TYPES.CONV_C2C:
           if (
             message?.readReceiptInfo?.isPeerRead ||
-            (message?.readReceiptInfo?.isPeerRead === undefined &&
-              message?.isPeerRead)
+            (message?.readReceiptInfo?.isPeerRead === undefined && message?.isPeerRead)
           ) {
             return t('TUIChat.已读');
           }
@@ -418,8 +315,7 @@ const messageBubble = defineComponent({
           }
           if (
             message.readReceiptInfo.readCount === 0 ||
-            (message.readReceiptInfo.unreadCount === undefined &&
-              message.readReceiptInfo.readCount === undefined)
+            (message.readReceiptInfo.unreadCount === undefined && message.readReceiptInfo.readCount === undefined)
           ) {
             return t('TUIChat.未读');
           }
@@ -440,8 +336,7 @@ const messageBubble = defineComponent({
       }
       if ((data.referenceMessage as any)?.messageRootID) {
         const message = data.messagesList?.find(
-          (item: Message) =>
-            item.ID === (data.referenceMessage as any)?.messageRootID
+          (item: Message) => item.ID === (data.referenceMessage as any)?.messageRootID
         );
         if (message) {
           ctx.emit('showRepliesDialog', message, 'replies');
@@ -457,16 +352,10 @@ const messageBubble = defineComponent({
       const classNameList = ['content'];
       if (!message) return classNameList;
       classNameList.push(`content-${data.message.flow}`);
-      if (
-        data.message.type === TIM.TYPES.MSG_IMAGE &&
-        !isEmojiReactionInMessage(message)
-      ) {
+      if (data.message.type === TIM.TYPES.MSG_IMAGE && !isEmojiReactionInMessage(message)) {
         classNameList.push('content-image');
       }
-      if (
-        data.message.type === TIM.TYPES.MSG_VIDEO &&
-        !isEmojiReactionInMessage(message)
-      ) {
+      if (data.message.type === TIM.TYPES.MSG_VIDEO && !isEmojiReactionInMessage(message)) {
         classNameList.push('content-video');
       }
       return classNameList;
@@ -475,8 +364,7 @@ const messageBubble = defineComponent({
     const isEmojiReactionInMessage = (message: Message) => {
       try {
         if (!message?.cloudCustomData) return;
-        const reactList = JSONToObject(message?.cloudCustomData)?.messageReact
-          ?.reacts;
+        const reactList = JSONToObject(message?.cloudCustomData)?.messageReact?.reacts;
         if (!reactList || Object.keys(reactList).length === 0) return false;
         return true;
       } catch (err) {
@@ -500,9 +388,9 @@ const messageBubble = defineComponent({
       showRepliesDialog,
       handleImageOrVideoBubbleStyle,
       isEmojiReactionInMessage,
-      TIM
+      TIM,
     };
-  }
+  },
 });
 export default messageBubble;
 </script>
@@ -514,17 +402,17 @@ export default messageBubble;
   justify-content: flex-start;
 }
 .avatar {
-  width: 36Px;
-  height: 36Px;
-  border-radius: 5Px;
+  width: 36px;
+  height: 36px;
+  border-radius: 5px;
 }
 .message-bubble {
   width: 100%;
   display: flex;
-  padding-bottom: 5Px;
+  padding-bottom: 5px;
 }
 .line-left {
-  border: 1Px solid rgba(0, 110, 255, 0.5);
+  border: 1px solid rgba(0, 110, 255, 0.5);
 }
 .message-reference-area {
   display: flex;
@@ -532,14 +420,14 @@ export default messageBubble;
   border-radius: 0.5rem;
   border-radius: 0.63rem;
   align-self: start;
-  margin-left: 44Px;
-  margin-right: 8Px;
+  margin-left: 44px;
+  margin-right: 8px;
   &-show {
     width: 100%;
     display: flex;
     flex-direction: inherit;
     justify-content: center;
-    padding: 6Px;
+    padding: 6px;
     p {
       font-family: PingFangSC-Regular;
       font-weight: 400;
@@ -547,7 +435,7 @@ export default messageBubble;
       color: #999999;
       letter-spacing: 0;
       word-break: keep-all;
-      padding-right: 5Px;
+      padding-right: 5px;
     }
     span {
       height: 1.25rem;
@@ -563,27 +451,27 @@ export default messageBubble;
 .message-replies {
   display: flex;
   align-self: start;
-  margin-left: 44Px;
-  margin-right: 8Px;
-  padding: 2Px;
+  margin-left: 44px;
+  margin-right: 8px;
+  padding: 2px;
   color: #999999;
-  font-size: 10Px;
+  font-size: 10px;
   i {
-    margin: 4Px;
+    margin: 4px;
   }
   span {
-    line-height: 20Px;
+    line-height: 20px;
   }
 }
 .message-reference-area-reverse,
 .message-replies-reverse {
   align-self: end;
-  margin-right: 44Px;
-  margin-left: 8Px;
+  margin-right: 44px;
+  margin-left: 8px;
 }
 .message-img {
-  max-width: min(calc(100vw - 180Px), 300Px);
-  max-height: min(calc(100vw - 180Px), 300Px);
+  max-width: min(calc(100vw - 180px), 300px);
+  max-height: min(calc(100vw - 180px), 300px);
 }
 .message-video-cover {
   display: inline-block;
@@ -592,10 +480,10 @@ export default messageBubble;
     position: absolute;
     z-index: 1;
     content: '';
-    width: 0Px;
-    height: 0Px;
-    border: 15Px solid transparent;
-    border-left: 20Px solid #ffffff;
+    width: 0px;
+    height: 0px;
+    border: 15px solid transparent;
+    border-left: 20px solid #ffffff;
     top: 0;
     left: 0;
     bottom: 0;
@@ -604,24 +492,24 @@ export default messageBubble;
   }
 }
 .message-videoimg {
-  max-width: min(calc(100vw - 160Px), 300Px);
-  max-height: min(calc(100vw - 160Px), 300Px);
+  max-width: min(calc(100vw - 160px), 300px);
+  max-height: min(calc(100vw - 160px), 300px);
 }
 .face-box {
   display: flex;
   align-items: center;
 }
 .text-img {
-  width: 20Px;
-  height: 20Px;
+  width: 20px;
+  height: 20px;
 }
 .message-audio {
-  padding-left: 10Px;
+  padding-left: 10px;
   display: flex;
   align-items: center;
   position: relative;
   .icon {
-    margin: 0 4Px;
+    margin: 0 4px;
   }
   audio {
     width: 0;
@@ -632,22 +520,22 @@ export default messageBubble;
   flex-direction: row-reverse;
 }
 .message-area {
-  max-width: calc(100% - 54Px);
+  max-width: calc(100% - 54px);
   position: relative;
   display: flex;
   flex-direction: column;
-  padding: 0 8Px;
+  padding: 0 8px;
   .name {
-    padding-bottom: 4Px;
+    padding-bottom: 4px;
     font-weight: 400;
     font-size: 0.8rem;
     color: #999999;
     letter-spacing: 0;
   }
   .reference-content {
-    padding: 12Px;
+    padding: 12px;
     font-weight: 400;
-    font-size: 14Px;
+    font-size: 14px;
     color: burlywood;
     letter-spacing: 0;
     word-wrap: break-word;
@@ -677,9 +565,9 @@ export default messageBubble;
     }
   }
   .content {
-    padding: 12Px;
+    padding: 12px;
     font-weight: 400;
-    font-size: 14Px;
+    font-size: 14px;
     color: #000000;
     letter-spacing: 0;
     word-wrap: break-word;
@@ -687,22 +575,22 @@ export default messageBubble;
     width: fit-content;
     &-in {
       background: #fbfbfb;
-      border-radius: 0Px 10Px 10Px 10Px;
+      border-radius: 0px 10px 10px 10px;
     }
     &-out {
       background: #dceafd;
-      border-radius: 10Px 0Px 10Px 10Px;
+      border-radius: 10px 0px 10px 10px;
     }
     &-image {
-      padding: 0Px;
+      padding: 0px;
       height: fit-content;
-      border-radius: 10Px 0Px 10Px 10Px;
+      border-radius: 10px 0px 10px 10px;
     }
     &-video {
-      padding: 0Px;
+      padding: 0px;
       height: fit-content;
       background: transparent;
-      border-radius: 10Px;
+      border-radius: 10px;
     }
   }
 }
@@ -710,14 +598,14 @@ export default messageBubble;
   align-self: flex-end;
   font-family: PingFangSC-Regular;
   font-weight: 400;
-  font-size: 12Px;
+  font-size: 12px;
   color: #b6b8ba;
   word-break: keep-all;
 }
 .fail {
-  width: 15Px;
-  height: 15Px;
-  border-radius: 15Px;
+  width: 15px;
+  height: 15px;
+  border-radius: 15px;
   background: red;
   color: #ffffff;
   display: flex;

src/TUIKit/TUIComponents/container/TUIChat/components/message-custom.vue

@@ -172,45 +172,45 @@ a {
   color: #679ce1;
 }
 .custom {
-  font-size: 14Px;
+  font-size: 14px;
   h1 {
-    font-size: 14Px;
+    font-size: 14px;
     color: #000000;
   }
   h1,
   a,
   p {
-    font-size: 14Px;
+    font-size: 14px;
   }
   .evaluate {
     ul {
       display: flex;
-      padding-top: 10Px;
+      padding-top: 10px;
     }
   }
   .order {
     display: flex;
     main {
-      padding-left: 5Px;
+      padding-left: 5px;
       p {
         font-family: PingFangSC-Regular;
-        width: 145Px;
-        line-height: 17Px;
-        font-size: 14Px;
+        width: 145px;
+        line-height: 17px;
+        font-size: 14px;
         color: #999999;
         letter-spacing: 0;
-        margin-bottom: 6Px;
+        margin-bottom: 6px;
         word-break: break-word;
       }
       span {
         font-family: PingFangSC-Regular;
-        line-height: 25Px;
+        line-height: 25px;
         color: #ff7201;
       }
     }
     img {
-      width: 67Px;
-      height: 67Px;
+      width: 67px;
+      height: 67px;
     }
   }
   .call {

src/TUIKit/TUIComponents/container/TUIChat/components/message-emoji-react.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="dialog-emoji"
-    :class="env?.isH5 ? 'dialog-emoji-h5' : ''"
-    v-if="type === 'dropdown'"
-  >
+  <div class="dialog-emoji" :class="env?.isH5?'dialog-emoji-h5':''" v-if="type === 'dropdown'">
     <div class="face-list collapse">
       <ul class="face-list-collapse">
         <li
@@ -16,10 +12,7 @@
         </li>
       </ul>
       <div class="face-list-button" @click.stop="isCollapse = !isCollapse">
-        <i
-          class="icon"
-          :class="[isCollapse ? 'icon-expand' : 'icon-collapse']"
-        ></i>
+        <i class="icon" :class="[isCollapse ? 'icon-expand' : 'icon-collapse']"></i>
       </div>
     </div>
     <ul class="face-list face-list-expand" v-show="!isCollapse">
@@ -51,16 +44,7 @@
   </div>
 </template>
 <script lang="ts">
-import {
-  defineComponent,
-  watch,
-  reactive,
-  toRefs,
-  computed,
-  ref,
-  onMounted,
-  nextTick
-} from 'vue';
+import { defineComponent, watch, reactive, toRefs, computed, ref, onMounted, nextTick } from 'vue';
 import TIM from '../../../../TUICore/tim';
 import { emojiUrl, emojiMap, emojiName } from '../utils/emojiMap';
 import { JSONToObject } from '../utils/utils';
@@ -70,16 +54,16 @@ export default defineComponent({
   props: {
     message: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     emojiList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     type: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
   },
   emits: ['handleCollapse'],
   setup(props: any, ctx: any) {
@@ -94,7 +78,7 @@ export default defineComponent({
       env: TUIServer.TUICore.TUIEnv,
       type: props.type,
       emojiReacts: {},
-      allMemberList: []
+      allMemberList: [],
     });
 
     const container = ref({} as HTMLElement);
@@ -114,8 +98,7 @@ export default defineComponent({
     const handleEmojiReact = (message: any) => {
       try {
         if (!message?.cloudCustomData) return;
-        const reactList = JSONToObject(message?.cloudCustomData)?.messageReact
-          ?.reacts;
+        const reactList = JSONToObject(message?.cloudCustomData)?.messageReact?.reacts;
         if (!reactList) return;
         data.emojiReacts = reactList;
         return reactList;
@@ -127,9 +110,7 @@ export default defineComponent({
     const handleEmojiReactItem = (userIDList: any) => {
       let res = '';
       userIDList?.forEach((item: any, index: any) => {
-        const memberInfo = data.allMemberList?.find(
-          (member: any) => member.userID === item
-        );
+        const memberInfo = data.allMemberList?.find((member: any) => member.userID === item);
         res = res + (memberInfo ? (memberInfo as any)?.nick : item) + ', ';
       });
       if (res.length) res = res.substring(0, res.lastIndexOf(','));
@@ -143,12 +124,12 @@ export default defineComponent({
           data.allMemberList = [
             {
               userID: TUIChatStore?.conversation?.userProfile?.userID,
-              nick: TUIChatStore?.conversation?.userProfile?.nick
+              nick: TUIChatStore?.conversation?.userProfile?.nick,
             },
             {
               userID: TUIChatStore?.selfInfo?.userID,
-              nick: TUIChatStore?.selfInfo?.nick
-            }
+              nick: TUIChatStore?.selfInfo?.nick,
+            },
           ] as any;
           break;
         case TIM.TYPES.CONV_GROUP:
@@ -171,13 +152,13 @@ export default defineComponent({
     );
 
     watch(
-      () => data.isCollapse,
+      ()=>data.isCollapse,
       (newVal, oldVal) => {
         if (newVal === oldVal) return;
         if (!data?.env?.isH5) return;
         ctx.emit('handleCollapse', newVal);
       }
-    );
+    )
 
     return {
       ...toRefs(data),
@@ -186,35 +167,35 @@ export default defineComponent({
       select,
       handleEmojiReact,
       handleEmojiReactItem,
-      container
+      container,
     };
-  }
+  },
 });
 </script>
 <style lang="scss" scoped>
 @import url('../../../styles/common.scss');
 @import url('../../../styles/icon.scss');
 .dialog-emoji {
-  margin-left: 2Px;
+  margin-left: 2px;
   background: #ffffff;
-  border: 1Px solid #e0e0e0;
-  box-shadow: 0 4Px 12Px 0 rgba(0, 0, 0, 0.06);
-  width: 242Px;
-  min-height: 28Px;
+  border: 1px solid #e0e0e0;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
+  width: 242px;
+  min-height: 28px;
   height: fit-content;
-  padding: 2Px 6Px;
+  padding: 2px 6px;
   word-break: keep-all;
-  top: 30Px;
-  border-radius: 8Px;
-  &-h5 {
-    margin: 0 5Px;
+  top: 30px;
+  border-radius: 8px;
+  &-h5{
+    margin: 0 5px;
     border: none;
-    border-bottom: 1Px solid #e0e0e0;
+    border-bottom: 1px solid #e0e0e0;
     box-shadow: none;
-    border-radius: 10Px 10Px 0 0;
+    border-radius: 10px 10px 0 0;
   }
   .collapse {
-    padding: 2Px 0Px;
+    padding: 2px 0px;
   }
   .face-list {
     display: flex;
@@ -230,17 +211,17 @@ export default defineComponent({
       flex: 1;
     }
     &-expand {
-      border-top: 1Px solid #e0e0e0;
+      border-top: 1px solid #e0e0e0;
       display: flex;
       overflow-x: hidden;
       flex-wrap: wrap;
-      max-height: 90Px;
+      max-height: 90px;
       overflow-y: auto;
     }
     &-button {
-      padding: 5Px 7Px;
-      height: 20Px;
-      line-height: 20Px;
+      padding: 5px 7px;
+      height: 20px;
+      line-height: 20px;
       text-align: center;
       align-items: center;
       i {
@@ -248,50 +229,50 @@ export default defineComponent({
       }
     }
     li {
-      margin: 4Px;
+      margin: 4px;
       display: flex;
       flex-direction: row;
       align-items: center;
       flex-direction: row;
       img {
-        width: 22Px;
-        height: 22Px;
+        width: 22px;
+        height: 22px;
       }
     }
   }
 }
 .emoji-content {
   .emoji-react {
-    margin-top: 3Px;
+    margin-top: 3px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
     &-item {
       width: fit-content;
-      height: 20Px;
+      height: 20px;
       background: rgba(0, 0, 0, 0.05);
-      border-radius: 12Px;
-      padding: 2Px 6Px;
-      margin: 2Px;
+      border-radius: 12px;
+      padding: 2px 6px;
+      margin: 2px;
       overflow: hidden;
       text-overflow: ellipsis;
-      max-width: 200Px;
+      max-width: 200px;
       display: flex;
       img {
-        width: 16Px;
-        height: 16Px;
-        padding: 2Px;
+        width: 16px;
+        height: 16px;
+        padding: 2px;
       }
       &-content {
         overflow: hidden;
         text-overflow: ellipsis;
-        font-size: 10Px;
+        font-size: 10px;
         color: #999999;
         align-self: center;
         span {
-          margin: 2Px;
-          font-size: 10Px;
+          margin: 2px;
+          font-size: 10px;
           color: #999999;
           overflow: hidden;
           text-overflow: ellipsis;

src/TUIKit/TUIComponents/container/TUIChat/components/message-face.vue

@@ -1,47 +1,34 @@
 <template>
   <div class="message-image" ref="skeleton">
-    <img
-      class="message-img"
-      :src="data.url"
-      :style="
+    <img class="message-img" :src="data.url" :style="
         isH5
           ? {
-              maxWidth: data.width ? data.width + 'Px' : 'calc(100vw - 180Px)',
-              maxHeight: data.height
-                ? data.height + 'Px'
-                : 'calc(100vw - 180Px)'
+              maxWidth: data.width ? data.width + 'px' : 'calc(100vw - 180px)',
+              maxHeight: data.height ? data.height + 'px' : 'calc(100vw - 180px)',
             }
           : {}
-      "
-    />
+      "/>
   </div>
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  watchEffect,
-  reactive,
-  toRefs,
-  nextTick,
-  ref
-} from 'vue';
+import { defineComponent, watchEffect, reactive, toRefs, nextTick, ref } from 'vue';
 import { handleSkeletonSize } from '../utils/utils';
 
 export default defineComponent({
   props: {
     data: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     isH5: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   setup(props: any, ctx: any) {
     const data = reactive({
-      data: {}
+      data: {},
     });
 
     const skeleton: any = ref();
@@ -50,32 +37,29 @@ export default defineComponent({
       data.data = props.data;
       if (!data.data) return;
       nextTick(() => {
-        const containerWidth =
-          document.getElementById('messageEle')?.clientWidth || 0;
+        const containerWidth = document.getElementById('messageEle')?.clientWidth || 0;
         const max = props.isH5 ? Math.min(containerWidth - 172, 300) : 300;
         const size = handleSkeletonSize(240, 240, max, max);
-        skeleton?.value?.style &&
-          (skeleton.value.style.width = `${size.width}Px`);
-        skeleton?.value?.style &&
-          (skeleton.value.style.height = `${size.height}Px`);
+        skeleton?.value?.style && (skeleton.value.style.width = `${size.width}px`);
+        skeleton?.value?.style && (skeleton.value.style.height = `${size.height}px`);
       });
     });
     return {
       ...toRefs(data),
-      skeleton
+      skeleton,
     };
-  }
+  },
 });
 </script>
 <style lang="scss" scoped>
 @import url('../../../styles/common.scss');
 @import url('../../../styles/icon.scss');
 .text-img {
-  width: 20Px;
-  height: 20Px;
+  width: 20px;
+  height: 20px;
 }
 .message-img {
-  max-width: min(calc(100vw - 180Px), 300Px);
-  max-height: min(calc(100vw - 180Px), 300Px);
+  max-width: min(calc(100vw - 180px), 300px);
+  max-height: min(calc(100vw - 180px), 300px);
 }
 </style>

src/TUIKit/TUIComponents/container/TUIChat/components/message-image.vue

@@ -8,10 +8,10 @@
       :style="
         isH5
           ? {
-              maxWidth: data.width ? data.width + 'Px' : 'calc(100vw - 180Px)',
+              maxWidth: data.width ? data.width + 'px' : 'calc(100vw - 180px)',
               maxHeight: data.height
-                ? data.height + 'Px'
-                : 'calc(100vw - 180Px)'
+                ? data.height + 'px'
+                : 'calc(100vw - 180px)'
             }
           : {}
       "
@@ -98,9 +98,9 @@ export default defineComponent({
           const max = props.isH5 ? Math.min(containerWidth - 180, 300) : 300;
           const size = handleSkeletonSize(width, height, max, max);
           skeleton?.value?.style &&
-            (skeleton.value.style.width = `${size.width}Px`);
+            (skeleton.value.style.width = `${size.width}px`);
           skeleton?.value?.style &&
-            (skeleton.value.style.height = `${size.height}Px`);
+            (skeleton.value.style.height = `${size.height}px`);
         } else {
           ctx.emit('uploading');
         }
@@ -155,8 +155,8 @@ export default defineComponent({
   overflow: hidden;
   opacity: 1;
   .message-img {
-    max-width: min(calc(100vw - 180Px), 300Px);
-    max-height: min(calc(100vw - 180Px), 300Px);
+    max-width: min(calc(100vw - 180px), 300px);
+    max-height: min(calc(100vw - 180px), 300px);
     width: inherit;
     height: inherit;
   }
@@ -165,7 +165,7 @@ export default defineComponent({
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-    padding: 0 20Px;
+    padding: 0 20px;
     left: 0;
     top: 0;
     background: rgba(#000000, 0.5);
@@ -211,7 +211,7 @@ export default defineComponent({
     background: rgba(0, 0, 0, 0.49);
     width: 100%;
     box-sizing: border-box;
-    padding: 10Px 10Px;
+    padding: 10px 10px;
   }
   &-box {
     display: flex;
@@ -227,12 +227,12 @@ export default defineComponent({
   width: 100%;
   height: 100%;
   background: #000000;
-  padding: 30Px 0;
+  padding: 30px 0;
   display: flex;
   flex-direction: column;
   &-footer {
     position: fixed;
-    bottom: 10Px;
+    bottom: 10px;
     display: flex;
     width: 90vw;
     justify-content: space-between;
@@ -244,7 +244,7 @@ export default defineComponent({
       width: 100%;
     }
     i {
-      padding: 20Px;
+      padding: 20px;
     }
   }
 }

src/TUIKit/TUIComponents/container/TUIChat/components/message-merger.vue

@@ -1,16 +1,12 @@
 <template>
   <div class="message-merger">
     <div class="merger-box" :data-value="data.message">
-      <p class="merger-title">{{ data.title }}</p>
-      <p
-        class="merger-text"
-        v-for="(item, index) in data.abstractList"
-        :key="index"
-      >
-        {{ item }}
-      </p>
+        <p class="merger-title">{{data.title}}</p>
+        <p class="merger-text" v-for="(item, index) in data.abstractList" :key="index">
+            {{item}}
+        </p>
     </div>
-    <span class="merger-label">聊天记录</span>
+    <span class="merger-label"> 聊天记录</span>
   </div>
 </template>
 
@@ -21,21 +17,21 @@ export default defineComponent({
   props: {
     data: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
-  setup(props: any, ctx: any) {
+  setup(props:any, ctx:any) {
     const data = reactive({
-      data: {}
+      data: {},
     });
 
     watchEffect(() => {
       data.data = props.data;
     });
     return {
-      ...toRefs(data)
+      ...toRefs(data),
     };
-  }
+  },
 });
 </script>
 <style lang="scss" scoped>
@@ -45,9 +41,9 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   .merger-label {
-    border-top: 1Px solid #dddddd;
-    margin-top: 10Px;
-    padding-top: 5Px;
+      border-top: 1px solid #dddddd;
+      margin-top: 10px;
+      padding-top: 5px;
   }
 }
 </style>

src/TUIKit/TUIComponents/container/TUIChat/components/message-reference.vue

@@ -1,61 +1,35 @@
 <template>
   <div
-    v-if="
-      referenceMessage?.messageID &&
-      allMessageID.indexOf(referenceMessage.messageID) !== -1
-    "
+    v-if="referenceMessage?.messageID && allMessageID.indexOf(referenceMessage.messageID) !== -1"
     :class="`${type} ${message.flow === 'in' && type + '-reverse'}`"
   >
     <p class="message-reference-user">
-      <span class="nick">
-        {{ referenceForShow.nick || referenceForShow.from }}
-      </span>
+      <span class="nick">{{ referenceForShow.nick || referenceForShow.from }}</span>
       <span class="colon">{{ type === 'reference' ? ':' : '' }}</span>
     </p>
-    <div
-      class="face-box"
-      v-if="referenceMessage.messageType === constant.typeText"
-    >
+    <div class="face-box" v-if="referenceMessage.messageType === constant.typeText">
       <div v-for="(item, index) in face" :key="index">
-        <span class="text-box" v-if="item.name === 'text'">
-          {{ item.text }}
-        </span>
+        <span class="text-box" v-if="item.name === 'text'">{{ item.text }}</span>
         <img class="text-img" v-else-if="item.name === 'img'" :src="item.src" />
       </div>
     </div>
-    <span v-if="referenceMessage.messageType === constant.typeCustom">
-      {{ referenceMessage.messageAbstract }}
-    </span>
+    <span v-if="referenceMessage.messageType === constant.typeCustom">{{ referenceMessage.messageAbstract }}</span>
     <img
       v-if="referenceMessage.messageType === constant.typeImage"
       class="message-img"
       :src="referenceForShow.payload.imageInfoArray[1].url"
     />
-    <div
-      v-if="referenceMessage.messageType === constant.typeVideo"
-      class="message-video-cover"
-    >
+    <div v-if="referenceMessage.messageType === constant.typeVideo" class="message-video-cover">
       <img
         class="message-videoimg"
-        :src="
-          referenceForShow?.payload?.snapshotUrl ||
-          referenceForShow?.payload?.thumbUrl
-        "
+        :src="referenceForShow?.payload?.snapshotUrl || referenceForShow?.payload?.thumbUrl"
       />
     </div>
-    <img
-      v-if="referenceMessage.messageType === constant.typeFace"
-      class="message-img"
-      :src="url"
-    />
+    <img v-if="referenceMessage.messageType === constant.typeFace" class="message-img" :src="url" />
     <span
-      v-if="
-        referenceMessage.messageType === constant.typeFile ||
-        referenceMessage.messageType === constant.typeAudio
-      "
+      v-if="referenceMessage.messageType === constant.typeFile || referenceMessage.messageType === constant.typeAudio"
+      >{{ referenceMessage?.messageAbstract }}</span
     >
-      {{ referenceMessage?.messageAbstract }}
-    </span>
   </div>
   <div v-else :class="`${type} ${message.flow === 'in' && type + '-reverse'}`">
     <p>{{ referenceMessage?.messageSender }}</p>
@@ -70,32 +44,32 @@ const MessageReference = defineComponent({
   props: {
     message: {
       type: Object,
-      default: {} as Message
+      default: {} as Message,
     },
     referenceMessage: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     referenceForShow: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     face: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     url: {
       type: String,
-      default: ''
+      default: '',
     },
     allMessageID: {
       type: String,
-      default: ''
+      default: '',
     },
     type: {
       type: String,
-      deafault: ''
-    }
+      deafault: '',
+    },
   },
   setup(props: any, ctx: any) {
     const data = reactive({
@@ -105,7 +79,7 @@ const MessageReference = defineComponent({
       allMessageID: '',
       face: [],
       url: '',
-      type: ''
+      type: '',
     });
     watchEffect(() => {
       data.message = props.message;
@@ -122,14 +96,14 @@ const MessageReference = defineComponent({
         data.referenceForShow = props.referenceForShow;
       },
       {
-        deep: true
+        deep: true,
       }
     );
     return {
       ...toRefs(data),
-      constant
+      constant,
     };
-  }
+  },
 });
 export default MessageReference;
 </script>
@@ -141,34 +115,34 @@ export default MessageReference;
   display: flex;
   flex-direction: inherit;
   justify-content: center;
-  padding: 10Px;
-  line-height: 20Px;
+  padding: 10px;
+  line-height: 20px;
   .message-img,
   .message-video-cover,
   .message-videoimg {
-    max-width: min(calc(100vw - 230Px), 300Px);
-    max-height: min(calc(100vw - 230Px), 300Px);
+    max-width: min(calc(100vw - 230px), 300px);
+    max-height: min(calc(100vw - 230px), 300px);
   }
   .face-box {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     &-name {
-      padding-right: 5Px;
+      padding-right: 5px;
     }
     .text-img {
-      width: 20Px;
-      height: 20Px;
+      width: 20px;
+      height: 20px;
     }
   }
   p {
     font-family: PingFangSC-Regular;
     font-weight: 400;
-    font-size: 12Px;
+    font-size: 12px;
     color: #999999;
     letter-spacing: 0;
-    padding-right: 5Px;
-    max-width: 100Px;
+    padding-right: 5px;
+    max-width: 100px;
     box-sizing: border-box;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -176,10 +150,10 @@ export default MessageReference;
     white-space: nowrap;
   }
   span {
-    line-height: 20Px;
+    line-height: 20px;
     font-family: PingFangSC-Regular;
     font-weight: 400;
-    font-size: 12Px;
+    font-size: 12px;
     color: #999999;
     letter-spacing: 0;
     letter-spacing: 0;
@@ -195,21 +169,21 @@ export default MessageReference;
   display: flex;
   flex-direction: column;
   align-self: start;
-  border-left: 2Px solid rgba(0, 110, 255, 0.499298);
+  border-left: 2px solid rgba(0, 110, 255, 0.499298);
   &-reverse {
-    border-left: 2Px solid rgba(153, 153, 153, 0.3);
+    border-left: 2px solid rgba(153, 153, 153, 0.3);
   }
-  padding-left: 7Px;
-  margin-bottom: 5Px;
+  padding-left: 7px;
+  margin-bottom: 5px;
   color: #999999;
-  font-size: 12Px;
-  line-height: 20Px;
-  min-width: 40Px;
+  font-size: 12px;
+  line-height: 20px;
+  min-width: 40px;
   .message-img,
   .message-video-cover,
   .message-videoimg {
-    max-width: min(calc(100vw - 180Px), 300Px);
-    max-height: min(calc(100vw - 180Px), 300Px);
+    max-width: min(calc(100vw - 180px), 300px);
+    max-height: min(calc(100vw - 180px), 300px);
     object-fit: contain;
     align-self: flex-start;
   }
@@ -218,30 +192,30 @@ export default MessageReference;
     flex-direction: row;
     flex-wrap: wrap;
     .text-img {
-      width: 20Px;
-      height: 20Px;
+      width: 20px;
+      height: 20px;
     }
   }
   p {
     font-weight: 800;
-    max-width: min(calc(100vw - 180Px), 300Px);
+    max-width: min(calc(100vw - 180px), 300px);
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: break-all;
     white-space: nowrap;
   }
 }
-.message-reference-user {
+.message-reference-user{
   display: flex;
   flex-direction: row;
-  .nick {
+  .nick{
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: break-all;
     white-space: nowrap;
   }
-  .colon {
+  .colon{
     width: fit-content;
   }
 }

src/TUIKit/TUIComponents/container/TUIChat/components/message-revoked.vue

@@ -1,13 +1,9 @@
 <template>
   <div class="revoke">
-    <label v-if="message.flow === 'in'">
-      {{ message.nick || message.from }}
-    </label>
-    <label v-else>{{ $t('TUIChat.您') }}</label>
-    <span>{{ $t('TUIChat.撤回了一条消息') }}</span>
-    <span class="edit" v-if="message.flow === 'out' && isEdit" @click="edit">
-      {{ $t('TUIChat.重新编辑') }}
-    </span>
+    <label v-if="message.flow === 'in'">{{message.nick || message.from}}</label>
+    <label v-else>{{$t('TUIChat.您')}}</label>
+    <span>{{$t("TUIChat.撤回了一条消息")}}</span>
+    <span class="edit" v-if="message.flow === 'out'&&isEdit" @click="edit">{{$t('TUIChat.重新编辑')}}</span>
   </div>
 </template>
 
@@ -18,17 +14,17 @@ export default defineComponent({
   props: {
     data: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     isEdit: {
       type: Boolean,
-      default: () => false
-    }
+      default: () => false,
+    },
   },
-  setup(props: any, ctx: any) {
+  setup(props:any, ctx:any) {
     const data = reactive({
       message: {},
-      isEdit: false
+      isEdit: false,
     });
 
     watchEffect(() => {
@@ -42,9 +38,9 @@ export default defineComponent({
 
     return {
       ...toRefs(data),
-      edit
+      edit,
     };
-  }
+  },
 });
 </script>
 <style lang="scss" scoped>
@@ -55,10 +51,10 @@ export default defineComponent({
   justify-content: center;
   color: #999999;
   width: 100%;
-  font-size: 14Px;
+  font-size: 14px;
   .edit {
-    padding: 0 5Px;
-    color: #006eff;
+    padding: 0 5px;
+    color: #006EFF;
   }
 }
 </style>

src/TUIKit/TUIComponents/container/TUIChat/components/message-system.vue

@@ -2,27 +2,12 @@
   <div class="message-system">
     <ul class="list">
       <li v-for="(item, index) in messageList" :key="index">
-        <template
-          v-if="
-            item.type === types.MSG_GRP_TIP ||
-            item.type === types.MSG_GRP_SYS_NOTICE
-          "
-        >
+        <template v-if="item.type === types.MSG_GRP_TIP || item.type === types.MSG_GRP_SYS_NOTICE">
           <i class="icon icon-system"></i>
-          <span>{{ translateGroupSystemNotice(item) }}</span>
+          <span>{{translateGroupSystemNotice(item)}}</span>
           <div class="btn-box" v-if="item?.payload?.operationType === 1">
-            <button
-              class="btn btn-default"
-              @click="handleApplication('Agree', item)"
-            >
-              接受
-            </button>
-            <button
-              class="btn btn-cancel"
-              @click="handleApplication('Reject', item)"
-            >
-              拒绝
-            </button>
+            <button class="btn btn-default" @click="handleApplication('Agree', item)">接受</button>
+            <button class="btn btn-cancel" @click="handleApplication('Reject', item)">拒绝</button>
           </div>
         </template>
       </li>
@@ -38,17 +23,17 @@ export default defineComponent({
   props: {
     data: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     types: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
-  setup(props: any, ctx: any) {
+  setup(props:any, ctx:any) {
     const data = reactive({
       messageList: [],
-      types: {}
+      types: {},
     });
 
     watchEffect(() => {
@@ -56,10 +41,10 @@ export default defineComponent({
       data.types = props.types;
     });
 
-    const handleApplication = (handleAction: string, message: any) => {
-      const options: any = {
+    const handleApplication = (handleAction:string, message:any) => {
+      const options:any = {
         handleAction,
-        message
+        message,
       };
       ctx.emit('application', options);
     };
@@ -67,9 +52,9 @@ export default defineComponent({
     return {
       ...toRefs(data),
       translateGroupSystemNotice,
-      handleApplication
+      handleApplication,
     };
-  }
+  },
 });
 </script>
 <style lang="scss" scoped>
@@ -79,35 +64,35 @@ export default defineComponent({
   flex: 1;
   height: 100%;
   overflow-y: auto;
-  min-width: 600Px;
+  min-width: 600px;
   li {
     display: flex;
     align-items: center;
     position: relative;
-    padding: 10Px 20Px;
+    padding:10px 20px;
     font-weight: 400;
-    font-size: 14Px;
+    font-size: 14px;
     color: #000000;
     letter-spacing: 0;
     .icon {
-      margin-right: 10Px;
+      margin-right: 10px;
     }
     .message-label {
-      max-width: 50Px;
+      max-width: 50px;
     }
     .btn-box {
-      padding: 0 12Px;
+      padding: 0 12px;
     }
   }
 }
 .icon {
   display: inline-block;
-  width: 16Px;
-  height: 16Px;
+  width: 16px;
+  height: 16px;
   &-warn {
     border-radius: 50%;
     background: coral;
-    color: #ffffff;
+    color: #FFFFFF;
     font-style: normal;
     display: flex;
     justify-content: center;
@@ -115,26 +100,26 @@ export default defineComponent({
   }
 }
 .btn {
-  padding: 2Px 10Px;
-  margin-right: 12Px;
-  border-radius: 4Px;
+  padding: 2px 10px;
+  margin-right: 12px;
+  border-radius: 4px;
   border: none;
   font-weight: 400;
-  font-size: 14Px;
-  color: #ffffff;
+  font-size: 14px;
+  color: #FFFFFF;
   letter-spacing: 0;
   text-align: center;
-  line-height: 20Px;
+  line-height: 20px;
   &:last-child {
     margin-right: 0;
   }
   &-cancel {
-    border: 1Px solid #dddddd;
+    border: 1px solid #dddddd;
     color: #666666;
   }
   &-default {
-    background: #006eff;
-    border: 1Px solid #006eff;
+    background: #006EFF;
+    border: 1px solid #006EFF;
   }
   &:disabled {
     opacity: 0.3;

src/TUIKit/TUIComponents/container/TUIChat/components/message-text.vue

@@ -12,35 +12,35 @@ export default defineComponent({
   props: {
     data: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
   setup(props: any, ctx: any) {
     const data = reactive({
-      data: {}
+      data: {},
     });
 
     watchEffect(() => {
       data.data = props.data;
     });
     return {
-      ...toRefs(data)
+      ...toRefs(data),
     };
-  }
+  },
 });
 </script>
 <style lang="scss" scoped>
 @import url('../../../styles/common.scss');
 @import url('../../../styles/icon.scss');
 .text-img {
-  width: 20Px;
-  height: 20Px;
+  width: 20px;
+  height: 20px;
 }
 .text-box {
   white-space: pre-wrap;
   font-size: inherit;
   word-break: break-word;
-  font-size: 14Px;
+  font-size: 14px;
   text-size-adjust: none;
 }
 </style>

src/TUIKit/TUIComponents/container/TUIChat/components/message-timestamp.vue

@@ -125,7 +125,7 @@ function calculateTimestamp(timestamp: number): string {
 .message-timestamp {
   margin: 0 auto;
   color: #999999;
-  font-size: 12Px;
+  font-size: 12px;
   width: -webkit-fill-available;
   overflow-wrap: anywhere;
   display: flex;
@@ -133,6 +133,6 @@ function calculateTimestamp(timestamp: number): string {
   align-content: center;
   align-items: center;
   text-align: center;
-  padding: 0 20Px 30Px;
+  padding: 0 20px 30px;
 }
 </style>

src/TUIKit/TUIComponents/container/TUIChat/components/message-tip.vue

@@ -11,12 +11,12 @@ export default defineComponent({
   props: {
     data: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
   setup(props: any, ctx: any) {
     const data = reactive({
-      message: {}
+      message: {},
     });
 
     watchEffect(() => {
@@ -24,9 +24,9 @@ export default defineComponent({
     });
 
     return {
-      ...toRefs(data)
+      ...toRefs(data),
     };
-  }
+  },
 });
 </script>
 <style lang="scss" scoped>
@@ -35,7 +35,7 @@ export default defineComponent({
 .message-tip {
   margin: 0 auto;
   color: #999999;
-  font-size: 12Px;
+  font-size: 12px;
   width: -webkit-fill-available;
   overflow-wrap: anywhere;
   display: flex;

src/TUIKit/TUIComponents/container/TUIChat/components/message-tool.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="dialog-item"
-    :class="env?.isH5 ? 'dialog-item-h5' : 'dialog-item-web'"
-  >
+  <div class="dialog-item" :class="env?.isH5 ? 'dialog-item-h5' : 'dialog-item-web'">
     <MessageEmojiReact
       v-if="env?.isH5 && needEmojiReact"
       :message="message"
@@ -16,9 +13,7 @@
     >
       <li
         v-if="
-          (message.type === types.MSG_FILE ||
-            message.type === types.MSG_VIDEO ||
-            message.type === types.MSG_IMAGE) &&
+          (message.type === types.MSG_FILE || message.type === types.MSG_VIDEO || message.type === types.MSG_IMAGE) &&
           !env.isH5
         "
         @click="openMessage(message)"
@@ -26,49 +21,30 @@
         <i class="icon icon-msg-copy"></i>
         <span>{{ $t('TUIChat.打开') }}</span>
       </li>
-      <li
-        v-if="message.type === types.MSG_TEXT"
-        @click="handleMessage(message, constant.handleMessage.copy)"
-      >
+      <li v-if="message.type === types.MSG_TEXT" @click="handleMessage(message, constant.handleMessage.copy)">
         <i class="icon icon-msg-copy"></i>
         <span>{{ $t('TUIChat.复制') }}</span>
       </li>
-      <li
-        v-if="message.status === 'success'"
-        @click="handleMessage(message, constant.handleMessage.forward)"
-      >
+      <li v-if="message.status === 'success'" @click="handleMessage(message, constant.handleMessage.forward)">
         <i class="icon icon-msg-forward"></i>
         <span>{{ $t('TUIChat.转发') }}</span>
       </li>
-      <li
-        v-if="message.status === 'success'"
-        @click="handleMessage(message, constant.handleMessage.reference)"
-      >
+      <li v-if="message.status === 'success'" @click="handleMessage(message, constant.handleMessage.reference)">
         <i class="icon icon-msg-quote"></i>
         <span>{{ $t('TUIChat.引用') }}</span>
       </li>
-      <li
-        v-if="message.status === 'success'"
-        @click="handleMessage(message, constant.handleMessage.reply)"
-      >
+      <li v-if="message.status === 'success'" @click="handleMessage(message, constant.handleMessage.reply)">
         <i class="icon icon-msg-reply"></i>
         <span>{{ $t('TUIChat.回复') }}</span>
       </li>
       <li
-        v-if="
-          message.flow === 'out' &&
-          message.status === 'success' &&
-          message.type !== types.MSG_CUSTOM
-        "
+        v-if="message.flow === 'out' && message.status === 'success' && message.type !== types.MSG_CUSTOM"
         @click="handleMessage(message, constant.handleMessage.revoke)"
       >
         <i class="icon icon-msg-revoke"></i>
         <span>{{ $t('TUIChat.撤回') }}</span>
       </li>
-      <li
-        v-if="message.status === 'success'"
-        @click="handleMessage(message, constant.handleMessage.delete)"
-      >
+      <li v-if="message.status === 'success'" @click="handleMessage(message, constant.handleMessage.delete)">
         <i class="icon icon-msg-del"></i>
         <span>{{ $t('TUIChat.删除') }}</span>
       </li>
@@ -76,14 +52,7 @@
   </div>
 </template>
 <script lang="ts">
-import {
-  defineComponent,
-  watch,
-  reactive,
-  toRefs,
-  ref,
-  watchEffect
-} from 'vue';
+import { defineComponent, watch, reactive, toRefs, ref, watchEffect } from 'vue';
 import { Message } from '../interface';
 import TIM from '../../../../TUICore/tim';
 import { handleErrorPrompts } from '../../utils';
@@ -95,28 +64,26 @@ export default defineComponent({
   props: {
     message: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     needEmojiReact: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   components: {
-    MessageEmojiReact
+    MessageEmojiReact,
   },
   setup(props: any, ctx: any) {
     const TUIServer = (window as any)?.TUIKitTUICore?.TUIServer?.TUIChat;
-    const VuexStore =
-      ((window as any)?.TUIKitTUICore?.isOfficial && useStore && useStore()) ||
-      {};
+    const VuexStore = ((window as any)?.TUIKitTUICore?.isOfficial && useStore && useStore()) || {};
     const data = reactive({
       message: {} as Message,
       show: false,
       types: TIM.TYPES,
       env: TUIServer.TUICore.TUIEnv,
       showToolList: true,
-      needEmojiReact: false
+      needEmojiReact: false,
     });
 
     watchEffect(() => {
@@ -152,19 +119,14 @@ export default defineComponent({
         case constant.handleMessage.revoke:
           try {
             await TUIServer.revokeMessage(message);
-            (window as any)?.TUIKitTUICore?.isOfficial &&
-              VuexStore?.commit &&
-              VuexStore?.commit('handleTask', 1);
+            (window as any)?.TUIKitTUICore?.isOfficial && VuexStore?.commit && VuexStore?.commit('handleTask', 1);
           } catch (error) {
             handleErrorPrompts(error, data.env);
           }
           break;
         case constant.handleMessage.copy:
           try {
-            if (
-              message?.type === data.types.MSG_TEXT &&
-              message?.payload?.text
-            ) {
+            if (message?.type === data.types.MSG_TEXT && message?.payload?.text) {
               const { toClipboard } = useClipboard();
               await toClipboard(message?.payload?.text);
             }
@@ -197,9 +159,9 @@ export default defineComponent({
       openMessage,
       handleMessage,
       constant,
-      handleCollapse
+      handleCollapse,
     };
-  }
+  },
 });
 </script>
 <style lang="scss" scoped>
@@ -208,19 +170,19 @@ export default defineComponent({
 .dialog-item {
   background: #ffffff;
   min-width: min-content;
-  max-width: 220Px;
-  width: 72Px;
+  max-width: 220px;
+  width: 72px;
   height: fit-content;
   word-break: keep-all;
-  top: 30Px;
-  border-radius: 8Px;
+  top: 30px;
+  border-radius: 8px;
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   white-space: nowrap;
-  border: 1Px solid #e0e0e0;
+  border: 1px solid #e0e0e0;
   &-web {
-    padding: 12Px 0;
+    padding: 12px 0;
   }
 
   &-list {
@@ -232,13 +194,13 @@ export default defineComponent({
     width: 100%;
     &-h5 {
       flex-wrap: nowrap;
-      margin: 10Px;
+      margin: 10px;
       li {
-        padding: 0 5Px;
+        padding: 0 5px;
         display: flex;
         flex-direction: column;
         align-items: center;
-        font-size: 8Px;
+        font-size: 8px;
         color: #4f4f4f;
       }
     }
@@ -248,14 +210,14 @@ export default defineComponent({
       }
 
       li {
-        padding: 4Px 12Px;
-        font-size: 12Px;
-        line-height: 17Px;
+        padding: 4px 12px;
+        font-size: 12px;
+        line-height: 17px;
         display: flex;
         flex-direction: row;
         align-items: center;
         span {
-          padding-left: 4Px;
+          padding-left: 4px;
         }
       }
     }

src/TUIKit/TUIComponents/container/TUIChat/components/message-video.vue

@@ -175,14 +175,14 @@ export default defineComponent({
           }
           size = handleSkeletonSize(snapshotWidth, snapshotHeight, max, max);
           skeleton?.value?.style &&
-            (skeleton.value.style.width = `${size.width}Px`);
+            (skeleton.value.style.width = `${size.width}px`);
           skeleton?.value?.style &&
-            (skeleton.value.style.height = `${size.height}Px`);
+            (skeleton.value.style.height = `${size.height}px`);
           if (!props.isH5) {
             video?.value?.style &&
-              (video.value.style.width = `${size.width}Px`);
+              (video.value.style.width = `${size.width}px`);
             video?.value?.style &&
-              (video.value.style.height = `${size.height}Px`);
+              (video.value.style.height = `${size.height}px`);
           }
         } else {
           ctx.emit('uploading');
@@ -220,20 +220,20 @@ export default defineComponent({
   justify-content: center;
   overflow: hidden;
   &-box {
-    max-width: min(calc(100vw - 180Px), 300Px);
+    max-width: min(calc(100vw - 180px), 300px);
     video {
-      max-width: min(calc(100vw - 180Px), 300Px);
-      max-height: min(calc(100vw - 180Px), 300Px);
+      max-width: min(calc(100vw - 180px), 300px);
+      max-height: min(calc(100vw - 180px), 300px);
       width: inherit;
       height: inherit;
-      border-radius: 10Px;
+      border-radius: 10px;
     }
     img {
-      max-width: min(calc(100vw - 180Px), 300Px);
-      max-height: min(calc(100vw - 180Px), 300Px);
+      max-width: min(calc(100vw - 180px), 300px);
+      max-height: min(calc(100vw - 180px), 300px);
       width: inherit;
       height: inherit;
-      border-radius: 10Px;
+      border-radius: 10px;
     }
     img[src=''],
     img:not([src]) {
@@ -247,23 +247,23 @@ export default defineComponent({
       position: absolute;
       z-index: 1;
       content: '';
-      width: 0Px;
-      height: 0Px;
-      border: 10Px solid transparent;
-      border-left: 15Px solid #ffffff;
+      width: 0px;
+      height: 0px;
+      border: 10px solid transparent;
+      border-left: 15px solid #ffffff;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       margin: auto;
-      transform: translate(5Px, 0Px);
+      transform: translate(5px, 0px);
     }
     video {
-      max-width: min(calc(100vw - 180Px), 300Px);
-      max-height: min(calc(100vw - 180Px), 300Px);
+      max-width: min(calc(100vw - 180px), 300px);
+      max-height: min(calc(100vw - 180px), 300px);
       width: inherit;
       height: inherit;
-      border-radius: 10Px;
+      border-radius: 10px;
     }
   }
   .progress {
@@ -271,8 +271,8 @@ export default defineComponent({
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-    padding: 0 20Px;
-    border-radius: 10Px;
+    padding: 0 20px;
+    border-radius: 10px;
     left: 0;
     top: 0;
     background: rgba(#000000, 0.5);
@@ -318,7 +318,7 @@ export default defineComponent({
     background: rgba(0, 0, 0, 0.49);
     width: 100%;
     box-sizing: border-box;
-    padding: 10Px 10Px;
+    padding: 10px 10px;
   }
   &-box {
     display: flex;
@@ -338,7 +338,7 @@ export default defineComponent({
   width: 100%;
   height: 100%;
   background: #000000;
-  padding: 30Px 0;
+  padding: 30px 0;
 }
 
 .isWidth {

src/TUIKit/TUIComponents/container/TUIChat/index.ts

@@ -19,14 +19,14 @@ let sendComponents: any = {
   Face,
   Image,
   Video,
-  File
-  // Evaluate,
-  // Words,
-  // Call,
+  File,
+  Evaluate,
+  Words,
+  Call,
 };
 
 export const messageComponents: any = {
-  Forward
+  Forward,
 };
 
 export const otherComponents: any = {
@@ -56,19 +56,12 @@ export function getComponents(type: string) {
 }
 
 const install = (app: any) => {
-  const components: any = {
-    ...sendComponents,
-    ...messageComponents,
-    ...otherComponents
-  };
+  const components: any = { ...sendComponents, ...messageComponents, ...otherComponents };
   Object.keys(components).forEach((name: any) => {
     components[name].TUIServer = TUIChat.server;
   });
   TUIChatComponent.TUIServer = TUIChat.server;
-  TUIChatComponent.components = {
-    ...TUIChatComponent.components,
-    ...components
-  };
+  TUIChatComponent.components = { ...TUIChatComponent.components, ...components };
   app.component(TUIChat.name, TUIChatComponent);
 };
 
@@ -99,7 +92,7 @@ const TUIChat = {
   install,
   plugin,
   setPluginComponents,
-  removePluginComponents
+  removePluginComponents,
 };
 
 export default TUIChat;

src/TUIKit/TUIComponents/container/TUIChat/index.vue

@@ -1,24 +1,10 @@
 <template>
-  <div
-    class="TUIChat"
-    :class="[env.isH5 ? 'TUIChat-H5' : '']"
-    v-if="conversationType === 'chat'"
-  >
+  <div class="TUIChat" :class="[env.isH5 ? 'TUIChat-H5' : '']" v-if="conversationType === 'chat'">
     <header class="TUIChat-header">
       <i class="icon icon-back" @click="back" v-if="env.isH5"></i>
-      <TypingHeader
-        :needTyping="needTyping"
-        :conversation="conversation"
-        :messageList="messageList"
-        ref="typingRef"
-      />
+      <TypingHeader :needTyping="needTyping" :conversation="conversation" :messageList="messageList" ref="typingRef" />
       <aside class="setting">
-        <Manage
-          v-if="conversation.groupProfile"
-          :conversation="conversation"
-          :userInfo="userInfo"
-          :isH5="env.isH5"
-        />
+        <Manage v-if="conversation.groupProfile" :conversation="conversation" :userInfo="userInfo" :isH5="env.isH5" />
         <Replies
           :message="currentMessage"
           :conversation="conversation"
@@ -31,29 +17,18 @@
       </aside>
     </header>
     <div class="TUIChat-main">
-      <ul
-        class="TUI-message-list"
-        @click="dialogID = ''"
-        ref="messageEle"
-        id="messageEle"
-      >
-        <p
-          class="message-more"
-          @click="getHistoryMessageList"
-          v-if="!isCompleted"
-        >
+      <div class="TUIChat-safe-tips">
+        <span>
+          {{ $t('TUIChat.安全提示') }}
+        </span>
+        <a @click="openLink(Link.complaint)">{{ $t('TUIChat.点此投诉') }}</a>
+      </div>
+      <ul class="TUI-message-list" @click="dialogID = ''" ref="messageEle" id="messageEle">
+        <p class="message-more" @click="getHistoryMessageList" v-if="!isCompleted">
           {{ $t('TUIChat.查看更多') }}
         </p>
-        <li
-          v-for="(item, index) in messages"
-          :key="index"
-          :id="item?.ID"
-          ref="messageAimID"
-        >
-          <MessageTimestamp
-            :currTime="item?.time"
-            :prevTime="index > 0 ? messages[index - 1]?.time : 0"
-          ></MessageTimestamp>
+        <li v-for="(item, index) in messages" :key="index" :id="item?.ID" ref="messageAimID">
+          <MessageTimestamp :currTime="item?.time" :prevTime="index > 0 ? (messages[index-1]?.time) : 0"></MessageTimestamp>
           <MessageItem
             :message="item"
             :env="env"
@@ -66,23 +41,17 @@
             @uploading="handleUploadingImageOrVideo"
             @jumpID="jumpID"
             @resendMessage="resendMessage"
-          ></MessageItem>
+          >
+          </MessageItem>
         </li>
-        <div
-          class="to-bottom-tip"
-          v-if="needToBottom"
-          @click="scrollToTarget('bottom')"
-        >
+        <div class="to-bottom-tip" v-if="needToBottom" @click="scrollToTarget('bottom')">
           <i class="icon icon-bottom-double"></i>
           <div class="to-bottom-tip-cont">
             <span>{{ toBottomTipCont }}</span>
           </div>
         </div>
       </ul>
-      <div
-        class="dialog dialog-conversation"
-        v-if="forwardStatus && messageComponents.Forward"
-      >
+      <div class="dialog dialog-conversation" v-if="forwardStatus && messageComponents.Forward">
         <component
           :is="'Forward'"
           :list="conversationData.list"
@@ -97,9 +66,7 @@
           </template>
           <template #right="{ data }">
             <img class="avatar" :src="conversationData.handleAvatar(data)" />
-            <label class="name" v-if="!env.isH5">
-              {{ conversationData.handleName(data) }}
-            </label>
+            <label class="name" v-if="!env.isH5">{{ conversationData.handleName(data) }}</label>
           </template>
         </component>
       </div>
@@ -120,10 +87,7 @@
         @close="showImagePreview = false"
       />
     </div>
-    <div
-      class="TUIChat-footer"
-      :class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"
-    >
+    <div class="TUIChat-footer" :class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']">
       <div class="func" id="func">
         <main class="func-main">
           <component
@@ -168,11 +132,7 @@
     <header class="TUIChat-header">
       <h1>{{ conversationName }}</h1>
     </header>
-    <MessageSystem
-      :data="messages"
-      :types="types"
-      @application="handleApplication"
-    />
+    <MessageSystem :data="messages" :types="types" @application="handleApplication" />
   </div>
   <slot v-else-if="slotDefault" />
 </template>
@@ -188,7 +148,7 @@ import {
   watch,
   useSlots,
   onMounted,
-  watchEffect
+  watchEffect,
 } from 'vue';
 import { MessageSystem, MessageItem, MessageTimestamp } from './components';
 import { onClickOutside } from '@vueuse/core';
@@ -201,7 +161,7 @@ import {
   isTypingMessage,
   deepCopy,
   isMessageTip,
-  handleReferenceForShow
+  handleReferenceForShow,
 } from './utils/utils';
 
 import { getComponents } from './index';
@@ -222,28 +182,27 @@ const TUIChat: any = defineComponent({
     MessageTimestamp,
     Manage,
     MessageInput,
-    MessageItem
+    MessageItem,
   },
   props: {
     isMsgNeedReadReceipt: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isNeedTyping: {
       type: Boolean,
-      default: true
+      default: true,
     },
     isNeedEmojiReact: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   setup(props) {
     const { TUIServer } = TUIChat;
     const GroupServer = TUIServer?.TUICore?.TUIServer?.TUIGroup;
     const ProfileServer = TUIServer?.TUICore?.TUIServer?.TUIProfile;
-    const VuexStore =
-      (TUIServer.TUICore.isOfficial && useStore && useStore()) || {};
+    const VuexStore = (TUIServer.TUICore.isOfficial && useStore && useStore()) || {};
     const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
     const data = reactive({
       messageList: [] as Message[],
@@ -262,7 +221,7 @@ const TUIChat: any = defineComponent({
       userInfoView: false,
       userInfo: {
         isGroup: false,
-        list: []
+        list: [],
       },
       selfInfo: {},
       messageComponents: getComponents('message'),
@@ -275,7 +234,7 @@ const TUIChat: any = defineComponent({
         message: {} as Message,
         content: '',
         type: 0, // message type
-        show: '' // 'reference' or 'reply'
+        show: '', // 'reference' or 'reply'
       },
       historyReference: false,
       referenceID: '',
@@ -298,12 +257,12 @@ const TUIChat: any = defineComponent({
         scrollTop: 0,
         scrollHeight: 0,
         scrollTopMin: Infinity,
-        scrollTopMax: 0
+        scrollTopMax: 0,
       },
       isMsgNeedReadReceipt: false,
       isNeedEmojiReact: false,
       dropDownRef: null,
-      typingRef: null
+      typingRef: null,
     });
 
     const slotDefault = !!useSlots().default;
@@ -312,27 +271,18 @@ const TUIChat: any = defineComponent({
     // Using the setMessageRead method of the TUIConversion module
     const setMessageRead = async (conversationID: string | undefined) => {
       if (!conversationID) return;
-      await TUIServer?.TUICore?.TUIServer?.TUIConversation?.setMessageRead(
-        conversationID
-      );
+      await TUIServer?.TUICore?.TUIServer?.TUIConversation?.setMessageRead(conversationID);
       return;
     };
 
     const sendMessageReadReceipt = async (messageList: Message[]) => {
       const needReceiptMessageList = messageList.filter(
-        (item: Message) =>
-          item?.flow === 'in' &&
-          item?.needReadReceipt &&
-          !data.readSet.has(item?.ID)
+        (item: Message) => item?.flow === 'in' && item?.needReadReceipt && !data.readSet.has(item?.ID)
       );
       if (needReceiptMessageList.length) {
-        await TUIServer?.sendMessageReadReceipt(needReceiptMessageList).then(
-          () => {
-            needReceiptMessageList.forEach((item: Message) =>
-              data.readSet.add(item?.ID)
-            );
-          }
-        );
+        await TUIServer?.sendMessageReadReceipt(needReceiptMessageList).then(() => {
+          needReceiptMessageList.forEach((item: Message) => data.readSet.add(item?.ID));
+        });
       }
       await setMessageRead(data?.conversation?.conversationID);
     };
@@ -356,7 +306,7 @@ const TUIChat: any = defineComponent({
     const conversationData = {
       list: [],
       handleAvatar,
-      handleName
+      handleName,
     };
 
     const dialog: any = ref();
@@ -380,8 +330,7 @@ const TUIChat: any = defineComponent({
       const { conversation } = data;
       if (conversation?.type === TUIServer.TUICore.TIM.TYPES.CONV_GROUP) {
         const userRole = conversation?.groupProfile?.selfInfo.role;
-        const isMember =
-          userRole === TUIServer.TUICore.TIM.TYPES.GRP_MBR_ROLE_MEMBER;
+        const isMember = userRole === TUIServer.TUICore.TIM.TYPES.GRP_MBR_ROLE_MEMBER;
         if (isMember && conversation?.groupProfile?.muteAllMembers) {
           // data.muteText = "管理员开启全员禁言";
           return true;
@@ -416,23 +365,19 @@ const TUIChat: any = defineComponent({
           message: {} as Message,
           content: '',
           type: 0,
-          show: ''
+          show: '',
         };
       },
       {
-        deep: true
+        deep: true,
       }
     );
 
     watch(isMute, (newVal: any, oldVal: any) => {
       const { conversation } = data;
-      if (
-        newVal &&
-        conversation?.type === TUIServer.TUICore.TIM.TYPES.CONV_GROUP
-      ) {
+      if (newVal && conversation?.type === TUIServer.TUICore.TIM.TYPES.CONV_GROUP) {
         const userRole = conversation?.groupProfile?.selfInfo.role;
-        const isMember =
-          userRole === TUIServer.TUICore.TIM.TYPES.GRP_MBR_ROLE_MEMBER;
+        const isMember = userRole === TUIServer.TUICore.TIM.TYPES.GRP_MBR_ROLE_MEMBER;
         if (isMember && conversation?.groupProfile?.muteAllMembers) {
           data.muteText = '管理员开启全员禁言';
         }
@@ -448,11 +393,7 @@ const TUIChat: any = defineComponent({
       return handleName(conversation);
     });
 
-    const messages = computed(() =>
-      data.messageList.filter(
-        (item: any) => !item.isDeleted && !isTypingMessage(item)
-      )
-    );
+    const messages = computed(() => data.messageList.filter((item: any) => !item.isDeleted && !isTypingMessage(item)));
     const imageList = computed(() =>
       messages?.value?.filter((item: Message) => {
         return !item.isRevoked && item.type === data.types.MSG_IMAGE;
@@ -461,10 +402,7 @@ const TUIChat: any = defineComponent({
 
     const needGroupReceipt = computed(() => {
       const { conversation, needReadReceipt } = data;
-      if (
-        conversation?.type === TUIServer.TUICore.TIM.TYPES.CONV_C2C ||
-        needReadReceipt
-      ) {
+      if (conversation?.type === TUIServer.TUICore.TIM.TYPES.CONV_C2C || needReadReceipt) {
         return true;
       }
       return false;
@@ -474,8 +412,7 @@ const TUIChat: any = defineComponent({
       messages,
       (newVal: Array<Message>, oldVal: Array<Message>) => {
         nextTick(() => {
-          const isTheSameMessage =
-            newVal[newVal.length - 1]?.ID === oldVal[oldVal.length - 1]?.ID;
+          const isTheSameMessage = newVal[newVal.length - 1]?.ID === oldVal[oldVal.length - 1]?.ID;
           if (newVal.length === 0 || isTheSameMessage) {
             return;
           }
@@ -492,9 +429,7 @@ const TUIChat: any = defineComponent({
           for (let index = 0; index < messages.value.length; index++) {
             if (messages?.value[index]?.ID === data?.referenceID) {
               scrollToTarget('target', messageAimID.value[index]);
-              messageAimID.value[index]
-                .getElementsByClassName('content')[0]
-                .classList.add('reference-content');
+              messageAimID.value[index].getElementsByClassName('content')[0].classList.add('reference-content');
             }
           }
           data.historyReference = false;
@@ -509,10 +444,7 @@ const TUIChat: any = defineComponent({
         setTimeout(() => {
           // scrolling end
           if (newVal === messageEle?.value?.scrollTop) {
-            if (
-              data.scroll.scrollTopMin !== Infinity &&
-              data.scroll.scrollTopMax !== 0
-            ) {
+            if (data.scroll.scrollTopMin !== Infinity && data.scroll.scrollTopMax !== 0) {
               sendMessageReadInView('scroll');
             }
             data.scroll.scrollTopMin = Infinity;
@@ -532,7 +464,7 @@ const TUIChat: any = defineComponent({
           }
         },
         {
-          deep: true
+          deep: true,
         }
       );
     });
@@ -546,9 +478,7 @@ const TUIChat: any = defineComponent({
         data.isFirstSend = false;
       }
       data.reference.show = '';
-      TUIServer.TUICore.isOfficial &&
-        VuexStore?.commit &&
-        VuexStore?.commit('handleTask', 0);
+      TUIServer.TUICore.isOfficial && VuexStore?.commit && VuexStore?.commit('handleTask', 0);
     };
 
     const handleItem = (item: any) => {
@@ -569,8 +499,7 @@ const TUIChat: any = defineComponent({
 
     const forwardMessage = (message: Message) => {
       data.currentMessage = message;
-      conversationData.list =
-        TUIServer.TUICore.getStore().TUIConversation.conversationList;
+      conversationData.list = TUIServer.TUICore.getStore().TUIConversation.conversationList;
       data.forwardStatus = true;
     };
 
@@ -580,7 +509,7 @@ const TUIChat: any = defineComponent({
         message,
         content: replyObj?.referenceMessageForShow,
         type: replyObj?.referenceMessageType,
-        show: type
+        show: type,
       };
     };
 
@@ -622,18 +551,11 @@ const TUIChat: any = defineComponent({
       // If the referenced message is in the current messageList, you can jump directly. Otherwise, you need to pull the historical message
       for (let index = 0; index < messages.value.length; index++) {
         list.push(messages?.value[index]?.ID);
-        if (
-          list.indexOf(messageID) !== -1 &&
-          messages.value[index]?.ID === messageID
-        ) {
+        if (list.indexOf(messageID) !== -1 && messages.value[index]?.ID === messageID) {
           scrollToTarget('target', messageAimID.value[index]);
-          messageAimID.value[index]
-            .getElementsByClassName('content')[0]
-            .classList.remove('reference-content');
+          messageAimID.value[index].getElementsByClassName('content')[0].classList.remove('reference-content');
           nextTick(() => {
-            messageAimID.value[index]
-              .getElementsByClassName('content')[0]
-              .classList.add('reference-content');
+            messageAimID.value[index].getElementsByClassName('content')[0].classList.add('reference-content');
           });
         }
       }
@@ -680,8 +602,7 @@ const TUIChat: any = defineComponent({
       switch (type) {
         case 'receipt':
           if (
-            message.conversationType !==
-              TUIServer.TUICore.TIM.TYPES.CONV_GROUP ||
+            message.conversationType !== TUIServer.TUICore.TIM.TYPES.CONV_GROUP ||
             message.readReceiptInfo?.unreadCount === 0
           ) {
             return;
@@ -695,8 +616,7 @@ const TUIChat: any = defineComponent({
           break;
         case 'forward':
           data.currentMessage = message;
-          conversationData.list =
-            TUIServer.TUICore.getStore().TUIConversation.conversationList;
+          conversationData.list = TUIServer.TUICore.getStore().TUIConversation.conversationList;
           data.forwardStatus = true;
           break;
         case 'previewImage':
@@ -815,13 +735,8 @@ const TUIChat: any = defineComponent({
       switch (needToBottom) {
         case true:
           data.needToBottom = true;
-          if (
-            data?.conversation?.unreadCount &&
-            data?.conversation?.unreadCount > 0
-          ) {
-            data.toBottomTipCont = `${data?.conversation?.unreadCount} ${t(
-              'TUIChat.条新消息'
-            )}`;
+          if (data?.conversation?.unreadCount && data?.conversation?.unreadCount > 0) {
+            data.toBottomTipCont = `${data?.conversation?.unreadCount} ${t('TUIChat.条新消息')}`;
           } else {
             data.toBottomTipCont = t('TUIChat.回到最新位置');
           }
@@ -864,22 +779,14 @@ const TUIChat: any = defineComponent({
       await sendMessageReadReceipt(data.messageInView);
     };
 
-    const isInView = (
-      type: string,
-      dom: HTMLElement,
-      viewStart: number,
-      viewEnd: number
-    ) => {
+    const isInView = (type: string, dom: HTMLElement, viewStart: number, viewEnd: number) => {
       const containerTop = messageEle.value.getBoundingClientRect().top;
       const containerBottom = messageEle.value.getBoundingClientRect().bottom;
       const { top, bottom } = dom.getBoundingClientRect();
       const { offsetTop, clientHeight } = dom;
       switch (type) {
         case constant.inViewType.page:
-          return (
-            Math.round(top) >= Math.round(containerTop) &&
-            Math.round(bottom) <= Math.round(containerBottom)
-          );
+          return Math.round(top) >= Math.round(containerTop) && Math.round(bottom) <= Math.round(containerBottom);
         case constant.inViewType.scroll:
           return (
             Math.round(offsetTop) >= Math.round(viewStart) &&
@@ -892,9 +799,7 @@ const TUIChat: any = defineComponent({
 
     const handleDropDownOpen = (value: any) => {
       if (data.dropDownRef) {
-        (data.dropDownRef as any).removeChild(
-          (data.dropDownRef as any).children[0]
-        );
+        (data.dropDownRef as any).removeChild((data.dropDownRef as any).children[0]);
       }
       data.dropDownRef = value;
     };
@@ -913,7 +818,7 @@ const TUIChat: any = defineComponent({
         message: {} as Message,
         content: '',
         type: 0,
-        show: ''
+        show: '',
       };
     };
 
@@ -966,9 +871,9 @@ const TUIChat: any = defineComponent({
       handleUploadingImageOrVideo,
       handleImagePreview,
       imageList,
-      resetReplyOrReference
+      resetReplyOrReference,
     };
-  }
+  },
 });
 export default TUIChat;
 </script>

src/TUIKit/TUIComponents/container/TUIChat/manage-components/manage-member.vue

@@ -5,24 +5,15 @@
         <aside @click="handleMemberProfileShow(item)">
           <img
             class="avatar"
-            :src="
-              item?.avatar ||
-              'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
-            "
-            onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
+            :src="item?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+            onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
           />
           <span class="name">{{ item?.nick || item?.userID }}</span>
           <span>{{ handleRoleName(item) }}</span>
         </aside>
-        <i
-          v-if="item.role !== 'Owner' && isShowDel"
-          class="icon icon-del"
-          @click="submit(item)"
-        ></i>
-      </li>
-      <li class="list-item" v-if="list.length < total" @click="getMore">
-        {{ $t(`TUIChat.manage.查看更多`) }}
+        <i v-if="item.role !== 'Owner' && isShowDel" class="icon icon-del" @click="submit(item)"></i>
       </li>
+      <li class="list-item" v-if="list.length < total" @click="getMore">{{ $t(`TUIChat.manage.查看更多`) }}</li>
     </ul>
   </main>
 </template>
@@ -36,20 +27,20 @@ const ManageMember = defineComponent({
   props: {
     list: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     total: {
       type: Number,
-      default: () => 0
+      default: () => 0,
     },
     isShowDel: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     self: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
   setup(props: any, ctx: any) {
     const types: any = TIM.TYPES;
@@ -57,7 +48,7 @@ const ManageMember = defineComponent({
       total: 0,
       list: [],
       isShowDel: false,
-      self: {}
+      self: {},
     });
 
     watchEffect(() => {
@@ -104,9 +95,9 @@ const ManageMember = defineComponent({
       getMore,
       submit,
       handleRoleName,
-      handleMemberProfileShow
+      handleMemberProfileShow,
     };
-  }
+  },
 });
 export default ManageMember;
 </script>
@@ -121,14 +112,14 @@ export default ManageMember;
     display: flex;
     flex-direction: column;
     background: #f4f5f9;
-    padding-top: 12Px;
+    padding-top: 22px;
     &-item {
-      padding: 13Px;
+      padding: 13px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       background: #ffffff;
-      font-size: 14Px;
+      font-size: 14px;
       overflow: hidden;
       &:hover {
         background: #f1f2f6;
@@ -139,9 +130,9 @@ export default ManageMember;
         width: 100%;
         overflow: hidden;
         .name {
-          padding-left: 8Px;
+          padding-left: 8px;
           font-weight: 400;
-          font-size: 14Px;
+          font-size: 14px;
           color: #000000;
           flex: 1;
           overflow: hidden;
@@ -153,8 +144,8 @@ export default ManageMember;
   }
 }
 .avatar {
-  width: 36Px;
-  height: 36Px;
-  border-radius: 4Px;
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
 }
 </style>

src/TUIKit/TUIComponents/container/TUIChat/manage-components/manage-name.vue

@@ -1,40 +1,29 @@
 <template>
   <div class="name">
-    <label>{{ $t(`TUIChat.manage.群名称`) }}</label>
+    <label>{{$t(`TUIChat.manage.群名称`)}}</label>
     <div v-if="isEdit" :class="[isH5 ? 'edit-h5' : '']" ref="dialog">
       <main>
         <header class="edit-h5-header" v-if="isH5">
           <aside class="left">
-            <h1>{{ $t(`TUIChat.manage.修改群聊名称`) }}</h1>
-            <span>
-              {{ $t(`TUIChat.manage.修改群聊名称后，将在群内通知其他成员`) }}
-            </span>
+            <h1>{{$t(`TUIChat.manage.修改群聊名称`)}}</h1>
+            <span>{{$t(`TUIChat.manage.修改群聊名称后，将在群内通知其他成员`)}}</span>
           </aside>
-          <span class="close" @click="toggleEdit">{{ $t(`关闭`) }}</span>
+          <span class="close" @click="toggleEdit">{{$t(`关闭`)}}</span>
         </header>
         <div class="input-box">
-          <input
-            class="input"
-            v-if="isEdit"
-            v-model="input"
-            type="text"
-            @keyup.enter="updateProfile"
-          />
-          <span v-if="isH5">
-            {{ $t(`TUIChat.manage.仅限中文、字母、数字和下划线，2-20个字`) }}
-          </span>
+          <input class="input" v-if="isEdit" v-model="input" type="text" @keyup.enter="updateProfile">
+          <span v-if="isH5">{{$t(`TUIChat.manage.仅限中文、字母、数字和下划线，2-20个字`)}}</span>
         </div>
         <footer class="edit-h5-footer" v-if="isH5">
-          <button class="btn" :disabled="!input" @click="updateProfile">
-            {{ $t(`确认`) }}
-          </button>
+          <button class="btn" :disabled="!input" @click="updateProfile">{{$t(`确认`)}}</button>
         </footer>
       </main>
     </div>
     <p v-if="!isEdit || isH5" @click="toggleEdit">
-      <span>{{ groupProfile.name }}</span>
+      <span>{{groupProfile.name}}</span>
       <i class="icon icon-edit" v-if="isAuth"></i>
     </p>
+
   </div>
 </template>
 
@@ -46,29 +35,30 @@ const manageName = defineComponent({
   props: {
     data: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     isAuth: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isH5: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
-  setup(props: any, ctx: any) {
-    const data: any = reactive({
+  setup(props:any, ctx:any) {
+    const data:any = reactive({
       groupProfile: {},
       input: '',
-      isEdit: false
+      isEdit: false,
     });
 
     watchEffect(() => {
       data.groupProfile = props.data;
     });
 
-    const dialog: any = ref();
+    const dialog:any = ref();
+
 
     onClickOutside(dialog, () => {
       data.isEdit = false;
@@ -96,9 +86,9 @@ const manageName = defineComponent({
       ...toRefs(data),
       updateProfile,
       toggleEdit,
-      dialog
+      dialog,
     };
-  }
+  },
 });
 export default manageName;
 </script>
@@ -107,9 +97,9 @@ export default manageName;
 @import url('../../../styles/common.scss');
 @import url('../../../styles/icon.scss');
 .name {
-  padding: 14Px 20Px;
+  padding: 14px 20px;
   font-weight: 400;
-  font-size: 14Px;
+  font-size: 14px;
   color: #000000;
   display: flex;
   flex-direction: column;
@@ -118,7 +108,7 @@ export default manageName;
     display: flex;
     align-items: center;
     .icon {
-      margin-left: 4Px;
+      margin-left: 4px;
     }
   }
 }
@@ -126,18 +116,18 @@ export default manageName;
   display: flex;
   .input {
     flex: 1;
-    border: 1Px solid #e8e8e9;
-    border-radius: 4Px;
-    padding: 4Px 16Px;
+    border: 1px solid #E8E8E9;
+    border-radius: 4px;
+    padding: 4px 16px;
     font-weight: 400;
-    font-size: 14Px;
+    font-size: 14px;
     color: #000000;
     opacity: 0.6;
   }
 }
 
-.space-top {
-  border-top: 10Px solid #f4f5f9;
+.space-top{
+  border-top: 10px solid #F4F5F9;
 }
 .edit-h5 {
   position: fixed;
@@ -145,29 +135,29 @@ export default manageName;
   height: 100%;
   top: 0;
   left: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0,0,0,.5);
   display: flex;
   align-items: flex-end;
   z-index: 1;
   main {
-    background: #ffffff;
+    background: #FFFFFF;
     flex: 1;
-    padding: 18Px;
-    border-radius: 12Px 12Px 0 0;
+    padding: 18px;
+    border-radius: 12px 12px 0 0;
     .input-box {
       flex-direction: column;
-      padding: 18Px 0;
+      padding: 18px 0;
       .input {
-        background: #f8f8f8;
-        padding: 10Px 12Px;
+        background: #F8F8F8;
+        padding: 10px 12px;
       }
       span {
         font-family: PingFangSC-Regular;
         font-weight: 400;
-        font-size: 12Px;
+        font-size: 12px;
         color: #888888;
         letter-spacing: 0;
-        padding-top: 8Px;
+        padding-top: 8px;
       }
     }
   }
@@ -178,10 +168,10 @@ export default manageName;
     .close {
       font-family: PingFangSC-Regular;
       font-weight: 400;
-      font-size: 18Px;
-      color: #3370ff;
+      font-size: 18px;
+      color: #3370FF;
       letter-spacing: 0;
-      line-height: 27Px;
+      line-height: 27px;
     }
   }
   &-footer {
@@ -189,15 +179,15 @@ export default manageName;
     .btn {
       flex: 1;
       border: none;
-      background: #147aff;
-      border-radius: 5Px;
+      background: #147AFF;
+      border-radius: 5px;
       font-family: PingFangSC-Regular;
       font-weight: 400;
-      font-size: 16Px;
-      color: #ffffff;
+      font-size: 16px;
+      color: #FFFFFF;
       letter-spacing: 0;
-      line-height: 27Px;
-      padding: 8Px 0;
+      line-height: 27px;
+      padding: 8px 0;
       &:disabled {
         opacity: 0.3;
       }

src/TUIKit/TUIComponents/container/TUIChat/manage-components/manage-notification.vue

@@ -1,23 +1,13 @@
 <template>
   <main class="notification">
-    <textarea
-      v-if="isEdit"
-      v-model="input"
-      @keyup.enter="updateProfile"
-    ></textarea>
+    <textarea v-if="isEdit" v-model="input" @keyup.enter="updateProfile"></textarea>
     <section v-else>
-      <p v-if="!groupProfile.notification">
-        {{ $t(`TUIChat.manage.暂无公告`) }}
-      </p>
-      <article v-else>{{ groupProfile.notification }}</article>
+      <p v-if="!groupProfile.notification">{{$t(`TUIChat.manage.暂无公告`)}}</p>
+      <article v-else>{{groupProfile.notification}}</article>
     </section>
     <footer v-if="isAuth">
-      <button class="btn" v-if="isEdit" @click="updateProfile">
-        {{ $t(`TUIChat.manage.发布`) }}
-      </button>
-      <button class="btn" v-else @click="isEdit = !isEdit">
-        {{ $t(`TUIChat.manage.编辑`) }}
-      </button>
+      <button class="btn" v-if="isEdit" @click="updateProfile">{{$t(`TUIChat.manage.发布`)}}</button>
+      <button class="btn" v-else @click="isEdit = !isEdit">{{$t(`TUIChat.manage.编辑`)}}</button>
     </footer>
   </main>
 </template>
@@ -29,18 +19,18 @@ const ManageNotification = defineComponent({
   props: {
     data: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     isAuth: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
-  setup(props: any, ctx: any) {
-    const data: any = reactive({
+  setup(props:any, ctx:any) {
+    const data:any = reactive({
       groupProfile: {},
       input: '',
-      isEdit: false
+      isEdit: false,
     });
 
     watchEffect(() => {
@@ -60,9 +50,9 @@ const ManageNotification = defineComponent({
 
     return {
       ...toRefs(data),
-      updateProfile
+      updateProfile,
     };
-  }
+  },
 });
 export default ManageNotification;
 </script>
@@ -72,44 +62,44 @@ export default ManageNotification;
 @import url('../../../styles/icon.scss');
 .notification {
   flex: 1;
-  padding: 20Px;
+  padding: 20px;
   display: flex;
   flex-direction: column;
   section {
     flex: 1;
-    font-size: 14Px;
+    font-size: 14px;
     p {
       text-align: center;
-      padding-bottom: 20Px;
+      padding-bottom: 20px;
     }
   }
   textarea {
-    margin-bottom: 20Px;
+    margin-bottom: 20px;
     flex: 1;
     box-sizing: border-box;
-    padding: 10Px;
-    border: 1Px solid #e8e8e9;
+    padding: 10px;
+    border: 1px solid #E8E8E9;
     resize: none;
-    font-size: 14Px;
+    font-size: 14px;
   }
   footer {
     display: flex;
     justify-content: flex-end;
-    padding: 10Px;
+    padding: 10px;
   }
 }
 .btn {
-  background: #3370ff;
-  border: 0 solid #2f80ed;
-  padding: 4Px 28Px;
+  background: #3370FF;
+  border: 0 solid #2F80ED;
+  padding: 4px 28px;
   font-weight: 400;
-  font-size: 12Px;
-  color: #ffffff;
-  line-height: 24Px;
-  border-radius: 4Px;
+  font-size: 12px;
+  color: #FFFFFF;
+  line-height: 24px;
+  border-radius: 4px;
   &-cancel {
-    background: #ffffff;
-    border: 1Px solid #dddddd;
+    background: #FFFFFF;
+    border: 1px solid #DDDDDD;
     color: #828282;
   }
 }

src/TUIKit/TUIComponents/container/TUIChat/manage-components/manage.vue

@@ -23,16 +23,15 @@
           <i v-if="!isH5" class="icon icon-close" @click="toggleShow"></i>
         </span>
       </header>
-      <main class="main" style="background-color: #f4f5f9; height: 100%;" v-if="!currentTab">
+      <main class="main" v-if="!currentTab">
         <ManageName
           class="space-top"
           :isAuth="isAuth"
           :isH5="isH5"
           :data="conversation.groupProfile"
           @update="updateProfile"
-          style="background-color: #fff;"
         />
-        <div class="userInfo space-top" style="background-color: #fff;">
+        <div class="userInfo space-top">
           <header class="userInfo-header" @click="setTab('member')">
             <label>{{ $t(`TUIChat.manage.群成员`) }}</label>
             <p>
@@ -53,9 +52,9 @@
                   class="avatar"
                   :src="
                     item?.avatar ||
-                    'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
+                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
                   "
-                  onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
+                  onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
                 />
               </dt>
               <dd>{{ item?.nick || item?.userID }}</dd>
@@ -68,7 +67,7 @@
             </dl>
           </ol>
         </div>
-        <ul class="content space-top" @click="editLableName = ''" style="background-color: #fff;">
+        <ul class="content space-top" @click="editLableName = ''">
           <li @click.stop="setTab('notification')">
             <aside>
               <label>{{ $t(`TUIChat.manage.群公告`) }}</label>
@@ -76,7 +75,7 @@
             </aside>
             <i class="icon icon-right end"></i>
           </li>
-          <!-- <li v-if="isAdmin && isSetMuteTime" @click.stop="setTab('admin')">
+          <li v-if="isAdmin && isSetMuteTime" @click.stop="setTab('admin')">
             <label>{{ $t(`TUIChat.manage.群管理`) }}</label>
             <i class="icon icon-right"></i>
           </li>
@@ -97,9 +96,9 @@
               class="avatar"
               :src="
                 conversation?.groupProfile?.avatar ||
-                'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png'
+                'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'
               "
-              onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png'"
+              onerror="this.src='https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'"
             />
           </li>
           <li>
@@ -121,7 +120,7 @@
                 )
               }}
             </span>
-          </li> -->
+          </li>
         </ul>
         <ul class="footer space-top">
           <li
@@ -139,9 +138,9 @@
           >
             {{ $t(`TUIChat.manage.解散群聊`) }}
           </li>
-          <!-- <li v-else @click.stop="quit(conversation.groupProfile)">
+          <li v-else @click.stop="quit(conversation.groupProfile)">
             {{ $t(`TUIChat.manage.退出群组`) }}
-          </li> -->
+          </li>
         </ul>
       </main>
       <ManageMember
@@ -174,9 +173,9 @@
                   class="avatar"
                   :src="
                     item?.avatar ||
-                    'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
+                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
                   "
-                  onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
+                  onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
                 />
               </dt>
               <dd>{{ item?.nick || item?.userID }}</dd>
@@ -218,9 +217,9 @@
                   class="avatar"
                   :src="
                     item?.avatar ||
-                    'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
+                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
                   "
-                  onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
+                  onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
                 />
               </dt>
               <dd>{{ item?.nick || item?.userID }}</dd>

src/TUIKit/TUIComponents/container/TUIChat/manage-components/member-profile.vue

@@ -3,11 +3,8 @@
     <div class="memeber-profile-main">
       <img
         class="avatar"
-        :src="
-          userInfo?.avatar ||
-          'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
-        "
-        onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
+        :src="userInfo?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+        onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
       />
       <ul class="list">
         <h1>{{ userInfo?.nick || userInfo?.userID }}</h1>
@@ -22,11 +19,7 @@
       </ul>
     </div>
     <div class="memeber-profile-footer">
-      <div
-        class="button"
-        @click="enter(userInfo?.userID, 'C2C')"
-        v-if="showEnter()"
-      >
+      <div class="button" @click="enter(userInfo?.userID, 'C2C')" v-if="showEnter()">
         {{ $t('TUIContact.发送消息') }}
       </div>
     </div>
@@ -41,15 +34,15 @@ const memberProfile = defineComponent({
   props: {
     userInfo: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
   setup(props: any, ctx: any) {
     const TUIServer = manage?.TUIServer;
     const data = reactive({
       isFriendShip: false,
       userInfo: {},
-      self: {}
+      self: {},
     });
     watchEffect(() => {
       data.self = props.self;
@@ -64,29 +57,21 @@ const memberProfile = defineComponent({
       },
       {
         deep: true,
-        immediate: true
+        immediate: true,
       }
     );
     const enter = async (ID: any, type: string) => {
       const name = `${type}${ID}`;
-      TUIServer.TUICore.TUIServer.TUIConversation.getConversationProfile(
-        name
-      ).then((imResponse: any) => {
+      TUIServer.TUICore.TUIServer.TUIConversation.getConversationProfile(name).then((imResponse: any) => {
         // 通知 TUIConversation 添加当前会话
         // Notify TUIConversation to toggle the current conversation
-        TUIServer.TUICore.TUIServer.TUIConversation.handleCurrentConversation(
-          imResponse.data.conversation
-        );
+        TUIServer.TUICore.TUIServer.TUIConversation.handleCurrentConversation(imResponse.data.conversation);
       });
     };
     const checkFriend = async () => {
       if (!(data.userInfo as any).userID) return;
-      const relation = await TUIServer.checkFriend(
-        (data.userInfo as any).userID,
-        TIM.TYPES.SNS_CHECK_TYPE_BOTH
-      );
-      data.isFriendShip =
-        relation === TIM.TYPES.SNS_TYPE_BOTH_WAY ? true : false;
+      const relation = await TUIServer.checkFriend((data.userInfo as any).userID, TIM.TYPES.SNS_CHECK_TYPE_BOTH);
+      data.isFriendShip = relation === TIM.TYPES.SNS_TYPE_BOTH_WAY ? true : false;
     };
 
     const showEnter = () => {
@@ -95,9 +80,9 @@ const memberProfile = defineComponent({
     return {
       ...toRefs(data),
       enter,
-      showEnter
+      showEnter,
     };
-  }
+  },
 });
 export default memberProfile;
 </script>
@@ -114,15 +99,15 @@ export default memberProfile;
     width: 100%;
     overflow: hidden;
     img {
-      width: 60Px;
-      height: 60Px;
-      border-radius: 8Px;
-      margin: 20Px 10Px 20Px 20Px;
+      width: 60px;
+      height: 60px;
+      border-radius: 8px;
+      margin: 20px 10px 20px 20px;
     }
     .list {
       flex: 1;
       overflow: hidden;
-      margin: 20Px 10Px;
+      margin: 20px 10px;
       font-weight: 400;
       li {
         color: #999999;
@@ -136,24 +121,24 @@ export default memberProfile;
     }
   }
   &-footer {
-    border-top: 10Px solid #f4f5f9;
-    padding: 14Px;
+    border-top: 10px solid #f4f5f9;
+    padding: 14px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     .button {
-      width: 100Px;
-      font-size: 14Px;
+      width: 100px;
+      font-size: 14px;
       cursor: pointer;
       background-color: #006eff;
       color: #ffffff;
-      padding: 8Px 20Px;
-      border-radius: 4Px;
+      padding: 8px 20px;
+      border-radius: 4px;
       border: none;
-      font-size: 14Px;
+      font-size: 14px;
       text-align: center;
-      line-height: 20Px;
+      line-height: 20px;
     }
   }
 }

src/TUIKit/TUIComponents/container/TUIChat/manage-components/style/color.scss

@@ -1,16 +1,13 @@
 .manage {
-  background: #ffffff;
-  box-shadow: 0 1Px 10Px 0 rgba(2, 16, 43, 0.15);
-
+  background: #FFFFFF;
+  box-shadow: 0 1px 10px 0 rgba(2, 16, 43, 0.15);
   &-header {
-    border-bottom: 1Px solid #e8e8e9;
-
+    border-bottom: 1px solid #E8E8E9;
     h1 {
       font-family: PingFangSC-Medium;
       font-weight: 500;
       color: #000000;
     }
-
     &-left {
       main {
         p {
@@ -20,102 +17,89 @@
       }
     }
   }
-
   .main {
     .userInfo {
       ol {
         dl {
           .userInfo-mask {
-            background: #ffffff;
-            box-shadow: 0 11Px 20Px 0 rgba(0, 0, 0, 0.3);
+            background: #FFFFFF;
+            box-shadow: 0 11px 20px 0 rgba(0,0,0, .3);
           }
         }
       }
     }
-
     .footer {
       li {
         font-weight: 400;
         color: #dc2113;
-        border-bottom: 1Px solid #e8e8e9;
+        border-bottom: 1px solid #E8E8E9;
       }
     }
   }
-
   .admin {
     &-content {
       aside {
         font-weight: 400;
         color: #000000;
         letter-spacing: 0;
-
         p {
           opacity: 0.6;
         }
       }
     }
-
     &-list {
       label {
         font-weight: 400;
         color: #000000;
       }
     }
-
     .last {
       &::before {
-        background: #e8e8e9;
+        background: #E8E8E9;
       }
     }
   }
-
   ol {
     dl {
       .userInfo-mask {
         background: #ffffff;
-        box-shadow: 0 11Px 20Px 0 rgba(0, 0, 0, 0.3);
+        box-shadow: 0 11px 20px 0 rgba(0,0,0, .3);
       }
     }
   }
 }
-
 .input {
-  border: 1Px solid #e8e8e9;
+  border: 1px solid #E8E8E9;
   font-weight: 400;
   color: #000000;
   opacity: 0.6;
 }
-
 .avatar {
-  background: #f4f5f9;
+  background: #F4F5F9;
   color: #000000;
 }
-
 .space-top {
-  border-top: 10Px solid #f4f5f9;
+  border-top: 10px solid #F4F5F9;
 }
-
 .btn {
-  background: #3370ff;
-  border: 0 solid #2f80ed;
-  color: #ffffff;
-
+  background: #3370FF;
+  border: 0 solid #2F80ED;
+  color: #FFFFFF;
   &-cancel {
-    background: #ffffff;
-    border: 1Px solid #dddddd;
+    background: #FFFFFF;
+    border: 1px solid #DDDDDD;
     color: #828282;
   }
 }
 
 .slider {
   &-box {
-    background: #e1e1e3;
+    background: #E1E1E3;
   }
-
   &-block {
-    background: #ffffff;
+    background: #FFFFFF;
     border: 0 solid rgba(0, 0, 0, 0.85);
-    box-shadow: 0 2Px 4Px 0 #d1d1d1;
+    box-shadow: 0 2px 4px 0 #D1D1D1;
   }
 }
 

src/TUIKit/TUIComponents/container/TUIChat/manage-components/style/web.scss

@@ -2,17 +2,17 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  width: 360Px;
+  width: 360px;
   overflow-y: auto;
-  border-radius: 8Px 0 0 8Px;
+  border-radius: 8px 0 0 8px;
   position: absolute;
   right: 0;
-  height: 100%;
+  height: calc(100% - 40px);
   z-index: 2;
-  top: 0Px;
+  top: 40px;
 
   &-header {
-    padding: 12Px;
+    padding: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -23,14 +23,14 @@
     }
 
     h1 {
-      font-size: 16Px;
+      font-size: 16px;
     }
 
     &-left {
       display: flex;
 
       .icon {
-        margin-right: 14Px;
+        margin-right: 14px;
       }
 
       main {
@@ -38,26 +38,25 @@
         flex-direction: column;
 
         p {
-          padding-top: 8Px;
-          font-size: 12Px;
+          padding-top: 8px;
+          font-size: 12px;
         }
       }
     }
   }
 
   .main {
-
     .userInfo {
-      padding: 0 20Px;
+      padding: 0 20px;
       display: flex;
       flex-direction: column;
-      font-size: 14Px;
+      font-size: 14px;
 
       &-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 14Px 0;
+        padding: 14px 0;
 
         p {
           display: flex;
@@ -69,26 +68,26 @@
         flex: 1;
         display: flex;
         flex-wrap: wrap;
-        padding-bottom: 20Px;
+        padding-bottom: 20px;
 
         dl {
           position: relative;
-          flex: 0 0 36Px;
+          flex: 0 0 36px;
           display: flex;
           flex-direction: column;
-          padding-right: 20Px;
+          padding-right: 20px;
 
           &:last-child {
             padding-right: 0;
           }
 
           .more {
-            padding-top: 10Px;
+            padding-top: 10px;
           }
 
           dd {
             text-align: center;
-            max-width: 36Px;
+            max-width: 36px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -97,7 +96,7 @@
           .userInfo-mask {
             position: absolute;
             z-index: 5;
-            padding: 20Px;
+            padding: 20px;
             left: 100%;
 
             li {
@@ -105,11 +104,11 @@
               align-items: center;
 
               label {
-                width: 60Px;
+                width: 60px;
               }
 
               span {
-                max-width: 200Px;
+                max-width: 200px;
                 word-break: keep-all;
               }
             }
@@ -119,14 +118,14 @@
     }
 
     .content {
-      padding: 0 20Px;
+      padding: 0 20px;
 
       li {
-        padding: 14Px 0;
+        padding: 14px 0;
         display: flex;
         justify-content: space-between;
         align-items: center;
-        font-size: 14Px;
+        font-size: 14px;
 
         .btn {
           flex: 1;
@@ -134,7 +133,7 @@
 
         article {
           opacity: 0.6;
-          width: 246Px;
+          width: 246px;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
@@ -142,19 +141,19 @@
 
         .end {
           align-self: flex-end;
-          margin-bottom: 4Px;
+          margin-bottom: 4px;
         }
       }
     }
 
     .footer {
-      padding: 0 20Px;
+      padding: 0 20px;
 
       li {
         cursor: pointer;
         width: 100%;
-        font-size: 14Px;
-        padding: 14Px 0;
+        font-size: 14px;
+        padding: 14px 0;
         text-align: center;
 
         &:last-child {
@@ -165,42 +164,42 @@
   }
 
   .admin {
-    padding: 20Px 0;
+    padding: 20px 0;
 
     &-content {
-      padding: 20Px 20Px 12Px;
+      padding: 20px 20px 12px;
       display: flex;
       align-items: center;
 
       aside {
         flex: 1;
-        font-size: 14Px;
+        font-size: 14px;
 
         p {
-          font-size: 12Px;
+          font-size: 12px;
         }
       }
     }
 
     &-list {
-      padding: 0 20Px;
+      padding: 0 20px;
 
       label {
         display: inline-block;
-        font-size: 14Px;
-        padding-bottom: 8Px;
+        font-size: 14px;
+        padding-bottom: 8px;
       }
     }
 
     .last {
-      padding-top: 13Px;
+      padding-top: 13px;
       position: relative;
 
       &::before {
         position: absolute;
-        content: '';
-        width: calc(100% - 40Px);
-        height: 1Px;
+        content: "";
+        width: calc(100% - 40px);
+        height: 1px;
         top: 0;
         left: 0;
         right: 0;
@@ -213,26 +212,26 @@
     flex: 1;
     display: flex;
     flex-wrap: wrap;
-    padding-bottom: 20Px;
+    padding-bottom: 20px;
 
     dl {
       position: relative;
-      flex: 0 0 36Px;
+      flex: 0 0 36px;
       display: flex;
       flex-direction: column;
-      padding-right: 20Px;
+      padding-right: 20px;
 
       &:last-child {
         padding-right: 0;
       }
 
       .more {
-        padding-top: 10Px;
+        padding-top: 10px;
       }
 
       dd {
         text-align: center;
-        max-width: 36Px;
+        max-width: 36px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -241,19 +240,19 @@
       .userInfo-mask {
         position: fixed;
         z-index: 5;
-        padding: 20Px;
-        margin-left: 36Px;
+        padding: 20px;
+        margin-left: 36px;
 
         li {
           display: flex;
           align-items: center;
 
           label {
-            width: 60Px;
+            width: 60px;
           }
 
           span {
-            max-width: 200Px;
+            max-width: 200px;
             word-break: keep-all;
           }
         }
@@ -263,9 +262,9 @@
 }
 
 .input {
-  border-radius: 4Px;
-  padding: 4Px 16Px;
-  font-size: 14Px;
+  border-radius: 4px;
+  padding: 4px 16px;
+  font-size: 14px;
 }
 
 .groupID {
@@ -274,48 +273,48 @@
   align-items: center;
 
   span {
-    padding-right: 10Px;
+    padding-right: 10px;
   }
 
   .icon {
-    width: 15Px;
-    height: 15Px;
+    width: 15px;
+    height: 15px;
     cursor: pointer;
   }
 }
 
 .avatar {
-  width: 36Px;
-  height: 36Px;
-  border-radius: 4Px;
-  font-size: 12Px;
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  font-size: 12px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .btn {
-  padding: 4Px 28Px;
-  font-size: 12Px;
-  line-height: 24Px;
-  border-radius: 4Px;
+  padding: 4px 28px;
+  font-size: 12px;
+  line-height: 24px;
+  border-radius: 4px;
 }
 
 .slider {
   &-box {
     display: flex;
     align-items: center;
-    width: 34Px;
-    height: 20Px;
-    border-radius: 10Px;
+    width: 34px;
+    height: 20px;
+    border-radius: 10px;
   }
 
   &-block {
     display: inline-block;
-    width: 16Px;
-    height: 16Px;
-    border-radius: 8Px;
-    margin: 0 2Px;
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+    margin: 0 2px;
   }
 }
 
@@ -325,5 +324,5 @@
 
 .delDialog-title {
   text-align: center;
-  padding: 20Px 0;
+  padding: 20px 0;
 }

src/TUIKit/TUIComponents/container/TUIChat/message-input/message-input-at.vue

@@ -1,10 +1,5 @@
 <template>
-  <div
-    class="message-input-at"
-    :class="[isH5 && 'message-input-at-h5']"
-    v-if="showAtList"
-    ref="MessageInputAt"
-  >
+  <div class="message-input-at" :class="[isH5 && 'message-input-at-h5']" v-if="showAtList" ref="MessageInputAt">
     <div class="memberList" ref="dialog">
       <header class="memberList-title" v-if="isH5">
         <span class="title">{{ $t('TUIChat.选择提醒的人') }}</span>
@@ -19,14 +14,8 @@
           @click="selectItem(index)"
           ref="memberListItems"
         >
-          <img
-            :src="(item as any)?.avatar || 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
-          />
-          <span>
-            {{
-              (item as any)?.nick ? (item as any)?.nick : (item as any)?.userID
-            }}
-          </span>
+          <img :src="(item as any)?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'" />
+          <span>{{ (item as any)?.nick ? (item as any)?.nick : (item as any)?.userID }}</span>
         </li>
       </ul>
     </div>
@@ -45,7 +34,7 @@ const allMemberList = ref<Array<any>>();
 const showMemberList = ref<Array<any>>();
 const position = ref({
   left: 0,
-  top: 0
+  top: 0,
 });
 const command = ref();
 const selectedIndex = ref(0);
@@ -57,24 +46,16 @@ const MessageInputAtSuggestion = () => {
     allowedPrefixes: null,
     items: (props: { query: string }) => {
       const queryResult = allMemberList?.value?.filter(
-        item =>
+        (item) =>
           item?.nick?.toLowerCase()?.startsWith(props?.query?.toLowerCase()) ||
           item?.userID?.toLowerCase()?.startsWith(props?.query?.toLowerCase())
       );
-      showMemberList.value = queryResult?.length
-        ? queryResult
-        : allMemberList.value;
+      showMemberList.value = queryResult?.length ? queryResult : allMemberList.value;
       return showMemberList.value;
     },
     render: () => {
       return {
-        onStart: (
-          props: SuggestionProps<{
-            id?: string;
-            userID?: string;
-            isAll?: boolean;
-          }>
-        ) => {
+        onStart: (props: SuggestionProps<{ id?: string; userID?: string; isAll?: boolean }>) => {
           showAtList.value = true;
           if (!props?.clientRect) {
             return;
@@ -83,7 +64,7 @@ const MessageInputAtSuggestion = () => {
           if (rect?.left && rect?.top && !isH5.value) {
             position.value = {
               left: rect?.left,
-              top: rect?.top
+              top: rect?.top,
             };
           }
           command.value = props.command;
@@ -97,7 +78,7 @@ const MessageInputAtSuggestion = () => {
           if (rect?.left && rect?.top && !isH5.value) {
             position.value = {
               left: rect?.left,
-              top: rect?.top
+              top: rect?.top,
             };
           }
         },
@@ -132,26 +113,23 @@ const MessageInputAtSuggestion = () => {
           showMemberList.value = allMemberList.value;
           position.value = {
             left: 0,
-            top: 0
+            top: 0,
           };
-        }
+        },
       };
-    }
+    },
   };
 };
 
 const upHandler = () => {
   if (!showMemberList?.value?.length) return;
-  selectedIndex.value =
-    (selectedIndex.value + showMemberList?.value?.length - 1) %
-    showMemberList?.value?.length;
+  selectedIndex.value = (selectedIndex.value + showMemberList?.value?.length - 1) % showMemberList?.value?.length;
   memberListItems?.value[selectedIndex.value]?.scrollIntoView(false);
 };
 
 const downHandler = () => {
   if (!showMemberList?.value?.length) return;
-  selectedIndex.value =
-    (selectedIndex.value + 1) % showMemberList?.value?.length;
+  selectedIndex.value = (selectedIndex.value + 1) % showMemberList?.value?.length;
   memberListItems?.value[selectedIndex.value]?.scrollIntoView(false);
 };
 
@@ -166,7 +144,7 @@ const selectItem = (index: number) => {
     command.value &&
       command.value({
         id: (item as any)?.userID,
-        label: (item as any)?.nick || (item as any)?.userID
+        label: (item as any)?.nick || (item as any)?.userID,
       });
   }
 };
@@ -175,20 +153,20 @@ const MessageInputAtComponent = defineComponent({
   props: {
     memberList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     isGroup: {
       type: Boolean,
-      default: false
+      default: false,
     },
     selfInfo: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     isH5: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   setup(props) {
     const { memberList, isGroup, selfInfo } = toRefs(props);
@@ -196,7 +174,7 @@ const MessageInputAtComponent = defineComponent({
       userID: TIM.TYPES.MSG_AT_ALL,
       nick: '所有人',
       isAll: true,
-      avatar: atIcon
+      avatar: atIcon,
     };
     const dialog = ref();
     watchEffect(() => {
@@ -220,27 +198,22 @@ const MessageInputAtComponent = defineComponent({
       },
       {
         deep: true,
-        immediate: true
+        immediate: true,
       }
     );
 
     watch(
       () => [position.value, MessageInputAt?.value],
       () => {
-        if (
-          isH5.value ||
-          !MessageInputAt?.value ||
-          !MessageInputAt?.value?.style
-        ) {
+        if (isH5.value || !MessageInputAt?.value || !MessageInputAt?.value?.style) {
           return;
         }
-        MessageInputAt.value.style.left = position.value.left + 'Px';
-        MessageInputAt.value.style.top =
-          position.value.top - MessageInputAt.value.clientHeight + 'Px';
+        MessageInputAt.value.style.left = position.value.left + 'px';
+        MessageInputAt.value.style.top = position.value.top - MessageInputAt.value.clientHeight + 'px';
       },
       {
         deep: true,
-        immediate: true
+        immediate: true,
       }
     );
 
@@ -249,7 +222,7 @@ const MessageInputAtComponent = defineComponent({
       showMemberList.value = allMemberList.value;
       position.value = {
         left: 0,
-        top: 0
+        top: 0,
       };
     };
 
@@ -268,7 +241,7 @@ const MessageInputAtComponent = defineComponent({
       memberListItems,
       dialog
     };
-  }
+  },
 });
 
 export default MessageInputAtComponent;
@@ -290,7 +263,7 @@ export { MessageInputAtSuggestion, MessageInputAtComponent };
 .memberList-box {
   &-header {
     height: 2.5rem;
-    padding-top: 5Px;
+    padding-top: 5px;
     cursor: pointer;
 
     &:hover {
@@ -303,7 +276,7 @@ export { MessageInputAtSuggestion, MessageInputAtComponent };
     font-size: 0.88rem;
     color: #000000;
     letter-spacing: 0;
-    padding: 5Px;
+    padding: 5px;
   }
   &-body {
     height: 2.5rem;
@@ -325,7 +298,7 @@ export { MessageInputAtSuggestion, MessageInputAtComponent };
   img {
     width: 1.5rem;
     height: 1.5rem;
-    padding-left: 10Px;
+    padding-left: 10px;
   }
   .selected {
     background: rgba(0, 110, 255, 0.1);
@@ -351,25 +324,25 @@ export { MessageInputAtSuggestion, MessageInputAtComponent };
     width: 100%;
     max-width: 100%;
     background: white;
-    border-radius: 12Px 12Px 0 0;
+    border-radius: 12px 12px 0 0;
     display: flex;
     flex-direction: column;
     overflow: hidden;
     &-title {
       height: fit-content;
-      width: calc(100% - 30Px);
+      width: calc(100% - 30px);
       text-align: center;
       vertical-align: middle;
-      padding: 15Px;
+      padding: 15px;
       .title {
         vertical-align: middle;
         display: inline-block;
-        font-size: 16Px;
+        font-size: 16px;
       }
       .close {
         vertical-align: middle;
         position: absolute;
-        right: 10Px;
+        right: 10px;
         display: inline-block;
       }
     }
@@ -377,13 +350,13 @@ export { MessageInputAtSuggestion, MessageInputAtComponent };
       flex: 1;
       overflow-y: scroll;
       &-body {
-        padding: 10Px;
+        padding: 10px;
         img {
-          width: 26Px;
-          height: 26Px;
+          width: 26px;
+          height: 26px;
         }
         span {
-          font-size: 14Px;
+          font-size: 14px;
         }
       }
     }

src/TUIKit/TUIComponents/container/TUIChat/message-input/message-input-button.vue

@@ -1,12 +1,6 @@
 <template>
   <div :class="['message-input-button', isH5 && 'message-input-button-h5']">
-    <button
-      v-if="enableSend"
-      class="message-input-button-cont"
-      data-type="text"
-      @click="sendMessage"
-      :disabled="false"
-    >
+    <button v-if="enableSend" class="message-input-button-cont" data-type="text" @click="sendMessage" :disabled="false">
       <p class="message-input-button-hover">
         {{ $t('TUIChat.按Enter发送，Ctrl+Enter换行') }}
       </p>
@@ -19,40 +13,40 @@ import { defineProps, toRefs, defineEmits, ref } from 'vue';
 const props = defineProps({
   enableSend: {
     type: Boolean,
-    default: true
+    default: true,
   },
   messages: {
     type: Array,
-    default: () => []
+    default: () => [],
   },
   isH5: {
     type: Boolean,
-    default: true
-  }
+    default: true,
+  },
 });
 const { enableSend } = toRefs(props);
 const emits = defineEmits(['sendMessage']);
 const sendMessage = () => {
   emits('sendMessage');
-};
+}
 </script>
 <style scoped lang="scss">
 @import url('../../../styles/common.scss');
 @import url('../../../styles/icon.scss');
 .message-input-button {
   position: absolute;
-  bottom: 20Px;
-  right: 20Px;
-  &-h5 {
+  bottom: 20px;
+  right: 20px;
+  &-h5{
     position: static;
   }
   &-cont {
-    padding: 8Px 20Px;
-    border-radius: 4Px;
+    padding: 8px 20px;
+    border-radius: 4px;
     border: none;
-    font-size: 14Px;
+    font-size: 14px;
     text-align: center;
-    line-height: 20Px;
+    line-height: 20px;
     font-weight: 400;
     background: #006eff;
     color: #ffffff;
@@ -71,13 +65,13 @@ const sendMessage = () => {
     position: absolute;
     right: 120%;
     word-break: keep-all;
-    height: 30Px;
+    height: 30px;
     white-space: nowrap;
     top: 0;
     bottom: 0;
     margin: auto 0;
-    padding: 5Px 10Px;
-    border-radius: 3Px;
+    padding: 5px 10px;
+    border-radius: 3px;
     background: #000000;
     color: #ffffff;
     opacity: 0.3;
@@ -87,9 +81,9 @@ const sendMessage = () => {
       position: absolute;
       width: 0;
       height: 0;
-      right: -20Px;
-      border: 10Px solid transparent;
-      border-left: 10Px solid #000000;
+      right: -20px;
+      border: 10px solid transparent;
+      border-left: 10px solid #000000;
     }
   }
 }

src/TUIKit/TUIComponents/container/TUIChat/message-input/message-input-editor.vue

@@ -119,10 +119,10 @@ const editor = useEditor({
       const keyboardHeight = document.body.scrollHeight - window.innerHeight;
       (
         document.getElementById('app') as any
-      ).style.marginBottom = `${keyboardHeight}Px`;
+      ).style.marginBottom = `${keyboardHeight}px`;
       (
         document.getElementById('app') as any
-      ).style.height = `calc(100% - ${keyboardHeight}Px)`;
+      ).style.height = `calc(100% - ${keyboardHeight}px)`;
     }
     if (!enableTyping.value || isGroup.value) return;
     inputBlur.value = true;
@@ -227,8 +227,8 @@ const drawFileCanvasToImageUrl = async (file: any) => {
   const canvas = document.createElement('canvas');
   let width = 160;
   let height = 50;
-  canvas.style.width = width + 'Px';
-  canvas.style.height = height + 'Px';
+  canvas.style.width = width + 'px';
+  canvas.style.height = height + 'px';
   // 设置内存中的实际大小（缩放以考虑额外的像素密度）
   let scale = window.devicePixelRatio; // 在视网膜屏幕上更改为 1 以查看模糊
   canvas.width = Math.floor(width * scale);
@@ -449,25 +449,21 @@ defineExpose({
     display: flex;
     flex-direction: column;
     flex: 1;
-    height: calc(100% - 13Px);
-    width: calc(100% - 20Px);
-    padding: 3Px 10Px 10Px 10Px;
+    height: calc(100% - 13px);
+    width: calc(100% - 20px);
+    padding: 3px 10px 10px 10px;
     overflow: hidden;
   }
   &-area {
     flex: 1;
     display: flex;
     overflow-y: scroll;
-
-    &::-webkit-scrollbar {
-      background: transparent;
-    }
   }
   &-mute {
     flex: 1;
     display: flex;
     color: #999999;
-    font-size: 14Px;
+    font-size: 14px;
     justify-content: center;
     align-items: center;
   }
@@ -476,11 +472,11 @@ defineExpose({
   flex: 1;
   height: auto;
   background: #f4f5f9;
-  border-radius: 9.4Px;
-  padding: 7Px 0Px 7Px 10Px;
-  font-size: 16Px !important;
-  max-height: 86Px;
-  margin-right: 7Px;
+  border-radius: 9.4px;
+  padding: 7px 0px 7px 10px;
+  font-size: 16px !important;
+  max-height: 86px;
+  margin-right: 7px;
 }
 </style>
 <style lang="scss">
@@ -488,7 +484,7 @@ defineExpose({
   min-height: 100%;
   height: fit-content;
   flex: 1;
-  font-size: 14Px;
+  font-size: 14px;
   word-wrap: break-word;
   word-break: break-all;
   white-space: pre-wrap;
@@ -522,29 +518,29 @@ defineExpose({
   }
   img {
     &.ProseMirror-selectednode {
-      outline: 2Px solid #68cef8;
+      outline: 2px solid #68cef8;
     }
   }
 
   .custom-image {
     &-normal {
-      max-height: 120Px;
-      max-width: 200Px;
+      max-height: 120px;
+      max-width: 200px;
     }
     &-file {
-      height: 50Px;
-      width: 160Px;
-      border: 1Px solid #e8e8e9;
-      border-radius: 5Px;
+      height: 50px;
+      width: 160px;
+      border: 1px solid #e8e8e9;
+      border-radius: 5px;
     }
     &-emoji {
-      height: 20Px;
-      width: 20Px;
+      height: 20px;
+      width: 20px;
     }
   }
 
   .ProseMirror-selectednode {
-    outline: 2Px solid #68cef8;
+    outline: 2px solid #68cef8;
     cursor: none;
   }
   p,

src/TUIKit/TUIComponents/container/TUIChat/message-input/message-input-reference-or-reply.vue

@@ -3,10 +3,8 @@
     :class="[
       replyOrReference?.show === 'reference' && 'message-input-reference',
       replyOrReference?.show === 'reply' && 'message-input-reply',
-      isH5 &&
-        replyOrReference?.show === 'reference' &&
-        'message-input-reference-h5',
-      isH5 && replyOrReference?.show === 'reply' && 'message-input-reply-h5'
+      isH5 && replyOrReference?.show === 'reference' && 'message-input-reference-h5',
+      isH5 && replyOrReference?.show === 'reply' && 'message-input-reply-h5',
     ]"
     v-if="replyOrReference?.show"
   >
@@ -14,11 +12,7 @@
       <div class="reference-box">
         <div class="reference-box-show">
           <span class="reference-box-show-name">
-            {{
-              replyOrReference?.message?.nick
-                ? replyOrReference?.message?.nick
-                : replyOrReference?.message?.from
-            }}:
+            {{ replyOrReference?.message?.nick ? replyOrReference?.message?.nick : replyOrReference?.message?.from }}:
           </span>
           <span>{{ replyOrReference?.content }}</span>
         </div>
@@ -29,11 +23,8 @@
       <div class="reply-box">
         <i></i>
         <div class="reply-box-show">
-          <span>
-            {{
-              replyOrReference?.message?.nick
-                ? replyOrReference?.message?.nick
-                : replyOrReference?.message?.from
+          <span
+            >{{ replyOrReference?.message?.nick ? replyOrReference?.message?.nick : replyOrReference?.message?.from
             }}{{ isH5 ? ':' : '' }}
           </span>
           <span>{{ replyOrReference?.content }}</span>
@@ -48,12 +39,12 @@ import { defineProps, toRefs, defineEmits } from 'vue';
 const props = defineProps({
   replyOrReference: {
     type: Object,
-    default: () => ({})
+    default: () => ({}),
   },
   isH5: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 });
 const emit = defineEmits(['resetReplyOrReference']);
 const { replyOrReference, isH5 } = toRefs(props);
@@ -68,34 +59,34 @@ const close = () => {
   order: 1;
   .reference {
     width: auto;
-    padding-bottom: 0Px;
-    margin: 0Px 100Px 10Px 10Px;
+    padding-bottom: 0px;
+    margin: 0px 100px 10px 10px;
     display: flex;
 
     &-box {
       padding: 0;
       overflow: hidden;
       width: max-content;
-      padding: 10Px;
+      padding: 10px;
       background-color: #fbfbfb;
       display: flex;
-      border-radius: 8Px;
+      border-radius: 8px;
 
       label {
         cursor: pointer;
-        margin-top: 5Px;
+        margin-top: 5px;
       }
 
       &-show {
         width: max-content;
-        padding-right: 10Px;
+        padding-right: 10px;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
         flex: 1;
 
         &-name {
-          padding-right: 5Px;
+          padding-right: 5px;
         }
 
         span {
@@ -103,8 +94,8 @@ const close = () => {
           font-family: 'PingFang SC';
           font-style: normal;
           font-weight: 400;
-          font-size: 12Px;
-          line-height: 17Px;
+          font-size: 12px;
+          line-height: 17px;
           color: #666666;
         }
       }
@@ -121,16 +112,16 @@ const close = () => {
       flex: 1;
       align-items: center;
       display: flex;
-      padding: 0 10Px;
+      padding: 0 10px;
 
       i {
         height: 3.5rem;
-        border: 1Px solid #e8e8e9;
+        border: 1px solid #e8e8e9;
       }
 
       label {
         cursor: pointer;
-        margin-top: 5Px;
+        margin-top: 5px;
       }
 
       &-show {
@@ -142,7 +133,7 @@ const close = () => {
         text-overflow: ellipsis;
         flex-direction: column;
         justify-content: center;
-        padding-left: 6Px;
+        padding-left: 6px;
 
         span {
           height: 1.25rem;
@@ -163,7 +154,7 @@ const close = () => {
 .message-input-reply-h5 {
   order: -1;
   flex: 1 0 100%;
-  padding-bottom: 10Px;
+  padding-bottom: 10px;
   .reply {
     &-box {
       padding: 0;
@@ -176,7 +167,7 @@ const close = () => {
           width: auto;
         }
         span:first-child {
-          padding-right: 2Px;
+          padding-right: 2px;
         }
         span:last-child {
           flex: 1;
@@ -199,8 +190,8 @@ const close = () => {
       padding: 0;
       width: 100%;
       max-width: 100%;
-      padding: 10Px;
-      margin: 5Px 0;
+      padding: 10px;
+      margin: 5px 0;
 
       &-show {
         overflow: hidden;

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/call/style/h5.scss

@@ -12,32 +12,32 @@
     justify-content: flex-end;
     padding: 0;
     background: rgba(0, 0, 0, 0.5);
-    box-shadow: 0 2Px 12Px 0 rgb(0 0 0 / 10%);
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
 
     .call-main-content {
-      border-radius: 12Px 12Px 0 0;
+      border-radius: 12px 12px 0 0;
       background-color: #ffffff;
     }
 
     .call-main-voice,
     .call-main-video {
-      height: 30Px;
-      padding: 10Px;
-      font-size: 16Px;
-      border-bottom: 1Px solid #f7f8fa;
+      height: 30px;
+      padding: 10px;
+      font-size: 16px;
+      border-bottom: 1px solid #F7F8FA;
       display: flex;
       justify-content: center;
 
       i {
-        margin-right: 10Px;
+        margin-right: 10px;
       }
     }
 
     footer {
-      border-top: 10Px solid #f7f8fa;
-      height: 30Px;
-      font-size: 16Px;
-      padding: 10Px;
+      border-top: 10px solid #F7F8FA;
+      height: 30px;
+      font-size: 16px;
+      padding: 10px;
       text-align: center;
       align-items: center;
     }

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/call/style/web.scss

@@ -10,7 +10,7 @@
     align-items: center;
 
     .icon-down-arrow {
-      margin: 12Px 1Px 0;
+      margin: 12px 1px 0;
     }
   }
 
@@ -18,21 +18,21 @@
     position: absolute;
     z-index: 5;
     background: #ffffff;
-    top: 37Px;
-    left: calc(-50% + 20Px);
-    border-radius: 2Px;
+    top: 37px;
+    left: calc(-50% + 20px);
+    border-radius: 2px;
     display: flex;
     flex-direction: column;
-    width: 80Px;
-    border: 0.5Px solid #e0e0e0;
-    box-shadow: 0 4Px 12Px 0 rgba(0, 0, 0, 0.06);
+    width: 80px;
+    border: 0.5px solid #e0e0e0;
+    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
 
     &-voice,
     &-video {
-      height: 34Px;
+      height: 34px;
       text-align: center;
-      font-size: 13Px;
-      line-height: 34Px;
+      font-size: 13px;
+      line-height: 34px;
       align-items: center;
     }
 
@@ -46,33 +46,33 @@
     content: '';
     position: absolute;
     bottom: 100%;
-    left: calc(50% - 9Px);
-    border-left: 7Px solid transparent;
-    border-right: 7Px solid transparent;
-    border-bottom: 7Px solid #e0e0e0;
+    left: calc(50% - 9px);
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    border-bottom: 7px solid #e0e0e0;
   }
 
   &-main:after {
     content: '';
     position: absolute;
     bottom: 100%;
-    left: calc(50% - 8Px);
-    border-left: 6Px solid transparent;
-    border-right: 6Px solid transparent;
-    border-bottom: 6Px solid #ffffff;
+    left: calc(50% - 8px);
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid #ffffff;
   }
 
   .uncall-dialog {
-    width: 500Px;
-    height: 300Px;
-    background: linear-gradient(180deg, #e9f3ff 0%, #f4f8ff 100%);
-    border-radius: 20Px;
+    width: 500px;
+    height: 300px;
+    background: linear-gradient(180deg, #E9F3FF 0%, #F4F8FF 100%);
+    border-radius: 20px;
 
     &-body {
       a {
         font-family: PingFangSC-Regular;
         font-weight: 400;
-        color: #006eff;
+        color: #006EFF;
         letter-spacing: 0;
       }
     }
@@ -85,10 +85,10 @@
   top: calc(50% - 18rem);
   width: 50rem;
   height: 36rem;
-  border-radius: 16Px;
-  box-shadow: rgba(0, 0, 0, 0.16) 0Px 3Px 6Px, rgba(0, 0, 0, 0.23) 0Px 3Px 6Px;
+  border-radius: 16px;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 
   &-left {
-    left: calc(50% - 25rem + 150Px);
+    left: calc(50% - 25rem + 150px);
   }
 }

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/custom/Custom.vue

@@ -1,30 +1,27 @@
 <template>
   <div class="custom">
     <i class="icon icon-custom" @click="toggleShow"></i>
-    <main class="custom-main" v-if="show">
+    <main class="custom-main"  v-if="show">
       <ul class="custom-list">
-        <li class="custom-list-item">
+        <li  class="custom-list-item">
           <label>data</label>
-          <input type="text" v-model="custom.data" />
+          <input type="text" v-model="custom.data">
         </li>
-        <li class="custom-list-item">
+        <li  class="custom-list-item">
           <label>description</label>
-          <input type="text" v-model="custom.description" />
+          <input type="text" v-model="custom.description">
         </li>
-        <li class="custom-list-item">
+        <li  class="custom-list-item">
           <label>extension</label>
-          <input type="text" v-model="custom.extension" />
+          <input type="text" v-model="custom.extension">
         </li>
       </ul>
       <ul class="custom-footer">
-        <button class="btn btn-cancel" @click="cancel">{{ $t('取消') }}</button>
+        <button class="btn btn-cancel" @click="cancel">{{$t('取消')}}</button>
         <button
           class="btn btn-default"
           :disabled="!custom.data && !custom.description && custom.extension"
-          @click="submit"
-        >
-          {{ $t('发送') }}
-        </button>
+          @click="submit">{{$t('发送')}}</button>
       </ul>
     </main>
     <div v-if="show" class="mask" @click.self="toggleShow"></div>
@@ -38,18 +35,18 @@ const Custom = defineComponent({
   props: {
     show: {
       type: Boolean,
-      default: () => false
-    }
+      default: () => false,
+    },
   },
-  setup(props: any, ctx: any) {
+  setup(props:any, ctx:any) {
     const data = reactive({
       show: false,
       custom: {
         data: '',
         description: '',
-        extension: ''
+        extension: '',
       },
-      TUIServer: null
+      TUIServer: null,
     });
 
     data.TUIServer = Custom.TUIServer;
@@ -66,7 +63,7 @@ const Custom = defineComponent({
       data.custom = {
         data: '',
         description: '',
-        extension: ''
+        extension: '',
       };
       toggleShow();
     };
@@ -76,13 +73,14 @@ const Custom = defineComponent({
       cancel();
     };
 
+
     return {
       ...toRefs(data),
       toggleShow,
       cancel,
-      submit
+      submit,
     };
-  }
+  },
 });
 export default Custom;
 </script>
@@ -96,11 +94,11 @@ export default Custom;
   &-main {
     position: absolute;
     z-index: 5;
-    width: 315Px;
+    width: 315px;
     background: #ffffff;
-    top: -180Px;
-    box-shadow: 0 2Px 12Px 0 rgba(0, 0, 0, 0.1);
-    padding: 10Px;
+    top: -180px;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0, .1);
+    padding: 10px;
     display: flex;
     flex-direction: column;
   }
@@ -109,19 +107,19 @@ export default Custom;
     display: flex;
     flex-direction: column;
     &-item {
-      padding-bottom: 15Px;
+      padding-bottom: 15px;
       label {
-        width: 88Px;
-        font-size: 18Px;
-        padding: 0 20Px;
+        width: 88px;
+        font-size: 18px;
+        padding: 0 20px;
         display: inline-block;
       }
       input {
         flex: 1;
-        height: 24Px;
-        padding: 0 10Px;
-        border: 1Px solid #dddddd;
-        border-radius: 5Px;
+        height: 24px;
+        padding: 0 10px;
+        border: 1px solid #dddddd;
+        border-radius: 5px;
       }
     }
   }
@@ -132,22 +130,22 @@ export default Custom;
   }
 }
 .btn {
-  padding: 8Px 20Px;
-  border-radius: 4Px;
+  padding: 8px 20px;
+  border-radius: 4px;
   border: none;
   font-weight: 400;
-  font-size: 14Px;
-  color: #ffffff;
+  font-size: 14px;
+  color: #FFFFFF;
   letter-spacing: 0;
   text-align: center;
-  line-height: 20Px;
+  line-height: 20px;
   &-cancel {
-    border: 1Px solid #dddddd;
+    border: 1px solid #dddddd;
     color: #666666;
   }
   &-default {
-    background: #006eff;
-    border: 1Px solid #006eff;
+    background: #006EFF;
+    border: 1px solid #006EFF;
   }
   &:disabled {
     opacity: 0.3;

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/evaluate/style/color.scss

@@ -1,61 +1,51 @@
 .evaluate {
   &-main {
     background: #ffffff;
-    box-shadow: 0 2Px 12Px 0 rgba(0, 0, 0, 0.1);
-
+    box-shadow: 0 2px 12px 0 rgba(0,0,0, .1);
     header {
       font-weight: 500;
-      color: #1c1c1c;
+      color: #1C1C1C;
     }
-
     footer {
       font-weight: 500;
       color: #999999;
-
       a {
-        color: #006eff;
+        color: #006EFF;
       }
     }
   }
-
   &-content {
     textarea {
-      background: #f8f8f8;
-      border: 1Px solid #ececec;
+      background: #F8F8F8;
+      border: 1px solid #ECECEC;
     }
-
     .btn {
-      background: #3370ff;
+      background: #3370FF;
       font-weight: 400;
-      color: #ffffff;
+      color: #FFFFFF;
       cursor: pointer;
     }
   }
-
   &-list {
     &-item {
       font-weight: 400;
-      color: #50545c;
+      color: #50545C;
     }
   }
-
-  &-H5 {
+  &-H5{
     &-main {
-      background: rgba(0, 0, 0, 0.5);
-
+      background: rgba(0,0,0,.5);
       .evaluate-main-content {
-        background: #ffffff;
-
+        background: #FFFFFF;
         p {
           a {
-            color: #3370ff;
+            color: #3370FF;
           }
         }
-
         .close {
           font-family: PingFangSC-Regular;
           font-weight: 400;
-          color: #3370ff;
+          color: #3370FF;
           letter-spacing: 0;
         }
       }

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/evaluate/style/h5.scss

@@ -1,8 +1,7 @@
-.evaluate-H5 {
+.evaluate-H5{
   display: inline-block;
   position: relative;
   cursor: auto;
-
   .evaluate-main {
     position: fixed;
     left: 0;
@@ -13,68 +12,58 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(0,0,0,.5);
     padding: 0;
-
     .evaluate-main-content {
-      background: #ffffff;
-      padding: 23Px;
-
+      background: #FFFFFF;
+      padding: 23px;
       header {
         display: flex;
         justify-content: space-between;
-
         aside {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
-          font-size: 16Px;
-          line-height: 28Px;
-
+          font-size: 16px;
+          line-height: 28px;
           h1 {
-            font-size: 20Px;
+            font-size: 20px;
           }
         }
-
         .close {
-          font-size: 18Px;
-          line-height: 27Px;
+          font-size: 18px;
+          line-height: 27px;
         }
       }
-
-      .evaluate-item {
-        width: 40Px;
-        height: 24Px;
+      .evaluate-item{
+        width: 40px;
+        height: 24px;
         text-align: center;
         cursor: auto;
-        // padding: 4Px 0;
-        font-size: 12Px;
+        // padding: 4px 0;
+        font-size: 12px;
       }
-
       .evaluate-content {
         background: none;
-
         .evaluate-list-item {
           .icon {
             transform: scale(1.5);
           }
         }
       }
-
       textarea {
-        font-size: 16Px;
+        font-size: 16px;
         width: 100%;
       }
     }
-
     .evaluate-main-footer {
       width: 100%;
       display: flex;
-
       .btn {
         flex: 1;
-        padding: 14Px 0;
-        font-size: 18Px;
+        padding: 14px 0;
+        font-size: 
+        18px;
       }
     }
   }

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/evaluate/style/web.scss

@@ -2,78 +2,68 @@
   display: inline-block;
   position: relative;
   cursor: pointer;
-
   .icon-evaluate {
-    margin: 12Px 10Px 0;
+     margin: 12px 10px 0;
   }
-
   &-main {
     position: absolute;
     z-index: 5;
-    width: 315Px;
-    top: -275Px;
-    padding: 12Px;
+    width: 315px;
+    top: -275px;
+    padding: 12px;
     display: flex;
     flex-direction: column;
-
     header {
       h1 {
-        font-size: 12Px;
+        font-size: 12px;
         text-align: center;
       }
     }
-
     footer {
-      font-size: 12Px;
+      font-size: 12px;
       text-align: center;
     }
   }
-
   &-content {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 12Px 0;
+    padding: 12px 0;
     background: url('https://web.sdk.qcloud.com/im/assets/images/login-background.png') no-repeat;
     background-size: cover;
-    background-position-x: 128Px;
-    background-position-y: 77Px;
-
+    background-position-x: 128px;
+    background-position-y: 77px;
     textarea {
       box-sizing: border-box;
-      width: 288Px;
-      height: 90Px;
-      margin: 12Px 0;
-      padding: 12Px;
-      border-radius: 2Px;
+      width: 288px;
+      height: 90px;
+      margin: 12px 0;
+      padding: 12px;
+      border-radius: 2px;
       resize: none;
     }
-
     .btn {
       border: none;
-      border-radius: 5Px;
-      font-size: 12Px;
+      border-radius: 5px;
+      font-size: 12px;
       text-align: center;
-      line-height: 24Px;
-      padding: 2Px 46Px;
+      line-height: 24px;
+      padding: 2px 46px;
       cursor: pointer;
     }
   }
-
   &-list {
     flex: 1;
     display: flex;
-
     &-item {
-      width: 24Px;
-      height: 24Px;
+      width: 24px;
+      height: 24px;
       text-align: center;
       cursor: pointer;
-      padding: 4Px 0;
-      font-size: 12Px;
-      padding-right: 15Px;
-
-      &:last-child {
+      padding: 4px 0;
+      font-size: 12px;
+      padding-right: 15px;
+      &:last-child{
         padding-right: 0 !important;
       }
     }

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/face/style/color.scss

@@ -1,6 +1,6 @@
 .face {
   &-main {
     background: #ffffff;
-    box-shadow: 0 2Px 12Px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 12px 0 rgba(0,0,0, .1);
   }
 }

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/face/style/web.scss

@@ -2,46 +2,38 @@
   display: inline-block;
   position: relative;
   cursor: pointer;
-
   &-main {
     position: absolute;
     z-index: 5;
-    width: 435Px;
-    height: 250Px;
-    top: -270Px;
-    padding: 10Px;
+    width: 435px;
+    height: 250px;
+    top: -270px;
+    padding: 10px;
     display: flex;
     flex-direction: column;
   }
-
   &-list {
     flex: 1;
     display: flex;
     flex-wrap: wrap;
     overflow-y: auto;
-
     &-item {
-      padding: 5Px;
+      padding: 5px;
     }
-
     img {
-      width: 30Px;
+      width: 30px;
     }
-
     .face-img {
-      width: 60Px;
+      width: 60px;
     }
   }
-
   &-tab {
     display: flex;
     align-items: center;
-
     &-item {
-      padding: 0 10Px;
-
+      padding: 0 10px;
       img {
-        width: 30Px;
+        width: 30px;
       }
     }
   }

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/forward/forward.vue

@@ -1,11 +1,6 @@
 <template>
   <div>
-    <div
-      class="forward"
-      :class="[isH5 ? 'forward-h5' : '']"
-      v-if="show"
-      ref="dialog"
-    >
+    <div class="forward" :class="[isH5 ? 'forward-h5' : '']" v-if="show" ref="dialog">
       <Transfer
         title="转发"
         :list="list"
@@ -35,32 +30,32 @@ import { onClickOutside } from '@vueuse/core';
 
 const Forward = defineComponent({
   components: {
-    Transfer
+    Transfer,
   },
   name: '转发',
   props: {
     list: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     message: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     show: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     isH5: {
       type: Boolean,
-      default: () => false
-    }
+      default: () => false,
+    },
   },
   setup(props: any, ctx: any) {
     const data = reactive({
       list: [],
       show: false,
-      to: -1
+      to: -1,
     });
 
     const dialog: any = ref();
@@ -99,9 +94,9 @@ const Forward = defineComponent({
       ...toRefs(data),
       toggleShow,
       handleForWordMessage,
-      dialog
+      dialog,
     };
-  }
+  },
 });
 export default Forward;
 </script>
@@ -113,23 +108,23 @@ export default Forward;
   position: absolute;
   z-index: 5;
   box-sizing: border-box;
-  border-radius: 8Px;
-  padding: 15Px 20Px;
+  border-radius: 8px;
+  padding: 15px 20px;
   padding: 0;
-  left: -90Px;
+  left: -90px;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  box-shadow: 0 11Px 20Px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.3);
   header {
-    padding: 20Px;
+    padding: 20px;
     display: flex;
     justify-content: space-between;
   }
   .list {
     box-sizing: border-box;
     margin: 0;
-    padding: 20Px;
+    padding: 20px;
     width: 100%;
     height: 100%;
     background: #ffffff;
@@ -138,15 +133,15 @@ export default Forward;
     &-item {
       display: flex;
       align-items: center;
-      padding: 10Px;
+      padding: 10px;
       &:hover {
         background: #dddddd;
       }
       .avatar {
-        width: 36Px;
-        height: 36Px;
-        border-radius: 4Px;
-        font-size: 12Px;
+        width: 36px;
+        height: 36px;
+        border-radius: 4px;
+        font-size: 12px;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -156,7 +151,7 @@ export default Forward;
   footer {
     display: flex;
     justify-content: space-around;
-    padding: 20Px 0;
+    padding: 20px 0;
   }
 }
 .forward-h5 {

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/imagePreviewer/imagePreviewer.vue

@@ -209,10 +209,10 @@ const handleTwoTouches = (e: any) => {
   const getDistance = (
     startX: number,
     startY: number,
-    stoPx: number,
+    stopX: number,
     stopY: number
   ) => {
-    return Math.hypot(stoPx - startX, stopY - startY);
+    return Math.hypot(stopX - startX, stopY - startY);
   };
   if (
     !isNumber(touchStore.pageX1) ||
@@ -343,16 +343,16 @@ onUnmounted(() => {
   .image-button {
     position: absolute;
     cursor: pointer;
-    width: 40Px;
-    height: 40Px;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
-    top: calc(50% - 20Px);
+    top: calc(50% - 20px);
     background: rgba(255, 255, 255, 0.8);
     &-left {
-      left: 10Px;
+      left: 10px;
     }
     &-right {
-      right: 10Px;
+      right: 10px;
     }
     .icon {
       position: absolute;
@@ -361,18 +361,18 @@ onUnmounted(() => {
       left: 0;
       right: 0;
       margin: auto;
-      line-height: 40Px;
+      line-height: 40px;
     }
   }
   .icon-close {
     position: absolute;
     cursor: pointer;
-    width: 40Px;
-    height: 40Px;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
     top: 3%;
     right: 3%;
-    padding: 6Px;
+    padding: 6px;
     background: rgba(255, 255, 255, 0.8);
     &::before,
     &::after {
@@ -393,24 +393,24 @@ onUnmounted(() => {
   align-items: center;
   position: absolute;
   bottom: 5%;
-  padding: 12Px;
-  border-radius: 6Px;
+  padding: 12px;
+  border-radius: 6px;
   background: rgba(255, 255, 255, 0.8);
   .icon {
     position: static;
-    font-size: 24Px;
+    font-size: 24px;
     cursor: pointer;
-    margin: 0 6Px;
-    width: 27Px;
-    height: 27Px;
-    margin: 5Px;
+    margin: 0 6px;
+    width: 27px;
+    height: 27px;
+    margin: 5px;
   }
 }
 .image-counter {
   background: rgba(20, 18, 20, 0.53);
-  padding: 3Px 5Px;
-  margin: 5Px;
-  border-radius: 3Px;
+  padding: 3px 5px;
+  margin: 5px;
+  border-radius: 3px;
   color: #fff;
 }
 </style>

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/location/Location.vue

@@ -1,32 +1,27 @@
 <template>
   <div class="location">
     <i class="icon icon-location" @click="toggleShow"></i>
-    <main class="location-main" v-if="show">
+    <main class="location-main"  v-if="show">
       <ul class="location-list">
-        <li class="location-list-item">
-          <label>{{ $t('TUIChat.描述') }}</label>
-          <input type="text" v-model="location.description" />
+        <li  class="location-list-item">
+          <label>{{$t('TUIChat.描述')}}</label>
+          <input type="text" v-model="location.description">
         </li>
-        <li class="location-list-item">
-          <label>{{ $t('TUIChat.经度') }}</label>
-          <input type="number" v-model="location.longitude" />
+        <li  class="location-list-item">
+          <label>{{$t('TUIChat.经度')}}</label>
+          <input type="number" v-model="location.longitude">
         </li>
-        <li class="location-list-item">
-          <label>{{ $t('TUIChat.纬度') }}</label>
-          <input type="number" v-model="location.latitude" />
+        <li  class="location-list-item">
+          <label>{{$t('TUIChat.纬度')}}</label>
+          <input type="number" v-model="location.latitude">
         </li>
       </ul>
       <ul class="location-footer">
-        <button class="btn btn-cancel" @click="cancel">{{ $t('取消') }}</button>
+        <button class="btn btn-cancel" @click="cancel">{{$t('取消')}}</button>
         <button
           class="btn btn-default"
-          :disabled="
-            !location.data && !location.description && location.extension
-          "
-          @click="submit"
-        >
-          {{ $t('发送') }}
-        </button>
+          :disabled="!location.data && !location.description && location.extension"
+          @click="submit">{{$t('发送')}}</button>
       </ul>
     </main>
     <div v-if="show" class="mask" @click.self="toggleShow"></div>
@@ -40,19 +35,20 @@ const Location = defineComponent({
   props: {
     show: {
       type: Boolean,
-      default: () => false
-    }
+      default: () => false,
+    },
   },
-  setup(props: any, ctx: any) {
+  setup(props:any, ctx:any) {
     const data = reactive({
       show: false,
       location: {
         description: '深圳市深南大道10000号腾讯大厦',
         longitude: 113.941079,
-        latitude: 22.546103
-      }
+        latitude: 22.546103,
+      },
     });
 
+
     watchEffect(() => {
       data.show = props.show;
     });
@@ -61,6 +57,7 @@ const Location = defineComponent({
       data.show = !data.show;
     };
 
+
     const cancel = () => {
       toggleShow();
     };
@@ -74,9 +71,9 @@ const Location = defineComponent({
       ...toRefs(data),
       toggleShow,
       cancel,
-      submit
+      submit,
     };
-  }
+  },
 });
 export default Location;
 </script>
@@ -90,11 +87,11 @@ export default Location;
   &-main {
     position: absolute;
     z-index: 5;
-    width: 315Px;
+    width: 315px;
     background: #ffffff;
-    top: -180Px;
-    box-shadow: 0 2Px 12Px 0 rgba(0, 0, 0, 0.1);
-    padding: 10Px;
+    top: -180px;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0, .1);
+    padding: 10px;
     display: flex;
     flex-direction: column;
   }
@@ -103,19 +100,19 @@ export default Location;
     display: flex;
     flex-direction: column;
     &-item {
-      padding-bottom: 15Px;
+      padding-bottom: 15px;
       label {
-        width: 88Px;
-        font-size: 18Px;
-        padding: 0 20Px;
+        width: 88px;
+        font-size: 18px;
+        padding: 0 20px;
         display: inline-block;
       }
       input {
         flex: 1;
-        height: 24Px;
-        padding: 0 10Px;
-        border: 1Px solid #dddddd;
-        border-radius: 5Px;
+        height: 24px;
+        padding: 0 10px;
+        border: 1px solid #dddddd;
+        border-radius: 5px;
         &::-webkit-inner-spin-button {
           display: none;
         }
@@ -129,22 +126,22 @@ export default Location;
   }
 }
 .btn {
-  padding: 8Px 20Px;
-  border-radius: 4Px;
+  padding: 8px 20px;
+  border-radius: 4px;
   border: none;
   font-weight: 400;
-  font-size: 14Px;
-  color: #ffffff;
+  font-size: 14px;
+  color: #FFFFFF;
   letter-spacing: 0;
   text-align: center;
-  line-height: 20Px;
+  line-height: 20px;
   &-cancel {
-    border: 1Px solid #dddddd;
+    border: 1px solid #dddddd;
     color: #666666;
   }
   &-default {
-    background: #006eff;
-    border: 1Px solid #006eff;
+    background: #006EFF;
+    border: 1px solid #006EFF;
   }
   &:disabled {
     opacity: 0.3;

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/readReceiptDialog/readReceiptDialog.vue

@@ -48,8 +48,8 @@
           <li v-for="(item, index) in readReceiptList[showListNow].userList" :key="index" class="body-list-item">
             <img
               class="avatar"
-              :src="item?.avatar || 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
-              onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
+              :src="item?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+              onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
             />
             <div class="name">
               {{ item?.nick || item?.userID }}

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/readReceiptDialog/style/h5.scss

@@ -4,9 +4,9 @@
   display: flex;
   flex-direction: column;
   transform: none;
-  box-shadow: 0 11Px 20Px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.3);
   background: #ffffff;
-  border-radius: 8Px;
+  border-radius: 8px;
   overflow: hidden;
   position: fixed;
   top: 0;
@@ -16,8 +16,8 @@
   padding: 0;
 
   .header {
-    padding-left: 20Px;
-    padding-right: 20Px;
+    padding-left: 20px;
+    padding-right: 20px;
   }
 
   .body {
@@ -30,28 +30,28 @@
 
     .body-list-item {
       background-color: #ffffff;
-      padding-left: 10Px;
+      padding-left: 10px;
       display: flex;
       flex-direction: row;
 
       .avatar {
         border-radius: 10%;
         padding: 0;
-        margin: 10Px;
+        margin: 10px;
       }
 
       .name {
-        width: calc(100% - 40Px);
-        height: 56Px;
-        line-height: 56Px;
-        border-bottom: 1Px solid #efefef;
+        width: calc(100% - 40px);
+        height: 56px;
+        line-height: 56px;
+        border-bottom: 1px solid #EFEFEF;
       }
     }
 
     .body-tab {
-      height: 22Px;
-      padding: 15Px;
-      width: calc(100% - 30Px);
+      height: 22px;
+      padding: 15px;
+      width: calc(100% - 30px);
       border-bottom: none;
 
       .tab-item {
@@ -59,71 +59,71 @@
         flex-direction: row-reverse;
         justify-content: center;
         align-items: center;
-        font-size: 16Px;
-        height: 22Px;
+        font-size: 16px;
+        height: 22px;
         font-family: PingFangSC-Medium;
 
         &-title,
         &-count {
-          height: 22Px;
-          font-size: 15Px;
+          height: 22px;
+          font-size: 15px;
           letter-spacing: 0;
           text-align: center;
-          line-height: 20Px;
+          line-height: 20px;
           font-weight: 400;
-          color: #8d8d8d;
+          color: #8D8D8D;
         }
 
         &-count {
-          font-size: 17Px;
+          font-size: 17px;
           font-weight: 800;
         }
 
         &-now {
-          color: #147aff;
-          padding-bottom: 3Px;
-          border-bottom: 2.6Px solid #147aff;
+          color: #147AFF;
+          padding-bottom: 3px;
+          border-bottom: 2.6px solid #147AFF;
 
           .tab-item-title,
           .tab-item-count {
-            color: #147aff;
+            color: #147AFF;
           }
         }
       }
     }
 
     .body-message {
-      background-color: #f7f8fa;
+      background-color: #F7F8FA;
 
       .message {
-        margin: 10Px 0;
+        margin: 10px 0;
         background-color: #ffffff;
-        padding: 5Px;
+        padding: 5px;
 
         .message-info {
           span {
-            padding-left: 10Px;
-            padding-right: 10Px;
-            width: 94Px;
-            height: 30Px;
+            padding-left: 10px;
+            padding-right: 10px;
+            width: 94px;
+            height: 30px;
             font-family: PingFangSC-Regular;
             font-weight: 400;
-            font-size: 12Px;
+            font-size: 12px;
             color: #999999;
             letter-spacing: 0;
             text-align: center;
-            line-height: 30Px;
+            line-height: 30px;
           }
         }
 
         .message-cont {
-          padding: 0 10Px 10Px 10Px;
+          padding: 0 10px 10px 10px;
           font-family: PingFangSC-Regular;
           font-weight: 400;
-          font-size: 14Px;
+          font-size: 14px;
           color: #111111;
           letter-spacing: 0;
-          max-height: 100Px;
+          max-height: 100px;
 
           p {
             overflow: hidden;
@@ -132,7 +132,7 @@
           }
 
           &-img {
-            max-height: 70Px;
+            max-height: 70px;
           }
         }
       }

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/readReceiptDialog/style/web.scss

@@ -5,54 +5,54 @@
   transform: translate(-50%, -50%);
   z-index: 5;
   box-sizing: border-box;
-  padding: 20Px;
+  padding: 20px;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 11Px 20Px 0 rgba(0, 0, 0, 0.3);
-  width: 368Px;
-  height: 510Px;
+  box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.3);
+  width: 368px;
+  height: 510px;
   background: #ffffff;
-  border-radius: 8Px;
+  border-radius: 8px;
   overflow: hidden;
 
   &-menu-open {
-    left: calc(50% + 150Px);
+    left: calc(50% + 150px);
   }
 
   .header {
     display: flex;
     flex-direction: row;
     align-items: center;
-    height: 30Px;
-    padding: 10Px 0;
+    height: 30px;
+    padding: 10px 0;
 
     &-title {
-      width: calc(100% - 40Px);
+      width: calc(100% - 40px);
       text-align: center;
-      height: 30Px;
+      height: 30px;
       font-family: PingFangSC-Medium;
       font-weight: 500;
-      font-size: 16Px;
+      font-size: 16px;
       color: #333333;
-      line-height: 30Px;
+      line-height: 30px;
     }
 
     &-close {
-      width: 20Px;
+      width: 20px;
 
       i {
-        width: 12Px;
-        height: 12Px;
+        width: 12px;
+        height: 12px;
       }
     }
 
     &-back {
-      width: 20Px;
+      width: 20px;
     }
   }
 
   .body {
-    padding: 10Px 0;
+    padding: 10px 0;
     width: 100%;
     flex: 1 1 auto;
     display: flex;
@@ -60,13 +60,13 @@
     overflow: hidden;
 
     .body-tab {
-      padding: 10Px 0;
+      padding: 10px 0;
       width: 100%;
-      height: 55Px;
+      height: 55px;
       display: flex;
       flex-direction: row;
       justify-content: space-around;
-      border-bottom: 1Px solid #e8e8e9;
+      border-bottom: 1px solid #E8E8E9;
 
       .tab-item {
         display: flex;
@@ -75,20 +75,20 @@
         align-items: center;
 
         &-title {
-          height: 20Px;
+          height: 20px;
           opacity: 0.8;
           font-family: PingFangSC-Regular;
           font-weight: 400;
-          font-size: 14Px;
+          font-size: 14px;
           color: #000000;
         }
 
         &-count {
-          height: 35Px;
+          height: 35px;
           opacity: 0.8;
           font-family: DINAlternate-Bold;
           font-weight: Bold;
-          font-size: 30Px;
+          font-size: 30px;
           color: #000000;
         }
 
@@ -116,23 +116,23 @@
         align-items: center;
 
         .avatar {
-          width: 36Px;
-          height: 36Px;
-          margin: 10Px 10Px 10Px 0Px;
+          width: 36px;
+          height: 36px;
+          margin: 10px 10px 10px 0px;
           border-radius: 10%;
         }
 
         .name {
-          width: calc(100% - 60Px);
-          height: 20Px;
+          width: calc(100% - 60px);
+          height: 20px;
           display: inline-block;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          line-height: 20Px;
+          line-height: 20px;
           font-family: PingFangSC-Regular;
           font-weight: 400;
-          font-size: 14Px;
+          font-size: 14px;
           color: #000000;
           letter-spacing: 0;
         }
@@ -141,24 +141,24 @@
       .more {
         text-align: center;
         color: rgba(0, 0, 0, 0.3);
-        font-size: 12Px;
-        padding: 10Px;
+        font-size: 12px;
+        padding: 10px;
       }
     }
   }
 }
 
 ::-webkit-scrollbar {
-  width: 4Px;
-  height: 140Px;
+  width: 4px;
+  height: 140px;
   background-color: transparent;
 }
 
 ::-webkit-scrollbar-track {
-  border-radius: 10Px;
+  border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-  border-radius: 10Px;
-  background-color: #d8d8d8;
+  border-radius: 10px;
+  background-color: #D8D8D8;
 }

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/replies/replies-item.vue

@@ -3,107 +3,58 @@
     <div class="message-bubble" ref="htmlRefHook">
       <img
         class="avatar"
-        :src="
-          message?.avatar ||
-          'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
-        "
-        onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
+        :src="message?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+        onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
       />
       <main class="message-area">
         <div class="message-area-title">
           <label class="name">
-            {{
-              isRoot
-                ? message.nameCard || message.nick || message.from
-                : message.messageSender
-            }}
+            {{ isRoot ? message.nameCard || message.nick || message.from : message.messageSender }}
           </label>
           <label class="time">
-            {{
-              caculateTimeago(
-                (isRoot ? message?.time : message?.messageTime) * 1000
-              )
-            }}
+            {{ caculateTimeago((isRoot ? message?.time : message?.messageTime) * 1000) }}
           </label>
         </div>
         <div class="content content-in">
           <MessageText
-            v-if="
-              message.messageType === constant.typeText ||
-              message.type === TIM.TYPES.MSG_TEXT ||
-              !isRoot
-            "
-            :data="
-              handleTextMessageShowContext(
-                isRoot
-                  ? message
-                  : { payload: { text: message?.messageAbstract } }
-              )
-            "
+            v-if="message.messageType === constant.typeText || message.type === TIM.TYPES.MSG_TEXT || !isRoot"
+            :data="handleTextMessageShowContext(isRoot ? message : { payload: { text: message?.messageAbstract } })"
           />
-          <span
-            v-if="
-              message.messageType === constant.typeCustom ||
-              message.type === TIM.TYPES.MSG_CUSTOM
-            "
-          >
-            {{ handleCustomMessageShowContext(message)?.custom }}
-          </span>
+          <span v-if="message.messageType === constant.typeCustom || message.type === TIM.TYPES.MSG_CUSTOM">{{
+            handleCustomMessageShowContext(message)?.custom
+          }}</span>
           <img
-            v-if="
-              message.messageType === constant.typeImage ||
-              message.type === TIM.TYPES.MSG_IMAGE
-            "
+            v-if="message.messageType === constant.typeImage || message.type === TIM.TYPES.MSG_IMAGE"
             class="message-img"
             :src="message?.payload?.imageInfoArray[1].url"
           />
           <div
-            v-if="
-              message.messageType === constant.typeAudio ||
-              message.type === TIM.TYPES.MSG_AUDIO
-            "
+            v-if="message.messageType === constant.typeAudio || message.type === TIM.TYPES.MSG_AUDIO"
             class="message-audio"
-            :style="`width: ${message?.payload?.second * 10 + 40}Px`"
+            :style="`width: ${message?.payload?.second * 10 + 40}px`"
           >
             <i class="icon icon-voice"></i>
             <label>{{ message?.payload?.second }}s</label>
           </div>
           <div
-            v-if="
-              message.messageType === constant.typeVideo ||
-              message.type === TIM.TYPES.MSG_VIDEO
-            "
+            v-if="message.messageType === constant.typeVideo || message.type === TIM.TYPES.MSG_VIDEO"
             class="message-video-cover"
           >
-            <img
-              class="message-videoimg"
-              :src="message?.payload?.snapshotUrl || message?.payload?.thumbUrl"
-            />
+            <img class="message-videoimg" :src="message?.payload?.snapshotUrl || message?.payload?.thumbUrl" />
           </div>
           <img
-            v-if="
-              message.messageType === constant.typeFace ||
-              message.type === TIM.TYPES.MSG_FACE
-            "
+            v-if="message.messageType === constant.typeFace || message.type === TIM.TYPES.MSG_FACE"
             class="message-img"
             :src="url"
           />
           <div
-            v-if="
-              message.messageType === constant.typeFile ||
-              message.type === TIM.TYPES.MSG_FILE
-            "
+            v-if="message.messageType === constant.typeFile || message.type === TIM.TYPES.MSG_FILE"
             class="message-file"
           >
             <i class="icon icon-files"></i>
             <div class="message-file-content">
               <label>{{ message?.payload?.fileName }}</label>
-              <span>
-                {{
-                  handleFileMessageShowContext(message)?.size ||
-                  message?.payload?.fileSize
-                }}
-              </span>
+              <span>{{ handleFileMessageShowContext(message)?.size || message?.payload?.fileSize }}</span>
             </div>
           </div>
           <MessageEmojiReact :message="message" type="content" />
@@ -118,7 +69,7 @@ import { Message } from '../../interface';
 import {
   handleTextMessageShowContext,
   handleCustomMessageShowContext,
-  handleFileMessageShowContext
+  handleFileMessageShowContext,
 } from '../../utils/utils';
 import { MessageText, MessageEmojiReact } from '../../components';
 import { caculateTimeago } from '../../../utils';
@@ -128,20 +79,20 @@ const RepliesItem = defineComponent({
   props: {
     message: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     isH5: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isRoot: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   components: {
     MessageText,
-    MessageEmojiReact
+    MessageEmojiReact,
   },
   setup(props: any, ctx: any) {
     const data = reactive({
@@ -150,7 +101,7 @@ const RepliesItem = defineComponent({
       url: '',
       isRoot: false,
       constant,
-      TIM
+      TIM,
     });
     watchEffect(() => {
       data.message = props.message;
@@ -165,37 +116,37 @@ const RepliesItem = defineComponent({
       handleTextMessageShowContext,
       handleCustomMessageShowContext,
       handleFileMessageShowContext,
-      caculateTimeago
+      caculateTimeago,
     };
-  }
+  },
 });
 export default RepliesItem;
 </script>
 <style lang="scss" scoped>
 .replies-item {
-  padding: 15Px;
+  padding: 15px;
   width: auto;
   &-normal {
-    padding: 12.8Px 15Px 0 17Px;
+    padding: 12.8px 15px 0 17px;
     .message-bubble {
       padding-bottom: 0;
       .avatar {
-        width: 48Px;
-        height: 48Px;
-        border-radius: 8Px;
+        width: 48px;
+        height: 48px;
+        border-radius: 8px;
       }
       .message-area {
-        padding: 0 0 8Px 0;
-        margin: 0 0 0 16Px;
-        border-bottom: 0.1Px solid #dbdbdb;
+        padding: 0 0 8px 0;
+        margin: 0 0 0 16px;
+        border-bottom: 0.1px solid #dbdbdb;
         &-title {
           .name {
-            font-size: 14Px;
-            line-height: 20Px;
+            font-size: 14px;
+            line-height: 20px;
           }
           .time {
-            font-size: 12Px;
-            line-height: 18Px;
+            font-size: 12px;
+            line-height: 18px;
           }
         }
         .content,
@@ -203,31 +154,31 @@ export default RepliesItem;
           background: inherit;
           border-radius: 0;
           padding: 0;
-          line-height: 22Px;
+          line-height: 22px;
         }
       }
     }
   }
   .avatar {
-    width: 36Px;
-    height: 36Px;
-    border-radius: 5Px;
+    width: 36px;
+    height: 36px;
+    border-radius: 5px;
   }
   .message-bubble {
     width: 100%;
     display: flex;
-    padding-bottom: 5Px;
+    padding-bottom: 5px;
   }
   .line-left {
-    border: 1Px solid rgba(0, 110, 255, 0.5);
+    border: 1px solid rgba(0, 110, 255, 0.5);
   }
 
   .message-area {
-    max-width: calc(100% - 54Px);
+    max-width: calc(100% - 54px);
     position: relative;
     display: flex;
     flex-direction: column;
-    padding: 0 8Px;
+    padding: 0 8px;
     flex: 1;
     &-title {
       display: flex;
@@ -235,7 +186,7 @@ export default RepliesItem;
       justify-content: space-between;
       .name,
       .time {
-        padding-bottom: 4Px;
+        padding-bottom: 4px;
         font-weight: 400;
         font-size: 0.8rem;
         color: #999999;
@@ -249,24 +200,24 @@ export default RepliesItem;
       }
     }
     .content {
-      padding: 12Px;
+      padding: 12px;
       font-weight: 400;
-      font-size: 14Px;
+      font-size: 14px;
       color: #000000;
       letter-spacing: 0;
       word-wrap: break-word;
       word-break: break-all;
       width: fit-content;
       &-in {
-        background: #f2f2f2;
-        border-radius: 0Px 10Px 10Px 10Px;
+        background: #F2F2F2;
+        border-radius: 0px 10px 10px 10px;
         .message-img,
         .message-videoimg {
           width: inherit;
           height: inherit;
           max-height: 100%;
           max-width: 100%;
-          max-height: 300Px;
+          max-height: 300px;
         }
       }
     }
@@ -275,7 +226,7 @@ export default RepliesItem;
     align-self: flex-end;
     font-family: PingFangSC-Regular;
     font-weight: 400;
-    font-size: 12Px;
+    font-size: 12px;
     color: #b6b8ba;
     word-break: keep-all;
   }
@@ -298,7 +249,7 @@ export default RepliesItem;
     max-width: 100%;
     overflow: hidden;
     .icon {
-      margin: 0 4Px;
+      margin: 0 4px;
     }
     audio {
       width: 0;

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/replies/style/h5.scss

@@ -4,9 +4,9 @@
   display: flex;
   flex-direction: column;
   transform: none;
-  box-shadow: 0 11Px 20Px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.3);
   background: #ffffff;
-  border-radius: 8Px;
+  border-radius: 8px;
   overflow: hidden;
   position: fixed;
   top: 0;
@@ -16,9 +16,8 @@
   padding: 0;
 
   .header {
-    padding-left: 20Px;
-    padding-right: 20Px;
-
+    padding-left: 20px;
+    padding-right: 20px;
     &-title {
       text-align: center;
     }
@@ -34,28 +33,28 @@
 
     .body-list-item {
       background-color: #ffffff;
-      padding-left: 10Px;
+      padding-left: 10px;
       display: flex;
       flex-direction: row;
 
       .avatar {
         border-radius: 10%;
         padding: 0;
-        margin: 10Px;
+        margin: 10px;
       }
 
       .name {
-        width: calc(100% - 40Px);
-        height: 56Px;
-        line-height: 56Px;
-        border-bottom: 1Px solid #efefef;
+        width: calc(100% - 40px);
+        height: 56px;
+        line-height: 56px;
+        border-bottom: 1px solid #EFEFEF;
       }
     }
 
     .body-tab {
-      height: 22Px;
-      padding: 15Px;
-      width: calc(100% - 30Px);
+      height: 22px;
+      padding: 15px;
+      width: calc(100% - 30px);
       border-bottom: none;
 
       .tab-item {
@@ -63,69 +62,70 @@
         flex-direction: row-reverse;
         justify-content: center;
         align-items: center;
-        font-size: 16Px;
-        height: 22Px;
+        font-size: 16px;
+        height: 22px;
         font-family: PingFangSC-Medium;
 
         &-title,
         &-count {
-          height: 22Px;
-          font-size: 15Px;
+          height: 22px;
+          font-size: 15px;
           letter-spacing: 0;
           text-align: center;
-          line-height: 20Px;
+          line-height: 20px;
           font-weight: 400;
-          color: #8d8d8d;
+          color: #8D8D8D;
         }
 
         &-count {
-          font-size: 17Px;
+          font-size: 17px;
           font-weight: 800;
         }
 
         &-now {
-          color: #147aff;
-          padding-bottom: 3Px;
-          border-bottom: 2.6Px solid #147aff;
+          color: #147AFF;
+          padding-bottom: 3px;
+          border-bottom: 2.6px solid #147AFF;
 
           .tab-item-title,
           .tab-item-count {
-            color: #147aff;
+            color: #147AFF;
           }
         }
       }
     }
 
     .body-message {
+
       .message {
-        margin: 10Px 0;
+        margin: 10px 0;
         background-color: #ffffff;
-        padding: 5Px;
+        padding: 5px;
 
         .message-info {
           span {
-            padding-left: 10Px;
-            padding-right: 10Px;
-            width: 94Px;
-            height: 30Px;
+            padding-left: 10px;
+            padding-right: 10px;
+            width: 94px;
+            height: 30px;
             font-family: PingFangSC-Regular;
             font-weight: 400;
-            font-size: 12Px;
+            font-size: 12px;
             color: #999999;
             letter-spacing: 0;
             text-align: center;
-            line-height: 30Px;
+            line-height: 30px;
           }
         }
 
         .message-cont {
-          padding: 0 10Px 10Px 10Px;
+          padding: 0 10px 10px 10px;
           font-family: PingFangSC-Regular;
           font-weight: 400;
-          font-size: 14Px;
+          font-size: 14px;
           color: #111111;
           letter-spacing: 0;
-          max-height: 100Px;
+          max-height: 100px;
 
           p {
             overflow: hidden;
@@ -134,7 +134,7 @@
           }
 
           &-img {
-            max-height: 70Px;
+            max-height: 70px;
           }
         }
       }

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/replies/style/web.scss

@@ -2,51 +2,51 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  width: 400Px;
+  width: 400px;
   overflow-y: auto;
-  border-radius: 8Px 0 0 8Px;
+  border-radius: 8px 0 0 8px;
   position: absolute;
   right: 0;
-  height: calc(100% - 40Px);
+  height: calc(100% - 40px);
   z-index: 2;
-  top: 40Px;
-  background: #ffffff;
-  box-shadow: 0 1Px 10Px 0 rgb(2 16 43 / 15%);
+  top: 40px;
+  background: #FFFFFF;
+  box-shadow: 0 1px 10px 0 rgb(2 16 43 / 15%);
 
   .header {
     display: flex;
     flex-direction: row;
     align-items: center;
-    height: 30Px;
-    padding: 10Px 0;
+    height: 30px;
+    padding: 10px 0;
 
     &-title {
-      width: calc(100% - 40Px);
+      width: calc(100% - 40px);
       text-align: left;
-      height: 30Px;
+      height: 30px;
       font-family: PingFangSC-Medium;
       font-weight: 500;
-      font-size: 16Px;
+      font-size: 16px;
       color: #333333;
-      line-height: 30Px;
+      line-height: 30px;
     }
 
     &-close {
-      width: 20Px;
+      width: 20px;
 
       i {
-        width: 12Px;
-        height: 12Px;
+        width: 12px;
+        height: 12px;
       }
     }
 
     &-back {
-      width: 20Px;
+      width: 20px;
     }
   }
 
   .body {
-    padding: 10Px 0;
+    padding: 10px 0;
     width: 100%;
     flex: 1 1 auto;
     display: flex;
@@ -54,7 +54,7 @@
     overflow: hidden;
 
     .body-message {
-      border-bottom: 1Px dashed #e0e0e0;
+      border-bottom: 1px dashed #E0E0E0;
     }
 
     .body-list {
@@ -68,29 +68,28 @@
         flex-direction: row;
         flex-wrap: nowrap;
         align-items: center;
-
         .replies-item {
           flex: 1;
         }
 
         .avatar {
-          width: 36Px;
-          height: 36Px;
-          margin: 10Px 10Px 10Px 0Px;
+          width: 36px;
+          height: 36px;
+          margin: 10px 10px 10px 0px;
           border-radius: 10%;
         }
 
         .name {
-          width: calc(100% - 60Px);
-          height: 20Px;
+          width: calc(100% - 60px);
+          height: 20px;
           display: inline-block;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          line-height: 20Px;
+          line-height: 20px;
           font-family: PingFangSC-Regular;
           font-weight: 400;
-          font-size: 14Px;
+          font-size: 14px;
           color: #000000;
           letter-spacing: 0;
         }
@@ -99,24 +98,24 @@
       .more {
         text-align: center;
         color: rgba(0, 0, 0, 0.3);
-        font-size: 12Px;
-        padding: 10Px;
+        font-size: 12px;
+        padding: 10px;
       }
     }
   }
 }
 
 ::-webkit-scrollbar {
-  width: 4Px;
-  height: 140Px;
+  width: 4px;
+  height: 140px;
   background-color: transparent;
 }
 
 ::-webkit-scrollbar-track {
-  border-radius: 10Px;
+  border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-  border-radius: 10Px;
+  border-radius: 10px;
   background-color: #d8d8d8;
 }

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/words/style/color.scss

@@ -1,58 +1,49 @@
 .words {
   &-main {
     background: #ffffff;
-    box-shadow: 0 2Px 12Px 0 rgba(0, 0, 0, 0.1);
-
+    box-shadow: 0 2px 12px 0 rgba(0,0,0, .1);
     header {
       aside {
         font-weight: 500;
         color: #000000;
-
         h1 {
           font-weight: 500;
           color: #000000;
         }
-
         a {
-          color: #006eff;
+          color: #006EFF;
         }
       }
     }
   }
-
   &-list {
     &-item {
       cursor: pointer;
       font-weight: 400;
-      color: #50545c;
-
+      color: #50545C;
       &:hover {
-        color: #006eff;
+        color: #006EFF;
       }
     }
   }
 }
-
 .words-H5-main {
-  background: rgba(0, 0, 0, 0.5);
-
+  background: rgba(0,0,0,.5);
   .words-main-content {
-    background: #ffffff;
-
+    background: #FFFFFF;
     .words-list {
       &-item {
-        border-bottom: 1Px solid #eeeeee;
+        border-bottom: 1px solid #EEEEEE;
         font-family: PingFangSC-Regular;
         font-weight: 400;
         color: #333333;
         letter-spacing: 0;
       }
     }
-
     .close {
       font-family: PingFangSC-Regular;
       font-weight: 400;
-      color: #3370ff;
+      color: #3370FF;
       letter-spacing: 0;
     }
   }

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/words/style/h5.scss

@@ -1,8 +1,7 @@
-.words-H5 {
+.words-H5{
   display: inline-block;
   position: relative;
   cursor: auto;
-
   .words-H5-main {
     position: fixed;
     left: 0;
@@ -15,36 +14,30 @@
     flex-direction: column;
     justify-content: flex-end;
     padding: 0;
-
     .words-main-content {
-      padding: 23Px 27Px 12Px;
-      border-radius: 12Px 12Px 0 0;
-
+      padding: 23px 27px 12px;
+      border-radius: 12px 12px 0 0;
       header {
         padding: 0;
-
         aside {
           flex-direction: column;
           align-items: flex-start;
-          font-size: 16Px;
-          line-height: 28Px;
-
+          font-size: 16px;
+          line-height: 28px;
           h1 {
-            font-size: 20Px;
+            font-size: 20px;
           }
         }
-
         .close {
-          font-size: 18Px;
-          line-height: 27Px;
+          font-size: 18px;
+          line-height: 27px;
         }
       }
-
       .words-list {
         &-item {
-          padding: 12Px 0;
-          font-size: 18Px;
-          line-height: 25Px;
+          padding: 12px 0;
+          font-size: 18px;
+          line-height: 25px;
         }
       }
     }

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/words/style/web.scss

@@ -2,48 +2,41 @@
   display: inline-block;
   position: relative;
   cursor: pointer;
-
   .icon {
-    margin: 12Px 10Px 0;
+    margin: 12px 10px 0;
   }
-
   &-main {
     position: absolute;
     z-index: 5;
-    width: 315Px;
-    top: -200Px;
-    padding: 12Px;
+    width: 315px;
+    top: -200px;
+    padding: 12px;
     display: flex;
     flex-direction: column;
     width: 19.13rem;
     height: 12.44rem;
     overflow-y: auto;
-
     header {
       display: flex;
       justify-content: space-between;
-
       aside {
         display: flex;
         align-items: center;
-        font-size: 12Px;
-
+        font-size: 12px;
         h1 {
-          font-size: 12Px;
+          font-size: 12px;
         }
       }
     }
   }
-
   &-list {
     flex: 1;
     display: flex;
     flex-direction: column;
-
     &-item {
       cursor: pointer;
-      padding: 4Px 0;
-      font-size: 12Px;
+      padding: 4px 0;
+      font-size: 12px;
     }
   }
 }

src/TUIKit/TUIComponents/container/TUIChat/style/color.scss

@@ -7,54 +7,45 @@
       letter-spacing: 0;
     }
   }
-
-  .TUIChat-setting {
-    background: #ffffff;
+  .TUIChat-setting{
+    background: #FFFFFF;
   }
 
   &-footer {
-    border-top: 1Px solid #f4f5f9;
-
+    border-top: 1px solid #F4F5F9;
     .input {
       textarea {
         &::placeholder {
-          color: #dddddd;
+          color: #DDDDDD;
         }
       }
-
       p {
-        color: #dddddd;
+        color: #DDDDDD;
       }
-
       .input-btn {
         font-weight: 400;
-        background: #006eff;
-        color: #ffffff;
+        background: #006EFF;
+        color: #FFFFFF;
         letter-spacing: 0;
-
         &:disabled {
           opacity: 0.3;
         }
-
         &-hover {
           background: #000000;
-
           &::before {
-            border: 10Px solid transparent;
-            border-left: 10Px solid #000000;
+            border: 10px solid transparent;
+            border-left: 10px solid #000000;
           }
         }
       }
     }
   }
-
   .disabled {
     &::before {
-      background: #fbfbfb;
+      background: #FBFBFB;
     }
   }
 }
-
 .TUI-message-list {
   .message-more {
     color: #999999;
@@ -63,35 +54,29 @@
 }
 
 .dialog {
-  background: #ffffff;
-
+  background: #FFFFFF;
   &-item {
-    background: #ffffff;
-    border: 1Px solid #e0e0e0;
-    box-shadow: 0 4Px 12Px 0 rgba(0, 0, 0, 0.06);
-
+    background: #FFFFFF;
+    border: 1px solid #E0E0E0;
+    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.06);
     p {
       font-weight: 400;
-      color: #4f4f4f;
-
+      color: #4F4F4F;
       &:hover {
-        background: rgba(0, 110, 255, 0.1);
+        background: rgba(0,110,255,0.10);
       }
     }
   }
-
   &-userInfo {
-    background: rgba(#000000, 0.3);
-
+    background: rgba( #000000, 0.3);
     .userInfo-main {
-      background: #ffffff;
-
+      background: #FFFFFF;
       main {
         ol {
           dl {
             .userInfo-mask {
-              background: #ffffff;
-              box-shadow: 0 11Px 20Px 0 rgba(0, 0, 0, 0.3);
+              background: #FFFFFF;
+              box-shadow: 0 11px 20px 0 rgba(0,0,0, .3);
             }
           }
         }
@@ -99,30 +84,25 @@
     }
   }
 }
-
 .image-dialog {
   background: rgba(0, 0, 0, 0.3);
-
   header {
-    background: rgba(0, 0, 0, 0.49);
+    background: rgba(0,0,0,0.49);
   }
 }
 
 .btn {
   font-weight: 400;
-  color: #ffffff;
+  color: #FFFFFF;
   letter-spacing: 0;
-
   &-cancel {
-    border: 1Px solid #dddddd;
+    border: 1px solid #DDDDDD;
     color: #666666;
   }
-
   &-default {
-    background: #006eff;
-    border: 1Px solid #006eff;
+    background: #006EFF;
+    border: 1px solid #006EFF;
   }
-
   &:disabled {
     opacity: 0.3;
   }
@@ -134,17 +114,16 @@
   }
 }
 
+
 .TUIChat-H5 {
   .TUIChat-header {
-    background: #ffffff;
+    background: #FFFFFF;
   }
-
   .TUIChat-footer {
-    background: #ffffff;
-
+    background: #FFFFFF;
     .input {
       input {
-        background: #f4f5f9;
+        background: #F4F5F9;
       }
     }
   }

src/TUIKit/TUIComponents/container/TUIChat/style/dist/h5.css

@@ -216,4 +216,4 @@
   height: 40px;
   width: 1px;
   background: #dddddd;
-}
+}

src/TUIKit/TUIComponents/container/TUIChat/style/h5.scss

@@ -10,7 +10,7 @@
     z-index: 2;
 
     .setting {
-      width: 27Px;
+      width: 27px;
     }
   }
 
@@ -27,7 +27,7 @@
     bottom: 0;
     flex-direction: column-reverse;
     height: auto;
-    padding: 14Px 23Px 23Px;
+    padding: 14px 23px 23px;
     z-index: 1;
 
     .func {
@@ -42,7 +42,7 @@
 
     .reply {
       order: 1;
-      padding-bottom: 10Px;
+      padding-bottom: 10px;
 
       &-box {
         padding: 0;
@@ -59,7 +59,7 @@
           }
 
           span:first-child {
-            padding-right: 2Px;
+            padding-right: 2px;
           }
 
           span:last-child {
@@ -81,10 +81,10 @@
         padding: 0;
         flex: 1;
         background: #f4f5f9;
-        border-radius: 9.4Px;
-        padding: 7Px 18Px;
-        font-size: 16Px;
-        line-height: 18Px;
+        border-radius: 9.4px;
+        padding: 7px 18px;
+        font-size: 16px;
+        line-height: 18px;
       }
 
       .reference {
@@ -99,8 +99,8 @@
           padding: 0;
           width: 100%;
           max-width: 100%;
-          padding: 10Px;
-          margin: 5Px 0;
+          padding: 10px;
+          margin: 5px 0;
 
           &-show {
             overflow: hidden;
@@ -120,9 +120,9 @@
 
       button {
         position: static !important;
-        margin-left: 7Px;
+        margin-left: 7px;
         word-break: keep-all;
-        height: 32Px;
+        height: 32px;
         flex: 0;
       }
 
@@ -142,47 +142,47 @@
           position: static;
           flex: 1;
           max-height: 90%;
-          border-radius: 12Px 12Px 0 0;
-          padding: 14Px 23Px;
+          border-radius: 12px 12px 0 0;
+          padding: 14px 23px;
 
           &-title {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 12Px 0;
+            padding: 12px 0;
 
             h1 {
               font-family: PingFangSC-Medium;
               font-weight: 500;
-              font-size: 20Px;
+              font-size: 20px;
               color: #000000;
               letter-spacing: 0;
-              line-height: 28Px;
+              line-height: 28px;
             }
 
             .close {
               font-family: PingFangSC-Regular;
               font-weight: 400;
-              font-size: 18Px;
+              font-size: 18px;
               color: #3370ff;
               letter-spacing: 0;
-              line-height: 27Px;
+              line-height: 27px;
             }
           }
 
           li {
-            padding: 8Px 0;
+            padding: 8px 0;
 
             img {
-              width: 30Px;
-              height: 30Px;
-              border-radius: 6.4Px;
+              width: 30px;
+              height: 30px;
+              border-radius: 6.4px;
               padding: 0;
             }
 
             span {
-              font-size: 16Px;
-              padding-left: 12Px;
+              font-size: 16px;
+              padding-left: 12px;
             }
           }
 
@@ -219,41 +219,41 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      width: 150Px;
+      width: 150px;
       background: white;
-      border-radius: 4Px;
+      border-radius: 4px;
     }
 
     header {
       font-family: PingFangSC-Regular;
       font-weight: 400;
-      font-size: 14Px;
+      font-size: 14px;
       color: #000000;
       letter-spacing: 0;
       text-align: center;
-      padding: 20Px 0;
+      padding: 20px 0;
     }
 
     footer {
       display: flex;
       width: 100%;
       justify-content: space-around;
-      border-top: 1Px solid #dddddd;
-      height: 40Px;
+      border-top: 1px solid #dddddd;
+      height: 40px;
       align-items: center;
 
       p {
         font-family: PingFangSC-Regular;
         font-weight: 400;
-        font-size: 14Px;
+        font-size: 14px;
         color: #000000;
         letter-spacing: 0;
         text-align: center;
       }
 
       i {
-        height: 40Px;
-        width: 1Px;
+        height: 40px;
+        width: 1px;
         background: #dddddd;
       }
     }

src/TUIKit/TUIComponents/container/TUIChat/style/web.scss

@@ -6,32 +6,30 @@
   position: absolute;
 
   &-header {
-    padding: 12Px;
+    padding: 12px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 2px solid #DFE1E3;
-    background-color: #F1F2F3;
 
     h1 {
-      font-size: 16Px;
-      line-height: 30Px;
+      font-size: 16px;
+      line-height: 30px;
     }
   }
 
   &-safe-tips {
-    padding: 12Px 20Px;
+    padding: 12px 20px;
     background-color: rgba(255, 149, 0, 0.1);
-    color: #ff8c39;
-    line-height: 18Px;
+    color: #FF8C39;
+    line-height: 18px;
     font-family: 'PingFang SC';
     font-style: normal;
     font-weight: 400;
     text-align: justify;
-    font-size: 12Px;
+    font-size: 12px;
 
     a {
-      color: #006eff;
+      color: #006EFF;
       float: right;
     }
   }
@@ -39,13 +37,13 @@
   .TUIChat-setting {
     position: absolute;
     right: 0;
-    height: calc(100% - 40Px);
+    height: calc(100% - 40px);
     z-index: 2;
-    top: 40Px;
+    top: 40px;
   }
 
   &-main {
-    min-height: 0Px;
+    min-height: 0px;
     flex: 1;
     position: relative;
     display: flex;
@@ -53,11 +51,9 @@
   }
 
   &-footer {
-    border-top: 2px solid #DFE1E3;
-    height: 173Px;
+    height: 173px;
     display: flex;
     flex-direction: column;
-    background-color: #f1f2f3;
 
     .input {
       flex: 1;
@@ -67,9 +63,9 @@
 
       textarea {
         width: 100%;
-        line-height: 20Px;
+        line-height: 20px;
         margin: 0;
-        padding: 2Px 20Px;
+        padding: 2px 20px;
         resize: none;
         box-sizing: border-box;
         border: none;
@@ -82,19 +78,19 @@
       }
 
       p {
-        padding: 12Px 20Px 20Px;
+        padding: 12px 20px 20px;
       }
 
       .input-btn {
         position: absolute;
-        bottom: 20Px;
-        right: 20Px;
-        padding: 8Px 20Px;
-        border-radius: 4Px;
+        bottom: 20px;
+        right: 20px;
+        padding: 8px 20px;
+        border-radius: 4px;
         border: none;
-        font-size: 14Px;
+        font-size: 14px;
         text-align: center;
-        line-height: 20Px;
+        line-height: 20px;
 
         &:hover {
           .input-btn-hover {
@@ -109,20 +105,20 @@
           position: absolute;
           right: 120%;
           word-break: keep-all;
-          height: 30Px;
+          height: 30px;
           white-space: nowrap;
           top: 0;
           bottom: 0;
           margin: auto 0;
-          padding: 5Px 10Px;
-          border-radius: 3Px;
+          padding: 5px 10px;
+          border-radius: 3px;
 
           &::before {
-            content: '';
+            content: "";
             position: absolute;
             width: 0;
             height: 0;
-            right: -20Px;
+            right: -20px;
           }
         }
       }
@@ -147,26 +143,25 @@
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
-  background-color: #F1F2F3;
 
   .message-more {
     font-size: 0.9rem;
-    padding: 5Px;
+    padding: 5px;
     text-align: center;
   }
 
   li:first-child {
-    margin-top: 5Px;
+    margin-top: 5px;
   }
 
   li {
     display: flex;
     position: relative;
-    padding: 0 20Px 30Px;
+    padding: 0 20px 30px;
     flex-direction: column;
 
     .message-label {
-      max-width: 50Px;
+      max-width: 50px;
     }
   }
 
@@ -177,34 +172,34 @@
 
   .to-bottom-tip {
     position: sticky;
-    bottom: 10Px;
+    bottom: 10px;
     left: 100%;
-    margin-right: 15Px;
-    width: 92Px;
-    height: 28Px;
-    padding: 0 5Px;
-    background: #ffffff;
-    border: 1Px solid #e0e0e0;
-    box-shadow: 0 4Px 12Px 0 rgba(0, 0, 0, 0.06);
+    margin-right: 15px;
+    width: 92px;
+    height: 28px;
+    padding: 0 5px;
+    background: #FFFFFF;
+    border: 1px solid #E0E0E0;
+    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    border-radius: 3Px;
+    border-radius: 3px;
 
     .icon {
-      width: 10Px;
-      height: 10Px;
+      width: 10px;
+      height: 10px;
     }
 
     &-cont {
       font-family: PingFangSC-Regular;
       font-weight: 400;
-      font-size: 10Px;
-      color: #147aff;
+      font-size: 10px;
+      color: #147AFF;
       letter-spacing: 0;
       text-align: center;
-      padding-left: 3Px;
+      padding-left: 3px;
     }
   }
 }
@@ -215,11 +210,11 @@
 
   &-item {
     min-width: min-content;
-    max-width: 220Px;
-    width: 72Px;
+    max-width: 220px;
+    width: 72px;
     word-break: keep-all;
-    top: 30Px;
-    border-radius: 8Px;
+    top: 30px;
+    border-radius: 8px;
     display: flex;
     flex-wrap: wrap;
     align-items: baseline;
@@ -230,29 +225,29 @@
     }
 
     li {
-      padding: 4Px 12Px;
-      font-size: 12Px;
-      line-height: 17Px;
+      padding: 4px 12px;
+      font-size: 12px;
+      line-height: 17px;
       display: flex;
       flex-direction: row;
       align-items: center;
       flex-direction: row;
 
       span {
-        padding-left: 4Px;
+        padding-left: 4px;
       }
     }
   }
 
   &-conversation {
     .avatar {
-      width: 36Px;
-      height: 36Px;
-      margin: 0 5Px 0 8Px;
+      width: 36px;
+      height: 36px;
+      margin: 0 5px 0 8px;
     }
 
     .name {
-      font-size: 14Px;
+      font-size: 14px;
     }
   }
 
@@ -267,8 +262,8 @@
     .userInfo-main {
       height: 100%;
       box-sizing: border-box;
-      padding: 20Px;
-      width: 240Px;
+      padding: 20px;
+      width: 240px;
 
       header {
         display: flex;
@@ -278,7 +273,7 @@
 
       main {
         display: flex;
-        padding: 20Px 0;
+        padding: 20px 0;
 
         ol {
           flex: 1;
@@ -293,16 +288,16 @@
             align-items: center;
 
             img {
-              width: 40Px;
-              height: 40Px;
+              width: 40px;
+              height: 40px;
             }
 
             .more {
-              padding-top: 10Px;
+              padding-top: 10px;
             }
 
             dd {
-              max-width: 60Px;
+              max-width: 60px;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
@@ -311,7 +306,7 @@
             .userInfo-mask {
               position: absolute;
               z-index: 5;
-              padding: 20Px;
+              padding: 20px;
               left: 100%;
 
               li {
@@ -319,11 +314,11 @@
                 align-items: center;
 
                 label {
-                  width: 60Px;
+                  width: 60px;
                 }
 
                 span {
-                  max-width: 200Px;
+                  max-width: 200px;
                   word-break: keep-all;
                 }
               }
@@ -339,8 +334,8 @@
   position: fixed;
   z-index: 5;
   width: 100vw;
-  height: calc(100vh - 63Px);
-  top: 63Px;
+  height: calc(100vh - 63px);
+  top: 63px;
   left: 0;
 
   header {
@@ -348,27 +343,27 @@
     justify-content: flex-end;
     width: 100%;
     box-sizing: border-box;
-    padding: 10Px 10Px;
+    padding: 10px 10px;
   }
 }
 
 .memberList-box {
   position: absolute;
-  bottom: 128Px;
+  bottom: 128px;
   width: 21.94rem;
   max-height: 10rem;
   overflow-y: auto;
-  background: #ffffff;
+  background: #FFFFFF;
   box-shadow: 0 0.06rem 0.63rem 0 rgba(2, 16, 43, 0.15);
   border-radius: 0.13rem;
 
   &-header {
     height: 2.5rem;
-    padding-top: 5Px;
+    padding-top: 5px;
     cursor: pointer;
 
     &:hover {
-      background: rgba(0, 110, 255, 0.1);
+      background: rgba(0, 110, 255, 0.10);
     }
   }
 
@@ -378,7 +373,7 @@
     font-size: 0.88rem;
     color: #000000;
     letter-spacing: 0;
-    padding-left: 5Px;
+    padding-left: 5px;
   }
 
   &-body {
@@ -388,18 +383,18 @@
     align-items: center;
 
     &:hover {
-      background: rgba(0, 110, 255, 0.1);
+      background: rgba(0, 110, 255, 0.10);
     }
   }
 
   img {
     width: 1.5rem;
     height: 1.5rem;
-    padding-left: 10Px;
+    padding-left: 10px;
   }
 
   .selected {
-    background: rgba(0, 110, 255, 0.1);
+    background: rgba(0, 110, 255, 0.10);
   }
 }
 
@@ -411,15 +406,15 @@
     flex: 1;
     align-items: center;
     display: flex;
-    padding: 0 18Px;
+    padding: 0 18px;
 
     i {
       height: 3.5rem;
-      border: 1Px solid #e8e8e9;
+      border: 1px solid #E8E8E9;
     }
 
     label {
-      margin-top: 5Px;
+      margin-top: 5px;
     }
 
     &-show {
@@ -431,14 +426,14 @@
       text-overflow: ellipsis;
       flex-direction: column;
       justify-content: center;
-      padding-left: 6Px;
+      padding-left: 6px;
 
       span {
         height: 1.25rem;
         font-family: PingFangSC-Regular;
         font-weight: 400;
         font-size: 0.88rem;
-        color: #bfc1c5;
+        color: #BFC1C5;
         letter-spacing: 0;
         text-overflow: ellipsis;
         width: 100%;
@@ -450,29 +445,29 @@
 
 .reference {
   width: auto;
-  padding-bottom: 0Px;
-  margin: 0Px 100Px 10Px 10Px;
+  padding-bottom: 0px;
+  margin: 0px 100px 10px 10px;
   display: flex;
 
   &-box {
     padding: 0;
     overflow: hidden;
     width: max-content;
-    padding: 10Px;
+    padding: 10px;
     background-color: #fbfbfb;
     display: flex;
-    border-radius: 8Px;
+    border-radius: 8px;
 
     &-show {
       width: max-content;
-      padding-right: 10Px;
+      padding-right: 10px;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
       flex: 1;
 
       &-name {
-        padding-right: 5Px;
+        padding-right: 5px;
       }
 
       span {
@@ -480,8 +475,8 @@
         font-family: 'PingFang SC';
         font-style: normal;
         font-weight: 400;
-        font-size: 12Px;
-        line-height: 17Px;
+        font-size: 12px;
+        line-height: 17px;
         color: #666666;
       }
     }
@@ -489,19 +484,19 @@
 }
 
 .btn {
-  padding: 8Px 20Px;
-  border-radius: 4Px;
+  padding: 8px 20px;
+  border-radius: 4px;
   border: none;
-  font-size: 14Px;
+  font-size: 14px;
   text-align: center;
-  line-height: 20Px;
+  line-height: 20px;
 }
 
 .toggleMask {
   &::before {
     position: fixed;
     z-index: 1;
-    content: '';
+    content: "";
     width: 100vw;
     height: 100vh;
     top: 0;
@@ -511,16 +506,16 @@
 }
 
 ::-webkit-scrollbar {
-  width: 6Px;
-  height: 140Px;
+  width: 6px;
+  height: 140px;
   background-color: transparent;
 }
 
 ::-webkit-scrollbar-track {
-  border-radius: 10Px;
+  border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-  border-radius: 10Px;
-  background-color: #9a999c;
+  border-radius: 10px;
+  background-color: #9A999C;
 }

src/TUIKit/TUIComponents/container/TUIChat/utils/dist/utils.js

@@ -1,1078 +1,648 @@
-'use strict';
-var __assign =
-  (this && this.__assign) ||
-  function () {
-    __assign =
-      Object.assign ||
-      function (t) {
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
-          s = arguments[i];
-          for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
         }
         return t;
-      };
+    };
     return __assign.apply(this, arguments);
-  };
-var __spreadArrays =
-  (this && this.__spreadArrays) ||
-  function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-      s += arguments[i].length;
+};
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
     for (var r = Array(s), k = 0, i = 0; i < il; i++)
-      for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-        r[k] = a[j];
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
     return r;
-  };
+};
 var _this = this;
 exports.__esModule = true;
-exports.handleSkeletonSize =
-  exports.isMessageTip =
-  exports.throttle =
-  exports.deepCopy =
-  exports.isTypingMessage =
-  exports.JSONToObject =
-  exports.isJSON =
-  exports.handleOptions =
-  exports.isUrl =
-  exports.getImgLoad =
-  exports.translateGroupSystemNotice =
-  exports.handleCustomMessageShowContext =
-  exports.extractCallingInfoFromMessage =
-  exports.handleMergerMessageShowContext =
-  exports.handleFileMessageShowContext =
-  exports.handleAudioMessageShowContext =
-  exports.handleVideoMessageShowContext =
-  exports.handleImageMessageShowContext =
-  exports.handleLocationMessageShowContext =
-  exports.handleFaceMessageShowContext =
-  exports.handleTextMessageShowContext =
-  exports.handleTipMessageShowContext =
-  exports.handleShowLastMessage =
-  exports.handleReferenceForShow =
-  exports.handleAt =
-  exports.handleName =
-  exports.handleAvatar =
-    void 0;
-var date_1 = require('../../../utils/date');
-var decodeText_1 = require('./decodeText');
-var tim_1 = require('../../../../TUICore/tim');
-var constant_1 = require('../../constant');
+exports.handleSkeletonSize = exports.isMessageTip = exports.throttle = exports.deepCopy = exports.isTypingMessage = exports.JSONToObject = exports.isJSON = exports.handleOptions = exports.isUrl = exports.getImgLoad = exports.translateGroupSystemNotice = exports.handleCustomMessageShowContext = exports.extractCallingInfoFromMessage = exports.handleMergerMessageShowContext = exports.handleFileMessageShowContext = exports.handleAudioMessageShowContext = exports.handleVideoMessageShowContext = exports.handleImageMessageShowContext = exports.handleLocationMessageShowContext = exports.handleFaceMessageShowContext = exports.handleTextMessageShowContext = exports.handleTipMessageShowContext = exports.handleShowLastMessage = exports.handleReferenceForShow = exports.handleAt = exports.handleName = exports.handleAvatar = void 0;
+var date_1 = require("../../../utils/date");
+var decodeText_1 = require("./decodeText");
+var tim_1 = require("../../../../TUICore/tim");
+var constant_1 = require("../../constant");
 // Handling avatars
 function handleAvatar(item) {
-  var _a, _b, _c, _d, _e, _f;
-  var avatar = '';
-  switch (item.type) {
-    case tim_1['default'].TYPES.CONV_C2C:
-      avatar = isUrl(
-        (_a = item === null || item === void 0 ? void 0 : item.userProfile) ===
-          null || _a === void 0
-          ? void 0
-          : _a.avatar
-      )
-        ? (_b =
-            item === null || item === void 0 ? void 0 : item.userProfile) ===
-            null || _b === void 0
-          ? void 0
-          : _b.avatar
-        : 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png';
-      break;
-    case tim_1['default'].TYPES.CONV_GROUP:
-      avatar = isUrl(
-        (_c = item === null || item === void 0 ? void 0 : item.groupProfile) ===
-          null || _c === void 0
-          ? void 0
-          : _c.avatar
-      )
-        ? (_d =
-            item === null || item === void 0 ? void 0 : item.groupProfile) ===
-            null || _d === void 0
-          ? void 0
-          : _d.avatar
-        : 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png';
-      break;
-    case tim_1['default'].TYPES.CONV_SYSTEM:
-      avatar = isUrl(
-        (_e = item === null || item === void 0 ? void 0 : item.groupProfile) ===
-          null || _e === void 0
-          ? void 0
-          : _e.avatar
-      )
-        ? (_f =
-            item === null || item === void 0 ? void 0 : item.groupProfile) ===
-            null || _f === void 0
-          ? void 0
-          : _f.avatar
-        : 'https://web.sdk.qcloud.com/component/TUIKit/assets/group_avatar.png';
-      break;
-  }
-  return avatar;
+    var _a, _b, _c, _d, _e, _f;
+    var avatar = '';
+    switch (item.type) {
+        case tim_1["default"].TYPES.CONV_C2C:
+            avatar = isUrl((_a = item === null || item === void 0 ? void 0 : item.userProfile) === null || _a === void 0 ? void 0 : _a.avatar)
+                ? (_b = item === null || item === void 0 ? void 0 : item.userProfile) === null || _b === void 0 ? void 0 : _b.avatar : 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png';
+            break;
+        case tim_1["default"].TYPES.CONV_GROUP:
+            avatar = isUrl((_c = item === null || item === void 0 ? void 0 : item.groupProfile) === null || _c === void 0 ? void 0 : _c.avatar)
+                ? (_d = item === null || item === void 0 ? void 0 : item.groupProfile) === null || _d === void 0 ? void 0 : _d.avatar : 'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg';
+            break;
+        case tim_1["default"].TYPES.CONV_SYSTEM:
+            avatar = isUrl((_e = item === null || item === void 0 ? void 0 : item.groupProfile) === null || _e === void 0 ? void 0 : _e.avatar)
+                ? (_f = item === null || item === void 0 ? void 0 : item.groupProfile) === null || _f === void 0 ? void 0 : _f.avatar : 'https://web.sdk.qcloud.com/component/TUIKit/assets/group_avatar.png';
+            break;
+    }
+    return avatar;
 }
 exports.handleAvatar = handleAvatar;
 // Handling names
 function handleName(item) {
-  var _a, _b;
-  var t = window.TUIKitTUICore.config.i18n.useI18n().t;
-  var name = '';
-  switch (item.type) {
-    case tim_1['default'].TYPES.CONV_C2C:
-      name =
-        (item === null || item === void 0 ? void 0 : item.userProfile.nick) ||
-        ((_a = item === null || item === void 0 ? void 0 : item.userProfile) ===
-          null || _a === void 0
-          ? void 0
-          : _a.userID) ||
-        '';
-      break;
-    case tim_1['default'].TYPES.CONV_GROUP:
-      name =
-        item.groupProfile.name ||
-        ((_b =
-          item === null || item === void 0 ? void 0 : item.groupProfile) ===
-          null || _b === void 0
-          ? void 0
-          : _b.groupID) ||
-        '';
-      break;
-    case tim_1['default'].TYPES.CONV_SYSTEM:
-      name = t('系统通知');
-      break;
-  }
-  return name;
+    var _a, _b;
+    var t = window.TUIKitTUICore.config.i18n.useI18n().t;
+    var name = '';
+    switch (item.type) {
+        case tim_1["default"].TYPES.CONV_C2C:
+            name = (item === null || item === void 0 ? void 0 : item.userProfile.nick) || ((_a = item === null || item === void 0 ? void 0 : item.userProfile) === null || _a === void 0 ? void 0 : _a.userID) || '';
+            break;
+        case tim_1["default"].TYPES.CONV_GROUP:
+            name = item.groupProfile.name || ((_b = item === null || item === void 0 ? void 0 : item.groupProfile) === null || _b === void 0 ? void 0 : _b.groupID) || '';
+            break;
+        case tim_1["default"].TYPES.CONV_SYSTEM:
+            name = t('系统通知');
+            break;
+    }
+    return name;
 }
 exports.handleName = handleName;
 // Handle whether there is someone@
 function handleAt(item) {
-  var t = window.TUIKitTUICore.config.i18n.useI18n().t;
-  var List = [
-    '[' + t('TUIConversation.有人@我') + ']',
-    '[' + t('TUIConversation.@所有人') + ']',
-    '[' +
-      t('TUIConversation.@所有人') +
-      '][' +
-      t('TUIConversation.有人@我') +
-      ']'
-  ];
-  var showAtType = '';
-  for (var index = 0; index < item.groupAtInfoList.length; index++) {
-    if (item.groupAtInfoList[index].atTypeArray[0] && item.unreadCount > 0) {
-      showAtType = List[item.groupAtInfoList[index].atTypeArray[0] - 1];
+    var t = window.TUIKitTUICore.config.i18n.useI18n().t;
+    var List = [
+        "[" + t('TUIConversation.有人@我') + "]",
+        "[" + t('TUIConversation.@所有人') + "]",
+        "[" + t('TUIConversation.@所有人') + "][" + t('TUIConversation.有人@我') + "]",
+    ];
+    var showAtType = '';
+    for (var index = 0; index < item.groupAtInfoList.length; index++) {
+        if (item.groupAtInfoList[index].atTypeArray[0] && item.unreadCount > 0) {
+            showAtType = List[item.groupAtInfoList[index].atTypeArray[0] - 1];
+        }
     }
-  }
-  return showAtType;
+    return showAtType;
 }
 exports.handleAt = handleAt;
 function handleReferenceForShow(message) {
-  var _a;
-  var data = {
-    referenceMessageForShow: '',
-    referenceMessageType: 0
-  };
-  if (
-    !message ||
-    !(message === null || message === void 0 ? void 0 : message.ID) ||
-    !(message === null || message === void 0 ? void 0 : message.type)
-  )
+    var _a;
+    var data = {
+        referenceMessageForShow: '',
+        referenceMessageType: 0
+    };
+    if (!message || !(message === null || message === void 0 ? void 0 : message.ID) || !(message === null || message === void 0 ? void 0 : message.type))
+        return data;
+    switch (message.type) {
+        case tim_1["default"].TYPES.MSG_TEXT:
+            data.referenceMessageForShow = (_a = message === null || message === void 0 ? void 0 : message.payload) === null || _a === void 0 ? void 0 : _a.text;
+            data.referenceMessageType = 1;
+            break;
+        case tim_1["default"].TYPES.MSG_CUSTOM:
+            data.referenceMessageForShow = '[自定义消息]';
+            data.referenceMessageType = 2;
+            break;
+        case tim_1["default"].TYPES.MSG_IMAGE:
+            data.referenceMessageForShow = '[图片]';
+            data.referenceMessageType = 3;
+            break;
+        case tim_1["default"].TYPES.MSG_AUDIO:
+            data.referenceMessageForShow = '[语音]';
+            data.referenceMessageType = 4;
+            break;
+        case tim_1["default"].TYPES.MSG_VIDEO:
+            data.referenceMessageForShow = '[视频]';
+            data.referenceMessageType = 5;
+            break;
+        case tim_1["default"].TYPES.MSG_FILE:
+            data.referenceMessageForShow = '[文件]';
+            data.referenceMessageType = 6;
+            break;
+        case tim_1["default"].TYPES.MSG_FACE:
+            data.referenceMessageForShow = '[表情]';
+            data.referenceMessageType = 8;
+            break;
+    }
     return data;
-  switch (message.type) {
-    case tim_1['default'].TYPES.MSG_TEXT:
-      data.referenceMessageForShow =
-        (_a =
-          message === null || message === void 0 ? void 0 : message.payload) ===
-          null || _a === void 0
-          ? void 0
-          : _a.text;
-      data.referenceMessageType = 1;
-      break;
-    case tim_1['default'].TYPES.MSG_CUSTOM:
-      data.referenceMessageForShow = '[自定义消息]';
-      data.referenceMessageType = 2;
-      break;
-    case tim_1['default'].TYPES.MSG_IMAGE:
-      data.referenceMessageForShow = '[图片]';
-      data.referenceMessageType = 3;
-      break;
-    case tim_1['default'].TYPES.MSG_AUDIO:
-      data.referenceMessageForShow = '[语音]';
-      data.referenceMessageType = 4;
-      break;
-    case tim_1['default'].TYPES.MSG_VIDEO:
-      data.referenceMessageForShow = '[视频]';
-      data.referenceMessageType = 5;
-      break;
-    case tim_1['default'].TYPES.MSG_FILE:
-      data.referenceMessageForShow = '[文件]';
-      data.referenceMessageType = 6;
-      break;
-    case tim_1['default'].TYPES.MSG_FACE:
-      data.referenceMessageForShow = '[表情]';
-      data.referenceMessageType = 8;
-      break;
-  }
-  return data;
 }
 exports.handleReferenceForShow = handleReferenceForShow;
 // Internal display of processing message box
 function handleShowLastMessage(item) {
-  var _a;
-  var t = window.TUIKitTUICore.config.i18n.useI18n().t;
-  var lastMessage = item.lastMessage;
-  var conversation = item;
-  var showNick = '';
-  var lastMessagePayload = '';
-  // Judge the number of unread messages and display them only when the message is enabled without interruption.
-  var showUnreadCount =
-    conversation.unreadCount > 0 &&
-    conversation.messageRemindType ===
-      tim_1['default'].TYPES.MSG_REMIND_ACPT_NOT_NOTE
-      ? '[' +
-        (conversation.unreadCount > 99 ? '99+' : conversation.unreadCount) +
-        t('TUIConversation.条') +
-        '] '
-      : '';
-  // Determine the lastmessage sender of the group. Namecard / Nick / userid is displayed by priority
-  if (conversation.type === tim_1['default'].TYPES.CONV_GROUP) {
-    if (lastMessage.fromAccount === conversation.groupProfile.selfInfo.userID) {
-      showNick = t('TUIConversation.我');
-    } else {
-      showNick =
-        lastMessage.nameCard || lastMessage.nick || lastMessage.fromAccount;
+    var _a;
+    var t = window.TUIKitTUICore.config.i18n.useI18n().t;
+    var lastMessage = item.lastMessage;
+    var conversation = item;
+    var showNick = '';
+    var lastMessagePayload = '';
+    // Judge the number of unread messages and display them only when the message is enabled without interruption.
+    var showUnreadCount = conversation.unreadCount > 0 &&
+        conversation.messageRemindType === tim_1["default"].TYPES.MSG_REMIND_ACPT_NOT_NOTE
+        ? "[" + (conversation.unreadCount > 99 ? "99+" : conversation.unreadCount) + t('TUIConversation.条') + "] "
+        : "";
+    // Determine the lastmessage sender of the group. Namecard / Nick / userid is displayed by priority
+    if (conversation.type === tim_1["default"].TYPES.CONV_GROUP) {
+        if (lastMessage.fromAccount === conversation.groupProfile.selfInfo.userID) {
+            showNick = t('TUIConversation.我');
+        }
+        else {
+            showNick = lastMessage.nameCard || lastMessage.nick || lastMessage.fromAccount;
+        }
     }
-  }
-  // Display content of lastmessage message body
-  if (lastMessage.type === tim_1['default'].TYPES.MSG_TEXT) {
-    lastMessagePayload = lastMessage.payload.text;
-  } else if (lastMessage.type === tim_1['default'].TYPES.MSG_CUSTOM) {
-    var data = JSONToObject(
-      (_a =
-        lastMessage === null || lastMessage === void 0
-          ? void 0
-          : lastMessage.payload) === null || _a === void 0
-        ? void 0
-        : _a.data
-    );
-    if ((data === null || data === void 0 ? void 0 : data.businessID) === 1) {
-      lastMessagePayload = extractCallingInfoFromMessage(lastMessage);
-      return lastMessagePayload;
+    // Display content of lastmessage message body
+    if (lastMessage.type === tim_1["default"].TYPES.MSG_TEXT) {
+        lastMessagePayload = lastMessage.payload.text;
     }
-    lastMessagePayload = lastMessage.messageForShow;
-  } else {
-    lastMessagePayload = lastMessage.messageForShow;
-  }
-  if (lastMessage.isRevoked) {
-    lastMessagePayload = t('TUIChat.撤回了一条消息');
-  }
-  if (
-    conversation.type === tim_1['default'].TYPES.CONV_GROUP &&
-    lastMessage.type === tim_1['default'].TYPES.MSG_GRP_TIP
-  ) {
-    return lastMessagePayload;
-  }
-  // Specific display content of message box
-  return (
-    '' + showUnreadCount + (showNick ? showNick + ':' : '') + lastMessagePayload
-  );
+    else if (lastMessage.type === tim_1["default"].TYPES.MSG_CUSTOM) {
+        var data = JSONToObject((_a = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.payload) === null || _a === void 0 ? void 0 : _a.data);
+        if ((data === null || data === void 0 ? void 0 : data.businessID) === 1) {
+            lastMessagePayload = extractCallingInfoFromMessage(lastMessage);
+            return lastMessagePayload;
+        }
+        lastMessagePayload = lastMessage.messageForShow;
+    }
+    else {
+        lastMessagePayload = lastMessage.messageForShow;
+    }
+    if (lastMessage.isRevoked) {
+        lastMessagePayload = t('TUIChat.撤回了一条消息');
+    }
+    if (conversation.type === tim_1["default"].TYPES.CONV_GROUP && lastMessage.type === tim_1["default"].TYPES.MSG_GRP_TIP) {
+        return lastMessagePayload;
+    }
+    // Specific display content of message box
+    return "" + showUnreadCount + (showNick ? showNick + ":" : '') + lastMessagePayload;
 }
 exports.handleShowLastMessage = handleShowLastMessage;
 // Handling system tip message display
 function handleTipMessageShowContext(message) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-  var t = window.TUIKitTUICore.config.i18n.useI18n().t;
-  var options = {
-    message: message,
-    text: ''
-  };
-  var userName =
-    (message === null || message === void 0 ? void 0 : message.nick) ||
-    ((_b =
-      (_a =
-        message === null || message === void 0 ? void 0 : message.payload) ===
-        null || _a === void 0
-        ? void 0
-        : _a.userIDList) === null || _b === void 0
-      ? void 0
-      : _b.join(','));
-  if (
-    ((_d =
-      (_c =
-        message === null || message === void 0 ? void 0 : message.payload) ===
-        null || _c === void 0
-        ? void 0
-        : _c.memberList) === null || _d === void 0
-      ? void 0
-      : _d.length) > 0
-  ) {
-    userName = '';
-    (_f =
-      (_e =
-        message === null || message === void 0 ? void 0 : message.payload) ===
-        null || _e === void 0
-        ? void 0
-        : _e.memberList) === null || _f === void 0
-      ? void 0
-      : _f.map(function (user) {
-          userName +=
-            ((user === null || user === void 0 ? void 0 : user.nick) ||
-              (user === null || user === void 0 ? void 0 : user.userID)) + ',';
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var t = window.TUIKitTUICore.config.i18n.useI18n().t;
+    var options = {
+        message: message,
+        text: ''
+    };
+    var userName = (message === null || message === void 0 ? void 0 : message.nick) || ((_b = (_a = message === null || message === void 0 ? void 0 : message.payload) === null || _a === void 0 ? void 0 : _a.userIDList) === null || _b === void 0 ? void 0 : _b.join(','));
+    if (((_d = (_c = message === null || message === void 0 ? void 0 : message.payload) === null || _c === void 0 ? void 0 : _c.memberList) === null || _d === void 0 ? void 0 : _d.length) > 0) {
+        userName = '';
+        (_f = (_e = message === null || message === void 0 ? void 0 : message.payload) === null || _e === void 0 ? void 0 : _e.memberList) === null || _f === void 0 ? void 0 : _f.map(function (user) {
+            userName += ((user === null || user === void 0 ? void 0 : user.nick) || (user === null || user === void 0 ? void 0 : user.userID)) + ",";
         });
-    userName =
-      userName === null || userName === void 0 ? void 0 : userName.slice(0, -1);
-  }
-  if (
-    (message === null || message === void 0 ? void 0 : message.type) ===
-    ((_g =
-      tim_1['default'] === null || tim_1['default'] === void 0
-        ? void 0
-        : tim_1['default'].TYPES) === null || _g === void 0
-      ? void 0
-      : _g.MSG_GRP_TIP)
-  ) {
-    switch (message.payload.operationType) {
-      case tim_1['default'].TYPES.GRP_TIP_MBR_JOIN:
-        options.text = userName + ' ' + t('message.tip.加入群组');
-        break;
-      case tim_1['default'].TYPES.GRP_TIP_MBR_QUIT:
-        options.text =
-          t('message.tip.群成员') +
-          '\uFF1A' +
-          userName +
-          ' ' +
-          t('message.tip.退出群组');
-        break;
-      case tim_1['default'].TYPES.GRP_TIP_MBR_KICKED_OUT:
-        options.text =
-          t('message.tip.群成员') +
-          '\uFF1A' +
-          userName +
-          ' ' +
-          t('message.tip.被') +
-          message.payload.operatorID +
-          t('message.tip.踢出群组');
-        break;
-      case tim_1['default'].TYPES.GRP_TIP_MBR_SET_ADMIN:
-        options.text =
-          t('message.tip.群成员') +
-          '\uFF1A' +
-          userName +
-          ' ' +
-          t('message.tip.成为管理员');
-        break;
-      case tim_1['default'].TYPES.GRP_TIP_MBR_CANCELED_ADMIN:
-        options.text =
-          t('message.tip.群成员') +
-          '\uFF1A' +
-          userName +
-          ' ' +
-          t('message.tip.被撤销管理员');
-        break;
-      case tim_1['default'].TYPES.GRP_TIP_GRP_PROFILE_UPDATED:
-        // options.text =  `${userName} 修改群组资料`;
-        options.text = handleTipGrpUpdated(message);
-        break;
-      case tim_1['default'].TYPES.GRP_TIP_MBR_PROFILE_UPDATED:
-        for (
-          var _i = 0, _k = message.payload.memberList;
-          _i < _k.length;
-          _i++
-        ) {
-          var member = _k[_i];
-          if (member.muteTime > 0) {
-            options.text =
-              t('message.tip.群成员') +
-              '\uFF1A' +
-              member.userID +
-              t('message.tip.被禁言');
-          } else {
-            options.text =
-              t('message.tip.群成员') +
-              '\uFF1A' +
-              member.userID +
-              t('message.tip.被取消禁言');
-          }
+        userName = userName === null || userName === void 0 ? void 0 : userName.slice(0, -1);
+    }
+    if ((message === null || message === void 0 ? void 0 : message.type) === ((_g = tim_1["default"] === null || tim_1["default"] === void 0 ? void 0 : tim_1["default"].TYPES) === null || _g === void 0 ? void 0 : _g.MSG_GRP_TIP)) {
+        switch (message.payload.operationType) {
+            case tim_1["default"].TYPES.GRP_TIP_MBR_JOIN:
+                options.text = userName + " " + t('message.tip.加入群组');
+                break;
+            case tim_1["default"].TYPES.GRP_TIP_MBR_QUIT:
+                options.text = t('message.tip.群成员') + "\uFF1A" + userName + " " + t('message.tip.退出群组');
+                break;
+            case tim_1["default"].TYPES.GRP_TIP_MBR_KICKED_OUT:
+                options.text = t('message.tip.群成员') + "\uFF1A" + userName + " " + t('message.tip.被') + message.payload.operatorID + t('message.tip.踢出群组');
+                break;
+            case tim_1["default"].TYPES.GRP_TIP_MBR_SET_ADMIN:
+                options.text = t('message.tip.群成员') + "\uFF1A" + userName + " " + t('message.tip.成为管理员');
+                break;
+            case tim_1["default"].TYPES.GRP_TIP_MBR_CANCELED_ADMIN:
+                options.text = t('message.tip.群成员') + "\uFF1A" + userName + " " + t('message.tip.被撤销管理员');
+                break;
+            case tim_1["default"].TYPES.GRP_TIP_GRP_PROFILE_UPDATED:
+                // options.text =  `${userName} 修改群组资料`;
+                options.text = handleTipGrpUpdated(message);
+                break;
+            case tim_1["default"].TYPES.GRP_TIP_MBR_PROFILE_UPDATED:
+                for (var _i = 0, _k = message.payload.memberList; _i < _k.length; _i++) {
+                    var member = _k[_i];
+                    if (member.muteTime > 0) {
+                        options.text = t('message.tip.群成员') + "\uFF1A" + member.userID + t('message.tip.被禁言');
+                    }
+                    else {
+                        options.text = t('message.tip.群成员') + "\uFF1A" + member.userID + t('message.tip.被取消禁言');
+                    }
+                }
+                break;
+            default:
+                options.text = "[" + t('message.tip.群提示消息') + "]";
+                break;
         }
-        break;
-      default:
-        options.text = '[' + t('message.tip.群提示消息') + ']';
-        break;
     }
-  } else if (
-    ((_h =
-      message === null || message === void 0 ? void 0 : message.payload) ===
-      null || _h === void 0
-      ? void 0
-      : _h.data) === 'group_create'
-  ) {
-    options.text =
-      (_j =
-        message === null || message === void 0 ? void 0 : message.payload) ===
-        null || _j === void 0
-        ? void 0
-        : _j.extension;
-  } else {
-    options.text = extractCallingInfoFromMessage(message);
-  }
-  return options;
+    else if (((_h = message === null || message === void 0 ? void 0 : message.payload) === null || _h === void 0 ? void 0 : _h.data) === "group_create") {
+        options.text = (_j = message === null || message === void 0 ? void 0 : message.payload) === null || _j === void 0 ? void 0 : _j.extension;
+    }
+    else {
+        options.text = extractCallingInfoFromMessage(message);
+    }
+    return options;
 }
 exports.handleTipMessageShowContext = handleTipMessageShowContext;
 function handleTipGrpUpdated(message) {
-  var t = window.TUIKitTUICore.config.i18n.useI18n().t;
-  var payload = message.payload;
-  var newGroupProfile = payload.newGroupProfile;
-  var operatorID = payload.operatorID;
-  var text = '';
-  if ('muteAllMembers' in newGroupProfile) {
-    if (newGroupProfile['muteAllMembers']) {
-      text =
-        t('message.tip.管理员') +
-        ' ' +
-        operatorID +
-        ' ' +
-        t('message.tip.开启全员禁言');
-    } else {
-      text =
-        t('message.tip.管理员') +
-        ' ' +
-        operatorID +
-        ' ' +
-        t('message.tip.取消全员禁言');
+    var t = window.TUIKitTUICore.config.i18n.useI18n().t;
+    var payload = message.payload;
+    var newGroupProfile = payload.newGroupProfile;
+    var operatorID = payload.operatorID;
+    var text = "";
+    if ("muteAllMembers" in newGroupProfile) {
+        if (newGroupProfile["muteAllMembers"]) {
+            text = t("message.tip.管理员") + " " + operatorID + " " + t("message.tip.开启全员禁言");
+        }
+        else {
+            text = t("message.tip.管理员") + " " + operatorID + " " + t("message.tip.取消全员禁言");
+        }
+    }
+    else if ("ownerID" in newGroupProfile) {
+        text = newGroupProfile["ownerID"] + " " + t("message.tip.成为新的群主");
     }
-  } else if ('ownerID' in newGroupProfile) {
-    text = newGroupProfile['ownerID'] + ' ' + t('message.tip.成为新的群主');
-  } else if ('groupName' in newGroupProfile) {
-    text =
-      operatorID +
-      ' ' +
-      t('message.tip.修改群名为') +
-      ' ' +
-      newGroupProfile['groupName'];
-  } else if ('notification' in newGroupProfile) {
-    text = operatorID + ' ' + t('message.tip.发布新公告');
-  }
-  return text;
+    else if ("groupName" in newGroupProfile) {
+        text = operatorID + " " + t("message.tip.修改群名为") + " " + newGroupProfile["groupName"];
+    }
+    else if ("notification" in newGroupProfile) {
+        text = operatorID + " " + t("message.tip.发布新公告");
+    }
+    return text;
 }
 // Parsing and handling text message display
 function handleTextMessageShowContext(item) {
-  var options = {
-    text: decodeText_1.decodeText(item.payload)
-  };
-  return options;
+    var options = {
+        text: decodeText_1.decodeText(item.payload)
+    };
+    return options;
 }
 exports.handleTextMessageShowContext = handleTextMessageShowContext;
 // Parsing and handling face message display
 function handleFaceMessageShowContext(item) {
-  var face = {
-    message: item,
-    name: '',
-    url: ''
-  };
-  face.name = item.payload.data;
-  if (item.payload.data.indexOf('@2x') < 0) {
-    face.name = face.name + '@2x';
-  }
-  face.url =
-    'https://web.sdk.qcloud.com/im/assets/face-elem/' + face.name + '.png';
-  return face;
+    var face = {
+        message: item,
+        name: '',
+        url: ''
+    };
+    face.name = item.payload.data;
+    if (item.payload.data.indexOf('@2x') < 0) {
+        face.name = face.name + "@2x";
+    }
+    face.url = "https://web.sdk.qcloud.com/im/assets/face-elem/" + face.name + ".png";
+    return face;
 }
 exports.handleFaceMessageShowContext = handleFaceMessageShowContext;
 // Parsing and handling location message display
 function handleLocationMessageShowContext(item) {
-  var location = {
-    lon: '',
-    lat: '',
-    href: '',
-    url: '',
-    description: '',
-    message: item
-  };
-  location.lon = item.payload.longitude.toFixed(6);
-  location.lat = item.payload.latitude.toFixed(6);
-  location.href =
-    'https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&' +
-    ('pointx=' +
-      location.lon +
-      '&pointy=' +
-      location.lat +
-      '&name=' +
-      item.payload.description);
-  location.url =
-    'https://apis.map.qq.com/ws/staticmap/v2/?' +
-    ('center=' +
-      location.lat +
-      ',' +
-      location.lon +
-      '&zoom=10&size=300*150&maptype=roadmap&') +
-    ('markers=size:large|color:0xFFCCFF|label:k|' +
-      location.lat +
-      ',' +
-      location.lon +
-      '&') +
-    'key=UBNBZ-PTP3P-TE7DB-LHRTI-Y4YLE-VWBBD';
-  location.description = item.payload.description;
-  return location;
+    var location = {
+        lon: '',
+        lat: '',
+        href: '',
+        url: '',
+        description: '',
+        message: item
+    };
+    location.lon = item.payload.longitude.toFixed(6);
+    location.lat = item.payload.latitude.toFixed(6);
+    location.href =
+        'https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&' +
+            ("pointx=" + location.lon + "&pointy=" + location.lat + "&name=" + item.payload.description);
+    location.url =
+        'https://apis.map.qq.com/ws/staticmap/v2/?' +
+            ("center=" + location.lat + "," + location.lon + "&zoom=10&size=300*150&maptype=roadmap&") +
+            ("markers=size:large|color:0xFFCCFF|label:k|" + location.lat + "," + location.lon + "&") +
+            'key=UBNBZ-PTP3P-TE7DB-LHRTI-Y4YLE-VWBBD';
+    location.description = item.payload.description;
+    return location;
 }
 exports.handleLocationMessageShowContext = handleLocationMessageShowContext;
 // Parsing and handling image message display
 function handleImageMessageShowContext(item) {
-  return {
-    progress:
-      (item === null || item === void 0 ? void 0 : item.status) === 'unSend' &&
-      item.progress,
-    url: item.payload.imageInfoArray[1].url,
-    width: item.payload.imageInfoArray[0].width,
-    height: item.payload.imageInfoArray[0].height,
-    message: item
-  };
+    return {
+        progress: (item === null || item === void 0 ? void 0 : item.status) === 'unSend' && item.progress,
+        url: item.payload.imageInfoArray[1].url,
+        width: item.payload.imageInfoArray[0].width,
+        height: item.payload.imageInfoArray[0].height,
+        message: item
+    };
 }
 exports.handleImageMessageShowContext = handleImageMessageShowContext;
 // Parsing and handling video message display
 function handleVideoMessageShowContext(item) {
-  var _a, _b, _c, _d;
-  return {
-    progress:
-      (item === null || item === void 0 ? void 0 : item.status) === 'unSend' &&
-      (item === null || item === void 0 ? void 0 : item.progress),
-    url:
-      (_a = item === null || item === void 0 ? void 0 : item.payload) ===
-        null || _a === void 0
-        ? void 0
-        : _a.videoUrl,
-    snapshotUrl:
-      (_b = item === null || item === void 0 ? void 0 : item.payload) ===
-        null || _b === void 0
-        ? void 0
-        : _b.snapshotUrl,
-    snapshotWidth:
-      (_c = item === null || item === void 0 ? void 0 : item.payload) ===
-        null || _c === void 0
-        ? void 0
-        : _c.snapshotWidth,
-    snapshotHeight:
-      (_d = item === null || item === void 0 ? void 0 : item.payload) ===
-        null || _d === void 0
-        ? void 0
-        : _d.snapshotHeight,
-    message: item
-  };
+    var _a, _b, _c, _d;
+    return {
+        progress: (item === null || item === void 0 ? void 0 : item.status) === 'unSend' && (item === null || item === void 0 ? void 0 : item.progress),
+        url: (_a = item === null || item === void 0 ? void 0 : item.payload) === null || _a === void 0 ? void 0 : _a.videoUrl,
+        snapshotUrl: (_b = item === null || item === void 0 ? void 0 : item.payload) === null || _b === void 0 ? void 0 : _b.snapshotUrl,
+        snapshotWidth: (_c = item === null || item === void 0 ? void 0 : item.payload) === null || _c === void 0 ? void 0 : _c.snapshotWidth,
+        snapshotHeight: (_d = item === null || item === void 0 ? void 0 : item.payload) === null || _d === void 0 ? void 0 : _d.snapshotHeight,
+        message: item
+    };
 }
 exports.handleVideoMessageShowContext = handleVideoMessageShowContext;
 // Parsing and handling audio message display
 function handleAudioMessageShowContext(item) {
-  return {
-    progress:
-      (item === null || item === void 0 ? void 0 : item.status) === 'unSend' &&
-      item.progress,
-    url: item.payload.url,
-    message: item,
-    second: item.payload.second
-  };
+    return {
+        progress: (item === null || item === void 0 ? void 0 : item.status) === 'unSend' && item.progress,
+        url: item.payload.url,
+        message: item,
+        second: item.payload.second
+    };
 }
 exports.handleAudioMessageShowContext = handleAudioMessageShowContext;
 // Parsing and handling file message display
 function handleFileMessageShowContext(item) {
-  var size = '';
-  if (item.payload.fileSize >= 1024 * 1024) {
-    size = (item.payload.fileSize / (1024 * 1024)).toFixed(2) + ' Mb';
-  } else if (item.payload.fileSize >= 1024) {
-    size = (item.payload.fileSize / 1024).toFixed(2) + ' Kb';
-  } else {
-    size = item.payload.fileSize.toFixed(2) + 'B';
-  }
-  return {
-    progress:
-      (item === null || item === void 0 ? void 0 : item.status) === 'unSend' &&
-      item.progress,
-    url: item.payload.fileUrl,
-    message: item,
-    name: item.payload.fileName,
-    size: size
-  };
+    var size = '';
+    if (item.payload.fileSize >= 1024 * 1024) {
+        size = (item.payload.fileSize / (1024 * 1024)).toFixed(2) + " Mb";
+    }
+    else if (item.payload.fileSize >= 1024) {
+        size = (item.payload.fileSize / 1024).toFixed(2) + " Kb";
+    }
+    else {
+        size = item.payload.fileSize.toFixed(2) + "B";
+    }
+    return {
+        progress: (item === null || item === void 0 ? void 0 : item.status) === 'unSend' && item.progress,
+        url: item.payload.fileUrl,
+        message: item,
+        name: item.payload.fileName,
+        size: size
+    };
 }
 exports.handleFileMessageShowContext = handleFileMessageShowContext;
 // Parsing and handling merger message display
 function handleMergerMessageShowContext(item) {
-  return __assign({ message: item }, item.payload);
+    return __assign({ message: item }, item.payload);
 }
 exports.handleMergerMessageShowContext = handleMergerMessageShowContext;
 // Parse audio and video call messages
 function extractCallingInfoFromMessage(message) {
-  var _a, _b;
-  var t = window.TUIKitTUICore.config.i18n.useI18n().t;
-  var callingMessage = {};
-  var objectData = {};
-  try {
-    callingMessage = JSONToObject(
-      (_a =
-        message === null || message === void 0 ? void 0 : message.payload) ===
-        null || _a === void 0
-        ? void 0
-        : _a.data
-    );
-  } catch (error) {
-    callingMessage = {};
-  }
-  if (callingMessage.businessID !== 1) {
-    return '';
-  }
-  try {
-    objectData = JSONToObject(callingMessage.data);
-  } catch (error) {
-    objectData = {};
-  }
-  var inviteeList = '';
-  (_b =
-    callingMessage === null || callingMessage === void 0
-      ? void 0
-      : callingMessage.inviteeList) === null || _b === void 0
-    ? void 0
-    : _b.forEach(function (userID, index) {
+    var _a, _b;
+    var t = window.TUIKitTUICore.config.i18n.useI18n().t;
+    var callingMessage = {};
+    var objectData = {};
+    try {
+        callingMessage = JSONToObject((_a = message === null || message === void 0 ? void 0 : message.payload) === null || _a === void 0 ? void 0 : _a.data);
+    }
+    catch (error) {
+        callingMessage = {};
+    }
+    if (callingMessage.businessID !== 1) {
+        return '';
+    }
+    try {
+        objectData = JSONToObject(callingMessage.data);
+    }
+    catch (error) {
+        objectData = {};
+    }
+    var inviteeList = '';
+    (_b = callingMessage === null || callingMessage === void 0 ? void 0 : callingMessage.inviteeList) === null || _b === void 0 ? void 0 : _b.forEach(function (userID, index) {
         var _a;
-        if (
-          index <
-          ((_a =
-            callingMessage === null || callingMessage === void 0
-              ? void 0
-              : callingMessage.inviteeList) === null || _a === void 0
-            ? void 0
-            : _a.length) -
-            1
-        ) {
-          inviteeList += '"' + userID + '"\u3001';
-        } else {
-          inviteeList += '"' + userID + '" ';
+        if (index < ((_a = callingMessage === null || callingMessage === void 0 ? void 0 : callingMessage.inviteeList) === null || _a === void 0 ? void 0 : _a.length) - 1) {
+            inviteeList += "\"" + userID + "\"\u3001";
+        }
+        else {
+            inviteeList += "\"" + userID + "\" ";
+        }
+    });
+    var inviter = "\"" + (callingMessage === null || callingMessage === void 0 ? void 0 : callingMessage.inviter) + "\" ";
+    switch (callingMessage.actionType) {
+        case 1: {
+            if (objectData.call_end >= 0 && !callingMessage.groupID) {
+                return t('message.custom.通话时长') + "\uFF1A" + date_1.formatTime(objectData.call_end);
+            }
+            if (callingMessage.groupID && callingMessage.timeout > 0) {
+                return "" + inviter + t('message.custom.发起通话');
+            }
+            if (callingMessage.groupID) {
+                return "" + t('message.custom.结束群聊');
+            }
+            if (objectData.data && objectData.data.cmd === 'switchToAudio') {
+                return "" + t('message.custom.切换语音通话');
+            }
+            if (objectData.data && objectData.data.cmd === 'switchToVideo') {
+                return "" + t('message.custom.切换视频通话');
+            }
+            return "" + t('message.custom.发起通话');
         }
-      });
-  var inviter =
-    '"' +
-    (callingMessage === null || callingMessage === void 0
-      ? void 0
-      : callingMessage.inviter) +
-    '" ';
-  switch (callingMessage.actionType) {
-    case 1: {
-      if (objectData.call_end >= 0 && !callingMessage.groupID) {
-        return (
-          t('message.custom.通话时长') +
-          '\uFF1A' +
-          date_1.formatTime(objectData.call_end)
-        );
-      }
-      if (callingMessage.groupID && callingMessage.timeout > 0) {
-        return '' + inviter + t('message.custom.发起通话');
-      }
-      if (callingMessage.groupID) {
-        return '' + t('message.custom.结束群聊');
-      }
-      if (objectData.data && objectData.data.cmd === 'switchToAudio') {
-        return '' + t('message.custom.切换语音通话');
-      }
-      if (objectData.data && objectData.data.cmd === 'switchToVideo') {
-        return '' + t('message.custom.切换视频通话');
-      }
-      return '' + t('message.custom.发起通话');
+        case 2:
+            return "" + (callingMessage.groupID ? inviter : '') + t('message.custom.取消通话');
+        case 3:
+            if (objectData.data && objectData.data.cmd === 'switchToAudio') {
+                return "" + t('message.custom.切换语音通话');
+            }
+            if (objectData.data && objectData.data.cmd === 'switchToVideo') {
+                return "" + t('message.custom.切换视频通话');
+            }
+            return "" + (callingMessage.groupID ? inviteeList : '') + t('message.custom.已接听');
+        case 4:
+            return "" + (callingMessage.groupID ? inviteeList : '') + t('message.custom.拒绝通话');
+        case 5:
+            if (objectData.data && objectData.data.cmd === 'switchToAudio') {
+                return "" + t('message.custom.切换语音通话');
+            }
+            if (objectData.data && objectData.data.cmd === 'switchToVideo') {
+                return "" + t('message.custom.切换视频通话');
+            }
+            return "" + (callingMessage.groupID ? inviteeList : '') + t('message.custom.无应答');
+        default:
+            return '';
     }
-    case 2:
-      return (
-        '' +
-        (callingMessage.groupID ? inviter : '') +
-        t('message.custom.取消通话')
-      );
-    case 3:
-      if (objectData.data && objectData.data.cmd === 'switchToAudio') {
-        return '' + t('message.custom.切换语音通话');
-      }
-      if (objectData.data && objectData.data.cmd === 'switchToVideo') {
-        return '' + t('message.custom.切换视频通话');
-      }
-      return (
-        '' +
-        (callingMessage.groupID ? inviteeList : '') +
-        t('message.custom.已接听')
-      );
-    case 4:
-      return (
-        '' +
-        (callingMessage.groupID ? inviteeList : '') +
-        t('message.custom.拒绝通话')
-      );
-    case 5:
-      if (objectData.data && objectData.data.cmd === 'switchToAudio') {
-        return '' + t('message.custom.切换语音通话');
-      }
-      if (objectData.data && objectData.data.cmd === 'switchToVideo') {
-        return '' + t('message.custom.切换视频通话');
-      }
-      return (
-        '' +
-        (callingMessage.groupID ? inviteeList : '') +
-        t('message.custom.无应答')
-      );
-    default:
-      return '';
-  }
 }
 exports.extractCallingInfoFromMessage = extractCallingInfoFromMessage;
 // Parsing and handling custom message display
 function handleCustomMessageShowContext(item) {
-  var _a;
-  var t = window.TUIKitTUICore.config.i18n.useI18n().t;
-  var payloadObj = JSONToObject(
-    (_a = item === null || item === void 0 ? void 0 : item.payload) === null ||
-      _a === void 0
-      ? void 0
-      : _a.data
-  );
-  if (
-    (payloadObj === null || payloadObj === void 0
-      ? void 0
-      : payloadObj.businessID) === constant_1['default'].typeEvaluate
-  ) {
-    if (
-      !(
-        (payloadObj === null || payloadObj === void 0
-          ? void 0
-          : payloadObj.score) > 0
-      )
-    ) {
-      payloadObj.score = 1;
-      item.payload.data = JSON.stringify(payloadObj);
+    var _a;
+    var t = window.TUIKitTUICore.config.i18n.useI18n().t;
+    var payloadObj = JSONToObject((_a = item === null || item === void 0 ? void 0 : item.payload) === null || _a === void 0 ? void 0 : _a.data);
+    if ((payloadObj === null || payloadObj === void 0 ? void 0 : payloadObj.businessID) === constant_1["default"].typeEvaluate) {
+        if (!((payloadObj === null || payloadObj === void 0 ? void 0 : payloadObj.score) > 0)) {
+            payloadObj.score = 1;
+            item.payload.data = JSON.stringify(payloadObj);
+        }
     }
-  }
-  return {
-    message: item,
-    custom:
-      extractCallingInfoFromMessage(item) ||
-      '[' + t('message.custom.自定义消息') + ']'
-  };
+    return {
+        message: item,
+        custom: extractCallingInfoFromMessage(item) || "[" + t('message.custom.自定义消息') + "]"
+    };
 }
 exports.handleCustomMessageShowContext = handleCustomMessageShowContext;
 // Parsing and handling system message display
 function translateGroupSystemNotice(message) {
-  var t = window.TUIKitTUICore.config.i18n.useI18n().t;
-  var groupName =
-    message.payload.groupProfile.name || message.payload.groupProfile.groupID;
-  switch (message.payload.operationType) {
-    case 1:
-      return (
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.申请加入群组') +
-        '\uFF1A' +
-        groupName
-      );
-    case 2:
-      return t('message.tip.成功加入群组') + '\uFF1A' + groupName;
-    case 3:
-      return (
-        t('message.tip.申请加入群组') +
-        '\uFF1A' +
-        groupName +
-        ' ' +
-        t('message.tip.被拒绝')
-      );
-    case 4:
-      return (
-        '' +
-        t('message.tip.你被管理员') +
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.踢出群组') +
-        '\uFF1A' +
-        groupName
-      );
-    case 5:
-      return (
-        t('message.tip.群') +
-        '\uFF1A' +
-        groupName +
-        ' ' +
-        t('message.tip.被') +
-        ' ' +
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.解散')
-      );
-    case 6:
-      return (
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.创建群') +
-        '\uFF1A' +
-        groupName
-      );
-    case 7:
-      return (
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.邀请你加群') +
-        '\uFF1A' +
-        groupName
-      );
-    case 8:
-      return t('message.tip.你退出群组') + '\uFF1A' + groupName;
-    case 9:
-      return (
-        '' +
-        t('message.tip.你被') +
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.设置为群') +
-        '\uFF1A' +
-        groupName +
-        ' ' +
-        t('message.tip.的管理员')
-      );
-    case 10:
-      return (
-        '' +
-        t('message.tip.你被') +
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.撤销群') +
-        '\uFF1A' +
-        groupName +
-        ' ' +
-        t('message.tip.的管理员身份')
-      );
-    case 12:
-      return (
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.邀请你加群') +
-        '\uFF1A' +
-        groupName
-      );
-    case 13:
-      return (
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.同意加群') +
-        '\uFF1A' +
-        groupName
-      );
-    case 14:
-      return (
-        message.payload.operatorID +
-        ' ' +
-        t('message.tip.拒接加群') +
-        '\uFF1A' +
-        groupName
-      );
-    case 255:
-      return (
-        t('message.tip.自定义群系统通知') +
-        ': ' +
-        message.payload.userDefinedField
-      );
-  }
+    var t = window.TUIKitTUICore.config.i18n.useI18n().t;
+    var groupName = message.payload.groupProfile.name || message.payload.groupProfile.groupID;
+    switch (message.payload.operationType) {
+        case 1:
+            return message.payload.operatorID + " " + t('message.tip.申请加入群组') + "\uFF1A" + groupName;
+        case 2:
+            return t('message.tip.成功加入群组') + "\uFF1A" + groupName;
+        case 3:
+            return t('message.tip.申请加入群组') + "\uFF1A" + groupName + " " + t('message.tip.被拒绝');
+        case 4:
+            return "" + t('message.tip.你被管理员') + message.payload.operatorID + " " + t('message.tip.踢出群组') + "\uFF1A" + groupName;
+        case 5:
+            return t('message.tip.群') + "\uFF1A" + groupName + " " + t('message.tip.被') + " " + message.payload.operatorID + " " + t('message.tip.解散');
+        case 6:
+            return message.payload.operatorID + " " + t('message.tip.创建群') + "\uFF1A" + groupName;
+        case 7:
+            return message.payload.operatorID + " " + t('message.tip.邀请你加群') + "\uFF1A" + groupName;
+        case 8:
+            return t('message.tip.你退出群组') + "\uFF1A" + groupName;
+        case 9:
+            return "" + t('message.tip.你被') + message.payload.operatorID + " " + t('message.tip.设置为群') + "\uFF1A" + groupName + " " + t('message.tip.的管理员');
+        case 10:
+            return "" + t('message.tip.你被') + message.payload.operatorID + " " + t('message.tip.撤销群') + "\uFF1A" + groupName + " " + t('message.tip.的管理员身份');
+        case 12:
+            return message.payload.operatorID + " " + t('message.tip.邀请你加群') + "\uFF1A" + groupName;
+        case 13:
+            return message.payload.operatorID + " " + t('message.tip.同意加群') + "\uFF1A" + groupName;
+        case 14:
+            return message.payload.operatorID + " " + t('message.tip.拒接加群') + "\uFF1A" + groupName;
+        case 255:
+            return t('message.tip.自定义群系统通知') + ": " + message.payload.userDefinedField;
+    }
 }
 exports.translateGroupSystemNotice = translateGroupSystemNotice;
 // Image loading complete
 function getImgLoad(container, className, callback) {
-  var images =
-    (container === null || container === void 0
-      ? void 0
-      : container.querySelectorAll('.' + className)) || [];
-  var promiseList = Array.prototype.slice.call(images).map(function (node) {
-    return new Promise(function (resolve, reject) {
-      node.onload = function () {
-        resolve(node);
-      };
-      node.onloadeddata = function () {
-        resolve(node);
-      };
-      node.onprogress = function () {
-        resolve(node);
-      };
-      if (node.complete) {
-        resolve(node);
-      }
+    var images = (container === null || container === void 0 ? void 0 : container.querySelectorAll("." + className)) || [];
+    var promiseList = Array.prototype.slice.call(images).map(function (node) {
+        return new Promise(function (resolve, reject) {
+            node.onload = function () {
+                resolve(node);
+            };
+            node.onloadeddata = function () {
+                resolve(node);
+            };
+            node.onprogress = function () {
+                resolve(node);
+            };
+            if (node.complete) {
+                resolve(node);
+            }
+        });
     });
-  });
-  return Promise.all(promiseList)
-    .then(function () {
-      callback && callback();
-    })
-    ['catch'](function (e) {
-      console.error('网络异常', e);
+    return Promise.all(promiseList)
+        .then(function () {
+        callback && callback();
+    })["catch"](function (e) {
+        console.error('网络异常', e);
     });
 }
 exports.getImgLoad = getImgLoad;
 // Determine whether it is url
 function isUrl(url) {
-  return /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(
-    url
-  );
+    return /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(url);
 }
 exports.isUrl = isUrl;
 // Handling custom message options
 function handleOptions(businessID, version, other) {
-  return __assign({ businessID: businessID, version: version }, other);
+    return __assign({ businessID: businessID,
+        version: version }, other);
 }
 exports.handleOptions = handleOptions;
 // Determine if it is a JSON string
 function isJSON(str) {
-  // eslint-disable-next-line no-useless-escape
-  if (typeof str === 'string') {
-    try {
-      var data = JSON.parse(str);
-      if (data) {
-        return true;
-      }
-      return false;
-    } catch (error) {
-      return false;
+    // eslint-disable-next-line no-useless-escape
+    if (typeof str === 'string') {
+        try {
+            var data = JSON.parse(str);
+            if (data) {
+                return true;
+            }
+            return false;
+        }
+        catch (error) {
+            return false;
+        }
     }
-  }
-  return false;
+    return false;
 }
 exports.isJSON = isJSON;
 // Determine if it is a JSON string
 function JSONToObject(str) {
-  if (!str || !isJSON(str)) {
-    return str;
-  }
-  return JSON.parse(str);
+    if (!str || !isJSON(str)) {
+        return str;
+    }
+    return JSON.parse(str);
 }
 exports.JSONToObject = JSONToObject;
 // Determine if it is a typing message
 function isTypingMessage(item) {
-  var _a;
-  if (!item) return false;
-  try {
-    var businessID = JSONToObject(
-      (_a = item === null || item === void 0 ? void 0 : item.payload) ===
-        null || _a === void 0
-        ? void 0
-        : _a.data
-    ).businessID;
-    if (businessID === constant_1['default'].typeUserTyping) return true;
-  } catch (_b) {
+    var _a;
+    if (!item)
+        return false;
+    try {
+        var businessID = JSONToObject((_a = item === null || item === void 0 ? void 0 : item.payload) === null || _a === void 0 ? void 0 : _a.data).businessID;
+        if (businessID === constant_1["default"].typeUserTyping)
+            return true;
+    }
+    catch (_b) {
+        return false;
+    }
     return false;
-  }
-  return false;
 }
 exports.isTypingMessage = isTypingMessage;
 function deepCopy(data, hash) {
-  if (hash === void 0) {
-    hash = new WeakMap();
-  }
-  if (typeof data !== 'object' || data === null) {
-    throw new TypeError('传入参数不是对象');
-  }
-  if (hash.has(data)) {
-    return hash.get(data);
-  }
-  var newData = Object.create(Object.getPrototypeOf(data));
-  var dataKeys = Object.keys(data);
-  dataKeys.forEach(function (value) {
-    var currentDataValue = data[value];
-    if (typeof currentDataValue !== 'object' || currentDataValue === null) {
-      newData[value] = currentDataValue;
-    } else if (Array.isArray(currentDataValue)) {
-      newData[value] = __spreadArrays(currentDataValue);
-    } else if (currentDataValue instanceof Set) {
-      newData[value] = new Set(__spreadArrays(currentDataValue));
-    } else if (currentDataValue instanceof Map) {
-      newData[value] = new Map(__spreadArrays(currentDataValue));
-    } else {
-      hash.set(data, data);
-      newData[value] = deepCopy(currentDataValue, hash);
+    if (hash === void 0) { hash = new WeakMap(); }
+    if (typeof data !== 'object' || data === null) {
+        throw new TypeError('传入参数不是对象');
+    }
+    if (hash.has(data)) {
+        return hash.get(data);
     }
-  });
-  return newData;
+    var newData = Object.create(Object.getPrototypeOf(data));
+    var dataKeys = Object.keys(data);
+    dataKeys.forEach(function (value) {
+        var currentDataValue = data[value];
+        if (typeof currentDataValue !== 'object' || currentDataValue === null) {
+            newData[value] = currentDataValue;
+        }
+        else if (Array.isArray(currentDataValue)) {
+            newData[value] = __spreadArrays(currentDataValue);
+        }
+        else if (currentDataValue instanceof Set) {
+            newData[value] = new Set(__spreadArrays(currentDataValue));
+        }
+        else if (currentDataValue instanceof Map) {
+            newData[value] = new Map(__spreadArrays(currentDataValue));
+        }
+        else {
+            hash.set(data, data);
+            newData[value] = deepCopy(currentDataValue, hash);
+        }
+    });
+    return newData;
 }
 exports.deepCopy = deepCopy;
 exports.throttle = function (fn) {
-  var isRunning = false;
-  return function () {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-      args[_i] = arguments[_i];
-    }
-    if (isRunning) return;
-    setTimeout(function () {
-      fn.apply(_this, args);
-      isRunning = false;
-    }, 100);
-  };
+    var isRunning = false;
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        if (isRunning)
+            return;
+        setTimeout(function () {
+            fn.apply(_this, args);
+            isRunning = false;
+        }, 100);
+    };
 };
 exports.isMessageTip = function (message) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  if (
-    (message === null || message === void 0 ? void 0 : message.type) ===
-      ((_a =
-        tim_1['default'] === null || tim_1['default'] === void 0
-          ? void 0
-          : tim_1['default'].TYPES) === null || _a === void 0
-        ? void 0
-        : _a.MSG_GRP_TIP) ||
-    ((message === null || message === void 0 ? void 0 : message.type) ===
-      ((_b =
-        tim_1['default'] === null || tim_1['default'] === void 0
-          ? void 0
-          : tim_1['default'].TYPES) === null || _b === void 0
-        ? void 0
-        : _b.MSG_CUSTOM) &&
-      (message === null || message === void 0
-        ? void 0
-        : message.conversationType) ===
-        ((_c =
-          tim_1['default'] === null || tim_1['default'] === void 0
-            ? void 0
-            : tim_1['default'].TYPES) === null || _c === void 0
-          ? void 0
-          : _c.CONV_GROUP) &&
-      ((_e = JSONToObject(
-        (_d =
-          message === null || message === void 0 ? void 0 : message.payload) ===
-          null || _d === void 0
-          ? void 0
-          : _d.data
-      )) === null || _e === void 0
-        ? void 0
-        : _e.businessID) ===
-        (constant_1['default'] === null || constant_1['default'] === void 0
-          ? void 0
-          : constant_1['default'].TYPE_CALL_MESSAGE)) ||
-    ((message === null || message === void 0 ? void 0 : message.type) ===
-      ((_f =
-        tim_1['default'] === null || tim_1['default'] === void 0
-          ? void 0
-          : tim_1['default'].TYPES) === null || _f === void 0
-        ? void 0
-        : _f.MSG_CUSTOM) &&
-      (message === null || message === void 0
-        ? void 0
-        : message.conversationType) ===
-        ((_g =
-          tim_1['default'] === null || tim_1['default'] === void 0
-            ? void 0
-            : tim_1['default'].TYPES) === null || _g === void 0
-          ? void 0
-          : _g.CONV_GROUP) &&
-      ((_h =
-        message === null || message === void 0 ? void 0 : message.payload) ===
-        null || _h === void 0
-        ? void 0
-        : _h.data) === 'group_create')
-  ) {
-    return true;
-  }
-  return false;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if ((message === null || message === void 0 ? void 0 : message.type) === ((_a = tim_1["default"] === null || tim_1["default"] === void 0 ? void 0 : tim_1["default"].TYPES) === null || _a === void 0 ? void 0 : _a.MSG_GRP_TIP) ||
+        ((message === null || message === void 0 ? void 0 : message.type) === ((_b = tim_1["default"] === null || tim_1["default"] === void 0 ? void 0 : tim_1["default"].TYPES) === null || _b === void 0 ? void 0 : _b.MSG_CUSTOM) &&
+            (message === null || message === void 0 ? void 0 : message.conversationType) === ((_c = tim_1["default"] === null || tim_1["default"] === void 0 ? void 0 : tim_1["default"].TYPES) === null || _c === void 0 ? void 0 : _c.CONV_GROUP) &&
+            ((_e = JSONToObject((_d = message === null || message === void 0 ? void 0 : message.payload) === null || _d === void 0 ? void 0 : _d.data)) === null || _e === void 0 ? void 0 : _e.businessID) === (constant_1["default"] === null || constant_1["default"] === void 0 ? void 0 : constant_1["default"].TYPE_CALL_MESSAGE)) ||
+        ((message === null || message === void 0 ? void 0 : message.type) === ((_f = tim_1["default"] === null || tim_1["default"] === void 0 ? void 0 : tim_1["default"].TYPES) === null || _f === void 0 ? void 0 : _f.MSG_CUSTOM) &&
+            (message === null || message === void 0 ? void 0 : message.conversationType) === ((_g = tim_1["default"] === null || tim_1["default"] === void 0 ? void 0 : tim_1["default"].TYPES) === null || _g === void 0 ? void 0 : _g.CONV_GROUP) &&
+            ((_h = message === null || message === void 0 ? void 0 : message.payload) === null || _h === void 0 ? void 0 : _h.data) === "group_create")) {
+        return true;
+    }
+    return false;
 };
 exports.handleSkeletonSize = function (width, height, maxWidth, maxHeight) {
-  var widthToHeight = width / height;
-  var maxWidthToHeight = maxWidth / maxHeight;
-  if (width <= maxWidth && height <= maxHeight) {
-    return { width: width, height: height };
-  } else if (
-    (width <= maxWidth && height > maxHeight) ||
-    (width > maxWidth &&
-      height > maxHeight &&
-      widthToHeight <= maxWidthToHeight)
-  ) {
-    return { width: width * (maxHeight / height), height: maxHeight };
-  } else {
-    return { width: maxWidth, height: height * (maxWidth / width) };
-  }
+    var widthToHeight = width / height;
+    var maxWidthToHeight = maxWidth / maxHeight;
+    if (width <= maxWidth && height <= maxHeight) {
+        return { width: width, height: height };
+    }
+    else if ((width <= maxWidth && height > maxHeight) ||
+        (width > maxWidth && height > maxHeight && widthToHeight <= maxWidthToHeight)) {
+        return { width: width * (maxHeight / height), height: maxHeight };
+    }
+    else {
+        return { width: maxWidth, height: height * (maxWidth / width) };
+    }
 };

src/TUIKit/TUIComponents/container/TUIChat/utils/utils.ts

@@ -11,12 +11,12 @@ export function handleAvatar(item: any) {
     case TIM.TYPES.CONV_C2C:
       avatar = isUrl(item?.userProfile?.avatar)
         ? item?.userProfile?.avatar
-        : 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png';
+        : 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png';
       break;
     case TIM.TYPES.CONV_GROUP:
       avatar = isUrl(item?.groupProfile?.avatar)
         ? item?.groupProfile?.avatar
-        : 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png';
+        : 'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg';
       break;
     case TIM.TYPES.CONV_SYSTEM:
       avatar = isUrl(item?.groupProfile?.avatar)
@@ -50,7 +50,7 @@ export function handleAt(item: any) {
   const List: any = [
     `[${t('TUIConversation.有人@我')}]`,
     `[${t('TUIConversation.@所有人')}]`,
-    `[${t('TUIConversation.@所有人')}][${t('TUIConversation.有人@我')}]`
+    `[${t('TUIConversation.@所有人')}][${t('TUIConversation.有人@我')}]`,
   ];
   let showAtType = '';
   for (let index = 0; index < item.groupAtInfoList.length; index++) {
@@ -64,8 +64,8 @@ export function handleAt(item: any) {
 export function handleReferenceForShow(message: any) {
   const data = {
     referenceMessageForShow: '',
-    referenceMessageType: 0
-  };
+    referenceMessageType: 0,
+  }
   if (!message || !message?.ID || !message?.type) return data;
   switch (message.type) {
     case TIM.TYPES.MSG_TEXT:
@@ -100,6 +100,8 @@ export function handleReferenceForShow(message: any) {
   return data;
 }
 
+
+
 // Internal display of processing message box
 export function handleShowLastMessage(item: any) {
   const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
@@ -111,17 +113,14 @@ export function handleShowLastMessage(item: any) {
   const showUnreadCount =
     conversation.unreadCount > 0 &&
     conversation.messageRemindType === TIM.TYPES.MSG_REMIND_ACPT_NOT_NOTE
-      ? `[${
-          conversation.unreadCount > 99 ? '99+' : conversation.unreadCount
-        }${t('TUIConversation.条')}] `
-      : '';
+      ? `[${conversation.unreadCount > 99 ? "99+" : conversation.unreadCount}${t('TUIConversation.条')}] `
+      : "";
   // Determine the lastmessage sender of the group. Namecard / Nick / userid is displayed by priority
   if (conversation.type === TIM.TYPES.CONV_GROUP) {
     if (lastMessage.fromAccount === conversation.groupProfile.selfInfo.userID) {
       showNick = t('TUIConversation.我');
     } else {
-      showNick =
-        lastMessage.nameCard || lastMessage.nick || lastMessage.fromAccount;
+      showNick = lastMessage.nameCard || lastMessage.nick || lastMessage.fromAccount;
     }
   }
   // Display content of lastmessage message body
@@ -141,16 +140,11 @@ export function handleShowLastMessage(item: any) {
   if (lastMessage.isRevoked) {
     lastMessagePayload = t('TUIChat.撤回了一条消息');
   }
-  if (
-    conversation.type === TIM.TYPES.CONV_GROUP &&
-    lastMessage.type === TIM.TYPES.MSG_GRP_TIP
-  ) {
+  if (conversation.type === TIM.TYPES.CONV_GROUP && lastMessage.type === TIM.TYPES.MSG_GRP_TIP) {
     return lastMessagePayload;
   }
   // Specific display content of message box
-  return `${showUnreadCount}${
-    showNick ? `${showNick}:` : ''
-  }${lastMessagePayload}`;
+  return `${showUnreadCount}${showNick ? `${showNick}:` : ''}${lastMessagePayload}`;
 }
 
 // Handling system tip message display
@@ -158,7 +152,7 @@ export function handleTipMessageShowContext(message: any) {
   const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
   const options: any = {
     message,
-    text: ''
+    text: '',
   };
   let userName = message?.nick || message?.payload?.userIDList?.join(',');
   if (message?.payload?.memberList?.length > 0) {
@@ -174,24 +168,18 @@ export function handleTipMessageShowContext(message: any) {
         options.text = `${userName} ${t('message.tip.加入群组')}`;
         break;
       case TIM.TYPES.GRP_TIP_MBR_QUIT:
-        options.text = `${t('message.tip.群成员')}：${userName} ${t(
-          'message.tip.退出群组'
-        )}`;
+        options.text = `${t('message.tip.群成员')}：${userName} ${t('message.tip.退出群组')}`;
         break;
       case TIM.TYPES.GRP_TIP_MBR_KICKED_OUT:
-        options.text = `${t('message.tip.群成员')}：${userName} ${t(
-          'message.tip.被'
-        )}${message.payload.operatorID}${t('message.tip.踢出群组')}`;
+        options.text = `${t('message.tip.群成员')}：${userName} ${t('message.tip.被')}${message.payload.operatorID}${t(
+          'message.tip.踢出群组'
+        )}`;
         break;
       case TIM.TYPES.GRP_TIP_MBR_SET_ADMIN:
-        options.text = `${t('message.tip.群成员')}：${userName} ${t(
-          'message.tip.成为管理员'
-        )}`;
+        options.text = `${t('message.tip.群成员')}：${userName} ${t('message.tip.成为管理员')}`;
         break;
       case TIM.TYPES.GRP_TIP_MBR_CANCELED_ADMIN:
-        options.text = `${t('message.tip.群成员')}：${userName} ${t(
-          'message.tip.被撤销管理员'
-        )}`;
+        options.text = `${t('message.tip.群成员')}：${userName} ${t('message.tip.被撤销管理员')}`;
         break;
       case TIM.TYPES.GRP_TIP_GRP_PROFILE_UPDATED:
         // options.text =  `${userName} 修改群组资料`;
@@ -200,13 +188,9 @@ export function handleTipMessageShowContext(message: any) {
       case TIM.TYPES.GRP_TIP_MBR_PROFILE_UPDATED:
         for (const member of message.payload.memberList) {
           if (member.muteTime > 0) {
-            options.text = `${t('message.tip.群成员')}：${member.userID}${t(
-              'message.tip.被禁言'
-            )}`;
+            options.text = `${t('message.tip.群成员')}：${member.userID}${t('message.tip.被禁言')}`;
           } else {
-            options.text = `${t('message.tip.群成员')}：${member.userID}${t(
-              'message.tip.被取消禁言'
-            )}`;
+            options.text = `${t('message.tip.群成员')}：${member.userID}${t('message.tip.被取消禁言')}`;
           }
         }
         break;
@@ -214,9 +198,7 @@ export function handleTipMessageShowContext(message: any) {
         options.text = `[${t('message.tip.群提示消息')}]`;
         break;
     }
-  } else if (
-    JSONToObject(message?.payload?.data)?.businessID === 'group_create'
-  ) {
+  } else if (JSONToObject(message?.payload?.data)?.businessID === "group_create") {
     const data = JSONToObject(message?.payload?.data);
     options.text = `"${data?.opUser}" ` + t(data?.content);
   } else {
@@ -230,25 +212,25 @@ function handleTipGrpUpdated(message: any) {
   const { payload } = message;
   const { newGroupProfile } = payload;
   const { operatorID } = payload;
-  let text = '';
-  if ('muteAllMembers' in newGroupProfile) {
-    if (newGroupProfile['muteAllMembers']) {
-      text = `${t('message.tip.管理员')} ${operatorID} ${t(
-        'message.tip.开启全员禁言'
+  let text = "";
+  if ("muteAllMembers" in newGroupProfile) {
+    if (newGroupProfile["muteAllMembers"]) {
+      text = `${t("message.tip.管理员")} ${operatorID} ${t(
+        "message.tip.开启全员禁言"
       )}`;
-    } else {
-      text = `${t('message.tip.管理员')} ${operatorID} ${t(
-        'message.tip.取消全员禁言'
+      } else {
+      text = `${t("message.tip.管理员")} ${operatorID} ${t(
+        "message.tip.取消全员禁言"
       )}`;
-    }
-  } else if ('ownerID' in newGroupProfile) {
-    text = `${newGroupProfile['ownerID']} ${t('message.tip.成为新的群主')}`;
-  } else if ('groupName' in newGroupProfile) {
-    text = `${operatorID} ${t('message.tip.修改群名为')} ${
-      newGroupProfile['groupName']
+      }
+  } else if ("ownerID" in newGroupProfile) {
+    text = `${newGroupProfile["ownerID"]} ${t("message.tip.成为新的群主")}`;
+  } else if ("groupName" in newGroupProfile) {
+    text = `${operatorID} ${t("message.tip.修改群名为")} ${
+      newGroupProfile["groupName"]
     }`;
-  } else if ('notification' in newGroupProfile) {
-    text = `${operatorID} ${t('message.tip.发布新公告')}`;
+  } else if ("notification" in newGroupProfile) {
+    text = `${operatorID} ${t("message.tip.发布新公告")}`;
   }
   return text;
 }
@@ -256,7 +238,7 @@ function handleTipGrpUpdated(message: any) {
 // Parsing and handling text message display
 export function handleTextMessageShowContext(item: any) {
   const options: any = {
-    text: decodeText(item.payload)
+    text: decodeText(item.payload),
   };
   return options;
 }
@@ -266,7 +248,7 @@ export function handleFaceMessageShowContext(item: any) {
   const face: any = {
     message: item,
     name: '',
-    url: ''
+    url: '',
   };
   face.name = item.payload.data;
   if (item.payload.data.indexOf('@2x') < 0) {
@@ -284,7 +266,7 @@ export function handleLocationMessageShowContext(item: any) {
     href: '',
     url: '',
     description: '',
-    message: item
+    message: item,
   };
   location.lon = item.payload.longitude.toFixed(6);
   location.lat = item.payload.latitude.toFixed(6);
@@ -307,7 +289,7 @@ export function handleImageMessageShowContext(item: any) {
     url: item.payload.imageInfoArray[1].url,
     width: item.payload.imageInfoArray[0].width,
     height: item.payload.imageInfoArray[0].height,
-    message: item
+    message: item,
   };
 }
 
@@ -319,7 +301,7 @@ export function handleVideoMessageShowContext(item: any) {
     snapshotUrl: item?.payload?.snapshotUrl,
     snapshotWidth: item?.payload?.snapshotWidth,
     snapshotHeight: item?.payload?.snapshotHeight,
-    message: item
+    message: item,
   };
 }
 
@@ -329,7 +311,7 @@ export function handleAudioMessageShowContext(item: any) {
     progress: item?.status === 'unSend' && item.progress,
     url: item.payload.url,
     message: item,
-    second: item.payload.second
+    second: item.payload.second,
   };
 }
 
@@ -348,7 +330,7 @@ export function handleFileMessageShowContext(item: any) {
     url: item.payload.fileUrl,
     message: item,
     name: item.payload.fileName,
-    size
+    size,
   };
 }
 
@@ -387,9 +369,7 @@ export function extractCallingInfoFromMessage(message: any) {
   switch (callingMessage.actionType) {
     case 1: {
       if (objectData.call_end >= 0 && !callingMessage.groupID) {
-        return `${t('message.custom.通话时长')}：${formatTime(
-          objectData.call_end
-        )}`;
+        return `${t('message.custom.通话时长')}：${formatTime(objectData.call_end)}`;
       }
       if (callingMessage.groupID && callingMessage.timeout > 0) {
         return `${inviter}${t('message.custom.发起通话')}`;
@@ -406,9 +386,7 @@ export function extractCallingInfoFromMessage(message: any) {
       return `${t('message.custom.发起通话')}`;
     }
     case 2:
-      return `${callingMessage.groupID ? inviter : ''}${t(
-        'message.custom.取消通话'
-      )}`;
+      return `${callingMessage.groupID ? inviter : ''}${t('message.custom.取消通话')}`;
     case 3:
       if (objectData.data && objectData.data.cmd === 'switchToAudio') {
         return `${t('message.custom.切换语音通话')}`;
@@ -416,13 +394,9 @@ export function extractCallingInfoFromMessage(message: any) {
       if (objectData.data && objectData.data.cmd === 'switchToVideo') {
         return `${t('message.custom.切换视频通话')}`;
       }
-      return `${callingMessage.groupID ? inviteeList : ''}${t(
-        'message.custom.已接听'
-      )}`;
+      return `${callingMessage.groupID ? inviteeList : ''}${t('message.custom.已接听')}`;
     case 4:
-      return `${callingMessage.groupID ? inviteeList : ''}${t(
-        'message.custom.拒绝通话'
-      )}`;
+      return `${callingMessage.groupID ? inviteeList : ''}${t('message.custom.拒绝通话')}`;
     case 5:
       if (objectData.data && objectData.data.cmd === 'switchToAudio') {
         return `${t('message.custom.切换语音通话')}`;
@@ -430,9 +404,7 @@ export function extractCallingInfoFromMessage(message: any) {
       if (objectData.data && objectData.data.cmd === 'switchToVideo') {
         return `${t('message.custom.切换视频通话')}`;
       }
-      return `${callingMessage.groupID ? inviteeList : ''}${t(
-        'message.custom.无应答'
-      )}`;
+      return `${callingMessage.groupID ? inviteeList : ''}${t('message.custom.无应答')}`;
     default:
       return '';
   }
@@ -450,106 +422,85 @@ export function handleCustomMessageShowContext(item: any) {
   }
   return {
     message: item,
-    custom:
-      extractCallingInfoFromMessage(item) ||
-      `[${t('message.custom.自定义消息')}]`
+    custom: extractCallingInfoFromMessage(item) || `[${t('message.custom.自定义消息')}]`,
   };
 }
 
 // Parsing and handling system message display
 export function translateGroupSystemNotice(message: any) {
   const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
-  const groupName =
-    message.payload.groupProfile.name || message.payload.groupProfile.groupID;
+  const groupName = message.payload.groupProfile.name || message.payload.groupProfile.groupID;
   switch (message.payload.operationType) {
     case 1:
-      return `${message.payload.operatorID} ${t(
-        'message.tip.申请加入群组'
-      )}：${groupName}`;
+      return `${message.payload.operatorID} ${t('message.tip.申请加入群组')}：${groupName}`;
     case 2:
       return `${t('message.tip.成功加入群组')}：${groupName}`;
     case 3:
-      return `${t('message.tip.申请加入群组')}：${groupName} ${t(
-        'message.tip.被拒绝'
-      )}`;
+      return `${t('message.tip.申请加入群组')}：${groupName} ${t('message.tip.被拒绝')}`;
     case 4:
-      return `${t('message.tip.你被管理员')}${message.payload.operatorID} ${t(
-        'message.tip.踢出群组'
-      )}：${groupName}`;
+      return `${t('message.tip.你被管理员')}${message.payload.operatorID} ${t('message.tip.踢出群组')}：${groupName}`;
     case 5:
-      return `${t('message.tip.群')}：${groupName} ${t('message.tip.被')} ${
-        message.payload.operatorID
-      } ${t('message.tip.解散')}`;
+      return `${t('message.tip.群')}：${groupName} ${t('message.tip.被')} ${message.payload.operatorID} ${t(
+        'message.tip.解散'
+      )}`;
     case 6:
-      return `${message.payload.operatorID} ${t(
-        'message.tip.创建群'
-      )}：${groupName}`;
+      return `${message.payload.operatorID} ${t('message.tip.创建群')}：${groupName}`;
     case 7:
-      return `${message.payload.operatorID} ${t(
-        'message.tip.邀请你加群'
-      )}：${groupName}`;
+      return `${message.payload.operatorID} ${t('message.tip.邀请你加群')}：${groupName}`;
     case 8:
       return `${t('message.tip.你退出群组')}：${groupName}`;
     case 9:
-      return `${t('message.tip.你被')}${message.payload.operatorID} ${t(
-        'message.tip.设置为群'
-      )}：${groupName} ${t('message.tip.的管理员')}`;
+      return `${t('message.tip.你被')}${message.payload.operatorID} ${t('message.tip.设置为群')}：${groupName} ${t(
+        'message.tip.的管理员'
+      )}`;
     case 10:
-      return `${t('message.tip.你被')}${message.payload.operatorID} ${t(
-        'message.tip.撤销群'
-      )}：${groupName} ${t('message.tip.的管理员身份')}`;
+      return `${t('message.tip.你被')}${message.payload.operatorID} ${t('message.tip.撤销群')}：${groupName} ${t(
+        'message.tip.的管理员身份'
+      )}`;
     case 12:
-      return `${message.payload.operatorID} ${t(
-        'message.tip.邀请你加群'
-      )}：${groupName}`;
+      return `${message.payload.operatorID} ${t('message.tip.邀请你加群')}：${groupName}`;
     case 13:
-      return `${message.payload.operatorID} ${t(
-        'message.tip.同意加群'
-      )}：${groupName}`;
+      return `${message.payload.operatorID} ${t('message.tip.同意加群')}：${groupName}`;
     case 14:
-      return `${message.payload.operatorID} ${t(
-        'message.tip.拒接加群'
-      )}：${groupName}`;
+      return `${message.payload.operatorID} ${t('message.tip.拒接加群')}：${groupName}`;
     case 255:
-      return `${t('message.tip.自定义群系统通知')}: ${
-        message.payload.userDefinedField
-      }`;
+      return `${t('message.tip.自定义群系统通知')}: ${message.payload.userDefinedField}`;
   }
 }
 
 // Image loading complete
 export function getImgLoad(container: any, className: string, callback: any) {
   const images = container?.querySelectorAll(`.${className}`) || [];
-  const promiseList = Array.prototype.slice.call(images).map((node: any) => {
-    return new Promise((resolve: any, reject: any) => {
-      node.onload = () => {
-        resolve(node);
-      };
-      node.onloadeddata = () => {
-        resolve(node);
-      };
-      node.onprogress = () => {
-        resolve(node);
-      };
-      if (node.complete) {
-        resolve(node);
-      }
-    });
-  });
+  const promiseList = Array.prototype.slice.call(images).map(
+    (node: any) => {
+      return new Promise((resolve: any, reject: any) => {
+        node.onload = () => {
+          resolve(node);
+        }
+        node.onloadeddata = () => {
+          resolve(node);
+        }
+        node.onprogress = () => {
+          resolve(node);
+        }
+        if (node.complete) {
+          resolve(node);
+        }
+      })
+    }
+  );
   return Promise.all(promiseList)
     .then(() => {
       callback && callback();
     })
-    .catch(e => {
+    .catch((e) => {
       console.error('网络异常', e);
     });
 }
 
 // Determine whether it is url
 export function isUrl(url: string) {
-  return /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(
-    url
-  );
+  return /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(url);
 }
 
 // Handling custom message options
@@ -557,7 +508,7 @@ export function handleOptions(businessID: string, version: number, other: any) {
   return {
     businessID,
     version,
-    ...other
+    ...other,
   };
 }
 
@@ -607,7 +558,7 @@ export function deepCopy(data: any, hash = new WeakMap()) {
   }
   const newData: any = Object.create(Object.getPrototypeOf(data));
   const dataKeys = Object.keys(data);
-  dataKeys.forEach(value => {
+  dataKeys.forEach((value) => {
     const currentDataValue = data[value];
     if (typeof currentDataValue !== 'object' || currentDataValue === null) {
       newData[value] = currentDataValue;
@@ -641,35 +592,26 @@ export const isMessageTip = (message: Message) => {
     message?.type === TIM?.TYPES?.MSG_GRP_TIP ||
     (message?.type === TIM?.TYPES?.MSG_CUSTOM &&
       message?.conversationType === TIM?.TYPES?.CONV_GROUP &&
-      JSONToObject(message?.payload?.data)?.businessID ===
-        constant?.TYPE_CALL_MESSAGE) ||
+      JSONToObject(message?.payload?.data)?.businessID === constant?.TYPE_CALL_MESSAGE) ||
     (message?.type === TIM?.TYPES?.MSG_CUSTOM &&
       message?.conversationType === TIM?.TYPES?.CONV_GROUP &&
-      JSONToObject(message?.payload?.data)?.businessID === 'group_create')
+      JSONToObject(message?.payload?.data)?.businessID === "group_create")
   ) {
     return true;
   }
   return false;
 };
 
-export const handleSkeletonSize = (
-  width: number,
-  height: number,
-  maxWidth: number,
-  maxHeight: number
-): { width: number; height: number } => {
+
+export const handleSkeletonSize = (width: number, height: number, maxWidth: number, maxHeight: number): { width: number, height: number } => {
   const widthToHeight = width / height;
   const maxWidthToHeight = maxWidth / maxHeight;
   if (width <= maxWidth && height <= maxHeight) {
     return { width, height };
-  } else if (
-    (width <= maxWidth && height > maxHeight) ||
-    (width > maxWidth &&
-      height > maxHeight &&
-      widthToHeight <= maxWidthToHeight)
-  ) {
+  } else if ((width <= maxWidth && height > maxHeight) ||
+    (width > maxWidth && height > maxHeight && widthToHeight <= maxWidthToHeight)) {
     return { width: width * (maxHeight / height), height: maxHeight };
   } else {
     return { width: maxWidth, height: height * (maxWidth / width) };
   }
-};
+}

src/TUIKit/TUIComponents/container/TUIContact/components/style/color.scss

@@ -5,30 +5,25 @@
     letter-spacing: 0;
   }
 }
-
 .icon {
   &-warn {
     background: coral;
-    color: #ffffff;
+    color: #FFFFFF;
     font-style: normal;
   }
 }
-
 .btn {
   font-weight: 400;
-  color: #ffffff;
+  color: #FFFFFF;
   letter-spacing: 0;
-
   &-cancel {
-    border: 1Px solid #dddddd;
+    border: 1px solid #dddddd;
     color: #666666;
   }
-
   &-default {
-    background: #006eff;
-    border: 1Px solid #006eff;
+    background: #006EFF;
+    border: 1px solid #006EFF;
   }
-
   &:disabled {
     opacity: 0.3;
   }

src/TUIKit/TUIComponents/container/TUIContact/components/style/web.scss

@@ -1,40 +1,33 @@
 .message-system {
   flex: 1;
 }
-
 .list {
   flex: 1;
   height: 100%;
   overflow-y: auto;
-  min-width: 600Px;
-
+  min-width: 600px;
   li {
     display: flex;
     align-items: center;
     position: relative;
-    padding: 10Px 20Px;
-    font-size: 14Px;
-
+    padding:10px 20px;
+    font-size: 14px;
     .icon {
-      margin-right: 10Px;
+      margin-right: 10px;
       border-radius: 100%;
     }
-
     .message-label {
-      max-width: 50Px;
+      max-width: 50px;
     }
-
     .btn-box {
-      padding: 0 12Px;
+      padding: 0 12px;
     }
   }
 }
-
 .icon {
   display: inline-block;
-  width: 16Px;
-  height: 16Px;
-
+  width: 16px;
+  height: 16px;
   &-warn {
     border-radius: 50%;
     display: flex;
@@ -42,16 +35,14 @@
     align-items: center;
   }
 }
-
 .btn {
-  padding: 2Px 10Px;
-  margin-right: 12Px;
-  border-radius: 4Px;
+  padding: 2px 10px;
+  margin-right: 12px;
+  border-radius: 4px;
   border: none;
-  font-size: 14Px;
+  font-size: 14px;
   text-align: center;
-  line-height: 20Px;
-
+  line-height: 20px;
   &:last-child {
     margin-right: 0;
   }

src/TUIKit/TUIComponents/container/TUIContact/index.vue

@@ -17,57 +17,35 @@
                   @keyup.enter="handleSearchGroup"
                   enterkeyhint="search"
                 />
-                <i
-                  class="icon icon-cancel"
-                  v-if="!!searchID"
-                  @click="searchID = ''"
-                ></i>
+                <i class="icon icon-cancel" v-if="!!searchID" @click="searchID = ''"></i>
               </div>
-              <span class="search-cancel" @click="toggleSearch">
-                {{ $t('取消') }}
-              </span>
+              <span class="search-cancel" @click="toggleSearch">{{ $t('取消') }}</span>
             </div>
           </div>
         </header>
         <ul class="TUI-contact-column" v-if="!isSearch">
           <li class="TUI-contact-column-item">
             <header @click="select('system')">
-              <i
-                class="icon icon-right"
-                :class="[columnName === 'system' && 'icon-down']"
-              ></i>
+              <i class="icon icon-right" :class="[columnName === 'system' && 'icon-down']"></i>
               <main>
                 <label>{{ $t('TUIContact.群聊通知') }}</label>
-                <span
-                  class="num"
-                  v-if="
-                    systemConversation && systemConversation.unreadCount > 0
-                  "
-                >
-                  {{ systemConversation.unreadCount }}
-                </span>
+                <span class="num" v-if="systemConversation && systemConversation.unreadCount > 0">{{
+                  systemConversation.unreadCount
+                }}</span>
               </main>
             </header>
             <ul class="TUI-contact-list" v-if="columnName === 'system'">
               <li class="TUI-contact-list-item selected not-aside">
                 <label>{{ $t('TUIContact.系统通知') }}</label>
-                <span
-                  class="num"
-                  v-if="
-                    systemConversation && systemConversation.unreadCount > 0
-                  "
-                >
-                  {{ systemConversation.unreadCount }}
-                </span>
+                <span class="num" v-if="systemConversation && systemConversation.unreadCount > 0">{{
+                  systemConversation.unreadCount
+                }}</span>
               </li>
             </ul>
           </li>
           <li class="TUI-contact-column-item">
             <header @click="select('group')">
-              <i
-                class="icon icon-right"
-                :class="[columnName === 'group' && 'icon-down']"
-              ></i>
+              <i class="icon icon-right" :class="[columnName === 'group' && 'icon-down']"></i>
               <main>
                 <label>{{ $t('TUIContact.我的群聊') }}</label>
               </main>
@@ -83,11 +61,8 @@
                 <aside class="left">
                   <img
                     class="avatar"
-                    :src="
-                      item?.avatar ||
-                      'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png'
-                    "
-                    onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png'"
+                    :src="item?.avatar || 'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'"
+                    onerror="this.src='https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'"
                   />
                 </aside>
                 <main class="content">
@@ -105,10 +80,7 @@
           </li>
           <li class="TUI-contact-column-item">
             <header @click="select('friend')">
-              <i
-                class="icon icon-right"
-                :class="[columnName === 'friend' && 'icon-down']"
-              ></i>
+              <i class="icon icon-right" :class="[columnName === 'friend' && 'icon-down']"></i>
               <main>
                 <label>{{ $t('TUIContact.我的好友') }}</label>
               </main>
@@ -124,11 +96,8 @@
                 <aside class="left">
                   <img
                     class="avatar"
-                    :src="
-                      item?.profile?.avatar ||
-                      'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
-                    "
-                    onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
+                    :src="item?.profile?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+                    onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
                   />
                   <div
                     class="online-status"
@@ -142,9 +111,7 @@
                 </aside>
                 <main class="content">
                   <ul>
-                    <li class="name">
-                      {{ item?.profile?.nick || item?.userID }}
-                    </li>
+                    <li class="name">{{ item?.profile?.nick || item?.userID }}</li>
                   </ul>
                 </main>
               </li>
@@ -155,19 +122,14 @@
           <li
             v-if="!!searchGroup?.groupID"
             class="TUI-contact-list-item"
-            :class="[
-              currentGroup?.groupID === searchGroup?.groupID && 'selected'
-            ]"
+            :class="[currentGroup?.groupID === searchGroup?.groupID && 'selected']"
             @click="handleListItem(searchGroup)"
           >
             <aside class="left">
               <img
                 class="avatar"
-                :src="
-                  searchGroup?.avatar ||
-                  'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png'
-                "
-                onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png'"
+                :src="searchGroup?.avatar || 'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'"
+                onerror="this.src='https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'"
               />
             </aside>
             <main class="content">
@@ -185,11 +147,7 @@
       </aside>
       <main
         class="TUI-contact-main"
-        v-show="
-          !!currentGroup?.groupID ||
-          !!currentFriend?.userID ||
-          columnName === 'system'
-        "
+        v-show="!!currentGroup?.groupID || !!currentFriend?.userID || columnName === 'system'"
       >
         <header class="TUI-contact-main-h5-title" v-if="env.isH5">
           <i class="icon icon-back" @click="back"></i>
@@ -210,37 +168,21 @@
             </ul>
             <img
               class="avatar"
-              :src="
-                currentGroup?.avatar ||
-                'https://web.sdk.qcloud.com/component/TUIKit/assets/group_avatar.png'
-              "
-              onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png'"
+              :src="currentGroup?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/group_avatar.png'"
+              onerror="this.src='https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'"
             />
           </header>
           <main class="TUI-contact-main-info-main" v-if="isNeedPermission">
             <label>{{ $t('TUIContact.请填写验证信息') }}</label>
-            <textarea
-              v-model="currentGroup.applyMessage"
-              :disabled="currentGroup.apply"
-            ></textarea>
+            <textarea v-model="currentGroup.applyMessage" :disabled="currentGroup.apply"></textarea>
           </main>
           <footer class="TUI-contact-main-info-footer">
-            <p v-if="currentGroup.apply && currentGroup.type === 'AVChatRoom'">
-              {{ $t('TUIContact.已加入') }}
-            </p>
+            <p v-if="currentGroup.apply && currentGroup.type === 'AVChatRoom'">{{ $t('TUIContact.已加入') }}</p>
             <p v-else-if="currentGroup.apply">{{ $t('TUIContact.已申请') }}</p>
-            <button
-              class="btn btn-default"
-              v-else-if="isNeedPermission"
-              @click="join(currentGroup)"
-            >
+            <button class="btn btn-default" v-else-if="isNeedPermission" @click="join(currentGroup)">
               {{ $t('TUIContact.申请加入') }}
             </button>
-            <button
-              class="btn btn-default"
-              v-else-if="!currentGroup.selfInfo.userID"
-              @click="join(currentGroup)"
-            >
+            <button class="btn btn-default" v-else-if="!currentGroup.selfInfo.userID" @click="join(currentGroup)">
               {{ $t('TUIContact.加入群聊') }}
             </button>
             <button
@@ -254,9 +196,7 @@
             >
               {{ $t('TUIContact.解散群聊') }}
             </button>
-            <button class="btn btn-cancel" v-else @click="quit(currentGroup)">
-              {{ $t('TUIContact.退出群聊') }}
-            </button>
+            <button class="btn btn-cancel" v-else @click="quit(currentGroup)">{{ $t('TUIContact.退出群聊') }}</button>
             <button
               v-if="currentGroup.selfInfo.userID"
               class="btn btn-default"
@@ -266,15 +206,10 @@
             </button>
           </footer>
         </div>
-        <div
-          v-else-if="currentFriend?.userID && columnName === 'friend'"
-          class="TUI-contact-main-info"
-        >
+        <div v-else-if="currentFriend?.userID && columnName === 'friend'" class="TUI-contact-main-info">
           <header class="TUI-contact-main-info-header">
             <ul class="list">
-              <h1>
-                {{ currentFriend?.profile?.nick || currentFriend?.userID }}
-              </h1>
+              <h1>{{ currentFriend?.profile?.nick || currentFriend?.userID }}</h1>
               <li>
                 <label>ID：</label>
                 <span>{{ currentFriend?.profile?.userID }}</span>
@@ -287,18 +222,14 @@
             <img
               class="avatar"
               :src="
-                currentFriend?.profile?.avatar ||
-                'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
+                currentFriend?.profile?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
               "
-              onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
+              onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
             />
           </header>
 
           <footer class="TUI-contact-main-info-footer">
-            <button
-              class="btn btn-default"
-              @click="enter(currentFriend.userID, 'C2C')"
-            >
+            <button class="btn btn-default" @click="enter(currentFriend.userID, 'C2C')">
               {{ $t('TUIContact.发送消息') }}
             </button>
           </footer>
@@ -327,13 +258,13 @@ import { handleErrorPrompts, isArrayEqual } from '../utils';
 const TUIContact = defineComponent({
   name: 'TUIContact',
   components: {
-    MessageSystem
+    MessageSystem,
   },
   props: {
     displayOnlineStatus: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   setup(props: any, ctx: any) {
     const TUIServer: any = TUIContact.TUIServer;
@@ -344,7 +275,7 @@ const TUIContact = defineComponent({
       searchID: '',
       currentGroup: null,
       systemConversation: {
-        unreadCount: 0
+        unreadCount: 0,
       },
       systemMessageList: [],
       columnName: '',
@@ -356,7 +287,7 @@ const TUIContact = defineComponent({
       currentFriend: {},
       displayOnlineStatus: false,
       onlineStatus: false,
-      userStatusList: new Map()
+      userStatusList: new Map(),
     });
 
     TUIServer.bind(data);
@@ -369,7 +300,7 @@ const TUIContact = defineComponent({
         TUIServer.handleUserStatus(data.displayOnlineStatus, data.userIDList);
       },
       {
-        immediate: true
+        immediate: true,
       }
     );
 
@@ -384,8 +315,7 @@ const TUIContact = defineComponent({
     const isNeedPermission = computed(() => {
       const isHaveSeif = (data.currentGroup as any).selfInfo.userID;
       const isPermission =
-        (data.currentGroup as any).joinOption ===
-        TUIServer.TUICore.TIM.TYPES.JOIN_OPTIONS_NEED_PERMISSION;
+        (data.currentGroup as any).joinOption === TUIServer.TUICore.TIM.TYPES.JOIN_OPTIONS_NEED_PERMISSION;
       return !isHaveSeif && isPermission;
     });
 
@@ -419,7 +349,7 @@ const TUIContact = defineComponent({
       const options: any = {
         groupID: group.groupID,
         applyMessage: group.applyMessage || t('TUIContact.加群'),
-        type: group?.type
+        type: group?.type,
       };
       await TUIServer.joinGroup(options);
       (data.currentGroup as any).apply = true;
@@ -432,14 +362,10 @@ const TUIContact = defineComponent({
 
     const enter = async (ID: any, type: string) => {
       const name = `${type}${ID}`;
-      TUIServer.TUICore.TUIServer.TUIConversation.getConversationProfile(
-        name
-      ).then((imResponse: any) => {
+      TUIServer.TUICore.TUIServer.TUIConversation.getConversationProfile(name).then((imResponse: any) => {
         // 通知 TUIConversation 添加当前会话
         // Notify TUIConversation to toggle the current conversation
-        TUIServer.TUICore.TUIServer.TUIConversation.handleCurrentConversation(
-          imResponse.data.conversation
-        );
+        TUIServer.TUICore.TUIServer.TUIConversation.handleCurrentConversation(imResponse.data.conversation);
         back();
       });
     };
@@ -450,11 +376,7 @@ const TUIContact = defineComponent({
     };
 
     const select = async (name: string) => {
-      if (
-        data.columnName !== 'system' &&
-        name === 'system' &&
-        (data.systemConversation as any)?.conversationID
-      ) {
+      if (data.columnName !== 'system' && name === 'system' && (data.systemConversation as any)?.conversationID) {
         await TUIServer.getSystemMessageList();
         await TUIServer.setMessageRead();
       }
@@ -511,9 +433,9 @@ const TUIContact = defineComponent({
       init,
       back,
       enter,
-      getUserStatusList
+      getUserStatusList,
     };
-  }
+  },
 });
 export default TUIContact;
 </script>

src/TUIKit/TUIComponents/container/TUIContact/style/color.scss

@@ -1,24 +1,20 @@
 .TUI-contact {
-  background: #ffffff;
+  background: #FFFFFF;
   font-weight: 400;
-
   &-left {
-    border-right: 1Px solid #f4f5f9;
-
+    border-right: 1px solid #F4F5F9;
     &-header {
-      background: #ffffff;
-      border-bottom: 1Px solid #f4f5f9;
+      background: #FFFFFF;
+      border-bottom: 1px solid #F4F5F9;;
     }
   }
-
   &-column {
     &-item {
       .num {
-        background: #ff584c;
+        background: #FF584C;
         font-weight: 400;
-        color: #ffffff;
+        color: #FFFFFF;
       }
-
       header {
         main {
           font-weight: 400;
@@ -27,42 +23,36 @@
       }
     }
   }
-
   &-main {
     &-info {
       &-header {
-        border-bottom: 1Px solid #dddddd;
-
+        border-bottom: 1px solid #DDDDDD;
         .list {
           h1 {
             font-weight: 400;
             color: #000000;
           }
-
           li {
             font-weight: 400;
             color: #999999;
           }
         }
       }
-
       &-main {
         label {
           font-family: PingFangSC-Regular;
           font-weight: 400;
           color: #666666;
         }
-
         textarea {
-          background: #ffffff;
-          border: 1Px solid #dddddd;
+          background: #FFFFFF;
+          border: 1px solid #DDDDDD;
           font-family: PingFangSC-Regular;
           font-weight: 400;
           color: #999999;
           letter-spacing: 0;
         }
       }
-
       &-footer {
         p {
           opacity: 0.3;
@@ -70,7 +60,6 @@
       }
     }
   }
-
   &-system {
     &-header {
       h1 {
@@ -86,16 +75,14 @@
 .TUI-contact-list {
   &-item {
     &:hover {
-      background: #edf0f5;
+      background: #EDF0F5;
     }
-
     .left {
       .num {
         background: red;
-        color: #ffffff;
+        color: #FFFFFF;
       }
     }
-
     .content {
       ul {
         li {
@@ -103,53 +90,48 @@
           color: #000000;
         }
       }
-
       .type {
         font-weight: 400;
-        color: rgba(0, 0, 0, 0.3);
-        border: 1Px solid rgba(0, 0, 0, 0.3);
+        color: rgba(0,0,0,0.30);
+        border: 1px solid rgba(0,0,0,0.30);
       }
     }
   }
 }
 
 .selected {
-  background: #edf0f5;
+  background: #EDF0F5;
 }
 
 .reduce {
-  border: 1Px solid #dddddd;
-
-  &::before {
-    background: #dddddd;
+  border: 1px solid #DDDDDD;
+  &::before{
+    background: #DDDDDD;
   }
 }
 
+
 .btn {
   font-weight: 400;
-  color: #ffffff;
+  color: #FFFFFF;
   letter-spacing: 0;
-
   &-cancel {
-    border: 1Px solid #dddddd;
+    border: 1px solid #DDDDDD;
     color: #666666;
   }
-
   &-default {
-    background: #006eff;
-    border: 1Px solid #006eff;
+    background: #006EFF;
+    border: 1px solid #006EFF;
   }
-
   &:disabled {
     opacity: 0.3;
   }
 }
 
 input {
-  border: 1Px solid #dddddd;
-
+  border: 1px solid #DDDDDD;
   &:focus {
-    border: 1Px solid #006eff;
+    border: 1px solid #006EFF;
   }
 }
 
@@ -160,11 +142,10 @@ input {
       color: #000000;
       letter-spacing: 0;
     }
-
-    .search-cancel {
+    .search-cancel{
       font-weight: 400;
       color: #000000;
       letter-spacing: 0;
     }
   }
-}
+}

src/TUIKit/TUIComponents/container/TUIContact/style/h5.scss

@@ -1,8 +1,7 @@
-.TUI-contact-H5 {
-  height: 100%;
+.TUI-contact-H5{
+  height:100%;
   overflow-y: auto;
-
-  .TUI-contact {
+  .TUI-contact{
     &-left {
       min-width: 0;
       width: 100%;
@@ -10,109 +9,92 @@
       flex: 1;
       position: static;
     }
-
     &-main {
       position: fixed;
       top: 0;
       left: 0;
       z-index: 2;
       flex-direction: column;
-      background: #efefef;
-
-      &-h5 {
+      background: #EFEFEF;
+      &-h5{
         &-title {
           display: flex;
           align-items: center;
-          padding: 12Px 16Px;
-          background: #ffffff;
+          padding: 12px 16px;
+          background: #FFFFFF;
           justify-content: center;
           position: relative;
-
           .icon {
             position: absolute;
-            left: 16Px;
+            left: 16px;
           }
-
           h1 {
             flex: 1;
             width: 0;
             word-break: keep-all;
             overflow: hidden;
             text-overflow: ellipsis;
-            padding: 0 30Px;
+            padding: 0 30px;
             font-weight: 500;
-            font-size: 16Px;
+            font-size: 16px;
             text-align: center;
           }
         }
       }
-
       &-info {
-        padding: 12Px 0;
-
+        padding: 12px 0;
         &-header {
-          background: #ffffff;
-          padding: 12Px 16Px;
+          background: #FFFFFF;
+          padding: 12px 16px;
           flex-direction: row-reverse;
           justify-content: flex-end;
           align-items: center;
-
           .list {
-            padding-left: 12Px;
+            padding-left: 12px;
           }
         }
-
         &-main {
-          background: #ffffff;
-          padding: 12Px 16Px;
-
+          background: #FFFFFF;
+          padding: 12px 16px;
           textarea {
-            background: #efefef;
+            background: #EFEFEF;
           }
         }
-
         &-footer {
-          padding-top: 12Px;
+          padding-top: 12px;
           flex-direction: column;
-
           p {
             text-align: center;
-            background: #ffffff;
-            padding: 10Px 0;
+            background: #FFFFFF;
+            padding: 10px 0;
             opacity: 1;
           }
-
           .btn {
             flex: 1;
-            background: #ffffff;
-            border-bottom: 1Px solid #eeeeee;
+            background: #FFFFFF;
+            border-bottom: 1px solid #EEEEEE;
             margin: 0;
-            padding: 15Px 0;
+            padding: 15px 0;
           }
         }
       }
     }
-
     &-system {
       flex: 1;
       position: static;
     }
-
     &-list {
       position: static;
       overflow-y: scroll;
     }
   }
-
   .btn {
     &-cancel {
-      color: #ff584c;
+      color: #FF584C;
     }
-
     &-default {
-      color: #006eff;
+      color: #006EFF;
     }
-
     &:disabled {
       opacity: 0.3;
     }

src/TUIKit/TUIComponents/container/TUIContact/style/index.scss

@@ -2,4 +2,4 @@
 @import url('../../../styles/icon.scss');
 @import './color.scss';
 @import './web.scss';
-@import './h5.scss';
+@import './h5.scss';

src/TUIKit/TUIComponents/container/TUIContact/style/web.scss

@@ -4,12 +4,12 @@
   height: 100%;
   box-sizing: border-box;
   display: flex;
-  padding: 12Px 0;
+  padding: 12px 0;
 
   &-left {
     position: relative;
     flex: 1;
-    min-width: 285Px;
+    min-width: 285px;
     flex: 0 0 24%;
     overflow-y: auto;
 
@@ -17,14 +17,14 @@
       position: sticky;
       top: 0;
       z-index: 1;
-      padding: 0 12Px 12Px;
+      padding: 0 12px 12px;
       display: flex;
       justify-content: space-between;
       align-items: center;
 
       input {
         flex: 1;
-        margin-right: 20Px;
+        margin-right: 20px;
       }
     }
   }
@@ -38,10 +38,10 @@
 
     &-item {
       .num {
-        width: 14Px;
-        height: 14Px;
+        width: 14px;
+        height: 14px;
         border-radius: 100%;
-        font-size: 12Px;
+        font-size: 12px;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -50,15 +50,15 @@
       header {
         display: flex;
         align-items: center;
-        padding: 10Px 15Px;
+        padding: 10px 15px;
 
         main {
           flex: 1;
-          padding-left: 6Px;
+          padding-left: 6px;
           display: flex;
           justify-content: space-between;
-          font-size: 14Px;
-          line-height: 14Px;
+          font-size: 14px;
+          line-height: 14px;
         }
       }
     }
@@ -80,17 +80,17 @@
       &-header {
         display: flex;
         justify-content: space-between;
-        padding-bottom: 15Px;
+        padding-bottom: 15px;
 
         .list {
           h1 {
-            font-size: 24Px;
-            padding-bottom: 10Px;
+            font-size: 24px;
+            padding-bottom: 10px;
           }
 
           li {
-            font-size: 16Px;
-            padding: 6Px 0;
+            font-size: 16px;
+            padding: 6px 0;
           }
         }
 
@@ -108,6 +108,7 @@
         label {
           font-size: 0.88rem;
           line-height: 1.25rem;
+          ;
           padding-bottom: 0.63rem;
         }
 
@@ -128,7 +129,7 @@
         justify-content: center;
 
         .btn {
-          margin: 0 20Px;
+          margin: 0 20px;
 
           &:first-child {
             margin-left: 0;
@@ -147,7 +148,7 @@
         align-items: center;
 
         input {
-          margin-right: 20Px;
+          margin-right: 20px;
         }
       }
     }
@@ -162,14 +163,14 @@
     overflow-y: auto;
 
     &-header {
-      padding: 20Px;
+      padding: 20px;
       display: flex;
       justify-content: space-between;
       align-items: center;
 
       h1 {
-        font-size: 16Px;
-        line-height: 24Px;
+        font-size: 16px;
+        line-height: 24px;
       }
     }
   }
@@ -181,13 +182,13 @@
   list-style: none;
 
   &-item {
-    padding: 12Px 15Px;
+    padding: 12px 15px;
     position: relative;
     display: flex;
     align-items: center;
 
     label {
-      font-size: 14Px;
+      font-size: 14px;
     }
 
     &:hover {
@@ -198,51 +199,51 @@
 
     .left {
       position: relative;
-      width: 36Px;
-      height: 36Px;
+      width: 36px;
+      height: 36px;
 
       .num {
         position: absolute;
         display: inline-block;
-        right: -8Px;
-        top: -8Px;
-        width: 20Px;
-        height: 20Px;
-        font-size: 10Px;
+        right: -8px;
+        top: -8px;
+        width: 20px;
+        height: 20px;
+        font-size: 10px;
         text-align: center;
-        line-height: 20Px;
+        line-height: 20px;
         border-radius: 50%;
       }
 
       .avatar {
         width: 100%;
-        border-radius: 5Px;
+        border-radius: 5px;
       }
 
       .online-status {
         box-sizing: border-box;
         position: absolute;
-        width: 11Px;
-        height: 11Px;
-        left: 30Px;
-        top: 27Px;
-        border: 2Px solid #ffffff;
-        box-shadow: 0Px 0Px 4Px rgba(0, 0, 0, 0.102606);
+        width: 11px;
+        height: 11px;
+        left: 30px;
+        top: 27px;
+        border: 2px solid #ffffff;
+        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.102606);
         border-radius: 50%;
 
         &-online {
-          background: #29cc85;
+          background: #29CC85;
         }
 
         &-offline {
-          background: #a4a4a4;
+          background: #A4A4A4;
         }
       }
     }
 
     .content {
       flex: 1;
-      padding-left: 8Px;
+      padding-left: 8px;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -256,8 +257,8 @@
           flex: 1;
           display: flex;
           align-items: center;
-          font-size: 14Px;
-          line-height: 16Px;
+          font-size: 14px;
+          line-height: 16px;
 
           span {
             flex: 1;
@@ -269,21 +270,21 @@
         }
 
         .name {
-          padding-bottom: 2Px;
+          padding-bottom: 2px;
         }
       }
 
       .type {
-        padding: 0 4Px;
-        line-height: 14Px;
-        font-size: 12Px;
-        border-radius: 1Px;
+        padding: 0 4px;
+        line-height: 14px;
+        font-size: 12px;
+        border-radius: 1px;
       }
     }
   }
 
   .not-aside {
-    padding-left: 40Px;
+    padding-left: 40px;
     display: flex;
     justify-content: space-between;
   }
@@ -292,14 +293,14 @@
 .reduce {
   position: relative;
   display: inline-block;
-  width: 36Px;
-  height: 36Px;
+  width: 36px;
+  height: 36px;
 
   &::before {
     position: absolute;
-    content: '';
+    content: "";
     width: 50%;
-    height: 1Px;
+    height: 1px;
     top: 0;
     bottom: 0;
     left: 0;
@@ -314,18 +315,18 @@
 }
 
 .btn {
-  padding: 8Px 20Px;
-  border-radius: 4Px;
+  padding: 8px 20px;
+  border-radius: 4px;
   border: none;
-  font-size: 14Px;
+  font-size: 14px;
   text-align: center;
-  line-height: 20Px;
+  line-height: 20px;
 }
 
 input {
   box-sizing: border-box;
-  border-radius: 5Px;
-  padding: 10Px;
+  border-radius: 5px;
+  padding: 10px;
 }
 
 .search {
@@ -338,8 +339,8 @@ input {
     align-items: center;
 
     h1 {
-      padding: 2Px 8Px;
-      font-size: 14Px;
+      padding: 2px 8px;
+      font-size: 14px;
     }
 
     .input-box {
@@ -354,7 +355,7 @@ input {
 
       .icon {
         position: absolute;
-        right: 10Px;
+        right: 10px;
         top: 0;
         bottom: 0;
         margin: auto 0;
@@ -362,9 +363,9 @@ input {
     }
 
     .search-cancel {
-      padding-left: 10Px;
-      font-size: 12Px;
-      line-height: 18Px;
+      padding-left: 10px;
+      font-size: 12px;
+      line-height: 18px;
     }
   }
 }

src/TUIKit/TUIComponents/container/TUIConversation/components/list-item/index.vue

@@ -5,7 +5,7 @@
     :class="[
       currentID === conversation.conversationID && 'selected',
       conversation.isPinned && 'pinned',
-      isH5 ? 'list-item-h5' : ''
+      isH5 ? 'list-item-h5' : '',
     ]"
     :id="conversation.conversationID"
   >
@@ -20,28 +20,18 @@
         <div
           class="online-status"
           :class="
-            userStatusList?.get(conversation?.userProfile?.userID)
-              ?.statusType === 1
+            userStatusList?.get(conversation?.userProfile?.userID)?.statusType === 1
               ? 'online-status-online'
               : 'online-status-offline'
           "
           v-if="showUserOnlineStatus()"
         ></div>
-        <span
-          class="num"
-          v-if="
-            conversation.unreadCount > 0 &&
-            conversation.messageRemindType !== 'AcceptNotNotify'
-          "
-        >
+        <span class="num" v-if="conversation.unreadCount > 0 && conversation.messageRemindType !== 'AcceptNotNotify'">
           {{ conversation.unreadCount > 99 ? '99+' : conversation.unreadCount }}
         </span>
         <span
           class="num-notify"
-          v-if="
-            conversation.unreadCount > 0 &&
-            conversation.messageRemindType === 'AcceptNotNotify'
-          "
+          v-if="conversation.unreadCount > 0 && conversation.messageRemindType === 'AcceptNotNotify'"
         ></span>
       </aside>
       <div class="content">
@@ -52,20 +42,14 @@
           <div class="middle-box">
             <span
               class="middle-box-at"
-              v-if="
-                conversation.type === 'GROUP' &&
-                conversation.groupAtInfoList.length > 0
-              "
+              v-if="conversation.type === 'GROUP' && conversation.groupAtInfoList.length > 0"
+              >{{ handleConversation?.showAt(conversation) }}</span
             >
-              {{ handleConversation?.showAt(conversation) }}
-            </span>
             <p>{{ handleConversation?.showMessage(conversation) }}</p>
           </div>
         </div>
         <div class="content-footer">
-          <span class="time">
-            {{ handleConversation?.time(conversation.lastMessage.lastTime) }}
-          </span>
+          <span class="time">{{ handleConversation?.time(conversation.lastMessage.lastTime) }}</span>
           <img
             v-if="conversation.messageRemindType === 'AcceptNotNotify'"
             class="mute-icon"
@@ -76,29 +60,16 @@
       </div>
     </div>
     <div class="dialog dialog-item" v-if="toggle" ref="dialog">
-      <p class="conversation-options" @click.stop="handleItem('delete')">
-        {{ $t('TUIConversation.删除会话') }}
-      </p>
-      <p
-        class="conversation-options"
-        v-if="!conversation.isPinned"
-        @click.stop="handleItem('ispinned')"
-      >
+      <p class="conversation-options" @click.stop="handleItem('delete')">{{ $t('TUIConversation.删除会话') }}</p>
+      <p class="conversation-options" v-if="!conversation.isPinned" @click.stop="handleItem('ispinned')">
         {{ $t('TUIConversation.置顶会话') }}
       </p>
-      <p
-        class="conversation-options"
-        v-if="conversation.isPinned"
-        @click.stop="handleItem('dispinned')"
-      >
+      <p class="conversation-options" v-if="conversation.isPinned" @click.stop="handleItem('dispinned')">
         {{ $t('TUIConversation.取消置顶') }}
       </p>
       <p
         class="conversation-options"
-        v-if="
-          conversation.messageRemindType === '' ||
-          conversation.messageRemindType === 'AcceptAndNotify'
-        "
+        v-if="conversation.messageRemindType === '' || conversation.messageRemindType === 'AcceptAndNotify'"
         @click.stop="handleItem('mute')"
       >
         {{ $t('TUIConversation.消息免打扰') }}
@@ -115,50 +86,42 @@
 </template>
 <script lang="ts">
 import { onClickOutside, useElementBounding } from '@vueuse/core';
-import {
-  defineComponent,
-  nextTick,
-  reactive,
-  ref,
-  toRefs,
-  watch,
-  watchEffect
-} from 'vue';
+import { defineComponent, nextTick, reactive, ref, toRefs, watch, watchEffect } from 'vue';
 import { Conversation } from '../../interface';
 const ListItem: any = defineComponent({
   props: {
     conversation: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     handleConversation: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     currentID: {
       type: String,
-      default: () => ''
+      default: () => '',
     },
     toggleID: {
       type: String,
-      default: () => ''
+      default: () => '',
     },
     isH5: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     displayOnlineStatus: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     userStatusList: {
       type: Map,
-      default: () => new Map()
+      default: () => new Map(),
     },
     types: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
   setup(props: any, ctx: any) {
     const data = reactive({
@@ -170,7 +133,7 @@ const ListItem: any = defineComponent({
       conversationType: '',
       loop: 0,
       displayOnlineStatus: false,
-      userStatusList: new Map()
+      userStatusList: new Map(),
     });
 
     const dialog: any = ref();
@@ -188,8 +151,7 @@ const ListItem: any = defineComponent({
       data.toggle = false;
       data.displayOnlineStatus = props.displayOnlineStatus;
       data.userStatusList = props.userStatusList;
-      props.toggleID === props.conversation.conversationID &&
-        (data.toggle = true);
+      props.toggleID === props.conversation.conversationID && (data.toggle = true);
     });
 
     watch(
@@ -200,15 +162,9 @@ const ListItem: any = defineComponent({
             const DialogBound = useElementBounding(dialog);
             const ParentEle = content?.value?.offsetParent;
             const ParentBound = useElementBounding(ParentEle);
-            if (
-              DialogBound.top.value -
-                ParentBound.top.value -
-                DialogBound.height.value -
-                30 >
-              0
-            ) {
+            if (DialogBound.top.value - ParentBound.top.value - DialogBound.height.value - 30 > 0) {
               dialog.value.style.top = 'auto';
-              dialog.value.style.bottom = '30Px';
+              dialog.value.style.bottom = '30px';
             }
           });
         }
@@ -232,17 +188,13 @@ const ListItem: any = defineComponent({
     const handleItem = (name: string) => {
       ctx.emit('handle', {
         name,
-        conversation: data.conversation
+        conversation: data.conversation,
       });
       ctx.emit('toggle', '');
     };
 
     const showUserOnlineStatus = () => {
-      if (
-        data.displayOnlineStatus &&
-        data.conversation?.type === props.types.CONV_C2C
-      )
-        return true;
+      if (data.displayOnlineStatus && data.conversation?.type === props.types.CONV_C2C) return true;
       return false;
     };
 
@@ -253,9 +205,9 @@ const ListItem: any = defineComponent({
       dialog,
       content,
       toggleDialog,
-      showUserOnlineStatus
+      showUserOnlineStatus,
     };
-  }
+  },
 });
 export default ListItem;
 </script>

src/TUIKit/TUIComponents/container/TUIConversation/components/list-item/style/color.scss

@@ -1,87 +1,72 @@
 .TUI-conversation {
   &-item {
     &:hover {
-      background: rgba(0, 110, 255, 0.1);
+      background: rgba(0,110,255,0.10);
     }
-
     .left {
       .num {
         background: red;
         color: #ffffff;
-
         &-notify {
           background: red;
           color: #ffffff;
         }
       }
-
       .num-notify {
         background: red;
         color: #ffffff;
       }
     }
-
     .content-header {
-      label {
-        color: #000000;
+      label{
+          color: #000000;
       }
-
       .name {
-        font-weight: 400;
-        letter-spacing: 0;
-        color: #000000;
-      }
+          font-weight: 400;
+          letter-spacing: 0;
+          color: #000000;
+        }
     }
-
-    .middle-box {
-      span {
-        font-family: PingFangSC-Regular;
-        font-weight: 400;
-        color: #999999;
-      }
-
-      p {
-        font-weight: 400;
-        color: #999999;
-        letter-spacing: 0;
-      }
-
-      &-at {
-        color: #fb5059 !important;
-      }
+    .middle-box{
+        span {
+          font-family: PingFangSC-Regular;
+          font-weight: 400;
+          color: #999999;
+        }
+        p {
+          font-weight: 400;
+          color: #999999;
+          letter-spacing: 0;
+        }
+        &-at {
+          color:#FB5059 !important;
+        }
     }
-
     .content-footer {
       color: #999999;
-
-      .time {
-        color: #bbbbbb;
+        .time {
+        color: #BBBBBB;
       }
     }
   }
-
   .selected {
-    background: rgba(0, 110, 255, 0.1);
+    background: rgba(0,110,255,0.10);
   }
-
   .pinned {
-    background: #eef0f3;
+    background: #EEF0F3;
   }
-
-  .dialog {
+  .dialog{
     background: #fff;
-
     &-item {
-      box-shadow: 0 11Px 20Px 0 rgba(0, 0, 0, 0.3);
-      background: #ffffff;
-      border: 1Px solid #e0e0e0;
-      box-shadow: 0 -4Px 12Px 0 rgba(0, 0, 0, 0.06);
+      box-shadow: 0 11px 20px 0 rgba(0,0,0,.3);
+      background: #FFFFFF;
+      border: 1px solid #E0E0E0;
+      box-shadow: 0 -4px 12px 0 rgba(0,0,0,.06);
     }
-
-    .conversation-options {
+  .conversation-options {
       font-family: PingFangSC-Regular;
       font-weight: 400;
-      color: #4f4f4f;
+      color: #4F4F4F;
       letter-spacing: 0;
     }
   }

src/TUIKit/TUIComponents/container/TUIConversation/components/list-item/style/h5.scss

@@ -1,30 +1,27 @@
+
 .list-item-h5 {
   .dialog {
     left: auto;
-    right: 18Px;
+    right: 18px;
     padding: 0;
-
     .conversation-options {
-      padding: 14Px;
-      font-size: 16Px;
+      padding: 14px;
+      font-size: 16px;
     }
   }
-
   .TUI-conversation-item {
     .content {
       .name {
-        font-size: 16Px;
+        font-size: 16px;
       }
-
       .middle-box {
         p {
-          font-size: 14Px;
+          font-size: 14px;
         }
       }
     }
-
     .time {
-      font-size: 14Px;
+      font-size: 14px;
     }
   }
 }

src/TUIKit/TUIComponents/container/TUIConversation/components/list-item/style/web.scss

@@ -4,67 +4,67 @@
   }
 
   &-item {
-    padding: 12Px;
+    padding: 12px;
     display: flex;
     align-items: center;
     cursor: pointer;
 
     .left {
       position: relative;
-      width: 48Px;
-      height: 48Px;
+      width: 36px;
+      height: 36px;
 
       .num {
         position: absolute;
         display: inline-block;
-        right: 0Px;
-        top: -5Px;
-        min-width: 10Px;
+        right: 0px;
+        top: -5px;
+        min-width: 10px;
         width: fit-content;
-        padding: 0 2.5Px;
-        height: 15Px;
-        font-size: 10Px;
+        padding: 0 2.5px;
+        height: 15px;
+        font-size: 10px;
         text-align: center;
-        line-height: 15Px;
-        border-radius: 7.5Px;
+        line-height: 15px;
+        border-radius: 7.5px;
       }
 
       .num-notify {
         position: absolute;
         display: inline-block;
-        right: -1Px;
-        top: -5Px;
+        right: -1px;
+        top: -5px;
         width: 0.5rem;
         height: 0.5rem;
-        font-size: 10Px;
+        font-size: 10px;
         text-align: center;
-        line-height: 15Px;
+        line-height: 15px;
         border-radius: 65%;
       }
 
       .avatar {
-        width: 48Px;
-        height: 48Px;
-        border-radius: 5Px;
+        width: 30px;
+        height: 30px;
+        border-radius: 5px;
       }
 
       .online-status {
         box-sizing: border-box;
         position: absolute;
-        width: 10Px;
-        height: 10Px;
-        left: 24Px;
-        top: 22Px;
-        border: 2Px solid #ffffff;
-        box-shadow: 0Px 0Px 4Px rgba(0, 0, 0, 0.102606);
+        width: 10px;
+        height: 10px;
+        left: 24px;
+        top: 22px;
+        border: 2px solid #ffffff;
+        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.102606);
         border-radius: 50%;
 
         &-online {
-          background: #29cc85;
+          background: #29CC85;
         }
 
         &-offline {
-          background: #a4a4a4;
+          background: #A4A4A4;
         }
       }
     }
@@ -72,7 +72,7 @@
     .content {
       display: flex;
       flex: 1;
-      padding-left: 8Px;
+      padding-left: 8px;
       justify-content: space-between;
     }
 
@@ -83,13 +83,13 @@
 
       label {
         flex: 1;
-        font-size: 14Px;
+        font-size: 14px;
       }
 
       .name {
-        width: 110Px;
+        width: 110px;
         letter-spacing: 0;
-        font-size: 14Px;
+        font-size: 14px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -102,7 +102,7 @@
       align-items: center;
 
       span {
-        font-size: 12Px;
+        font-size: 12px;
       }
 
       p {
@@ -111,28 +111,28 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        font-size: 12Px;
-        line-height: 16Px;
+        font-size: 12px;
+        line-height: 16px;
       }
     }
 
     .content-footer {
-      line-height: 16Px;
+      line-height: 16px;
       display: flex;
       flex-direction: column;
 
       .time {
-        font-size: 12Px;
-        line-height: 16Px;
+        font-size: 12px;
+        line-height: 16px;
         display: inline-block;
-        max-width: 75Px;
+        max-width: 75px;
         white-space: nowrap;
       }
 
       img {
-        width: 16Px;
-        height: 16Px;
-        margin-top: 5Px;
+        width: 16px;
+        height: 16px;
+        margin-top: 5px;
         align-self: flex-end;
       }
     }
@@ -141,19 +141,19 @@
   .dialog {
     position: absolute;
     z-index: 5;
-    padding: 2Px 20Px;
+    padding: 2px 20px;
 
     &-item {
-      top: 30Px;
-      left: 164Px;
-      border-radius: 8Px;
+      top: 30px;
+      left: 164px;
+      border-radius: 8px;
     }
 
     .conversation-options {
-      padding: 5Px 0;
-      // height: 17Px;
-      font-size: 12Px;
-      line-height: 17Px;
+      padding: 5px 0;
+      height: 17px;
+      font-size: 12px;
+      line-height: 17px;
     }
   }
 }

src/TUIKit/TUIComponents/container/TUIConversation/style/color.scss

@@ -1,30 +1,26 @@
 .TUI-conversation {
-  background: #ffffff;
-
+  background: #FFFFFF;
   header {
-    background: #ffffff;
-    border-bottom: 0.06rem solid #f4f5f9;
-
+    background: #FFFFFF;
+    border-bottom: 0.06rem solid #F4F5F9;
     h1 {
       font-weight: 400;
       color: #000000;
     }
-
-    .more {
-      background: #f3f3f3;
+    .more{
+      background: #F3F3F3;
     }
   }
-
   .network {
     p {
       font-family: PingFangSC-Regular;
       font-weight: 400;
-      color: #e54545;
+      color: #E54545;
       letter-spacing: 0;
     }
   }
 }
 
 input {
-  border: 1Px solid #dddddd;
-}
+  border: 1px solid #DDDDDD;
+}