lint

tone-page-server/src/admin/controller/web/admin-web-blog.controller.ts

@@ -11,6 +11,8 @@ import {
 } from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { CreateBlogDto } from 'src/admin/dto/admin-web/create-blog.dto';
+import { SetBlogPasswordDto } from 'src/admin/dto/admin-web/set-blog-password.dto';
+import { UpdateBlogDto } from 'src/admin/dto/admin-web/update-blog.dto';
 import { Role } from 'src/auth/role.enum';
 import { BlogService } from 'src/blog/blog.service';
 import { Roles } from 'src/common/decorators/role.decorator';
@@ -24,7 +26,9 @@ export class AdminWebBlogController {
 
   @Get()
   async list() {
-    return this.adminWebBlogService.list();
+    return this.adminWebBlogService.list({
+      withAll: true,
+    });
   }
 
   @Post()
@@ -35,11 +39,19 @@ export class AdminWebBlogController {
   @Put(':id')
   async update(
     @Param('id', new ParseUUIDPipe({ version: '4' })) id: string,
-    @Body() dto: CreateBlogDto,
+    @Body() dto: UpdateBlogDto,
   ) {
     return this.adminWebBlogService.update(id, dto);
   }
 
+  @Post(':id/password')
+  async setPassword(
+    @Param('id', new ParseUUIDPipe({ version: '4' })) id: string,
+    @Body() dto: SetBlogPasswordDto,
+  ) {
+    return this.adminWebBlogService.setPassword(id, dto.password);
+  }
+
   @Get(':id')
   async get(@Param('id', new ParseUUIDPipe({ version: '4' })) id: string) {
     return this.adminWebBlogService.findById(id);

tone-page-server/src/admin/dto/admin-web/create-blog.dto.ts

@@ -1,4 +1,5 @@
-import { IsString } from 'class-validator';
+import { IsEnum, IsString } from 'class-validator';
+import { BlogPermission } from 'src/blog/Blog.Permission.enum';
 
 export class CreateBlogDto {
   @IsString()
@@ -9,4 +10,10 @@ export class CreateBlogDto {
 
   @IsString()
   contentUrl: string;
+
+  @IsEnum(BlogPermission, { each: true, message: '请求类型错误' })
+  permissions: BlogPermission[];
+
+  @IsString()
+  password: string; // 允许空串
 }

tone-page-server/src/admin/dto/admin-web/set-blog-password.dto.ts

@@ -0,0 +1,6 @@
+import { IsString } from 'class-validator';
+
+export class SetBlogPasswordDto {
+  @IsString()
+  password: string;
+}

tone-page-server/src/admin/dto/admin-web/update-blog.dto.ts

@@ -0,0 +1,16 @@
+import { IsEnum, IsString } from 'class-validator';
+import { BlogPermission } from 'src/blog/Blog.Permission.enum';
+
+export class UpdateBlogDto {
+  @IsString()
+  title: string;
+
+  @IsString()
+  description: string;
+
+  @IsString()
+  contentUrl: string;
+
+  @IsEnum(BlogPermission, { each: true, message: '请求类型错误' })
+  permissions: BlogPermission[];
+}

tone-page-server/src/blog/blog.controller.ts

@@ -6,6 +6,7 @@ import {
   Param,
   ParseUUIDPipe,
   Post,
+  Query,
   Req,
   UseGuards,
 } from '@nestjs/common';
@@ -14,6 +15,7 @@ import { OptionalAuthGuard } from 'src/auth/strategies/OptionalAuthGuard';
 import { UserService } from 'src/user/user.service';
 import { createBlogCommentDto } from './dto/create.blogcomment.dto';
 import { Throttle, ThrottlerGuard } from '@nestjs/throttler';
+import { BlogPermission } from './Blog.Permission.enum';
 
 @Controller('blog')
 export class BlogController {
@@ -28,9 +30,27 @@ export class BlogController {
   }
 
   @Get(':id')
-  async getBlog(@Param('id', new ParseUUIDPipe({ version: '4' })) id: string) {
+  async getBlog(
+    @Param('id', new ParseUUIDPipe({ version: '4' })) id: string,
+    @Query('p') password?: string,
+  ) {
     const blog = await this.blogService.findById(id);
-    if (!blog) throw new BadRequestException('文章不存在');
+    if (!blog) throw new BadRequestException('文章不存在或无权限访问');
+
+    if (!blog.permissions.includes(BlogPermission.Public)) {
+      // 无公开权限，则进一步检查是否有密码保护
+      if (!blog.permissions.includes(BlogPermission.ByPassword)) {
+        throw new BadRequestException('文章不存在或无权限访问');
+      } else {
+        // 判断密码是否正确
+        if (
+          !password ||
+          this.blogService.hashPassword(password) !== blog.password_hash
+        ) {
+          throw new BadRequestException('文章不存在或无权限访问');
+        }
+      }
+    }
 
     const blogDataRes = await fetch(`${blog.contentUrl}`);
     const blogContent = await blogDataRes.text();

tone-page-server/src/blog/blog.permission.enum.ts

@@ -0,0 +1,5 @@
+export enum BlogPermission {
+  Public = 'Public',
+  ByPassword = 'ByPassword',
+  List = 'List',
+}

tone-page-server/src/blog/blog.service.ts

@@ -3,6 +3,8 @@ import { InjectRepository } from '@nestjs/typeorm';
 import { Blog } from './entity/Blog.entity';
 import { Repository } from 'typeorm';
 import { BlogComment } from './entity/BlogComment.entity';
+import { BlogPermission } from './Blog.Permission.enum';
+import { createHash } from 'crypto';
 
 @Injectable()
 export class BlogService {
@@ -13,20 +15,67 @@ export class BlogService {
     private readonly blogCommentRepository: Repository<BlogComment>,
   ) {}
 
-  async list() {
-    return this.blogRepository.find({
-      where: { deletedAt: null },
-      order: {
-        createdAt: 'DESC',
-      },
-    });
+  async list(
+    option: {
+      withAll?: boolean;
+    } = {},
+  ) {
+    return (
+      await this.blogRepository.find({
+        order: {
+          createdAt: 'DESC',
+        },
+      })
+    )
+      .filter(
+        (i) => option.withAll || i.permissions.includes(BlogPermission.List),
+      )
+      .map((i) => {
+        if (option.withAll) {
+          return i;
+        }
+
+        const { createdAt, deletedAt, id, title, viewCount } = i;
+        return {
+          createdAt,
+          deletedAt,
+          id,
+          title,
+          viewCount,
+        };
+      });
   }
 
-  async create(blog: Partial<Blog>) {
+  async create(dto: Partial<Blog> & { password: string }) {
+    const { password, ...blog } = dto;
+    if (blog.permissions.includes(BlogPermission.ByPassword)) {
+      if (password) {
+        blog.password_hash = createHash('sha256')
+          .update(`${password}`)
+          .digest('hex');
+      }
+    }
+
     const newBlog = this.blogRepository.create(blog);
     return this.blogRepository.save(newBlog);
   }
 
+  async setPassword(id: string, password: string) {
+    const blog = await this.findById(id);
+    if (!blog) {
+      throw new Error('博客不存在');
+    }
+
+    return (
+      (
+        await this.blogRepository.update(id, {
+          ...blog,
+          password_hash: this.hashPassword(password),
+        })
+      ).affected > 0
+    );
+  }
+
   async update(id: string, blog: Partial<Blog>) {
     await this.blogRepository.update(id, blog);
     return this.blogRepository.findOneBy({ id });
@@ -39,7 +88,7 @@ export class BlogService {
   }
 
   async findById(id: string) {
-    return this.blogRepository.findOneBy({ id });
+    return await this.blogRepository.findOneBy({ id });
   }
 
   async incrementViewCount(id: string) {
@@ -65,4 +114,8 @@ export class BlogService {
     const newComment = this.blogCommentRepository.create(comment);
     return this.blogCommentRepository.save(newComment);
   }
+
+  hashPassword(password: string) {
+    return createHash('sha256').update(`${password}`).digest('hex');
+  }
 }

tone-page-server/src/blog/entity/Blog.entity.ts

@@ -8,7 +8,9 @@ import {
   UpdateDateColumn,
 } from 'typeorm';
 import { BlogComment } from './BlogComment.entity';
+import { BlogPermission } from '../Blog.Permission.enum';
 
+/** @todo 考虑后续将权限的数据类型替换为json，以提高查询效率 */
 @Entity()
 export class Blog {
   @PrimaryGeneratedColumn('uuid')
@@ -35,7 +37,12 @@ export class Blog {
   @DeleteDateColumn({ precision: 3, nullable: true })
   deletedAt: Date;
 
-  // 权限关系 TODO
+  // 权限
+  @Column('simple-array', { default: '' })
+  permissions: BlogPermission[];
+
+  @Column({ nullable: true })
+  password_hash: string | null;
 
   // 关系
   @OneToMany(() => BlogComment, (blog) => blog.id)

tone-page-web/app/(with-header-footer)/blog/[id]/page.tsx

@@ -2,7 +2,7 @@
 
 import { BlogApi } from "@/lib/api";
 import { base62 } from "@/lib/utils";
-import { useParams } from "next/navigation";
+import { useParams, useSearchParams } from "next/navigation";
 import useSWR from "swr";
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -17,6 +17,8 @@ import Image from "next/image";
 
 export default function Blog() {
     const params = useParams();
+    const searchParams = useSearchParams();
+
     const hex = Array.from(base62.decode(params.id as string)).map(b => b.toString(16).padStart(2, '0')).join('');
     const id = [
         hex.slice(0, 8),
@@ -26,9 +28,12 @@ export default function Blog() {
         hex.slice(20, 32)
     ].join('-');
 
+    const password = searchParams.get('p');
     const { data, error, isLoading } = useSWR(
         `/api/blog/${id}`,
-        () => BlogApi.get(id),
+        () => BlogApi.get(id, {
+            password: password || undefined,
+        }),
     )
 
     return (
@@ -59,7 +64,7 @@ export default function Blog() {
                                 h5: ({ ...props }) => <h5 className="text-md font-bold" {...props} />,
                                 p: ({ ...props }) => <p className="py-1 text-zinc-700" {...props} />,
                                 img: ({ src }) => (
-                                    <PhotoProvider>
+                                    <PhotoProvider className="w-full">
                                         <PhotoView src={src as string}>
                                             <Image src={src as string} alt="加载失败" />
                                         </PhotoView>

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

@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import {
     Dialog,
     DialogContent,
+    DialogDescription,
     DialogFooter,
     DialogHeader,
     DialogTitle,
@@ -12,8 +13,10 @@ 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";
+import { BlogPermissionCheckBoxs } from "./BlogPermissionCheckBoxs";
 
 interface AddBlogProps {
     children: React.ReactNode;
@@ -26,6 +29,8 @@ export default function AddBlog({ children, onRefresh }: AddBlogProps) {
         title: "",
         description: "",
         contentUrl: "",
+        permissions: [] as BlogPermission[],
+        password: "",
     });
 
     const handleSubmit = async () => {
@@ -41,6 +46,8 @@ export default function AddBlog({ children, onRefresh }: AddBlogProps) {
                     title: '',
                     description: '',
                     contentUrl: '',
+                    permissions: [],
+                    password: '',
                 })
             } else {
                 throw new Error();
@@ -58,6 +65,9 @@ export default function AddBlog({ children, onRefresh }: AddBlogProps) {
             <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">
@@ -93,6 +103,38 @@ 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">
+                            {
+                                <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>

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

@@ -4,6 +4,7 @@ import React, { useState } from "react"
 import {
     Dialog,
     DialogContent,
+    DialogDescription,
     DialogFooter,
     DialogHeader,
     DialogTitle,
@@ -16,6 +17,9 @@ 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;
@@ -43,6 +47,7 @@ export default function BlogEdit({ id, children, onRefresh }: BlogEditProps) {
                 title: blog.title,
                 description: blog.description,
                 contentUrl: blog.contentUrl,
+                permissions: blog.permissions,
             });
             toast.success("更新成功")
             setOpen(false);
@@ -70,7 +75,10 @@ export default function BlogEdit({ id, children, onRefresh }: BlogEditProps) {
             </DialogTrigger>
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle>添加博客</DialogTitle>
+                    <DialogTitle>编辑博客</DialogTitle>
+                    <DialogDescription>
+                        保存前请确认博客信息填写正确、权限配置合理
+                    </DialogDescription>
                 </DialogHeader>
                 {
                     blog && (
@@ -109,6 +117,35 @@ export default function BlogEdit({ id, children, onRefresh }: BlogEditProps) {
                                         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">

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 (
+        <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>
+    )
+}

tone-page-web/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>
+    )
+}

tone-page-web/lib/api/admin/web/blog/index.ts

@@ -3,3 +3,4 @@ export * from './remove';
 export * from './list';
 export * from './update';
 export * from './get';
+export * from './setPassword';

tone-page-web/lib/api/admin/web/blog/setPassword.ts

@@ -0,0 +1,10 @@
+import fetcher from "@/lib/api/fetcher";
+
+export async function setPassword(id: string, password: string) {
+    return fetcher<boolean>(`/api/admin/web/blog/${id}/password`, {
+        method: 'POST',
+        body: JSON.stringify({
+            password,
+        })
+    })
+}

tone-page-web/lib/api/admin/web/blog/update.ts

@@ -1,9 +1,11 @@
 import fetcher from "@/lib/api/fetcher";
+import { BlogPermission } from "@/lib/types/Blog.Permission.enum";
 
 type UpdateBlogParams = {
     title: string;
     description: string;
     contentUrl: string;
+    permissions: BlogPermission[],
 }
 
 export async function update(id: string, data: UpdateBlogParams) {

tone-page-web/lib/api/blog/get.ts

@@ -1,10 +1,13 @@
 import fetcher from "../fetcher";
 
-export async function get(id: string) {
+export async function get(id: string, option: {
+    password?: string;
+} = {}) {
+    const { password } = option;
     return fetcher<{
         id: string;
         title: string;
         createdAt: string;
         content: string;
-    }>(`/api/blog/${id}`);
+    }>(`/api/blog/${id}` + (password ? `?p=${password}` : ''));
 }

tone-page-web/lib/types/Blog.Permission.enum.ts

@@ -0,0 +1,5 @@
+export enum BlogPermission {
+    Public = 'Public',
+    ByPassword = 'ByPassword',
+    List = 'List',
+}

tone-page-web/lib/types/blog.ts

@@ -1,3 +1,5 @@
+import { BlogPermission } from "./Blog.Permission.enum";
+
 export interface Blog {
     id: string;
     title: string;
@@ -5,4 +7,5 @@ export interface Blog {
     viewCount: number;
     contentUrl: string;
     createdAt: string;
+    permissions: BlogPermission[];
 }