From c94a601f837310560949fd68b125cc2d0ecf941c Mon Sep 17 00:00:00 2001 From: Innei Date: Tue, 18 Nov 2025 14:38:02 +0800 Subject: [PATCH] feat(i18n): enhance dashboard with internationalization support - Integrated `useTranslation` from `react-i18next` across various components for localization. - Updated navigation, settings, and photo management components to utilize translation keys for labels and descriptions. - Refactored error messages and user prompts to support multiple languages. - Improved user experience by ensuring all relevant text is translatable, enhancing accessibility for non-English users. Signed-off-by: Innei --- .../src/components/common/Header.tsx | 38 +- .../src/components/navigation/PageTabs.tsx | 11 +- be/apps/dashboard/src/global.d.ts | 6 +- be/apps/dashboard/src/hooks/useBlock.ts | 41 ++- .../dashboard/src/hooks/useRoutePermission.ts | 4 +- be/apps/dashboard/src/lib/errors.ts | 6 +- .../analytics/components/AnalyticsPage.tsx | 156 ++++++-- .../components/SocialConnectionSettings.tsx | 52 +-- .../components/BuilderSettingsForm.tsx | 27 +- .../components/DashboardOverview.tsx | 244 +++++++++---- .../components/DataManagementPanel.tsx | 214 ++++++++--- .../src/modules/data-management/hooks.ts | 22 +- .../photos/components/PhotoPageScaffold.tsx | 12 +- .../sync/PhotoSyncConflictsPanel.tsx | 4 +- .../sync/PhotoSyncProgressPanel.tsx | 24 +- .../components/sync/PhotoSyncResultPanel.tsx | 19 +- .../components/usage/PhotoUsagePanel.tsx | 17 +- .../dashboard/src/modules/photos/constants.ts | 76 ++-- .../schema-form/SchemaFormRenderer.tsx | 40 ++- .../components/SettingsNavigation.tsx | 10 +- .../dashboard/src/modules/super-admin/api.ts | 10 +- .../components/SuperAdminSettingsForm.tsx | 35 +- .../components/SuperAdminTenantManager.tsx | 74 ++-- be/apps/dashboard/src/pages/(main)/plan.tsx | 121 +++++-- .../src/pages/(main)/settings/account.tsx | 5 +- .../src/pages/(main)/settings/data.tsx | 5 +- .../src/pages/(main)/settings/site.tsx | 5 +- .../src/pages/(main)/settings/user.tsx | 5 +- be/apps/dashboard/src/pages/no-access.tsx | 13 +- .../src/pages/superadmin/builder.tsx | 4 +- .../dashboard/src/pages/superadmin/debug.tsx | 230 ++++++++---- .../dashboard/src/pages/superadmin/layout.tsx | 16 +- .../dashboard/src/pages/superadmin/plans.tsx | 8 +- .../src/pages/superadmin/settings.tsx | 6 +- .../src/pages/superadmin/tenants.tsx | 6 +- locales/dashboard/en.json | 334 +++++++++++++++++- locales/dashboard/zh-CN.json | 334 +++++++++++++++++- 37 files changed, 1782 insertions(+), 452 deletions(-) diff --git a/be/apps/dashboard/src/components/common/Header.tsx b/be/apps/dashboard/src/components/common/Header.tsx index af6b2b0a..cf2a8719 100644 --- a/be/apps/dashboard/src/components/common/Header.tsx +++ b/be/apps/dashboard/src/components/common/Header.tsx @@ -1,4 +1,5 @@ import { clsxm } from '@afilmory/utils' +import { useTranslation } from 'react-i18next' import { NavLink, useNavigate } from 'react-router' import { useAuthUserValue } from '~/atoms/auth' @@ -7,17 +8,18 @@ import { useTenantPlanQuery } from '~/modules/billing' import { UserMenu } from './UserMenu' const navigationTabs = [ - { label: 'Dashboard', path: '/' }, - { label: 'Photos', path: '/photos' }, - { label: 'Analytics', path: '/analytics' }, - { label: 'Settings', path: '/settings' }, -] as const + { labelKey: 'nav.overview', path: '/' }, + { labelKey: 'nav.photos', path: '/photos' }, + { labelKey: 'nav.analytics', path: '/analytics' }, + { labelKey: 'nav.settings', path: '/settings' }, +] as const satisfies readonly { labelKey: I18nKeys; path: string }[] export function Header() { const user = useAuthUserValue() const planQuery = useTenantPlanQuery({ enabled: Boolean(user) }) const planLabel = planQuery.data?.plan?.name ?? planQuery.data?.plan?.planId ?? null const navigate = useNavigate() + const { t } = useTranslation() return (
@@ -39,7 +41,7 @@ export function Header() { isActive ? 'bg-accent/10 text-accent' : 'text-text-secondary hover:text-text', )} > - {tab.label} + {t(tab.labelKey)} )} @@ -49,7 +51,12 @@ export function Header() { {/* Right side - User Menu */} {user && (
- navigate('/plan')} /> + navigate('/plan')} + labelKey="header.plan.badge" + />
)} @@ -58,7 +65,18 @@ export function Header() { ) } -function PlanBadge({ label, isLoading, onClick }: { label: string | null; isLoading: boolean; onClick: () => void }) { +function PlanBadge({ + label, + isLoading, + onClick, + labelKey, +}: { + label: string | null + isLoading: boolean + onClick: () => void + labelKey: I18nKeys +}) { + const { t } = useTranslation() if (isLoading && !label) { return
} @@ -73,7 +91,9 @@ function PlanBadge({ label, isLoading, onClick }: { label: string | null; isLoad onClick={onClick} className="bg-fill/30 text-text-secondary hover:bg-fill/50 flex items-center gap-1.5 rounded border border-fill-tertiary/30 px-2.5 py-1 text-xs font-medium transition sm:text-[13px]" > - Plan + + {t(labelKey)} +