feat: vue3 frontend scaffold + org tree + customer list + chat timeline
M5b viewing frontend for the yunke data-mirror, under yunkes/. - Scaffold: Vite + Vue 3 + TS, with element-plus, @element-plus/icons-vue, pinia, vue-router@4, axios. Dev server on :5173 with /api and /api/media proxied to the FastAPI backend on :8000. - API client (src/api/): axios instance (baseURL '/api') whose response interceptor unwraps the axios envelope; typed wrappers (getCustomers, getMessages, getDepartments, getStaff) returning Page<T> / arrays; types mirroring the backend *Out schemas (Message typed as a permissive superset so file_th_url/duration/transcription_text degrade gracefully today and light up once MessageOut exposes them). - Layout: el-header top bar (title + channel switch) + el-aside department tree (built from the flat parent_id list via useOrgStore, with search filter) + el-main router-view. - CustomerList (/customers): el-table with channel filter, department filter driven by the tree selection (route query), pagination, and row-click into the chat timeline (channel + owner_account_id + talker_id). - ChatTimeline (/chat/:channel/:ownerId/:talkerId): asc-ordered message bubbles keyed by is_send (direction) and type (text/image/video/voice/file/ divider/system/unknown); lands on the most-recent page and prepends older pages via load-more with scroll anchoring. - Home '/' redirects to '/customers'. npm run build (vue-tsc -b + vite build) is clean. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
浅念
@@ -0,0 +1,207 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onMounted, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ArrowLeft } from '@element-plus/icons-vue'
|
||||
import { getMessages } from '@/api'
|
||||
import type { Channel, Message } from '@/api/types'
|
||||
import MessageBubble from '@/components/MessageBubble.vue'
|
||||
import { channelLabel } from '@/utils/format'
|
||||
|
||||
const props = defineProps<{
|
||||
channel: string
|
||||
ownerId: string
|
||||
talkerId: string
|
||||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
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)
|
||||
|
||||
const hasMoreOlder = computed(() => currentPage.value > 1)
|
||||
|
||||
const conversationTitle = computed(
|
||||
() => `与 ${props.talkerId} 的聊天记录`,
|
||||
)
|
||||
|
||||
const subtitle = computed(
|
||||
() =>
|
||||
`渠道：${channelLabel(channelTyped.value)} · 归属账号：${props.ownerId}` +
|
||||
(total.value > 0 ? ` · 共 ${total.value} 条` : ''),
|
||||
)
|
||||
|
||||
const streamRef = ref<HTMLElement | null>(null)
|
||||
|
||||
function scrollToBottom(): void {
|
||||
nextTick(() => {
|
||||
const el = streamRef.value
|
||||
if (el) el.scrollTop = el.scrollHeight
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 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> {
|
||||
loading.value = true
|
||||
errorMsg.value = null
|
||||
try {
|
||||
const first = await getMessages({
|
||||
channel: channelTyped.value,
|
||||
owner_account_id: props.ownerId,
|
||||
talker_id: props.talkerId,
|
||||
page: 1,
|
||||
page_size: PAGE_SIZE,
|
||||
})
|
||||
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({
|
||||
channel: channelTyped.value,
|
||||
owner_account_id: props.ownerId,
|
||||
talker_id: props.talkerId,
|
||||
page: totalPages.value,
|
||||
page_size: PAGE_SIZE,
|
||||
})
|
||||
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({
|
||||
channel: channelTyped.value,
|
||||
owner_account_id: props.ownerId,
|
||||
talker_id: props.talkerId,
|
||||
page: prevPage,
|
||||
page_size: PAGE_SIZE,
|
||||
})
|
||||
// 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' })
|
||||
}
|
||||
}
|
||||
|
||||
// Reload when the route params change (navigating between conversations).
|
||||
watch(
|
||||
() => [props.channel, props.ownerId, props.talkerId] as const,
|
||||
() => {
|
||||
loadInitial()
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(loadInitial)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="yk-chat">
|
||||
<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>
|
||||
|
||||
<el-alert
|
||||
v-if="errorMsg"
|
||||
:title="`聊天记录加载失败：${errorMsg}`"
|
||||
type="error"
|
||||
show-icon
|
||||
:closable="false"
|
||||
style="margin-bottom: 0"
|
||||
/>
|
||||
|
||||
<div 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>
|
||||
|
||||
<MessageBubble
|
||||
v-for="m in messages"
|
||||
:key="m.msg_id"
|
||||
:message="m"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user