From 7b9ec751373cc16ce748c0992ae3619e9b43aab1 Mon Sep 17 00:00:00 2001
From: DayByDay <43409392+gx-ydd@users.noreply.github.com>
Date: Sun, 10 May 2026 22:30:35 +0800
Subject: [PATCH] feat(ui-chat): respect locale and bucket message bubble
 timestamps by today/yesterday/earlier

Replace hardcoded zh-CN locale with vue-i18n locale.value, add a yesterday bucket reusing the security.activity.yesterday key, and fall back to YYYY/MM/DD HH:mm for older messages. Computes the previous day with setDate(getDate()-1) so DST transitions stay correct, and short-circuits invalid Date inputs.
---
 .../src/components/chat/MessageBubble.vue     | 37 +++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/mateclaw-ui/src/components/chat/MessageBubble.vue b/mateclaw-ui/src/components/chat/MessageBubble.vue
index edd4c766..e6f97308 100644
--- a/mateclaw-ui/src/components/chat/MessageBubble.vue
+++ b/mateclaw-ui/src/components/chat/MessageBubble.vue
@@ -423,7 +423,7 @@ import type { Message, MessageSegment, ChatAttachment, ToolCallMeta, PlanMeta }
 import type { ChatErrorInfo } from '@/types/chatError'
 
 const { renderMarkdown } = useMarkdownRenderer()
-const { t } = useI18n()
+const { t,locale} = useI18n()
 const { getToolLabel } = useToolLabel()
 const { blobUrls, loadAllImages, loadAllVideos, loadAllAudios, loadAllModels, downloadFile, openImage, getDisplayUrl, revokeAll } = useAuthenticatedAttachment()
 
@@ -747,8 +747,39 @@ watch(model3dAttachments, (atts) => {
 
 // --- 时间 ---
 const formattedTime = computed(() => {
-  if (!props.message.createTime) return ''
-  return new Date(props.message.createTime).toLocaleTimeString('zh-CN', {
+  const createTime = props.message.createTime
+  if (!createTime) return ''
+
+  const date = new Date(createTime)
+  if (Number.isNaN(date.getTime())) return ''
+
+  const now = new Date()
+
+  const sameDay = (a: Date, b: Date) =>
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+
+  const currentLocale = locale.value
+
+  const time = date.toLocaleTimeString(currentLocale, {
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+
+  if (sameDay(date, now)) return time
+
+  const yesterday = new Date(now)
+  yesterday.setDate(now.getDate() - 1)
+
+  if (sameDay(date, yesterday)) {
+    return `${t('security.activity.yesterday')} ${time}`
+  }
+
+  return date.toLocaleString(currentLocale, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
     hour: '2-digit',
     minute: '2-digit',
   })