yunke/yunkes/src/views/GroupList.vue

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute, 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'
import { buildGroupSections, readField } from '@/utils/groupFields'

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

const ownerId = computed<string | null>(() =>
  route.query.owner_account_id ? String(route.query.owner_account_id) : null,
)

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)

// All-fields drawer state.
const drawerOpen = ref(false)
const drawerGroup = ref<Group | 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,
      owner_account_id: ownerId.value ?? undefined,
    })
    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 + owner_account_id query.
watch(
  () => [channelStore.channel, ownerId.value] as const,
  () => {
    page.value = 1
    load()
  },
)

/** Drop the ``owner_account_id`` query param while preserving any others. */
function clearOwnerFilter(): void {
  const { owner_account_id: _drop, ...rest } = route.query
  void _drop
  router.replace({ query: rest })
}

/**
 * Read a raw_json camelCase key off a group, preferring the structured
 * snake_case column when it is populated. The first argument is the row so the
 * table can use the same helper as the drawer.
 */
function cell(row: Group, camelKey: string): unknown {
  return readField(row, camelKey)
}

function cellText(row: Group, camelKey: string): string {
  const v = cell(row, camelKey)
  return v === null || v === undefined || v === '' ? '--' : String(v)
}

function imageCell(row: Group, camelKey: string): string | undefined {
  const v = cell(row, camelKey)
  return typeof v === 'string' && v !== '' ? v : undefined
}

function timeCell(row: Group, camelKey: string): number | undefined {
  const v = cell(row, camelKey)
  return typeof v === 'number' ? v : undefined
}

function openDrawer(row: Group): void {
  // Row click opens the all-fields drawer; the timeline is reached from the
  // drawer's 查看聊天记录 action (preserves the owner/room/channel keying).
  drawerGroup.value = row
  drawerOpen.value = true
}

const drawerSections = computed(() =>
  drawerGroup.value ? buildGroupSections(drawerGroup.value) : [],
)

const drawerAvatarSrc = computed<string | undefined>(() => {
  const g = drawerGroup.value
  if (!g) return undefined
  return imageCell(g, 'headImageUrl') ?? undefined
})

const drawerCanChat = computed(() => !!drawerGroup.value?.owner_account_id)

function goChatFromDrawer(): void {
  const row = drawerGroup.value
  if (!row) return
  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 }} 条
          <template v-if="ownerId"> · 员工账号：{{ ownerId }}</template>
          · 渠道：{{ 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>
        <el-button
          v-if="ownerId"
          size="small"
          type="info"
          plain
          @click="clearOwnerFilter"
        >
          清除员工筛选
        </el-button>
      </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="openDrawer"
    >
      <el-table-column label="群名" min-width="180">
        <template #default="{ row }">
          {{ row.room_name || cellText(row, 'chatRoomName') || row.room_id }}
        </template>
      </el-table-column>
      <el-table-column label="群ID" min-width="200" show-overflow-tooltip>
        <template #default="{ row }">
          <span style="font-family: monospace; font-size: 12px">{{ row.room_id }}</span>
        </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="群主" min-width="140">
        <template #default="{ row }">
          <span v-if="cell(row, 'userName') || cell(row, 'userPhone')">
            <template v-if="cell(row, 'userName')">{{ cellText(row, 'userName') }}</template>
            <span
              v-if="cell(row, 'userName') && cell(row, 'userPhone')"
              style="color: #c0c4cc"
            >
              /
            </span>
            <template v-if="cell(row, 'userPhone')">{{ cellText(row, 'userPhone') }}</template>
          </span>
          <span v-else style="color: #c0c4cc">--</span>
        </template>
      </el-table-column>
      <el-table-column label="归属微信" min-width="130">
        <template #default="{ row }">
          <span v-if="row.owner_account_nickname">{{ row.owner_account_nickname }}</span>
          <span v-else-if="cell(row, 'wechatNickName')">{{ cellText(row, 'wechatNickName') }}</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="消息数" prop="message_count" width="90" align="right">
        <template #default="{ row }">{{ row.message_count ?? '--' }}</template>
      </el-table-column>
      <el-table-column label="最近聊天" width="160">
        <template #default="{ row }">
          {{ formatTime(row.last_chat_time ?? timeCell(row, 'lastChatTime')) }}
        </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>

    <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>

    <!-- All-fields drawer -->
    <el-drawer
      v-model="drawerOpen"
      :title="drawerGroup ? `群详情 · ${drawerGroup.room_name ?? drawerGroup.room_id}` : '群详情'"
      direction="rtl"
      size="560px"
    >
      <template v-if="drawerGroup">
        <div class="yk-drawer__topbar">
          <el-button
            type="primary"
            size="small"
            :disabled="!drawerCanChat"
            @click="goChatFromDrawer"
          >
            查看聊天记录
          </el-button>
          <span v-if="!drawerCanChat" class="yk-drawer__topbar-hint">
            该群缺少归属账号，无法查看聊天
          </span>
        </div>

        <div class="yk-drawer__avatar">
          <el-avatar :size="56" :src="drawerAvatarSrc" shape="square">
            {{ (drawerGroup.room_name || drawerGroup.room_id || '?').slice(0, 1) }}
          </el-avatar>
          <div class="yk-drawer__avatar-meta">
            <div class="yk-drawer__avatar-name">
              {{ drawerGroup.room_name || drawerGroup.room_id }}
            </div>
            <div class="yk-drawer__avatar-sub">
              {{ channelLabel(drawerGroup.channel) }}
              <template v-if="cell(drawerGroup, 'wechatNickName')">
                · {{ cell(drawerGroup, 'wechatNickName') }}
              </template>
            </div>
          </div>
        </div>

        <div v-for="section in drawerSections" :key="section.title" class="yk-drawer__section">
          <el-divider content-position="left">{{ section.title }}</el-divider>
          <dl class="yk-drawer__kv">
            <div v-for="f in section.fields" :key="f.key" class="yk-drawer__kv-item">
              <dt>{{ f.label }}</dt>
              <dd v-if="f.render === 'image'" class="yk-drawer__img">
                <el-image
                  :src="String(f.value)"
                  :preview-src-list="[String(f.value)]"
                  fit="cover"
                  hide-on-click-modal
                />
              </dd>
              <dd v-else-if="f.render === 'empty'" class="yk-drawer__empty">—</dd>
              <dd v-else>{{ f.text }}</dd>
            </div>
          </dl>
        </div>
      </template>
    </el-drawer>
  </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;
}

.yk-drawer__topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.yk-drawer__topbar-hint {
  color: #c0c4cc;
  font-size: 12px;
}

.yk-drawer__avatar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.yk-drawer__avatar-meta {
  min-width: 0;
}

.yk-drawer__avatar-name {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yk-drawer__avatar-sub {
  font-size: 12px;
  color: #909399;
  margin-top: 2px;
}

.yk-drawer__kv {
  margin: 0 0 8px;
}

.yk-drawer__kv-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 12px;
  padding: 3px 0;
}

.yk-drawer__kv dt {
  color: #909399;
  font-size: 13px;
  word-break: break-all;
}

.yk-drawer__kv dd {
  margin: 0;
  font-size: 13px;
  color: #303133;
  word-break: break-all;
  min-width: 0;
}

.yk-drawer__img :deep(.el-image) {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  border: 1px solid var(--el-border-color-light, #e4e7ed);
}

.yk-drawer__empty {
  color: #c0c4cc;
}
</style>