优化UI，修复群BUG

2026-01-24 16:49:47 +08:00
parent c508b1fcb4
commit a55a1593bb
11 changed files with 555 additions and 445 deletions
--- a/TUIKit/components/TUIGroup/manage-group/index.vue
+++ b/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
-        :isAuthor="isOwner || isAdmin || isWorkGroup"
-        :data="currentGroup"
-        @update="updateProfile"
-      />
-      <div class="user-info space-top">
-        <header class="user-info-header" @click="setCurrentTab('member')">
-          <label class="user-info-header-left">
-            {{ TUITranslateService.t(`TUIGroup.群成员`) }}
-          </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"
+      <view class="main-box">
+        <ManageName
+          :isAuthor="isOwner || isAdmin || isWorkGroup"
+          :data="currentGroup"
+          @update="updateProfile"
+        />
+        <div class="user-info space-top">
+          <header
+            class="user-info-header"
+            @click="setCurrentTab('member')"
          >
-            <dt
-              class="user-info-list-item-main"
-              @click="handleMemberProfileShow(item)"
+            <label class="user-info-header-left">
+              {{ TUITranslateService.t(`TUIGroup.群成员`) }}
+            </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
-                useSkeletonAnimation
-                :url="
-                  item.avatar ||
-                  'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-                "
-                size="40px"
-              />
-            </dt>
-            <dd class="user-info-list-item-info">
-              {{ item.nick || item.userID }}
-            </dd>
-          </dl>
-          <dl v-if="isShowAddMember" class="user-info-list-item">
+              <dt
+                class="user-info-list-item-main"
+                @click="handleMemberProfileShow(item)"
+              >
+                <Avatar
+                  useSkeletonAnimation
+                  :url="
+                    item.avatar ||
+                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+                  "
+                  size="40px"
+                />
+              </dt>
+              <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>
-        </ol>
-        <div
-          v-if="groupMemberList.length > showUserNum"
-          class="view-more"
-          @click="setCurrentTab('member')"
-        >
-          <p>{{ TUITranslateService.t(`TUIGroup.查看更多群成员`) }}</p>
-          <Icon :file="rightIcon" size="14px" />
+          </dl> -->
+          </ol>
+          <div
+            v-if="groupMemberList.length > showUserNum"
+            class="view-more"
+            @click="setCurrentTab('member')"
+          >
+            <p>{{ TUITranslateService.t(`TUIGroup.查看更多群成员`) }}</p>
+            <Icon :file="rightIcon" size="14px" />
+          </div>
        </div>
-      </div>
-      <ul class="content list space-top" @click="editLableName = ''">
-        <li class="list-item" @click="setCurrentTab('notification')">
-          <aside class="aside">
+        <ul class="content list space-top" @click="editLableName = ''">
+          <li class="list-item" @click="setCurrentTab('notification')">
+            <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">
-              {{ 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.群管理`) }}
-          </label>
-          <Icon :file="rightIcon" />
-        </li>
-        <li class="list-item">
-          <label class="label">
-            {{ TUITranslateService.t(`TUIGroup.群类型`) }}
-          </label>
-          <span class="span">
-            {{
-              TUITranslateService.t(
-                `TUIGroup.${typeName[currentGroup.type]}`
-              )
-            }}
-          </span>
-        </li>
-        <li class="list-item">
-          <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
+            <Icon :file="rightIcon" />
+          </li>
+          <li class="list-item">
+            <label class="label">
+              {{ TUITranslateService.t(`TUIGroup.群类型`) }}
+            </label>
+            <span class="span">
+              {{
+                TUITranslateService.t(
+                  `TUIGroup.${typeName[currentGroup.type]}`
+                )
+              }}
+            </span>
+          </li>
+          <li class="list-item">
+            <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
-          v-if="canIDissmissGroup"
-          class="list-item"
-          @click.stop="dismissGroup(currentGroup)"
-        >
-          {{ TUITranslateService.t(`TUIGroup.解散群聊`) }}
-        </li>
-        <li
-          v-else
-          class="list-item"
-          @click.stop="quitGroup(currentGroup)"
-        >
-          {{ TUITranslateService.t(`TUIGroup.退出群组`) }}
-        </li>
-      </ul>
+          <li
+            v-if="canIDissmissGroup"
+            class="list-item"
+            @click.stop="dismissGroup(currentGroup)"
+          >
+            {{ TUITranslateService.t(`TUIGroup.解散群聊`) }}
+          </li>
+          <li
+            v-else
+            class="list-item"
+            @click.stop="quitGroup(currentGroup)"
+          >
+            {{ TUITranslateService.t(`TUIGroup.退出群组`) }}
+          </li>
+        </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)
-    enableSampleTaskStatus('dismissGroup')
-    Toast({
-      message: TUITranslateService.t('TUIGroup.群组解散成功'),
-      type: TOAST_TYPE.SUCCESS
-    })
-    clearGroupInfo()
+    showLoading()
+    TUIGroupService.dismissGroup(group.groupID)
+      .then(() => {
+        enableSampleTaskStatus('dismissGroup')
+        hideLoading()
+        Toast({
+          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(
-            options
-          )
+          imMemberResponse =
+            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(
-            options
-          )
+          imResponse =
+            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)
-    clearGroupInfo()
+    TUIGroupService.quitGroup(group.groupID)
+      .then(() => {
+        hideLoading()
+        Toast({
+          message: '退出群组成功',
+          type: TOAST_TYPE.SUCCESS
+        })
+        clearGroupInfo()
+      })
+      .catch(() => {
+        hideLoading()
+      })
  }

  const back = () => {
--- a/TUIKit/components/TUIGroup/manage-group/manage-admin.vue
+++ b/TUIKit/components/TUIGroup/manage-group/manage-admin.vue
@@ -1,338 +1,338 @@
 <template>
  <div class="admin-main">
-    <div class="admin-manage">
-      <div class="admin-manage-header">
-        {{ TUITranslateService.t(`TUIGroup.群管理员`) }}
-      </div>
-      <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.全员禁言`) }}
+    <view class="admin-box">
+      <div class="admin-manage">
+        <div class="admin-manage-header">
+          {{ TUITranslateService.t(`TUIGroup.群管理员`) }}
        </div>
-        <div class="admin-mute-all-content">
-          {{
-            TUITranslateService.t(
-              `TUIGroup.全员禁言开启后，只允许群主和管理员发言。`
-            )
-          }}
-        </div>
-      </div>
-      <Slider
-        :open="currentGroupAdmin.muteAllMembers"
-        @change="setAllMuteTime"
-      />
-    </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 ||
+        <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'"
+                "
+                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">
-            {{ item.nick || item.userID }}
+          <div class="admin-mute-all-content">
+            {{
+              TUITranslateService.t(
+                `TUIGroup.全员禁言开启后，只允许群主和管理员发言。`
+              )
+            }}
          </div>
-        </li>
-        <li class="admin-mute-list-item">
-          <div
-            class="item-main"
-            @click="addMute"
+        </div>
+        <Slider
+          :open="currentGroupAdmin.muteAllMembers"
+          @change="setAllMuteTime"
+        />
+      </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
-              :file="plusSVG"
-              width="16px"
-              height="16px"
-            />
-          </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>
+            <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-mute-list-item">
+            <div class="item-main" @click="addMute">
+              <Icon :file="plusSVG" width="16px" height="16px" />
+            </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 {
-  TUITranslateService,
-  IGroupModel,
-} from '@tencentcloud/chat-uikit-engine-lite';
-import { watchEffect, ref } from '../../../adapter-vue';
-import Slider from '../../common/Slider/index.vue';
-import Icon from '../../common/Icon.vue';
-import plusSVG from '../../../assets/icon/plus.svg';
-import minusSVG from '../../../assets/icon/minus.svg';
-import { IGroupMember } from '../../../interface';
+  import {
+    TUITranslateService,
+    IGroupModel
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import { watchEffect, ref } from '../../../adapter-vue'
+  import Slider from '../../common/Slider/index.vue'
+  import Icon from '../../common/Icon.vue'
+  import plusSVG from '../../../assets/icon/plus.svg'
+  import minusSVG from '../../../assets/icon/minus.svg'
+  import { IGroupMember } from '../../../interface'

-const props = defineProps({
-  member: {
-    type: Object,
-    default: () => {},
-  },
-  isSetMuteTime: {
-    type: Boolean,
-    default: () => false,
-  },
-  currentGroup: {
-    type: Object,
-    default: () => {},
-  },
-});
+  const props = defineProps({
+    member: {
+      type: Object,
+      default: () => {}
+    },
+    isSetMuteTime: {
+      type: Boolean,
+      default: () => false
+    },
+    currentGroup: {
+      type: Object,
+      default: () => {}
+    }
+  })

-const isAdminSetMuteTime = ref(false);
-const memberAdmin = ref({
-  admin: [] as Array<IGroupMember>,
-  member: [] as Array<IGroupMember>,
-  muteMember: [] as Array<IGroupMember>,
-});
-const currentGroupAdmin = ref<IGroupModel>();
+  const isAdminSetMuteTime = ref(false)
+  const memberAdmin = ref({
+    admin: [] as Array<IGroupMember>,
+    member: [] as Array<IGroupMember>,
+    muteMember: [] as Array<IGroupMember>
+  })
+  const currentGroupAdmin = ref<IGroupModel>()

-watchEffect(() => {
-  memberAdmin.value = props.member as {
-    admin: Array<IGroupMember>;
-    member: Array<IGroupMember>;
-    muteMember: Array<IGroupMember>;
-  };
-  isAdminSetMuteTime.value = props.isSetMuteTime;
-  currentGroupAdmin.value = props.currentGroup;
-});
+  watchEffect(() => {
+    memberAdmin.value = props.member as {
+      admin: Array<IGroupMember>
+      member: Array<IGroupMember>
+      muteMember: Array<IGroupMember>
+    }
+    isAdminSetMuteTime.value = props.isSetMuteTime
+    currentGroupAdmin.value = props.currentGroup
+  })

-const emits = defineEmits([
-  'addAdmin',
-  'removeAdmin',
-  'setAllMuteTime',
-  'addMute',
-  'removeMute',
-  'close',
-]);
+  const emits = defineEmits([
+    'addAdmin',
+    'removeAdmin',
+    'setAllMuteTime',
+    'addMute',
+    'removeMute',
+    'close'
+  ])

-const addAdmin = () => {
-  emits('addAdmin');
-};
+  const addAdmin = () => {
+    emits('addAdmin')
+  }

-const removeAdmin = () => {
-  emits('removeAdmin');
-};
+  const removeAdmin = () => {
+    emits('removeAdmin')
+  }

-const setAllMuteTime = (value: boolean) => {
-  emits('setAllMuteTime', value);
-};
+  const setAllMuteTime = (value: boolean) => {
+    emits('setAllMuteTime', value)
+  }

-const addMute = () => {
-  emits('addMute');
-};
+  const addMute = () => {
+    emits('addMute')
+  }

-const removeMute = () => {
-  emits('removeMute');
-};
+  const removeMute = () => {
+    emits('removeMute')
+  }
 </script>

 <style lang="scss" scoped>
-@import "../../../assets/styles/common";
+  @import '../../../assets/styles/common';

-.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 {
+  .admin {
    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;
+    &-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
-      align-items: center;
+      padding: 10px;

-      &-title {
-        padding-left: 10px;
-        font-family: "PingFang SC", sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 20px;
+      &-left {
+        font-family: 'PingFang SC', sans-serif;
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 50px;
        letter-spacing: 0;
        text-align: left;
      }

-      &-content {
-        color: #999;
-        padding-left: 10px;
-        font-family: "PingFang SC", sans-serif;
-        font-size: 12px;
+      &-close {
+        font-family: 'PingFang SC', sans-serif;
+        font-size: 16px;
        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>
--- a/TUIKit/components/TUIGroup/manage-group/manage-name.vue
+++ b/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;
--- a/TUIKit/components/TUIGroup/manage-group/style/index.scss
+++ b/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;
+    }
+  }
+}