feat(env): 添加 WebSocket 和远程基础 URL 配置- 在开发环境配置中新增 NEXT_PUBLIC_REMOTE_BASE_URL 和 NEXT_PUBLIC_BASE_WS_URL

- 在生产环境配置中更新 API 和基础 URL 地址
- 添加 WebSocket 连接地址配置支持

feat(component): 新增动画组件 AnimatedSection- 实现基于 framer-motion 的多种动画效果- 支持 fade、slide、scale、rotate 和 flip 动画类型
- 提供方向控制和持续时间延迟等自定义选项- 使用 viewport 触发方式实现滚动播放动画

.env.development

@@ -1,2 +1,4 @@
 NEXT_PUBLIC_API_BASE=http://localhost:8040
-NEXT_PUBLIC_BASE_URL=http://localhost:8040
+NEXT_PUBLIC_BASE_URL=http://localhost:8040
+NEXT_PUBLIC_REMOTE_BASE_URL=http://localhost:8040
+NEXT_PUBLIC_BASE_WS_URL = 'ws://localhost:8081/ws'

.env.production

@@ -1 +1,4 @@
-NEXT_PUBLIC_API_BASE=http://192.168.110.93:8040
+NEXT_PUBLIC_API_BASE=http://localhost:8040
+NEXT_PUBLIC_BASE_URL=http://localhost:8040
+NEXT_PUBLIC_REMOTE_BASE_URL=http://47.107.107.47:8040
+NEXT_PUBLIC_BASE_WS_URL = 'ws://47.107.107.47:8081/ws'

src/components/AnimatedSection.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import {motion} from "framer-motion"
+import {ReactNode} from "react"
+
+type Direction = "up" | "down" | "left" | "right"
+type Effect = "fade" | "slide" | "scale" | "rotate" | "flip"
+
+interface AnimatedSectionProps {
+  children: ReactNode
+  effect?: Effect
+  direction?: Direction // 仅在 slide 时有用
+  duration?: number
+  delay?: number
+}
+
+export default function AnimatedSection({
+                                          children,
+                                          effect = "slide",
+                                          direction = "up",
+                                          duration = 0.8,
+                                          delay = 0,
+                                        }: AnimatedSectionProps) {
+  let initial: any = { opacity: 0 }
+  let animate: any = { opacity: 1 }
+
+  switch (effect) {
+    case "fade":
+      // 纯渐隐渐显
+      break
+
+    case "slide":
+      const offset: Record<Direction, { x: number; y: number }> = {
+        up: { x: 0, y: 40 },
+        down: { x: 0, y: -40 },
+        left: { x: 40, y: 0 },
+        right: { x: -40, y: 0 },
+      }
+      initial = { opacity: 0, ...offset[direction] }
+      animate = { opacity: 1, x: 0, y: 0 }
+      break
+
+    case "scale":
+      initial = { opacity: 0, scale: 0.8 }
+      animate = { opacity: 1, scale: 1 }
+      break
+
+    case "rotate":
+      initial = { opacity: 0, rotate: -15 }
+      animate = { opacity: 1, rotate: 0 }
+      break
+
+    case "flip":
+      initial = { opacity: 0, rotateY: 90 }
+      animate = { opacity: 1, rotateY: 0 }
+      break
+  }
+
+  return (
+    <motion.div
+      initial={initial}
+      whileInView={animate}
+      transition={{ duration, delay, ease: "easeOut" }}
+      viewport={{ once: true }}
+    >
+      {children}
+    </motion.div>
+  )
+}