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

@@ -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 (
     <nav
@@ -102,7 +117,7 @@ export default function BottomNav() {
                     textShadow: isActive ? "0 0 8px rgba(0,255,246,0.5)" : "none",
                   }}
                 >
-                  {item.label}
+                  {navText[item.labelKey]}
                 </span>
               </div>
           );