tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提取blogPermissionCheckBoxs组件

Browse Source
This commit is contained in:
tone
2025-06-22 23:31:55 +08:00
parent d4679f3733
commit 38fa0a0a07
2 changed files with 51 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,27 +16,13 @@ import { AdminApi } from "@/lib/api";
import { BlogPermission } from "@/lib/types/Blog.Permission.enum"; import { BlogPermission } from "@/lib/types/Blog.Permission.enum";
import { useState } from "react"; import { useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { BlogPermissionCheckBoxs } from "./BlogPermissionCheckBoxs";
interface AddBlogProps { interface AddBlogProps {
children: React.ReactNode; children: React.ReactNode;
onRefresh: () => void; 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) { export default function AddBlog({ children, onRefresh }: AddBlogProps) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [blog, setBlog] = useState({ const [blog, setBlog] = useState({
@@ -120,22 +106,15 @@ export default function AddBlog({ children, onRefresh }: AddBlogProps) {
</Label> </Label>
<div className="col-span-3 flex gap-3 gap-x-8 flex-wrap"> <div className="col-span-3 flex gap-3 gap-x-8 flex-wrap">
{ {
blogPermissions.map((v, i) => ( <BlogPermissionCheckBoxs
<div key={`blog-permission-option-${i}`} className="flex gap-2"> permissions={blog.permissions}
<Checkbox onCheckedChange={(p, n) => setBlog({
id={`blog-permission-option-checkbox-${i}`}
checked={blog.permissions.includes(v.permission)}
onCheckedChange={newChecked => {
setBlog({
...blog, ...blog,
permissions: newChecked ? permissions: n ?
[...blog.permissions, v.permission] : [...blog.permissions, p] :
[...blog.permissions].filter(p => p !== v.permission), [...blog.permissions].filter(p => p !== p),
}) })}
}} /> />
<Label htmlFor={`blog-permission-option-checkbox-${i}`} className="whitespace-nowrap">{v.localText}</Label>
</div>
))
} }
</div> </div>
</div> </div>

41
tone-page-web/app/console/(with-menu)/web/blog/components/BlogPermissionCheckBoxs.tsx Normal file
View File

@@ -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>
))
}
</>
)
}