From 6c4833dcd1012a241482a85719adeb7dfe00e47f Mon Sep 17 00:00:00 2001
From: tianqijiuyun-latiao
 <69459608+tianqijiuyun-latiao@users.noreply.github.com>
Date: Wed, 24 Jun 2026 10:07:52 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(settings):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E8=AF=AD=E8=A8=80=E8=AE=BE=E7=BD=AE=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9=E6=98=BE=E7=A4=BA=E6=88=AA=E6=96=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LanguageSettingsPanel.test.tsx | 16 ++++++-
 .../src/components/LanguageSettingsPanel.tsx  | 48 +++++++++++++++----
 2 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/LanguageSettingsPanel.test.tsx b/frontend/src/components/LanguageSettingsPanel.test.tsx
index 41a5be6d..15d0e8fb 100644
--- a/frontend/src/components/LanguageSettingsPanel.test.tsx
+++ b/frontend/src/components/LanguageSettingsPanel.test.tsx
@@ -35,9 +35,21 @@ describe("LanguageSettingsPanel", () => {
     expect(text).toContain("Deutsch");
     expect(text).toContain("Русский");
 
-    const segmented = renderer!.root.findByProps({ "aria-label": "Language" });
+    const group = renderer!.root.findByProps({ role: "radiogroup", "aria-label": "Language" });
+    expect(group.props.style.gridTemplateColumns).toBe("repeat(2, minmax(0, 1fr))");
+
+    const radios = renderer!.root.findAll((node) => node.type === "button" && node.props.role === "radio");
+    expect(radios).toHaveLength(7);
+    expect(radios[0]?.props["aria-checked"]).toBe(true);
+
+    const simplifiedChinese = radios.find((node) => {
+      const children = Array.isArray(node.props.children) ? node.props.children.join("") : String(node.props.children ?? "");
+      return children.includes("Simplified Chinese");
+    });
+    expect(simplifiedChinese).toBeDefined();
+
     await act(async () => {
-      segmented.props.onChange("zh-CN");
+      simplifiedChinese!.props.onClick();
     });
 
     expect(onPreferenceChange).toHaveBeenCalledWith("zh-CN");
diff --git a/frontend/src/components/LanguageSettingsPanel.tsx b/frontend/src/components/LanguageSettingsPanel.tsx
index 9a049a1f..bb0f1a2c 100644
--- a/frontend/src/components/LanguageSettingsPanel.tsx
+++ b/frontend/src/components/LanguageSettingsPanel.tsx
@@ -1,8 +1,30 @@
 import React from "react";
-import { Segmented } from "antd";
 import { useI18n } from "../i18n/provider";
 import type { LanguagePreference } from "../i18n/types";
 
+const groupStyle: React.CSSProperties = {
+  display: "grid",
+  gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+  gap: 10,
+};
+
+const getOptionStyle = (selected: boolean): React.CSSProperties => ({
+  minHeight: 44,
+  borderRadius: 12,
+  border: selected ? "1px solid rgba(255, 255, 255, 0.55)" : "1px solid rgba(160, 179, 209, 0.10)",
+  background: selected
+    ? "linear-gradient(180deg, #f7f9fd 0%, #dfe5f1 100%)"
+    : "rgba(56, 64, 79, 0.78)",
+  color: selected ? "#151922" : "#d3d9e6",
+  padding: "10px 14px",
+  fontSize: 14,
+  fontWeight: 600,
+  textAlign: "center",
+  cursor: "pointer",
+  whiteSpace: "nowrap",
+  boxShadow: selected ? "inset 0 1px 0 rgba(255, 255, 255, 0.5)" : "none",
+});
+
 const LanguageSettingsPanel: React.FC = () => {
   const { preference, setPreference, t } = useI18n();
 
@@ -22,13 +44,23 @@ const LanguageSettingsPanel: React.FC = () => {
         <div style={{ fontSize: 14, fontWeight: 600 }}>{t("settings.language.title")}</div>
         <div style={{ fontSize: 12, opacity: 0.72 }}>{t("settings.language.description")}</div>
       </div>
-      <Segmented
-        aria-label={t("settings.language.title")}
-        block
-        options={options}
-        value={preference}
-        onChange={(value) => setPreference(value as LanguagePreference)}
-      />
+      <div role="radiogroup" aria-label={t("settings.language.title")} style={groupStyle}>
+        {options.map((option) => {
+          const selected = option.value === preference;
+          return (
+            <button
+              key={option.value}
+              type="button"
+              role="radio"
+              aria-checked={selected}
+              onClick={() => setPreference(option.value)}
+              style={getOptionStyle(selected)}
+            >
+              {option.label}
+            </button>
+          );
+        })}
+      </div>
       <div style={{ fontSize: 12, opacity: 0.64 }}>
         {t("settings.language.restart_hint")}
       </div>