浅念
97 lines
3.6 KiB
Vue
97 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
import { getSessions } from '@/api'
|
|
import type { ChatSession, Channel } from '@/api/types'
|
|
import { formatTime } from '@/utils/format'
|
|
|
|
const props = defineProps<{
|
|
channel: Channel
|
|
ownerId: string
|
|
activeType: 'friend' | 'group' | null
|
|
activeId: string | null
|
|
}>()
|
|
const emit = defineEmits<{ select: [ChatSession] }>()
|
|
|
|
const sessions = ref<ChatSession[]>([])
|
|
const loading = ref(false)
|
|
const errorMsg = ref<string | null>(null)
|
|
const filter = ref<'all' | 'friend' | 'group'>('all')
|
|
const keyword = ref('')
|
|
|
|
async function load() {
|
|
loading.value = true
|
|
errorMsg.value = null
|
|
try {
|
|
const res = await getSessions({ owner_account_id: props.ownerId, channel: props.channel })
|
|
sessions.value = res.sessions
|
|
} catch (e) {
|
|
errorMsg.value = (e as Error).message
|
|
sessions.value = []
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const filtered = computed(() =>
|
|
sessions.value
|
|
.filter((s) => (filter.value === 'all' ? true : s.type === filter.value))
|
|
.filter((s) => {
|
|
const k = keyword.value.trim()
|
|
if (!k) return true
|
|
return (s.name ?? '').includes(k) || (s.talker_id ?? '').includes(k) || (s.room_id ?? '').includes(k)
|
|
}),
|
|
)
|
|
|
|
function isActive(s: ChatSession): boolean {
|
|
return props.activeType === s.type && props.activeId === (s.talker_id ?? s.room_id)
|
|
}
|
|
|
|
watch(() => [props.ownerId, props.channel] as const, load, { immediate: true })
|
|
</script>
|
|
|
|
<template>
|
|
<div class="yk-chat-side">
|
|
<div class="yk-chat-side__top">
|
|
<el-select v-model="filter" size="small" style="width: 96px">
|
|
<el-option label="全部" value="all" />
|
|
<el-option label="好友" value="friend" />
|
|
<el-option label="群聊" value="group" />
|
|
</el-select>
|
|
<el-input v-model="keyword" size="small" placeholder="搜索昵称/号" clearable />
|
|
</div>
|
|
<el-alert v-if="errorMsg" :title="errorMsg" type="error" :closable="false" />
|
|
<div v-loading="loading" class="yk-chat-side__list">
|
|
<div v-if="!loading && filtered.length === 0" class="yk-empty">暂无会话</div>
|
|
<div
|
|
v-for="s in filtered"
|
|
:key="(s.talker_id ?? s.room_id) + s.type"
|
|
class="yk-chat-side__item"
|
|
:class="{ 'is-active': isActive(s) }"
|
|
@click="emit('select', s)"
|
|
>
|
|
<el-avatar :size="36" :src="s.avatar ?? undefined">{{ (s.name ?? '?').slice(0, 1) }}</el-avatar>
|
|
<div class="yk-chat-side__meta">
|
|
<div class="yk-chat-side__name">
|
|
<span>{{ s.name ?? '--' }}</span>
|
|
<span class="yk-chat-side__today">今日{{ s.today_count }}</span>
|
|
</div>
|
|
<div class="yk-chat-side__time">{{ s.last_chat_time ? formatTime(s.last_chat_time) : '--' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.yk-chat-side { display: flex; flex-direction: column; height: 100%; width: 260px; border-right: 1px solid var(--el-border-color-light); background: #fff; }
|
|
.yk-chat-side__top { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--el-border-color-lighter); }
|
|
.yk-chat-side__list { flex: 1; overflow-y: auto; }
|
|
.yk-chat-side__item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; }
|
|
.yk-chat-side__item:hover { background: #f5f7fa; }
|
|
.yk-chat-side__item.is-active { background: #ecf5ff; }
|
|
.yk-chat-side__meta { min-width: 0; flex: 1; }
|
|
.yk-chat-side__name { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; color: #303133; }
|
|
.yk-chat-side__today { font-size: 11px; color: #909399; flex-shrink: 0; }
|
|
.yk-chat-side__time { font-size: 11px; color: #c0c4cc; margin-top: 2px; }
|
|
</style>
|