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')
+  @Get(':id/slug')
-  async getBlog(
+  async getBlogBySlug(
-    @Param('id', new ParseUUIDPipe({ version: '4' })) id: string,
+    @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,7 +61,7 @@ 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,

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

@@ -35,13 +35,13 @@ export class BlogService {
           return i;
         }
 
-        const { createdAt, updatedAt, deletedAt, id, title, viewCount, description } = i;
+        const { createdAt, updatedAt, id, title, viewCount, description, slug } = i;
         return {
           createdAt,
           updatedAt,
-          deletedAt,
           id,
           title,
+          slug,
           viewCount,
           description,
         };
@@ -57,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);
@@ -93,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

@@ -19,7 +19,7 @@ export function BlogContent({ content }: { content?: string }) {
                 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" {...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}>
@@ -29,8 +29,8 @@ export function BlogContent({ content }: { content?: string }) {
                         </PhotoView>
                     </PhotoProvider>
                 ),
-                th: ({ ...props }) => <th className="text-ellipsis text-nowrap border border-zinc-300 p-2" {...props} />,
+                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 p-1" {...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} />,

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">
+                            <div key={d.id} className="border-b border-zinc-300 dark:border-zinc-500 py-2 last:border-none">
-                                <h1 className="text-zinc-500">{d.user ? d.user.nickname : '匿名'}</h1>
+                                <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">
+                                                    <div key={c.id} className="border-b border-zinc-300 dark:border-zinc-500 py-1 last:border-none">
-                                                        <h1 className="text-zinc-500">{c.user ? c.user.nickname : '匿名'}</h1>
+                                                        <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,4 +1,3 @@
-import { base62 } from "@/lib/utils";
 import { BlogContent } from "./BlogContent";
 import { BlogAPI } from "@/lib/api/server";
 import { handleAPIError } from "@/lib/api/common";
@@ -27,17 +26,8 @@ async function parseBlogParams({ params: paramsPromise, searchParams: searchPara
         }
     }
 
-    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('-');
-
     return {
-        id,
+        id: params.id,
         p: searchParams.p,
     }
 }
@@ -50,7 +40,7 @@ async function getBlog(paramsResult: ReturnType<typeof parseBlogParams>) {
         }
     } else {
         try {
-            const data = await BlogAPI.getBlog(`${id}`, p);
+            const data = await BlogAPI.getBlogBySlug(`${id}`, p);
             return {
                 data,
             }
@@ -83,17 +73,17 @@ export default async function Page({ params, searchParams }: PageRouteProps) {
     let { errorMsg } = res;
 
     const data = errorMsg ? null
-        : await BlogAPI.getBlog(`${id}`, p).catch(e => handleAPIError(e, ({ message }) => { errorMsg = message; return 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">
-                {errorMsg && <div className="my-20 text-center text-zinc-600">{errorMsg}</div>}
+                {errorMsg && <div className="my-20 text-center text-zinc-600 dark:text-zinc-400">{errorMsg}</div>}
                 {data && (
                     <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 text-center my-2 sm:my-5 mb-5 transition-all duration-500">发布于：{new Date(data.createdAt).toLocaleString()}</time>
+                            <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>

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,13 +17,10 @@ const formatNumber = (num: number): string => {
     return num.toString();
 };
 
-const getBlogDetailUrl = (id: string): string => {
+const getBlogDetailUrl = (slug: string): string => {
-    const cleanId = id.replace(/-/g, '');
+    return `/blog/${slug}`;
-    const encoded = base62.encode(Buffer.from(cleanId, 'hex'));
-    return `/blog/${encoded}`;
 };
 
-
 export const metadata = {
   title: '日志 - 特恩的日志',
   description: '我随便发点，你也随便看看～',
@@ -56,13 +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)}
+                                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

@@ -10,12 +10,12 @@ export default function Home() {
           width={180}
           height={180}
           className="rounded-full duration-400 size-35 md:size-45 select-none"
+          unoptimized
           priority
-          quality={100}
         />
       </figure>
       <h1 className='text-4xl md:text-5xl font-bold mt-5 md:mt-8 gradient-title duration-400 select-none'>特恩(TONE)</h1>
-      <p className='text-lg sm:text-xl md:text-2xl mt-3 font-medium text-zinc-400 duration-400 select-none'>一名在各个领域反复横跳的程序员</p>
+      <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'

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

@@ -18,9 +18,9 @@ export default async function Resources() {
 
     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>
+            <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 text-sm text-center duration-300">请在浏览此部分内容前阅读并同意
+            <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">《使用条款和隐私政策》</a>
+                <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>
+                <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/sitemap.ts

@@ -1,5 +1,4 @@
 import { BlogAPI } from '@/lib/api/server'
-import { base62 } from '@/lib/utils'
 import { MetadataRoute } from 'next'
 
 export const revalidate = 3600;
@@ -9,10 +8,8 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     const blogs = await BlogAPI.list().catch(() => [])
 
     const blogUrls = blogs.map(blog => {
-        const cleanId = blog.id.replace(/-/g, '')
-        const encoded = base62.encode(Buffer.from(cleanId, 'hex'))
         return {
-            url: `https://www.tonesc.cn/blog/${encoded}`,
+            url: `https://www.tonesc.cn/blog/${blog.slug}`,
             lastModified: new Date(blog.updatedAt),
             changeFrequency: 'weekly' as const,
             priority: 0.8,

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">
+        <footer className="border-t border-zinc-300 dark:border-zinc-500">
-            <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">
+            <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",
+                            "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"
+                            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",
+                                    "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 border-b-pink-500"
+                                    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"
+            className={cn(
-            style={{
+                "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",
-                backgroundColor: (() => {
+                'bg-[#e4e4e7] dark:bg-[#2d2d30]',
-                    switch (tag.type) {
+                tag.type === 'os' || 'bg-[#dbedfd] dark:bg-[#1e3a5f]',
-                        case 'os':
+            )}
-                            return '#dbedfd';
-                        default:
-                            return '#e4e4e7';
-                    }
-                })()
-            }}
             {...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/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.server.ts

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

apps/frontend/lib/types/blog.ts

@@ -3,6 +3,7 @@ import { BlogPermission } from "./Blog.Permission.enum";
 export interface Blog {
     id: string;
     title: string;
+    slug: string;
     description: string;
     viewCount: number;
     contentUrl: string;

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",
+    "lucide-react": "^0.562.0",
-    "next": "15.3.1",
+    "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": "^9.39.2",
-    "eslint-config-next": "15.3.1",
+    "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"],
+  "include": [
-  "exclude": ["node_modules"]
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }