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

gaoluyang

2026-06-29 27cd042df9aca0383a49f3514bc21958dd890912

 src/views/im/home/components/group/group-mute-member-dialog.vue

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

import { Button, message, Modal } from 'ant-design-vue'

import { muteMember } from '#/api/im/group'

defineOptions({ name: 'ImGroupMuteMemberDialog' })

const emit = defineEmits<{
  success: []
}>()

const visible = ref(false)
const loading = ref(false)
const groupId = ref(0)
const userId = ref(0)
const memberName = ref('')
const selected = ref(600) // é»˜è®¤ 10 åˆ†é’Ÿ

const presets = [
  { label: '10 åˆ†é’Ÿ', value: 600 },
  { label: '1 å°æ—¶', value: 3600 },
  { label: '12 å°æ—¶', value: 43_200 },
  { label: '1 å¤©', value: 86_400 },
  { label: '7 å¤©', value: 604_800 },
  { label: '30 å¤©', value: 2_592_000 },
  { label: '永久', value: 0 }
]

/** æ‰“开弹窗 */
function open(gid: number, uid: number, name: string) {
  groupId.value = gid
  userId.value = uid
  memberName.value = name
  selected.value = 600
  visible.value = true
}

/** ç¡®è®¤ç¦è¨€ */
async function handleConfirm() {
  loading.value = true
  try {
    await muteMember({
      id: groupId.value,
      userId: userId.value,
      mutedSeconds: selected.value
    })
    message.success('禁言成功')
    visible.value = false
    emit('success')
  } finally {
    loading.value = false
  }
}

defineExpose({ open })
</script>

<template>
  <!-- ç¦è¨€æ—¶é•¿é€‰æ‹©å¼¹çª— -->
  <Modal v-model:open="visible" title="设置禁言" width="560px" :mask-closable="false">
    <div class="flex flex-col gap-4">
      <!-- æˆå‘˜ä¿¡æ¯å¡ï¼šå’Œ FriendAddDialog çš„ user å¡ä¿æŒä¸€è‡´çš„浅色背景 -->
      <div
        class="flex items-center gap-2 px-3 py-2.5 rounded-md bg-[var(--ant-color-fill-secondary)]"
      >
        <span class="text-13px text-[var(--ant-color-text-secondary)]">禁言成员</span>
        <span
          class="text-sm font-medium text-[var(--ant-color-text)] truncate"
        >
          {{ memberName }}
        </span>
      </div>

      <!-- ç¦è¨€æ—¶é•¿é€‰é¡¹ï¼šç”¨ el-button å¹³é“ºï¼Œé€‰ä¸­èµ° primary，靠 gap-2 ç•™é—´è· -->
      <div>
        <div class="mb-2 text-13px text-[var(--ant-color-text-secondary)]">禁言时长</div>
        <div class="grid grid-cols-3 gap-2">
          <Button
            v-for="opt in presets"
            :key="opt.value"
            :type="selected === opt.value ? 'primary' : undefined"
            class="!ml-0 w-full"
            @click="selected = opt.value"
          >
            {{ opt.label }}
          </Button>
        </div>
      </div>
    </div>
    <template #footer>
      <Button @click="visible = false">取消</Button>
      <Button type="primary" :loading="loading" @click="handleConfirm">确定</Button>
    </template>
  </Modal>
</template>