feat: 优化项目目录结构

apps/frontend/app/console/(with-menu)/web/blog/components/AddBlog.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+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";
+import { BlogPermissionCheckBoxs } from "./BlogPermissionCheckBoxs";
+
+interface AddBlogProps {
+    children: React.ReactNode;
+    onRefresh: () => void;
+}
+
+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 () => {
+        try {
+            const res = await AdminApi.web.blog.create({
+                ...blog,
+            });
+            if (res) {
+                setOpen(false);
+                onRefresh();
+                toast.success("添加成功");
+                setBlog({
+                    title: '',
+                    description: '',
+                    contentUrl: '',
+                    permissions: [],
+                    password: '',
+                })
+            } else {
+                throw new Error();
+            }
+        } catch (error) {
+            toast.error((error as Error).message || "添加失败");
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                {children}
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>添加博客</DialogTitle>
+                    <DialogDescription>
+                        保存前请确认博客信息填写正确、权限配置合理
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="grid gap-4 py-4">
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="title" className="text-right">
+                            标题
+                        </Label>
+                        <Input
+                            id="title"
+                            className="col-span-3"
+                            value={blog.title}
+                            onChange={(e) => setBlog({ ...blog, title: e.target.value })}
+                        />
+                    </div>
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="description" className="text-right">
+                            描述
+                        </Label>
+                        <Input
+                            id="description"
+                            className="col-span-3"
+                            value={blog.description}
+                            onChange={(e) => setBlog({ ...blog, description: e.target.value })}
+                        />
+                    </div>
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="contentUrl" className="text-right">
+                            文章URL
+                        </Label>
+                        <Input
+                            id="contentUrl"
+                            className="col-span-3"
+                            value={blog.contentUrl}
+                            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">
+                            {
+                                <BlogPermissionCheckBoxs
+                                    permissions={blog.permissions}
+                                    onCheckedChange={(p, n) => setBlog({
+                                        ...blog,
+                                        permissions: n ?
+                                            [...blog.permissions, p] :
+                                            [...blog.permissions].filter(p => p !== p),
+                                    })}
+                                />
+                            }
+                        </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>
+                    <Button type="button" onClick={handleSubmit}>保存</Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

apps/frontend/app/console/(with-menu)/web/blog/components/BlogEdit.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import React, { useState } from "react"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Button } from "@/components/ui/button"
+import { toast } from "sonner"
+import { AdminApi } from "@/lib/api"
+import useSWR from "swr"
+import { ApiError } from "next/dist/server/api-utils"
+import { BlogPermissionCheckBoxs } from "./BlogPermissionCheckBoxs"
+import { BlogPermission } from "@/lib/types/Blog.Permission.enum"
+import { SetPasswordDialog } from "./SetPasswordDialog"
+
+interface BlogEditProps {
+    id: string;
+    children?: React.ReactNode;
+    onRefresh: () => void;
+}
+
+export default function BlogEdit({ id, children, onRefresh }: BlogEditProps) {
+    const [open, setOpen] = useState(false)
+    const { data: blog, mutate } = useSWR(
+        open ? `/api/admin/web/blog/${id}` : null,
+        () => AdminApi.web.blog.get(id),
+        {
+            revalidateOnFocus: false,
+            revalidateOnReconnect: false,
+            revalidateIfStale: false,
+            dedupingInterval: 5000,
+        }
+    )
+
+    const handleSubmit = async () => {
+        if (!blog) return;
+        try {
+            await AdminApi.web.blog.update(id, {
+                title: blog.title,
+                description: blog.description,
+                contentUrl: blog.contentUrl,
+                permissions: blog.permissions,
+            });
+            toast.success("更新成功")
+            setOpen(false);
+            onRefresh();
+        } catch (error) {
+            toast.error((error as ApiError).message || "更新失败")
+        }
+    }
+
+    const handleDelete = async () => {
+        try {
+            await AdminApi.web.blog.remove(id);
+            toast.success("删除成功")
+            setOpen(false);
+            onRefresh();
+        } catch (error) {
+            toast.error((error as ApiError).message || "删除失败")
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                {children}
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>编辑博客</DialogTitle>
+                    <DialogDescription>
+                        保存前请确认博客信息填写正确、权限配置合理
+                    </DialogDescription>
+                </DialogHeader>
+                {
+                    blog && (
+                        <>
+                            <div className="grid gap-4 py-4">
+                                <div className="grid grid-cols-4 items-center gap-4">
+                                    <Label htmlFor="title" className="text-right">
+                                        标题
+                                    </Label>
+                                    <Input
+                                        id="title"
+                                        className="col-span-3"
+                                        value={blog.title}
+                                        onChange={(e) => mutate({ ...blog, title: e.target.value }, false)}
+                                    />
+                                </div>
+                                <div className="grid grid-cols-4 items-center gap-4">
+                                    <Label htmlFor="description" className="text-right">
+                                        描述
+                                    </Label>
+                                    <Input
+                                        id="description"
+                                        className="col-span-3"
+                                        value={blog.description}
+                                        onChange={(e) => mutate({ ...blog, description: e.target.value }, false)}
+                                    />
+                                </div>
+                                <div className="grid grid-cols-4 items-center gap-4">
+                                    <Label htmlFor="contentUrl" className="text-right">
+                                        文章URL
+                                    </Label>
+                                    <Input
+                                        id="contentUrl"
+                                        className="col-span-3"
+                                        value={blog.contentUrl}
+                                        onChange={(e) => mutate({ ...blog, contentUrl: e.target.value }, false)}
+                                    />
+                                </div>
+                                <div className="grid grid-cols-4 items-center gap-4">
+                                    <Label htmlFor="permissions" className="text-right">
+                                        文章权限
+                                    </Label>
+                                    <div className="col-span-3">
+                                        <BlogPermissionCheckBoxs
+                                            permissions={blog.permissions}
+                                            onCheckedChange={(permission, newState) => {
+                                                mutate({
+                                                    ...blog,
+                                                    permissions: newState ?
+                                                        [...blog.permissions, permission] :
+                                                        blog.permissions.filter(p => p !== permission)
+                                                }, false)
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                                {
+                                    blog.permissions.includes(BlogPermission.ByPassword) &&
+                                    <div className="grid grid-cols-4 items-center gap-4">
+                                        <Label htmlFor="permissions" className="text-right">
+                                            文章保护密码
+                                        </Label>
+                                        <SetPasswordDialog id={id}>
+                                            <Button variant='outline'>修改</Button>
+                                        </SetPasswordDialog>
+                                    </div>
+                                }
+                            </div>
+                            <DialogFooter>
+                                <div className="w-full flex justify-between">
+                                    <div>
+                                        <Button variant='destructive' onClick={handleDelete}>删除</Button>
+                                    </div>
+                                    <div>
+                                        <Button type="button" variant='secondary' onClick={() => setOpen(false)}>取消</Button>
+                                        <Button type="button" onClick={handleSubmit} className="ml-5">保存</Button>
+                                    </div>
+                                </div>
+                            </DialogFooter>
+                        </>
+                    )
+                }
+            </DialogContent>
+        </Dialog>
+    )
+}

apps/frontend/app/console/(with-menu)/web/blog/components/BlogPermissionCheckBoxs.tsx

@@ -0,0 +1,45 @@
+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: '显示在列表中',
+    },
+    {
+        permission: BlogPermission.AllowComments,
+        localText: '允许评论',
+    }
+] as const;
+
+interface BlogPermissionCheckBoxsProps {
+    permissions: BlogPermission[];
+    onCheckedChange: (permission: BlogPermission, newState: boolean) => void;
+}
+
+export function BlogPermissionCheckBoxs({ permissions, onCheckedChange }: BlogPermissionCheckBoxsProps) {
+    return (
+        <div className="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={permissions.includes(v.permission)}
+                            onCheckedChange={newChecked => onCheckedChange(v.permission, !!newChecked)} />
+                        <Label htmlFor={`blog-permission-option-checkbox-${i}`} className="whitespace-nowrap">{v.localText}</Label>
+                    </div>
+                ))
+            }
+        </div>
+    )
+}

apps/frontend/app/console/(with-menu)/web/blog/components/BlogTable.tsx

@@ -0,0 +1,66 @@
+import {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Blog } from "@/lib/types/blog"
+import BlogEdit from "./BlogEdit"
+import { Button } from "@/components/ui/button"
+
+interface BlogTableProps {
+    blogs: Blog[],
+    error?: string,
+    onRefresh: () => void,
+}
+
+export default function BlogTable({ blogs, error, onRefresh }: BlogTableProps) {
+    return (
+        <Table className="w-full overflow-x-auto">
+            {
+                error && (
+                    <TableCaption>{error}</TableCaption>
+                )
+            }
+            <TableHeader>
+                <TableRow>
+                    <TableHead className="w-[100px]">Id</TableHead>
+                    <TableHead>标题</TableHead>
+                    <TableHead>描述</TableHead>
+                    <TableHead>文章URL</TableHead>
+                    <TableHead className="text-right">操作</TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                {blogs.map((blog) => (
+                    <TableRow key={blog.id}>
+                        <TableCell className="font-medium">
+                            <TooltipProvider>
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <div className="max-w-[100px] overflow-hidden text-ellipsis">{blog.id}</div>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        <p>{blog.id}</p>
+                                    </TooltipContent>
+                                </Tooltip>
+                            </TooltipProvider>
+                        </TableCell>
+                        <TableCell className="whitespace-normal break-all">{blog.title}</TableCell>
+                        <TableCell className="whitespace-normal break-all">{blog.description}</TableCell>
+                        <TableCell className="whitespace-normal break-all">{blog.contentUrl}</TableCell>
+                        <TableCell className="text-right">
+                            <BlogEdit id={blog.id} onRefresh={() => onRefresh()}>
+                                <Button variant={'outline'} size={'sm'}>编辑</Button>
+                            </BlogEdit>
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    )
+}

apps/frontend/app/console/(with-menu)/web/blog/components/SetPasswordDialog.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { AdminApi } from "@/lib/api";
+import { base62 } from "@/lib/utils";
+import React, { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+interface SetPasswordDialogProps {
+    id: string;
+    children: React.ReactNode;
+}
+
+export function SetPasswordDialog({ id, children }: SetPasswordDialogProps) {
+    const [open, setOpen] = useState(false);
+    const [password, setPassword] = useState('');
+
+    const handleSubmit = async () => {
+        if (!password) {
+            return toast.error('请输入密码');
+        }
+
+        await AdminApi.web.blog.setPassword(id, password).then(() => {
+            toast.success('修改成功');
+            setOpen(false);
+        }).catch(e => {
+            toast.error(`${e.message || e || '请求失败'}`)
+        });
+    }
+
+    useEffect(() => {
+        if (open) {
+            setPassword('');
+        }
+    }, [open])
+
+    const handleCopyShareURL = () => {
+        if (!password) {
+            return toast.warning('请先填写新密码');
+        }
+        const url = `${window.location.origin}/blog/${base62.encode(Buffer.from(id.replace(/-/g, ''), 'hex'))}?p=${password}`;
+        navigator.clipboard.writeText(url);
+        toast.success('分享链接复制成功，请点击保存按钮以提交新密码');
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={v => setOpen(v)}>
+            <form>
+                <DialogTrigger asChild>
+                    {children}
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-[425px]">
+                    <DialogHeader>
+                        <DialogTitle>修改密码</DialogTitle>
+                        <DialogDescription>
+                            通过密码访问受保护的文章，需开启“受密码保护”权限。注意复制URL需要填写完新密码后再点击
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="grid gap-4">
+                        <div className="grid gap-3">
+                            <Label htmlFor="new-password">新密码</Label>
+                            <Input
+                                id="new-password"
+                                name="password"
+                                value={password}
+                                onChange={e => setPassword(e.target.value)}
+                            />
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <div className="w-full flex justify-between">
+                            <div>
+                                <Button variant='secondary' onClick={handleCopyShareURL}>复制URl</Button>
+                            </div>
+                            <div className="flex gap-5">
+                                <DialogClose asChild>
+                                    <Button variant="outline">取消</Button>
+                                </DialogClose>
+                                <Button type="submit" onClick={handleSubmit}>保存</Button>
+                            </div>
+                        </div>
+                    </DialogFooter>
+                </DialogContent>
+            </form>
+        </Dialog>
+    )
+}