lq/nl-um-vue-ts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI升级

Browse Source
This commit is contained in:
liqi
2025-12-04 13:41:03 +08:00
parent 452ac7329e
commit 94bf694955
3 changed files with 121 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/chat/MessageList.vue
View File

@@ -1,50 +1,62 @@
<template>
<div
id="msgListContainer"
ref="containerRef"
class="flex-1 overflow-y-auto p-4 space-y-5"
@dragover.prevent
@drop.prevent
@scroll="handleScroll"
id="msgListContainer"
ref="containerRef"
class="flex-1 overflow-y-auto p-4 space-y-5"
@dragover.prevent
@drop.prevent
@scroll="handleScroll"
>
<!-- 加载历史消息提示 -->
<div v-if="loadingHistory" class="flex justify-center items-center py-4">
<div class="flex items-center gap-2 text-gray-400 text-sm">
<i class="fas fa-spinner fa-spin"></i>
<span>正在加载历史消息...</span>
<!-- 顶部加载状态提示区 -->
<div class="w-full flex justify-center py-2 min-h-[40px] items-center">
<!-- 1. 加载中 -->
<div v-if="loadingHistory" class="flex items-center gap-2 text-primary/80 text-xs bg-black/20 px-3 py-1.5 rounded-full backdrop-blur-sm">
<i class="fas fa-circle-notch fa-spin"></i>
<span>加载历史记录...</span>
</div>
<!-- 2. 点击加载 (还有更多消息但未触发自动加载时显示) -->
<button
v-else-if="hasMoreHistory"
class="flex items-center gap-2 text-gray-500 hover:text-primary text-xs bg-black/10 hover:bg-white/10 px-3 py-1.5 rounded-full transition-all duration-200 cursor-pointer"
@click="$emit('load-more')"
>
<i class="fas fa-history"></i>
<span>点击加载历史消息</span>
</button>
<!-- 3. 已经到顶 -->
<div v-else-if="messages.length > 0" class="flex items-center gap-2 text-gray-600 text-[10px] opacity-50">
<span class="w-8 h-px bg-gray-700"></span>
<span>已经到顶了</span>
<span class="w-8 h-px bg-gray-700"></span>
</div>
</div>
<!-- 已经到顶提示 -->
<div v-else-if="!hasMoreHistory && messages.length > 0" class="flex justify-center items-center py-4">
<div class="text-gray-500 text-sm">
<span>已经到顶啦~</span>
</div>
</div>
<div
v-for="(msg, index) in messages"
:key="index"
class="flex gap-3 msg-row group"
:class="{ 'flex-row-reverse': msg.isSelf }"
@contextmenu.stop="$emit('contextmenu', $event, msg)"
v-for="(msg, index) in messages"
:key="index"
class="flex gap-3 msg-row group"
:class="{ 'flex-row-reverse': msg.isSelf }"
@contextmenu.stop="$emit('contextmenu', $event, msg)"
>
<!-- 头像 -->
<Avatar
:name="msg.isSelf ? currentUser.name : (target.user?.name || target.remark_name)"
:avatar="msg.isSelf ? currentUser.avatar : (target.user?.avatar || target.remark_name?.charAt(0))"
:color="msg.isSelf ? generateColor(currentUser.id) : target.color"
size="sm"
rounded="lg"
class="cursor-pointer hover:opacity-80 transition self-start mt-1"
@click="$emit('avatar-click', msg.isSelf ? currentUser : target)"
:name="msg.isSelf ? currentUser.name : (target.user?.name || target.remark_name)"
:avatar="msg.isSelf ? currentUser.avatar : (target.user?.avatar || target.remark_name?.charAt(0))"
:color="msg.isSelf ? generateColor(currentUser.id) : target.color"
size="sm"
rounded="lg"
class="cursor-pointer hover:opacity-80 transition self-start mt-1 shadow-md"
@click="$emit('avatar-click', msg.isSelf ? currentUser : target)"
/>
<!-- 消息内容区 -->
<div class="flex flex-col max-w-[75%] md:max-w-[60%]">
<div
class="text-[10px] text-gray-500 mb-1 px-1"
:class="{ 'text-right': msg.isSelf }"
class="text-[10px] text-gray-500 mb-1 px-1"
:class="{ 'text-right': msg.isSelf }"
>
{{ msg.isSelf ? 'Me' : (target.remark_name || target.user?.name) }}
</div>
@@ -109,3 +121,19 @@ defineExpose({
})
</script>
<style scoped>
/* 隐藏滚动条但保留功能 */
.overflow-y-auto::-webkit-scrollbar {
width: 4px;
}
.overflow-y-auto::-webkit-scrollbar-track {
background: transparent;
}
.overflow-y-auto::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 20px;
}
.overflow-y-auto:hover::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2);
}
</style>