feat: 添加引导页、视频播放和触摸交互功能

- 新增引导页组件(Guide.tsx)及相关资源
- 添加视频播放功能和相关资源文件
- 实现useTouch自定义hook支持触摸交互
- 添加store状态管理
- 更新多个页面组件(Content, Menu, Publicity)
- 优化图片组件和背景图片组件
- 更新项目依赖

src/components/BackgroundImage.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect } from "react";
 import { clsx } from "clsx";
 
-interface BackgroundImageProps {
+interface BackgroundImageProps extends React.HTMLAttributes<HTMLDivElement> {
   src: string;
   alt?: string;
   className?: string;
@@ -14,12 +14,12 @@ interface BackgroundImageProps {
   fallback?: string;
   onLoad?: () => void;
   onError?: () => void;
-  onClick?: () => void;
   children?: React.ReactNode;
   overlay?: boolean;
   overlayColor?: string;
   overlayOpacity?: number;
   overflowHidden?: boolean;
+  style?: React.CSSProperties;
 }
 
 export default function BackgroundImage({
@@ -35,12 +35,13 @@ export default function BackgroundImage({
   fallback,
   onLoad,
   onError,
-  onClick,
   children,
   overlay = false,
   overlayColor = "rgba(0, 0, 0, 0.5)",
   overlayOpacity = 0.5,
   overflowHidden = true,
+  style,
+  ...restProps
 }: BackgroundImageProps) {
   const [imageSrc, setImageSrc] = useState(src);
   const [isLoading, setIsLoading] = useState(true);
@@ -125,6 +126,7 @@ export default function BackgroundImage({
     backgroundPosition,
     backgroundRepeat,
     position: "relative" as const,
+    ...style,
   };
 
   const overlayStyle = {
@@ -141,7 +143,7 @@ export default function BackgroundImage({
         className
       )}
       style={backgroundStyle}
-      onClick={onClick}
+      {...restProps}
     >
       {/* 加载占位符 */}
       {isLoading && !placeholder && (

src/components/Image.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect } from "react";
 import { clsx } from "clsx";
 
-interface ImageProps {
+interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {
   style?: React.CSSProperties;
   src: string;
   children?: React.ReactNode;
@@ -16,7 +16,6 @@ interface ImageProps {
   fallback?: string;
   onLoad?: () => void;
   onError?: () => void;
-  onClick?: () => void;
   draggable?: boolean;
   quality?: number;
   blur?: boolean;
@@ -38,11 +37,11 @@ export default function Image({
   fallback,
   onLoad,
   onError,
-  onClick,
   draggable = false,
   quality: _quality = 80,
   blur = false,
   button = false,
+  ...restProps
 }: ImageProps) {
   const [imageSrc, setImageSrc] = useState(src);
   const [isLoading, setIsLoading] = useState(true);
@@ -116,7 +115,7 @@ export default function Image({
         className
       )}
       style={{ width, height, ...style }}
-      onClick={onClick}
+      {...restProps}
     >
       {/* 加载占位符 */}
       {isLoading && placeholder && (