银川 1.联调产品维护页面 2.添加IM即时通讯模块

gaoluyang

2026-06-29 27cd042df9aca0383a49f3514bc21958dd890912

 src/views/im/home/pages/conversation/components/message/group-request-pending.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,88 @@
<script lang="ts" setup>
import { computed, ref } from 'vue'

import { IconifyIcon as Icon } from '#/packages/icons/src'

import { getCurrentUserId } from '#/views/im/utils/auth'
import { ImGroupMemberRole } from '#/views/im/utils/constants'

import { GroupRequestListDialog } from '../../../../components/group'
import { useGroupRequestStore } from '../../../../store/groupRequestStore'
import { useGroupStore } from '../../../../store/groupStore'

defineOptions({ name: 'ImGroupRequestPending' })

const props = defineProps<{
  groupId: number
}>()

const groupStore = useGroupStore()
const groupRequestStore = useGroupRequestStore()

const requestListDialogRef = ref<InstanceType<typeof GroupRequestListDialog>>() // ç”³è¯·åˆ—表弹窗 ref：handleOpen è°ƒ open({ groupId }) è§¦å‘

/** æ‰“开当前群的进群申请列表 */
function handleOpen() {
  requestListDialogRef.value?.open({ groupId: props.groupId })
}

/** å½“前群（含 ownerUserId / members） */
const group = computed(() => groupStore.getGroup(props.groupId))

/** å½“前用户在群里的角色；优先用 group.members，懒加载未到时回退到 ownerUserId ç›´åˆ¤ */
const myRole = computed(() => {
  const myId = getCurrentUserId()
  if (group.value?.ownerUserId === myId) {
    return ImGroupMemberRole.OWNER
  }
  return group.value?.members?.find((m) => m.userId === myId)?.role
})

/** ä»…群主 / ç®¡ç†å‘˜å¯è§ */
const canManage = computed(
  () => myRole.value === ImGroupMemberRole.OWNER || myRole.value === ImGroupMemberRole.ADMIN
)

/** å½“前群未处理申请数；从 store æ´¾ç”Ÿ */
const pendingCount = computed(() => groupRequestStore.getUnhandledGroupRequestCount(props.groupId))
</script>

<template>
  <!--
    ç¾¤é¡¶éƒ¨ã€Œå¾…处理加群申请」横幅
    - ä»…当登录用户是该群 owner / admin ä¸”该群下未处理申请数 > 0 æ—¶æ˜¾ç¤º
    - count ä»Ž groupRequestStore æ´¾ç”Ÿï¼ˆå…¨å±€å­˜ï¼‰ï¼›æœ¬ç«¯å¤„理 / WS é€šçŸ¥åˆ°è¾¾åŽ store è‡ªåŠ¨æ›´æ–°
    - ç‚¹å‡»æ¨ªå¹…打开 GroupRequestListDialog（含历史已处理记录），不再就地展开
  -->
  <div
    v-if="canManage && pendingCount > 0"
    class="flex flex-shrink-0 flex-col items-start px-4 pt-1.5 pb-2 bg-[var(--ant-color-fill-secondary)]"
  >
    <div
      class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-[10px] text-13px text-[var(--ant-color-text)] bg-[var(--ant-color-bg-container)] cursor-pointer shadow-[0_1px_2px_rgba(0,0,0,0.04)] transition-colors hover:bg-[var(--ant-color-fill-tertiary)]"
      @click="handleOpen"
    >
      <Icon
        icon="ant-design:user-add-outlined"
        :size="14"
        class="im-group-request-pending__icon flex-shrink-0 text-[var(--ant-color-success)]"
      />
      <span class="flex-1 min-w-0 truncate"> æ–°è¿›ç¾¤ç”³è¯·ï¼ˆ{{ pendingCount }}） </span>
      <Icon
        icon="ant-design:right-outlined"
        :size="11"
        class="flex-shrink-0 text-[var(--ant-color-text-placeholder)]"
      />
    </div>

    <!-- ç”³è¯·åˆ—表 dialog：复用同一组件，避免群管理面板与会话顶部各写一份 -->
    <GroupRequestListDialog ref="requestListDialogRef" />
  </div>
</template>

<style scoped>
/* :deep ç©¿é€ Icon å­ç»„件 DOM；强制 svg èµ° currentColor åº”对暗色模式 el-icon å…¨å±€è‰²è¦†ç›– */
.im-group-request-pending__icon :deep(svg) {
  fill: currentColor !important;
}
</style>