提取blogPermissionCheckBoxs组件

tone-page-web/app/console/(with-menu)/web/blog/components/AddBlog.tsx

@@ -16,27 +16,13 @@ import { AdminApi } from "@/lib/api";
 import { BlogPermission } from "@/lib/types/Blog.Permission.enum";
 import { useState } from "react";
 import { toast } from "sonner";
+import { BlogPermissionCheckBoxs } from "./BlogPermissionCheckBoxs";
 
 interface AddBlogProps {
     children: React.ReactNode;
     onRefresh: () => void;
 }
 
-const blogPermissions = [
-    {
-        permission: BlogPermission.Public,
-        localText: '公开可读',
-    },
-    {
-        permission: BlogPermission.ByPassword,
-        localText: '受密码保护',
-    },
-    {
-        permission: BlogPermission.List,
-        localText: '显示在列表中',
-    },
-] as const;
-
 export default function AddBlog({ children, onRefresh }: AddBlogProps) {
     const [open, setOpen] = useState(false);
     const [blog, setBlog] = useState({
@@ -120,22 +106,15 @@ export default function AddBlog({ children, onRefresh }: AddBlogProps) {
                         </Label>
                         <div className="col-span-3 flex gap-3 gap-x-8 flex-wrap">
                             {
-                                blogPermissions.map((v, i) => (
-                                    <div key={`blog-permission-option-${i}`} className="flex gap-2">
-                                        <Checkbox
-                                            id={`blog-permission-option-checkbox-${i}`}
-                                            checked={blog.permissions.includes(v.permission)}
-                                            onCheckedChange={newChecked => {
-                                                setBlog({
-                                                    ...blog,
-                                                    permissions: newChecked ?
-                                                        [...blog.permissions, v.permission] :
-                                                        [...blog.permissions].filter(p => p !== v.permission),
-                                                })
-                                            }} />
-                                        <Label htmlFor={`blog-permission-option-checkbox-${i}`} className="whitespace-nowrap">{v.localText}</Label>
-                                    </div>
-                                ))
+                                <BlogPermissionCheckBoxs
+                                    permissions={blog.permissions}
+                                    onCheckedChange={(p, n) => setBlog({
+                                        ...blog,
+                                        permissions: n ?
+                                            [...blog.permissions, p] :
+                                            [...blog.permissions].filter(p => p !== p),
+                                    })}
+                                />
                             }
                         </div>
                     </div>

tone-page-web/app/console/(with-menu)/web/blog/components/BlogPermissionCheckBoxs.tsx

@@ -0,0 +1,41 @@
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { BlogPermission } from "@/lib/types/Blog.Permission.enum";
+
+const blogPermissions = [
+    {
+        permission: BlogPermission.Public,
+        localText: '公开可读',
+    },
+    {
+        permission: BlogPermission.ByPassword,
+        localText: '受密码保护',
+    },
+    {
+        permission: BlogPermission.List,
+        localText: '显示在列表中',
+    },
+] as const;
+
+interface BlogPermissionCheckBoxsProps {
+    permissions: BlogPermission[];
+    onCheckedChange: (permission: BlogPermission, newState: boolean) => void;
+}
+
+export function BlogPermissionCheckBoxs({ permissions, onCheckedChange }: BlogPermissionCheckBoxsProps) {
+    return (
+        <>
+            {
+                blogPermissions.map((v, i) => (
+                    <div key={`blog-permission-option-${i}`} className="flex gap-2">
+                        <Checkbox
+                            id={`blog-permission-option-checkbox-${i}`}
+                            checked={permissions.includes(v.permission)}
+                            onCheckedChange={newChecked => onCheckedChange(v.permission, !!newChecked)} />
+                        <Label htmlFor={`blog-permission-option-checkbox-${i}`} className="whitespace-nowrap">{v.localText}</Label>
+                    </div>
+                ))
+            }
+        </>
+    )
+}