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

feat: 优化项目目录结构

Browse Source
This commit is contained in:
tone
2025-12-12 17:25:26 +08:00
parent ae627d0496
commit b89f83291e
235 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
apps/frontend/app/(with-header-footer)/blog/[id]/components/BlogCommentTool.tsx Normal file
View File

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

81
apps/frontend/app/(with-header-footer)/blog/[id]/components/BlogComments.tsx Normal file
View File

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

95
apps/frontend/app/(with-header-footer)/blog/[id]/page.tsx Normal file
View File

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

63
apps/frontend/app/(with-header-footer)/blog/page.tsx Normal file
View File

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