yunke/yunkes/src/views/ChatTimeline.vue

<script setup lang="ts">
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import { getAccounts, getCustomers, getGroups, getMessages } from '@/api'
import { downloadBlob } from '@/api/client'
import type { Channel, Message } from '@/api/types'
import MessageBubble from '@/components/MessageBubble.vue'
import ChatSidebar from '@/components/ChatSidebar.vue'
import { channelLabel, formatTime, wechatTypeLabel } from '@/utils/format'
import { buildMessageSections } from '@/utils/messageFields'

/**
 * Chat timeline. Reused for two conversation shapes:
 *   * 1:1 DM  — `talkerId` set; messages filtered by `talker_id`.
 *   * Group   — `roomId` set; messages filtered by `room_id`. Group messages
 *               carry per-member `sender_name` / `sender_head_url`, so each
 *               bubble identifies its sender (handled by MessageBubble).
 * Exactly one of `talkerId` / `roomId` is normally present.
 */
const props = defineProps<{
  channel: string
  ownerId: string
  talkerId?: string
  roomId?: string
}>()

const router = useRouter()
const route = useRoute()
const PAGE_SIZE = 50

const messages = ref<Message[]>([])
const loading = ref(false)
const loadingOlder = ref(false)
const errorMsg = ref<string | null>(null)

// Asc-ordered pagination: page 1 = oldest 50, last page = most recent 50.
// We land on the last page (most recent activity) and walk backwards to load
// older history. `currentPage` is the smallest page number currently loaded.
const currentPage = ref(1)
const totalPages = ref(1)
const total = ref(0)

const channelTyped = computed(() => props.channel as Channel)

/** True when this timeline is a group chat (drives the query + title). */
const isGroup = computed(() => !!props.roomId)

/** 当前会话类型(高亮 sidebar + 驱动空态)。账号级入口(无 talkerId/roomId)→ null。 */
const activeType = computed<'friend' | 'group' | null>(() =>
  isGroup.value ? 'group' : props.talkerId ? 'friend' : null,
)
/** 当前会话 id(friend→talker_id, group→room_id)。账号级入口→ null。 */
const activeId = computed<string | null>(() => props.talkerId ?? props.roomId ?? null)
/** 是否已选定具体会话(决定是否拉消息 / 显示空态)。 */
const hasActive = computed(() => !!activeId.value)

const hasMoreOlder = computed(() => currentPage.value > 1)

/**
 * 关键词过滤:仅作用于"当前已加载"的消息(/api/messages 无 q 参数,非全量历史)。
 * keyword 为空 → 直接返回 messages.value。
 */
const visibleMessages = computed(() => {
  const k = keyword.value.trim()
  if (!k) return messages.value
  return messages.value.filter((m) => (m.text ?? '').includes(k))
})

/** 当前会话对方的显示名（客户昵称或群名）— fetch 后替换标题中的原始 ID。 */
const talkerName = ref<string | null>(null)

async function loadTalkerName(): Promise<void> {
  talkerName.value = null
  if (!hasActive.value) return
  try {
    if (isGroup.value && props.roomId) {
      // 群名(room_id 精确单行直查,不再拉整页群列表)
      const res = await getGroups({ channel: channelTyped.value, room_id: props.roomId, page: 1, page_size: 1 })
      talkerName.value = res.items[0]?.room_name || null
    } else if (props.talkerId) {
      // 客户昵称
      const res = await getCustomers({
        channel: channelTyped.value,
        owner_account_id: props.ownerId,
        friend_id: props.talkerId,
        page: 1,
        page_size: 1,
      })
      const c = res.items[0]
      talkerName.value = c?.friend_nickname || c?.friend_remark || null
    }
  } catch {
    // 静默降级：显示原始 ID
  }
}

const conversationTitle = computed(() => {
  const displayName = talkerName.value || (isGroup.value ? props.roomId : props.talkerId)
  if (isGroup.value) {
    return `群聊记录 · ${displayName}`
  }
  if (props.talkerId) {
    return `与 ${displayName} 的聊天记录`
  }
  // 账号级入口(无具体会话):仅展示渠道级标题,避免出现 "与 undefined 的聊天记录"。
  return '聊天记录'
})

const TWO_WEEKS_MS = 14 * 86_400_000

function defaultRange(): [Date, Date] {
  const end = new Date()
  end.setHours(23, 59, 59, 999)
  const start = new Date(end.getTime() - TWO_WEEKS_MS)
  start.setHours(0, 0, 0, 0)
  return [start, end]
}
function rangeFromQuery(): [Date, Date] | null {
  const s = route.query.start,
    e = route.query.end
  const sv = Array.isArray(s) ? s[0] : s,
    ev = Array.isArray(e) ? e[0] : e
  if (sv && ev && /^\d+$/.test(String(sv)) && /^\d+$/.test(String(ev))) {
    return [new Date(Number(sv)), new Date(Number(ev))]
  }
  return null
}
// 本地日期窗 ref:mount 时取 route.query(stat modal 带窗入口)否则默认近 2 周;
// 跨会话切换持久(不随路由 param 变化重置),与云客真机一致。
const dateRange = ref<[Date, Date]>(rangeFromQuery() ?? defaultRange())
const winStart = computed(() => dateRange.value[0].getTime())
const winEnd = computed(() => dateRange.value[1].getTime())
const keyword = ref('')

/** 归属账号昵称(账号表查,回退原始 id)。 */
const ownerNickname = ref<string | null>(null)

async function loadOwnerNickname(): Promise<void> {
  ownerNickname.value = null
  try {
    const res = await getAccounts({ channel: channelTyped.value, page: 1, page_size: 100 })
    const acc = res.items.find(a => a.account_id === props.ownerId)
    ownerNickname.value = acc?.nickname || acc?.user_name || null
  } catch {
    ownerNickname.value = null
  }
}

function onDateChange(): void {
  loadInitial()
}

const subtitle = computed(() => {
  const ownerLabel = ownerNickname.value
    ? `${ownerNickname.value}(${props.ownerId})`
    : props.ownerId
  let s =
    `渠道：${channelLabel(channelTyped.value)} · 归属账号：${ownerLabel}` +
    (total.value > 0 ? ` · 共 ${total.value} 条` : '')
  s += ` · 时段：${formatTime(winStart.value)} ~ ${formatTime(winEnd.value)}`
  return s
})

const streamRef = ref<HTMLElement | null>(null)

function scrollToBottom(): void {
  nextTick(() => {
    const el = streamRef.value
    if (el) el.scrollTop = el.scrollHeight
  })
}

/** Shared query params for both DM and group timelines. */
function queryFor(pageNum: number) {
  return {
    channel: channelTyped.value,
    owner_account_id: props.ownerId,
    talker_id: isGroup.value ? undefined : props.talkerId,
    room_id: isGroup.value ? props.roomId : undefined,
    start: winStart.value,
    end: winEnd.value,
    page: pageNum,
    page_size: PAGE_SIZE,
  }
}

/**
 * Fetch the last page (most recent messages) on entry. Page 1 is fetched first
 * purely to learn `total` so we can compute `lastPage` — the messages API
 * returns asc, so the last page holds the newest slice.
 */
async function loadInitial(): Promise<void> {
  // 账号级入口(无具体会话):不拉消息,清空状态,留空态给右侧主区。
  if (!hasActive.value) {
    messages.value = []
    total.value = 0
    totalPages.value = 1
    currentPage.value = 1
    return
  }
  loading.value = true
  errorMsg.value = null
  try {
    const first = await getMessages(queryFor(1))
    total.value = first.total
    totalPages.value = Math.max(1, Math.ceil(first.total / PAGE_SIZE))

    if (totalPages.value <= 1) {
      messages.value = first.items
    } else {
      const last = await getMessages(queryFor(totalPages.value))
      messages.value = last.items
    }
    currentPage.value = totalPages.value
    scrollToBottom()
  } catch (e) {
    errorMsg.value = (e as Error).message
    messages.value = []
  } finally {
    loading.value = false
  }
}

/** Prepend the next older page (currentPage - 1). No-op on page 1. */
async function loadOlder(): Promise<void> {
  if (loadingOlder.value || !hasMoreOlder.value) return
  loadingOlder.value = true
  const prevHeight = streamRef.value?.scrollHeight ?? 0
  try {
    const prevPage = currentPage.value - 1
    const res = await getMessages(queryFor(prevPage))
    // Backend returns asc, so res.items are older than everything currently
    // shown — prepend them.
    messages.value = [...res.items, ...messages.value]
    currentPage.value = prevPage
    // Keep the user's scroll anchored near where they were.
    nextTick(() => {
      const el = streamRef.value
      if (el) el.scrollTop = el.scrollHeight - prevHeight
    })
  } catch (e) {
    ElMessage.error(`加载更多失败：${(e as Error).message}`)
  } finally {
    loadingOlder.value = false
  }
}

function goBack(): void {
  // Prefer history back when there's somewhere to go; else the customer list.
  if (window.history.length > 1) {
    router.back()
  } else {
    router.push({ name: 'customers' })
  }
}

/** 点击左侧会话 → 推到对应 DM/群路由(带具体会话 id)。 */
function onSelectSession(s: {
  type: 'friend' | 'group'
  talker_id?: string | null
  room_id?: string | null
}): void {
  if (s.type === 'group') {
    router.push({
      name: 'group-chat',
      params: { channel: props.channel, ownerId: props.ownerId, roomId: s.room_id! },
    })
  } else {
    router.push({
      name: 'chat',
      params: { channel: props.channel, ownerId: props.ownerId, talkerId: s.talker_id! },
    })
  }
}

/** 导出当前会话/时段聊天记录为自包含 HTML（后端渲染气泡 + 附件内联）。 */
async function exportCurrent(): Promise<void> {
  if (!hasActive.value) return
  try {
    await downloadBlob('/export/chat-html', {
      channel: channelTyped.value,
      owner_account_id: props.ownerId,
      talker_id: isGroup.value ? undefined : props.talkerId,
      room_id: isGroup.value ? props.roomId : undefined,
      start: winStart.value,
      end: winEnd.value,
    })
  } catch (e) {
    ElMessage.error(`导出失败：${(e as Error).message}`)
  }
}

// All-fields drawer state for the message detail view.
const drawerOpen = ref(false)
const drawerMessage = ref<Message | null>(null)

function openDetail(m: Message): void {
  drawerMessage.value = m
  drawerOpen.value = true
}

const drawerSections = computed(() =>
  drawerMessage.value ? buildMessageSections(drawerMessage.value) : [],
)

const drawerTitle = computed(() => {
  const m = drawerMessage.value
  if (!m) return '消息详情'
  const when = m.timestamp ? formatTime(m.timestamp) : ''
  return `消息详情${when ? ` · ${when}` : ''}`
})

// Reload when the route params change (navigating between conversations).
// dateRange 变化走 onDateChange,不在此 watcher 内。
watch(
  () => [props.channel, props.ownerId, props.talkerId, props.roomId] as const,
  () => {
    loadInitial()
    loadTalkerName()
    loadOwnerNickname()
  },
)

onMounted(() => {
  loadInitial()
  loadTalkerName()
  loadOwnerNickname()
})
</script>

<template>
  <div class="yk-chat">
    <div class="yk-chat__body">
      <ChatSidebar
        :channel="channelTyped"
        :owner-id="props.ownerId"
        :active-type="activeType"
        :active-id="activeId"
        @select="onSelectSession"
      />
      <div class="yk-chat__main">
        <div class="yk-chat__header">
          <div>
            <div style="display: flex; align-items: center; gap: 8px">
              <el-button text size="small" @click="goBack">
                <el-icon><ArrowLeft /></el-icon>
                返回
              </el-button>
              <h2 class="yk-chat__title">{{ conversationTitle }}</h2>
            </div>
            <div class="yk-chat__sub">{{ subtitle }}</div>
          </div>
          <div class="yk-chat__filters">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              size="small"
              :clearable="false"
              @change="onDateChange"
            />
            <el-input
              v-model="keyword"
              size="small"
              placeholder="搜索当前已加载消息"
              clearable
              style="width: 200px"
            />
            <el-button v-if="hasActive" size="small" type="primary" plain @click="exportCurrent">导出</el-button>
          </div>
        </div>

        <el-alert
          v-if="errorMsg"
          :title="`聊天记录加载失败：${errorMsg}`"
          type="error"
          show-icon
          :closable="false"
          style="margin-bottom: 0"
        />

        <div v-if="!hasActive" class="yk-empty yk-chat__nopick">选择左侧会话查看消息</div>
        <div v-else v-loading="loading" class="yk-chat__stream" ref="streamRef">
          <div class="yk-chat__load">
            <el-button
              v-if="hasMoreOlder"
              size="small"
              plain
              :loading="loadingOlder"
              @click="loadOlder"
            >
              加载更多 / 上一页
            </el-button>
            <span v-else-if="!loading && messages.length > 0" class="yk-chat__end">
              —— 已加载全部历史 ——
            </span>
          </div>

          <template v-if="messages.length === 0 && !loading">
            <div class="yk-empty">暂无聊天记录</div>
          </template>
          <template v-else-if="visibleMessages.length === 0 && keyword && !loading">
            <div class="yk-empty">当前已加载消息中无匹配</div>
          </template>

          <MessageBubble
            v-for="m in visibleMessages"
            :key="m.msg_id"
            :message="m"
            @open-detail="openDetail"
          />
        </div>
      </div>
    </div>

    <!-- All-fields drawer for the clicked message -->
    <el-drawer
      v-model="drawerOpen"
      :title="drawerTitle"
      direction="rtl"
      size="560px"
    >
      <template v-if="drawerMessage">
        <div class="yk-drawer__topmeta">
          <el-tag size="small" effect="plain">
            {{ channelLabel(channelTyped) }}
          </el-tag>
          <el-tag
            v-if="drawerMessage.type || drawerMessage.type_raw != null"
            size="small"
            type="info"
            effect="plain"
          >
            {{ drawerMessage.channel === 'wechat' ? wechatTypeLabel(drawerMessage.type_raw) : (drawerMessage.type || '消息') }}
            <template v-if="drawerMessage.type_raw != null">
              ({{ drawerMessage.type_raw }})
            </template>
          </el-tag>
          <el-tag
            v-if="drawerMessage.is_send != null"
            size="small"
            :type="drawerMessage.is_send ? 'success' : 'warning'"
            effect="plain"
          >
            {{ drawerMessage.is_send ? '发出' : '接收' }}
          </el-tag>
        </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-if="f.render === 'object'" class="yk-drawer__pre">
                <pre>{{ f.text }}</pre>
              </dd>
              <dd v-else>{{ f.text }}</dd>
            </div>
          </dl>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<style scoped>
/* 双栏布局:左侧会话列表 + 右侧消息主区。高度预留 app header 之下。 */
.yk-chat__body {
  display: flex;
  height: calc(100vh - 120px);
  min-height: 400px;
}
.yk-chat__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.yk-chat__nopick {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* Make the stream its own scroll region so scrollToBottom + load-older scroll
 * anchoring target the right element. Height reserves space for the app
 * header + chat header + main padding. */
.yk-chat__stream {
  max-height: calc(100vh - var(--yk-header-height) - 140px);
  overflow-y: auto;
}

.yk-drawer__topmeta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.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;
}

.yk-drawer__pre {
  margin: 0;
  min-width: 0;
}

.yk-drawer__pre pre {
  margin: 0;
  padding: 8px;
  background: var(--el-fill-color-light, #f5f7fa);
  border-radius: 4px;
  font-size: 12px;
  color: #303133;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 240px;
  overflow: auto;
}
</style>