fix: 修复后台文章计数为0 + 分类编辑补全描述字段 + CSP放行外部图片 + 更新关于页描述

- 文章管理：计数请求补 page=1 参数，命中分页接口返回正确的 total
- 分类管理：编辑模式新增描述输入框，保存时一并提交 description
- CSP：img-src 加入 https: 允许加载外部图片
- 关于页：数据存储描述从 JSON 文件更正为 SQLite 数据库
- Footer：添加 ICP 备案号

src/components/HeroSection.tsx

@@ -1,72 +1,41 @@
 "use client";
 
 import Link from "next/link";
-import { useEffect, useRef } from "react";
 import gsap from "gsap";
+import { useGsapAnimation } from "./useGsapAnimation";
 
 export default function HeroSection() {
-  const headingRef = useRef<HTMLHeadingElement>(null);
-  const sectionRef = useRef<HTMLElement>(null);
+  const ref = useGsapAnimation<HTMLElement>((scope, isReduced) => {
+    if (isReduced) return;
 
-  useEffect(() => {
-    if (!sectionRef.current) return;
+    const tl = gsap.timeline({ delay: 0.2 });
 
-    const ctx = gsap.context(() => {
-      const tl = gsap.timeline({ delay: 0.2 });
+    tl.from(".hero-subtitle", { y: 20, opacity: 0, duration: 0.6, ease: "power3.out" });
 
-      // Subtitle fade in
-      tl.from(".hero-subtitle", {
-        y: 20,
-        opacity: 0,
-        duration: 0.6,
-        ease: "power3.out",
-      });
-
-      // Heading — split chars and stagger
-      if (headingRef.current) {
-        const spans = headingRef.current.querySelectorAll(".hero-char");
-        tl.from(
-          spans,
-          {
-            y: 40,
-            opacity: 0,
-            filter: "blur(6px)",
-            duration: 0.6,
-            stagger: 0.035,
-            ease: "power3.out",
-          },
-          "-=0.3"
-        );
-      }
-
-      // Description
+    const heading = scope.querySelector<HTMLElement>("[data-heading]");
+    if (heading) {
+      const spans = heading.querySelectorAll(".hero-char");
       tl.from(
-        ".hero-desc",
-        { y: 20, opacity: 0, duration: 0.6, ease: "power3.out" },
+        spans,
+        {
+          y: 40,
+          opacity: 0,
+          filter: "blur(6px)",
+          duration: 0.6,
+          stagger: 0.035,
+          ease: "power3.out",
+        },
         "-=0.3"
       );
+    }
 
-      // Buttons
-      tl.from(
-        ".hero-btn",
-        { y: 15, opacity: 0, duration: 0.5, stagger: 0.1, ease: "power3.out" },
-        "-=0.3"
-      );
-
-      // Decorative line
-      tl.from(".hero-divider", {
-        scaleX: 0,
-        opacity: 0,
-        duration: 0.8,
-        ease: "power2.inOut",
-      });
-    }, sectionRef.current);
-
-    return () => ctx.revert();
+    tl.from(".hero-desc", { y: 20, opacity: 0, duration: 0.6, ease: "power3.out" }, "-=0.3");
+    tl.from(".hero-btn", { y: 15, opacity: 0, duration: 0.5, stagger: 0.1, ease: "power3.out" }, "-=0.3");
+    tl.from(".hero-divider", { scaleX: 0, opacity: 0, duration: 0.8, ease: "power2.inOut" });
   }, []);
 
-  // Split heading into char spans
-  const headingChars = (text: string, className?: string) =>
+  // 逐字拆分标题
+  const headingChars = (text: string) =>
     [...text].map((char, i) => (
       <span key={i} className="hero-char inline-block" style={char === " " ? { width: "0.3em" } : undefined}>
         {char}
@@ -74,23 +43,28 @@ export default function HeroSection() {
     ));
 
   return (
-    <section ref={sectionRef} className="px-page max-w-5xl mx-auto pt-20 pb-16 md:pt-28 md:pb-24">
+    <section ref={ref as React.RefObject<HTMLElement>} className="px-page max-w-5xl mx-auto pt-20 pb-16 md:pt-28 md:pb-24">
       <div className="max-w-2xl">
         <p className="hero-subtitle font-sans text-sm tracking-widest text-ink-muted uppercase mb-6">
-          胡旭的个人博客
+          一个来自于Sui的个人Blog
         </p>
         <h1
-          ref={headingRef}
+          data-heading
           className="font-display text-4xl md:text-6xl font-light text-ink leading-tight tracking-tight"
         >
           {headingChars("写字，")}
           <br />
-          <span className="text-terracotta">{headingChars("是一种思考的方式")}</span>
+          {/* 仅高亮关键词「思考」，避免整句赭红造成视觉重量过重 */}
+          <span>
+            {headingChars("是一种 ")}
+            <span className="text-terracotta">{headingChars("思考")}</span>
+            {headingChars(" 的方式")}
+          </span>
         </h1>
         <p className="hero-desc mt-6 font-body text-lg text-ink-muted leading-relaxed max-w-lg">
           这里记录着技术探索中的发现、旅途中的风景、阅读时的感悟，以及一个小镇青年创业路上的点点滴滴。
         </p>
-        <div className="mt-8 flex items-center gap-4">
+        <div className="mt-8 flex flex-wrap items-center gap-4">
           <Link
             href="/blog"
             className="hero-btn inline-flex items-center gap-2 px-6 py-3 rounded-full bg-ink text-cream font-sans text-sm tracking-wide hover:bg-terracotta transition-colors duration-300"
@@ -109,7 +83,7 @@ export default function HeroSection() {
         </div>
       </div>
 
-      {/* Decorative line */}
+      {/* 装饰分隔线 */}
       <div className="hero-divider mt-20 flex items-center gap-4 text-warm-gray origin-center">
         <div className="h-px flex-1 bg-gradient-to-r from-warm-gray/20 to-transparent" />
         <span className="font-display text-sm italic">精选文章</span>