Trim locale and notification payload

This commit is contained in:
2026-06-10 18:33:46 +08:00
parent 024dac51b2
commit 8919a88461
5 changed files with 35 additions and 176 deletions
@@ -1,5 +1,4 @@
<script lang="ts" setup>
import type { ChatMessage } from '#/api/core/chat';
import type {
AnnouncementItem,
NotificationItem,
@@ -8,11 +7,10 @@ import type {
import { computed, ref } from 'vue';
import { useVbenDrawer } from '@vben-core/popup-ui';
import { Mail, MailCheck, Megaphone, MessageSquare, Trash2 } from '@vben/icons';
import { Mail, MailCheck, Megaphone, Trash2 } from '@vben/icons';
import { ElButton, ElEmpty, ElScrollbar, ElTooltip } from 'element-plus';
import UserAvatar from '#/components/user-avatar/index.vue';
import { ZqTabs } from '#/components/zq-tabs';
import { $t } from '#/locales';
@@ -25,12 +23,8 @@ interface Props {
announcements?: AnnouncementItem[];
// 公告未读数
announcementUnreadCount?: number;
// 未读聊天消息列表
unreadChats?: ChatMessage[];
// 聊天未读总数
chatUnreadCount?: number;
// 当前激活的 Tab
activeTab?: 'announcement' | 'chat' | 'message';
activeTab?: 'announcement' | 'message';
}
defineOptions({ name: 'NotificationDrawer' });
@@ -40,18 +34,15 @@ const props = withDefaults(defineProps<Props>(), {
messageUnreadCount: 0,
announcements: () => [],
announcementUnreadCount: 0,
unreadChats: () => [],
chatUnreadCount: 0,
activeTab: 'message',
});
const emit = defineEmits<{
clear: [];
clickChat: [ChatMessage];
makeAll: [];
readAnnouncement: [AnnouncementItem];
readMessage: [NotificationItem];
'update:activeTab': ['announcement' | 'chat' | 'message'];
'update:activeTab': ['announcement' | 'message'];
viewAll: [];
}>();
@@ -65,11 +56,6 @@ const tabItems = computed(() => [
label: `${$t('message.drawer.messageTab')}${props.messageUnreadCount > 0 ? ` (${props.messageUnreadCount})` : ''}`,
icon: Mail,
},
{
key: 'chat',
label: `${$t('message.drawer.chatTab')}${props.chatUnreadCount > 0 ? ` (${props.chatUnreadCount})` : ''}`,
icon: MessageSquare,
},
{
key: 'announcement',
label: `${$t('message.drawer.announcementTab')}${props.announcementUnreadCount > 0 ? ` (${props.announcementUnreadCount})` : ''}`,
@@ -78,34 +64,10 @@ const tabItems = computed(() => [
]);
function handleTabChange(value: string) {
currentTab.value = value as 'announcement' | 'chat' | 'message';
currentTab.value = value as 'announcement' | 'message';
emit('update:activeTab', currentTab.value);
}
function handleChatClick(msg: ChatMessage) {
emit('clickChat', msg);
}
function getMessagePreview(msg: ChatMessage): string {
if (msg.msg_type === 'text') return msg.content || '';
if (msg.msg_type === 'image') return `[${$t('chat.image')}]`;
if (msg.msg_type === 'file')
return `[${$t('chat.file')}] ${msg.file_name || ''}`;
if (msg.msg_type === 'voice') return `[${$t('chat.voice')}]`;
return `[${msg.msg_type}]`;
}
function formatChatTime(datetime?: string): string {
if (!datetime) return '';
const date = new Date(datetime);
const now = new Date();
const isToday = date.toDateString() === now.toDateString();
if (isToday) {
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}
return date.toLocaleDateString([], { month: '2-digit', day: '2-digit' });
}
function handleViewAll() {
emit('viewAll');
}
@@ -240,59 +202,6 @@ function getPriorityClass(priority: number): string {
</template>
</template>
<!-- 聊天未读列表 -->
<template v-else-if="currentTab === 'chat'">
<ElScrollbar v-if="unreadChats.length > 0" class="flex-1">
<ul class="flex w-full flex-col gap-2">
<template v-for="msg in unreadChats" :key="msg.id">
<li
class="relative flex w-full cursor-pointer items-center gap-3 rounded-lg border border-[var(--el-border-color)] p-3 transition-colors hover:bg-[var(--el-fill-color-light)]"
@click="handleChatClick(msg)"
>
<UserAvatar
:user-id="msg.sender_id"
:name="msg.sender_name || ''"
:avatar="msg.sender_avatar"
:size="40"
:font-size="16"
:show-popover="false"
class="shrink-0"
/>
<div class="flex flex-1 flex-col gap-1 leading-none">
<div class="flex items-center justify-between">
<p class="text-sm font-medium">
{{ msg.sender_name || '' }}
</p>
<span
class="text-xs text-[var(--el-text-color-placeholder)]"
>
{{ formatChatTime(msg.sys_create_datetime) }}
</span>
</div>
<p
class="truncate text-xs text-[var(--el-text-color-secondary)]"
>
{{ getMessagePreview(msg) }}
</p>
</div>
</li>
</template>
</ul>
</ElScrollbar>
<template v-else>
<div class="flex flex-1 items-center justify-center">
<ElEmpty :description="$t('message.drawer.noChats')">
<template #image>
<MessageSquare
class="size-16 text-[var(--el-text-color-placeholder)]"
/>
</template>
</ElEmpty>
</div>
</template>
</template>
<!-- 公告列表 -->
<template v-else>
<ElScrollbar v-if="announcements.length > 0" class="flex-1">