chore: 不优化首页头像

apps/backend/src/admin/dto/admin-web/create-blog.dto.ts

@@ -5,6 +5,9 @@ export class CreateBlogDto {
   @IsString()
   title: string;
 
+  @IsString()
+  slug: string;// 允许空串，但如果为空则需要手动设置为null，防止数据库唯一键冲突
+
   @IsString()
   description: string;
 

apps/backend/src/admin/dto/admin-web/update-blog.dto.ts

@@ -8,6 +8,9 @@ export class UpdateBlogDto {
   @IsString()
   description: string;
 
+  @IsString()
+  slug: string;
+
   @IsString()
   contentUrl: string;
 

apps/backend/src/blog/blog.controller.ts

@@ -31,12 +31,16 @@ export class BlogController {
     return this.blogService.list();
   }
 
-  @Get(':id')
-  async getBlog(
-    @Param('id', new ParseUUIDPipe({ version: '4' })) id: string,
+  @Get(':id/slug')
+  async getBlogBySlug(
+    @Param('id') slug: string,
     @Query('p') password?: string,
   ) {
-    const blog = await this.blogService.findById(id);
+    if (slug.trim().length === 0) {
+      throw new BadRequestException('文章不存在');
+    }
+    
+    const blog = await this.blogService.findBySlug(slug);
     if (!blog) throw new BadRequestException('文章不存在或无权限访问');
 
     if (!blog.permissions.includes(BlogPermission.Public)) {
@@ -46,7 +50,7 @@ export class BlogController {
       } else {
         // 判断密码是否正确
         if (
-          !password ||
+          typeof password !== 'string' ||
           this.blogService.hashPassword(password) !== blog.password_hash
         ) {
           throw new BadRequestException('文章不存在或无权限访问');
@@ -57,10 +61,11 @@ export class BlogController {
     const blogDataRes = await fetch(`${blog.contentUrl}`);
     const blogContent = await blogDataRes.text();
 
-    await this.blogService.incrementViewCount(id);
+    this.blogService.incrementViewCount(blog.id).catch(() => null);
     return {
       id: blog.id,
       title: blog.title,
+      description: blog.description,
       createdAt: blog.createdAt,
       content: blogContent,
     };

apps/backend/src/blog/blog.service.ts

@@ -35,12 +35,13 @@ export class BlogService {
           return i;
         }
 
-        const { createdAt, deletedAt, id, title, viewCount, description } = i;
+        const { createdAt, updatedAt, id, title, viewCount, description, slug } = i;
         return {
           createdAt,
-          deletedAt,
+          updatedAt,
           id,
           title,
+          slug,
           viewCount,
           description,
         };
@@ -56,6 +57,9 @@ export class BlogService {
           .digest('hex');
       }
     }
+    if (typeof blog.slug === 'string' && blog.slug.trim().length === 0) {
+      blog.slug = null;
+    }
 
     const newBlog = this.blogRepository.create(blog);
     return this.blogRepository.save(newBlog);
@@ -92,6 +96,12 @@ export class BlogService {
     return await this.blogRepository.findOneBy({ id });
   }
 
+  async findBySlug(slug: string) {
+    return this.blogRepository.findOne({
+      where: { slug }
+    })
+  }
+
   async incrementViewCount(id: string) {
     await this.blogRepository.increment({ id }, 'viewCount', 1);
   }

apps/backend/src/blog/entity/Blog.entity.ts

@@ -16,6 +16,9 @@ export class Blog {
   @PrimaryGeneratedColumn('uuid')
   id: string;
 
+  @Column({ unique: true, nullable: true })
+  slug: string;
+
   @Column()
   title: string;
 

apps/backend/src/migrations/1766809565876-AddSlugToBlog.ts

@@ -0,0 +1,16 @@
+import { MigrationInterface, QueryRunner } from "typeorm";
+
+export class AddSlugToBlog1766809565876 implements MigrationInterface {
+    name = 'AddSlugToBlog1766809565876'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "blog" ADD "slug" character varying`);
+        await queryRunner.query(`ALTER TABLE "blog" ADD CONSTRAINT "UQ_0dc7e58d73a1390874a663bd599" UNIQUE ("slug")`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "blog" DROP CONSTRAINT "UQ_0dc7e58d73a1390874a663bd599"`);
+        await queryRunner.query(`ALTER TABLE "blog" DROP COLUMN "slug"`);
+    }
+
+}

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

@@ -0,0 +1,41 @@
+'use client';
+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 Image from "next/image";
+
+export function BlogContent({ content }: { content?: string }) {
+    return (
+        <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            rehypePlugins={[rehypeRaw, rehypeHighlight]}
+            components={{
+                h1: ({ ...props }) => <h2 className="text-3xl font-bold py-2" {...props} />,
+                h2: ({ ...props }) => <h3 className="text-2xl font-bold py-1" {...props} />,
+                h3: ({ ...props }) => <h4 className="text-xl font-bold py-0.5" {...props} />,
+                h4: ({ ...props }) => <h5 className="text-lg font-bold" {...props} />,
+                h5: ({ ...props }) => <h6 className="text-md font-bold" {...props} />,
+                p: ({ ...props }) => <p className="py-1 text-zinc-700 dark:text-zinc-300" {...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 dark:border-zinc-500 p-2" {...props} />,
+                td: ({ ...props }) => <td className="border border-zinc-300 dark:border-zinc-500 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} />,
+            }}
+        >{content}</ReactMarkdown>
+    )
+}

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

@@ -37,7 +37,7 @@ export function BlogComments({ blogId }: { blogId: string }) {
                 handleClearReplayTarget={() => setReplayTarget(null)}
             />
 
-            <div className="text-sm text-zinc-600">
+            <div className="text-sm text-zinc-600 dark:text-zinc-400">
                 {
                     user ? (<span>当前账户：{user.nickname}</span>) : (<span>当前未登录，留言名称为匿名，登录可前往控制台</span>)
                 }
@@ -47,21 +47,21 @@ export function BlogComments({ blogId }: { blogId: string }) {
                 {
                     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 key={d.id} className="border-b border-zinc-300 dark:border-zinc-500 py-2 last:border-none">
+                                <h1 className="text-zinc-500 dark:text-zinc-200">{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>
+                                    <p className="text-zinc-900 dark:text-zinc-200 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 key={c.id} className="border-b border-zinc-300 dark:border-zinc-500 py-1 last:border-none">
+                                                        <h1 className="text-zinc-500 dark:text-zinc-200">{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>

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

@@ -1,84 +1,92 @@
-'use client';
-
-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 { BlogContent } from "./BlogContent";
+import { BlogAPI } from "@/lib/api/server";
+import { handleAPIError } from "@/lib/api/common";
 import { BlogComments } from "./components/BlogComments";
-import Image from "next/image";
-import { BlogAPI } from "@/lib/api/client";
 
-export default function Blog() {
-    const params = useParams();
-    const searchParams = useSearchParams();
+interface PageRouteProps {
+    params: Promise<{ id: string }>
+    searchParams: Promise<{
+        [key: string]: string | string[] | undefined;
+    } | undefined>
+}
 
-    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('-');
+async function parseBlogParams({ params: paramsPromise, searchParams: searchParamsPromise }: PageRouteProps) {
+    const params = await paramsPromise ?? {};
+    const searchParams = await searchParamsPromise ?? {};
 
-    const password = searchParams.get('p');
-    const { data, error, isLoading } = useSWR(
-        `/api/blog/${id}`,
-        () => BlogAPI.getBlog(id, password || undefined),
-    )
+    if (Array.isArray(searchParams.p)) {
+        return {
+            errorMsg: '密码错误或文章不存在'
+        }
+    }
+
+    if (typeof params.id !== 'string' || params.id.trim() === '') {
+        return {
+            errorMsg: '文章不存在或无权限访问'
+        }
+    }
+
+    return {
+        id: params.id,
+        p: searchParams.p,
+    }
+}
+
+async function getBlog(paramsResult: ReturnType<typeof parseBlogParams>) {
+    const { errorMsg, id, p } = await paramsResult;
+    if (errorMsg) {
+        return {
+            errorMsg,
+        }
+    } else {
+        try {
+            const data = await BlogAPI.getBlogBySlug(`${id}`, p);
+            return {
+                data,
+            }
+        } catch (error) {
+            return {
+                errorMsg: handleAPIError(error, ({ message }) => message)
+            }
+        }
+    }
+}
+
+export async function generateMetadata({ params, searchParams }: PageRouteProps) {
+    const { errorMsg, data } = await getBlog(parseBlogParams({ params, searchParams }));
+    if (data) {
+        return {
+            title: `${data.title} - 特恩的日志`,
+            description: `${data.description}`
+        }
+    } else {
+        return {
+            title: `${errorMsg || '错误'} - 特恩的日志`,
+            description: `出错啦`
+        }
+    }
+}
+
+export default async function Page({ params, searchParams }: PageRouteProps) {
+    const res = await parseBlogParams({ params, searchParams });
+    const { id, p } = res;
+    let { errorMsg } = res;
+
+    const data = errorMsg ? null
+        : await BlogAPI.getBlogBySlug(`${id}`, p).catch(e => handleAPIError(e, ({ message }) => { errorMsg = message; return null }));
 
     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>
-                )}
+                {errorMsg && <div className="my-20 text-center text-zinc-600 dark:text-zinc-400">{errorMsg}</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>
-                    </>
+                    <article className="w-full">
+                        <header className="flex flex-col items-center">
+                            <h1 className="text-center text-2xl sm:text-3xl font-bold mt-10 transition-all duration-500">{data.title}</h1>
+                            <time className="text-sm text-zinc-500 dark:text-zinc-300 text-center my-2 sm:my-5 mb-5 transition-all duration-500">发布于：{new Date(data.createdAt).toLocaleString()}</time>
+                        </header>
+                        <BlogContent content={data.content} />
+                    </article>
                 )}
 
                 {data && (

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

@@ -4,7 +4,6 @@ import {
     AlertTitle,
 } from "@/components/ui/alert";
 import { AlertCircle } from "lucide-react";
-import { base62 } from "@/lib/utils";
 import { BlogAPI } from "@/lib/api/server";
 import { handleAPIError } from "@/lib/api/common";
 
@@ -18,10 +17,13 @@ const formatNumber = (num: number): string => {
     return num.toString();
 };
 
-const getBlogDetailUrl = (id: string): string => {
-    const cleanId = id.replace(/-/g, '');
-    const encoded = base62.encode(Buffer.from(cleanId, 'hex'));
-    return `/blog/${encoded}`;
+const getBlogDetailUrl = (slug: string): string => {
+    return `/blog/${slug}`;
+};
+
+export const metadata = {
+  title: '日志 - 特恩的日志',
+  description: '我随便发点，你也随便看看～',
 };
 
 export default async function Blog() {
@@ -50,14 +52,13 @@ export default async function Blog() {
                         <h2 className="text-2xl font-medium">
                             <a
                                 className="hover:underline focus:outline-none focus:ring-2 focus:ring-zinc-400 rounded"
-                                href={getBlogDetailUrl(blog.id)}
-                                target="_blank"
+                                href={getBlogDetailUrl(blog.slug)}
                                 rel="noopener noreferrer"
                             >   
                                 {blog.title}
                             </a>
                         </h2>
-                        <p className="text-sm font-medium text-zinc-600">{blog.description}</p>
+                        <p className="text-sm font-medium text-zinc-600 dark:text-zinc-300">{blog.description}</p>
                         <footer className="mt-3 text-sm text-zinc-500 flex items-center gap-2">
                             <time dateTime={blog.createdAt}>
                                 {new Date(blog.createdAt).toLocaleString('zh-CN')}

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

@@ -9,7 +9,7 @@ export default function LayoutWithHeaderFooter({
     return (
         <>
             <Header />
-            <main className="flex-1 flex flex-col bg-zinc-50">
+            <main className="flex-1 flex flex-col bg-zinc-50 dark:bg-zinc-950">
                 {children}
             </main>
             <Footer />

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

@@ -2,22 +2,36 @@ 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="/avatar.png"
-        alt="TONE's avatar"
-        width={180}
-        height={180}
-        className="rounded-full duration-400 size-35 md:size-45 select-none"
-        priority
-        quality={100}
-      />
+    <section className="w-full flex-1 flex flex-col items-center justify-center">
+      <figure className="flex flex-col items-center">
+        <Image
+          src="/avatar.png"
+          alt="TONE 的个人头像"
+          width={180}
+          height={180}
+          className="rounded-full duration-400 size-35 md:size-45 select-none"
+          unoptimized
+          priority
+        />
+      </figure>
       <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>
+      <p className='text-lg sm:text-xl md:text-2xl mt-3 font-medium text-zinc-400 dark:text-zinc-200 duration-400 select-none'>一名在各个领域反复横跳的程序员</p>
+      <nav className='flex sm:flex-row flex-col gap-2 sm:gap-10 mt-5 md:mt-8 duration-400' aria-label="社交媒体链接">
+        <a href='https://space.bilibili.com/474156211'
+          target='_black'
+          rel="noopener noreferrer"
+          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'
+          target='_black'
+          rel="noopener noreferrer"
+          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>
+      </nav>
+    </section>
   );
 }

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

@@ -18,7 +18,7 @@ export function ResourceCard({ r, ...props }: ResourceCardProps) {
                         </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="font-medium text-sm text-zinc-400 dark:text-zinc-300 mt-1">{r.description}</div>
                             <div className="flex gap-2 flex-wrap mt-4">
                                 {
                                     r.tags.map((tag) => (

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

@@ -16,9 +16,9 @@ export default function ResourceCardImage({ imageUrl }: ResourceCardImage) {
                 alt="资源图片"
                 width={90}
                 height={90}
-                className="rounded-md shadow"
+                className="rounded-md shadow w-22.5 h-22.5"
                 priority
-                quality={80}
+                quality={75}
                 onError={() => setImageError(true)}
             />}
         </>

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

@@ -7,15 +7,20 @@ import {
 import { ResourceAPI } from "@/lib/api/server";
 import { AlertCircle } from "lucide-react";
 
+export const metadata = {
+    title: '资源 - 特恩的日志',
+    description: '一些实用工具和学习资源',
+};
+
 export default async function Resources() {
     let errorMsg = '';
     const data = await ResourceAPI.list().catch(e => { errorMsg = `${e}`; return null; });
 
     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>
+            <h1 className="mt-6 md:mt-20 text-2xl md:text-5xl font-medium text-zinc-800 dark:text-zinc-200 text-center duration-300">精心挑选并收藏的资源</h1>
+            <p className="mt-4 md:mt-8 mx-3 text-zinc-400 dark:text-zinc-300 text-sm text-center duration-300">请在浏览此部分内容前阅读并同意
+                <a className="text-zinc-600 dark:text-zinc-400">《使用条款和隐私政策》</a>
                 ，继续使用或浏览表示您接受协议条款。</p>
             {
                 errorMsg && (

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

@@ -17,6 +17,7 @@ import { useState } from "react";
 import { toast } from "sonner";
 import { BlogPermissionCheckBoxs } from "./BlogPermissionCheckBoxs";
 import { AdminAPI } from "@/lib/api/client";
+import { copyShareURL } from "./utils";
 
 interface AddBlogProps {
     children: React.ReactNode;
@@ -27,6 +28,7 @@ export default function AddBlog({ children, onRefresh }: AddBlogProps) {
     const [open, setOpen] = useState(false);
     const [blog, setBlog] = useState({
         title: "",
+        slug: "",
         description: "",
         contentUrl: "",
         permissions: [] as BlogPermission[],
@@ -44,6 +46,7 @@ export default function AddBlog({ children, onRefresh }: AddBlogProps) {
                 toast.success("添加成功");
                 setBlog({
                     title: '',
+                    slug: '',
                     description: '',
                     contentUrl: '',
                     permissions: [],
@@ -92,6 +95,17 @@ export default function AddBlog({ children, onRefresh }: AddBlogProps) {
                             onChange={(e) => setBlog({ ...blog, description: e.target.value })}
                         />
                     </div>
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="slug" className="text-right">
+                            Slug
+                        </Label>
+                        <Input
+                            id="slug"
+                            className="col-span-3"
+                            value={blog.slug}
+                            onChange={(e) => setBlog({ ...blog, slug: e.target.value })}
+                        />
+                    </div>
                     <div className="grid grid-cols-4 items-center gap-4">
                         <Label htmlFor="contentUrl" className="text-right">
                             文章URL
@@ -136,9 +150,18 @@ export default function AddBlog({ children, onRefresh }: AddBlogProps) {
                         </div>
                     }
                 </div>
-                <DialogFooter>
-                    <Button type="button" variant='secondary' onClick={() => setOpen(false)}>取消</Button>
-                    <Button type="button" onClick={handleSubmit}>保存</Button>
+                <DialogFooter >
+                    <div className="flex justify-between w-full">
+                        <Button type="button" variant='outline' onClick={() => copyShareURL({
+                            slug: blog.slug,
+                            password: blog.password,
+                            permissions: blog.permissions,
+                        })}>复制分享链接</Button>
+                        <div>
+                            <Button type="button" variant='secondary' onClick={() => setOpen(false)}>取消</Button>
+                            <Button type="button" onClick={handleSubmit}>保存</Button>
+                        </div>
+                    </div>
                 </DialogFooter>
             </DialogContent>
         </Dialog>

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

@@ -20,6 +20,7 @@ import { BlogPermissionCheckBoxs } from "./BlogPermissionCheckBoxs"
 import { BlogPermission } from "@/lib/types/Blog.Permission.enum"
 import { SetPasswordDialog } from "./SetPasswordDialog"
 import { AdminAPI } from "@/lib/api/client"
+import { copyShareURL } from "./utils"
 
 interface BlogEditProps {
     id: string;
@@ -46,6 +47,7 @@ export default function BlogEdit({ id, children, onRefresh }: BlogEditProps) {
             await AdminAPI.updateBlog(id, {
                 title: blog.title,
                 description: blog.description,
+                slug: blog.slug,
                 contentUrl: blog.contentUrl,
                 permissions: blog.permissions,
             });
@@ -106,6 +108,17 @@ export default function BlogEdit({ id, children, onRefresh }: BlogEditProps) {
                                         onChange={(e) => mutate({ ...blog, description: e.target.value }, false)}
                                     />
                                 </div>
+                                <div className="grid grid-cols-4 items-center gap-4">
+                                    <Label htmlFor="slug" className="text-right">
+                                        Slug
+                                    </Label>
+                                    <Input
+                                        id="slug"
+                                        className="col-span-3"
+                                        value={blog.slug}
+                                        onChange={(e) => mutate({ ...blog, slug: e.target.value }, false)}
+                                    />
+                                </div>
                                 <div className="grid grid-cols-4 items-center gap-4">
                                     <Label htmlFor="contentUrl" className="text-right">
                                         文章URL
@@ -151,6 +164,11 @@ export default function BlogEdit({ id, children, onRefresh }: BlogEditProps) {
                                 <div className="w-full flex justify-between">
                                     <div>
                                         <Button variant='destructive' onClick={handleDelete}>删除</Button>
+                                        <Button variant='outline' className="ml-2" onClick={() => copyShareURL({
+                                            slug: blog.slug,
+                                            permissions: blog.permissions,
+                                            password: ''
+                                        })}>复制链接</Button>
                                     </div>
                                     <div>
                                         <Button type="button" variant='secondary' onClick={() => setOpen(false)}>取消</Button>

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

@@ -28,10 +28,11 @@ export default function BlogTable({ blogs, error, onRefresh }: BlogTableProps) {
             }
             <TableHeader>
                 <TableRow>
-                    <TableHead className="w-25">Id</TableHead>
+                    <TableHead className="w-15">Id</TableHead>
                     <TableHead>标题</TableHead>
                     <TableHead>描述</TableHead>
-                    <TableHead>文章URL</TableHead>
+                    <TableHead>Slug</TableHead>
+                    <TableHead className="w-25">文章URL</TableHead>
                     <TableHead className="text-right">操作</TableHead>
                 </TableRow>
             </TableHeader>
@@ -42,7 +43,7 @@ export default function BlogTable({ blogs, error, onRefresh }: BlogTableProps) {
                             <TooltipProvider>
                                 <Tooltip>
                                     <TooltipTrigger asChild>
-                                        <div className="max-w-[100px] overflow-hidden text-ellipsis">{blog.id}</div>
+                                        <div className="max-w-15 overflow-hidden text-ellipsis">{blog.id}</div>
                                     </TooltipTrigger>
                                     <TooltipContent>
                                         <p>{blog.id}</p>
@@ -52,7 +53,19 @@ export default function BlogTable({ blogs, error, onRefresh }: BlogTableProps) {
                         </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="whitespace-normal break-all">{blog.slug}</TableCell>
+                        <TableCell>
+                            <TooltipProvider>
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <div className="max-w-20 overflow-hidden text-ellipsis">{blog.contentUrl}</div>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        <p>{blog.contentUrl}</p>
+                                    </TooltipContent>
+                                </Tooltip>
+                            </TooltipProvider>
+                        </TableCell>
                         <TableCell className="text-right">
                             <BlogEdit id={blog.id} onRefresh={() => onRefresh()}>
                                 <Button variant={'outline'} size={'sm'}>编辑</Button>

apps/frontend/app/console/(with-menu)/web/blog/components/utils.ts

@@ -0,0 +1,32 @@
+import { BlogPermission } from "@/lib/types/Blog.Permission.enum";
+import { toast } from "sonner";
+
+export function copyShareURL(data: {
+    slug: string;
+    password: string;
+    permissions: BlogPermission[];
+}) {
+    const slug = data.slug.trim();
+    const password = data.password.trim();
+    const permissions = data.permissions;
+
+    if (slug.length === 0) {
+        return toast.warning('请先填写Slug')
+    }
+
+    let url = `${window.location.origin}/blog/${slug}`;
+
+    if (permissions.includes(BlogPermission.ByPassword)) {
+        if (password.length === 0) {
+            return toast.warning('开启了密码保护，但无法获取有效的密码，无法生成有效URL')
+        } else {
+            url += `?p=${password}`;
+        }
+    }
+
+    navigator.clipboard.writeText(url).then(() => {
+        toast.success('复制成功');
+    }, () => {
+        toast.error('复制失败，请手动复制');
+    });
+};

apps/frontend/app/console/login/page.tsx

@@ -97,7 +97,7 @@ export default function Login() {
                                         alt="Image"
                                         width={500}
                                         height={500}
-                                        className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+                                        className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.6] dark:grayscale"
                                         priority
                                         quality={100}
                                     />

apps/frontend/app/layout.tsx

@@ -1,10 +1,10 @@
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "../components/theme-provider";
-import { metadata } from "./config/metadata";
 import { Toaster } from "sonner";
 import { UserAPI } from "@/lib/api/server";
 import { ClientProvider } from "./ClientProvider";
+import { Metadata } from "next";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -16,7 +16,10 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
-export { metadata };
+export const metadata: Metadata = {
+  title: "特恩的日志",
+  description: "一名在各个领域反复横跳的程序员",
+};
 
 export default async function RootLayout({
   children,
@@ -26,7 +29,7 @@ export default async function RootLayout({
   const user = await UserAPI.me().catch(() => null);
 
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="zh-CN" suppressHydrationWarning>
       <link rel="icon" href="/favicon.ico" />
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen flex flex-col`}
@@ -39,10 +42,8 @@ export default async function RootLayout({
             enableSystem
             disableTransitionOnChange
           >
-            <main className="flex-1 flex flex-col bg-zinc-50">
-              {children}
-              <Toaster />
-            </main>
+            {children}
+            <Toaster />
           </ThemeProvider>
         </ClientProvider>
       </body>

apps/frontend/app/robots.ts

@@ -0,0 +1,12 @@
+import { MetadataRoute } from 'next'
+
+export default function robots(): MetadataRoute.Robots {
+    return {
+        rules: {
+            userAgent: '*',
+            allow: '/',
+            disallow: '/console',
+        },
+        sitemap: 'https://www.tonesc.cn/sitemap.xml',
+    }
+}

apps/frontend/app/sitemap.ts

@@ -0,0 +1,42 @@
+import { BlogAPI } from '@/lib/api/server'
+import { MetadataRoute } from 'next'
+
+export const revalidate = 3600;
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+    // 获取所有博客
+    const blogs = await BlogAPI.list().catch(() => [])
+
+    const blogUrls = blogs.map(blog => {
+        return {
+            url: `https://www.tonesc.cn/blog/${blog.slug}`,
+            lastModified: new Date(blog.updatedAt),
+            changeFrequency: 'weekly' as const,
+            priority: 0.8,
+        }
+    })
+
+    // 静态页面
+    const staticUrls = [
+        {
+            url: 'https://www.tonesc.cn/',
+            lastModified: new Date(),
+            changeFrequency: 'yearly' as const,
+            priority: 1,
+        },
+        {
+            url: 'https://www.tonesc.cn/blog',
+            lastModified: new Date(),
+            changeFrequency: 'daily' as const,
+            priority: 0.9,
+        },
+        {
+            url: 'https://www.tonesc.cn/resource',
+            lastModified: new Date(),
+            changeFrequency: 'monthly' as const,
+            priority: 0.7,
+        },
+    ]
+
+    return [...staticUrls, ...blogUrls]
+}

apps/frontend/components/Footer.tsx

@@ -10,19 +10,19 @@ const EMAIL = "tonesc.cn@gmail.com";
 
 export default function Footer() {
     return (
-        <footer className="border-t border-zinc-300">
-            <div className="bg-zinc-50 px-4 py-3 md:py-5 sm:px-10 md:px-20 flex flex-col sm:flex-row justify-between items-center gap-4 transition-all">
+        <footer className="border-t border-zinc-300 dark:border-zinc-500">
+            <div className="bg-zinc-50 dark:bg-zinc-950 px-4 py-3 md:py-5 sm:px-10 md:px-20 flex flex-col sm:flex-row justify-between items-center gap-4 transition-all">
                 {/* 版权与备案信息 */}
                 <div className="text-center sm:text-left">
                     <a
                         href="https://beian.miit.gov.cn/"
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="block text-sm text-zinc-500 hover:text-zinc-700 hover:underline focus:outline-none focus:underline"
+                        className="block text-sm text-zinc-500 dark:text-zinc-300 hover:text-zinc-700 dark:hover:text-zinc-100 hover:underline focus:outline-none focus:underline"
                     >
                         备案号：渝ICP备2023009516号-1
                     </a>
-                    <p className="mt-1 text-sm text-zinc-500">
+                    <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-300">
                         © {new Date().getFullYear()} TONE Page. All rights reserved.
                     </p>
                 </div>
@@ -32,13 +32,13 @@ export default function Footer() {
                     <Popover>
                         <PopoverTrigger asChild>
                             <Button variant='outline' size='sm' >
-                                <Mail className="text-zinc-600" />
+                                <Mail className="text-zinc-600 dark:text-zinc-300" />
                             </Button>
                         </PopoverTrigger>
                         <PopoverContent className="w-fit">
                             <a
                                 href={`mailto:${EMAIL}`}
-                                className="text-sm text-zinc-800 hover:underline focus:outline-none focus:underline"
+                                className="text-sm text-zinc-800 dark:text-zinc-200 hover:underline focus:outline-none focus:underline"
                             >
                                 {EMAIL}
                             </a>

apps/frontend/components/Header.tsx

@@ -48,13 +48,13 @@ export default function Header() {
 
     return (
         <>
-            <header className="sticky top-0 z-50 backdrop-blur-sm bg-white/40 shadow" role="banner" aria-label="网站顶部导航栏">
+            <header className="sticky top-0 z-50 backdrop-blur-sm bg-white/40 dark:bg-black/40 shadow dark:shadow-zinc-500" role="banner" aria-label="网站顶部导航栏">
                 <div className="flex items-center justify-between px-10 md:h-18 md:px-20 h-14 duration-300" aria-label="主菜单">
                     <Link
                         href="/"
                         className={cn(
-                            "cursor-pointer font-medium text-zinc-500 hover:text-zinc-800 border-b-4 border-transparent duration-200",
-                            pathname === "/" && "text-zinc-800"
+                            "cursor-pointer font-medium text-zinc-500 dark:text-zinc-300 hover:text-zinc-800 dark:hover:text-zinc-100 border-b-4 border-transparent duration-200",
+                            pathname === "/" && "text-zinc-800 dark:text-zinc-100"
                         )}
                         aria-current={pathname === "/" ? "page" : undefined}
                     >
@@ -72,8 +72,8 @@ export default function Header() {
                                 key={item.name}
                                 href={item.path}
                                 className={cn(
-                                    "cursor-pointer md:text-lg font-medium text-zinc-500 hover:text-zinc-800 border-b-4 border-transparent duration-200",
-                                    pathname.startsWith(item.path) && "text-zinc-800 border-b-pink-500"
+                                    "cursor-pointer md:text-lg font-medium text-zinc-500 dark:text-zinc-300 hover:text-zinc-800 dark:hover:text-zinc-100 border-b-4 border-transparent duration-200",
+                                    pathname.startsWith(item.path) && "text-zinc-800 dark:text-zinc-100 border-b-pink-500"
                                 )}
                                 onClick={e => handleClick(e, item.path)}
                                 aria-current={pathname === item.path ? "page" : undefined}

apps/frontend/components/resource.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils";
 import { X } from "lucide-react";
 
 interface ResourceBadgeProps extends React.HTMLProps<HTMLDivElement> {
@@ -10,23 +11,17 @@ export function ResourceBadge({ tag, editMode, onClose, ...props }: ResourceBadg
     return (
         <div
             id={tag.name}
-            className="text-[10px] text-zinc-500 font-medium py-[1px] px-1.5 rounded-full flex items-center gap-1"
-            style={{
-                backgroundColor: (() => {
-                    switch (tag.type) {
-                        case 'os':
-                            return '#dbedfd';
-                        default:
-                            return '#e4e4e7';
-                    }
-                })()
-            }}
+            className={cn(
+                "text-[10px] text-zinc-500 dark:text-zinc-300 dark:border font-medium py-px px-1.5 rounded-full flex items-center gap-1",
+                'bg-[#e4e4e7] dark:bg-[#2d2d30]',
+                tag.type === 'os' || 'bg-[#dbedfd] dark:bg-[#1e3a5f]',
+            )}
             {...props}
         >
             <span className="text-nowrap">{tag.name}</span>
             {
                 editMode && (
-                    <span onClick={() => onClose?.(tag.name)}><X className="w-3 h-3 text-zinc-800 cursor-pointer" /></span>
+                    <span onClick={() => onClose?.(tag.name)}><X className="w-3 h-3 text-zinc-800 dark:text-zinc-200 cursor-pointer" /></span>
                 )
             }
         </div>

apps/frontend/lib/api/common.ts

@@ -52,7 +52,7 @@ export function normalizeAPIError(error: unknown): never {
     throw new APIError((error instanceof Error ? `${error.message}` : '') || '未知错误', 400);
 }
 
-export function handleAPIError(error: unknown, handler: (e: APIError) => void): void {
+export function handleAPIError<T>(error: unknown, handler: (e: APIError) => T): T {
     if (error instanceof APIError) {
         return handler(error);
     }

apps/frontend/lib/api/endpoints/admin.client.ts

@@ -3,6 +3,7 @@ import { clientFetch } from "../client";
 import { Blog } from "@/lib/types/blog";
 import { BlogPermission } from "@/lib/types/Blog.Permission.enum";
 import { Role } from "@/lib/types/role";
+import { APIError } from "../common";
 
 export interface UserEntity {
     userId: string;
@@ -87,9 +88,31 @@ export async function updateResource(id: string, data: UpdateResourceParams) {
 interface CreateBlogParams {
     title: string;
     description: string;
+    slug: string;
     contentUrl: string;
+    permissions: BlogPermission[];
+    password: string;
 }
 export async function createBlog(data: CreateBlogParams) {
+    data.title = data.title.trim()
+    data.description = data.description.trim()
+    data.slug = data.slug.trim()
+    data.contentUrl = data.contentUrl.trim()
+    data.password = data.password.trim()
+
+    if (data.title.length === 0) {
+        throw new APIError('标题不得为空')
+    }
+    if (data.description.length === 0) {
+        throw new APIError('描述不得为空')
+    }
+    if (data.slug.length === 0) {
+        throw new APIError('Slug不得为空')
+    }
+    if (data.contentUrl.length === 0) {
+        throw new APIError('文章URL不得为空')
+    }
+
     return clientFetch<Blog>('/api/admin/web/blog', {
         method: 'POST',
         body: JSON.stringify(data)
@@ -115,14 +138,29 @@ export async function removeBlog(id: string) {
 interface UpdateBlogParams {
     title: string;
     description: string;
+    slug: string;
     contentUrl: string;
     permissions: BlogPermission[],
 }
 export async function updateBlog(id: string, data: UpdateBlogParams) {
     data.title = data.title.trim();
     data.description = data.description.trim();
+    data.slug = data.slug.trim();
     data.contentUrl = data.contentUrl.trim();
 
+    if (data.title.length === 0) {
+        throw new APIError('标题不得为空')
+    }
+    if (data.description.length === 0) {
+        throw new APIError('描述不得为空')
+    }
+    if (data.slug.length === 0) {
+        throw new APIError('Slug不得为空')
+    }
+    if (data.contentUrl.length === 0) {
+        throw new APIError('文章URL不得为空')
+    }
+
     return clientFetch<Blog>(`/api/admin/web/blog/${id}`, {
         method: 'PUT',
         body: JSON.stringify(data)

apps/frontend/lib/api/endpoints/blog.client.ts

@@ -5,6 +5,7 @@ export async function getBlog(id: string, password?: string) {
     return clientFetch<{
         id: string;
         title: string;
+        description: string;
         createdAt: string;
         content: string;
     }>(`/api/blog/${id}` + (password ? `?p=${password}` : ''));

apps/frontend/lib/api/endpoints/blog.server.ts

@@ -2,5 +2,18 @@ import { Blog } from "@/lib/types/blog";
 import { serverFetch } from "../server";
 
 export async function list() {
-    return serverFetch<Blog[]>('/api/blog')
+    return serverFetch<Pick<Blog,
+        'id' | 'title' | 'slug' | 'description' | 'viewCount' | 'createdAt' | 'updatedAt'
+    >[]>('/api/blog')
 }
+
+export async function getBlogBySlug(slug: string, password?: string) {
+    return serverFetch<{
+        id: string;
+        title: string;
+        description: string;
+        createdAt: string;
+        content: string;
+    }>(`/api/blog/${slug}/slug` + (password ? `?p=${password}` : ''));
+}
+

apps/frontend/lib/types/blog.ts

@@ -3,9 +3,12 @@ import { BlogPermission } from "./Blog.Permission.enum";
 export interface Blog {
     id: string;
     title: string;
+    slug: string;
     description: string;
     viewCount: number;
     contentUrl: string;
     createdAt: string;
+    updatedAt: string;
+    deletedAt: string;
     permissions: BlogPermission[];
 }

apps/frontend/package.json

@@ -39,8 +39,8 @@
     "drawer": "^0.0.2",
     "highlight.js": "^11.11.1",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.503.0",
-    "next": "15.3.1",
+    "lucide-react": "^0.562.0",
+    "next": "16.1.1",
     "next-themes": "^0.4.6",
     "pagination": "^0.4.6",
     "popover": "^2.4.1",
@@ -54,22 +54,22 @@
     "remark-gfm": "^4.0.1",
     "select": "^1.1.2",
     "sonner": "^2.0.7",
-    "swr": "^2.3.7",
+    "swr": "^2.3.8",
     "tailwind-merge": "^3.4.0",
     "textarea": "^0.3.0",
     "vaul": "^1.1.2",
-    "zod": "^3.25.76",
+    "zod": "^4.3.4",
     "zustand": "^5.0.9"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.3",
     "@tanstack/react-table": "^8.21.3",
-    "@types/node": "^20.19.26",
+    "@types/node": "^25.0.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@types/webappsec-credential-management": "^0.6.9",
-    "eslint": "^9.39.1",
-    "eslint-config-next": "15.3.1",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "16.1.1",
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"

apps/frontend/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -19,9 +23,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }