feat: 优化项目目录结构

apps/frontend/app/(with-header-footer)/blog/[id]/components/BlogCommentTool.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { BlogApi } from "@/lib/api";
+import { BlogComment } from "@/lib/types/blogComment";
+import { Send, Undo2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+
+interface BlogCommentToolProps {
+    blogId: string;
+    onInsertComment: (b: BlogComment) => void;
+    replayTarget: BlogComment | null;
+    handleClearReplayTarget: () => void;
+}
+
+export function BlogCommentTool({ blogId, onInsertComment, replayTarget, handleClearReplayTarget }: BlogCommentToolProps) {
+    const [comment, setComment] = useState('');
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    useEffect(() => {
+        if (replayTarget && textareaRef.current) {
+            textareaRef.current.focus();
+            textareaRef.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+                inline: 'start'
+            })
+        }
+    }, [replayTarget]);
+
+    const submit = async () => {
+        if (comment.trim().length === 0) return;
+
+        try {
+            const res = await BlogApi.createComment(blogId, comment, replayTarget ? replayTarget.id : undefined);
+            if (res) {
+                toast.success('发布成功');
+                setComment('');
+                onInsertComment(res);
+                handleClearReplayTarget();
+            }
+        } catch (error) {
+            if ((error as { statusCode: number }).statusCode === 429) {
+                return toast.error('操作太频繁了，稍后再试吧')
+            }
+            toast.error(`${(error as Error).message || '发布失败'}`)
+        }
+    }
+
+    const getPlaceHolderText = () => {
+        if (!replayTarget) return '评论';
+
+        let replayComment = replayTarget.content.trim();
+        if (replayComment.length > 8) {
+            replayComment = replayComment.slice(0, 8) + '...';
+        }
+
+        const replayUser = replayTarget.user ? replayTarget.user.nickname : '匿名';
+
+        return `回复 ${replayUser} 的 ${replayComment}`;
+    }
+
+    return (
+        <div className="my-3 flex items-end gap-2">
+            <Textarea
+                ref={textareaRef}
+                placeholder={getPlaceHolderText()}
+                onChange={v => setComment(v.target.value)}
+                value={comment} />
+            <Button variant='outline' size='icon' onClick={() => submit()} disabled={comment.trim().length === 0}>
+                <Send />
+            </Button>
+            {replayTarget && <Button variant='outline' size='icon' onClick={() => handleClearReplayTarget()}>
+                <Undo2 />
+            </Button>}
+        </div>
+    )
+}

apps/frontend/app/(with-header-footer)/blog/[id]/components/BlogComments.tsx

@@ -0,0 +1,81 @@
+import useSWR from "swr";
+import { BlogCommentTool } from "./BlogCommentTool";
+import { BlogApi } from "@/lib/api";
+import { BlogComment } from "@/lib/types/blogComment";
+import { useState } from "react";
+import { useUserMe } from "@/hooks/user/use-user-me";
+
+export function BlogComments({ blogId }: { blogId: string }) {
+    const { data, mutate } = useSWR(
+        `/api/blog/${blogId}/comments`,
+        () => BlogApi.getComments(blogId),
+    )
+
+    const { user } = useUserMe();
+
+    const insertComment = async (newOne: BlogComment) => {
+        await mutate(
+            (comments) => {
+                if (!comments) return [newOne];
+                return [newOne, ...comments]
+            },
+            { revalidate: false }
+        )
+    }
+
+
+    const [replayTarget, setReplayTarget] = useState<BlogComment | null>(null);
+
+    return (
+        data && <div className="" >
+            <h1 className="px-2 border-l-4 border-zinc-300">评论 {data.length}</h1>
+            <BlogCommentTool
+                blogId={blogId}
+                onInsertComment={insertComment}
+                replayTarget={replayTarget}
+                handleClearReplayTarget={() => setReplayTarget(null)}
+            />
+
+            <div className="text-sm text-zinc-600">
+                {
+                    user ? (<span>当前账户：{user.nickname}</span>) : (<span>当前未登录，留言名称为匿名，登录可前往控制台</span>)
+                }
+            </div>
+
+            <div className="flex flex-col">
+                {
+                    data.filter(d => !d.parentId)
+                        .map((d) => (
+                            <div key={d.id} className="border-b border-zinc-300 py-2 last:border-none">
+                                <h1 className="text-zinc-500">{d.user ? d.user.nickname : '匿名'}</h1>
+                                <div className="whitespace-pre-wrap break-all">{d.content}</div>
+                                <div className="text-xs text-zinc-500 flex gap-2">
+                                    <p>{new Date(d.createdAt).toLocaleString()}</p>
+                                    <p>{d.address}</p>
+                                    <p className="text-zinc-900 cursor-pointer" onClick={() => setReplayTarget(d)}>回复</p>
+                                </div>
+                                {
+                                    data.filter(c => c.parentId === d.id).length > 0 && (
+                                        <div className="flex flex-col ml-5 my-1">
+                                            {
+                                                data.filter(c => c.parentId === d.id).map(c => (
+                                                    <div key={c.id} className="border-b border-zinc-300 py-1 last:border-none">
+                                                        <h1 className="text-zinc-500">{c.user ? c.user.nickname : '匿名'}</h1>
+                                                        <div className="whitespace-pre-wrap break-all">{c.content}</div>
+                                                        <div className="text-xs text-zinc-500 flex gap-2">
+                                                            <p>{new Date().toLocaleString()}</p>
+                                                            <p>{c.address}</p>
+                                                        </div>
+                                                    </div>
+                                                ))
+                                            }
+                                        </div>
+                                    )
+                                }
+                            </div>
+                        ))
+                }
+            </div >
+        </div>
+    )
+}

apps/frontend/app/(with-header-footer)/blog/[id]/page.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { BlogApi } from "@/lib/api";
+import { base62 } from "@/lib/utils";
+import { useParams, useSearchParams } from "next/navigation";
+import useSWR from "swr";
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import rehypeHighlight from 'rehype-highlight'
+import 'highlight.js/styles/github.css'
+import { PhotoProvider, PhotoView } from 'react-photo-view';
+import 'react-photo-view/dist/react-photo-view.css';
+import rehypeRaw from 'rehype-raw'
+import { Skeleton } from "@/components/ui/skeleton";
+import { BlogComments } from "./components/BlogComments";
+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),
+        hex.slice(8, 12),
+        hex.slice(12, 16),
+        hex.slice(16, 20),
+        hex.slice(20, 32)
+    ].join('-');
+
+    const password = searchParams.get('p');
+    const { data, error, isLoading } = useSWR(
+        `/api/blog/${id}`,
+        () => BlogApi.get(id, {
+            password: password || undefined,
+        }),
+    )
+
+    return (
+        <div className="w-full overflow-x-hidden">
+            <div className="max-w-200 mx-auto px-5 overflow-x-hidden mb-10">
+                {error && <div className="my-20 text-center text-zinc-600">{error.message}</div>}
+                {isLoading && (
+                    <div className="flex flex-col gap-2 mt-10">
+                        <Skeleton className="w-full h-10" />
+                        <Skeleton className="w-full h-20" />
+                        <Skeleton className="w-full h-10" />
+                        <Skeleton className="w-full h-20" />
+                        <Skeleton className="w-full h-30" />
+                    </div>
+                )}
+                {data && (
+                    <>
+                        <h1 className="text-center text-3xl font-bold mt-10">{data.title}</h1>
+                        <p className="text-sm text-zinc-500 text-center my-5">发布于：{new Date(data.createdAt).toLocaleString()}</p>
+                        <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            rehypePlugins={[rehypeRaw, rehypeHighlight]}
+                            components={{
+                                h1: ({ ...props }) => <h1 className="text-3xl font-bold py-2" {...props} />,
+                                h2: ({ ...props }) => <h2 className="text-2xl font-bold py-1" {...props} />,
+                                h3: ({ ...props }) => <h3 className="text-xl font-bold py-0.5" {...props} />,
+                                h4: ({ ...props }) => <h4 className="text-lg font-bold" {...props} />,
+                                h5: ({ ...props }) => <h5 className="text-md font-bold" {...props} />,
+                                p: ({ ...props }) => <p className="py-1 text-zinc-700" {...props} />,
+                                img: ({ src }) => (
+                                    <PhotoProvider className="w-full">
+                                        <PhotoView src={src as string}>
+                                            <div style={{ width: '100%' }}>
+                                                <Image src={src as string} width={0} height={0} style={{ width: '100%', height: 'auto' }} unoptimized alt="加载失败" />
+                                            </div>
+                                        </PhotoView>
+                                    </PhotoProvider>
+                                ),
+                                th: ({ ...props }) => <th className="text-ellipsis text-nowrap border border-zinc-300 p-2" {...props} />,
+                                td: ({ ...props }) => <td className="border border-zinc-300 p-1" {...props} />,
+                                table: ({ ...props }) => <div className="overflow-x-auto"><table {...props} /></div>,
+                                pre: ({ ...props }) => <pre className="rounded-sm overflow-hidden shadow" {...props} />,
+                                blockquote: ({ ...props }) => <blockquote className="pl-3 border-l-5" {...props} />,
+                                a: ({ ...props }) => <a className="hover:underline" {...props} />,
+                            }}
+                        >{data.content}</ReactMarkdown>
+                    </>
+                )}
+
+                {data && (
+                    <>
+                        <div className="border my-5"></div>
+                        <BlogComments blogId={data.id} />
+                    </>
+                )}
+            </div>
+        </div>
+    )
+}

apps/frontend/app/(with-header-footer)/blog/page.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import { Skeleton } from "@/components/ui/skeleton";
+import { BlogApi } from "@/lib/api";
+import { useCallback } from "react"
+import useSWR from "swr";
+import {
+    Alert,
+    AlertDescription,
+    AlertTitle,
+} from "@/components/ui/alert";
+import { AlertCircle } from "lucide-react";
+import { base62 } from "@/lib/utils";
+
+export default function Blog() {
+    const formatNumber = useCallback((num: number) => {
+        if (num >= 1000) {
+            return (num / 1000).toFixed(1) + 'K';
+        } else if (num >= 1000000) {
+            return (num / 1000000).toFixed(1) + 'M';
+        }
+        return num.toString();
+    }, []);
+
+    const { data: blogs, error, isLoading } = useSWR(
+        '/api/blogs',
+        () => BlogApi.list(),
+    )
+
+    return (
+        <div className="max-w-120 w-auto mx-auto my-10 flex flex-col gap-8">
+            {
+                isLoading && (
+                    <div className="w-full">
+                        <Skeleton className="w-full h-5" />
+                        <Skeleton className="w-full h-10 mt-1" />
+                        <Skeleton className="w-full h-5 mt-5" />
+                    </div>
+                )
+            }
+            {
+                error && (
+                    <Alert variant="destructive" className="w-full">
+                        <AlertCircle className="h-4 w-4" />
+                        <AlertTitle>出错啦</AlertTitle>
+                        <AlertDescription>
+                            {error.message}
+                        </AlertDescription>
+                    </Alert>
+                )
+            }
+            {
+                blogs && blogs.map((blog) => (
+                    <div className="w-full px-5 cursor-default" key={blog.id}>
+                        <a className="text-2xl font-medium cursor-pointer hover:underline" target="_blank" href={`/blog/${base62.encode(Buffer.from(blog.id.replace(/-/g, ''), 'hex'))}`}>{blog.title}</a>
+                        <p className="text-sm font-medium text-zinc-400">{blog.description}</p>
+                        <p className="text-sm font-medium text-zinc-400 mt-3">{new Date(blog.createdAt).toLocaleString()} · {formatNumber(blog.viewCount)} 次访问</p>
+                    </div>
+                ))
+            }
+        </div>
+    )
+}

apps/frontend/app/(with-header-footer)/layout.tsx

@@ -0,0 +1,18 @@
+import Header from "../../components/Header";
+import Footer from "../../components/Footer";
+
+export default function LayoutWithHeaderFooter({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <>
+            <Header />
+            <main className="flex-1 flex flex-col bg-zinc-50">
+                {children}
+            </main>
+            <Footer />
+        </>
+    )
+}

apps/frontend/app/(with-header-footer)/page.tsx

@@ -0,0 +1,25 @@
+'use client';
+import favicon from '../favicon.ico';
+import Image from 'next/image';
+
+export default function Home() {
+  return (
+    <div className="w-full flex-1 flex flex-col items-center justify-center">
+      <Image
+        src={favicon.src}
+        alt="TONE's avatar"
+        width={180}
+        height={180}
+        className="rounded-full duration-400 size-35 md:size-45 select-none"
+        priority
+        quality={100}
+      />
+      <h1 className='text-4xl md:text-5xl font-bold mt-5 md:mt-8 gradient-title duration-400 select-none'>特恩(TONE)</h1>
+      <h2 className='text-lg sm:text-xl md:text-2xl mt-3 font-medium text-zinc-400 duration-400 select-none'>一名在各个领域反复横跳的程序员</h2>
+      <div className='flex sm:flex-row flex-col gap-2 sm:gap-10 mt-5 md:mt-8 duration-400'>
+        <a href='https://space.bilibili.com/474156211' target='_black' className='bg-[#488fe9] hover:bg-[#3972ba] text-center text-white w-45 sm:w-32 px-6 py-2 text-lg rounded-full cursor-pointer'>哔哩哔哩</a>
+        <a href='https://github.com/tonecn' className='bg-[#da843f] hover:bg-[#c87d3e] text-center text-white w-45 sm:w-32 px-6 py-2 text-lg rounded-full cursor-pointer'>GitHub</a>
+      </div>
+    </div>
+  );
+}

apps/frontend/app/(with-header-footer)/resource/components/ResourceCard.tsx

@@ -0,0 +1,47 @@
+import { ResourceBadge } from "@/components/resource";
+import { Card, CardContent } from "@/components/ui/card";
+import { Resource } from "@/lib/types/resource";
+import Image from "next/image";
+import React from "react";
+
+interface ResourceCardProps extends React.HTMLProps<HTMLAnchorElement> {
+    r: Resource;
+}
+
+export function ResourceCard({ r, ...props }: ResourceCardProps) {
+    const [imageError, setImageError] = React.useState(false);
+
+    return (
+        <a href={r.link} target="_blank" {...props}>
+            <Card className="w-full md:w-92 lg:w-100 md:rounded-xl rounded-none duration-300">
+                <CardContent>
+                    <div className="flex gap-6">
+                        <div>
+                            {!imageError && <Image
+                                src={r.imageUrl}
+                                alt="资源图片"
+                                width={90}
+                                height={90}
+                                className="rounded-md shadow"
+                                priority
+                                quality={80}
+                                onError={() => setImageError(true)}
+                            />}
+                        </div>
+                        <div className="flex-1 overflow-x-hidden">
+                            <div className="font-bold text-2xl">{r.title}</div>
+                            <div className="font-medium text-sm text-zinc-400 mt-1">{r.description}</div>
+                            <div className="flex gap-2 flex-wrap mt-4">
+                                {
+                                    r.tags.map((tag) => (
+                                        <ResourceBadge key={tag.name} tag={tag} />
+                                    ))
+                                }
+                            </div>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+        </a>
+    )
+}

apps/frontend/app/(with-header-footer)/resource/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import useSWR from "swr";
+import { ResourceCard } from "./components/ResourceCard";
+import { ResourceApi } from "@/lib/api";
+import {
+    Alert,
+    AlertDescription,
+    AlertTitle,
+} from "@/components/ui/alert"
+import { AlertCircle } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function Resources() {
+    const { data, isLoading, error } = useSWR(
+        '/api/resource',
+        () => ResourceApi.list(),
+    );
+
+    return (
+        <div className="flex-1 flex flex-col items-center">
+            <h1 className="mt-6 md:mt-20 text-2xl md:text-5xl font-medium text-zinc-800 text-center duration-300">精心挑选并收藏的资源</h1>
+            <p className="mt-4 md:mt-8 mx-3 text-zinc-400 text-sm text-center duration-300">请在浏览此部分内容前阅读并同意
+                <a className="text-zinc-600">《使用条款和隐私政策》</a>
+                ，继续使用或浏览表示您接受协议条款。</p>
+            {
+                error && (
+                    <div className="mt-10 mx-5">
+                        <Alert variant="destructive">
+                            <AlertCircle className="h-4 w-4" />
+                            <AlertTitle>出错了</AlertTitle>
+                            <AlertDescription>
+                                {error.message}
+                            </AlertDescription>
+                        </Alert>
+                    </div>
+                )
+            }
+
+            <div className="mt-6 sm:mt-10 md:mt-15 w-full flex flex-col md:w-auto md:mx-auto md:grid grid-cols-2 2xl:gap-x-35 lg:gap-x-20 gap-x-10 lg:gap-y-10 gap-y-5 sm:mb-10 duration-300">
+                {isLoading && (
+                    [...Array(3).map((_, i) => (
+                        <Skeleton key={i} className="h-35 w-full md:w-92 lg:w-100 md:rounded-xl rounded-none duration-300" />
+                    ))]
+                )}
+
+                {data && data.map((resource) => (
+                    <ResourceCard
+                        key={resource.id}
+                        r={resource}
+                    />
+                ))}
+            </div>
+        </div>
+    )
+}