feat(i18n): improve language switch functionality and update UI elements for better consistency

web/src/components/layout/user-status-actions.tsx

@@ -1,6 +1,5 @@
 import type { CSSProperties } from "react";
-import { BookOpen, Globe2, Keyboard, Puzzle, Settings2 } from "lucide-react";
-import { Dropdown } from "antd";
+import { BookOpen, Keyboard, Puzzle, Settings2 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
@@ -26,11 +25,14 @@ export function UserStatusActions({ showConfig = true, variant = "default", onOp
     const setTheme = useThemeStore((state) => state.setTheme);
     const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
     const canvasTheme = canvasThemes[theme];
-    const naturalIconClass = "inline-flex size-7 shrink-0 items-center justify-center text-stone-600 transition hover:text-stone-950 dark:text-stone-300 dark:hover:text-white [&_svg]:size-4";
+    const naturalIconClass = "inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-stone-600 transition-colors hover:bg-black/5 hover:text-stone-950 dark:text-stone-300 dark:hover:bg-white/10 dark:hover:text-white [&_svg]:size-4";
     const iconStyle: CSSProperties | undefined = variant === "canvas" ? { color: canvasTheme.node.text } : undefined;
     const versionStyle = iconStyle;
     const gitHubClassName = "size-7 text-base";
     const gitHubStyle = iconStyle;
+    const locale = i18n.resolvedLanguage as AppLocale;
+    const nextLocale = locale === "zh-CN" ? "en-US" : "zh-CN";
+    const languageLabel = t("topNav.switchLanguage", { language: t(nextLocale === "zh-CN" ? "locale.zhCN" : "locale.enUS") });
 
     return (
         <div className="inline-flex shrink-0 items-center gap-1">
@@ -47,22 +49,9 @@ export function UserStatusActions({ showConfig = true, variant = "default", onOp
                     <Settings2 className="size-4" />
                 </button>
             ) : null}
-            <Dropdown
-                trigger={["click"]}
-                placement="bottomRight"
-                menu={{
-                    selectedKeys: [i18n.resolvedLanguage],
-                    items: [
-                        { key: "zh-CN", label: t("locale.zhCN") },
-                        { key: "en-US", label: t("locale.enUS") },
-                    ],
-                    onClick: ({ key }) => void changeAppLocale(key as AppLocale),
-                }}
-            >
-                <button type="button" className={naturalIconClass} style={iconStyle} aria-label={t("topNav.language")} title={t("topNav.language")}>
-                    <Globe2 className="size-4" />
-                </button>
-            </Dropdown>
+            <button type="button" className={`${naturalIconClass} text-[11px] font-semibold tracking-tight`} style={iconStyle} onClick={() => void changeAppLocale(nextLocale)} aria-label={languageLabel} title={languageLabel}>
+                {locale === "zh-CN" ? "中" : "EN"}
+            </button>
             <AnimatedThemeToggler theme={theme} onThemeChange={setTheme} className={naturalIconClass} style={iconStyle} aria-label={t(theme === "dark" ? "topNav.lightTheme" : "topNav.darkTheme")} title={t(theme === "dark" ? "topNav.lightTheme" : "topNav.darkTheme")} />
             <VersionReleaseModal style={versionStyle} />
             <GitHubLink className={cn("bg-transparent hover:bg-transparent dark:hover:bg-transparent", gitHubClassName)} style={gitHubStyle} />

web/src/i18n/locales/en-US.ts

@@ -323,7 +323,7 @@ export default {
         closeAgent: "Close Agent",
         plugins: "Node plugins",
         docs: "Documentation",
-        language: "Change language",
+        switchLanguage: "Switch to {{language}}",
         shortcuts: "Keyboard shortcuts",
         lightTheme: "Switch to light theme",
         darkTheme: "Switch to dark theme",

web/src/i18n/locales/zh-CN.ts

@@ -323,7 +323,7 @@ export default {
         closeAgent: "收起 Agent",
         plugins: "节点插件",
         docs: "文档",
-        language: "切换语言",
+        switchLanguage: "切换到 {{language}}",
         shortcuts: "快捷键",
         lightTheme: "切换到浅色主题",
         darkTheme: "切换到深色主题",