From ebac9d006b4d4f41481dd090de4adf47f33fb71c Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Tue, 12 Aug 2025 14:00:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E6=B7=BB=E5=8A=A0=20Check?=
 =?UTF-8?q?=20=E5=A4=8D=E9=80=89=E6=A1=86=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 实现了一个新的复选框组件 Check
- 支持基本的复选框功能，包括选中、未选中和禁用状态
- 使用图标库来渲染选中和未选中状态
- 添加了隐藏的 input 元素，以便在表单中使用
- 组件具有良好的可定制性和扩展性
---
 src/components/Check.tsx | 62 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/components/Check.tsx

diff --git a/src/components/Check.tsx b/src/components/Check.tsx
new file mode 100644
index 0000000..36a809f
--- /dev/null
+++ b/src/components/Check.tsx
@@ -0,0 +1,62 @@
+import { Icon } from '@iconify-icon/solid';
+import { isNotNil } from 'es-toolkit';
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  mergeProps,
+  ParentComponent,
+  ParentProps,
+  Show,
+} from 'solid-js';
+
+interface CheckBoxProps {
+  name?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
+}
+
+const Check: ParentComponent<CheckBoxProps> = (props) => {
+  const mProps = mergeProps<ParentProps<CheckBoxProps>[]>(
+    {
+      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;
+    }
+    console.debug('[Check]before', internalChecked());
+    setInternalChecked((prev) => !prev);
+    console.debug('[Check]after', internalChecked());
+    mProps.onChange?.(internalChecked());
+  };
+
+  return (
+    <div class="flex flex-row items-center gap-2 cursor-pointer" onClick={handleClick}>
+      <Icon
+        icon={internalChecked() ? 'hugeicons:checkmark-square-03' : 'hugeicons:square'}
+        class="text-[14px] stroke-1"
+        classList={{ 'text-primary': internalChecked() }}
+      />
+      <div>{mProps.children}</div>
+      <Show when={isNotNil(mProps.name)}>
+        <input type="hidden" name={mProps.name} value={internalChecked()} />
+      </Show>
+    </div>
+  );
+};
+
+export default Check;