feat: hero背景&通知时间

src/views/notifications/index.vue

@@ -21,18 +21,68 @@
 </template>
 <script setup lang="ts">
 	import { computed, ref, onMounted } from 'vue'
+	import { useI18n } from 'vue-i18n'
 	import NotificationsList from './components/NotificationsList.vue'
 	import type { NotificationRecord } from './types'
 	import { fetchAllMessageList, markMessageAsRead, markAllMessagesAsRead } from '@/api/notification'
 
-	const notifications = ref<NotificationRecord[]>([])
+	const { locale } = useI18n()
+
+	// Store notifications with original date strings
+	interface NotificationWithOriginalDate extends NotificationRecord {
+		originalDate: string
+	}
+
+	const notificationsRaw = ref<NotificationWithOriginalDate[]>([])
 	const loading = ref(false)
 	const hasMore = ref(true)
 
+	/**
+	 * Format date based on current language
+	 * Chinese: yyyy年M月D日 (e.g., 2024年5月15日)
+	 * English: Month Day, Year (e.g., January 15, 2024)
+	 */
+	const formatDate = (dateString: string): string => {
+		if (!dateString) return ''
+		
+		const date = new Date(dateString)
+		if (isNaN(date.getTime())) return dateString
+
+		const isChinese = locale.value === 'CHINESE_SIMPLIFIED'
+
+		if (isChinese) {
+			// Chinese format: yyyy年M月D日 (without leading zeros)
+			const year = date.getFullYear()
+			const month = date.getMonth() + 1
+			const day = date.getDate()
+			return `${year}年${month}月${day}日`
+		} else {
+			// English format: Month Day, Year
+			const options: Intl.DateTimeFormatOptions = { 
+				year: 'numeric', 
+				month: 'long', 
+				day: 'numeric' 
+			}
+			return date.toLocaleDateString('en-US', options)
+		}
+	}
+
+	// Computed property that formats dates based on current locale
+	const notifications = computed<NotificationRecord[]>(() => {
+		return notificationsRaw.value.map((item) => ({
+			id: item.id,
+			title: item.title,
+			date: formatDate(item.originalDate),
+			content: item.content,
+			isUnread: item.isUnread,
+			isExpanded: item.isExpanded
+		}))
+	})
+
 	const unreadCount = computed(() => notifications.value.filter((item) => item.isUnread).length)
 
 	const handleToggleItem = async (id: NotificationRecord['id']) => {
-		const targetItem = notifications.value.find((item) => item.id === id)
+		const targetItem = notificationsRaw.value.find((item) => item.id === id)
 
 		if (!targetItem) return
 
@@ -47,7 +97,7 @@
 			}
 		}
 
-		notifications.value = notifications.value.map((item) => ({
+		notificationsRaw.value = notificationsRaw.value.map((item) => ({
 			...item,
 			isUnread: item.id === id ? false : item.isUnread,
 			isExpanded: item.id === id ? nextExpanded : false
@@ -57,7 +107,7 @@
 	const handleMarkAllAsRead = async () => {
 		try {
 			await markAllMessagesAsRead()
-			notifications.value = notifications.value.map((item) => ({
+			notificationsRaw.value = notificationsRaw.value.map((item) => ({
 				...item,
 				isUnread: false
 			}))
@@ -78,20 +128,21 @@
 		try {
 			const res = await fetchAllMessageList(params.value)
 			
-			// Transform API data to match NotificationRecord interface
-			const newNotifications: NotificationRecord[] = res.content.map((item: any) => ({
+			// Transform API data to match NotificationRecord interface with original date
+			const newNotifications: NotificationWithOriginalDate[] = res.content.map((item: any) => ({
 				id: String(item.id),
 				title: item.title,
-				date: item.createTime,
+				date: item.createTime, // This will be formatted by computed property
+				originalDate: item.createTime, // Store original date for re-formatting
 				content: item.content,
 				isUnread: item.isRead === 0,
 				isExpanded: false
 			}))
 
 			if (params.value.page === 1) {
-				notifications.value = newNotifications
+				notificationsRaw.value = newNotifications
 			} else {
-				notifications.value = [...notifications.value, ...newNotifications]
+				notificationsRaw.value = [...notificationsRaw.value, ...newNotifications]
 			}
 
 			// Check if there are more pages
@@ -134,17 +185,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: linear-gradient(
-				180deg,
-				rgba(245, 243, 240, 0.92) 0%,
-				rgba(250, 249, 246, 0.95) 100%
-			),
-			linear-gradient(
-				90deg,
-				rgba(227, 221, 212, 0.28) 0%,
-				rgba(255, 255, 255, 0.24) 50%,
-				rgba(227, 221, 212, 0.28) 100%
-			);
+		background: url('@/assets/images/wardrobe/settings_bg.jpg') no-repeat;
+    background-size: cover;
 		border-bottom: 0.05rem solid #dfd8d1;
 	}