Auto backup \2026-\04-\20

personal-blog/frontend/src/components/CursorEffect.jsx

@@ -0,0 +1,61 @@
+// 还原 DeepSeek 首页的 cursor blend 圆饼效果
+// 原理：fixed 白色圆环 + mix-blend-mode:difference，悬停 [data-cursor="blend"] 元素时放大为 64px 半透明圆饼，移开缩小消失
+import { useEffect, useRef } from 'react'
+
+const CURSOR_CSS = `
+.ds-cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;will-change:transform,opacity;border-radius:50%;opacity:0;width:0;height:0;mix-blend-mode:difference;transition:width .3s cubic-bezier(.16,1,.3,1),height .3s cubic-bezier(.16,1,.3,1),margin .3s cubic-bezier(.16,1,.3,1),background-color .3s ease,border-color .3s ease,opacity .3s ease}
+.ds-cursor-ring.is-blend{width:64px;height:64px;margin-left:-32px;margin-top:-32px;border-color:transparent;background:#fff}
+@media (hover:none),(pointer:coarse){.ds-cursor-ring{display:none}}
+`
+
+export function CursorEffect() {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    const ring = ref.current
+    if (!ring) return
+
+    let raf
+    let tx = 0, ty = 0, x = 0, y = 0
+
+    // 弹性跟随：距离 < 50px 跟得紧(0.7)，远了跟得松(0.4)
+    const loop = () => {
+      const dx = tx - x, dy = ty - y
+      const ease = Math.sqrt(dx * dx + dy * dy) < 50 ? 0.7 : 0.4
+      x += dx * ease
+      y += dy * ease
+      ring.style.transform = `translate3d(${x}px, ${y}px, 0)`
+      raf = requestAnimationFrame(loop)
+    }
+    raf = requestAnimationFrame(loop)
+
+    const onMove = (e) => {
+      tx = e.clientX
+      ty = e.clientY
+      ring.style.opacity = '1'
+    }
+    const onOver = (e) => {
+      const blendEl = e.target.closest('[data-cursor="blend"]')
+      ring.classList.toggle('is-blend', !!blendEl)
+    }
+    const onLeave = () => { ring.style.opacity = '0' }
+
+    document.addEventListener('mousemove', onMove)
+    document.addEventListener('mouseover', onOver)
+    document.documentElement.addEventListener('mouseleave', onLeave)
+
+    return () => {
+      cancelAnimationFrame(raf)
+      document.removeEventListener('mousemove', onMove)
+      document.removeEventListener('mouseover', onOver)
+      document.documentElement.removeEventListener('mouseleave', onLeave)
+    }
+  }, [])
+
+  return (
+    <>
+      <style>{CURSOR_CSS}</style>
+      <div ref={ref} className="ds-cursor-ring" />
+    </>
+  )
+}

personal-blog/frontend/src/pages/Home.jsx

@@ -2,6 +2,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { Link } from 'react-router-dom'
 import { API_BASE_URL } from '../api/config'
+import { CursorEffect } from '../components/CursorEffect'
 
 const POSTS_PER_PAGE = 10  // 每页加载数量
 
@@ -227,6 +228,8 @@ export function Home() {
 
   return (
     <div className="min-h-screen bg-[#FEF9E7] flex flex-col">
+      {/* DeepSeek 同款 cursor blend 圆饼效果（仅首页） */}
+      <CursorEffect />
       {/* 顶部导航 */}
       <nav className="bg-white border-b-2 border-black sticky top-0 z-10">
         <div className="max-w-[1366px] mx-auto px-4">
@@ -335,10 +338,12 @@ export function Home() {
       <main className="flex-1 max-w-[1366px] mx-auto px-4 py-8 w-full">
         {/* 欢迎区域 */}
         {settings.banner_type === 'text' && selectedCategory === null && (
-          <div className="mb-10 p-8 bg-gradient-to-r from-yellow-200 via-cyan-200 to-pink-200 border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
-            <h1 className="text-3xl md:text-4xl font-black mb-3 text-center">
-              {settings.welcome_message?.split('👋')[0]?.trim() || '欢迎来到侘寂屋'}
-              {settings.welcome_message?.includes('👋') && <span className="inline-block ml-2">👋</span>}
+          <div className="mb-10 px-8 py-5 bg-gradient-to-r from-yellow-200 via-cyan-200 to-pink-200 border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
+            <h1 className="text-4xl md:text-5xl font-black mb-3 text-center leading-[1.7]">
+              <span data-cursor="blend" style={{ letterSpacing: '0.2em' }}>
+                {settings.welcome_message?.split('👋')[0]?.trim() || '欢迎来到侘寂屋'}
+                {settings.welcome_message?.includes('👋') && <span className="inline-block ml-2">👋</span>}
+              </span>
             </h1>
             {settings.welcome_message?.split('👋')[1] && (
               <p className="text-lg text-gray-800 text-center">