chat-pc/src/components/group/GroupPanel.vue

<script lang="ts" setup>
import { reactive, computed, watch, ref } from 'vue'
import { NEmpty, NPopover, NPopconfirm, NSwitch, NIcon, NInput, NScrollbar } from 'naive-ui'
import { useUserStore, useTalkStore, useDialogueStore } from '@/store'
import GroupLaunch from './GroupLaunch.vue'
import GroupManage from './manage/index.vue'
import { Comment, Search, Close, Plus, Down, Up } from '@icon-park/vue-next'
import {
  ServeGroupDetail,
  ServeGetGroupMembers,
  ServeSecedeGroup,
  ServeUpdateGroupCard,
  ServeGetGroupNotices,
  ServeEditGroup
} from '@/api/group'
import { useInject } from '@/hooks'
import customModal from '@/components/common/customModal.vue'
import avatarModule from '@/components/avatar-module/index.vue'
import UserCardModal from '@/components/user/UserCardModal.vue'
import { ServeEmptyMessage } from '@/api/chat'
import { parseTime } from '@/utils/datetime'

const userStore = useUserStore()
const talkStore = useTalkStore()
const dialogueStore = useDialogueStore()
const { showUserInfoModal } = useInject()

const emit = defineEmits([
  'close',
  'to-talk',
  'handleSearchRecordByConditionModalShow',
  'handleGroupNoticeModalShow'
])
const props = defineProps({
  gid: {
    type: Number,
    default: 0
  },
  talkType: {
    // 1: 单聊， 2: 群聊
    type: Number,
    default: 0
  },
  groupNoticeContentChange: {
    // 群公告内容变化
    type: String,
    default: ''
  }
})

watch(props, () => {
  if (props.talkType === 2) {
    loadDetail()
    loadMembers()
    getGroupNotices()
  }
})

const editCardPopover = ref(false)
const isShowGroup = ref(false)
const isShowManage = ref(false)
const state = reactive({
  keywords: '',
  detail: {
    avatar: '',
    name: '',
    profile: '',
    visit_card: '',
    notice: '',
    group_type: 0
  },
  remark: '',
  isShowModal: false, //是否显示提示模态框
  customModalStyle: {
    width: '724px',
    height: '314px'
  }, //自定义模态框样式
  chatSettingOperateHint: '', // 提示信息
  chatSettingOperateSubHint: '', // 次要提示信息
  actionBtns: {
    confirmBtn: {
      doLoading: true
    },
    cancelBtn: {
      hideModal: true
    }
  }, // 操作按钮
  showAllMember: false, // 是否显示全部成员
  openGroupMemberSearch: false, //是否开启群成员搜索
  isShowUserCardModal: false, //是否显示成员信息模态框
  userInfo: {}, //当前打开的成员信息卡信息
  groupNoticeInfo: {
    id: 0,
    avatar: '',
    updater_name: '',
    updated_at: '',
    content: ''
  }, //群公告信息
  editGroupName: false, //是否编辑群名称
  editGroupNameValue: '', //编辑中的群名称
  chatSettingOperateType: '' //聊天设置操作类型
})

const members = ref<any[]>([])

const groupMemberList = computed<any[]>(() => {
  if (state.keywords) {
    return members.value.filter((item: any) => {
      return (
        item.nickname.match(state.keywords) != null || item.remark.match(state.keywords) != null
      )
    })
  }

  return members.value
})

const isLeader = computed(() => {
  return members.value.some((item: any) => {
    return item.user_id == userStore.uid && item.leader >= 1
  })
})

const isAdmin = computed(() => {
  return members.value.some((item: any) => {
    return item.user_id == userStore.uid && item.leader == 2
  })
})

const onShowManage = (vallue: any) => {
  isShowManage.value = vallue
}

const onGroupCallBack = () => {}

const onToInfo = (item: any) => {
  showUserInfoModal(item.user_id)
}

/**
 * 加载群信息
 */
function loadDetail() {
  ServeGroupDetail({
    group_id: props.gid
  }).then((res) => {
    if (res.code == 200) {
      let result = res.data
      state.detail.avatar = result.avatar
      state.detail.name = result.group_name
      state.detail.profile = result.profile
      state.detail.visit_card = result.visit_card
      state.detail.group_type = result.group_type
      state.remark = result.visit_card

      if (result.notice) {
        state.detail.notice = result.notice
      }
    }
  })
}

/**
 * 加载成员列表
 */
function loadMembers() {
  ServeGetGroupMembers({
    group_id: props.gid
  }).then((res) => {
    if (res.code == 200) {
      members.value = res.data.sortItems || []
    }
  })
}

const onClose = () => {
  emit('close')
}

const onSignOut = () => {
  ServeSecedeGroup({
    group_id: props.gid
  }).then((res) => {
    if (res.code == 200) {
      window['$message'].success('已退出群聊')
      onClose()
    } else {
      window['$message'].error(res.message)
    }
  })
}

const onChangeRemark = () => {
  ServeUpdateGroupCard({
    group_id: props.gid,
    visit_card: state.remark
  }).then(({ code, message }) => {
    if (code == 200) {
      // @ts-ignore
      editCardPopover.value.setShow(false)
      state.detail.visit_card = state.remark
      window['$message'].success('已更新群名片')

      loadMembers()
    } else {
      window['$message'].error(message)
    }
  })
}

// 处理模态框的确认
const handleModalConfirm = (closeLoading) => {
  if (state.chatSettingOperateType == 'clear') {
    //清空聊天记录
    ServeEmptyMessage({
      talk_type: props.talkType,
      receiver_id: props.gid
    })
      .then((res) => {
        closeLoading()
        state.isShowModal = false
        if (res.code == 200) {
          window['$message'].success('聊天记录清空成功')
          //热更新清除会话记录及会话列表中的最近消息展示
          dialogueStore.clearDialogueRecord()
          useTalkStore().updateItem({
            index_name: props.talkType + '_' + props.gid,
            msg_text: '...',
            updated_at: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
          })
        } else {
          window['$message'].error(res.message)
        }
      })
      .catch((err) => {
        closeLoading()
        window['$message'].error(err.message)
      })
  }
}

//显示聊天设置操作提示模态框
const showChatSettingOperateModal = (type: string) => {
  state.isShowModal = true
  state.chatSettingOperateType = type
  switch (type) {
    case 'clear':
      state.chatSettingOperateHint = '确定清空聊天记录'
      state.chatSettingOperateSubHint = ''
      break
    case 'dismiss':
      state.chatSettingOperateHint = '确定解散本群'
      state.chatSettingOperateSubHint = ''
      break
    case 'quit':
      state.chatSettingOperateHint = '确定退出群聊'
      const findAdmin = groupMemberList.value.find((item) => item.leader === 2 || item.leader === 1)
      const isLastAdmin = findAdmin && findAdmin.user_id === userStore.uid
      if (isLastAdmin) {
        state.chatSettingOperateSubHint = '退出后，本群将被解散'
      } else {
        state.chatSettingOperateSubHint = '退出后，聊天记录将被清空'
      }
      break
  }
}

//点击显示查找聊天记录模态框
const showSearchRecordByConditionModal = () => {
  emit('handleSearchRecordByConditionModalShow', true)
}

//根据群类型返回群类型文本
const groupTypeText = computed(() => {
  let groupTypeText_ = ''
  switch (state.detail.group_type) {
    case 1:
      groupTypeText_ = '普通群'
      break
    case 2:
      groupTypeText_ = '部门群'
      break
    case 3:
      groupTypeText_ = '项目群'
      break
    case 4:
      groupTypeText_ = '公司群'
  }
  return groupTypeText_
})

//取消搜索群成员
const cancelSearch = () => {
  state.openGroupMemberSearch = false
  state.keywords = ''
}

//点击显示成员信息
const showMemberInfo = (memberItem: any) => {
  state.userInfo = memberItem
  state.isShowUserCardModal = true
}

//点击显示群公告模态框
const showGroupNoticeModal = () => {
  emit('handleGroupNoticeModalShow', isAdmin.value || isLeader.value)
}

//获取群公告列表
const getGroupNotices = () => {
  ServeGetGroupNotices({
    group_id: props.gid
  }).then((res) => {
    console.log(res)
    if (res.code == 200) {
      if (res?.data?.items[0]?.id) {
        state.groupNoticeInfo = res.data.items[0]
      } else {
        state.groupNoticeInfo = {
          id: 0,
          avatar: '',
          updater_name: '',
          updated_at: '',
          content: ''
        }
      }
    } else {
      window['$message'].warning(res.msg)
    }
  })
}

if (props.talkType === 2) {
  loadDetail()
  loadMembers()
  getGroupNotices()
}

//点击编辑群名称
const handleEditGroupName = () => {
  state.editGroupName = true
  state.editGroupNameValue = state.detail.name
}

//取消编辑群名称
const handleEditGroupNameCancel = () => {
  state.editGroupName = false
  state.editGroupNameValue = ''
}

//确认修改群名称
const handleEditGroupNameConfirm = () => {
  if (!state.editGroupNameValue.trim()) {
    window['$message'].warning('群名称不能为空')
    return
  }
  ServeEditGroup({
    group_id: props.gid,
    group_name: state.editGroupNameValue,
    avatar: state.detail.avatar,
    profile: state.detail.profile
  }).then((res) => {
    if (res.code == 200) {
      window['$message'].success('群名称修改成功')
      state.detail.name = state.editGroupNameValue
      state.editGroupName = false
      //热更新会话列表中的群名
      talkStore.updateItem({
        index_name: props.talkType + '_' + props.gid,
        name: state.editGroupNameValue
      })
      //热更新会话详情中的群名
      dialogueStore.setTalkInfoPartially({
        username: state.editGroupNameValue
      })
    } else {
      window['$message'].error(res.message)
    }
  })
}
</script>
<template>
  <section class="el-container is-vertical section">
    <header class="el-header header">
      <!-- <div class="left-icon" @click="emit('to-talk')"> -->
      <div class="left-icon" style="cursor: unset;">
        <!-- <n-icon size="21" :component="Comment" /> -->
      </div>
      <div class="center-text">
        <!-- <span>群信息</span> -->
        <span>聊天设置</span>
      </div>
      <div class="right-icon">
        <!-- <n-icon size="21" :component="Close" @click="onClose" /> -->
        <img src="@/assets/image/icon/close-btn-grey.png" alt="" @click="onClose" />
      </div>
    </header>

    <main class="el-main main me-scrollbar me-scrollbar-thumb">
      <div class="info-box" v-if="talkType === 2">
        <div class="b-box" style="margin: 0 0 16px;">
          <div class="block" style="height: 34px;">
            <div class="title">群成员</div>
            <!-- <div class="text">{{ members.length }}人</div> -->
            <img
              v-if="!state.openGroupMemberSearch"
              src="@/assets/image/icon/search-grey.png"
              alt=""
              style="width: 16px; height: 16px; cursor: pointer;"
              @click="state.openGroupMemberSearch = true"
            />
            <div class="group-member-search" v-if="state.openGroupMemberSearch">
              <n-input v-model:value="state.keywords" placeholder="请输入" style="width: 170px;" />
              <span @click="cancelSearch">取消</span>
            </div>
          </div>
          <!-- <div class="describe">群主已开启“新成员入群可查看所有聊天记录</div> -->
          <div style="width: 100%;" :style="{ height: state.openGroupMemberSearch ? '656px' : '' }">
            <n-scrollbar :style="{ maxHeight: state.openGroupMemberSearch ? '656px' : '621px' }">
              <div class="group-member-list">
                <div
                  v-for="(memberItem, memberIndex) in groupMemberList"
                  :key="memberIndex"
                  :class="
                    !state.showAllMember && memberIndex >= 18 && !state.openGroupMemberSearch
                      ? 'group-member-list-each-box'
                      : ''
                  "
                >
                  <div
                    class="group-member-list-each"
                    v-if="
                      state.showAllMember ||
                      (!state.showAllMember && memberIndex < 18 && !state.openGroupMemberSearch) ||
                      state.openGroupMemberSearch
                    "
                    @click="showMemberInfo(memberItem)"
                  >
                    <div class="group-member-list-each-avatar">
                      <avatarModule
                        :mode="1"
                        :avatar="memberItem.avatar"
                        :userName="memberItem.nickname"
                        :groupType="0"
                        :customStyle="{
                          width: '36px',
                          height: '36px'
                        }"
                        :customTextStyle="{
                          fontSize: '12px',
                          fontWeight: 'bold',
                          color: '#fff',
                          lineHeight: '17px'
                        }"
                      ></avatarModule>
                      <span
                        class="group-member-list-each-admin-tag"
                        v-if="memberItem.leader == 2 || memberItem.leader == 1"
                        >管理员</span
                      >
                    </div>
                    <span>{{ memberItem.nickname }}</span>
                  </div>
                </div>
              </div>
            </n-scrollbar>
            <div
              class="group-member-list-more"
              v-if="
                !state.showAllMember && !state.openGroupMemberSearch && groupMemberList.length > 18
              "
              @click="state.showAllMember = true"
            >
              <span>展开更多</span>
              <n-icon :component="Down" />
            </div>
            <div
              class="group-member-list-more"
              v-if="
                state.showAllMember && !state.openGroupMemberSearch && groupMemberList.length > 18
              "
              @click="state.showAllMember = false"
            >
              <span>收起</span>
              <n-icon :component="Up" />
            </div>
            <div
              style="cursor: unset;"
              class="group-member-list-more"
              v-if="groupMemberList.length <= 18 && !state.openGroupMemberSearch"
            >
              <span></span>
            </div>
          </div>
        </div>

        <div class="b-box" :style="{ margin: state.editGroupName ? '-8px 0 -6px' : '16px 0 32px' }">
          <div class="block">
            <div class="title" :style="{ margin: state.editGroupName ? '2px 0 0' : '' }">
              群名称
            </div>
            <div class="group-name-box" v-if="!state.editGroupName">
              <span>{{ state.detail.name }}</span>
              <img
                src="@/assets/image/chatSettings/edit-btn.png"
                alt=""
                v-if="isAdmin || isLeader"
                @click="handleEditGroupName"
              />
            </div>
            <div class="group-name-box" v-if="state.editGroupName">
              <n-input
                v-model:value="state.editGroupNameValue"
                placeholder="请输入"
                style="width: 302px;"
                clearable
              />
              <img
                src="@/assets/image/chatSettings/edit-cancel.png"
                alt=""
                @click="handleEditGroupNameCancel"
              />
              <img
                src="@/assets/image/chatSettings/edit-confirm.png"
                alt=""
                @click="handleEditGroupNameConfirm"
              />
            </div>
          </div>
          <!-- <div class="describe">{{ state.detail.name }}</div> -->
        </div>

        <div class="b-box">
          <div class="block">
            <div class="title">群类型</div>
            <div class="group-name-box">
              <span>{{ groupTypeText }}</span>
            </div>
          </div>
          <!-- <div class="describe">
            {{ '暂无群类型' }}
          </div> -->
        </div>

        <!-- <div class="b-box">
          <div class="block">
            <div class="title">群名片：</div>
            <div class="text">
              <n-popover trigger="click" placement="left" ref="editCardPopover">
                <template #trigger>
                  <n-button type="primary" text> 设置 </n-button>
                </template>

                <template #header> 设置我的群名片 </template>

                <div style="display: flex">
                  <n-input
                    type="text"
                    placeholder="设置我的群名片"
                    maxlength="10"
                    v-model:value="state.remark"
                    @keydown.enter="onChangeRemark"
                  />
                  <n-button type="primary" class="mt-l5" @click="onChangeRemark"> 确定 </n-button>
                </div>
              </n-popover>
            </div>
          </div>
          <div class="describe">{{ state.detail.visit_card || '未设置' }}</div>
        </div> -->
        <!-- <div class="b-box">
          <div class="block">
            <div class="title">群简介：</div>
          </div>
          <div class="describe">
            {{ state.detail.profile ? state.detail.profile : '暂无群简介' }}
          </div>
        </div> -->

        <div class="b-box b-box-bottomBorder" style="padding: 0 0 16px; margin: 32px 0 16px;">
          <div class="block" @click="showGroupNoticeModal" style="cursor: pointer;">
            <div class="title">群公告</div>
            <!-- <div class="text"> -->
            <!-- <n-button type="primary" text> 更多 </n-button> -->
            <img class="icon-right" src="@/assets/image/icon/arrow-right-grey.png" alt="" />
            <!-- </div> -->
          </div>
          <div class="describe">{{ state.groupNoticeInfo?.content || '管理员未设置' }}</div>
        </div>
      </div>

      <div class="info-box">
        <div class="b-box b-box-bottomBorder" style="margin: 16px 0 0; padding: 0 0 16px;">
          <div class="block" @click="showSearchRecordByConditionModal" style="cursor: pointer;">
            <div class="title">查找聊天记录</div>
            <img class="icon-right" src="@/assets/image/icon/arrow-right-grey.png" alt="" />
          </div>
        </div>

        <div class="b-box" style="margin: 16px 0 32px;">
          <div class="block">
            <div class="title">置顶会话</div>
            <n-switch />
          </div>
        </div>

        <div class="b-box" style="margin: 32px 0 20px;">
          <div class="block">
            <div class="title">消息免打扰</div>
            <n-switch />
          </div>
        </div>
      </div>

      <!-- <div class="member-box" v-if="talkType === 2">
        <div class="flex">
          <n-input placeholder="搜索" v-model:value="state.keywords" :clearable="true" round>
            <template #prefix>
              <n-icon :component="Search" />
            </template>
          </n-input>

          <n-button @click="isShowGroup = true" circle class="mt-l15">
            <template #icon>
              <n-icon :component="Plus" color="rgb(165 165 170)" />
            </template>
          </n-button>
        </div>

        <div class="table">
          <div class="theader">
            <div class="avatar"></div>
            <div class="nickname">用户昵称</div>
            <div class="card">群名片</div>
          </div>

          <div class="row pointer" v-for="item in groupMemberList" :key="item.id" @click="onToInfo(item)">
            <div class="avatar">
              <im-avatar :size="20" :src="item.avatar" :username="item.nickname" />
            </div>
            <div class="nickname text-ellipsis">
              <span>{{ item.nickname ? item.nickname : '-' }}</span>
              <span class="badge master" v-show="item.leader === 2">群主</span>
              <span class="badge leader" v-show="item.leader === 1">管理员</span>
            </div>
            <div class="card text-ellipsis grey">
              {{ item.remark || '-' }}
            </div>
          </div>

          <div class="mt-t20 pd-t20" v-if="groupMemberList.length == 0">
            <n-empty size="200" description="暂无相关数据">
              <template #icon>
                <img src="@/assets/image/no-data.svg" alt="" />
              </template>
            </n-empty>
          </div>
        </div>
      </div> -->

      <div class="chat-settings-btns" v-if="talkType === 2">
        <n-button class="btn" type="error" ghost @click="showChatSettingOperateModal('clear')">
          清空聊天记录
        </n-button>
        <n-button
          v-if="
            (isAdmin || isLeader) &&
            (state.detail.group_type === 1 || state.detail.group_type === 3)
          "
          class="btn"
          type="error"
          ghost
          @click="showChatSettingOperateModal('dismiss')"
        >
          解散该群
        </n-button>
        <n-button
          class="btn"
          type="error"
          ghost
          @click="showChatSettingOperateModal('quit')"
          v-if="state.detail.group_type === 1 || state.detail.group_type === 3"
        >
          退出群聊
        </n-button>
      </div>
    </main>

    <footer class="el-footer footer" v-if="talkType === 1">
      <n-button class="btn" type="error" ghost @click="showChatSettingOperateModal('clear')">
        清空聊天记录
      </n-button>
      <!-- <template v-if="!isAdmin">
        <n-popconfirm negative-text="取消" positive-text="确定" @positive-click="onSignOut">
          <template #trigger>
            <n-button class="btn" type="error" ghost> 退出群聊 </n-button>
          </template>
          确定要退出群吗？ 退出后不再接收此群消息！
        </n-popconfirm>
      </template> -->

      <!-- <n-button
        class="btn"
        type="primary"
        text-color="#ffffff"
        v-if="isLeader"
        @click="onShowManage(true)"
      >
        群聊管理
      </n-button> -->
    </footer>
  </section>

  <GroupLaunch
    v-if="isShowGroup"
    :gid="gid"
    @close="isShowGroup = false"
    @on-submit="onGroupCallBack"
  />

  <GroupManage v-if="isShowManage" :gid="gid" @close="onShowManage(false)" />

  <customModal
    v-model:show="state.isShowModal"
    title="提示"
    :style="state.customModalStyle"
    :closable="false"
    @confirm="handleModalConfirm"
    :actionBtns="state.actionBtns"
  >
    <template #content>
      <div class="custom-modal-content">
        <text>{{ state.chatSettingOperateHint }}</text>
        <text style="font-size: 16px; color: #999999; margin: 0; line-height: 22px;">{{
          state.chatSettingOperateSubHint
        }}</text>
      </div>
    </template>
  </customModal>

  <UserCardModal
    v-model:show="state.isShowUserCardModal"
    v-model:uid="(state.userInfo as any).user_id"
    :euid="(state.userInfo as any).erp_user_id"
  />
</template>
<style lang="less" scoped>
.section {
  width: 100%;
  height: 100%;

  .header {
    width: calc(100% - 40px);
    height: 60px;
    margin: 0 20px;
    box-sizing: border-box;
    border-bottom: 2px solid #efeff2;

    display: flex;
    align-items: center;
    justify-content: center;

    > div {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .center-text {
      flex: auto;
      font-weight: 600;
      font-size: 16px;
    }

    .left-icon,
    .right-icon {
      width: 30px;
      height: 100%;
      flex-shrink: 0;
      cursor: pointer;
      img {
        width: 30px;
        height: 30px;
      }
    }
  }

  .main {
    padding: 7px 20px 15px;

    .info-box {
      .b-box {
        display: flex;
        align-items: center;
        // min-height: 30px;
        margin: 32px 0;
        flex-direction: column;

        &:first-child {
          margin-top: 0;
        }

        .block {
          width: 100%;
          // height: 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            // height: 100%;
            // line-height: 30px;
            // flex: auto;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 14px;
            line-height: 20px;
            color: #191919;
            font-weight: bold;
          }

          .group-name-box {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            gap: 0 10px;

            span {
              line-height: 20px;
              font-size: 14px;
              color: #999999;
              font-weight: 400;
            }

            img {
              width: 16px;
              height: 16px;
              cursor: pointer;
            }
          }

          .text {
            // height: 100%;
            // line-height: 30px;
            // width: 30%;
            text-align: right;
          }

          .icon-right {
            width: 5px;
            height: 9px;
          }

          .group-member-search {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;

            span {
              font-size: 14px;
              width: 28px;
              display: inline-block;
              line-height: 20px;
              color: #46299d;
              font-weight: 400;
              cursor: pointer;
            }
          }
        }

        .describe {
          width: 100%;
          // min-height: 24px;
          // line-height: 24px;
          // font-size: 13px;
          // color: #b1b1b1;
          // font-weight: 300;
          overflow: hidden;
          word-break: break-word;
          font-size: 14px;
          line-height: 20px;
          color: #999999;
          margin: 10px 0 0;
        }

        .group-member-list {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          flex-wrap: wrap;
          gap: 16px 24px;
          padding: 7px 0 0;
          width: 100%;
          box-sizing: border-box;

          .group-member-list-each {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            cursor: pointer;

            .group-member-list-each-avatar {
              position: relative;
              .group-member-list-each-admin-tag {
                font-size: 8px;
                font-weight: 400;
                line-height: 11px;
                color: #fff;
                background-color: #cf3050;
                border-radius: 8px;
                padding: 0px 6px;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 36px;
                box-sizing: border-box;
              }
            }

            span {
              font-size: 12px;
              font-weight: 400;
              line-height: 17px;
              color: #999999;
              width: 48px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              display: block;
              text-align: center;
            }
          }
          .group-member-list-each-box:nth-child(n + 19) {
            display: none;
          }
        }
        .group-member-list-more {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          border-bottom: 1px solid #f0f0f2;
          padding: 16px 0;
          span {
            font-size: 14px;
            line-height: 20px;
            color: #747474;
            font-weight: 400;
            margin: 0 10px 0 0;
            display: inline-block;
          }
        }
        .group-member-list-more:hover {
          span {
            color: #46299d;
          }
        }
      }
      .b-box-bottomBorder {
        border-bottom: 1px solid #f0f0f2;
      }
    }

    .member-box {
      min-height: 180px;
      padding: 20px 15px;
      margin-bottom: 20px;
      border: 1px solid var(--border-color);
      border-radius: 10px;

      .table {
        margin-top: 15px;
        .theader {
          height: 36px;
          border-bottom: 1px solid var(--border-color);
          margin-bottom: 15px;
        }

        .row {
          height: 30px;
          margin: 3px 0;
          &:hover {
            .nickname {
              color: #1890ff;
            }
          }
        }

        .theader,
        .row {
          display: flex;
          align-items: center;
          justify-content: center;

          > div {
            height: 30px;
            display: flex;
            align-items: center;
            font-size: 13px;
          }

          .avatar {
            width: 30px;
            justify-content: flex-start;
          }

          .nickname {
            flex: auto;
          }

          .card {
            width: 100px;
            padding-right: 8px;
            justify-content: flex-end;

            &.grey {
              font-size: 13px;
              font-weight: 300;
            }
          }
        }
      }
    }
  }

  .chat-settings-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 15px;
    .btn {
      width: 100%;
      background-color: #fff;
      color: #cf3050;
      height: 46px;
      border-radius: 4px;
    }
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 86px;
    padding: 20px;
    .btn {
      width: 100%;
      height: 46px;
      border-radius: 4px;
      :deep(.n-button__content) {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
      }
    }
  }
}

.badge {
  margin-left: 3px;
  &.master {
    color: #dc9b04 !important;
    background-color: #faf1d1 !important;
  }

  &.leader {
    color: #3370ff;
    background-color: #e1eaff;
  }
}

.custom-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text {
    font-size: 20px;
    font-weight: 400;
    color: #1f2225;
  }
}
</style>