消息渠道的消息支持多语言

src/components/settings/channel-other-tab.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { Loader2 } from "lucide-react"
+import { useTranslations } from "next-intl"
+import { toast } from "sonner"
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { getChatMessageLanguage, setChatMessageLanguage } from "@/lib/api"
+
+const SUPPORTED_LANGUAGES = [
+  "en",
+  "zh-cn",
+  "zh-tw",
+  "ja",
+  "ko",
+  "es",
+  "de",
+  "fr",
+  "pt",
+  "ar",
+] as const
+
+export function ChannelOtherTab() {
+  const t = useTranslations("ChatChannelSettings.language")
+  const [language, setLanguage] = useState("en")
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    getChatMessageLanguage()
+      .then((lang) => setLanguage(lang))
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [])
+
+  const handleLanguageChange = useCallback(
+    async (value: string) => {
+      setSaving(true)
+      try {
+        await setChatMessageLanguage(value)
+        setLanguage(value)
+        toast.success(t("saved"))
+      } catch {
+        toast.error(t("saveFailed"))
+      } finally {
+        setSaving(false)
+      }
+    },
+    [t]
+  )
+
+  if (loading) {
+    return (
+      <div className="h-full flex items-center justify-center text-sm text-muted-foreground gap-2">
+        <Loader2 className="h-4 w-4 animate-spin" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <section className="space-y-2">
+        <h3 className="text-sm font-medium">{t("title")}</h3>
+        <p className="text-xs text-muted-foreground">{t("description")}</p>
+        <Select
+          value={language}
+          onValueChange={handleLanguageChange}
+          disabled={saving}
+        >
+          <SelectTrigger className="w-56">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {SUPPORTED_LANGUAGES.map((lang) => (
+              <SelectItem key={lang} value={lang}>
+                {t(lang)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </section>
+    </div>
+  )
+}

src/components/settings/chat-channel-settings.tsx

@@ -6,6 +6,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { ChannelListTab } from "./channel-list-tab"
 import { ChannelCommandsTab } from "./channel-commands-tab"
 import { ChannelEventsTab } from "./channel-events-tab"
+import { ChannelOtherTab } from "./channel-other-tab"
 
 export function ChatChannelSettings() {
   const t = useTranslations("ChatChannelSettings")
@@ -24,6 +25,7 @@ export function ChatChannelSettings() {
             <TabsTrigger value="channels">{t("tabs.channels")}</TabsTrigger>
             <TabsTrigger value="commands">{t("tabs.commands")}</TabsTrigger>
             <TabsTrigger value="events">{t("tabs.events")}</TabsTrigger>
+            <TabsTrigger value="other">{t("tabs.other")}</TabsTrigger>
           </TabsList>
         </section>
 
@@ -36,6 +38,9 @@ export function ChatChannelSettings() {
         <TabsContent value="events" className="mt-0">
           <ChannelEventsTab />
         </TabsContent>
+        <TabsContent value="other" className="mt-0">
+          <ChannelOtherTab />
+        </TabsContent>
       </Tabs>
     </div>
   )