Hair Keeper v1.0.0：一个高度集成、深度定制、约定优于配置的全栈Web应用模板，旨在保持灵活性的同时提供一套基于成熟架构的开发底座，自带身份认证、权限控制、丰富前端组件、文件上传、后台任务、智能体开发等丰富功能，提供AI开发辅助，免于纠结功能如何实现，可快速上手专注于业务逻辑

src/components/common/checkbox-group.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import React from 'react'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Label } from '@/components/ui/label'
+
+export interface CheckboxOption {
+  id: number | string
+  name: string
+  [key: string]: any // 允许额外的属性
+}
+
+export interface CheckboxGroupProps {
+  options: CheckboxOption[]
+  value?: (number | string)[]
+  onChange?: (value: (number | string)[]) => void
+  className?: string
+  itemClassName?: string
+  labelClassName?: string
+  idPrefix?: string
+  disabled?: boolean
+}
+
+export function CheckboxGroup({
+  options,
+  value = [],
+  onChange,
+  className = "space-y-2",
+  itemClassName = "flex items-center space-x-2",
+  labelClassName = "text-sm",
+  idPrefix = "checkbox",
+  disabled = false,
+}: CheckboxGroupProps) {
+  const handleToggle = (optionId: number | string, checked: boolean) => {
+    const newValue = checked
+      ? [...value, optionId]
+      : value.filter((id) => id !== optionId)
+    onChange?.(newValue)
+  }
+
+  if (!options || options.length === 0) {
+    return null
+  }
+
+  return (
+    <div className={className}>
+      {options.map((option) => (
+        <div key={option.id} className={itemClassName}>
+          <Checkbox
+            id={`${idPrefix}-${option.id}`}
+            checked={value.includes(option.id)}
+            onCheckedChange={(checked) =>
+              handleToggle(option.id, checked as boolean)
+            }
+            disabled={disabled}
+          />
+          <Label 
+            htmlFor={`${idPrefix}-${option.id}`} 
+            className={labelClassName}
+          >
+            {option.name}
+          </Label>
+        </div>
+      ))}
+    </div>
+  )
+}