From 2e253ff04c45e658e8ca3974e0025aa4c347b52b Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Tue, 12 Aug 2025 22:15:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E6=B7=BB=E5=8A=A0=20Switch?=
 =?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

- 实现了一个新的 Switch 组件，用于在开启和关闭状态之间切换
- 组件支持 name、checked、disabled 和 onChange 属性
- 使用 Solid.js 的 createEffect、createMemo 和 createSignal 等功能实现内部状态管理
- 通过 CSS 类和属性动态控制组件样式和行为
---
 src/components/Switch.tsx | 53 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 src/components/Switch.tsx

diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
new file mode 100644
index 0000000..c946098
--- /dev/null
+++ b/src/components/Switch.tsx
@@ -0,0 +1,53 @@
+import { isNotNil } from 'es-toolkit';
+import { Component, createEffect, createMemo, createSignal, mergeProps, Show } from 'solid-js';
+
+interface SwitchProps {
+  name?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
+}
+
+const Switcher: Component<SwitchProps> = (props) => {
+  const mProps = mergeProps<SwitchProps[]>(
+    {
+      disabled: false,
+    },
+    props,
+  );
+
+  const originalChecked = createMemo(() => mProps.checked);
+  const [internalChecked, setInternalChecked] = createSignal<boolean | undefined>(undefined);
+
+  createEffect(() => {
+    if (isNotNil(originalChecked()) && originalChecked() !== internalChecked()) {
+      setInternalChecked(originalChecked());
+    }
+  });
+
+  const handleClick = () => {
+    if (mProps.disabled) {
+      return;
+    }
+    setInternalChecked((prev) => !prev);
+    mProps.onChange?.(internalChecked());
+  };
+
+  return (
+    <div
+      aria-disabled={mProps.disabled}
+      class="inline-flex items-center gap-[1em] cursor-pointer rounded-sm aria-disabled:cursor-not-allowed group"
+      classList={{ 'bg-primary/38 aria-disabled:bg-on-surface/8': internalChecked() }}>
+      <div
+        class="relative h-[1em] w-[1.75em] border border-solid border-primary group-aria-disabled:border-on-surface/8 rounded-sm before:absolute before:translate-x-[2px] before:translate-y-[2px] before:h-[calc(1em-6px)] before:aspect-square before:rounded-xs before:bg-primary before:transition before:duration-200 before:ease-in-out group-aria-disabled:before:bg-on-surface/18"
+        classList={{ 'before:translate-x-[calc(0.75em+2px)]': internalChecked() }}
+        onClick={handleClick}
+      />
+      <Show when={isNotNil(mProps.name)}>
+        <input type="hidden" name={mProps.name} value={internalChecked() ? 'true' : 'false'} />
+      </Show>
+    </div>
+  );
+};
+
+export default Switcher;