feat: 重构博客为水墨纸质风格 + 搭建后台管理系统

- 重新设计全站 UI：parchment/ink/terracotta 水墨纸质色系，宋式 serif 排版 - 新增页面：文章列表、文章详情、分类、标签、关于 - GSAP ScrollTrigger 滚动动画 + 逐字揭示效果 - 后台管理系统 /admin：文章/分类/标签 CRUD，JSON 文件存储 - 登录认证（cookie session） - 设计系统文档 UI.md
2026-06-24 08:45:28 +08:00
parent 507f12e501
commit dce8fe62ea
35 changed files with 3124 additions and 96 deletions
@@ -0,0 +1,120 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useRef } from "react";
+import gsap from "gsap";
+
+export default function HeroSection() {
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const sectionRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (!sectionRef.current) return;
+
+    const ctx = gsap.context(() => {
+      const tl = gsap.timeline({ delay: 0.2 });
+
+      // 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
+      tl.from(
+        ".hero-desc",
+        { y: 20, opacity: 0, duration: 0.6, 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();
+  }, []);
+
+  // Split heading into char spans
+  const headingChars = (text: string, className?: string) =>
+    [...text].map((char, i) => (
+      <span key={i} className="hero-char inline-block" style={char === " " ? { width: "0.3em" } : undefined}>
+        {char}
+      </span>
+    ));
+
+  return (
+    <section ref={sectionRef} 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">
+          胡旭的个人博客
+        </p>
+        <h1
+          ref={headingRef}
+          className="font-display text-4xl md:text-6xl font-light text-ink leading-tight tracking-tight"
+        >
+          {headingChars("写字，")}
+          <br />
+          <span className="text-terracotta">{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">
+          <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"
+          >
+            开始阅读
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+              <path d="M4 8h8M9 5l3 3-3 3" />
+            </svg>
+          </Link>
+          <Link
+            href="/about"
+            className="hero-btn inline-flex items-center gap-2 px-6 py-3 rounded-full border border-warm-gray/30 text-ink-muted font-sans text-sm tracking-wide hover:border-terracotta/40 hover:text-terracotta transition-colors duration-300"
+          >
+            了解更多
+          </Link>
+        </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>
+        <div className="h-px flex-1 bg-gradient-to-l from-warm-gray/20 to-transparent" />
+      </div>
+    </section>
+  );
+}