From 355a2d11cd782ef7c4c9e9d7cc9e0618aabfd8dd Mon Sep 17 00:00:00 2001
From: Yaojia Wang <yaojia.wang@billo.life>
Date: Sat, 11 Jul 2026 14:04:01 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui):=20Checkbox/Radio=20=E5=8E=9F=E5=AD=90?=
 =?UTF-8?q?=E4=BB=B6=20+=203=20=E5=A4=84=E5=8E=9F=E7=94=9F=E6=8E=A7?=
 =?UTF-8?q?=E4=BB=B6=E9=87=87=E7=94=A8=EF=BC=88P2-5=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- checkboxClass/radioClass（accent-cinnabar + 统一焦点环）+ 同名测试
- Checkbox/Radio 原子件：无 label 只渲染受控原生 input 便于就地替换
- 采用：ChainStarter 链类型单选、GeneratorRunner 入库勾选、CharacterCardItem 角色勾选
---
 apps/web/components/chain/ChainStarter.tsx    |  4 ++--
 .../generation/CharacterCardItem.tsx          |  5 ++---
 .../components/toolbox/GeneratorRunner.tsx    |  4 ++--
 apps/web/components/ui/Checkbox.tsx           | 20 +++++++++++++++++++
 apps/web/components/ui/Radio.tsx              | 20 +++++++++++++++++++
 apps/web/lib/ui/variants.test.ts              | 10 ++++++++++
 apps/web/lib/ui/variants.ts                   | 12 +++++++++++
 7 files changed, 68 insertions(+), 7 deletions(-)
 create mode 100644 apps/web/components/ui/Checkbox.tsx
 create mode 100644 apps/web/components/ui/Radio.tsx

diff --git a/apps/web/components/chain/ChainStarter.tsx b/apps/web/components/chain/ChainStarter.tsx
index 4e56fdd..78cfe65 100644
--- a/apps/web/components/chain/ChainStarter.tsx
+++ b/apps/web/components/chain/ChainStarter.tsx
@@ -5,6 +5,7 @@ import { Play } from "lucide-react";
 
 import { Button } from "@/components/ui/Button";
 import { Field } from "@/components/ui/Field";
+import { Radio } from "@/components/ui/Radio";
 import { SectionHeader } from "@/components/ui/SectionHeader";
 import { TextInput } from "@/components/ui/TextInput";
 import { CHAIN_KINDS, type ChainKind } from "@/lib/chain/chain";
@@ -58,8 +59,7 @@ export function ChainStarter({ onStart, disabled }: ChainStarterProps) {
               key={kind.key}
               className="flex items-start gap-2 text-sm text-ink"
             >
-              <input
-                type="radio"
+              <Radio
                 name="chain-kind"
                 value={kind.key}
                 checked={chainKey === kind.key}
diff --git a/apps/web/components/generation/CharacterCardItem.tsx b/apps/web/components/generation/CharacterCardItem.tsx
index 0137fdd..039972f 100644
--- a/apps/web/components/generation/CharacterCardItem.tsx
+++ b/apps/web/components/generation/CharacterCardItem.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Checkbox } from "@/components/ui/Checkbox";
 import { TextInput } from "@/components/ui/TextInput";
 import type { CharacterCardView } from "@/lib/api/types";
 
@@ -25,12 +26,10 @@ export function CharacterCardItem({
       }`}
     >
       <header className="mb-2 flex items-center gap-2">
-        <input
-          type="checkbox"
+        <Checkbox
           checked={selected}
           onChange={onToggle}
           aria-label={`选择角色 ${card.name}`}
-          className="size-4 accent-cinnabar"
         />
         {onEdit ? (
           <TextInput
diff --git a/apps/web/components/toolbox/GeneratorRunner.tsx b/apps/web/components/toolbox/GeneratorRunner.tsx
index 32fb0a9..b5e4479 100644
--- a/apps/web/components/toolbox/GeneratorRunner.tsx
+++ b/apps/web/components/toolbox/GeneratorRunner.tsx
@@ -7,6 +7,7 @@ import { useToast } from "@/components/Toast";
 import { ConflictAdjudication } from "@/components/generation/ConflictAdjudication";
 import { Button } from "@/components/ui/Button";
 import { Badge } from "@/components/ui/Badge";
+import { Checkbox } from "@/components/ui/Checkbox";
 import { Field } from "@/components/ui/Field";
 import { StatusNote } from "@/components/ui/StatusNote";
 import { TextArea } from "@/components/ui/TextArea";
@@ -380,8 +381,7 @@ function PreviewRow({
   return (
     <li className="flex gap-2 rounded border border-line bg-bg p-3 text-sm">
       {selectable ? (
-        <input
-          type="checkbox"
+        <Checkbox
           checked={checked}
           onChange={() => onToggle(index)}
           className="mt-1"
diff --git a/apps/web/components/ui/Checkbox.tsx b/apps/web/components/ui/Checkbox.tsx
new file mode 100644
index 0000000..f6cf0b9
--- /dev/null
+++ b/apps/web/components/ui/Checkbox.tsx
@@ -0,0 +1,20 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+
+import { checkboxClass } from "@/lib/ui/variants";
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: ReactNode;
+}
+
+// 勾选框：无 label 时只渲染受控原生 input（供已有 <label>/布局包裹的调用点直接替换）；
+// 有 label 时自带 <label> 包裹，保留原生键盘/读屏语义。
+export function Checkbox({ label, className, ...props }: CheckboxProps) {
+  const input = <input type="checkbox" className={checkboxClass(className)} {...props} />;
+  if (!label) return input;
+  return (
+    <label className="inline-flex items-center gap-2 text-sm text-ink">
+      {input}
+      <span>{label}</span>
+    </label>
+  );
+}
diff --git a/apps/web/components/ui/Radio.tsx b/apps/web/components/ui/Radio.tsx
new file mode 100644
index 0000000..5cbe00e
--- /dev/null
+++ b/apps/web/components/ui/Radio.tsx
@@ -0,0 +1,20 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+
+import { radioClass } from "@/lib/ui/variants";
+
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: ReactNode;
+}
+
+// 单选钮：无 label 时只渲染受控原生 input（供已有 <label>/布局包裹的调用点直接替换）；
+// 有 label 时自带 <label> 包裹，保留原生键盘/读屏语义。
+export function Radio({ label, className, ...props }: RadioProps) {
+  const input = <input type="radio" className={radioClass(className)} {...props} />;
+  if (!label) return input;
+  return (
+    <label className="inline-flex items-center gap-2 text-sm text-ink">
+      {input}
+      <span>{label}</span>
+    </label>
+  );
+}
diff --git a/apps/web/lib/ui/variants.test.ts b/apps/web/lib/ui/variants.test.ts
index 9781cb3..e80b094 100644
--- a/apps/web/lib/ui/variants.test.ts
+++ b/apps/web/lib/ui/variants.test.ts
@@ -4,11 +4,13 @@ import {
   badgeClass,
   buttonClass,
   cardClass,
+  checkboxClass,
   cn,
   focusRing,
   inputClass,
   overlayScrim,
   proseBody,
+  radioClass,
   segmentedClass,
   statusNoteClass,
   transitionUi,
@@ -98,6 +100,14 @@ describe("ui variants", () => {
     expect(klass).toContain("px-3");
   });
 
+  it("styles checkbox and radio with accent + shared focus ring", () => {
+    expect(checkboxClass()).toContain("accent-cinnabar");
+    expect(checkboxClass()).toContain("rounded-xs");
+    expect(checkboxClass()).toContain("focus-visible:ring-cinnabar/35");
+    expect(radioClass()).toContain("rounded-full");
+    expect(radioClass()).toContain("accent-cinnabar");
+  });
+
   it("builds segmented control chrome", () => {
     const klass = segmentedClass();
 
diff --git a/apps/web/lib/ui/variants.ts b/apps/web/lib/ui/variants.ts
index 6afb743..962d9fc 100644
--- a/apps/web/lib/ui/variants.ts
+++ b/apps/web/lib/ui/variants.ts
@@ -176,3 +176,15 @@ export function statusNoteClass({
 export function segmentedClass(className?: string): string {
   return cn("inline-flex rounded border border-line bg-bg p-1", className);
 }
+
+// 勾选/单选控件：原生 input + accent 上色，保留原生键盘/读屏语义，套统一焦点环。
+const controlBoxBase =
+  "h-4 w-4 shrink-0 border-line accent-cinnabar disabled:cursor-not-allowed disabled:opacity-45";
+
+export function checkboxClass(className?: string): string {
+  return cn(controlBoxBase, "rounded-xs", focusRing, className);
+}
+
+export function radioClass(className?: string): string {
+  return cn(controlBoxBase, "rounded-full", focusRing, className);
+}