# QuickGEO **Repository Path**: Kuaima-tech/Guick-GEO ## Basic Information - **Project Name**: QuickGEO - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-05-13 - **Last Updated**: 2026-05-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # OpenClaw GEO - 技术规格 ## 依赖清单 ### 核心框架 | 包名 | 版本 | 用途 | |------|------|------| | react | ^19.0 | UI 框架 | | react-dom | ^19.0 | DOM 渲染 | | typescript | ^5.7 | 类型系统 | | vite | ^6.0 | 构建工具 | | tailwindcss | ^4.0 | 样式框架 | | @tailwindcss/vite | ^4.0 | Tailwind Vite 插件 | ### 3D 渲染 | 包名 | 版本 | 用途 | |------|------|------| | three | ^0.172 | 3D 引擎 | | @react-three/fiber | ^9.0 | React Three.js 桥接 | | @react-three/drei | ^10.0 | R3F 工具库（Html, MeshTransmissionMaterial） | | @types/three | ^0.172 | Three.js 类型定义 | ### 动画 | 包名 | 版本 | 用途 | |------|------|------| | gsap | ^3.12 | 核心动画引擎、ScrollTrigger、数字更新 | | lenis | ^1.2 | 平滑滚动 | ### UI 组件 | 包名 | 版本 | 用途 | |------|------|------| | lucide-react | ^0.460 | 图标库 | | class-variance-authority | ^0.7 | 组件变体管理 | | clsx | ^2.1 | 条件类名合并 | | tailwind-merge | ^3.0 | Tailwind 类名去重 | ### 状态管理 | 包名 | 版本 | 用途 | |------|------|------| | zustand | ^5.0 | 轻量全局状态（分析状态、loading） | ## 组件清单 ### 布局组件 | 组件 | 来源 | 用途 | |------|------|------| | AppSidebar | 自定义 | 80px 窄侧边栏，极简图标导航 | | Header | 自定义 | 透明顶部栏，标题 + Live Tracking 指示器 | | PageLayout | 自定义 | 整体页面布局容器，协调 Sidebar + 主内容区 | ### 核心特效组件 | 组件 | 来源 | 复杂度 | |------|------|--------| | SemanticMatrix | 自定义 (Canvas 2D) | **高** - 品牌语义数字雨背景 | | CylinderReels | 自定义 (R3F) | **高** - 3D 景深数据卡带展示 | | HolographicBot | 自定义 (CSS Grid) | 中 - 全息像素机器人 | ### 业务组件 | 组件 | 来源 | 用途 | |------|------|------| | BrandAnalyzeCard | 自定义 | 品牌输入控制台（深色玻璃拟态） | | AiRecommendationCard | 自定义 | AI 推荐度数据卡带内容 | | PromptRecommendationCard | 自定义 | Prompt 追踪数据卡带内容 | | CompetitorCard | 自定义 | 竞品分析数据卡带内容 | | GeoSuggestionCard | 自定义 | GEO 优化建议数据卡带内容 | | BlogGenerationCard | 自定义 | GEO 博客生成数据卡带内容 | | RecentAnalysisTable | 自定义 | 近期分析历史表格 | | ActivityTimeline | 自定义 | 实时活动动态时间线 | ### 可复用组件 | 组件 | 来源 | 用途 | |------|------|------| | StatusBadge | 自定义 | 状态标签（推荐/部分提及/完成等） | | ProgressBar | 自定义 | 进度条（带颜色变体） | | CrosshairCursor | 自定义 | 十字星准线光标（3D 区域内） | ## 动画实现表 | 动画 | 库 | 实现方式 | 复杂度 | |------|-----|----------|--------| | 数字雨背景 | Canvas 2D + rAF | 自定义 Stream 类，逐帧绘制字符流 | **高** | | 3D 卡带圆柱排列 | @react-three/fiber | 圆柱坐标映射，动态旋转偏移 | **高** | | 卡带顶点畸变 (速度拉伸) | 自定义 Shader | 顶点着色器中基于 uScrollSpeed 的 yDisplacement | **高** | | 卡带光斑追踪 | 自定义 Shader | Fragment 着色器计算 uMouse 归一化光斑 | **高** | | 卡带悬浮急停 | @react-three/fiber + GSAP | 检测 hover 状态，GSAP 减速至停止 | 中 | | 洗牌动画 | GSAP | 点击分析后快速滚动并重新定位 | 中 | | 全息机器人浮动 | CSS @keyframes | translateY 上下缓动 | 低 | | 机器人眨眼 | CSS @keyframes | scaleY 周期性变换 | 低 | | 数据线条滑动 | CSS @keyframes | 横向位移动画 | 低 | | 数字交错更新 | GSAP | stagger 动画更新数值 | 低 | | 时间线滑入 | GSAP | 从左侧滑入 + 轻微 glitch | 低 | | 行 hover 光晕 | CSS transition | box-shadow 过渡 | 低 | | 平滑滚动 | Lenis | 全局惯性滚动 | 低 | | 侧边栏呼吸灯 | CSS @keyframes | 环形进度条 opacity 脉动 | 低 | ## 状态管理 (Zustand) ```typescript interface GeoStore { // 分析状态 isAnalyzing: boolean; analysisComplete: boolean; // 输入数据 brandName: string; websiteUrl: string; // 3D 卡带交互状态 hoveredReelIndex: number | null; scrollVelocity: number; // 数据刷新 refreshData: () => void; setAnalyzing: (v: boolean) => void; setHoveredReel: (idx: number | null) => void; } ``` ## 关键架构决策 ### 1. Canvas 层级与事件穿透 - SemanticMatrix Canvas: `z-index: 0`, `pointer-events: none` - R3F Canvas (CylinderReels): `z-index: 1` - HTML UI 层: `z-index: 10+`，确保表单和表格可交互 - 使用 `eventSource` 或 `pointer-events: none` 让 R3F 不阻挡底层点击 ### 2. 3D 卡带内容渲染 - 使用 `@react-three/drei` 的 `` 组件在 3D 平面上渲染 HTML 内容 - 每个卡带内部使用常规 React 组件（AiRecommendationCard 等） - 字体强制覆盖为 Inter 确保可读性 ### 3. Shader 材质策略 - 卡带 Mesh 使用 `MeshTransmissionMaterial` 或自定义 ShaderMaterial - 顶点着色器：接收 `uScrollSpeed` `uCurveStrength` `uCurveFrequency` `uMouse` - 片元着色器：计算鼠标追踪光斑 + 基础颜色 ### 4. 数字雨性能优化 - Canvas 尺寸限制为 `window.innerWidth / 2`（devicePixelRatio 处理） - 使用 `rgba(0,0,0,0.15)` 全屏覆盖制造拖尾（非 clearRect） - resize 事件重新初始化 Stream - 页面卸载时取消 rAF ## 文件结构 ``` src/ ├── components/ │ ├── layout/ │ │ ├── AppSidebar.tsx │ │ ├── Header.tsx │ │ └── PageLayout.tsx │ ├── effects/ │ │ ├── SemanticMatrix.tsx # Canvas 2D 数字雨 │ │ ├── CylinderReels.tsx # R3F 3D 卡带容器 │ │ ├── ReelCard.tsx # 单个 3D 卡带 Mesh │ │ ├── reelShaders.ts # 顶点/片元着色器 │ │ └── HolographicBot.tsx # CSS 像素机器人 │ ├── dashboard/ │ │ ├── BrandAnalyzeCard.tsx │ │ ├── AiRecommendationCard.tsx │ │ ├── PromptRecommendationCard.tsx │ │ ├── CompetitorCard.tsx │ │ ├── GeoSuggestionCard.tsx │ │ ├── BlogGenerationCard.tsx │ │ ├── RecentAnalysisTable.tsx │ │ └── ActivityTimeline.tsx │ └── ui/ │ ├── StatusBadge.tsx │ ├── ProgressBar.tsx │ └── CrosshairCursor.tsx ├── stores/ │ └── geoStore.ts ├── lib/ │ ├── mock/ │ │ └── geo-dashboard.ts │ └── types/ │ └── geo.ts ├── hooks/ │ └── useMousePosition.ts ├── App.tsx └── main.tsx ```