Commit Graph

21 Commits

Author SHA1 Message Date
陈春 02323fd426 fix: 修复所有首页板块 pin 滚动不连贯问题
🐛 问题根源:
每个板块有两套独立的 ScrollTrigger 在同一个元素上:
- 入场动画用独立的 scrollTrigger
- pin 效果用 ScrollTrigger.create
两者互相冲突,导致空白间隙和动画跳变

 修复方案:
将所有板块的入场动画和 pin 滚动合并为一个统一时间线(timeline),
确保动画从 pin 开始到结束完全连续,无空白区

🔧 修复的 6 个板块:
1. HomeTestimonials - 标题入场 + 卡片逐张切换(淡入淡出)
2. HomeServices - 标题入场 + 卡片飞入归位 + 逐张聚焦
3. HomeAchievements - 逐个成就项展示(前一个淡出,后一个淡入)
4. HomeTechStack - 内容入场 + 标签散开 + 球体旋转
5. HomeProcess - 标题入场 + 线条绘制 + 步骤逐个出现 + 横向滚动
6. HomeUpdates - 标题入场 + 卡片分批出现

🎯 效果:
- pin 期间动画完全连续,无空白间隙
- 入场和 pin 共享同一个 timeline
- scrub: 0.5 让滚动更平滑
- 每个板块到下一个板块无缝过渡

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-03 19:53:46 +08:00
陈春 bb0020b406 feat: 为首页新增板块添加 ScrollTrigger pin 滚动效果
 新增 pin 效果(板块固定,内容随滚动切换):

1. HomeTestimonials - 客户评价
   - 固定板块,滚动自动切换卡片
   - 每屏切换一张评价卡片

2. HomeTechStack - 技术栈
   - 固定板块,3D 球体自动旋转一圈
   - 滚动控制旋转进度

3. HomeProcess - 创意流程
   - 固定板块,横向滚动浏览所有步骤
   - 6 个步骤依次展示

4. HomeServices - 服务能力
   - 固定板块,逐张卡片聚焦展示
   - 聚焦卡片放大,其他缩小变暗
   - 所有卡片飞入归位后逐个聚焦

5. HomeAchievements - 数字成就
   - 固定板块,逐个成就项展示
   - 每个数字滚动计数动画触发

6. HomeUpdates - 最新动态
   - 固定板块,逐批展示卡片
   - 分批出现,每批 3 个卡片

🎯 效果:
- 滚动到板块时自动固定(pin)
- 内部元素随滚动依次展示
- 所有内部元素展示完毕后才继续下一个板块
- 每个板块独特的 pin 动画效果

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-03 19:49:18 +08:00
陈春 0c5ad55621 fix: 修复首屏加载慢和菜单延迟问题
🐛 核心问题:
- HomePartnersWork 的 ScrollTrigger 在 onMounted 时立即初始化
- 复杂的卡片堆叠动画计算阻塞了首屏 Hero 动画
- 导致菜单延迟出现,用户体验不佳

 解决方案:
- 监听 'hero-intro-done' 事件,等待 Hero 动画完成后才初始化
- 添加 3 秒保底延迟,确保不会无限等待
- 将 ScrollTrigger 初始化封装为独立函数
- 不影响原有的卡片堆叠滚动效果

🎯 效果:
- 首屏 Hero 动画流畅,不再被阻塞
- 菜单在 Hero 动画 60% 时立即出现
- HomePartnersWork 在 Hero 完成后异步初始化
- 用户体验大幅提升

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-03 19:31:44 +08:00
陈春 ae20560a35 fix: 修复首页加载和动画时序问题
🐛 问题修复:
- 移除所有新板块的初始 opacity: 0 样式
- 防止新板块初始隐藏导致黑屏问题
- 确保页面加载后内容立即可见
- 修复菜单延迟出现的问题

🎨 优化调整:
- 改用 CSS class 控制动画初始状态
- ScrollTrigger 动画在滚动到对应位置时才触发
- 不影响首屏 Hero 和 Intro 的加载动画
- 保持所有板块的入场动画效果

 修复的组件:
- HomeServices
- HomeAchievements
- HomeTestimonials
- HomeTechStack
- HomeProcess
- HomeUpdates
- HomeCTA

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-03 19:26:57 +08:00
陈春 42c96f7363 refactor: 调整首页所有板块为全屏布局
🎨 设计调整:
- 所有板块改为 min-h-screen 全屏展示
- 每个板块独立占据一屏,视觉冲击力更强
- 统一使用 flex 居中布局
- 调整标题和内容间距,更适合全屏显示
- 保持响应式设计和所有动画效果

📐 修改的组件:
- HomeServices: 服务能力展示
- HomeAchievements: 数字成就展示
- HomeTestimonials: 客户评价轮播
- HomeTechStack: 技术栈展示
- HomeProcess: 创意流程时间线
- HomeUpdates: 最新动态网格

 视觉效果:
- 更加现代化的全屏滚动体验
- 每个板块都有足够的呼吸空间
- 符合整体设计风格

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-03 19:19:17 +08:00
陈春 cd87644d41 feat: 扩展首页内容,新增7个高级动画板块
 新增首页板块:
- HomeServices: 服务能力展示(3D卡片翻转 + 视差移动)
- HomeAchievements: 数字成就展示(数字滚动 + 粒子背景)
- HomeTestimonials: 客户评价轮播(3D轮播 + 拖拽交互)
- HomeTechStack: 技术栈展示(3D球体 + 鼠标控制旋转)
- HomeProcess: 创意流程时间线(横向滚动 + SVG线条动画)
- HomeUpdates: 最新动态网格(Bento布局 + 悬浮卡片)
- HomeCTA: 全屏CTA区域(文字分裂动画 + 星空粒子)

🎨 设计亮点:
- 每个板块独特的动画效果(翻转、滚动、拖拽、旋转、绘制)
- 避免传统布局,采用创意设计
- 丰富的交互效果(hover、拖拽、视差)
- Canvas粒子动画和SVG路径动画
- 响应式设计,完美适配移动端

🌍 国际化:
- 完整的中英文内容
- 涵盖所有新板块的文案

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-03 19:14:53 +08:00
陈春 c9cf644ac5 chore: 添加构建推送脚本并更新项目配置
- 添加 build-and-push.sh 脚本用于自动化构建和推送 Docker 镜像
- 更新 .dockerignore 排除 pnpm-workspace.yaml
- 更新项目依赖和配置文件
2026-06-03 17:19:14 +08:00
virtheart a5d681d55b perf(HomeHero): 将图片加载方式从eager改为lazy以优化性能 2026-05-02 12:27:48 +08:00
virtheart 0c1bcd6237 feat(首页): 添加合作伙伴和作品集展示组件
添加新的HomePartnersWork组件,包含合作伙伴列表和作品集展示区
更新中英文翻译文件,新增相关文案
移除首页占位内容,使用新组件替代
2026-04-29 21:39:19 +08:00
virtheart dee222648d feat: 添加图标库依赖并优化首页按钮动画
添加@iconify-json/ph图标库依赖
在nuxt.config.ts中配置vite优化依赖
更新社交媒体图标为ph:x-logo
实现首页"Talk"按钮的悬停动画效果
2026-04-28 14:40:14 +08:00
virtheart 0a738e2074 feat(页脚): 添加多语言支持和动画效果
重构页脚组件,增加中英文翻译支持
创建 FooterLogo 和 AnimatedButton 通用组件
实现滚动动画和按钮悬停效果
2026-04-27 21:07:22 +08:00
virtheart e6e0426d25 style(header): 优化移动端布局和样式
调整 AppLogo 的最小宽度,重构 ArcticNewOneHeader 的网格布局以适应移动端
优化 HomeHero 组件的间距和字体大小,提升移动端显示效果
2026-04-27 18:48:17 +08:00
virtheart c4075db8ef feat(HomeHero): 添加小字文本向上浮现动画效果
为服务列表、描述文本、按钮和小圆点等元素添加统一的向上浮现动画效果
使用GSAP实现动画序列,与大标题动画协调
2026-04-27 17:59:11 +08:00
virtheart 5390b70fa9 feat(home): 为首页对话按钮添加悬停动画效果
添加GSAP动画效果,当鼠标悬停在对话按钮上时,文字会向上滑动并显示克隆文字,同时背景色块从底部滑入。离开时恢复原始状态。
2026-04-27 17:51:47 +08:00
virtheart be0bf01845 feat(i18n): 添加首页英雄区域的多语言支持
为首页英雄区域添加中英文翻译内容,包括服务列表、描述文本和按钮文字
同时优化AppLogo组件的动画安全检查和HomeHero组件的布局与动画效果
2026-04-27 17:51:00 +08:00
virtheart 226dc5c147 refactor(滚动锁定): 重构页面滚动锁定逻辑
- 使用全局计数器解决多组件并发锁定竞态问题
- 将 HTML class 注入逻辑移至 composable 中统一管理
- 优化锁定状态更新逻辑,避免重复操作
- 移除不再需要的计算属性和导入
2026-04-27 02:34:19 +08:00
virtheart 76e7b4b817 refactor(components): 优化动画组件代码结构并移除冗余样式
style(pages): 使用实用类替换内联样式
refactor(composables): 简化页面标题模板逻辑
docs(components): 添加详细注释说明动画逻辑
2026-04-27 02:28:49 +08:00
virtheart 044042fe7e feat: 重构应用加载流程和动画管理
- 新增 AppLoader 组件作为全局加载器
- 引入 Pinia 状态管理应用加载状态
- 创建 usePageScrollLock 组合式函数管理滚动锁定
- 重构首页动画流程,使用 Promise 链式调用
- 移除旧的 HomeLoader 组件
- 优化头部导航栏的入场动画触发逻辑
2026-04-27 02:19:29 +08:00
virtheart 6b41e053a1 feat(types): 添加NuxtApp中$lenis的类型声明
在HomeHero组件中简化$lenis的类型获取方式
2026-04-26 23:12:37 +08:00
virtheart 1407e2c8eb refactor(HomeHero): 添加 useNuxtApp 导入以支持 Nuxt 功能 2026-04-26 23:09:57 +08:00
virtheart 1bc881994f refactor(home): 将首页组件拆分为独立模块并优化代码结构
将首页的加载动画、介绍动画和英雄区域拆分为独立的组件文件
移除index.vue中冗余的样式和逻辑,通过组件引用方式重构
优化代码组织结构,提高可维护性
2026-04-26 23:07:37 +08:00