From c915efe4e9222fae0b4d1f198be901f92e00baea Mon Sep 17 00:00:00 2001
From: Jeff Gu <idevs@foxmail.com>
Date: Tue, 14 Apr 2026 17:17:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(add):=20=E6=96=B0=E5=A2=9E=20ButtonGroup?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                  |  1 +
 frontend/src/components/ui/button-group.tsx | 63 +++++++++++++++++++++
 frontend/src/pages/SystemSettings.tsx       | 33 ++++-------
 3 files changed, 76 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/components/ui/button-group.tsx

diff --git a/.gitignore b/.gitignore
index 2350960..26d670b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,4 @@ lerna-debug.log*
 public*/
 bun.lock
 *.local.jsonc
+docs/
diff --git a/frontend/src/components/ui/button-group.tsx b/frontend/src/components/ui/button-group.tsx
new file mode 100644
index 0000000..a6e54f8
--- /dev/null
+++ b/frontend/src/components/ui/button-group.tsx
@@ -0,0 +1,63 @@
+import * as React from "react";
+
+import { Button, type ButtonProps } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type ButtonGroupValue = string | number;
+
+export interface ButtonGroupOption<T extends ButtonGroupValue = ButtonGroupValue> {
+  label: React.ReactNode;
+  value: T;
+  disabled?: boolean;
+}
+
+export interface ButtonGroupProps<T extends ButtonGroupValue = ButtonGroupValue>
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  value: T;
+  options: readonly ButtonGroupOption<T>[];
+  onValueChange: (value: T) => void;
+  size?: ButtonProps["size"];
+  activeVariant?: ButtonProps["variant"];
+  inactiveVariant?: ButtonProps["variant"];
+  buttonClassName?: string;
+}
+
+export function ButtonGroup<T extends ButtonGroupValue = ButtonGroupValue>({
+  value,
+  options,
+  onValueChange,
+  size = "sm",
+  activeVariant = "default",
+  inactiveVariant = "outline",
+  className,
+  buttonClassName,
+  ...props
+}: ButtonGroupProps<T>) {
+  return (
+    <div
+      {...props}
+      role="radiogroup"
+      className={cn("inline-flex flex-wrap rounded-md border border-border", className)}
+    >
+      {options.map((option) => {
+        const isActive = Object.is(option.value, value);
+
+        return (
+          <Button
+            key={String(option.value)}
+            type="button"
+            role="radio"
+            aria-checked={isActive}
+            variant={isActive ? activeVariant : inactiveVariant}
+            size={size}
+            disabled={option.disabled}
+            onClick={() => onValueChange(option.value)}
+            className={cn("border-0", size === "sm" && "h-8", buttonClassName)}
+          >
+            {option.label}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/frontend/src/pages/SystemSettings.tsx b/frontend/src/pages/SystemSettings.tsx
index 4335c1f..e7a95ab 100644
--- a/frontend/src/pages/SystemSettings.tsx
+++ b/frontend/src/pages/SystemSettings.tsx
@@ -4,6 +4,7 @@ import { Bot, Check, FileText, Globe, Shield, SlidersHorizontal } from "lucide-r
 
 import { apiClient } from "@/api/client";
 import { Button } from "@/components/ui/button";
+import { ButtonGroup } from "@/components/ui/button-group";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
@@ -366,27 +367,17 @@ export function SystemSettings() {
             </div>
           </div>
           <div className="flex-1" />
-          <div className="inline-flex flex-wrap rounded-md border">
-            {PRECISION_OPTIONS.map((option) => {
-              const isActive = normalizedSystemConfig.displayDecimals === option.value;
-              return (
-                <Button
-                  key={option.value}
-                  type="button"
-                  variant={isActive ? "default" : "outline"}
-                  onClick={() =>
-                    setSystemConfig((current) => ({
-                      ...current,
-                      displayDecimals: option.value,
-                    }))
-                  }
-                  className="h-8 border-0"
-                >
-                  {option.label}
-                </Button>
-              );
-            })}
-          </div>
+          <ButtonGroup
+            aria-label="显示金额精度"
+            value={normalizedSystemConfig.displayDecimals}
+            options={PRECISION_OPTIONS}
+            onValueChange={(value) =>
+              setSystemConfig((current) => ({
+                ...current,
+                displayDecimals: value,
+              }))
+            }
+          />
         </section>
 
         <div className="h-px bg-border" />