通知菜单及页面实现多语言支持

dashboard/src/components/NavigationItems.vue

@@ -46,7 +46,7 @@ export default {
 					condition: !onboardingComplete,
 				},
 				{
-					name: '通知',
+					name: this.$t('Notifications'),
 					icon: () => h(Notification),
 					route: '/notifications',
 					isActive: routeName === 'Jcloud Notification List',

dashboard/src/components/Sidebar.vue

@@ -58,7 +58,7 @@
 							<span class="mr-1.5">
 								<FeatherIcon name="inbox" class="h-4.5 w-4.5 text-gray-700" />
 							</span>
-							<span class="text-sm">Notifications </span>
+							<span class="text-sm">{{ $t('Notifications') }} </span>
 							<span
 								v-if="unreadNotificationsCount > 0"
 								class="ml-auto rounded bg-gray-400 px-1.5 py-0.5 text-xs text-white"

dashboard/src/objects/notification.js

@@ -6,6 +6,7 @@ import { Tooltip, jingrowRequest } from 'jingrow-ui';
 import { icon } from '../utils/components';
 import { getTeam } from '../data/team';
 import { toast } from 'vue-sonner';
+import { t } from '../utils/i18n';
 
 const getNotification = (name) => {
 	return getDocResource({
@@ -35,16 +36,16 @@ export default {
 			};
 		},
 		route: '/notifications',
-		title: '通知',
+		title: t('Notifications'),
 		orderBy: 'creation desc',
 		filterControls() {
 			return [
 				{
 					type: 'tab',
-					label: '已读',
+					label: t('Read'),
 					fieldname: 'read',
-					options: ['全部', '未读'],
-					default: '未读',
+					options: [t('All'), t('Unread')],
+					default: t('Unread'),
 				},
 			];
 		},
@@ -59,7 +60,7 @@ export default {
 		actions({ listResource: notifications }) {
 			return [
 				{
-					label: '全部标记为已读',
+					label: t('Mark All as Read'),
 					slots: {
 						prefix: icon('check-circle'),
 					},
@@ -71,9 +72,9 @@ export default {
 							{
 								success: () => {
 									notifications.reload();
-									return '所有通知已标记为已读';
+									return t('All notifications marked as read');
 								},
-								loading: '正在将所有通知标记为已读...',
+								loading: t('Marking all notifications as read...'),
 								error: (error) =>
 									error.messages?.length
 										? error.messages.join('\n')
@@ -86,7 +87,7 @@ export default {
 		},
 		columns: [
 			{
-				label: '标题',
+				label: t('Title'),
 				fieldname: 'title',
 				width: '20rem',
 				format(value, row) {
@@ -98,7 +99,7 @@ export default {
 						return h(
 							Tooltip,
 							{
-								text: '此通知需要您的关注',
+								text: t('This notification requires your attention'),
 							},
 							{
 								default: () =>
@@ -115,7 +116,7 @@ export default {
 				},
 			},
 			{
-				label: '消息',
+				label: t('Message'),
 				fieldname: 'message',
 				type: 'Component',
 				width: '40rem',

dashboard/src/views/notifications/Notifications.vue

@@ -4,11 +4,11 @@
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-5 py-2.5"
 		>
 			<Breadcrumbs
-				:items="[{ label: 'Notifications', route: { name: 'Notifications' } }]"
+				:items="[{ label: $t('Notifications'), route: { name: 'Notifications' } }]"
 			>
 				<template #actions>
 					<TabButtons
-						:buttons="[{ label: 'Unread', active: true }, { label: 'Read' }]"
+						:buttons="tabButtons"
 						v-model="activeTab"
 					/>
 				</template>
@@ -29,13 +29,13 @@
 						<Button
 							v-if="notification.route"
 							variant="ghost"
-							label="View"
+							:label="$t('View')"
 							@click="openNotification(notification)"
 						/>
 					</template>
 				</ListItem>
 				<div v-if="!notifications?.length" class="text-base text-gray-600">
-					No Notifications
+					{{ $t('No Notifications') }}
 				</div>
 			</div>
 		</div>
@@ -50,7 +50,7 @@ export default {
 	name: 'Notifications',
 	pageMeta() {
 		return {
-			title: 'Notifications'
+			title: this.$t('Notifications')
 		};
 	},
 	components: {
@@ -58,12 +58,31 @@ export default {
 	},
 	data() {
 		return {
-			activeTab: 'Unread'
+			activeTab: null
 		};
 	},
+	computed: {
+		tabButtons() {
+			return [
+				{ label: this.$t('Unread'), active: true },
+				{ label: this.$t('Read') }
+			];
+		},
+		notifications() {
+			return this.activeTab === this.$t('Unread')
+				? this.$resources.unreadNotifications.data
+				: this.$resources.readNotifications.data;
+		}
+	},
+	mounted() {
+		// 初始化 activeTab 为第一个按钮的 label
+		if (!this.activeTab) {
+			this.activeTab = this.tabButtons[0].label;
+		}
+	},
 	resources: {
 		unreadNotifications() {
-			if (this.activeTab !== 'Unread') return;
+			if (this.activeTab !== this.$t('Unread')) return;
 			return {
 				url: 'jcloud.api.notifications.get_notifications',
 				params: {
@@ -74,7 +93,7 @@ export default {
 			};
 		},
 		readNotifications() {
-			if (this.activeTab !== 'Read') return;
+			if (this.activeTab !== this.$t('Read')) return;
 			return {
 				url: 'jcloud.api.notifications.get_notifications',
 				params: {
@@ -102,13 +121,6 @@ export default {
 			}
 			this.$router.push(notification.route);
 		}
-	},
-	computed: {
-		notifications() {
-			return this.activeTab === 'Unread'
-				? this.$resources.unreadNotifications.data
-				: this.$resources.readNotifications.data;
-		}
 	}
 };
 </script>

jcloud/translations/zh.csv

@@ -174,6 +174,11 @@ No,No,
 Not Permitted,不允许,
 Note,注,
 Notifications,通知,
+No Notifications,无通知,
+Mark All as Read,全部标记为已读,
+All notifications marked as read,所有通知已标记为已读,
+Marking all notifications as read...,正在将所有通知标记为已读...,
+This notification requires your attention,此通知需要您的关注,
 Number,数,
 Onboarding,入职,
 Open,开,
@@ -216,6 +221,7 @@ Queued,排队,
 Rating,评分,
 Razorpay Settings,Razorpay设置,
 Read,阅读,
+Unread,未读,
 Reason,原因,
 Rebuild,重建,
 Recipient,收件人,