feat: update components

Author: wkylin

src/components/stateless/OrbitingCircles/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import clsx from 'clsx'
+import { theme } from 'antd'
 
 export interface OrbitingItem {
   content: React.ReactNode
@@ -15,6 +16,8 @@ export interface OrbitingCirclesProps extends React.HTMLAttributes<HTMLDivElemen
   items?: OrbitingItem[]
   showPath?: boolean
   centerText?: string
+  centerTextStyle?: React.CSSProperties
+  centerTextClassName?: string
 }
 
 /**
@@ -29,20 +32,40 @@ export interface OrbitingCirclesProps extends React.HTMLAttributes<HTMLDivElemen
  *   - iconSize: number (size of the item)
  * @param {boolean} showPath - Whether to show the orbital path
  * @param {string} centerText - Text to display in the center
+ * @param {React.CSSProperties} centerTextStyle - Custom style for the center text
+ * @param {string} centerTextClassName - Custom class name for the center text
  */
 const OrbitingCircles = ({
   className,
   items = [],
   showPath = true,
   centerText = 'Orbit',
+  centerTextStyle,
+  centerTextClassName,
   ...props
 }: OrbitingCirclesProps) => {
+  const { token } = theme.useToken()
+
+  const calculatedItems = React.useMemo(
+    () =>
+      items.map((item, index) => ({
+        ...item,
+        radius: item.radius || 100 + index * 40,
+        duration: item.duration || 20,
+        reverse: item.reverse !== undefined ? item.reverse : index % 2 === 0,
+        iconSize: item.iconSize || 30,
+        delay: item.delay || 0,
+      })),
+    [items]
+  )
+
   return (
     <div
       className={clsx(
-        'bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg',
+        'relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg',
         className
       )}
+      style={{ backgroundColor: token.colorBgLayout, ...props.style }}
       {...props}
     >
       {/* Inject Keyframes locally to ensure they exist */}
@@ -58,68 +81,75 @@ const OrbitingCircles = ({
       `}</style>
 
       {/* Center Point (Optional, for visual reference) */}
-      <span className="pointer-events-none bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl leading-none font-semibold whitespace-pre-wrap text-transparent dark:from-white dark:to-slate-900/10">
+      <span
+        className={clsx(
+          'pointer-events-none bg-clip-text text-center text-4xl leading-none font-bold tracking-tighter whitespace-pre-wrap text-transparent md:text-6xl',
+          centerTextClassName
+        )}
+        style={{
+          backgroundImage: `linear-gradient(to bottom, ${token.colorText}, ${token.colorTextQuaternary})`,
+          zIndex: 1,
+          ...centerTextStyle,
+        }}
+      >
         {centerText}
       </span>
 
-      {/* Render Orbits and Items */}
-      <div className="absolute inset-0 flex items-center justify-center">
-        {items.map((item, index) => {
-          const radius = item.radius || 100 + index * 40 // Default radius increment if not provided
-          const duration = item.duration || 20
-          const reverse = item.reverse || index % 2 === 0 // Alternate direction by default
-          const iconSize = item.iconSize || 30
-          const delay = item.delay || 0
-
-          return (
-            <React.Fragment key={index}>
-              {/* Orbital Path */}
-              {showPath && (
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  version="1.1"
-                  className="pointer-events-none absolute inset-0 h-full w-full"
-                  style={{
-                    zIndex: 0,
-                  }}
-                >
-                  <circle
-                    className="stroke-black/10 stroke-1 dark:stroke-white/10"
-                    cx="50%"
-                    cy="50%"
-                    r={radius}
-                    fill="none"
-                  />
-                </svg>
-              )}
+      {/* Render Orbital Paths (Single SVG for performance) */}
+      {showPath && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          className="pointer-events-none absolute inset-0 h-full w-full"
+          style={{ zIndex: 0 }}
+        >
+          {calculatedItems.map((item, index) => (
+            <circle
+              key={index}
+              className="stroke-1"
+              cx="50%"
+              cy="50%"
+              r={item.radius}
+              fill="none"
+              stroke={token.colorBorder}
+              style={{ opacity: 0.5 }}
+            />
+          ))}
+        </svg>
+      )}
 
-              {/* Orbiting Item */}
-              <div
-                style={
-                  {
-                    '--radius': radius,
-                    '--duration': duration,
-                    '--icon-size': `${iconSize}px`,
-                    width: iconSize,
-                    height: iconSize,
-                    position: 'absolute',
-                    top: '50%',
-                    left: '50%',
-                    marginTop: -iconSize / 2,
-                    marginLeft: -iconSize / 2,
-                    animation: `orbit ${duration}s linear infinite`,
-                    animationDirection: reverse ? 'reverse' : 'normal',
-                    animationDelay: `${delay}s`,
-                    zIndex: 10,
-                  } as React.CSSProperties
-                }
-                className="flex items-center justify-center rounded-full bg-white/10 backdrop-blur-sm"
-              >
-                {item.content}
-              </div>
-            </React.Fragment>
-          )
-        })}
+      {/* Render Orbiting Items */}
+      <div className="absolute inset-0 flex items-center justify-center">
+        {calculatedItems.map((item, index) => (
+          <div
+            key={index}
+            style={
+              {
+                '--radius': item.radius,
+                '--duration': item.duration,
+                '--icon-size': `${item.iconSize}px`,
+                width: item.iconSize,
+                height: item.iconSize,
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                marginTop: -item.iconSize / 2,
+                marginLeft: -item.iconSize / 2,
+                animation: `orbit ${item.duration}s linear infinite`,
+                animationDirection: item.reverse ? 'reverse' : 'normal',
+                animationDelay: `${item.delay}s`,
+                zIndex: 10,
+                backgroundColor: token.colorBgContainer,
+                // Set initial transform to prevent items from bunching in center before animation starts
+                transform: `rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)`,
+                willChange: 'transform',
+              } as React.CSSProperties
+            }
+            className="flex items-center justify-center rounded-full shadow-sm backdrop-blur-sm"
+          >
+            {item.content}
+          </div>
+        ))}
       </div>
     </div>
   )

src/components/stateless/PointerMove/index.jsx

@@ -11,6 +11,7 @@ const PointerMove = () => {
     if (ref.current) {
       const handlePointerMove = ({ clientX, clientY }) => {
         const element = ref.current
+        if (!element) return
         // calculate x and y coordinates
         const x = clientX + (element.offsetLeft + element.offsetWidth)
         const y = clientY + (element.offsetTop + element.offsetHeight)

src/components/stateless/SlideButton/index.jsx

@@ -22,7 +22,7 @@ const SlideButton = ({
   return (
     <span
       className={clsx(
-        'relative cursor-pointer overflow-hidden px-[10px] py-[10px] text-[14px] tracking-[5px] uppercase no-underline shadow-[0_20px_50px_rgba(0,0,0,0.5)]',
+        'relative cursor-pointer overflow-hidden py-[10px] pr-[10px] pl-[15px] text-[14px] tracking-[5px] uppercase no-underline shadow-[0_20px_50px_rgba(0,0,0,0.5)]',
         'bg-[var(--bg-color)] text-[var(--text-color)]',
         className
       )}

src/components/stateless/Sparkles/index.jsx

@@ -3,8 +3,10 @@ import Particles, { initParticlesEngine } from '@tsparticles/react'
 import { loadSlim } from '@tsparticles/slim'
 import clsx from 'clsx'
 import { motion, useAnimation } from 'motion/react'
+import { theme } from 'antd'
 
 const SparklesCore = (props) => {
+  const { token } = theme.useToken()
   const { id, className, background, minSize, maxSize, speed, particleColor, particleDensity } = props
   const [init, setInit] = useState(false)
   useEffect(() => {
@@ -38,7 +40,7 @@ const SparklesCore = (props) => {
           options={{
             background: {
               color: {
-                value: background || '#0d47a1',
+                value: background || token.colorBgLayout,
               },
             },
             fullScreen: {
@@ -99,7 +101,7 @@ const SparklesCore = (props) => {
                 },
               },
               color: {
-                value: particleColor || '#ffffff',
+                value: particleColor || token.colorText,
                 animation: {
                   h: {
                     count: 0,

src/config/menu.config.jsx

@@ -30,6 +30,9 @@ import {
   AppstoreOutlined,
   CodeOutlined,
   ProjectOutlined,
+  FileTextOutlined,
+  ThunderboltOutlined,
+  ToolOutlined,
 } from '@ant-design/icons'
 import { t } from 'i18next' // 注意：这里可能需要处理 i18n
 
@@ -82,13 +85,13 @@ const rawMainLayoutMenu = [
                     key: '/tech/frontend/vue/plugins',
                     icon: <AppstoreOutlined />,
                     children: [
-                      { label: 'Vue3 API', key: '/tech/frontend/vue/plugins/vue3' },
-                      { label: '性能优化', key: '/tech/frontend/vue/plugins/perf' },
+                      { label: 'Vue3 API', key: '/tech/frontend/vue/plugins/vue3', icon: <FileTextOutlined /> },
+                      { label: '性能优化', key: '/tech/frontend/vue/plugins/perf', icon: <ThunderboltOutlined /> },
                     ],
                   },
                 ],
               },
-              { label: 'Angular', key: '/tech/frontend/angular' },
+              { label: 'Angular', key: '/tech/frontend/angular', icon: <Html5Outlined /> },
             ],
           },
         ],
@@ -105,8 +108,8 @@ const rawMainLayoutMenu = [
     key: '/build',
     icon: <ApartmentOutlined />,
     children: [
-      { label: 'Webpack', key: '/build/webpack' },
-      { label: 'Vite', key: '/build/vite' },
+      { label: 'Webpack', key: '/build/webpack', icon: <ToolOutlined /> },
+      { label: 'Vite', key: '/build/vite', icon: <ThunderboltOutlined /> },
     ],
   },
   {

src/pages/build/vite/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Typography, Card } from 'antd'
+
+const { Title, Paragraph } = Typography
+
+const VitePage = () => {
+  return (
+    <div className="p-4">
+      <Card>
+        <Title level={2}>Vite</Title>
+        <Paragraph>这里是 Vite 构建工具的相关介绍页面。</Paragraph>
+      </Card>
+    </div>
+  )
+}
+
+export default VitePage

src/pages/build/webpack/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Typography, Card } from 'antd'
+
+const { Title, Paragraph } = Typography
+
+const WebpackPage = () => {
+  return (
+    <div className="p-4">
+      <Card>
+        <Title level={2}>Webpack</Title>
+        <Paragraph>这里是 Webpack 构建工具的相关介绍页面。</Paragraph>
+      </Card>
+    </div>
+  )
+}
+
+export default WebpackPage