yunke/yunkes/src/views/GroupList.vue

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getGroups } from '@/api'
import type { Channel, Group } from '@/api/types'
import { useChannelStore } from '@/stores/channel'
import { channelLabel, formatTime } from '@/utils/format'

const router = useRouter()
const channelStore = useChannelStore()

const groups = ref<Group[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(20)
const loading = ref(false)
const errorMsg = ref<string | null>(null)

const channelOptions = [
  { value: 'all' as const, label: '全部渠道' },
  { value: 'wechat' as const, label: '微信' },
  { value: 'whatsapp' as const, label: 'WhatsApp' },
]

const channelLabelCurrent = computed(() =>
  channelLabel(channelStore.channel === 'all' ? null : channelStore.channel),
)

function channelTagType(c: Group['channel']) {
  return c === 'wechat' ? 'success' : 'warning'
}

function onChannelChange(value: string | number | boolean | undefined): void {
  channelStore.setChannel(value as Channel | 'all')
}

async function load(): Promise<void> {
  loading.value = true
  errorMsg.value = null
  try {
    const res = await getGroups({
      channel: channelStore.channel,
      page: page.value,
      page_size: pageSize.value,
    })
    groups.value = res.items
    total.value = res.total
  } catch (e) {
    errorMsg.value = (e as Error).message
    ElMessage.error(`群列表加载失败：${(e as Error).message}`)
  } finally {
    loading.value = false
  }
}

function handlePageChange(p: number): void {
  page.value = p
  load()
}

function handlePageSizeChange(s: number): void {
  pageSize.value = s
  page.value = 1
  load()
}

// React to the top-bar channel filter.
watch(
  () => channelStore.channel,
  () => {
    page.value = 1
    load()
  },
)

function openTimeline(row: Group): void {
  // Group messages are queried by room_id; the timeline view branches on the
  // presence of a `roomId` route param to issue a room_id query.
  if (!row.owner_account_id) {
    ElMessage.warning('该群缺少归属账号，无法查看聊天记录')
    return
  }
  router.push({
    name: 'group-chat',
    params: {
      channel: row.channel,
      ownerId: row.owner_account_id,
      roomId: row.room_id,
    },
  })
}

onMounted(load)
</script>

<template>
  <div class="yk-groups">
    <div class="yk-groups__header">
      <div>
        <h2 style="margin: 0 0 4px; font-size: 16px">群列表</h2>
        <span class="yk-groups__sub">
          共 {{ total }} 条 · 渠道：{{ channelLabelCurrent }}
        </span>
      </div>
      <div class="yk-groups__filters">
        <el-radio-group
          :model-value="channelStore.channel"
          size="small"
          @change="onChannelChange"
        >
          <el-radio-button
            v-for="opt in channelOptions"
            :key="opt.value"
            :value="opt.value"
          >
            {{ opt.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <el-alert
      v-if="errorMsg"
      :title="errorMsg"
      type="error"
      show-icon
      :closable="false"
      style="margin-bottom: 12px"
    />

    <el-table
      v-loading="loading"
      :data="groups"
      stripe
      border
      row-key="room_id"
      style="width: 100%"
      :row-class-name="() => 'yk-clickable-row'"
      empty-text="暂无群数据"
      @row-click="openTimeline"
    >
      <el-table-column label="群名" min-width="180">
        <template #default="{ row }">
          {{ row.room_name || row.room_id }}
        </template>
      </el-table-column>
      <el-table-column label="渠道" width="100">
        <template #default="{ row }">
          <el-tag :type="channelTagType(row.channel)" size="small" effect="plain">
            {{ channelLabel(row.channel) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="成员数" prop="member_count" width="90" align="right">
        <template #default="{ row }">{{ row.member_count ?? '--' }}</template>
      </el-table-column>
      <el-table-column label="消息数" prop="message_count" width="90" align="right">
        <template #default="{ row }">{{ row.message_count ?? '--' }}</template>
      </el-table-column>
      <el-table-column label="群主" min-width="140">
        <template #default="{ row }">
          <span v-if="row.owner_account_nickname">{{ row.owner_account_nickname }}</span>
          <span v-else-if="row.owner_account_id">{{ row.owner_account_id }}</span>
          <span v-else style="color: #c0c4cc">--</span>
        </template>
      </el-table-column>
      <el-table-column label="最近聊天" width="160">
        <template #default="{ row }">{{ formatTime(row.last_chat_time) }}</template>
      </el-table-column>
    </el-table>

    <div class="yk-groups__pager">
      <el-pagination
        :current-page="page"
        :page-size="pageSize"
        :page-sizes="[20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @current-change="handlePageChange"
        @size-change="handlePageSizeChange"
      />
    </div>
    <p class="yk-groups__hint">点击任意一行查看该群的聊天记录。</p>
  </div>
</template>

<style scoped>
.yk-groups__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.yk-groups__sub {
  color: #909399;
  font-size: 13px;
}

.yk-groups__filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.yk-groups__pager {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.yk-groups__hint {
  margin: 8px 2px 0;
  font-size: 12px;
  color: #c0c4cc;
}
</style>