# DETH AI Solutions - 技术实现文档 ## 技术栈概览 - **框架**: Astro.js - **样式**: TailwindCSS + Preline UI - **动画**: View Transitions API + CSS Animations - **字体**: Bricolage Grotesque Variable + Inter Variable - **图标**: astro-icon ## 布局系统 ### 全屏滚动布局 使用Tailwind CSS实现的平滑全屏滚动布局，支持响应式设计和自动动画： ```jsx // 使用示例 import FullPageLayout from '@layouts/FullPageLayout.astro'; import FullPageSection from '@components/sections/FullPageSection.astro'; ``` #### 核心功能 - **滚动行为**: 使用CSS Scroll Snap实现流畅的全屏滚动 - **响应式设计**: - PC端：强制捕捉（mandatory） - 移动端：自然滚动（proximity） - **自动动画**: - 基于Intersection Observer触发 - 渐入动画效果 - 可复用的动画类（animate-fade-up） #### 组件结构 1. FullPageLayout.astro - 提供全屏滚动容器 - 处理响应式滚动行为 - 优化触摸设备体验 2. FullPageSection.astro - 实现章节容器 - 自动处理可见性动画 - 支持自定义类名扩展 ## 样式系统 ### Tailwind配置 ```js // tailwind.config.cjs theme: { extend: { keyframes: { 'fade-up': { '0%': { opacity: '0', transform: 'translateY(20px)' }, '100%': { opacity: '1', transform: 'translateY(0)' }, } }, animation: { 'fade-up': 'fade-up 0.5s ease-out forwards' } } } ``` ### 颜色系统 使用CSS变量实现主题定制： ```js colors: { primary: 'var(--primary)', secondary: 'var(--secondary)', accent: 'var(--accent)', success: 'var(--success)', error: 'var(--error)', dark: 'var(--dark)', light: 'var(--light)' } ``` ### 响应式断点 ```js screens: { sm: '640px', // 移动设备 md: '768px', // 平板 lg: '1024px', // 小型桌面 xl: '1280px' // 大型桌面 } ``` ## 性能优化 - 使用CSS Scroll Snap替代JavaScript滚动控制 - Intersection Observer实现高效的动画触发 - Tailwind JIT编译减少未使用的CSS - 组件级别的代码分割 ## 目录结构 ``` src/ ├── layouts/ # 布局组件 │ ├── Layout.astro # 基础布局 │ └── FullPageLayout.astro # 全屏滚动布局 ├── components/ # UI组件 │ ├── ui/ # 基础UI组件 │ └── sections/ # 页面章节组件 └── styles/ # 全局样式