From ae4ce8bb07728f0acac3bd1e627a1f0a3cdb9d96 Mon Sep 17 00:00:00 2001 From: yangy Date: Mon, 11 May 2026 17:42:18 +0800 Subject: [PATCH] Refactor BottomNav to use localized labels for navigation items; added support for dynamic language selection based on device state. Updated locale files for English, Traditional Chinese, and Simplified Chinese to include bottom navigation labels. --- client/src/components/BottomNav.tsx | 31 +++- client/src/locales/data-en.json | 65 ++++++- client/src/locales/data-zh-HK.json | 63 ++++++- client/src/locales/data-zh.json | 63 ++++++- client/src/pages/EQPage.tsx | 274 +++++++++++++++++----------- client/src/pages/Home.tsx | 163 +++++++++++++---- client/src/pages/VUPage.tsx | 85 +++++---- 7 files changed, 552 insertions(+), 192 deletions(-) diff --git a/client/src/components/BottomNav.tsx b/client/src/components/BottomNav.tsx index 7e3f3ba..603e93c 100644 --- a/client/src/components/BottomNav.tsx +++ b/client/src/components/BottomNav.tsx @@ -1,13 +1,17 @@ /* ============================================================ BOTTOM NAV — Luxsin X9 Controller (Mobile) Design: iOS/Android App-style bottom tab bar - 5 tabs: 社区 / HP-EQ / 主页 / Effect / 我的AI + 5 tabs — labels from locales/bottomNav, language = deviceState.language (同系统页) - Active tab: cyan icon + top indicator bar - Inactive: muted icon + label ============================================================ */ +import { useDevice } from "@/contexts/DeviceContext"; import { cn } from "@/lib/utils"; import { useAIDrawer } from "@/contexts/AIDrawerContext"; import { useIsLgUp } from "@/hooks/useIsLgUp"; +import localeZh from "@/locales/data-zh.json"; +import localeZhHK from "@/locales/data-zh-HK.json"; +import localeEn from "@/locales/data-en.json"; import { Activity, Bot, @@ -16,25 +20,36 @@ import { Sliders, } from "lucide-react"; import { Link, useLocation } from "wouter"; +import { useMemo } from "react"; + +type BottomNavLocale = NonNullable<(typeof localeZh)["bottomNav"]>; interface NavItem { path: string; icon: React.ComponentType<{ size?: number; className?: string }>; - label: string; + labelKey: keyof BottomNavLocale; } const NAV_ITEMS: NavItem[] = [ - { path: "/community", icon: MessageSquare, label: "社区" }, - { path: "/eq", icon: Sliders, label: "HP-EQ" }, - { path: "/", icon: Home, label: "主页" }, - { path: "/effects", icon: Activity, label: "Effect" }, - { path: "/ai", icon: Bot, label: "我的AI" }, + { path: "/community", icon: MessageSquare, labelKey: "community" }, + { path: "/eq", icon: Sliders, labelKey: "hpEq" }, + { path: "/", icon: Home, labelKey: "home" }, + { path: "/effects", icon: Activity, labelKey: "effects" }, + { path: "/ai", icon: Bot, labelKey: "myAi" }, ]; export default function BottomNav() { const [location] = useLocation(); const isLgUp = useIsLgUp(); const { open: aiDrawerOpen, setOpen: setAiDrawerOpen } = useAIDrawer(); + const { deviceState } = useDevice(); + + const navText = useMemo((): BottomNavLocale => { + const lang = deviceState?.language; + const pack = + lang === 0 ? localeEn : lang === 1 ? localeZhHK : localeZh; + return (pack.bottomNav ?? localeZh.bottomNav) as BottomNavLocale; + }, [deviceState?.language]); return (