优化UI，修复群BUG

TUIKit/components/TUIChat/index.vue

@@ -12,7 +12,7 @@
         :class="['tui-chat', !isPC && 'tui-chat-h5']"
       >
         <ChatHeader
-          :isGroup="isGroup"
+          :isGroup="!isNotInGroup ? isGroup : null"
           :headerExtensionList="headerExtensionList"
           :serviceID="serviceID"
           @closeChat="closeChat"
@@ -287,7 +287,6 @@
   }
 
   function onCurrentConversationUpdate(conversation: IConversationModel) {
-
     updateUIUserNotInGroup(conversation)
     // return when currentConversation is null
     if (!conversation) {

TUIKit/components/TUIChat/message-list/index.vue

@@ -56,7 +56,7 @@
                 item.type === TYPES.MSG_GRP_TIP ||
                 isCreateGroupCustomMessage(item)
               "
-              :content="item.getMessageContent()"
+              :content="item"
             />
             <div
               v-else-if="!item.isRevoked && !isPluginMessage(item)"

TUIKit/components/TUIChat/message-list/message-elements/message-tip.vue

@@ -12,7 +12,7 @@ const props = defineProps({
     default: () => ({}),
   },
 });
-const tipContent = computed(() => props.content?.text || props.content?.custom || '');
+const tipContent = computed(() => `${props.content.nick || props.content.from} 创建群聊`);
 </script>
 <style lang="scss" scoped>
 @import "../../../../assets/styles/common";

TUIKit/components/TUIConversation/conversation-list/index.vue

@@ -128,7 +128,10 @@
                 {{ conversation.getGroupAtInfo() }}
               </span>
               <view class="middle-box-content">
-                {{ conversation.getLastMessage('text') }}
+                {{
+                  isFirstCreateGroup(conversation) ||
+                  conversation.getLastMessage('text')
+                }}
               </view>
             </view>
           </view>
@@ -366,7 +369,7 @@
   const redEnvelopeText = (item: IConversationModel) => {
     const payload = JSON.parse(item.lastMessage?.payload?.data)
     const text = item.getLastMessage('text')?.split(':')
-    console.log(text)
+
     if (text && text.length > 1) {
       return `${text[0]}:[积分红包] ${payload.title}`
     } else {
@@ -374,6 +377,17 @@
     }
   }
 
+  /** 是否最开始创建群聊 */
+  const isFirstCreateGroup = (item: IConversationModel) => {
+    if (item.type === 'GROUP' && item?.lastMessage?.payload?.data) {
+      const data = JSON.parse(item?.lastMessage?.payload?.data)
+      return data.content === 'Create Group'
+        ? `${item.getLastMessage('text')?.split(':')[0]}:创建群聊`
+        : ''
+    }
+    return ''
+  }
+
   function onConversationListUpdated(list: IConversationModel[]) {
     conversationList.value = list
   }

TUIKit/components/TUIGroup/create-group/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="group" :class="[!isPC ? 'group-h5' : '']">
+  <view class="group" :class="[!isPC ? 'group-h5' : '']">
     <div class="group-box">
       <ul v-if="!groupInfo.isEdit" class="group-list">
-        <li class="group-list-item">
+        <li style="border-bottom: none" class="group-list-item">
           <label class="group-list-item-label">
             {{ TUITranslateService.t('TUIGroup.群头像') }}
           </label>
@@ -12,23 +12,23 @@
           <li
             v-for="(item, index) in createInfo"
             :key="index"
-            class="group-list-item"
+            class="group-list-item item-input_box"
           >
             <label class="group-list-item-label">{{ item.name }}</label>
             <input
-              v-if="isPC"
               v-model="groupInfo.profile[item.key]"
               type="text"
               :placeholder="item.placeholder"
+              class="btn-input"
             />
-            <span
+            <!-- <span
               v-else
               class="group-h5-list-item-content"
               @click="edit(item.key)"
             >
               <p class="content">{{ groupInfo.profile[item.key] }}</p>
               <Icon :file="rightIcon" />
-            </span>
+            </span> -->
           </li>
           <!-- <li class="group-list-item" @click="cbPopupShow.open('bottom')">
             <label class="group-list-item-label">申请加群方式</label>
@@ -89,7 +89,8 @@
           @selectType="selected"
         />
       </div>
-      <footer class="group-profile-footer">
+      <!-- 原版确认按钮 -->
+      <!-- <footer class="group-profile-footer">
         <button
           v-if="isPC && !groupInfo.isEdit"
           class="btn-default"
@@ -104,7 +105,12 @@
         >
           {{ TUITranslateService.t('TUIGroup.确认') }}
         </button>
-      </footer>
+      </footer> -->
+      <bottom-view>
+        <cb-button :disabled="submitDisabledStatus" @click="submit">
+          确认添加
+        </cb-button>
+      </bottom-view>
     </div>
 
     <uni-popup ref="cbPopupShow" backgroundColor="#fff">
@@ -125,7 +131,7 @@
         <text @click="cbPopupShow.close()">取消</text>
       </view>
     </uni-popup>
-  </div>
+  </view>
 </template>
 <script lang="ts" setup>
   import TUIChatEngine, {
@@ -370,12 +376,45 @@
 </script>
 <style lang="scss" scoped src="./style/index.scss"></style>
 <style lang="scss" scoped>
+  .group {
+    background: #f4f4f4;
+  }
+
+  .group-h5 {
+    padding: 32rpx 24rpx;
+  }
+
+  .group-box {
+    border-radius: 16rpx;
+  }
+
+  .group-h5-list-item-content {
+    .content {
+      padding: 0 !important;
+      font-size: 32rpx;
+      color: #333333;
+    }
+  }
+
   .group-list {
     margin: 0 !important;
     .group-list-item {
+      padding: 24rpx 32rpx !important;
       display: flex;
       align-items: center;
       border-bottom: 2rpx solid #e5e5e5;
+      box-sizing: border-box;
+    }
+    .item-input_box {
+      .btn-input {
+        padding: 0;
+        height: 44rpx;
+        font-size: 32rpx;
+        color: #333333;
+        border: none !important;
+        // background: rgb(238, 128, 128);
+        text-align: right;
+      }
     }
   }
   .popup-content {

TUIKit/components/TUIGroup/index.vue

@@ -48,6 +48,7 @@
 
   TUIStore.watch(StoreName.GRP, {
     isShowCreateComponent: (data: any) => {
+      console.log(data, '=============1111')
       if (data) {
         isShowCreateGroup.value = true
         title.value = TUITranslateService.t('TUIConversation.发起群聊')
@@ -56,6 +57,7 @@
       }
     },
     isShowManageComponent: (data: any) => {
+      console.log(data, '=============2222')
       if (data) {
         isShowManageGroup.value = true
         title.value = TUITranslateService.t('TUIGroup.群管理')
@@ -87,6 +89,9 @@
   }
 </script>
 <style lang="scss" scoped>
+  page {
+    background: #f4f4f4;
+  }
   .tui-group {
     width: 100%;
     height: 100%;

TUIKit/components/TUIGroup/manage-group/index.vue

@@ -14,51 +14,61 @@
       @getMore="getMember('more')"
     />
     <main
-      v-else-if="!currentTab || (isUniFrameWork && currentTab != 'admin')"
+      v-else-if="
+        currentGroup?.groupID &&
+        (!currentTab || (isUniFrameWork && currentTab != 'admin'))
+      "
       class="main"
     >
-      <ManageName
+      <view class="main-box">
-        :isAuthor="isOwner || isAdmin || isWorkGroup"
+        <ManageName
-        :data="currentGroup"
+          :isAuthor="isOwner || isAdmin || isWorkGroup"
-        @update="updateProfile"
+          :data="currentGroup"
-      />
+          @update="updateProfile"
-      <div class="user-info space-top">
+        />
-        <header class="user-info-header" @click="setCurrentTab('member')">
+        <div class="user-info space-top">
-          <label class="user-info-header-left">
+          <header
-            {{ TUITranslateService.t(`TUIGroup.群成员`) }}
+            class="user-info-header"
-          </label>
+            @click="setCurrentTab('member')"
-          <div class="user-info-header-right">
-            <span class="span">
-              {{ currentGroup.memberCount || groupMemberList.length }}
-              {{ TUITranslateService.t(`TUIGroup.人`) }}
-            </span>
-            <Icon :file="rightIcon" />
-          </div>
-        </header>
-        <ol class="user-info-list">
-          <dl
-            v-for="(item, index) in groupMemberList.slice(0, showUserNum)"
-            :key="index"
-            class="user-info-list-item"
           >
-            <dt
+            <label class="user-info-header-left">
-              class="user-info-list-item-main"
+              {{ TUITranslateService.t(`TUIGroup.群成员`) }}
-              @click="handleMemberProfileShow(item)"
+            </label>
+            <div class="user-info-header-right">
+              <span class="span">
+                {{ currentGroup.memberCount || groupMemberList.length }}
+                {{ TUITranslateService.t(`TUIGroup.人`) }}
+              </span>
+              <Icon :file="rightIcon" />
+            </div>
+          </header>
+          <ol class="user-info-list">
+            <dl
+              v-for="(item, index) in groupMemberList.slice(
+                0,
+                showUserNum
+              )"
+              :key="index"
+              class="user-info-list-item"
             >
-              <Avatar
+              <dt
-                useSkeletonAnimation
+                class="user-info-list-item-main"
-                :url="
+                @click="handleMemberProfileShow(item)"
-                  item.avatar ||
+              >
-                  'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+                <Avatar
-                "
+                  useSkeletonAnimation
-                size="40px"
+                  :url="
-              />
+                    item.avatar ||
-            </dt>
+                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-            <dd class="user-info-list-item-info">
+                  "
-              {{ item.nick || item.userID }}
+                  size="40px"
-            </dd>
+                />
-          </dl>
+              </dt>
-          <dl v-if="isShowAddMember" class="user-info-list-item">
+              <dd class="user-info-list-item-info">
+                {{ item.nick || item.userID }}
+              </dd>
+            </dl>
+            <!-- <dl v-if="isShowAddMember" class="user-info-list-item">
             <dt class="avatar" @click="toggleMask('add')">+</dt>
           </dl>
           <dl
@@ -66,87 +76,88 @@
             class="user-info-list-item"
           >
             <dt class="avatar" @click="toggleMask('remove')">-</dt>
-          </dl>
+          </dl> -->
-        </ol>
+          </ol>
-        <div
+          <div
-          v-if="groupMemberList.length > showUserNum"
+            v-if="groupMemberList.length > showUserNum"
-          class="view-more"
+            class="view-more"
-          @click="setCurrentTab('member')"
+            @click="setCurrentTab('member')"
-        >
+          >
-          <p>{{ TUITranslateService.t(`TUIGroup.查看更多群成员`) }}</p>
+            <p>{{ TUITranslateService.t(`TUIGroup.查看更多群成员`) }}</p>
-          <Icon :file="rightIcon" size="14px" />
+            <Icon :file="rightIcon" size="14px" />
+          </div>
         </div>
-      </div>
+        <ul class="content list space-top" @click="editLableName = ''">
-      <ul class="content list space-top" @click="editLableName = ''">
+          <li class="list-item" @click="setCurrentTab('notification')">
-        <li class="list-item" @click="setCurrentTab('notification')">
+            <aside class="aside">
-          <aside class="aside">
+              <label class="label">
+                {{ TUITranslateService.t(`TUIGroup.群公告`) }}
+              </label>
+              <article class="article">
+                {{ currentGroup.notification }}
+              </article>
+            </aside>
+            <Icon :file="rightIcon" class="end" />
+          </li>
+          <li
+            v-if="(isAdmin || isOwner) && isSetMuteTime"
+            class="list-item"
+            @click="setCurrentTab('admin')"
+          >
             <label class="label">
-              {{ TUITranslateService.t(`TUIGroup.群公告`) }}
+              {{ TUITranslateService.t(`TUIGroup.群管理`) }}
             </label>
-            <article class="article">
+            <Icon :file="rightIcon" />
-              {{ currentGroup.notification }}
+          </li>
-            </article>
+          <li class="list-item">
-          </aside>
+            <label class="label">
-          <Icon :file="rightIcon" class="end" />
+              {{ TUITranslateService.t(`TUIGroup.群类型`) }}
-        </li>
+            </label>
-        <li
+            <span class="span">
-          v-if="(isAdmin || isOwner) && isSetMuteTime"
+              {{
-          class="list-item"
+                TUITranslateService.t(
-          @click="setCurrentTab('admin')"
+                  `TUIGroup.${typeName[currentGroup.type]}`
-        >
+                )
-          <label class="label">
+              }}
-            {{ TUITranslateService.t(`TUIGroup.群管理`) }}
+            </span>
-          </label>
+          </li>
-          <Icon :file="rightIcon" />
+          <li class="list-item">
-        </li>
+            <label class="label">
-        <li class="list-item">
+              {{ TUITranslateService.t(`TUIGroup.加群方式`) }}
-          <label class="label">
+            </label>
-            {{ TUITranslateService.t(`TUIGroup.群类型`) }}
+            <span class="span">
-          </label>
+              {{
-          <span class="span">
+                TUITranslateService.t(
-            {{
+                  `TUIGroup.${typeName[currentGroup.joinOption]}`
-              TUITranslateService.t(
+                )
-                `TUIGroup.${typeName[currentGroup.type]}`
+              }}
-              )
+            </span>
-            }}
+          </li>
-          </span>
+        </ul>
-        </li>
+        <ul class="footer list space-top">
-        <li class="list-item">
+          <!-- <li
-          <label class="label">
-            {{ TUITranslateService.t(`TUIGroup.加群方式`) }}
-          </label>
-          <span class="span">
-            {{
-              TUITranslateService.t(
-                `TUIGroup.${typeName[currentGroup.joinOption]}`
-              )
-            }}
-          </span>
-        </li>
-      </ul>
-      <ul class="footer list space-top">
-        <!-- <li
           v-if="currentSelfRole === 'Owner' && groupMemberList.length > 1"
           class="list-item"
           @click.stop="toggleMask('changeOwner')"
         >
           {{ TUITranslateService.t(`TUIGroup.转让群组`) }}
         </li> -->
-        <li
+          <li
-          v-if="canIDissmissGroup"
+            v-if="canIDissmissGroup"
-          class="list-item"
+            class="list-item"
-          @click.stop="dismissGroup(currentGroup)"
+            @click.stop="dismissGroup(currentGroup)"
-        >
+          >
-          {{ TUITranslateService.t(`TUIGroup.解散群聊`) }}
+            {{ TUITranslateService.t(`TUIGroup.解散群聊`) }}
-        </li>
+          </li>
-        <li
+          <li
-          v-else
+            v-else
-          class="list-item"
+            class="list-item"
-          @click.stop="quitGroup(currentGroup)"
+            @click.stop="quitGroup(currentGroup)"
-        >
+          >
-          {{ TUITranslateService.t(`TUIGroup.退出群组`) }}
+            {{ TUITranslateService.t(`TUIGroup.退出群组`) }}
-        </li>
+          </li>
-      </ul>
+        </ul>
+      </view>
     </main>
     <ManageMember
       v-if="currentTab === 'member'"
@@ -238,12 +249,15 @@
   import Server from '../server'
   import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus'
   import { IFriendProfile, IGroupMember } from '../../../interface'
+  import { useUI } from '../../../../utils/use-ui'
   import {
     createImGroup,
     deleteImGroup,
     quitImGroup
   } from '../../../../api/tui-kit'
 
+  const { showLoading, hideLoading, showDialog } = useUI()
+
   const TUIGroupServer = Server.getInstance()
   const TUIConstants = TUIGroupServer.constants
 
@@ -676,14 +690,25 @@
   }
 
   const dismissGroup = async (group: any) => {
+    const show = await showDialog('提示', '确定要解散群组吗？')
+    if (!show) {
+      return
+    }
     // await deleteImGroup(group.groupID)
-    await TUIGroupService.dismissGroup(group.groupID)
+    showLoading()
-    enableSampleTaskStatus('dismissGroup')
+    TUIGroupService.dismissGroup(group.groupID)
-    Toast({
+      .then(() => {
-      message: TUITranslateService.t('TUIGroup.群组解散成功'),
+        enableSampleTaskStatus('dismissGroup')
-      type: TOAST_TYPE.SUCCESS
+        hideLoading()
-    })
+        Toast({
-    clearGroupInfo()
+          message: TUITranslateService.t('TUIGroup.群组解散成功'),
+          type: TOAST_TYPE.SUCCESS
+        })
+        clearGroupInfo()
+      })
+      .catch(() => {
+        hideLoading()
+      })
   }
 
   const clearGroupInfo = () => {
@@ -724,9 +749,8 @@
     switch (transferType.value) {
       case 'add':
         try {
-          imMemberResponse = await TUIGroupService.getGroupMemberProfile(
+          imMemberResponse =
-            options
+            await TUIGroupService.getGroupMemberProfile(options)
-          )
           transferList.value = transferList.value.filter(
             (item: any) => item.userID !== imResponse.data[0]?.userID
           )
@@ -752,9 +776,8 @@
         break
       case 'remove':
         try {
-          imResponse = await TUIGroupService.getGroupMemberProfile(
+          imResponse =
-            options
+            await TUIGroupService.getGroupMemberProfile(options)
-          )
           if (imResponse.data.memberList.length === 0) {
             const message = TUITranslateService.t(
               'TUIGroup.该用户不在群组内'
@@ -894,9 +917,24 @@
   }
 
   const quitGroup = async (group: any) => {
+    const show = await showDialog('提示', '确定要退出群组吗？')
+    if (!show) {
+      return
+    }
+    showLoading()
     // await quitImGroup(group.groupID)
-    await TUIGroupService.quitGroup(group.groupID)
+    TUIGroupService.quitGroup(group.groupID)
-    clearGroupInfo()
+      .then(() => {
+        hideLoading()
+        Toast({
+          message: '退出群组成功',
+          type: TOAST_TYPE.SUCCESS
+        })
+        clearGroupInfo()
+      })
+      .catch(() => {
+        hideLoading()
+      })
   }
 
   const back = () => {

TUIKit/components/TUIGroup/manage-group/manage-admin.vue

@@ -1,338 +1,338 @@
 <template>
   <div class="admin-main">
-    <div class="admin-manage">
+    <view class="admin-box">
-      <div class="admin-manage-header">
+      <div class="admin-manage">
-        {{ TUITranslateService.t(`TUIGroup.群管理员`) }}
+        <div class="admin-manage-header">
-      </div>
+          {{ TUITranslateService.t(`TUIGroup.群管理员`) }}
-      <ul class="admin-manage-list">
-        <li
-          v-for="(item, index) in memberAdmin.admin"
-          :key="index"
-          class="admin-manage-list-item"
-        >
-          <div class="item-main">
-            <img
-              class="item-main-avatar"
-              :src="
-                item.avatar ||
-                  'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-              "
-              onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-            >
-          </div>
-          <div class="item-name">
-            {{ item.nick || item.userID }}
-          </div>
-        </li>
-        <li class="admin-manage-list-item">
-          <div
-            class="item-main"
-            @click="addAdmin"
-          >
-            <Icon
-              :file="plusSVG"
-              width="16px"
-              height="16px"
-            />
-          </div>
-        </li>
-        <li class="admin-manage-list-item">
-          <div
-            v-if="memberAdmin.admin.length > 0"
-            class="item-main"
-            @click="removeAdmin"
-          >
-            <Icon
-              :file="minusSVG"
-              width="16px"
-              height="16px"
-            />
-          </div>
-        </li>
-      </ul>
-    </div>
-    <div
-      v-if="isAdminSetMuteTime"
-      class="admin-mute-all"
-    >
-      <div>
-        <div class="admin-mute-all-title">
-          {{ TUITranslateService.t(`TUIGroup.全员禁言`) }}
         </div>
-        <div class="admin-mute-all-content">
+        <ul class="admin-manage-list">
-          {{
+          <li
-            TUITranslateService.t(
+            v-for="(item, index) in memberAdmin.admin"
-              `TUIGroup.全员禁言开启后，只允许群主和管理员发言。`
+            :key="index"
-            )
+            class="admin-manage-list-item"
-          }}
+          >
-        </div>
+            <div class="item-main">
-      </div>
+              <img
-      <Slider
+                class="item-main-avatar"
-        :open="currentGroupAdmin.muteAllMembers"
+                :src="
-        @change="setAllMuteTime"
+                  item.avatar ||
-      />
-    </div>
-    <div
-      v-if="isAdminSetMuteTime"
-      class="admin-mute"
-    >
-      <div class="admin-mute-header">
-        {{ TUITranslateService.t(`TUIGroup.单独禁言人员`) }}
-      </div>
-      <ul class="admin-mute-list">
-        <li
-          v-for="(item, index) in memberAdmin.muteMember"
-          :key="index"
-          class="admin-mute-list-item"
-        >
-          <div class="item-main">
-            <img
-              class="item-main-avatar"
-              :src="
-                item.avatar ||
                   'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-              "
+                "
-              onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
+                onerror="
+                  this.onerror = null
+                  this.src =
+                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+                "
+              />
+            </div>
+            <div class="item-name">
+              {{ item.nick || item.userID }}
+            </div>
+          </li>
+          <li class="admin-manage-list-item">
+            <div class="item-main" @click="addAdmin">
+              <Icon :file="plusSVG" width="16px" height="16px" />
+            </div>
+          </li>
+          <li class="admin-manage-list-item">
+            <div
+              v-if="memberAdmin.admin.length > 0"
+              class="item-main"
+              @click="removeAdmin"
             >
+              <Icon :file="minusSVG" width="16px" height="16px" />
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div v-if="isAdminSetMuteTime" class="admin-mute-all">
+        <div>
+          <div class="admin-mute-all-title">
+            {{ TUITranslateService.t(`TUIGroup.全员禁言`) }}
           </div>
-          <div class="item-name">
+          <div class="admin-mute-all-content">
-            {{ item.nick || item.userID }}
+            {{
+              TUITranslateService.t(
+                `TUIGroup.全员禁言开启后，只允许群主和管理员发言。`
+              )
+            }}
           </div>
-        </li>
+        </div>
-        <li class="admin-mute-list-item">
+        <Slider
-          <div
+          :open="currentGroupAdmin.muteAllMembers"
-            class="item-main"
+          @change="setAllMuteTime"
-            @click="addMute"
+        />
+      </div>
+      <div v-if="isAdminSetMuteTime" class="admin-mute">
+        <div class="admin-mute-header">
+          {{ TUITranslateService.t(`TUIGroup.单独禁言人员`) }}
+        </div>
+        <ul class="admin-mute-list">
+          <li
+            v-for="(item, index) in memberAdmin.muteMember"
+            :key="index"
+            class="admin-mute-list-item"
           >
-            <Icon
+            <div class="item-main">
-              :file="plusSVG"
+              <img
-              width="16px"
+                class="item-main-avatar"
-              height="16px"
+                :src="
-            />
+                  item.avatar ||
-          </div>
+                  'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-        </li>
+                "
-        <li class="admin-mute-list-item">
+                onerror="
-          <div
+                  this.onerror = null
-            v-if="memberAdmin.muteMember.length > 0"
+                  this.src =
-            class="item-main"
+                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-            @click="removeMute"
+                "
-          >
+              />
-            <Icon
+            </div>
-              :file="minusSVG"
+            <div class="item-name">
-              width="16px"
+              {{ item.nick || item.userID }}
-              height="16px"
+            </div>
-            />
+          </li>
-          </div>
+          <li class="admin-mute-list-item">
-        </li>
+            <div class="item-main" @click="addMute">
-      </ul>
+              <Icon :file="plusSVG" width="16px" height="16px" />
-    </div>
+            </div>
+          </li>
+          <li class="admin-mute-list-item">
+            <div
+              v-if="memberAdmin.muteMember.length > 0"
+              class="item-main"
+              @click="removeMute"
+            >
+              <Icon :file="minusSVG" width="16px" height="16px" />
+            </div>
+          </li>
+        </ul>
+      </div>
+    </view>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {
+  import {
-  TUITranslateService,
+    TUITranslateService,
-  IGroupModel,
+    IGroupModel
-} from '@tencentcloud/chat-uikit-engine-lite';
+  } from '@tencentcloud/chat-uikit-engine-lite'
-import { watchEffect, ref } from '../../../adapter-vue';
+  import { watchEffect, ref } from '../../../adapter-vue'
-import Slider from '../../common/Slider/index.vue';
+  import Slider from '../../common/Slider/index.vue'
-import Icon from '../../common/Icon.vue';
+  import Icon from '../../common/Icon.vue'
-import plusSVG from '../../../assets/icon/plus.svg';
+  import plusSVG from '../../../assets/icon/plus.svg'
-import minusSVG from '../../../assets/icon/minus.svg';
+  import minusSVG from '../../../assets/icon/minus.svg'
-import { IGroupMember } from '../../../interface';
+  import { IGroupMember } from '../../../interface'
 
-const props = defineProps({
+  const props = defineProps({
-  member: {
+    member: {
-    type: Object,
+      type: Object,
-    default: () => {},
+      default: () => {}
-  },
+    },
-  isSetMuteTime: {
+    isSetMuteTime: {
-    type: Boolean,
+      type: Boolean,
-    default: () => false,
+      default: () => false
-  },
+    },
-  currentGroup: {
+    currentGroup: {
-    type: Object,
+      type: Object,
-    default: () => {},
+      default: () => {}
-  },
+    }
-});
+  })
 
-const isAdminSetMuteTime = ref(false);
+  const isAdminSetMuteTime = ref(false)
-const memberAdmin = ref({
+  const memberAdmin = ref({
-  admin: [] as Array<IGroupMember>,
+    admin: [] as Array<IGroupMember>,
-  member: [] as Array<IGroupMember>,
+    member: [] as Array<IGroupMember>,
-  muteMember: [] as Array<IGroupMember>,
+    muteMember: [] as Array<IGroupMember>
-});
+  })
-const currentGroupAdmin = ref<IGroupModel>();
+  const currentGroupAdmin = ref<IGroupModel>()
 
-watchEffect(() => {
+  watchEffect(() => {
-  memberAdmin.value = props.member as {
+    memberAdmin.value = props.member as {
-    admin: Array<IGroupMember>;
+      admin: Array<IGroupMember>
-    member: Array<IGroupMember>;
+      member: Array<IGroupMember>
-    muteMember: Array<IGroupMember>;
+      muteMember: Array<IGroupMember>
-  };
+    }
-  isAdminSetMuteTime.value = props.isSetMuteTime;
+    isAdminSetMuteTime.value = props.isSetMuteTime
-  currentGroupAdmin.value = props.currentGroup;
+    currentGroupAdmin.value = props.currentGroup
-});
+  })
 
-const emits = defineEmits([
+  const emits = defineEmits([
-  'addAdmin',
+    'addAdmin',
-  'removeAdmin',
+    'removeAdmin',
-  'setAllMuteTime',
+    'setAllMuteTime',
-  'addMute',
+    'addMute',
-  'removeMute',
+    'removeMute',
-  'close',
+    'close'
-]);
+  ])
 
-const addAdmin = () => {
+  const addAdmin = () => {
-  emits('addAdmin');
+    emits('addAdmin')
-};
+  }
 
-const removeAdmin = () => {
+  const removeAdmin = () => {
-  emits('removeAdmin');
+    emits('removeAdmin')
-};
+  }
 
-const setAllMuteTime = (value: boolean) => {
+  const setAllMuteTime = (value: boolean) => {
-  emits('setAllMuteTime', value);
+    emits('setAllMuteTime', value)
-};
+  }
 
-const addMute = () => {
+  const addMute = () => {
-  emits('addMute');
+    emits('addMute')
-};
+  }
 
-const removeMute = () => {
+  const removeMute = () => {
-  emits('removeMute');
+    emits('removeMute')
-};
+  }
 </script>
 
 <style lang="scss" scoped>
-@import "../../../assets/styles/common";
+  @import '../../../assets/styles/common';
 
-.admin {
+  .admin {
-  width: 100%;
-  overflow: hidden;
-
-  &-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding: 10px;
-
-    &-left {
-      font-family: "PingFang SC", sans-serif;
-      font-size: 18px;
-      font-weight: 500;
-      line-height: 50px;
-      letter-spacing: 0;
-      text-align: left;
-    }
-
-    &-close {
-      font-family: "PingFang SC", sans-serif;
-      font-size: 16px;
-      font-weight: 400;
-      line-height: 48px;
-      letter-spacing: 0;
-      text-align: left;
-      color: #3370ff;
-    }
-  }
-
-  &-main {
     width: 100%;
     overflow: hidden;
 
-    .admin-manage {
+    &-header {
-      border-bottom: 10px solid #f4f5f9;
-    }
-
-    .admin-manage,
-    .admin-mute {
-      padding: 10px;
-      width: calc(100% - 20px);
-      overflow: hidden;
-
-      &-header {
-        padding-left: 10px;
-        font-family: "PingFang SC", sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 20px;
-        letter-spacing: 0;
-        text-align: left;
-      }
-
-      &-list {
-        display: flex;
-        width: 100%;
-        overflow: hidden;
-        flex-wrap: wrap;
-
-        &-item {
-          flex: 0 0 36px;
-          display: flex;
-          flex-direction: column;
-          padding: 10px;
-
-          .item-main {
-            width: 36px;
-            height: 36px;
-            border-radius: 4px;
-            font-size: 12px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background: #f4f5f9;
-            color: #000;
-
-            &-avatar {
-              width: 36px;
-              height: 36px;
-              overflow: hidden;
-              border-radius: 4px;
-            }
-          }
-
-          .item-name {
-            text-align: center;
-            max-width: 36px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-        }
-      }
-    }
-
-    .admin-mute-all {
-      margin: 0 10px;
-      padding: 20px 0;
-      border-bottom: 1px solid #e8e8e9;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
-      align-items: center;
+      padding: 10px;
 
-      &-title {
+      &-left {
-        padding-left: 10px;
+        font-family: 'PingFang SC', sans-serif;
-        font-family: "PingFang SC", sans-serif;
+        font-size: 18px;
-        font-size: 14px;
+        font-weight: 500;
-        font-weight: 400;
+        line-height: 50px;
-        line-height: 20px;
         letter-spacing: 0;
         text-align: left;
       }
 
-      &-content {
+      &-close {
-        color: #999;
+        font-family: 'PingFang SC', sans-serif;
-        padding-left: 10px;
+        font-size: 16px;
-        font-family: "PingFang SC", sans-serif;
-        font-size: 12px;
         font-weight: 400;
-        line-height: 17px;
+        line-height: 48px;
         letter-spacing: 0;
         text-align: left;
+        color: #3370ff;
+      }
+    }
+
+    &-main {
+      width: 100%;
+      overflow: hidden;
+
+      .admin-manage {
+        border-bottom: 10px solid #f4f5f9;
+      }
+
+      .admin-manage,
+      .admin-mute {
+        padding: 10px;
+        width: calc(100% - 20px);
+        overflow: hidden;
+
+        &-header {
+          padding-left: 10px;
+          font-family: 'PingFang SC', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+          letter-spacing: 0;
+          text-align: left;
+        }
+
+        &-list {
+          display: flex;
+          width: 100%;
+          overflow: hidden;
+          flex-wrap: wrap;
+
+          &-item {
+            flex: 0 0 36px;
+            display: flex;
+            flex-direction: column;
+            padding: 10px;
+
+            .item-main {
+              width: 36px;
+              height: 36px;
+              border-radius: 4px;
+              font-size: 12px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              background: #f4f5f9;
+              color: #000;
+
+              &-avatar {
+                width: 36px;
+                height: 36px;
+                overflow: hidden;
+                border-radius: 4px;
+              }
+            }
+
+            .item-name {
+              text-align: center;
+              max-width: 36px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+        }
+      }
+
+      .admin-mute-all {
+        margin: 0 10px;
+        padding: 20px 0;
+        border-bottom: 1px solid #e8e8e9;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
+        &-title {
+          padding-left: 10px;
+          font-family: 'PingFang SC', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+          letter-spacing: 0;
+          text-align: left;
+        }
+
+        &-content {
+          color: #999;
+          padding-left: 10px;
+          font-family: 'PingFang SC', sans-serif;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 17px;
+          letter-spacing: 0;
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  .admin-main {
+    background: #f4f4f4;
+    .admin-box {
+      padding: 32rpx 24rpx;
+      .admin-manage,
+      .admin-mute-all,
+      .admin-mute {
+        background: #ffffff;
+        border-bottom: 0;
+        border-radius: 16rpx;
+      }
+
+      .admin-mute-all {
+        margin: 20rpx 0;
       }
     }
   }
-}
 </style>

TUIKit/components/TUIGroup/manage-group/manage-name.vue

@@ -143,6 +143,8 @@
   @import '../../../assets/styles/common';
 
   .group-name {
+    background: #ffffff;
+    border-radius: 16rpx;
     padding: 14px 20px;
     font-weight: 400;
     font-size: 14px;

TUIKit/components/TUIGroup/manage-group/style/index.scss

@@ -3,7 +3,6 @@
 @import './web';
 @import './h5';
 
-
 .icon-close {
   display: inline-block;
   width: 24px;
@@ -14,9 +13,9 @@
 
 .icon-close::before,
 .icon-close::after {
-  content: "";
+  content: '';
   position: absolute;
-  background-color: #8F959E;
+  background-color: #8f959e;
   height: 16px;
   width: 2px;
   top: 50%;
@@ -37,3 +36,17 @@
   position: absolute;
   left: 20px;
 }
+
+.main {
+  background: #f4f4f4;
+  .main-box {
+    padding: 32rpx 24rpx;
+    .space-top {
+      border-top: 0 !important;
+      background: #ffffff;
+      border-radius: 16rpx !important;
+      margin-top: 20rpx;
+      overflow: hidden;
+    }
+  }
+}

TUIKit/utils/enableSampleTaskStatus.ts

@@ -1,8 +1,8 @@
-import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine-lite";
+import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine-lite'
 export function enableSampleTaskStatus(taskKey: string) {
-  const tasks = TUIStore.getData(StoreName.APP, "tasks");
+  const tasks = TUIStore.getData(StoreName.APP, 'tasks')
   if (taskKey in tasks && !tasks[taskKey]) {
-    tasks[taskKey] = true;
+    tasks[taskKey] = true
-    TUIStore.update(StoreName.APP, "tasks", tasks);
+    TUIStore.update(StoreName.APP, 'tasks', tasks)
   }
 }