完成博客添加时的权限指定

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

@@ -1,6 +1,7 @@
 'use client'
 
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
     Dialog,
     DialogContent,
@@ -12,6 +13,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { AdminApi } from "@/lib/api";
+import { BlogPermission } from "@/lib/types/Blog.Permission.enum";
 import { useState } from "react";
 import { toast } from "sonner";
 
@@ -20,12 +22,29 @@ interface AddBlogProps {
     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({
         title: "",
         description: "",
         contentUrl: "",
+        permissions: [] as BlogPermission[],
+        password: "",
     });
 
     const handleSubmit = async () => {
@@ -41,6 +60,8 @@ export default function AddBlog({ children, onRefresh }: AddBlogProps) {
                     title: '',
                     description: '',
                     contentUrl: '',
+                    permissions: [],
+                    password: '',
                 })
             } else {
                 throw new Error();
@@ -93,6 +114,45 @@ export default function AddBlog({ children, onRefresh }: AddBlogProps) {
                             onChange={(e) => setBlog({ ...blog, contentUrl: e.target.value })}
                         />
                     </div>
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label className="text-right">
+                            文章权限
+                        </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>
+                                ))
+                            }
+                        </div>
+                    </div>
+                    {
+                        blog.permissions.includes(BlogPermission.ByPassword) &&
+                        <div className="grid grid-cols-4 items-center gap-4">
+                            <Label htmlFor="password" className="text-right">
+                                密码
+                            </Label>
+                            <Input
+                                id="password"
+                                className="col-span-3"
+                                value={blog.password}
+                                onChange={(e) => setBlog({ ...blog, password: e.target.value })}
+                            />
+                        </div>
+                    }
                 </div>
                 <DialogFooter>
                     <Button type="button" variant='secondary' onClick={() => setOpen(false)}>取消</Button>