refactor: refactor

Author: wkylin

package-lock.json

@@ -276,7 +276,7 @@
     "markmap-lib": "^0.18.11",
     "markmap-view": "^0.18.10",
     "mermaid": "^11.6.0",
-    "motion": "^12.16.0",
+    "motion": "^12.23.12",
     "nanoid": "^5.1.5",
     "node-polyfill-webpack-plugin": "^4.1.0",
     "number-flow": "^0.5.7",

package.json

@@ -1,5 +1,5 @@
 import React from 'react'
-import { motion } from 'motion/react'
+import { motion, easeInOut } from 'framer-motion'
 
 interface GradientTracingProps {
   width: number
@@ -12,38 +12,53 @@ interface GradientTracingProps {
 }
 
 const GradientTracing: React.FC<GradientTracingProps> = ({
-  width,
-  height,
+  width = 200,
+  height = 200,
   baseColor = 'black',
   gradientColors = ['#2EB9DF', '#2EB9DF', '#9E00FF'],
   animationDuration = 2,
   strokeWidth = 2,
   path,
 }) => {
-  const gradientId = `pulse-${Math.random().toString(36).substring(2, 9)}`
+  const gradientId = `pulse-gradient-${Date.now()}`
+  const gradientVariants = {
+    initial: {
+      x1: '0%',
+      x2: '0%',
+    },
+    animate: {
+      x1: `${width * 2}px`,
+      x2: `${width}px`,
+      transition: {
+        duration: animationDuration,
+        repeat: Infinity,
+        ease: easeInOut,
+      },
+    },
+  }
 
   return (
     <div className="relative" style={{ width, height }}>
       <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} fill="none">
-        <path d={path} stroke={baseColor} strokeOpacity="0.2" />
-        <path d={path} stroke={`url(#${gradientId})`} strokeLinecap="round" strokeWidth={strokeWidth} />
+        <path d={path} stroke={baseColor} strokeOpacity="0.2" strokeWidth={strokeWidth} fill="none" />
+
+        <path d={path} stroke={`url(#${gradientId})`} strokeLinecap="round" strokeWidth={strokeWidth} fill="none" />
+
         <defs>
           <motion.linearGradient
-            animate={{
-              x1: [0, width * 2],
-              x2: [0, width],
-            }}
-            transition={{
-              duration: animationDuration,
-              repeat: Infinity,
-              ease: 'linear',
-            }}
+            variants={gradientVariants}
+            initial="initial"
+            animate="animate"
             id={gradientId}
             gradientUnits="userSpaceOnUse"
+            x1="0%"
+            y1="0%"
+            x2="0%"
+            y2="0%"
           >
-            <stop stopColor={gradientColors[0]} stopOpacity="0" />
-            <stop stopColor={gradientColors[1]} />
-            <stop offset="1" stopColor={gradientColors[2]} stopOpacity="0" />
+            <stop offset="0%" stopColor={gradientColors[0]} stopOpacity="0" />
+            <stop offset="50%" stopColor={gradientColors[1]} stopOpacity="1" />
+            <stop offset="100%" stopColor={gradientColors[2]} stopOpacity="0" />
           </motion.linearGradient>
         </defs>
       </svg>

src/components/stateless/GradientTracing/index.tsx

@@ -5,20 +5,23 @@ import { motion, useAnimation } from 'motion/react'
 const ScratchToReveal = ({ width, height, minScratchPercentage = 50, onComplete, children, className }) => {
   const canvasRef = useRef(null)
   const [isScratching, setIsScratching] = useState(false)
-  const [isComplete, setIsComplete] = useState(false) // New state to track completion
+  const [isComplete, setIsComplete] = useState(false)
 
   const controls = useAnimation()
 
   useEffect(() => {
     const canvas = canvasRef.current
-    const ctx = canvas?.getContext('2d')
-    if (canvas && ctx) {
-      const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
-      gradient.addColorStop(0, '#A97CF8')
-      gradient.addColorStop(0.5, '#F38CB8')
-      gradient.addColorStop(1, '#FDCC92')
-      ctx.fillStyle = gradient
-      ctx.fillRect(0, 0, canvas.width, canvas.height)
+    if (canvas) {
+      // 关键优化：添加willReadFrequently: true
+      const ctx = canvas.getContext('2d', { willReadFrequently: true })
+      if (ctx) {
+        const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
+        gradient.addColorStop(0, '#A97CF8')
+        gradient.addColorStop(0.5, '#F38CB8')
+        gradient.addColorStop(1, '#FDCC92')
+        ctx.fillStyle = gradient
+        ctx.fillRect(0, 0, canvas.width, canvas.height)
+      }
     }
   }, [])
 

src/components/stateless/ScratchToReveal/index.jsx

@@ -110,19 +110,7 @@ const preCode = `
     );
   };
 `.trim()
-const slugs = [
-  'typescript',
-  'javascript',
-  'react',
-  'html5',
-  'css3',
-  'prisma',
-  'nginx',
-  'vercel',
-  'docker',
-  'git',
-  'sonarqube',
-]
+const slugs = ['typescript', 'javascript', 'react', 'html5', 'css', 'prisma', 'nginx', 'vercel', 'docker', 'git']
 
 const dataSteps = [
   {