Update locale files for English, Traditional Chinese, and Simplified Chinese to include page titles for I/O section; refactor IOPage to dynamically display the localized title based on device language state.

client/src/locales/data-en.json

@@ -33,6 +33,7 @@
   },
   "source": {
     "label": "Input/Output",
+    "pageTitle": "I/O",
     "input": {
       "coaxial": "COAXIAL",
       "optical": "OPTICAL",

client/src/locales/data-zh-HK.json

@@ -33,6 +33,7 @@
   },
   "source": {
     "label": "輸入/輸出",
+    "pageTitle": "輸入/輸出",
     "input": { "coaxial": "同軸", "optical": "光纖", "bluetooth": "藍牙", "rca": "類比RCA" },
     "output": { "headset": "耳機" }
   },

client/src/locales/data-zh.json

@@ -33,6 +33,7 @@
   },
   "source": {
     "label": "输入输出",
+    "pageTitle": "输入输出",
     "input": { "coaxial": "同轴", "optical": "光钎", "bluetooth": "蓝牙", "rca": "模拟RCA" },
     "output": { "headset": "耳机" }
   },

client/src/pages/IOPage.tsx

@@ -10,6 +10,10 @@ import { cn } from "@/lib/utils";
 import BottomNav from "@/components/BottomNav";
 import { ChevronLeft } from "lucide-react";
 import { useLocation } from "wouter";
+import { useMemo } from "react";
+import localeZh from "@/locales/data-zh.json";
+import localeZhHK from "@/locales/data-zh-HK.json";
+import localeEn from "@/locales/data-en.json";
 
 interface IOOption {
   index: number;
@@ -101,6 +105,12 @@ export default function IOPage() {
   const [, setLocation] = useLocation();
   const { deviceState, setInput, setOutput } = useDevice();
 
+  const ioPageTitle = useMemo(() => {
+    const lang = deviceState?.language;
+    const pack = lang === 0 ? localeEn : lang === 1 ? localeZhHK : localeZh;
+    return pack.source?.pageTitle ?? pack.source?.label ?? "输入输出";
+  }, [deviceState?.language]);
+
   const currentInput = deviceState?.input ?? 1;
   const currentOutput = deviceState?.output ?? 2;
 
@@ -110,7 +120,7 @@ export default function IOPage() {
         <button onClick={() => setLocation("/")} className="mr-4 text-white/60 active:text-white transition-colors">
           <ChevronLeft size={24} />
         </button>
-        <h1 className="flex-1 text-center text-[17px] font-semibold text-white">输入输出</h1>
+        <h1 className="flex-1 text-center text-[17px] font-semibold text-white">{ioPageTitle}</h1>
         <div className="w-8" />
       </div>