Просмотр исходного кода

✨ feat(homepage): 优化首页视觉层次与交互体验

- 重构3D背景结构,添加明确的z-0定位容器
- 调整Canvas相机参数,优化初始视角与渲染性能
- 改进主内容层样式,添加overflow-auto确保内容可滚动
- 为动态光效和扫描线添加pointer-events-none属性,避免干扰交互
- 增强代码注释,明确各视觉层的定位关系和作用
yourname 9 месяцев назад
Родитель
Сommit
49b1ed92bd
1 измененных файлов с 16 добавлено и 9 удалено
  1. 16 9
      src/client/big-shadcn/pages/HomePage.tsx

+ 16 - 9
src/client/big-shadcn/pages/HomePage.tsx

@@ -488,24 +488,31 @@ const DashboardGrid = () => (
 const HomePage = () => {
   return (
     <div className="fixed inset-0 bg-gradient-to-br from-gray-900 via-black to-gray-900 overflow-hidden">
-      {/* 3D背景 */}
-      <Canvas className="absolute inset-0">
-        <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
-      </Canvas>
+      {/* 3D背景 - 明确作为背景层 */}
+      <div className="absolute inset-0 z-0">
+        <Canvas
+          camera={{ position: [0, 0, 1], fov: 75 }}
+          style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
+        >
+          <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
+        </Canvas>
+      </div>
       
       {/* 网格背景 */}
-      <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff08_1px,transparent_1px),linear-gradient(to_bottom,#ffffff08_1px,transparent_1px)] bg-[size:50px_50px]" />
+      <div className="absolute inset-0 z-0 bg-[linear-gradient(to_right,#ffffff08_1px,transparent_1px),linear-gradient(to_bottom,#ffffff08_1px,transparent_1px)] bg-[size:50px_50px]" />
       
-      {/* 主内容层 */}
-      <div className="relative z-10 h-full flex flex-col">
+      {/* 主内容层 - 确保在顶层 */}
+      <div className="relative z-10 w-full h-full overflow-auto">
         <DashboardGrid />
       </div>
       
       {/* 动态光效 */}
-      <div className="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-transparent to-purple-500/10 animate-pulse" />
+      <div className="absolute inset-0 z-5 bg-gradient-to-r from-cyan-500/10 via-transparent to-purple-500/10 animate-pulse pointer-events-none" />
       
       {/* 扫描线效果 */}
-      <ScanningLine />
+      <div className="absolute inset-0 z-5 pointer-events-none">
+        <ScanningLine />
+      </div>
     </div>
   );
 };