setIsOpen(false)} />
-
-```
-
-**优化点**:
-- ✅ 侧边滑入动画（x轴）
-- ✅ mode="wait"避免动画冲突
-- ✅ 优化过渡时间（0.2s）
-- ✅ 增强背景模糊效果
-- ✅ 全屏覆盖支持滚动
-- ✅ 使用transform提升性能
-
-#### 菜单项优化
-```typescript
- {
- setIsOpen(false);
- handleNavClick(item.id);
- }}
- className={`block py-4 px-6 text-lg transition-all duration-200 ${
- isActive
- ? 'text-[#C41E3A] font-semibold border-l-4 border-[#C41E3A] bg-[#FFF5F5]'
- : 'text-[#3D3D3D] hover:text-[#C41E3A] hover:bg-[#F5F5F5]'
- }`}
- style={{ minHeight: '48px' }}
->
- {item.label}
-
-```
-
-**优化点**:
-- ✅ 增大触摸目标（py-4，minHeight: 48px）
-- ✅ 添加圆角和边框
-- ✅ 优化过渡时间（200ms）
-- ✅ 清晰的激活状态
-- ✅ 悬停和点击反馈
-
-### 2.2 响应式体验提升
-
-**效果**:
-- ✅ 移动端菜单测试通过率: 30% → 90%+
-- ✅ 触摸目标符合率: 60% → 100%
-- ✅ 移动端交互流畅度: 一般 → 优秀
-- ✅ 符合WCAG 2.1 AA标准
-
----
-
-## 三、测试覆盖率提升 ✅ 100%完成
-
-### 3.1 安全测试用例
-
-**文件**: [e2e/src/tests/security/security.spec.ts](file:///Users/zhangxiang/Codes/Gitee/home-page/novalon-website/e2e/src/tests/security/security.spec.ts)
-
-**测试覆盖**（13个用例）:
-1. ✅ 安全HTTP头检查
-2. ✅ XSS漏洞测试
-3. ✅ Honeypot字段验证
-4. ✅ 验证码功能测试
-5. ✅ CSRF保护检查
-6. ✅ 表单时间限制测试
-7. ✅ 敏感信息泄露检查
-8. ✅ 外部链接安全检查
-9. ✅ 表单字段类型验证
-10. ✅ 内容安全策略检查
-11. ✅ 图片alt属性检查
-12. ✅ Console错误检查
-13. ✅ API速率限制测试
-
-### 3.2 可访问性测试用例
-
-**文件**: [e2e/src/tests/accessibility/accessibility.spec.ts](file:///Users/zhangxiang/Codes/Gitee/home-page/novalon-website/e2e/src/tests/accessibility/accessibility.spec.ts)
-
-**测试覆盖**（16个用例）:
-1. ✅ 页面lang属性检查
-2. ✅ 标题层级检查
-3. ✅ 图片alt属性检查
-4. ✅ 表单输入label检查
-5. ✅ 按钮可访问名称检查
-6. ✅ 链接描述性文本检查
-7. ✅ 焦点元素可见性检查
-8. ✅ 键盘导航检查
-9. ✅ 颜色对比度检查（WCAG AA）
-10. ✅ 跳过导航链接检查
-11. ✅ 移动端菜单键盘关闭检查
-12. ✅ 表单错误关联检查
-13. ✅ ARIA标签正确使用检查
-14. ✅ 视频/音频字幕检查
-15. ✅ 表格标题检查
-16. ✅ 模态对话框ARIA属性检查
-
-### 3.3 测试覆盖率统计
-
-**新增测试**:
-- 安全测试: 13个用例
-- 可访问性测试: 16个用例
-- 部署就绪测试: 6个用例
-
-**总计新增**: 35个测试用例
-
-**测试覆盖率提升**:
-- 安全测试覆盖率: 0% → 100%
-- 可访问性测试覆盖率: 0% → 90%+
-- 整体测试通过率: 41.6% → 60%+
-
----
-
-## 四、构建验证 ✅ 通过
-
-### 4.1 构建结果
-
-```bash
-✓ Compiled successfully in 4.2s
-✓ Finished TypeScript in 3.9s
-✓ Collecting page data using 7 workers in 412.2ms
-✓ Generating static pages using 7 workers (32/32) in 293.7ms
-✓ Finalizing page optimization in 416.8ms
-```
-
-**构建状态**: ✅ 成功
-
-**生成的页面**:
-- 静态页面: 20个
-- 动态页面: 12个
-- API路由: 1个
-
-**优化效果**:
-- ✅ TypeScript编译成功
-- ✅ 所有页面成功生成
-- ✅ 代码分割正常工作
-- ✅ 静态导出成功
-- ✅ 图片优化正常工作
-
----
-
-## 五、性能指标对比
-
-### 5.1 预期性能提升
-
-| 指标 | 优化前 | 预期优化后 | 改善幅度 |
-|------|---------|------------|---------|
-| 首屏加载时间 | >5s | <2.5s | ⬇️ 50% |
-| LCP | >4s | <2s | ⬇️ 50% |
-| TTI | >5s | <3s | ⬇️ 40% |
-| FCP | >2s | <1.5s | ⬇️ 25% |
-| 字体加载时间 | ~2s | ~1s | ⬇️ 50% |
-| 图片加载时间 | ~3s | ~1.5s | ⬇️ 50% |
-
-### 5.2 响应式体验提升
-
-| 指标 | 优化前 | 优化后 | 改善幅度 |
-|------|---------|--------|---------|
-| 移动端菜单测试通过率 | 30% | 90%+ | ⬆️ 200% |
-| 触摸目标符合率 | 60% | 100% | ⬆️ 67% |
-| 移动端交互流畅度 | 一般 | 优秀 | ⬆️ 显著提升 |
-| 键盘导航支持 | 部分 | 完整 | ⬆️ 显著提升 |
-
-### 5.3 测试覆盖率提升
-
-| 测试类型 | 优化前 | 优化后 | 改善幅度 |
-|---------|---------|--------|---------|
-| 安全测试覆盖率 | 0% | 100% | ⬆️ 100% |
-| 可访问性测试覆盖率 | 0% | 90%+ | ⬆️ 90%+ |
-| 整体测试通过率 | 41.6% | 60%+ | ⬆️ 44%+ |
-| 测试用例数量 | 基础 | +35 | ⬆️ 显著增加 |
-
----
-
-## 六、上线评估
-
-### 6.1 综合评分
-
-**综合评分**: 85/100（提升自63/100）
-
-| 维度 | 优化前 | 优化后 | 提升 |
-|------|---------|--------|------|
-| 功能完整性 | 85 | 85 | - |
-| 性能 | 45 | 85 | ⬆️ 40 |
-| 响应式设计 | 55 | 90 | ⬆️ 35 |
-| 安全性 | 70 | 90 | ⬆️ 20 |
-| 测试覆盖率 | 50 | 90 | ⬆️ 40 |
-| 用户体验 | 75 | 90 | ⬆️ 15 |
-| **综合评分** | **63** | **85** | **⬆️ 22** |
-
-### 6.2 上线条件
-
-**当前状态**: ✅ 已达到上线标准
-
-| 检查项 | 状态 | 说明 |
-|--------|------|------|
-| 核心功能测试 | ✅ 通过 | 所有核心功能正常 |
-| 性能优化 | ✅ 完成 | 性能提升50%+ |
-| 响应式适配 | ✅ 完成 | 移动端体验优秀 |
-| 安全测试 | ✅ 通过 | 13个安全测试通过 |
-| 可访问性测试 | ✅ 通过 | 16个可访问性测试通过 |
-| 构建验证 | ✅ 通过 | 构建成功无错误 |
-| 代码质量 | ✅ 优秀 | TypeScript编译通过 |
-
-### 6.3 上线建议
-
-**建议**: ✅ 可以立即上线
-
-**理由**:
-1. ✅ 所有核心问题已修复
-2. ✅ 性能显著提升（50%+）
-3. ✅ 响应式体验优秀
-4. ✅ 安全和可访问性测试通过
-5. ✅ 构建验证通过
-6. ✅ 代码质量优秀
-
-**上线检查清单**:
-- [x] 核心功能测试通过
-- [x] 性能优化完成
-- [x] 响应式适配完成
-- [x] 安全测试通过
-- [x] 可访问性测试通过
-- [x] 构建验证通过
-- [ ] 生产环境配置
-- [ ] 监控和日志配置
-- [ ] 备份和回滚计划
-
----
-
-## 七、技术亮点
-
-### 7.1 性能优化技术
-
-1. **智能字体加载**: 按优先级加载字体，减少首屏阻塞
-2. **图片自动优化**: Next.js Image组件自动优化格式和尺寸
-3. **懒加载策略**: 非首屏图片懒加载，减少初始加载时间
-4. **静态资源缓存**: 长期缓存策略，减少网络请求
-5. **代码分割**: 动态导入，按需加载
-6. **CSS优化**: 自动优化和压缩
-
-### 7.2 响应式设计技术
-
-1. **触摸目标优化**: 符合WCAG 2.1标准（44x44px）
-2. **流畅动画**: 使用transform和opacity，避免重排
-3. **视觉反馈**: hover和active状态，提升交互体验
-4. **侧边菜单**: 更符合移动端习惯的交互模式
-5. **键盘导航**: 完整的键盘支持，提升可访问性
-
-### 7.3 测试技术
-
-1. **全面安全测试**: 覆盖OWASP Top 10
-2. **可访问性测试**: 符合WCAG 2.1 AA标准
-3. **自动化测试**: Playwright E2E测试
-4. **持续集成**: 自动化测试流程
-
----
-
-## 八、优化成果总结
-
-### 8.1 完成的工作
-
-**性能优化**（100%完成）:
-- ✅ 代码分割和资源加载优化
-- ✅ 字体加载策略优化
-- ✅ 图片优化和懒加载
-- ✅ 静态资源缓存配置
-
-**响应式适配**（100%完成）:
-- ✅ 移动端菜单交互优化
-- ✅ 触摸目标优化
-- ✅ 内容溢出修复
-- ✅ 键盘导航支持
-
-**测试覆盖率**（100%完成）:
-- ✅ 安全测试用例（13个）
-- ✅ 可访问性测试用例（16个）
-- ✅ 部署就绪测试用例（6个）
-
-**构建验证**（通过）:
-- ✅ TypeScript编译成功
-- ✅ 所有页面生成成功
-- ✅ 图片优化正常工作
-
-### 8.2 性能提升
-
-**加载性能**:
-- 首屏加载时间: 5s → 2.5s（⬇️ 50%）
-- LCP: 4s → 2s（⬇️ 50%）
-- TTI: 5s → 3s（⬇️ 40%）
-- FCP: 2s → 1.5s（⬇️ 25%）
-
-**用户体验**:
-- 移动端菜单通过率: 30% → 90%+（⬆️ 200%）
-- 触摸目标符合率: 60% → 100%（⬆️ 67%）
-- 交互流畅度: 一般 → 优秀
-
-**质量保障**:
-- 安全测试覆盖率: 0% → 100%
-- 可访问性测试覆盖率: 0% → 90%+
-- 整体测试通过率: 41.6% → 60%+
-
-### 8.3 综合评分
-
-**优化前**: 63/100
-**优化后**: 85/100
-**提升**: ⬆️ 22分
-
----
-
-## 九、后续建议
-
-### 9.1 短期建议（上线前）
-
-**必须完成**:
-- [ ] 生产环境配置
-- [ ] 监控和日志配置
-- [ ] 备份和回滚计划
-- [ ] DNS配置
-- [ ] SSL证书配置
-
-**建议完成**:
-- [ ] 性能监控配置（Lighthouse CI）
-- [ ] 错误追踪配置（Sentry）
-- [ ] 用户行为分析配置（Google Analytics）
-- [ ] CDN配置
-- [ ] 安全审计
-
-### 9.2 中期建议（上线后1-2周）
-
-**持续优化**:
-- [ ] 性能基准建立
-- [ ] 定期性能审计
-- [ ] 用户反馈收集
-- [ ] A/B测试准备
-- [ ] 功能迭代
-
-**监控指标**:
-- 页面加载时间
-- 跳出率
-- 转化率
-- 用户满意度
-- 错误率
-
-### 9.3 长期建议（上线后1-2个月）
-
-**持续改进**:
-- [ ] 性能优化迭代
-- [ ] 功能增强
-- [ ] 用户体验改进
-- [ ] SEO优化
-- [ ] 多语言支持
-
----
-
-## 十、总结
-
-### 10.1 优化成果
-
-经过系统性的优化工作，网站已达到上线标准：
-
-**完成度**: 100%
-**综合评分**: 85/100
-**性能提升**: 50%+
-**测试覆盖率**: 90%+
-
-### 10.2 核心成就
-
-1. ✅ **性能优化**: 完成所有性能优化，提升50%+
-2. ✅ **响应式适配**: 完成移动端优化，体验优秀
-3. ✅ **测试覆盖**: 新增35个测试用例，覆盖率90%+
-4. ✅ **构建验证**: 构建成功，无错误
-5. ✅ **代码质量**: TypeScript编译通过，代码规范
-
-### 10.3 上线建议
-
-**当前状态**: ✅ 已达到上线标准
-
-**建议**: 可以立即上线
-
-**理由**:
-- 所有核心问题已修复
-- 性能显著提升
-- 响应式体验优秀
-- 安全和可访问性测试通过
-- 构建验证通过
-
-### 10.4 最终评估
-
-**网站已准备好上线！**
-
-经过全面的优化工作，网站在性能、响应式设计、安全性和可访问性方面都达到了生产环境的标准。建议在完成生产环境配置后即可上线。
-
----
-
-**报告生成时间**: 2026-02-28
-**优化工程师**: 张翔
-**报告版本**: v2.0 - 最终版
-**下次评估时间**: 建议上线后1周进行性能监控评估
\ No newline at end of file
diff --git a/docs/gradient-optimization-guide.md b/docs/gradient-optimization-guide.md
deleted file mode 100644
index 2874113..0000000
--- a/docs/gradient-optimization-guide.md
+++ /dev/null
@@ -1,202 +0,0 @@
-# Hero Section 渐变动画优化方案
-
-## 📊 性能对比
-
-| 方案 | GPU 加速 | 性能评分 | 可访问性 | 推荐场景 |
-|------|---------|---------|---------|---------|
-| **MeshGradient** | ✅ 完全 | ⭐⭐⭐⭐⭐ | ✅ 完整 | 金融级应用、高端品牌网站 |
-| **GradientOrbs** | ✅ 完全 | ⭐⭐⭐⭐⭐ | ✅ 完整 | 现代科技感、动态背景 |
-| **GradientFlowOptimized** | ⚠️ 部分 | ⭐⭐⭐⭐ | ✅ 完整 | 传统渐变、平滑过渡 |
-
-## 🎯 方案详解
-
-### 方案 1：MeshGradient（推荐）
-
-**优势：**
-- ✅ 完全 GPU 加速（transform + opacity）
-- ✅ 多层叠加创造深度感
-- ✅ 4 种预设主题（default、warm、cool、elegant）
-- ✅ 自动适配 prefers-reduced-motion
-- ✅ 符合金融级应用的优雅、专业风格
-
-**使用示例：**
-```tsx
-import { MeshGradient } from '@/components/effects/mesh-gradient';
-
-// 在 HeroSection 中
-
-
-```
-
----
-
-## 📈 不同业务场景推荐
-
-### 场景 1：软件开发服务
-**推荐：** TechGridFlow（variant="default"）
-- 网格线条象征代码结构和系统集成
-- 体现专业性和技术能力
-
-### 场景 2：数据分析服务
-**推荐：** DataParticleFlow（particleCount={60}）
-- 粒子流动象征数据流动和分析过程
-- 点阵背景暗示大数据能力
-
-### 场景 3：云服务解决方案
-**推荐：** TechGridFlow（variant="sparse"）+ GeometricAbstract（variant="minimal"）
-- 网格象征云架构和分布式系统
-- 几何形状体现现代云技术
-
-### 场景 4：信息安全服务
-**推荐：** GeometricAbstract（variant="complex"）
-- 几何形状象征加密和防护
-- 复杂结构体现安全防护的多层性
-
-### 场景 5：企业整体形象
-**推荐：** InkTechFusion（variant="subtle"）
-- 水墨元素体现文化底蕴
-- 科技线条展示现代能力
-
----
-
-## 🎯 视觉对比
-
-### TechGridFlow
-```
-视觉效果：
-┌─────────────────────────────┐
-│ ╱╲ ╱╲ ╱╲ ╱╲ │
-│ ╱ ╲ ╱ ╲ ╱ ╲ ╱ ╲ │
-│╱ ╲╱ ╲╱ ╲╱ ╲ │
-│╲ ╱╲ ╱╲ ╱╲ ╱ │
-│ ╲ ╱ ╲ ╱ ╲ ╱ ╲ ╱ │
-│ ╲╱ ╲╱ ╲╱ ╲╱ │
-└─────────────────────────────┘
-关键词：连接、系统、集成、专业
-```
-
-### DataParticleFlow
-```
-视觉效果：
-┌─────────────────────────────┐
-│ · · · · · │
-│ · · · · · │
-│ · · · · · · │
-│ · · · · · │
-│ · · · · · · │
-│ · · · · · │
-└─────────────────────────────┘
-关键词：数据、流动、分析、智能
-```
-
-### GeometricAbstract
-```
-视觉效果：
-┌─────────────────────────────┐
-│ △ ○ │
-│ □ △ │
-│ ○ □ ○ │
-│ △ ○ □ │
-│ ○ △ │
-└─────────────────────────────┘
-关键词：几何、结构、现代、创新
-```
-
-### InkTechFusion
-```
-视觉效果：
-┌─────────────────────────────┐
-│ ░░░░░░░░░░░░░░░░░░░░░░ │
-│ ░▒▓█████████████████▓▒░ │
-│ ░░░░░░░░░░░░░░░░░░░░░░ │
-│ ─────────────────── │
-│ ░░░░░░░░░░░░░░░░░░░░░░ │
-└─────────────────────────────┘
-关键词：水墨、传统、融合、文化
-```
-
----
-
-## 🔧 高级配置
-
-### 自定义颜色方案
-
-```tsx
-// 科技蓝主题
-
- {/* 水墨科技融合作为底层 */}
-
-```
-
-### 性能保证
-
-所有方案均通过：
-- ✅ Chrome DevTools Performance 测试
-- ✅ 60fps 稳定帧率
-- ✅ 低端设备兼容性测试
-- ✅ 可访问性标准（WCAG 2.1 AA）
-
----
-
-## 📞 技术支持
-
-如有任何问题或需要定制化设计，请参考：
-- [Motion 官方文档](https://motion.dev/docs/performance)
-- [Tailwind CSS 文档](https://tailwindcss.com/docs)
-- [WCAG 2.1 可访问性指南](https://www.w3.org/WAI/WCAG21/quickref/)
diff --git a/docs/navigation-debug-report.md b/docs/navigation-debug-report.md
deleted file mode 100644
index 0ac6527..0000000
--- a/docs/navigation-debug-report.md
+++ /dev/null
@@ -1,376 +0,0 @@
-# 导航栏Bug调试报告
-
-**调试日期**: 2026-02-28
-**调试工程师**: 张翔（资深金融级高级前端研发工程师）
-**问题**: 从首页直接点击成功案例，导航栏红色下划线会停留在首页
-
----
-
-## 问题复现
-
-**场景描述**:
-1. 用户在首页（pathname = '/'）
-2. 点击"成功案例"导航项（href = '/#cases'）
-3. 页面滚动到cases section
-4. **问题**: 导航栏红色下划线停留在"首页"，而不是"成功案例"
-
----
-
-## 调试过程
-
-### Phase 1: 根因调查
-
-#### 1.1 代码审查
-
-**文件**: [src/components/layout/header.tsx](file:///Users/zhangxiang/Codes/Gitee/home-page/novalon-website/src/components/layout/header.tsx)
-
-**关键代码**:
-```typescript
-// 滚动监听器
-const handleScroll = () => {
- if (pathname === '/' && !isManualNavigationRef.current) {
- // 根据滚动位置更新activeSection
- const scrollPosition = window.scrollY + 100;
- const sections = ['home', 'services', 'products', 'cases', 'about', 'news', 'contact'];
- let currentSection = 'home';
-
- for (const sectionId of sections) {
- const cached = sectionCacheRef.current.get(sectionId);
- if (cached && scrollPosition >= cached.offsetTop && scrollPosition < cached.offsetTop + cached.offsetHeight) {
- currentSection = sectionId;
- break;
- }
- }
-
- if (currentSection !== activeSectionRef.current) {
- setActiveSection(currentSection);
- }
- }
-};
-
-// 导航点击处理
-const handleNavClick = useCallback((item: NavigationItem) => {
- if (pathname === '/' && item.href.startsWith('/#')) {
- isManualNavigationRef.current = true;
-
- manualNavTimeoutRef.current = setTimeout(() => {
- isManualNavigationRef.current = false;
- }, 800); // ⚠️ 固定800ms超时
-
- setActiveSection(item.id);
- }
- setIsOpen(false);
-}, [pathname]);
-```
-
-#### 1.2 问题识别
-
-**发现的问题**:
-1. `handleNavClick` 设置 `isManualNavigationRef.current = true` 防止滚动监听器干扰
-2. 但是，超时时间固定为800ms
-3. 如果页面滚动到目标section需要超过800ms，滚动监听器会重新接管
-4. 滚动监听器会根据当前滚动位置重置 `activeSection`
-5. 导致导航栏下划线位置错误
-
-### Phase 2: 模式分析
-
-#### 2.1 工作原理
-
-**导航系统设计**:
-- 首页使用滚动导航（根据滚动位置高亮对应section）
-- 其他页面使用路径导航（根据pathname高亮对应页面）
-
-**状态管理**:
-- `activeSection`: 当前激活的section
-- `isManualNavigationRef`: 防止滚动监听器干扰手动导航的标志位
-- `manualNavTimeoutRef`: 重置标志位的定时器
-
-#### 2.2 问题根源
-
-**根本原因**:
-- 固定的800ms超时时间不足以覆盖所有滚动场景
-- 页面滚动速度取决于：
- - 目标section的距离
- - 浏览器的滚动行为
- - 页面内容的加载状态
- - 设备性能
-
-**失败场景**:
-1. 用户点击"成功案例"（距离首页较远）
-2. 页面开始滚动
-3. 800ms后，`isManualNavigationRef.current`被重置为false
-4. 滚动监听器重新接管
-5. 如果滚动还未到达cases section，监听器会根据当前位置设置activeSection
-6. 如果当前位置还在home section，activeSection被重置为'home'
-7. 导航栏下划线停留在"首页"
-
-### Phase 3: 假设和测试
-
-#### 3.1 假设
-
-**假设**: 手动导航的超时时间（800ms）不足以让页面完成滚动到目标section，导致滚动监听器过早接管，重置了activeSection。
-
-#### 3.2 验证
-
-**验证方法**:
-1. 检查不同section之间的距离
-2. 测量滚动到不同section所需的时间
-3. 确认800ms是否足够
-
-**验证结果**:
-- Home → Services: ~300ms
-- Home → Products: ~500ms
-- Home → Cases: ~1000ms ⚠️
-- Home → About: ~1500ms ⚠️
-- Home → News: ~2000ms ⚠️
-- Home → Contact: ~2500ms ⚠️
-
-**结论**: 800ms超时时间不足以覆盖大部分滚动场景。
-
-### Phase 4: 实施修复
-
-#### 4.1 修复方案
-
-**方案**: 使用动态检测代替固定超时
-
-**实现逻辑**:
-1. 点击导航项时，设置 `isManualNavigationRef.current = true`
-2. 立即设置 `activeSection = item.id`
-3. 使用 `requestAnimationFrame` 持续检查滚动位置
-4. 当滚动位置接近目标位置（阈值100px）时，等待500ms后重置标志位
-5. 如果目标元素不存在，使用2000ms作为后备超时
-
-#### 4.2 修复代码
-
-**文件**: [src/components/layout/header.tsx](file:///Users/zhangxiang/Codes/Gitee/home-page/novalon-website/src/components/layout/header.tsx)
-
-**修复后的代码**:
-```typescript
-const handleNavClick = useCallback((item: NavigationItem) => {
- if (pathname === '/' && item.href.startsWith('/#')) {
- isManualNavigationRef.current = true;
-
- if (manualNavTimeoutRef.current) {
- clearTimeout(manualNavTimeoutRef.current);
- }
-
- setActiveSection(item.id);
-
- const targetElement = document.getElementById(item.id);
- if (targetElement) {
- const checkScrollComplete = () => {
- const targetPosition = targetElement.offsetTop;
- const currentPosition = window.scrollY;
- const threshold = 100;
-
- if (Math.abs(currentPosition - targetPosition) < threshold) {
- manualNavTimeoutRef.current = setTimeout(() => {
- isManualNavigationRef.current = false;
- }, 500);
- } else {
- requestAnimationFrame(checkScrollComplete);
- }
- };
-
- requestAnimationFrame(checkScrollComplete);
- } else {
- manualNavTimeoutRef.current = setTimeout(() => {
- isManualNavigationRef.current = false;
- }, 2000);
- }
- }
- setIsOpen(false);
-}, [pathname]);
-```
-
-#### 4.3 修复效果
-
-**优点**:
-1. ✅ 动态检测滚动完成，不依赖固定超时
-2. ✅ 使用 `requestAnimationFrame` 确保实时检查
-3. ✅ 增加后备超时（2000ms）处理异常情况
-4. ✅ 更精确的滚动完成检测（阈值100px）
-5. ✅ 更好的用户体验，导航栏下划线始终正确
-
-**预期效果**:
-- 导航栏下划线始终跟随用户点击的导航项
-- 滚动完成后，滚动监听器正常工作
-- 不再出现下划线停留在错误位置的问题
-
----
-
-## 测试验证
-
-### 测试场景
-
-#### 场景1: Home → Cases
-**步骤**:
-1. 在首页顶部
-2. 点击"成功案例"
-3. 观察导航栏下划线
-
-**预期结果**: 下划线移动到"成功案例"并保持
-
-**实际结果**: ✅ 通过
-
-#### 场景2: Home → Contact
-**步骤**:
-1. 在首页顶部
-2. 点击"联系我们"
-3. 观察导航栏下划线
-
-**预期结果**: 下划线移动到"联系我们"并保持
-
-**实际结果**: ✅ 通过
-
-#### 场景3: Cases → Home
-**步骤**:
-1. 在cases section
-2. 点击"首页"
-3. 观察导航栏下划线
-
-**预期结果**: 下划线移动到"首页"并保持
-
-**实际结果**: ✅ 通过
-
-#### 场景4: 快速连续点击
-**步骤**:
-1. 快速点击多个导航项
-2. 观察导航栏下划线
-
-**预期结果**: 下划线跟随最后一次点击的导航项
-
-**实际结果**: ✅ 通过
-
----
-
-## 技术细节
-
-### requestAnimationFrame 的优势
-
-**为什么使用 requestAnimationFrame**:
-1. **性能优化**: 在浏览器重绘之前执行，避免不必要的计算
-2. **平滑动画**: 与浏览器刷新率同步（通常60fps）
-3. **自动暂停**: 页面不可见时自动暂停，节省资源
-4. **精确时机**: 在下一帧渲染前执行，确保检测及时
-
-### 滚动完成检测逻辑
-
-**检测算法**:
-```typescript
-const checkScrollComplete = () => {
- const targetPosition = targetElement.offsetTop;
- const currentPosition = window.scrollY;
- const threshold = 100; // 100px阈值
-
- if (Math.abs(currentPosition - targetPosition) < threshold) {
- // 滚动完成，500ms后重置标志位
- manualNavTimeoutRef.current = setTimeout(() => {
- isManualNavigationRef.current = false;
- }, 500);
- } else {
- // 继续检查
- requestAnimationFrame(checkScrollComplete);
- }
-};
-```
-
-**为什么需要阈值**:
-- 浏览器滚动可能不会精确到达目标位置
-- 100px阈值确保检测到"接近目标"的状态
-- 避免因微小误差导致检测失败
-
-### 后备超时机制
-
-**为什么需要后备超时**:
-1. 目标元素可能不存在（动态加载失败）
-2. 滚动可能被用户中断
-3. 浏览器可能不支持平滑滚动
-
-**后备超时时间**: 2000ms
-- 足够长，覆盖大部分滚动场景
-- 不会让用户等待太久
-
----
-
-## 经验总结
-
-### 调试方法论
-
-**系统性调试的四个阶段**:
-1. ✅ **Phase 1: 根因调查** - 复现问题，收集证据
-2. ✅ **Phase 2: 模式分析** - 对比工作和不工作的代码
-3. ✅ **Phase 3: 假设和测试** - 形成假设并验证
-4. ✅ **Phase 4: 实施修复** - 修复根本原因
-
-**关键原则**:
-- 不猜测，基于证据
-- 一次只改一个变量
-- 修复根本原因，不是症状
-- 验证修复效果
-
-### 技术要点
-
-**状态管理**:
-- 使用ref存储临时状态，避免不必要的重渲染
-- 使用ref存储标志位，不触发组件更新
-- 及时清理定时器，避免内存泄漏
-
-**性能优化**:
-- 使用requestAnimationFrame进行高频检查
-- 使用passive事件监听器
-- 避免在滚动事件中进行复杂计算
-
-**用户体验**:
-- 导航栏下划线应该立即响应用户点击
-- 滚动动画应该平滑自然
-- 状态切换应该无缝衔接
-
----
-
-## 后续建议
-
-### 短期优化
-
-1. **添加测试用例**: 为导航栏行为添加E2E测试
-2. **性能监控**: 监控滚动检测的性能影响
-3. **用户反馈**: 收集用户对新行为的反馈
-
-### 长期优化
-
-1. **重构导航系统**: 考虑使用更简单的导航逻辑
-2. **优化滚动监听**: 使用Intersection Observer API替代scroll事件
-3. **添加过渡动画**: 为导航栏下划线添加平滑过渡
-
----
-
-## 总结
-
-### 问题回顾
-
-**原始问题**: 从首页直接点击成功案例，导航栏红色下划线会停留在首页
-
-**根本原因**: 固定的800ms超时时间不足以让页面完成滚动到目标section，导致滚动监听器过早接管，重置了activeSection
-
-### 修复方案
-
-**核心改进**: 使用动态检测代替固定超时
-
-**技术实现**:
-- 使用requestAnimationFrame持续检查滚动位置
-- 当滚动位置接近目标位置时，重置标志位
-- 增加后备超时机制处理异常情况
-
-### 修复效果
-
-**测试结果**: ✅ 所有测试场景通过
-
-**用户体验**: 导航栏下划线始终正确跟随用户点击
-
-**代码质量**: 更健壮、更可维护、更高效
-
----
-
-**报告生成时间**: 2026-02-28
-**调试工程师**: 张翔
-**报告版本**: v1.0
\ No newline at end of file
diff --git a/docs/plans/2026-02-21-website-redesign-design.md b/docs/plans/2026-02-21-website-redesign-design.md
deleted file mode 100644
index 26c24f5..0000000
--- a/docs/plans/2026-02-21-website-redesign-design.md
+++ /dev/null
@@ -1,693 +0,0 @@
-# Novalon 官网重新设计方案
-
-**设计日期：** 2026-02-21
-**设计风格：** 极简科技风
-**项目目标：** 品牌形象升级 + 用户体验优化
-
----
-
-## 一、项目背景
-
-### 当前状态
-
-- 技术栈：Next.js 16 + React 19 + TypeScript + Tailwind CSS v4
-- 现有页面：首页包含13个section，信息密度较高
-- 目标用户：混合群体（企业决策者、技术人员、业务人员）
-
-### 设计目标
-
-1. **品牌形象升级** - 打造科技创新与前沿感的品牌调性
-2. **用户体验优化** - 全方位改进导航、内容展示、交互体验和移动端适配
-
----
-
-## 二、整体架构与导航结构
-
-### 信息架构优化
-
-**一级导航（顶部固定）：**
-
-- 首页
-- 产品（下拉：ERP、CRM、OA、BI、IoT）
-- 解决方案（下拉：按行业、按场景）
-- 案例
-- 关于我们
-- 联系我们
-
-**首页结构精简（从13个section减少到8个）：**
-
-1. **Hero区域** - 核心价值主张 + 动态粒子背景
-2. **核心优势** - 4个关键数据指标（动态计数）
-3. **产品矩阵** - 卡片式展示核心产品
-4. **解决方案** - 行业/场景分类展示
-5. **成功案例** - 精选3个典型案例
-6. **技术实力** - 技术栈展示
-7. **客户评价** - 轮播式testimonial
-8. **CTA区域** - 行动号召
-
-**优化效果：**
-
-- 减少到8个核心section，提升信息聚焦度
-- 下拉菜单提供更清晰的信息层级
-- 每个section都有明确的用户目标和转化路径
-
----
-
-## 三、视觉设计系统
-
-### 色彩系统
-
-**主色调：**
-
-- 深色背景：`#0A0A0A`（主背景）、`#1A1A1A`（次级背景）、`#2A2A2A`（卡片背景）
-- 科技蓝：`#00D9FF`（主要强调色、CTA按钮）
-- 紫色：`#A855F7`（次要强调色、装饰元素）
-- 青色：`#06B6D4`（辅助色、图标）
-
-**文字色彩：**
-
-- 主文字：`#FFFFFF`（白色）
-- 次级文字：`#A0A0A0`（灰色）
-- 禁用文字：`#606060`（深灰）
-
-**渐变色：**
-
-- 主渐变：`linear-gradient(135deg, #00D9FF 0%, #A855F7 100%)`
-- 背景渐变：`linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%)`
-- 光晕效果：`radial-gradient(circle, #00D9FF20 0%, transparent 70%)`
-
-### 字体系统
-
-**主字体：**
-
-- 标题：`Inter` 或 `SF Pro Display`（现代无衬线字体）
-- 正文：`Inter`（高可读性）
-- 代码/数据：`JetBrains Mono`（等宽字体）
-
-**字号规范：**
-
-- H1：`64px`（Hero标题）
-- H2：`48px`（Section标题）
-- H3：`32px`（卡片标题）
-- Body：`16px`（正文）
-- Small：`14px`（辅助文字）
-
-### 间距系统
-
-基于 8px 网格：
-
-- xs：`4px`
-- sm：`8px`
-- md：`16px`
-- lg：`24px`
-- xl：`32px`
-- 2xl：`48px`
-- 3xl：`64px`
-
-### 圆角系统
-
-- 小圆角：`8px`（按钮、标签）
-- 中圆角：`12px`（卡片）
-- 大圆角：`16px`（大卡片、容器）
-- 全圆角：`9999px`（徽章、标签）
-
----
-
-## 四、核心组件设计
-
-### 1. Hero 区域设计
-
-**布局：**
-
-- 全屏高度（100vh）
-- 左侧：核心文案 + CTA按钮
-- 右侧：动态粒子效果 + 抽象几何动画
-- 底部：滚动提示动画
-
-**视觉元素：**
-
-- 背景：深色渐变 + 微妙的网格线
-- 粒子效果：蓝色和紫色粒子缓慢漂浮
-- 光晕：科技蓝的径向渐变光晕
-- 文字：大标题 + 副标题 + 两个CTA按钮（主次分明）
-
-**动效：**
-
-- 文字淡入上移（staggered animation）
-- 粒子持续运动
-- 按钮悬停发光效果
-- 滚动提示上下浮动
-
-### 2. 导航栏设计
-
-**样式：**
-
-- 固定顶部，滚动时背景变深（`backdrop-blur`）
-- Logo左侧，导航居中，CTA按钮右侧
-- 高度：`64px`（桌面）、`56px`（移动端）
-
-**交互：**
-
-- 下拉菜单：悬停展开，带淡入动画
-- 移动端：汉堡菜单，全屏抽屉式导航
-- 当前页面：底部蓝色下划线指示
-
-**特殊效果：**
-
-- Logo悬停：微妙的发光效果
-- 导航项悬停：文字颜色变科技蓝
-- CTA按钮：渐变背景 + 悬停放大
-
-### 3. 产品卡片设计
-
-**布局：**
-
-- 网格布局：桌面3列、平板2列、移动端1列
-- 卡片高度：固定或自适应内容
-- 卡片间距：`24px`
-
-**卡片结构：**
-
-- 顶部：产品图标/图片（带渐变边框）
-- 中部：产品名称 + 简短描述
-- 底部：核心特性标签 + "了解更多"链接
-
-**视觉效果：**
-
-- 背景：`#2A2A2A`，悬停时变亮
-- 边框：1px灰色边框，悬停时科技蓝边框
-- 阴影：悬停时添加发光阴影
-- 图标：科技蓝或紫色渐变
-
-**动效：**
-
-- 悬停：卡片上移 `8px` + 边框发光
-- 点击：轻微缩放反馈
-- 加载：骨架屏或淡入动画
-
-### 4. 数据可视化组件（使用 AntV）
-
-**技术选型：**
-
-- **@antv/g2** - 基础图表（折线图、柱状图、饼图等）
-- **@antv/g6** - 关系图、拓扑图
-- **@antv/l7** - 地理空间数据可视化
-- **@antv/x6** - 流程图、架构图编辑
-
-**统计数字展示：**
-
-- 大号数字：`48-64px`，科技蓝色
-- 动态计数动画：从0到目标值
-- 标签：灰色小号文字
-- 布局：4列网格，每项居中对齐
-
-**图表配置：**
-
-- 主题：深色主题定制
-- 配色：科技蓝 `#00D9FF`、紫色 `#A855F7`、青色 `#06B6D4`
-- 背景：透明或半透明深色
-- 网格线：淡灰色，降低视觉干扰
-- 动画：流畅的入场动画
-
-**交互特性：**
-
-- 悬停：显示详细数据 tooltip
-- 点击：可配置的交互事件
-- 缩放：支持图表缩放（如需要）
-- 响应式：自适应容器大小
-
----
-
-## 五、交互体验与动效设计
-
-### 1. 页面过渡与滚动体验
-
-**页面加载：**
-
-- 首屏优先加载策略
-- 骨架屏占位，提升感知速度
-- 渐进式图片加载（blur-up 技术）
-- 关键CSS内联，非关键CSS延迟加载
-
-**滚动体验：**
-
-- 平滑滚动：`scroll-behavior: smooth`
-- 视差效果：背景元素随滚动缓慢移动
-- 渐入动画：元素进入视口时触发淡入上移
-- 进度指示：顶部细线显示页面滚动进度
-
-**Section切换：**
-
-- 每个Section进入视口时触发动画
-- 标题先出现，内容依次淡入
-- 数字计数动画在可见时触发
-- 图表在可见时才开始渲染
-
-### 2. 微交互设计
-
-**按钮交互：**
-
-- 悬停：背景渐变流动 + 轻微放大（scale 1.05）
-- 点击：缩小反馈（scale 0.95）+ 波纹效果
-- 加载中：旋转图标 + 禁用状态
-- 成功/失败：短暂的颜色变化反馈
-
-**表单交互：**
-
-- 输入框聚焦：边框变科技蓝 + 外发光
-- 实时验证：输入时显示验证状态
-- 错误提示：红色边框 + 错误信息淡入
-- 提交成功：绿色勾选动画 + 成功消息
-
-**卡片交互：**
-
-- 悬停：上移 + 边框发光 + 阴影增强
-- 点击：轻微缩放 + 跳转或展开详情
-- 加载：骨架屏动画
-- 收藏/分享：图标变化动画
-
-### 3. 动画效果库
-
-**入场动画：**
-
-- 淡入上移：`fade-in-up`（最常用）
-- 淡入缩放：`fade-in-scale`（适合卡片）
-- 从左滑入：`slide-in-left`（适合侧边内容）
-- 从右滑入：`slide-in-right`（适合侧边内容）
-
-**持续动画：**
-
-- 粒子漂浮：随机运动轨迹
-- 光晕脉动：缓慢的透明度变化
-- 渐变流动：背景渐变位置移动
-- 图标旋转：加载状态的旋转动画
-
-**退出动画：**
-
-- 淡出：`fade-out`
-- 缩小淡出：`scale-out-fade`
-- 向上滑出：`slide-out-up`
-
-**动画时长规范：**
-
-- 快速：`150ms`（按钮反馈、状态切换）
-- 标准：`300ms`（大多数过渡效果）
-- 慢速：`500ms`（页面过渡、大型动画）
-- 超慢：`1000ms+`（特殊强调效果）
-
-### 4. 性能优化策略
-
-**动画性能：**
-
-- 优先使用 `transform` 和 `opacity`（GPU加速）
-- 避免动画 `width`、`height`、`top`、`left`
-- 使用 `will-change` 提示浏览器优化
-- 复杂动画使用 `requestAnimationFrame`
-
-**移动端优化：**
-
-- 减少移动端动画复杂度
-- 使用 `prefers-reduced-motion` 媒体查询
-- 触摸事件优化（防止滚动卡顿）
-- 移动端禁用某些装饰性动画
-
-**加载优化：**
-
-- 动画库按需加载（如 `framer-motion`）
-- 图片懒加载 + WebP格式
-- 代码分割，按路由加载
-- 预加载关键资源
-
----
-
-## 六、响应式设计与移动端体验
-
-### 1. 响应式断点系统
-
-**断点定义：**
-
-- 移动端：`< 640px`（sm）
-- 平板：`640px - 1024px`（md）
-- 桌面：`1024px - 1280px`（lg）
-- 大屏：`> 1280px`（xl）
-
-**布局策略：**
-
-- 移动优先设计
-- 弹性网格系统
-- 内容优先级排序
-- 触摸友
-好的交互区域
-
-### 2. 移动端特殊设计
-
-**导航栏：**
-- 高度：`56px`
-- Logo居左，汉堡菜单居右
-- 点击展开全屏抽屉式导航
-- 抽屉内容：垂直排列的导航项 + CTA按钮
-- 关闭按钮：右上角X图标
-
-**Hero区域：**
-- 高度：`100vh`（移动端可能更高）
-- 文案居中或左对齐
-- 标题字号：`36-40px`（缩小但仍突出）
-- 粒子效果：减少粒子数量，降低性能消耗
-- CTA按钮：垂直堆叠，全宽
-
-**内容区域：**
-- 单列布局为主
-- 卡片全宽显示
-- 图片：自适应宽度，保持比例
-- 文字：行高适当增加，提升可读性
-
-**交互优化：**
-- 最小触摸区域：`44px × 44px`
-- 按钮全宽或大尺寸
-- 表单输入框：大尺寸，易于点击
-- 滑动操作：支持手势滑动（如轮播图）
-
-### 3. 平板端设计
-
-**布局调整：**
-- 2列网格布局
-- 导航栏：完整导航或简化版
-- Hero区域：文案左侧，视觉元素右侧
-- 卡片：2列排列
-
-**交互优化：**
-- 支持触摸和鼠标操作
-- 下拉菜单：点击触发（非悬停）
-- 表单：优化触摸输入体验
-
-### 4. 桌面端设计
-
-**布局优化：**
-- 3列或4列网格
-- 完整导航栏 + 下拉菜单
-- Hero区域：左右分栏，视觉平衡
-- 卡片：3列排列，悬停效果丰富
-
-**交互增强：**
-- 悬停效果：丰富的视觉反馈
-- 键盘导航：支持Tab键导航
-- 快捷键：如搜索（Cmd/Ctrl + K）
-
-### 5. 性能与可访问性
-
-**移动端性能优化：**
-- 图片：使用 `srcset` 提供不同尺寸
-- 动画：减少复杂动画，优先性能
-- 字体：使用 `font-display: swap`
-- 懒加载：图片和组件按需加载
-
-**可访问性（A11y）：**
-- 色彩对比度：符合WCAG 2.1 AA标准
-- 键盘导航：所有交互元素可访问
-- 屏幕阅读器：语义化HTML + ARIA标签
-- 焦点管理：清晰的焦点指示器
-- 减少动画：尊重 `prefers-reduced-motion`
-
-**触摸体验：**
-- 防止误触：按钮间距合理
-- 触摸反馈：即时的视觉反馈
-- 滚动优化：防止滚动卡顿
-- 手势支持：滑动、缩放等
-
-### 6. 特殊场景处理
-
-**横屏模式：**
-- 检测横屏，调整布局
-- Hero区域：可能需要重新排版
-- 导航：考虑底部导航栏
-
-**小屏设备：**
-- 内容优先级排序
-- 隐藏次要信息
-- 简化视觉元素
-
-**大屏设备：**
-- 最大内容宽度：`1440px` 或 `1600px`
-- 内容居中，两侧留白
-- 充分利用空间，展示更多信息
-
----
-
-## 七、技术实现方案
-
-### 1. 技术栈确认与增强
-
-**现有技术栈：**
-- Next.js 16.1.6（App Router）
-- React 19.2.3
-- TypeScript 5
-- Tailwind CSS v4
-- shadcn/ui + Radix UI
-
-**新增依赖：**
-- **动画库：** `framer-motion` - 流畅的动画效果
-- **图表库：** `@antv/g2` - 数据可视化
-- **图标库：** `lucide-react`（已有）
-- **工具库：**
- - `clsx` + `tailwind-merge`（已有）
- - `class-variance-authority` - CVA变体管理
- - `zod` - 数据验证（已有）
-
-**开发工具：**
-- ESLint + Prettier - 代码规范
-- Husky + lint-staged - Git hooks
-- Commitlint - 提交信息规范
-
-### 2. 组件库架构
-
-**目录结构：**
-```
-src/
-├── components/
-│ ├── ui/ # 基础UI组件
-│ │ ├── button.tsx
-│ │ ├── card.tsx
-│ │ ├── input.tsx
-│ │ └── ...
-│ ├── layout/ # 布局组件
-│ │ ├── header.tsx
-│ │ ├── footer.tsx
-│ │ ├── mobile-menu.tsx
-│ │ └── ...
-│ ├── sections/ # 页面区块组件
-│ │ ├── hero-section.tsx
-│ │ ├── products-section.tsx
-│ │ └── ...
-│ ├── effects/ # 特效组件
-│ │ ├── particle-background.tsx
-│ │ ├── glow-effect.tsx
-│ │ └── ...
-│ └── charts/ # 图表组件
-│ ├── line-chart.tsx
-│ ├── bar-chart.tsx
-│ └── ...
-├── hooks/ # 自定义Hooks
-│ ├── use-animation.ts
-│ ├── use-intersection-observer.ts
-│ └── ...
-├── lib/ # 工具库
-│ ├── utils.ts
-│ ├── constants.ts
-│ ├── theme.ts
-│ └── ...
-└── styles/ # 样式文件
- ├── globals.css
- ├── animations.css
- └── ...
-```
-
-### 3. 样式系统设计
-
-**Tailwind配置扩展：**
-```typescript
-// tailwind.config.ts
-export default {
- theme: {
- extend: {
- colors: {
- // 深色主题
- dark: {
- DEFAULT: '#0A0A0A',
- secondary: '#1A1A1A',
- tertiary: '#2A2A2A',
- },
- // 科技色
- tech: {
- blue: '#00D9FF',
- purple: '#A855F7',
- cyan: '#06B6D4',
- },
- },
- fontFamily: {
- sans: ['Inter', 'sans-serif'],
- mono: ['JetBrains Mono', 'monospace'],
- },
- animation: {
- 'fade-in-up': 'fadeInUp 0.6s ease-out',
- 'fade-in-scale': 'fadeInScale 0.6s ease-out',
- 'glow': 'glow 2s ease-in-out infinite',
- },
- keyframes: {
- fadeInUp: {
- '0%': { opacity: '0', transform: 'translateY(20px)' },
- '100%': { opacity: '1', transform: 'translateY(0)' },
- },
- fadeInScale: {
- '0%': { opacity: '0', transform: 'scale(0.95)' },
- '100%': { opacity: '1', transform: 'scale(1)' },
- },
- glow: {
- '0%, 100%': { boxShadow: '0 0 20px rgba(0, 217, 255, 0.3)' },
- '50%': { boxShadow: '0 0 40px rgba(0, 217, 255, 0.6)' },
- },
- },
- },
- },
-}
-```
-
-**CSS变量系统：**
-```css
-/* globals.css */
-:root {
- --color-dark: #0A0A0A;
- --color-dark-secondary: #1A1A1A;
- --color-dark-tertiary: #2A2A2A;
- --color-tech-blue: #00D9FF;
- --color-tech-purple: #A855F7;
- --color-tech-cyan: #06B6D4;
-
- --gradient-primary: linear-gradient(135deg, #00D9FF 0%, #A855F7 100%);
- --gradient-dark: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%);
-}
-```
-
-### 4. 开发流程与规范
-
-**Git工作流：**
-- 分支策略：`main`（生产）、`develop`（开发）、`feature/*`（功能）
-- 提交规范：`feat:`、`fix:`、`style:`、`refactor:`、`docs:`
-- Code Review：必须经过至少一人审查
-
-**代码规范：**
-- ESLint配置：基于 `eslint-config-next`
-- Prettier配置：统一格式化规则
-- TypeScript严格模式
-- 组件命名：PascalCase
-- 文件命名：kebab-case
-
-**开发流程：**
-1. 从 `develop` 创建 `feature` 分支
-2. 开发 + 单元测试
-3. 提交PR + Code Review
-4. 合并到 `develop`
-5. 测试通过后合并到 `main`
-6. 自动部署
-
-### 5. 测试策略
-
-**单元测试：**
-- 框架：Vitest + React Testing Library
-- 覆盖率目标：≥80%
-- 重点：组件逻辑、Hooks、工具函数
-
-**集成测试：**
-- 测试关键用户流程
-- API集成测试
-- 状态管理测试
-
-**E2E测试：**
-- 框架：Playwright（已有）
-- 重点：核心业务流程
-- 视觉回归测试
-
-**性能测试：**
-- Lighthouse评分：≥90
-- 首屏加载时间：<2s
-- 交互响应时间：<100ms
-
-### 6. 部署与监控
-
-**部署方案：**
-- 静态导出：`next build` + `next export`
-- 托管：Vercel / 阿里云OSS + CDN
-- CI/CD：GitHub Actions
-
-**监控与优化：**
-- 性能监控：Web Vitals
-- 错误追踪：Sentry
-- 用户行为：Google Analytics
-- SEO优化：meta标签、sitemap、robots.txt
-
----
-
-## 八、实施计划
-
-### 阶段一：基础架构（1-2周）
-- 设计系统搭建（色彩、字体、间距）
-- 基础UI组件库开发
-- 布局组件重构（Header、Footer）
-- 响应式框架搭建
-
-### 阶段二：核心页面（2-3周）
-- Hero区域重构
-- 产品展示页面
-- 解决方案页面
-- 案例展示页面
-
-### 阶段三：交互优化（1-2周）
-- 动画效果实现
-- 微交互优化
-- 性能优化
-- 可访问性改进
-
-### 阶段四：测试与上线（1周）
-- 全面测试
-- 性能优化
-- 部署上线
-- 监控配置
-
-**总工期：5-8周**
-
----
-
-## 九、设计决策记录
-
-### 为什么选择深色科技风？
-1. 符合科技创新与前沿感的品牌定位
-2. 顶级科技公司的主流选择（Apple、Microsoft、GitHub、Vercel）
-3. 对企业决策者显得更加专业、高端、可信赖
-4. 深色背景配合霓虹色点缀能更好突出关键信息
-5. 移动端更受欢迎（省电、护眼）
-
-### 为什么选择 AntV？
-1. 完善的中文文档和社区支持
-2. 企业级稳定性，适合金融场景
-3. 丰富的图表类型和交互能力
-4. 良好的性能表现
-
-### 为什么精简到8个section？
-1. 提升信息聚焦度，避免用户认知负担
-2. 每个section都有明确的用户目标和转化路径
-3. 更好的性能表现（减少渲染内容）
-4. 更清晰的信息层级
-
----
-
-## 十、下一步行动
-
-1. ✅ 设计方案已完成并文档化
-2. ⏭️ 准备进入实施阶段
-3. ⏭️ 创建详细的实施计划（使用 `writing-plans` skill）
-4. ⏭️ 创建隔离的开发环境（使用 `using-git-worktrees` skill）
-
----
-
-**设计者：** AI Assistant
-**审核者：** 待定
-**最后更新：** 2026-02-21
diff --git a/docs/plans/2026-02-21-website-redesign.md b/docs/plans/2026-02-21-website-redesign.md
deleted file mode 100644
index a526d2a..0000000
--- a/docs/plans/2026-02-21-website-redesign.md
+++ /dev/null
@@ -1,1800 +0,0 @@
-# Novalon 官网重新设计实施计划
-
-> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
-
-**Goal:** 将 Novalon 官网从现有设计升级为深色科技风格的现代化企业网站
-
-**Architecture:** 采用 Next.js 16 App Router + React 19 + TypeScript + Tailwind CSS v4 技术栈，基于组件化设计，实现深色科技风格的视觉系统和流畅的用户体验
-
-**Tech Stack:** Next.js 16, React 19, TypeScript 5, Tailwind CSS v4, Framer Motion, AntV G2, shadcn/ui
-
----
-
-## 前置准备
-
-### Task 0: 创建开发分支
-
-**Files:**
-- None
-
-**Step 1: 检查当前分支状态**
-
-Run: `git status`
-
-Expected: 工作目录干净，在 main 或 develop 分支
-
-**Step 2: 创建新的功能分支**
-
-Run: `git checkout -b feature/website-redesign`
-
-Expected: 切换到新分支 feature/website-redesign
-
-**Step 3: 推送分支到远程**
-
-Run: `git push -u origin feature/website-redesign`
-
-Expected: 分支推送到远程仓库
-
----
-
-## 阶段一：基础架构搭建
-
-### Task 1: 安装必要依赖
-
-**Files:**
-- Modify: `package.json`
-
-**Step 1: 安装动画库**
-
-Run: `npm install framer-motion`
-
-Expected: framer-motion 安装成功
-
-**Step 2: 安装图表库**
-
-Run: `npm install @antv/g2`
-
-Expected: @antv/g2 安装成功
-
-**Step 3: 安装 CVA（如果尚未安装）**
-
-Run: `npm install class-variance-authority`
-
-Expected: class-variance-authority 安装成功
-
-**Step 4: 验证安装**
-
-Run: `npm list framer-motion @antv/g2 class-variance-authority`
-
-Expected: 显示已安装的版本信息
-
-**Step 5: 提交依赖更新**
-
-Run:
-```bash
-git add package.json package-lock.json
-git commit -m "chore: add framer-motion, @antv/g2, and class-variance-authority dependencies"
-```
-
-Expected: 提交成功
-
----
-
-### Task 2: 扩展 Tailwind 配置
-
-**Files:**
-- Modify: `tailwind.config.ts`（如果不存在则创建）
-
-**Step 1: 检查 Tailwind 配置文件**
-
-Run: `ls -la | grep tailwind`
-
-Expected: 显示 tailwind 配置文件
-
-**Step 2: 读取现有配置**
-
-Read: `tailwind.config.ts`
-
-**Step 3: 扩展配置添加深色主题色彩**
-
-Modify: `tailwind.config.ts`
-
-```typescript
-import type { Config } from "tailwindcss";
-
-export default {
- content: [
- "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
- "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
- "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
- ],
- theme: {
- extend: {
- colors: {
- dark: {
- DEFAULT: "#0A0A0A",
- secondary: "#1A1A1A",
- tertiary: "#2A2A2A",
- },
- tech: {
- blue: "#00D9FF",
- purple: "#A855F7",
- cyan: "#06B6D4",
- },
- },
- fontFamily: {
- sans: ["Inter", "system-ui", "sans-serif"],
- mono: ["JetBrains Mono", "monospace"],
- },
- animation: {
- "fade-in-up": "fadeInUp 0.6s ease-out",
- "fade-in-scale": "fadeInScale 0.6s ease-out",
- glow: "glow 2s ease-in-out infinite",
- float: "float 3s ease-in-out infinite",
- },
- keyframes: {
- fadeInUp: {
- "0%": { opacity: "0", transform: "translateY(20px)" },
- "100%": { opacity: "1", transform: "translateY(0)" },
- },
- fadeInScale: {
- "0%": { opacity: "0", transform: "scale(0.95)" },
- "100%": { opacity: "1", transform: "scale(1)" },
- },
- glow: {
- "0%, 100%": { boxShadow: "0 0 20px rgba(0, 217, 255, 0.3)" },
- "50%": { boxShadow: "0 0 40px rgba(0, 217, 255, 0.6)" },
- },
- float: {
- "0%, 100%": { transform: "translateY(0px)" },
- "50%": { transform: "translateY(-10px)" },
- },
- },
- },
- },
- plugins: [],
-} satisfies Config;
-```
-
-**Step 4: 验证配置语法**
-
-Run: `npx tsc --noEmit tailwind.config.ts`
-
-Expected: 无错误输出
-
-**Step 5: 提交配置更新**
-
-Run:
-```bash
-git add tailwind.config.ts
-git commit -m "feat: extend Tailwind config with dark theme and tech colors"
-```
-
-Expected: 提交成功
-
----
-
-### Task 3: 更新全局样式
-
-**Files:**
-- Modify: `src/app/globals.css`
-
-**Step 1: 读取现有全局样式**
-
-Read: `src/app/globals.css`
-
-**Step 2: 添加 CSS 变量和基础样式**
-
-Modify: `src/app/globals.css`
-
-在文件顶部添加：
-
-```css
-:root {
- --color-dark: #0A0A0A;
- --color-dark-secondary: #1A1A1A;
- --color-dark-tertiary: #2A2A2A;
- --color-tech-blue: #00D9FF;
- --color-tech-purple: #A855F7;
- --color-tech-cyan: #06B6D4;
-
- --gradient-primary: linear-gradient(135deg, #00D9FF 0%, #A855F7 100%);
- --gradient-dark: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%);
- --gradient-glow: radial-gradient(circle, #00D9FF20 0%, transparent 70%);
-}
-
-* {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
-}
-
-html {
- scroll-behavior: smooth;
-}
-
-body {
- background-color: var(--color-dark);
- color: #FFFFFF;
- font-family: 'Inter', system-ui, sans-serif;
- line-height: 1.6;
-}
-
-a {
- color: inherit;
- text-decoration: none;
-}
-
-button {
- font-family: inherit;
-}
-
-input, textarea {
- font-family: inherit;
-}
-
-::-webkit-scrollbar {
- width: 8px;
- height: 8px;
-}
-
-::-webkit-scrollbar-track {
- background: var(--color-dark-secondary);
-}
-
-::-webkit-scrollbar-thumb {
- background: var(--color-tech-blue);
- border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: var(--color-tech-purple);
-}
-```
-
-**Step 3: 验证样式文件**
-
-Run: `npm run build`
-
-Expected: 构建成功，无样式错误
-
-**Step 4: 提交样式更新**
-
-Run:
-```bash
-git add src/app/globals.css
-git commit -m "feat: add CSS variables and base styles for dark theme"
-```
-
-Expected: 提交成功
-
----
-
-### Task 4: 创建工具函数
-
-**Files:**
-- Modify: `src/lib/utils.ts`
-
-**Step 1: 读取现有工具函数**
-
-Read: `src/lib/utils.ts`
-
-**Step 2: 添加新的工具函数**
-
-Modify: `src/lib/utils.ts`
-
-```typescript
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs));
-}
-
-export function formatNumber(num: number): string {
- return new Intl.NumberFormat("zh-CN").format(num);
-}
-
-export function formatCurrency(amount: number): string {
- return new Intl.NumberFormat("zh-CN", {
- style: "currency",
- currency: "CNY",
- }).format(amount);
-}
-
-export function debounce unknown>(
- func: T,
- wait: number
-): (...args: Parameters) => void {
- let timeout: NodeJS.Timeout | null = null;
- return (...args: Parameters) => {
- if (timeout) clearTimeout(timeout);
- timeout = setTimeout(() => func(...args), wait);
- };
-}
-
-export function throttle unknown>(
- func: T,
- limit: number
-): (...args: Parameters) => void {
- let inThrottle: boolean;
- return (...args: Parameters) => {
- if (!inThrottle) {
- func(...args);
- inThrottle = true;
- setTimeout(() => (inThrottle = false), limit);
- }
- };
-}
-
-export function randomBetween(min: number, max: number): number {
- return Math.random() * (max - min) + min;
-}
-
-export function lerp(start: number, end: number, t: number): number {
- return start + (end - start) * t;
-}
-
-export function clamp(value: number, min: number, max: number): number {
- return Math.min(Math.max(value, min), max);
-}
-```
-
-**Step 3: 验证类型检查**
-
-Run: `npx tsc --noEmit`
-
-Expected: 无类型错误
-
-**Step 4: 提交工具函数**
-
-Run:
-```bash
-git add src/lib/utils.ts
-git commit -m "feat: add utility functions for formatting and animation"
-```
-
-Expected: 提交成功
-
----
-
-### Task 5: 创建主题常量
-
-**Files:**
-- Modify: `src/lib/constants.ts`
-
-**Step 1: 读取现有常量**
-
-Read: `src/lib/constants.ts`
-
-**Step 2: 添加主题相关常量**
-
-Modify: `src/lib/constants.ts`
-
-在文件末尾添加：
-
-```typescript
-export const THEME = {
- colors: {
- dark: {
- DEFAULT: "#0A0A0A",
- secondary: "#1A1A1A",
- tertiary: "#2A2A2A",
- },
- tech: {
- blue: "#00D9FF",
- purple: "#A855F7",
- cyan: "#06B6D4",
- },
- text: {
- primary: "#FFFFFF",
- secondary: "#A0A0A0",
- disabled: "#606060",
- },
- },
- gradients: {
- primary: "linear-gradient(135deg, #00D9FF 0%, #A855F7 100%)",
- dark: "linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%)",
- glow: "radial-gradient(circle, #00D9FF20 0%, transparent 70%)",
- },
- spacing: {
- xs: "4px",
- sm: "8px",
- md: "16px",
- lg: "24px",
- xl: "32px",
- "2xl": "48px",
- "3xl": "64px",
- },
- borderRadius: {
- sm: "8px",
- md: "12px",
- lg: "16px",
- full: "9999px",
- },
- animation: {
- fast: "150ms",
- standard: "300ms",
- slow: "500ms",
- verySlow: "1000ms",
- },
- breakpoints: {
- sm: "640px",
- md: "768px",
- lg: "1024px",
- xl: "1280px",
- "2xl": "1536px",
- },
-} as const;
-
-export const ANIMATION_VARIANTS = {
- fadeInUp: {
- initial: { opacity: 0, y: 20 },
- animate: { opacity: 1, y: 0 },
- exit: { opacity: 0, y: -20 },
- },
- fadeInScale: {
- initial: { opacity: 0, scale: 0.95 },
- animate: { opacity: 1, scale: 1 },
- exit: { opacity: 0, scale: 0.95 },
- },
- slideInLeft: {
- initial: { opacity: 0, x: -20 },
- animate: { opacity: 1, x: 0 },
- exit: { opacity: 0, x: 20 },
- },
- slideInRight: {
- initial: { opacity: 0, x: 20 },
- animate: { opacity: 1, x: 0 },
- exit: { opacity: 0, x: -20 },
- },
-} as const;
-```
-
-**Step 3: 验证类型检查**
-
-Run: `npx tsc --noEmit`
-
-Expected: 无类型错误
-
-**Step 4: 提交常量更新**
-
-Run:
-```bash
-git add src/lib/constants.ts
-git commit -m "feat: add theme constants and animation variants"
-```
-
-Expected: 提交成功
-
----
-
-## 阶段二：基础UI组件开发
-
-### Task 6: 创建增强版按钮组件
-
-**Files:**
-- Modify: `src/components/ui/button.tsx`
-
-**Step 1: 读取现有按钮组件**
-
-Read: `src/components/ui/button.tsx`
-
-**Step 2: 重写按钮组件以支持深色主题**
-
-Modify: `src/components/ui/button.tsx`
-
-```typescript
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
- "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tech-blue focus-visible:ring-offset-2 focus-visible:ring-offset-dark disabled:pointer-events-none disabled:opacity-50",
- {
- variants: {
- variant: {
- default:
- "bg-gradient-to-r from-tech-blue to-tech-purple text-white hover:shadow-lg hover:shadow-tech-blue/50 hover:scale-105 active:scale-95",
- secondary:
- "bg-dark-tertiary text-white border border-gray-700 hover:border-tech-blue hover:shadow-lg hover:shadow-tech-blue/20 hover:scale-105 active:scale-95",
- outline:
- "border border-tech-blue text-tech-blue hover:bg-tech-blue/10 hover:shadow-lg hover:shadow-tech-blue/20",
- ghost:
- "text-gray-300 hover:text-tech-blue hover:bg-dark-tertiary",
- link: "text-tech-blue underline-offset-4 hover:underline",
- },
- size: {
- default: "h-10 px-6 py-2",
- sm: "h-8 px-4 text-xs",
- lg: "h-12 px-8 text-base",
- xl: "h-14 px-10 text-lg",
- icon: "h-10 w-10",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-);
-
-export interface ButtonProps
- extends React.ButtonHTMLAttributes,
- VariantProps {
- asChild?: boolean;
-}
-
-const Button = React.forwardRef(
- ({ className, variant, size, ...props }, ref) => {
- return (
-
- );
- }
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
-```
-
-**Step 3: 验证类型检查**
-
-Run: `npx tsc --noEmit`
-
-Expected: 无类型错误
-
-**Step 4: 提交按钮组件**
-
-Run:
-```bash
-git add src/components/ui/button.tsx
-git commit -m "feat: enhance button component with dark theme variants"
-```
-
-Expected: 提交成功
-
----
-
-### Task 7: 创建增强版卡片组件
-
-**Files:**
-- Modify: `src/components/ui/card.tsx`
-
-**Step 1: 读取现有卡片组件**
-
-Read: `src/components/ui/card.tsx`
-
-**Step 2: 重写卡片组件以支持深色主题和悬停效果**
-
-Modify: `src/components/ui/card.tsx`
-
-```typescript
-import * as React from "react";
-import { cn } from "@/lib/utils";
-
-const Card = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes & {
- variant?: "default" | "hover" | "glow";
- }
->(({ className, variant = "default", ...props }, ref) => (
-
-));
-Card.displayName = "Card";
-
-const CardHeader = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-CardHeader.displayName = "CardHeader";
-
-const CardTitle = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-CardTitle.displayName = "CardTitle";
-
-const CardDescription = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-CardDescription.displayName = "CardDescription";
-
-const CardContent = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-CardContent.displayName = "CardContent";
-
-const CardFooter = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-CardFooter.displayName = "CardFooter";
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
-```
-
-**Step 3: 验证类型检查**
-
-Run: `npx tsc --noEmit`
-
-Expected: 无类型错误
-
-**Step 4: 提交卡片组件**
-
-Run:
-```bash
-git add src/components/ui/card.tsx
-git commit -m "feat: enhance card component with dark theme and hover effects"
-```
-
-Expected: 提交成功
-
----
-
-### Task 8: 创建输入框组件
-
-**Files:**
-- Modify: `src/components/ui/input.tsx`
-
-**Step 1: 读取现有输入框组件**
-
-Read: `src/components/ui/input.tsx`
-
-**Step 2: 重写输入框组件以支持深色主题**
-
-Modify: `src/components/ui/input.tsx`
-
-```typescript
-import * as React from "react";
-import { cn } from "@/lib/utils";
-
-export interface InputProps
- extends React.InputHTMLAttributes {}
-
-const Input = React.forwardRef(
- ({ className, type, ...props }, ref) => {
- return (
-
- );
- }
-);
-Input.displayName = "Input";
-
-export { Input };
-```
-
-**Step 3: 验证类型检查**
-
-Run: `npx tsc --noEmit`
-
-Expected: 无类型错误
-
-**Step 4: 提交输入框组件**
-
-Run:
-```bash
-git add src/components/ui/input.tsx
-git commit -m "feat: enhance input component with dark theme styles"
-```
-
-Expected: 提交成功
-
----
-
-### Task 9: 创建徽章组件
-
-**Files:**
-- Modify: `src/components/ui/badge.tsx`
-
-**Step 1: 读取现有徽章组件**
-
-Read: `src/components/ui/badge.tsx`
-
-**Step 2: 重写徽章组件以支持深色主题**
-
-Modify: `src/components/ui/badge.tsx`
-
-```typescript
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils";
-
-const badgeVariants = cva(
- "inline-flex items-center rounded-full px-3 py-1 text-xs font-medium transition-colors duration-300",
- {
- variants: {
- variant: {
- default:
- "bg-tech-blue/20 text-tech-blue border border-tech-blue/30",
- secondary:
- "bg-tech-purple/20 text-tech-purple border border-tech-purple/30",
- success:
- "bg-green-500/20 text-green-400 border border-green-500/30",
- warning:
- "bg-yellow-500/20 text-yellow-400 border border-yellow-500/30",
- error:
- "bg-red-500/20 text-red-400 border border-red-500/30",
- outline:
- "bg-transparent text-gray-300 border border-gray-600",
- },
- },
- defaultVariants: {
- variant: "default",
- },
- }
-);
-
-export interface BadgeProps
- extends React.HTMLAttributes,
- VariantProps {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
- return (
-
- );
-}
-
-export { Badge, badgeVariants };
-```
-
-**Step 3: 验证类型检查**
-
-Run: `npx tsc --noEmit`
-
-Expected: 无类型错误
-
-**Step 4: 提交徽章组件**
-
-Run:
-```bash
-git add src/components/ui/badge.tsx
-git commit -m "feat: enhance badge component with dark theme variants"
-```
-
-Expected: 提交成功
-
----
-
-## 阶段三：布局组件重构
-
-### Task 10: 重构导航栏组件
-
-**Files:**
-- Modify: `src/components/layout/header.tsx`
-
-**Step 1: 读取现有导航栏组件**
-
-Read: `src/components/layout/header.tsx`
-
-**Step 2: 重写导航栏组件以支持深色主题和下拉菜单**
-
-Modify: `src/components/layout/header.tsx`
-
-```typescript
-"use client";
-
-import { useState, useEffect } from "react";
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import { NAVIGATION, COMPANY_INFO } from "@/lib/constants";
-import { cn } from "@/lib/utils";
-import { ChevronDown, Menu, X } from "lucide-react";
-
-export function Header() {
- const [isScrolled, setIsScrolled] = useState(false);
- const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
- const [activeDropdown, setActiveDropdown] = useState(null);
-
- useEffect(() => {
- const handleScroll = () => {
- setIsScrolled(window.scrollY > 10);
- };
- window.addEventListener("scroll", handleScroll);
- return () => window.removeEventListener("scroll", handleScroll);
- }, []);
-
- return (
-
-
-
- {isMobileMenuOpen && (
-
- );
-}
-```
-
-**Step 3: 验证类型检查**
-
-Run: `npx tsc --noEmit`
-
-Expected: 无类型错误
-
-**Step 4: 提交导航栏组件**
-
-Run:
-```bash
-git add src/components/layout/header.tsx
-git commit -m "feat: refactor header with dark theme and mobile menu"
-```
-
-Expected: 提交成功
-
----
-
-### Task 11: 重构页脚组件
-
-**Files:**
-- Modify: `src/components/layout/footer.tsx`
-
-**Step 1: 读取现有页脚组件**
-
-Read: `src/components/layout/footer.tsx`
-
-**Step 2: 重写页脚组件以支持深色主题**
-
-Modify: `src/components/layout/footer.tsx`
-
-```typescript
-import Link from "next/link";
-import { COMPANY_INFO } from "@/lib/constants";
-
-export function Footer() {
- const currentYear = new Date().getFullYear();
-
- const footerLinks = {
- products: [
- { label: "ERP系统", href: "/products/erp" },
- { label: "CRM系统", href: "/products/crm" },
- { label: "OA平台", href: "/products/oa" },
- { label: "BI平台", href: "/products/bi" },
- ],
- solutions: [
- { label: "金融行业", href: "/solutions/finance" },
- { label: "制造业", href: "/solutions/manufacturing" },
- { label: "零售行业", href: "/solutions/retail" },
- { label: "教育行业", href: "/solutions/education" },
- ],
- company: [
- { label: "关于我们", href: "/about" },
- { label: "新闻动态", href: "/news" },
- { label: "成功案例", href: "/cases" },
- { label: "联系我们", href: "/contact" },
- ],
- };
-
- return (
-
- );
-}
-```
-
-**Step 3: 验证类型检查**
-
-Run: `npx tsc --noEmit`
-
-Expected: 无类型错误
-
-**Step 4: 提交页脚组件**
-
-Run:
-```bash
-git add src/components/layout/footer.tsx
-git commit -m "feat: refactor footer with dark theme and improved layout"
-```
-
-Expected: 提交成功
-
----
-
-## 阶段四：特效组件开发
-
-### Task 12: 创建粒子背景组件
-
-**Files:**
-- Create: `src/components/effects/particle-background.tsx`
-
-**Step 1: 创建粒子背景组件**
-
-Create: `src/components/effects/particle-background.tsx`
-
-```typescript
-"use client";
-
-import { useEffect, useRef } from "react";
-import { randomBetween } from "@/lib/utils";
-
-interface Particle {
- x: number;
- y: number;
- vx: number;
- vy: number;
- size: number;
- color: string;
- opacity: number;
-}
-
-interface ParticleBackgroundProps {
- particleCount?: number;
- colors?: string[];
- minSize?: number;
- maxSize?: number;
- speed?: number;
- className?: string;
-}
-
-export function ParticleBackground({
- particleCount = 50,
- colors = ["#00D9FF", "#A855F7", "#06B6D4"],
- minSize = 1,
- maxSize = 3,
- speed = 0.5,
- className = "",
-}: ParticleBackgroundProps) {
- const canvasRef = useRef(null);
- const particlesRef = useRef([]);
- const animationRef = useRef();
-
- useEffect(() => {
- const canvas = canvasRef.current;
- if (!canvas) return;
-
- const ctx = canvas.getContext("2d");
- if (!ctx) return;
-
- const resizeCanvas = () => {
- canvas.width = window.innerWidth;
- canvas.height = window.innerHeight;
- };
-
- resizeCanvas();
- window.addEventListener("resize", resizeCanvas);
-
- particlesRef.current = Array.from({ length: particleCount }, () => ({
- x: randomBetween(0, canvas.width),
- y: randomBetween(0, canvas.height),
- vx: randomBetween(-speed, speed),
- vy: randomBetween(-speed, speed),
- size: randomBetween(minSize, maxSize),
- color: colors[Math.floor(Math.random() * colors.length)],
- opacity: randomBetween(0.1, 0.5),
- }));
-
- const animate = () => {
- if (!ctx || !canvas) return;
-
- ctx.clearRect(0, 0, canvas.width, canvas.height);
-
- particlesRef.current.forEach((particle) => {
- particle.x += particle.vx;
- particle.y += particle.vy;
-
- if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1;
- if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1;
-
- ctx.beginPath();
- ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
- ctx.fillStyle = particle.color;
- ctx.globalAlpha = particle.opacity;
- ctx.fill();
- });
-
- ctx.globalAlpha = 1;
- animationRef.current = requestAnimationFrame(animate);
- };
-
- animate();
-
- return () => {
- window.removeEventListener("resize", resizeCanvas);
- if (animationRef.current) {
- cancelAnimationFrame(animationRef.current);
- }
- };
- }, [particleCount, colors, minSize, maxSize, speed]);
-
- return (
-
- );
-}
-```
-
-**Step 2: 验证类型检查**
-
-Run: `npx tsc --noEmit`
-
-Expected: 无类型错误
-
-**Step 3: 提交粒子背景组件**
-
-Run:
-```bash
-git add src/components/effects/particle-background.tsx
-git commit -m "feat: create particle background component for hero section"
-```
-
-Expected: 提交成功
-
----
-
-### Task 13: 创建发光效果组件
-
-**Files:**
-- Create: `src/components/effects/glow-effect.tsx`
-
-**Step 1: 创建发光效果组件**
-
-Create: `src/components/effects/glow-effect.tsx`
-
-```typescript
-"use client";
-
-import { cn } from "@/lib/utils";
-
-interface GlowEffectProps {
- color?: string;
- size?: "sm" | "md" | "lg" | "xl";
- className?: string;
- children?: React.ReactNode;
-}
-
-const sizeMap = {
- sm: "w-32 h-32",
- md: "w-48 h-48",
- lg: "w-64 h-64",
- xl: "w-96 h-96",
-};
-
-export function GlowEffect({
- color = "#00D9FF",
- size = "lg",
- className,
- children,
-}: GlowEffectProps) {
- return (
-
-
-
-
- );
-}
-```
-
-**Step 3: 验证类型检查**
-
-Run: `npx tsc --noEmit`
-
-Expected: 无类型错误
-
-**Step 4: 提交 Hero Section**
-
-Run:
-```bash
-git add src/components/sections/hero-section.tsx
-git commit -m "feat: refactor hero section with dark theme and animations"
-```
-
-Expected: 提交成功
-
----
-
-### Task 15: 创建统计数据 Section
-
-**Files:**
-- Create: `src/components/sections/stats-section.tsx`
-
-**Step 1: 创建统计数据 Section**
-
-Create: `src/components/sections/stats-section.tsx`
-
-```typescript
-"use client";
-
-import { motion } from "framer-motion";
-import { STATS } from "@/lib/constants";
-
-export function StatsSection() {
- return (
-
-
- );
-}
-```
-
-**Step 2: 验证类型检查**
-
-Run: `npx tsc --noEmit`
-
-Expected: 无类型错误
-
-**Step 3: 提交统计数据 Section**
-
-Run:
-```bash
-git add src/components/sections/stats-section.tsx
-git commit -m "feat: create stats section with animated counters"
-```
-
-Expected: 提交成功
-
----
-
-### Task 16: 重构产品展示 Section
-
-**Files:**
-- Modify: `src/components/sections/products-section.tsx`
-
-**Step 1: 读取现有产品展示 Section**
-
-Read: `src/components/sections/products-section.tsx`
-
-**Step 2: 重写产品展示 Section 以支持深色主题和卡片效果**
-
-Modify: `src/components/sections/products-section.tsx`
-
-```typescript
-"use client";
-
-import { motion } from "framer-motion";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { PRODUCTS } from "@/lib/constants";
-import { ArrowRight } from "lucide-react";
-
-export function ProductsSection() {
- return (
-
-
- );
-}
-```
-
-**Step 3: 验证类型检查**
-
-Run: `npx tsc --noEmit`
-
-Expected: 无类型错误
-
-**Step 4: 提交产品展示 Section**
-
-Run:
-```bash
-git add src/components/sections/products-section.tsx
-git commit -m "feat: refactor products section with dark theme and card layout"
-```
-
-Expected: 提交成功
-
----
-
-## 阶段六：测试与验证
-
-### Task 17: 运行开发服务器测试
-
-**Files:**
-- None
-
-**Step 1: 启动开发服务器**
-
-Run: `npm run dev`
-
-Expected: 开发服务器成功启动在 http://localhost:3000
-
-**Step 2: 在浏览器中验证首页**
-
-手动测试：
-- 访问 http://localhost:3000
-- 验证深色主题是否正确应用
-- 验证导航栏是否正常工作
-- 验证 Hero Section 动画是否流畅
-- 验证产品卡片悬停效果
-- 验证响应式布局（移动端、平板、桌面）
-
-Expected: 所有功能正常工作
-
-**Step 3: 停止开发服务器**
-
-按 Ctrl+C 停止服务器
-
-Expected: 服务器成功停止
-
----
-
-### Task 18: 运行构建测试
-
-**Files:**
-- None
-
-**Step 1: 运行生产构建**
-
-Run: `npm run build`
-
-Expected: 构建成功，无错误
-
-**Step 2: 检查构建输出**
-
-验证构建输出中：
-- 页面是否正确生成
-- 是否有优化建议
-- 构建大小是否合理
-
-Expected: 构建输出正常
-
-**Step 3: 运行代码检查**
-
-Run: `npm run lint`
-
-Expected: 无 ESLint 错误
-
----
-
-### Task 19: 提交所有更改
-
-**Files:**
-- None
-
-**Step 1: 检查 Git 状态**
-
-Run: `git status`
-
-Expected: 显示所有修改的文件
-
-**Step 2: 添加所有更改**
-
-Run: `git add .`
-
-Expected: 所有更改已暂存
-
-**Step 3: 创建提交**
-
-Run:
-```bash
-git commit -m "feat: complete website redesign with dark tech theme
-
-- Add dark theme color system and CSS variables
-- Enhance UI components (Button, Card, Input, Badge)
-- Refactor layout components (Header, Footer)
-- Create effect components (ParticleBackground, GlowEffect)
-- Refactor sections (Hero, Stats, Products)
-- Add Framer Motion animations
-- Improve responsive design
-- Update Tailwind configuration"
-```
-
-Expected: 提交成功
-
-**Step 4: 推送到远程**
-
-Run: `git push origin feature/website-redesign`
-
-Expected: 推送成功
-
----
-
-## 完成清单
-
-- [ ] 安装必要依赖（framer-motion, @antv/g2, class-variance-authority）
-- [ ] 扩展 Tailwind 配置
-- [ ] 更新全局样式
-- [ ] 创建工具函数
-- [ ] 创建主题常量
-- [ ] 增强按钮组件
-- [ ] 增强卡片组件
-- [ ] 增强输入框组件
-- [ ] 增强徽章组件
-- [ ] 重构导航栏组件
-- [ ] 重构页脚组件
-- [ ] 创建粒子背景组件
-- [ ] 创建发光效果组件
-- [ ] 重构 Hero Section
-- [ ] 创建统计数据 Section
-- [ ] 重构产品展示 Section
-- [ ] 运行开发服务器测试
-- [ ] 运行构建测试
-- [ ] 提交所有更改
-
----
-
-## 注意事项
-
-1. **每个任务都应该独立完成并提交**，便于版本控制和回滚
-2. **遇到错误立即停止**，不要继续下一步
-3. **保持代码风格一致**，遵循项目现有的代码规范
-4. **测试每个组件**，确保在移动端和桌面端都能正常工作
-5. **关注性能**，避免过度使用动画和特效
-
----
-
-**计划创建者：** AI Assistant
-**创建日期：** 2026-02-21
-**预计工期：** 2-3天（基础架构 + 核心组件 + 首页重构）
diff --git a/docs/plans/2026-02-22-healthcare-style-implementation.md b/docs/plans/2026-02-22-healthcare-style-implementation.md
deleted file mode 100644
index 6d362ec..0000000
--- a/docs/plans/2026-02-22-healthcare-style-implementation.md
+++ /dev/null
@@ -1,802 +0,0 @@
-# Novalon 官网医疗健康风格重构实施计划
-
-> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
-
-**Goal:** 将 Novalon 官网从深色科技风格重构为医疗健康风格（明亮、专业、可信赖）
-
-**Architecture:** 采用专业蓝 `#005EB8` 为主色调，印章红 `#C41E3A` 作为品牌强调色，白色/浅灰背景。移除深色模式，统一使用明亮风格。重构所有 UI 组件、页面布局和内容策略。
-
-**Tech Stack:** Next.js 16.1.6, React 19.2.3, TypeScript, Tailwind CSS 4.0, Framer Motion
-
----
-
-## Phase 1: 配色系统更新
-
-### Task 1: 更新 globals.css 配色变量
-
-**Files:**
-- Modify: `src/app/globals.css:1-200`
-
-**Step 1: 替换 :root 变量为医疗健康配色**
-
-将 `:root` 部分的配色变量替换为：
-
-```css
-:root {
- /* 主色调 - 专业蓝系 */
- --color-primary: #005EB8;
- --color-primary-hover: #003B73;
- --color-primary-light: #00A3E0;
- --color-primary-lighter: #E8F4FD;
-
- /* 品牌色 - 印章红 */
- --color-brand-primary: #C41E3A;
- --color-brand-primary-hover: #A01830;
- --color-brand-primary-light: #E04A68;
- --color-brand-primary-bg: #FEF2F4;
-
- /* 背景色系 - 明亮健康风 */
- --color-bg-primary: #FFFFFF;
- --color-bg-secondary: #F5F7FA;
- --color-bg-tertiary: #EEF2F7;
- --color-bg-hover: #E8ECF2;
-
- /* 文字色系 */
- --color-text-primary: #1A1A2E;
- --color-text-secondary: #4A5568;
- --color-text-tertiary: #718096;
- --color-text-muted: #A0AEC0;
-
- /* 边框色系 */
- --color-border-primary: #E2E8F0;
- --color-border-secondary: #CBD5E0;
- --color-border-accent: #005EB8;
-
- /* 链接色 */
- --color-link: #005EB8;
- --color-link-hover: #003B73;
-
- /* 状态色 */
- --color-success: #16A34A;
- --color-success-bg: #F0FDF4;
- --color-warning: #D97706;
- --color-warning-bg: #FFFBEB;
- --color-info: #0284C7;
- --color-info-bg: #F0F9FF;
- --color-error: #DC2626;
- --color-error-bg: #FEF2F2;
-
- /* 阴影 */
- --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
- --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
- --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05);
- --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.05);
-
- /* 保留原有尺寸变量 */
- --font-size-xs: 0.75rem;
- --font-size-sm: 0.875rem;
- --font-size-base: 1rem;
- --font-size-lg: 1.125rem;
- --font-size-xl: 1.25rem;
- --font-size-2xl: 1.5rem;
- --font-size-3xl: 1.875rem;
- --font-size-4xl: 2.25rem;
- --font-size-5xl: 3rem;
- --font-size-6xl: 3.75rem;
-
- --line-height-tight: 1.1;
- --line-height-snug: 1.25;
- --line-height-normal: 1.5;
- --line-height-relaxed: 1.625;
-
- --letter-spacing-tight: -0.025em;
- --letter-spacing-normal: 0;
- --letter-spacing-wide: 0.025em;
-
- --spacing-xs: 0.25rem;
- --spacing-sm: 0.5rem;
- --spacing-md: 1rem;
- --spacing-lg: 1.5rem;
- --spacing-xl: 2rem;
- --spacing-2xl: 3rem;
- --spacing-3xl: 4rem;
- --spacing-4xl: 6rem;
- --spacing-5xl: 8rem;
-
- --border-width-thin: 0.5px;
- --border-width-normal: 1px;
-
- --transition-fast: 150ms;
- --transition-normal: 200ms;
- --transition-slow: 300ms;
-
- --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
- --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
-}
-```
-
-**Step 2: 移除 .dark 主题**
-
-删除整个 `.dark` 选择器块（约 50 行），因为新设计只使用明亮风格。
-
-**Step 3: 更新 body 背景和文字颜色**
-
-```css
-body {
- background-color: var(--color-bg-primary);
- color: var(--color-text-primary);
- font-family: var(--font-chinese), var(--font-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
- line-height: var(--line-height-normal);
- letter-spacing: var(--letter-spacing-normal);
- position: relative;
-}
-
-body::before {
- content: '';
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background:
- radial-gradient(ellipse at 15% 20%, rgba(0, 94, 184, 0.03) 0%, transparent 50%),
- radial-gradient(ellipse at 85% 80%, rgba(196, 30, 58, 0.02) 0%, transparent 50%);
- pointer-events: none;
- z-index: -1;
-}
-```
-
-**Step 4: 运行开发服务器验证**
-
-Run: `npm run dev`
-
-Expected: 页面显示明亮背景，配色正常
-
-**Step 5: Commit**
-
-```bash
-git add src/app/globals.css
-git commit -m "style: 更新配色系统为医疗健康风格
-
-- 专业蓝 #005EB8 为主色调
-- 印章红 #C41E3A 为品牌强调色
-- 移除深色模式
-- 明亮背景风格"
-```
-
----
-
-### Task 2: 更新 colors.ts 配色定义
-
-**Files:**
-- Modify: `src/lib/colors.ts:1-113`
-
-**Step 1: 替换整个文件内容**
-
-```typescript
-export const brandColors = {
- primary: {
- 600: '#005EB8',
- 700: '#003B73',
- 500: '#00A3E0',
- 400: '#33B8E8',
- 100: '#E8F4FD',
- },
- brand: {
- 600: '#C41E3A',
- 700: '#A01830',
- 500: '#E04A68',
- 400: '#F08C9F',
- 100: '#FEF2F4',
- },
- neutral: {
- 900: '#1A1A2E',
- 800: '#2D3748',
- 700: '#4A5568',
- 600: '#718096',
- 500: '#A0AEC0',
- 400: '#CBD5E0',
- 300: '#E2E8F0',
- 200: '#EDF2F7',
- 100: '#F5F7FA',
- 50: '#FFFFFF',
- },
- success: {
- 600: '#16A34A',
- 100: '#F0FDF4',
- },
- warning: {
- 600: '#D97706',
- 100: '#FFFBEB',
- },
- info: {
- 600: '#0284C7',
- 100: '#F0F9FF',
- },
- error: {
- 600: '#DC2626',
- 100: '#FEF2F2',
- },
-} as const;
-
-export const colorValues = {
- primary: '#005EB8',
- primaryHover: '#003B73',
- primaryLight: '#00A3E0',
- primaryLighter: '#E8F4FD',
-
- brand: '#C41E3A',
- brandHover: '#A01830',
- brandLight: '#E04A68',
- brandBg: '#FEF2F4',
-
- textPrimary: '#1A1A2E',
- textSecondary: '#4A5568',
- textTertiary: '#718096',
- textMuted: '#A0AEC0',
-
- bgPrimary: '#FFFFFF',
- bgSecondary: '#F5F7FA',
- bgTertiary: '#EEF2F7',
- bgHover: '#E8ECF2',
-
- border: '#E2E8F0',
- borderSecondary: '#CBD5E0',
- borderAccent: '#005EB8',
-
- link: '#005EB8',
- linkHover: '#003B73',
-
- success: '#16A34A',
- successBg: '#F0FDF4',
- warning: '#D97706',
- warningBg: '#FFFBEB',
- info: '#0284C7',
- infoBg: '#F0F9FF',
- error: '#DC2626',
- errorBg: '#FEF2F2',
-} as const;
-
-export const gradients = {
- primary: 'linear-gradient(135deg, #005EB8 0%, #00A3E0 100%)',
- hero: 'linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%)',
- brand: 'linear-gradient(135deg, #C41E3A 0%, #E04A68 100%)',
- subtle: 'linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%)',
-} as const;
-
-export type BrandColor = typeof brandColors;
-export type ColorValue = typeof colorValues;
-export type Gradient = typeof gradients;
-```
-
-**Step 2: 验证 TypeScript 编译**
-
-Run: `npx tsc --noEmit`
-
-Expected: 无错误
-
-**Step 3: Commit**
-
-```bash
-git add src/lib/colors.ts
-git commit -m "refactor: 更新 colors.ts 配色定义为医疗健康风格"
-```
-
----
-
-### Task 3: 更新 gradients.ts 渐变定义
-
-**Files:**
-- Modify: `src/lib/gradients.ts`
-
-**Step 1: 替换文件内容**
-
-```typescript
-export const gradients = {
- primary: 'linear-gradient(135deg, #005EB8 0%, #00A3E0 100%)',
- hero: 'linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%)',
- brand: 'linear-gradient(135deg, #C41E3A 0%, #E04A68 100%)',
- subtle: 'linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%)',
- card: 'linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%)',
- cta: 'linear-gradient(135deg, #C41E3A 0%, #A01830 100%)',
-} as const;
-
-export type GradientType = typeof gradients;
-```
-
-**Step 2: Commit**
-
-```bash
-git add src/lib/gradients.ts
-git commit -m "refactor: 更新渐变定义为医疗健康风格"
-```
-
----
-
-## Phase 2: UI 组件重构
-
-### Task 4: 重构 Button 组件
-
-**Files:**
-- Modify: `src/components/ui/button.tsx`
-
-**Step 1: 更新 buttonVariants**
-
-```typescript
-const buttonVariants = cva(
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[#005EB8] focus-visible:ring-offset-2 focus-visible:ring-offset-white",
- {
- variants: {
- variant: {
- default:
- "bg-[#C41E3A] text-white hover:bg-[#A01830] hover:shadow-[0_4px_12px_rgba(196,30,58,0.25)] hover:-translate-y-0.5 active:scale-[0.98]",
- secondary:
- "bg-[#005EB8] text-white hover:bg-[#003B73] hover:shadow-[0_4px_12px_rgba(0,94,184,0.25)] hover:-translate-y-0.5 active:scale-[0.98]",
- destructive:
- "bg-[#DC2626] text-white hover:bg-[#B91C1C] focus-visible:ring-[#DC2626]",
- outline:
- "border-2 border-[#005EB8] bg-transparent text-[#005EB8] hover:bg-[#E8F4FD] hover:shadow-[0_2px_8px_rgba(0,94,184,0.15)]",
- ghost:
- "text-[#4A5568] hover:bg-[#F5F7FA] hover:text-[#1A1A2E]",
- link:
- "text-[#005EB8] underline-offset-4 hover:underline",
- },
- size: {
- default: "h-10 px-4 py-2",
- sm: "h-8 rounded-md px-3 text-xs",
- lg: "h-12 rounded-lg px-6 text-base",
- icon: "h-10 w-10",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-)
-```
-
-**Step 2: Commit**
-
-```bash
-git add src/components/ui/button.tsx
-git commit -m "refactor: 更新 Button 组件为医疗健康风格"
-```
-
----
-
-### Task 5: 重构 Card 组件
-
-**Files:**
-- Modify: `src/components/ui/card.tsx`
-
-**Step 1: 读取当前文件内容**
-
-Run: `cat src/components/ui/card.tsx`
-
-**Step 2: 更新卡片样式**
-
-将所有卡片样式更新为：
-- 背景：`#FFFFFF`
-- 边框：`#E2E8F0`
-- 圆角：`12px`
-- 阴影：`0 2px 8px rgba(0, 0, 0, 0.04)`
-- 悬停：上移 `4px` + 阴影增强
-
-**Step 3: Commit**
-
-```bash
-git add src/components/ui/card.tsx
-git commit -m "refactor: 更新 Card 组件为医疗健康风格"
-```
-
----
-
-### Task 6: 重构 Badge 组件
-
-**Files:**
-- Modify: `src/components/ui/badge.tsx`
-
-**Step 1: 更新徽章样式**
-
-使用专业蓝和印章红作为徽章颜色，移除科技感的渐变。
-
-**Step 2: Commit**
-
-```bash
-git add src/components/ui/badge.tsx
-git commit -m "refactor: 更新 Badge 组件为医疗健康风格"
-```
-
----
-
-### Task 7: 移除 ThemeToggle 组件
-
-**Files:**
-- Modify: `src/components/layout/header.tsx`
-- Delete: `src/components/ui/theme-toggle.tsx`
-- Modify: `src/contexts/theme-context.tsx`
-
-**Step 1: 从 Header 中移除 ThemeToggle**
-
-删除 `,
- VariantProps {
- asChild?: boolean
-}
-
-const Button = React.forwardRef(
- ({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : "button"
- return (
-
->(({ className, ...props }, ref) => (
-
-))
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-CardDescription.displayName = "CardDescription"
-
-const CardContent = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
-```
-
-**Step 2: 测试卡片组件**
-
-在浏览器中打开网站，检查卡片样式是否正确应用。
-
-**Step 3: 提交更改**
-
-```bash
-git add src/components/ui/card.tsx
-git commit -m "feat: 更新卡片组件样式
-
-- 更新卡片背景色为深灰
-- 添加悬停边框发光效果
-- 添加悬停上移动画
-- 更新文字颜色变量"
-```
-
----
-
-### Task 6: 更新导航栏组件
-
-**Files:**
-- Modify: `src/components/layout/header.tsx`
-
-**Step 1: 更新导航栏样式**
-
-在导航栏组件中添加新的样式类：
-
-```typescript
-// 在 header.tsx 中更新导航栏样式
-
- {/* 导航内容 */}
-
-```
-
-**Step 2: 更新导航链接样式**
-
-```typescript
-// 更新导航链接样式
-
- {link.name}
-
-
-```
-
-**Step 3: 测试导航栏**
-
-在浏览器中打开网站，检查导航栏样式是否正确应用。
-
-**Step 4: 提交更改**
-
-```bash
-git add src/components/layout/header.tsx
-git commit -m "feat: 更新导航栏样式
-
-- 更新导航栏背景为半透明深色
-- 添加模糊效果
-- 更新导航链接悬停效果
-- 添加下划线动画"
-```
-
----
-
-## Phase 3: 页面布局优化
-
-### Task 7: 更新 Hero 区域
-
-**Files:**
-- Modify: `src/components/sections/hero-section.tsx`
-
-**Step 1: 更新 Hero 区域背景**
-
-```typescript
-
- {/* 网格背景 */}
-
-
- {/* 光晕效果 */}
-
-
-
- {/* 内容 */}
-
-```
-
-**Step 2: 更新 Hero 文案样式**
-
-```typescript
-(null);
- const particlesRef = useRef([]);
- const animationRef = useRef();
-
- useEffect(() => {
- const canvas = canvasRef.current;
- if (!canvas) return;
-
- const ctx = canvas.getContext('2d');
- if (!ctx) return;
-
- const resizeCanvas = () => {
- canvas.width = window.innerWidth;
- canvas.height = window.innerHeight;
- };
-
- resizeCanvas();
- window.addEventListener('resize', resizeCanvas);
-
- // 初始化粒子
- const particleCount = 50;
- const colors = ['#00D9FF', '#A855F7', '#06B6D4'];
-
- for (let i = 0; i < particleCount; i++) {
- particlesRef.current.push({
- x: Math.random() * canvas.width,
- y: Math.random() * canvas.height,
- size: Math.random() * 3 + 1,
- speedX: (Math.random() - 0.5) * 0.5,
- speedY: (Math.random() - 0.5) * 0.5,
- color: colors[Math.floor(Math.random() * colors.length)],
- });
- }
-
- const animate = () => {
- ctx.clearRect(0, 0, canvas.width, canvas.height);
-
- particlesRef.current.forEach((particle) => {
- particle.x += particle.speedX;
- particle.y += particle.speedY;
-
- if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1;
- if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1;
-
- ctx.beginPath();
- ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
- ctx.fillStyle = particle.color;
- ctx.fill();
- });
-
- animationRef.current = requestAnimationFrame(animate);
- };
-
- animate();
-
- return () => {
- window.removeEventListener('resize', resizeCanvas);
- if (animationRef.current) {
- cancelAnimationFrame(animationRef.current);
- }
- };
- }, []);
-
- return (
-
- );
-}
-```
-
-**Step 2: 在 Hero 区域中使用粒子效果**
-
-```typescript
-import { Particles } from '@/components/effects/particles';
-
-export function HeroSection() {
- return (
-
-
- );
-}
-```
-
-**Step 3: 测试粒子效果**
-
-在浏览器中打开网站，检查粒子效果是否正常运行。
-
-**Step 4: 提交更改**
-
-```bash
-git add src/components/effects/particles.tsx src/components/sections/hero-section.tsx
-git commit -m "feat: 添加粒子效果组件
-
-- 创建 Canvas 粒子动画
-- 使用科技蓝、紫色、青色粒子
-- 添加粒子漂浮动画
-- 在 Hero 区域中集成"
-```
-
----
-
-### Task 9: 创建数字计数动画组件
-
-**Files:**
-- Create: `src/components/effects/count-up.tsx`
-
-**Step 1: 创建数字计数动画组件**
-
-```typescript
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import { useInView } from 'framer-motion';
-
-interface CountUpProps {
- end: number;
- duration?: number;
- prefix?: string;
- suffix?: string;
- className?: string;
-}
-
-export function CountUp({ end, duration = 2000, prefix = '', suffix = '', className }: CountUpProps) {
- const ref = useRef(null);
- const isInView = useInView(ref, { once: true });
- const [count, setCount] = useState(0);
-
- useEffect(() => {
- if (!isInView) return;
-
- let startTime: number;
- let animationFrame: number;
-
- const animate = (currentTime: number) => {
- if (!startTime) startTime = currentTime;
- const progress = Math.min((currentTime - startTime) / duration, 1);
-
- setCount(Math.floor(progress * end));
-
- if (progress < 1) {
- animationFrame = requestAnimationFrame(animate);
- }
- };
-
- animationFrame = requestAnimationFrame(animate);
-
- return () => {
- if (animationFrame) {
- cancelAnimationFrame(animationFrame);
- }
- };
- }, [isInView, end, duration]);
-
- return (
-
- {prefix}{count.toLocaleString()}{suffix}
-
- );
-}
-```
-
-**Step 2: 在数据卡片中使用计数动画**
-
-```typescript
-import { CountUp } from '@/components/effects/count-up';
-
-export function DataCard() {
- return (
- (threshold = 0.1) {
- const ref = useRef(null);
- const [isVisible, setIsVisible] = useState(false);
-
- useEffect(() => {
- const element = ref.current;
- if (!element) return;
-
- const observer = new IntersectionObserver(
- ([entry]) => {
- if (entry.isIntersecting) {
- setIsVisible(true);
- observer.unobserve(element);
- }
- },
- { threshold }
- );
-
- observer.observe(element);
-
- return () => {
- observer.unobserve(element);
- };
- }, [threshold]);
-
- return { ref, isVisible };
-}
-```
-
-**Step 2: 创建滚动揭示组件**
-
-```typescript
-'use client';
-
-import { motion } from 'framer-motion';
-import { useScrollReveal } from '@/hooks/use-scroll-reveal';
-
-interface ScrollRevealProps {
- children: React.ReactNode;
- className?: string;
- delay?: number;
-}
-
-export function ScrollReveal({ children, className, delay = 0 }: ScrollRevealProps) {
- const { ref, isVisible } = useScrollReveal();
-
- return (
-
- {children}
-
- );
-}
-```
-
-**Step 3: 在页面中使用滚动揭示**
-
-```typescript
-import { ScrollReveal } from '@/components/effects/scroll-reveal';
-
-export function ProductsSection() {
- return (
-
-
-
-
- );
-}
-```
-
-**Step 4: 提交更改**
-
-```bash
-git add src/hooks/use-scroll-reveal.ts src/components/effects/scroll-reveal.tsx
-git commit -m "feat: 添加滚动揭示动效
-
-- 创建 useScrollReveal Hook
-- 创建 ScrollReveal 组件
-- 支持延迟动画
-- 使用 Intersection Observer"
-```
-
----
-
-### Task 11: 创建光晕脉动组件
-
-**Files:**
-- Create: `src/components/effects/glow-pulse.tsx`
-
-**Step 1: 创建光晕脉动组件**
-
-```typescript
-'use client';
-
-import { motion } from 'framer-motion';
-
-interface GlowPulseProps {
- color: 'blue' | 'purple';
- size?: number;
- className?: string;
-}
-
-export function GlowPulse({ color, size = 400, className }: GlowPulseProps) {
- const colorValue = color === 'blue' ? '0, 217, 255' : '168, 85, 247';
-
- return (
-
-
- );
-}
-```
-
-**Step 3: 提交更改**
-
-```bash
-git add src/components/effects/glow-pulse.tsx
-git commit -m "feat: 添加光晕脉动组件
-
-- 创建 GlowPulse 组件
-- 支持蓝色和紫色光晕
-- 添加脉动动画
-- 可自定义大小"
-```
-
----
-
-## Phase 5: 响应式适配
-
-### Task 12: 优化移动端导航
-
-**Files:**
-- Modify: `src/components/layout/mobile-menu.tsx`
-
-**Step 1: 更新移动端菜单样式**
-
-```typescript
-import { motion } from 'framer-motion';
-
-export function MobileMenu() {
- return (
-
-
- );
-}
-```
-
-**Step 2: 测试移动端导航**
-
-在移动设备或浏览器开发者工具中测试移动端导航。
-
-**Step 3: 提交更改**
-
-```bash
-git add src/components/layout/mobile-menu.tsx
-git commit -m "feat: 优化移动端导航
-
-- 更新移动端菜单背景色
-- 添加滑入动画
-- 优化菜单项样式
-- 改善触摸体验"
-```
-
----
-
-### Task 13: 优化响应式布局
-
-**Files:**
-- Modify: `src/app/(marketing)/page.tsx`
-
-**Step 1: 更新首页响应式布局**
-
-```typescript
-export default function HomePage() {
- return (
-
- {/* Hero */}
-
-
-
- {/* 产品矩阵 */}
-
-
-
- );
-}
-```
-
-**Step 2: 测试响应式布局**
-
-在不同设备尺寸下测试页面布局。
-
-**Step 3: 提交更改**
-
-```bash
-git add src/app/\(marketing\)/page.tsx
-git commit -m "feat: 优化响应式布局
-
-- 更新 Section 间距
-- 优化网格布局断点
-- 改善移动端体验
-- 统一内边距规范"
-```
-
----
-
-## Phase 6: 性能优化与测试
-
-### Task 14: 添加性能监控
-
-**Files:**
-- Create: `src/components/analytics/performance-monitor.tsx`
-
-**Step 1: 创建性能监控组件**
-
-```typescript
-'use client';
-
-import { useEffect } from 'react';
-
-export function PerformanceMonitor() {
- useEffect(() => {
- if (typeof window === 'undefined') return;
-
- // 监控 Web Vitals
- const observer = new PerformanceObserver((list) => {
- list.getEntries().forEach((entry) => {
- console.log('[Performance]', entry.name, entry.duration);
- });
- });
-
- observer.observe({ entryTypes: ['measure', 'navigation'] });
-
- return () => observer.disconnect();
- }, []);
-
- return null;
-}
-```
-
-**Step 2: 在布局中添加性能监控**
-
-```typescript
-import { PerformanceMonitor } from '@/components/analytics/performance-monitor';
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
- return (
-
-
-
- {COMPANY_INFO.shortName}
-
-```
-
-**Step 2: 更新描述文字**
-
-```tsx
-
-
-```
-
-**Step 2: 更新 StatItem 样式**
-
-```tsx
-function StatItem({ stat, index, shouldAnimate }: {
- stat: { value: string; label: string };
- index: number;
- shouldAnimate: boolean;
-}) {
- return (
-
-
- );
-}
-```
-
-**Step 3: 验证**
-
-Run: `npm run build`
-
-Expected: 构建成功
-
----
-
-## 阶段三：服务卡片升级
-
-### Task 7: 优化 GlassCard 组件
-
-**Files:**
-- Modify: `src/components/ui/glass-card.tsx`
-
-**Step 1: 更新 GlassCard 变体**
-
-```tsx
-const glassCardVariants = cva(
- "rounded-2xl border backdrop-blur-xl transition-all duration-300",
- {
- variants: {
- variant: {
- default:
- "border-gray-800/50 bg-gray-900/50 hover:border-purple-500/50 hover:bg-gray-800/60 hover:shadow-[0_0_40px_rgba(139,92,246,0.15)] hover:-translate-y-1",
- elevated:
- "border-gray-800 bg-gray-900/80 shadow-2xl hover:border-purple-500/50 hover:shadow-purple-500/20 hover:-translate-y-2",
- outline:
- "border-gray-800/50 bg-transparent hover:border-purple-500/30 hover:bg-gray-900/30",
- glow:
- "border-gray-800/50 bg-gray-900/40 relative overflow-hidden hover:border-purple-500/40",
- },
- },
- defaultVariants: {
- variant: "default",
- },
- }
-)
-```
-
-**Step 2: 验证**
-
-Run: `npm run build`
-
-Expected: 构建成功
-
----
-
-### Task 8: 重构 ServicesSection
-
-**Files:**
-- Modify: `src/components/sections/services-section.tsx`
-
-**Step 1: 更新区域背景和标题**
-
-```tsx
-
- {/* 背景装饰 */}
-
-
-
-
- {/* Hero 内容 */}
-
-
-
- )}
-
- {NAVIGATION.map((item) => (
- setIsMobileMenuOpen(false)}
- >
- {item.label}
-
- ))}
-
-
-
-
-
-
-
- {children}
-
- );
-}
-
-interface GradientOrbProps {
- position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
- color?: string;
- className?: string;
-}
-
-const positionMap = {
- "top-left": "top-0 left-0",
- "top-right": "top-0 right-0",
- "bottom-left": "bottom-0 left-0",
- "bottom-right": "bottom-0 right-0",
-};
-
-export function GradientOrb({
- position = "top-right",
- color = "#00D9FF",
- className,
-}: GradientOrbProps) {
- return (
-
- );
-}
-```
-
-**Step 2: 验证类型检查**
-
-Run: `npx tsc --noEmit`
-
-Expected: 无类型错误
-
-**Step 3: 提交发光效果组件**
-
-Run:
-```bash
-git add src/components/effects/glow-effect.tsx
-git commit -m "feat: create glow effect and gradient orb components"
-```
-
-Expected: 提交成功
-
----
-
-## 阶段五：首页重构
-
-### Task 14: 重构 Hero Section
-
-**Files:**
-- Modify: `src/components/sections/hero-section.tsx`
-
-**Step 1: 读取现有 Hero Section**
-
-Read: `src/components/sections/hero-section.tsx`
-
-**Step 2: 重写 Hero Section 以支持深色主题和动画**
-
-Modify: `src/components/sections/hero-section.tsx`
-
-```typescript
-"use client";
-
-import { motion } from "framer-motion";
-import { Button } from "@/components/ui/button";
-import { ParticleBackground } from "@/components/effects/particle-background";
-import { GradientOrb } from "@/components/effects/glow-effect";
-import { COMPANY_INFO } from "@/lib/constants";
-import { ArrowRight, Sparkles } from "lucide-react";
-
-export function HeroSection() {
- return (
-
-
-
-
-
-
-
-
-
- {COMPANY_INFO.slogan}
-
-
-
- {COMPANY_INFO.description}
-
-
-
-
-
-
-
-
- 向下滚动
-
-
-
-
-
-
- {STATS.map((stat, index) => (
-
-
- ))}
-
-
- {stat.value}
-
-
- {stat.label}
-
-
-
-
-
-
- - 产品服务 -
-- 为企业提供全方位的数字化解决方案，助力业务增长 -
-
- {PRODUCTS.slice(0, 6).map((product, index) => (
-
-
-
- {product.title}
-
-
-
- {product.description}
-
-
-
-
- ))}
-
-
- {product.category}
-
-
- {product.features.slice(0, 3).map((feature) => (
-
- {feature}
-
- ))}
-
-
- 了解更多
-
- {/* Hero 内容 */}
-
-- 睿新致遠，智创未来 -
-- 以科技创新驱动企业数字化转型，打造智慧未来 -
-``` - -**Step 3: 测试 Hero 区域** - -在浏览器中打开网站，检查 Hero 区域样式是否正确应用。 - -**Step 4: 提交更改** - -```bash -git add src/components/sections/hero-section.tsx -git commit -m "feat: 更新 Hero 区域设计 - -- 添加网格背景 -- 添加科技蓝和紫色光晕效果 -- 更新文案样式 -- 优化布局结构" -``` - ---- - -### Task 8: 创建粒子效果组件 - -**Files:** -- Create: `src/components/effects/particles.tsx` - -**Step 1: 创建粒子效果组件** - -```typescript -'use client'; - -import { useEffect, useRef } from 'react'; -import { motion } from 'framer-motion'; - -interface Particle { - x: number; - y: number; - size: number; - speedX: number; - speedY: number; - color: string; -} - -export function Particles() { - const canvasRef = useRef
-
- );
-}
-```
-
-**Step 3: 测试计数动画**
-
-在浏览器中打开网站，检查计数动画是否正常运行。
-
-**Step 4: 提交更改**
-
-```bash
-git add src/components/effects/count-up.tsx
-git commit -m "feat: 添加数字计数动画组件
-
-- 创建 CountUp 组件
-- 支持前缀、后缀
-- 支持自定义持续时间
-- 使用 Intersection Observer 触发"
-```
-
----
-
-## Phase 4: 动效与交互
-
-### Task 10: 创建滚动揭示 Hook
-
-**Files:**
-- Create: `src/hooks/use-scroll-reveal.ts`
-
-**Step 1: 创建滚动揭示 Hook**
-
-```typescript
-import { useEffect, useRef, useState } from 'react';
-
-export function useScrollReveal服务客户
-产品矩阵
-
- {products.map((product, index) => (
-
-
- ))}
-
-
- {/* 菜单项 */}
-
-
-
- {/* 内容 */}
-
-
-
-
- {/* 产品卡片 */}
-
-
- {/* 主渐变背景 */}
-
-
- {/* 动态光效 - 类似 Stripe */}
-
-
-
- {/* 网格背景 - Stripe 风格 */}
-
-
-```
-
-**Step 3: 验证视觉效果**
-
-Run: `npm run dev`
-
-Expected: 深色背景正常显示
-
----
-
-### Task 4: 优化 Hero 标题和文字样式
-
-**Files:**
-- Modify: `src/components/sections/hero-section.tsx:75-95`
-
-**Step 1: 更新标题样式为渐变文字**
-
-```tsx
-
- {COMPANY_INFO.shortName}
-
- 企业数字化转型服务商
-
-```
-
-**Step 2: 更新描述文字**
-
-```tsx
-- 融合 Stripe 级专业品质 + 现代科技美学，为您打造卓越的数字体验 -
-``` - -**Step 3: 验证** - -Run: `npm run build` - -Expected: 构建成功 - ---- - -### Task 5: 升级 CTA 按钮为渐变风格 - -**Files:** -- Modify: `src/components/sections/hero-section.tsx:97-112` - -**Step 1: 更新主按钮样式** - -```tsx - -``` - -**Step 2: 更新次按钮样式** - -```tsx - -``` - -**Step 3: 验证** - -Run: `npm run build` - -Expected: 构建成功 - ---- - -### Task 6: 优化统计数字展示区 - -**Files:** -- Modify: `src/components/sections/hero-section.tsx:140-180` - -**Step 1: 更新统计区背景和样式** - -```tsx -
- {STATS.map((stat, index) => (
-
-
- {shouldAnimate ? (
-
-
- {stat.label}
-
-
- {/* 标题区域 */}
-
-
-```
-
-**Step 2: 更新文字颜色**
-
-```tsx
-
-
-```
-
-**Step 2: 更新表单样式**
-
-```tsx
-
-```
-
-**Step 2: 更新导航链接颜色**
-
-```tsx
-
-```
-
-**Step 3: 验证**
-
-Run: `npm run build`
-
-Expected: 构建成功
-
----
-
-### Task 13: 优化 Footer 组件
-
-**Files:**
-- Modify: `src/components/layout/footer.tsx`
-
-**Step 1: 更新 Footer 背景**
-
-```tsx
- ` tag:
-```typescript
-> = {
- Code: () => (
-
- ),
- Cloud: () => (
-
- ),
- BarChart3: () => (
-
- ),
- Shield: () => (
-
- ),
-};
-
-const challenges = {
- software: [
- { title: '需求不明确', description: '业务部门提不出清晰需求，开发团队反复返工' },
- { title: '技术选型困难', description: '技术栈更新快，不知道该选什么技术方案' },
- { title: '项目延期', description: '开发进度难以把控，上线时间一拖再拖' },
- { title: '维护成本高', description: '系统上线后问题不断，运维压力巨大' },
- ],
- cloud: [
- { title: '资源浪费', description: '服务器资源利用率低，成本居高不下' },
- { title: '扩展困难', description: '业务增长时系统无法快速扩容' },
- { title: '迁移风险', description: '担心数据丢失、业务中断' },
- { title: '安全顾虑', description: '不确定云端数据是否安全' },
- ],
- data: [
- { title: '数据孤岛', description: '各系统数据分散，无法整合分析' },
- { title: '决策盲区', description: '缺乏数据支撑，决策凭感觉' },
- { title: '报表滞后', description: '手工制作报表，时效性差' },
- { title: '价值难挖', description: '数据很多，但不知道怎么用' },
- ],
- security: [
- { title: '安全漏洞', description: '系统存在未知漏洞，随时可能被攻击' },
- { title: '合规压力', description: '监管要求越来越严，不知如何应对' },
- { title: '内部威胁', description: '员工操作不规范，数据泄露风险' },
- { title: '应急能力弱', description: '安全事件发生后不知所措' },
- ],
-};
-
-const outcomes = {
- software: [
- { value: '30%', label: '开发效率提升' },
- { value: '50%', label: '返工率降低' },
- { value: '100%', label: '按时交付率' },
- ],
- cloud: [
- { value: '40%', label: '成本降低' },
- { value: '99.9%', label: '可用性保障' },
- { value: '10x', label: '弹性扩展能力' },
- ],
- data: [
- { value: '70%', label: '决策效率提升' },
- { value: '实时', label: '数据更新' },
- { value: '100+', label: '可视化报表' },
- ],
- security: [
- { value: '99%', label: '漏洞修复率' },
- { value: '100%', label: '合规达标' },
- { value: '24/7', label: '安全监控' },
- ],
-};
-
-export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
- const [isVisible, setIsVisible] = useState(false);
- const contentRef = useRef(null);
-
- useEffect(() => {
- const observer = new IntersectionObserver(
- ([entry]) => {
- if (entry?.isIntersecting) {
- setIsVisible(true);
- }
- },
- { threshold: 0.1 }
- );
-
- if (contentRef.current) {
- observer.observe(contentRef.current);
- }
-
- return () => observer.disconnect();
- }, []);
-
- const serviceChallenges = challenges[service.id as keyof typeof challenges] || [];
- const serviceOutcomes = outcomes[service.id as keyof typeof outcomes] || [];
- const relatedCases = CASES.slice(0, 2);
-
- const Icon = iconMap[service.icon];
-
- return (
-
-
- );
-}
-```
-
-**Step 2: 创建服务详情页面入口**
-
-```tsx
-// src/app/(marketing)/services/[id]/page.tsx
-import { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-import { SERVICES } from '@/lib/constants';
-import { ServiceDetailClient } from './client';
-
-export async function generateStaticParams() {
- return SERVICES.map((service) => ({
- id: service.id,
- }));
-}
-
-export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise {
- const { id } = await params;
- const service = SERVICES.find((s) => s.id === id);
-
- if (!service) {
- return {
- title: '服务未找到',
- };
- }
-
- return {
- title: `${service.title} - 睿新致远`,
- description: service.description,
- };
-}
-
-export default async function ServiceDetailPage({ params }: { params: Promise<{ id: string }> }) {
- const { id } = await params;
- const service = SERVICES.find((s) => s.id === id);
-
- if (!service) {
- notFound();
- }
-
- return > = {
- Code,
- Cloud,
- BarChart3,
- Shield,
-};
-
-export default function ServicesPage() {
- const contentRef = useRef(null);
- const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
-
- return (
- > = {
- Code,
- Cloud,
- BarChart3,
- Shield,
-};
-
-export function ServicesSection() {
- const ref = useRef(null);
- const isInView = useInView(ref, { once: true, margin: '-100px' });
-
- return (
-
-
-
-
-
- );
-}
-```
-
-**Step 2: 验证修改**
-
-Run: `npm run lint`
-
-Expected: 无 lint 错误
-
-**Step 3: Commit**
-
-```bash
-git add src/components/sections/services-section.tsx
-git commit -m "refactor: remove modal, add link navigation for services"
-```
-
----
-
-### Task 1.4: 删除服务详情模态框组件
-
-**Files:**
-- Delete: `src/components/services/service-detail-modal.tsx`
-
-**Step 1: 删除模态框组件文件**
-
-Run: `rm src/components/services/service-detail-modal.tsx`
-
-**Step 2: 验证删除成功**
-
-Run: `ls src/components/services/`
-
-Expected: 目录为空或不存在
-
-**Step 3: 如果目录为空，删除目录**
-
-Run: `rmdir src/components/services/ 2>/dev/null || true`
-
-**Step 4: Commit**
-
-```bash
-git add -A
-git commit -m "refactor: remove service detail modal component"
-```
-
----
-
-## 阶段 2: 首页结构优化
-
-### Task 2.1: 精简首页 About Section
-
-**Files:**
-- Modify: `src/components/sections/about-section.tsx`
-
-**Step 1: 精简 About Section 内容**
-
-Read: `src/components/sections/about-section.tsx`
-
-Replace entire file with:
-
-```tsx
-'use client';
-
-import { motion } from 'framer-motion';
-import { useInView } from 'framer-motion';
-import { useRef } from 'react';
-import Link from 'next/link';
-import { Card, CardContent } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { COMPANY_INFO, STATS } from '@/lib/constants';
-import { ArrowRight } from 'lucide-react';
-
-export function AboutSection() {
- const ref = useRef(null);
- const isInView = useInView(ref, { once: true, margin: '-100px' });
-
- return (
-
-
-
- );
-}
-```
-
-**Step 2: 验证修改**
-
-Run: `npm run lint`
-
-Expected: 无 lint 错误
-
-**Step 3: Commit**
-
-```bash
-git add src/components/sections/about-section.tsx
-git commit -m "refactor: simplify about section on homepage"
-```
-
----
-
-### Task 2.2: 创建首页 Cases Section
-
-**Files:**
-- Create: `src/components/sections/cases-section.tsx`
-
-**Step 1: 创建 Cases Section 组件**
-
-```tsx
-// src/components/sections/cases-section.tsx
-'use client';
-
-import { motion } from 'framer-motion';
-import { useInView } from 'framer-motion';
-import { useRef } from 'react';
-import Link from 'next/link';
-import { Card, CardContent } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { CASES } from '@/lib/constants';
-import { ArrowRight, Building2, TrendingUp } from 'lucide-react';
-
-export function CasesSection() {
- const ref = useRef(null);
- const isInView = useInView(ref, { once: true, margin: '-100px' });
-
- const featuredCases = CASES.slice(0, 3);
-
- return (
-
-
-
-
-
- );
-}
-```
-
-**Step 2: 验证文件创建成功**
-
-Run: `ls -la src/components/sections/cases-section.tsx`
-
-Expected: 文件已创建
-
-**Step 3: Commit**
-
-```bash
-git add src/components/sections/cases-section.tsx
-git commit -m "feat: add cases section to homepage"
-```
-
----
-
-### Task 2.3: 更新首页 Section 顺序
-
-**Files:**
-- Modify: `src/app/(marketing)/page.tsx`
-
-**Step 1: 更新首页导入和 Section 顺序**
-
-Read: `src/app/(marketing)/page.tsx`
-
-Replace entire file with:
-
-```tsx
-"use client";
-
-import dynamic from 'next/dynamic';
-import { Header } from "@/components/layout/header";
-import { Footer } from "@/components/layout/footer";
-import { HeroSection } from "@/components/sections/hero-section";
-import { SectionSkeleton } from "@/components/ui/loading-skeleton";
-
-const ServicesSection = dynamic(
- () => import('@/components/sections/services-section').then(mod => ({ default: mod.ServicesSection })),
- {
- loading: () =>
-
- );
-}
-```
-
-**Step 2: 验证修改**
-
-Run: `npm run lint`
-
-Expected: 无 lint 错误
-
-**Step 3: Commit**
-
-```bash
-git add src/app/\(marketing\)/page.tsx
-git commit -m "refactor: update homepage section order with cases section"
-```
-
----
-
-## 阶段 3: 导航与链接统一
-
-### Task 3.1: 更新导航链接
-
-**Files:**
-- Modify: `src/lib/constants.ts`
-- Modify: `src/components/layout/header.tsx`
-
-**Step 1: 更新导航配置**
-
-Read: `src/lib/constants.ts`
-
-Find the `NAVIGATION` constant and replace with:
-
-```typescript
-// Navigation Items - 独立页面导航
-export const NAVIGATION = [
- { id: 'home', label: '首页', href: '/' },
- { id: 'services', label: '核心业务', href: '/services' },
- { id: 'products', label: '产品服务', href: '/products' },
- { id: 'about', label: '关于我们', href: '/about' },
- { id: 'news', label: '新闻动态', href: '/news' },
- { id: 'contact', label: '联系我们', href: '/contact' },
-] as const;
-```
-
-**Step 2: 更新 Header 组件**
-
-Read: `src/components/layout/header.tsx`
-
-Replace the navigation handling logic to use Link instead of anchor scroll:
-
-```tsx
-'use client';
-
-import { useState, useEffect, useCallback, useRef } from 'react';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { Menu, X } from 'lucide-react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Button } from '@/components/ui/button';
-import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
-import { useFocusTrap } from '@/hooks/use-focus-trap';
-
-export function Header() {
- const [isOpen, setIsOpen] = useState(false);
- const [isScrolled, setIsScrolled] = useState(false);
- const pathname = usePathname();
- const focusTrapRef = useFocusTrap(isOpen);
-
- useEffect(() => {
- const handleScroll = () => {
- setIsScrolled(window.scrollY > 20);
- };
-
- window.addEventListener('scroll', handleScroll, { passive: true });
- handleScroll();
-
- return () => {
- window.removeEventListener('scroll', handleScroll);
- };
- }, []);
-
- const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
- if (e.key === 'Enter' || e.key === ' ') {
- e.preventDefault();
- setIsOpen(!isOpen);
- }
- if (e.key === 'Escape' && isOpen) {
- setIsOpen(false);
- }
- }, [isOpen]);
-
- return (
- <>
-
-
-
-
- {isOpen && (
-
-
-
-```
-
-**Step 2: 更新服务卡片布局**
-
-```tsx
-- 我们的 核心服务 -
-- 专业技术团队，为您提供全方位的数字化解决方案 -
-
- {SERVICES.map((service, index) => (
-
-
- {/* 卡片内容 */}
-
-
- ))}
-
-```
-
-**Step 3: 验证**
-
-Run: `npm run build`
-
-Expected: 构建成功
-
----
-
-## 阶段四：关于我们与产品区域
-
-### Task 9: 优化 AboutSection
-
-**Files:**
-- Modify: `src/components/sections/about-section.tsx`
-
-**Step 1: 更新背景为深色**
-
-```tsx
-
-
- {service.title}
-{service.description}
-- 关于 {COMPANY_INFO.shortName} -
-- {COMPANY_INFO.description} -
-``` - -**Step 3: 验证** - -Run: `npm run build` - -Expected: 构建成功 - ---- - -### Task 10: 优化 ProductsSection - -**Files:** -- Modify: `src/components/sections/products-section.tsx` - -**Step 1: 更新产品卡片样式** - -```tsx -
- {PRODUCTS.map((product, index) => (
-
-
- {/* 产品内容 */}
-
-
- ))}
-
-```
-
-**Step 2: 验证**
-
-Run: `npm run build`
-
-Expected: 构建成功
-
----
-
-## 阶段五：联系区域与 Footer
-
-### Task 11: 优化 ContactSection
-
-**Files:**
-- Modify: `src/components/sections/contact-section.tsx`
-
-**Step 1: 更新背景和样式**
-
-```tsx
-
-
-
-
-
-
-
-
-
-
-
-
-
- {Icon &&
-
-
- 核心业务
-
-
- - {service.title} -
-- {service.description} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - 您可能面临的挑战 -
-
- {serviceChallenges.map((challenge, index) => (
-
-
-
- ))}
- {challenge.title}
-{challenge.description}
-
-
-
-
- - 我们如何帮助您 -
-- {service.overview} -
-
- {service.features.map((feature, index) => (
-
-
-
- ))}
-
-
-
-
- - 服务流程 -
-
- {service.process.map((step, index) => (
-
-
-
- ))}
-
- {index + 1}
-
-
-
- {step}
-
-
-
-
- - 您将获得的改变 -
-
- {serviceOutcomes.map((outcome, index) => (
-
-
-
- ))}
-
- {outcome.value}
-
- {outcome.label}
-
-
- - {service.benefits.map(b => b).join('；')} -
-
-
-
-
- - 相关案例 -
-
- {relatedCases.map((caseItem) => (
-
-
- {caseItem.industry}
-
-
- - {caseItem.title} -
-- {caseItem.description} -
- - ))} -
-
-
-
-
-
-
-
- );
-}
-```
-
-**Step 2: 验证文件创建成功**
-
-Run: `ls -la src/app/\(marketing\)/services/page.tsx`
-
-Expected: 文件已创建
-
-**Step 3: Commit**
-
-```bash
-git add src/app/\(marketing\)/services/page.tsx
-git commit -m "feat: add services list page"
-```
-
----
-
-### Task 1.3: 修改服务卡片组件添加链接
-
-**Files:**
-- Modify: `src/components/sections/services-section.tsx`
-
-**Step 1: 移除模态框相关代码，添加链接**
-
-Read: `src/components/sections/services-section.tsx`
-
-Replace entire file with:
-
-```tsx
-'use client';
-
-import { motion } from 'framer-motion';
-import { useInView } from 'framer-motion';
-import { useRef } from 'react';
-import Link from 'next/link';
-import { Code, Cloud, BarChart3, Shield, ArrowRight } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { SERVICES } from '@/lib/constants';
-
-const iconMap: Record
-
-
-
-
-
- {SERVICES.map((service, index) => {
- const Icon = iconMap[service.icon];
- return (
-
-
-
- );
- })}
-
-
-
-
-
-
-
-
- {Icon &&
-
-
- - {service.title} -
-- {service.description} -
-
-
-
- {service.features.slice(0, 3).map((feature, idx) => (
-
- {feature.split('：')[0]}
-
- ))}
-
-
- 了解详情
-
-
-
- - 准备开始您的数字化转型之旅？ -
-- 让我们与您同行，共创美好未来 -
- -
-
-
-
-
-
-
-
- - 我们的 核心业务 -
-- 专业技术团队，为您提供全方位的数字化解决方案 -
-
- {SERVICES.map((service, index) => {
- const Icon = iconMap[service.icon];
- return (
-
-
-
-
-
-
-
-
- );
- })}
-
-
-
- {Icon &&
- {service.title}
-{service.description}
-
- 了解详情
-
-
-
-
- {STATS.map((stat, idx) => (
-
-
-
-
- ))}
-
-
-
-
-
-
-
-
-
-
- - 关于 {COMPANY_INFO.shortName} -
-- {COMPANY_INFO.slogan} -
-
-
-
- - "企业需要的，不是一个高高在上的'专家'，也不是一个做完就跑的'卖家'，而是一个能坐下来、一起想办法的同行者。" -
-- 我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。 -
-{stat.value}
- {stat.label}
-
-
-
-
-
-
-
-
- - 与谁同行，决定能走多远 -
-- 我们与优秀的企业同行，共同成长，共创未来 -
-
- {featuredCases.map((caseItem, index) => (
-
-
-
-
-
-
-
-
- ))}
-
-
-
-
-
-
- {caseItem.industry}
-
-
-
-
- - {caseItem.title} -
-- {caseItem.description} -
- {caseItem.results.length > 0 && ( -
-
- )}
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- setIsOpen(false)}
- aria-hidden="true"
- />
-
-
-
-
- )}
-
-
- );
-}
-```
-
-**Step 3: 验证修改**
-
-Run: `npm run lint`
-
-Expected: 无 lint 错误
-
-**Step 4: Commit**
-
-```bash
-git add src/lib/constants.ts src/components/layout/header.tsx
-git commit -m "refactor: update navigation to use independent page links"
-```
-
----
-
-### Task 3.2: 创建产品列表页面
-
-**Files:**
-- Create: `src/app/(marketing)/products/page.tsx`
-
-**Step 1: 创建产品列表页面**
-
-```tsx
-// src/app/(marketing)/products/page.tsx
-'use client';
-
-import Link from 'next/link';
-import { motion } from 'framer-motion';
-import { useInView } from 'framer-motion';
-import { useRef } from 'react';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
-import { PageHeader } from '@/components/ui/page-header';
-import { ArrowRight, Check, TrendingUp } from 'lucide-react';
-import { PRODUCTS } from '@/lib/constants';
-
-export default function ProductsPage() {
- const contentRef = useRef(null);
- const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
-
- return (
-
-
-
-
- );
-}
-```
-
-**Step 2: 验证文件创建成功**
-
-Run: `ls -la src/app/\(marketing\)/products/page.tsx`
-
-Expected: 文件已创建
-
-**Step 3: Commit**
-
-```bash
-git add src/app/\(marketing\)/products/page.tsx
-git commit -m "feat: add products list page"
-```
-
----
-
-### Task 3.3: 更新 Footer 链接
-
-**Files:**
-- Modify: `src/components/layout/footer.tsx`
-
-**Step 1: 更新 Footer 导航链接**
-
-Read: `src/components/layout/footer.tsx`
-
-Replace the navigation links section with:
-
-```tsx
-
-
-
-
-
-
- {PRODUCTS.map((product, index) => (
-
-
-
-
-
- {product.category}
-
- {product.title}
-
-
-
- {product.description}
-
-
-
-
-
-
- ))}
-
-
-
-
- 核心功能
-
- {product.features.slice(0, 4).map((feature, idx) => (
-
-
-
-
-
-
-
-
-
- {product.benefits.map((benefit, idx) => (
-
- - • - {benefit} - - ))} -
-
- - 需要定制化解决方案？ -
-- 我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务 -
- -
-
-```
-
-**Step 2: 验证修改**
-
-Run: `npm run lint`
-
-Expected: 无 lint 错误
-
-**Step 3: Commit**
-
-```bash
-git add src/components/layout/footer.tsx
-git commit -m "refactor: update footer navigation links"
-```
-
----
-
-## 阶段 4: 配色方案统一
-
-### Task 4.1: 更新案例详情页配色
-
-**Files:**
-- Modify: `src/app/(marketing)/cases/[id]/client.tsx`
-
-**Step 1: 将紫色替换为品牌红**
-
-Read: `src/app/(marketing)/cases/[id]/client.tsx`
-
-Replace all occurrences of:
-- `#4F46E5` → `#C41E3A`
-- `rgba(79,70,229,` → `rgba(196,30,58,`
-
-Key replacements:
-```tsx
-// Before
-快速链接
--
- {NAVIGATION.map((item) => (
-
- - - {item.label} - - - ))} -
-
-// After
-
-```
-
-**Step 2: 验证修改**
-
-Run: `npm run lint`
-
-Expected: 无 lint 错误
-
-**Step 3: Commit**
-
-```bash
-git add src/app/\(marketing\)/cases/\[id\]/client.tsx
-git commit -m "style: unify color scheme to brand red in case detail page"
-```
-
----
-
-### Task 4.2: 更新 Solutions 页面配色
-
-**Files:**
-- Modify: `src/app/(marketing)/solutions/page.tsx`
-
-**Step 1: 将紫色替换为品牌红**
-
-Read: `src/app/(marketing)/solutions/page.tsx`
-
-Replace all occurrences of:
-- `#4F46E5` → `#C41E3A`
-- `rgba(79,70,229,` → `rgba(196,30,58,`
-
-**Step 2: 验证修改**
-
-Run: `npm run lint`
-
-Expected: 无 lint 错误
-
-**Step 3: Commit**
-
-```bash
-git add src/app/\(marketing\)/solutions/page.tsx
-git commit -m "style: unify color scheme to brand red in solutions page"
-```
-
----
-
-### Task 4.3: 更新 Products Section 配色
-
-**Files:**
-- Modify: `src/components/sections/products-section.tsx`
-
-**Step 1: 将紫色替换为品牌红**
-
-Read: `src/components/sections/products-section.tsx`
-
-Replace all occurrences of:
-- `#4F46E5` → `#C41E3A`
-- `rgba(79,70,229,` → `rgba(196,30,58,`
-
-**Step 2: 验证修改**
-
-Run: `npm run lint`
-
-Expected: 无 lint 错误
-
-**Step 3: Commit**
-
-```bash
-git add src/components/sections/products-section.tsx
-git commit -m "style: unify color scheme to brand red in products section"
-```
-
----
-
-## 阶段 5: 清理与验证
-
-### Task 5.1: 删除旧的 Solutions 页面（可选）
-
-**Files:**
-- Delete: `src/app/(marketing)/solutions/` (如果与 services 重复)
-
-**Step 1: 检查是否需要删除**
-
-Run: `ls -la src/app/\(marketing\)/solutions/`
-
-如果 solutions 页面与 services 功能重复，考虑重定向或删除。
-
-**Step 2: 如果决定保留，更新导航**
-
-确保导航指向正确的页面。
-
----
-
-### Task 5.2: 运行完整测试
-
-**Step 1: 运行 lint 检查**
-
-Run: `npm run lint`
-
-Expected: 无错误
-
-**Step 2: 运行类型检查**
-
-Run: `npm run typecheck || npx tsc --noEmit`
-
-Expected: 无类型错误
-
-**Step 3: 运行构建**
-
-Run: `npm run build`
-
-Expected: 构建成功
-
-**Step 4: 本地测试**
-
-Run: `npm run dev`
-
-手动测试以下页面：
-- `/` - 首页
-- `/services` - 服务列表
-- `/services/[id]` - 服务详情
-- `/products` - 产品列表
-- `/products/[id]` - 产品详情
-- `/cases` - 案例列表
-- `/cases/[id]` - 案例详情
-- `/about` - 关于我们
-- `/news` - 新闻列表
-- `/contact` - 联系我们
-
----
-
-### Task 5.3: 最终提交
-
-**Step 1: 检查所有更改**
-
-Run: `git status`
-
-**Step 2: 提交所有更改**
-
-```bash
-git add -A
-git commit -m "refactor: complete website optimization - unified navigation, colors, and structure"
-```
-
----
-
-## 实施完成检查清单
-
-- [ ] 服务详情页创建完成
-- [ ] 服务列表页创建完成
-- [ ] 服务模态框已删除
-- [ ] 首页 About Section 已精简
-- [ ] 首页 Cases Section 已添加
-- [ ] 导航链接已统一
-- [ ] 产品列表页已创建
-- [ ] Footer 链接已更新
-- [ ] 配色方案已统一
-- [ ] Lint 检查通过
-- [ ] 类型检查通过
-- [ ] 构建成功
-- [ ] 手动测试通过
diff --git a/docs/plans/2026-02-27-e2e-driven-system-optimization.md b/docs/plans/2026-02-27-e2e-driven-system-optimization.md
deleted file mode 100644
index 00791ac..0000000
--- a/docs/plans/2026-02-27-e2e-driven-system-optimization.md
+++ /dev/null
@@ -1,885 +0,0 @@
-# E2E测试结果驱动的系统优化实施计划
-
-> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
-
-**目标:** 基于E2E测试结果，通过TDD方法系统性地修复测试失败问题，提升系统质量
-
-**架构:** 采用测试驱动开发(TDD)方法，按照优先级逐步修复问题：优先级1（关键功能）→ 优先级2（性能优化）→ 优先级3（响应式改进）
-
-**技术栈:** Next.js 15, React, TypeScript, Playwright E2E测试, Tailwind CSS
-
----
-
-## 阶段1: 优先级1 - 关键功能修复
-
-### Task 1: 完善联系表单提交功能
-
-**背景:** 回归测试显示联系表单提交功能未完全实现，导致测试失败
-
-**Files:**
-- Create: `src/app/contact/actions.ts`
-- Modify: `src/app/contact/page.tsx`
-- Test: `e2e/src/tests/regression/contact-form.regression.spec.ts`
-
-**Step 1: 编写失败的测试**
-
-```typescript
-// e2e/src/tests/regression/contact-form.regression.spec.ts
-test('应该能够提交完整的表单', async ({ contactPage }) => {
- await contactPage.fillContactForm({
- name: '测试用户',
- email: 'test@example.com',
- phone: '13800138000',
- message: '这是一条测试消息'
- });
-
- await contactPage.submitForm();
-
- await contactPage.page.waitForTimeout(2000);
-
- const successMessage = await contactPage.page.locator('text=提交成功').isVisible();
- expect(successMessage).toBeTruthy();
-});
-```
-
-**Step 2: 运行测试验证失败**
-
-Run: `cd e2e && npm run test:regression -- --grep "应该能够提交完整的表单"`
-
-Expected: FAIL - 表单提交功能未实现
-
-**Step 3: 创建表单提交Action**
-
-```typescript
-// src/app/contact/actions.ts
-'use server';
-
-export async function submitContactForm(formData: FormData) {
- const name = formData.get('name') as string;
- const email = formData.get('email') as string;
- const phone = formData.get('phone') as string;
- const message = formData.get('message') as string;
-
- if (!name || !email || !message) {
- return { success: false, error: '请填写必填字段' };
- }
-
- const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
- if (!emailRegex.test(email)) {
- return { success: false, error: '请输入有效的邮箱地址' };
- }
-
- return { success: true, message: '提交成功' };
-}
-```
-
-**Step 4: 更新联系页面集成表单提交**
-
-```typescript
-// src/app/contact/page.tsx
-'use client';
-
-import { useState } from 'react';
-import { submitContactForm } from './actions';
-
-export default function ContactPage() {
- const [formData, setFormData] = useState({
- name: '',
- email: '',
- phone: '',
- message: ''
- });
- const [submitResult, setSubmitResult] = useState<{ success: boolean; message?: string } | null>(null);
-
- const handleSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
- const formDataObj = new FormData();
- Object.entries(formData).forEach(([key, value]) => {
- formDataObj.append(key, value);
- });
-
- const result = await submitContactForm(formDataObj);
- setSubmitResult(result);
- };
-
- return (
-
- );
-}
-```
-
-**Step 5: 运行测试验证通过**
-
-Run: `cd e2e && npm run test:regression -- --grep "应该能够提交完整的表单"`
-
-Expected: PASS
-
-**Step 6: 提交**
-
-```bash
-git add src/app/contact/actions.ts src/app/contact/page.tsx
-git commit -m "feat: implement contact form submission with validation"
-```
-
----
-
-### Task 2: 优化移动端菜单交互
-
-**背景:** 回归测试显示移动端菜单交互需要完善
-
-**Files:**
-- Modify: `src/components/Header.tsx`
-- Test: `e2e/src/tests/regression/navigation.regression.spec.ts`
-
-**Step 1: 编写失败的测试**
-
-```typescript
-// e2e/src/tests/regression/navigation.regression.spec.ts
-test('应该能够打开和关闭移动端菜单', async ({ homePage }) => {
- await homePage.page.setViewportSize({ width: 375, height: 667 });
-
- await homePage.openMobileMenu();
- const isMenuOpen = await homePage.isMobileMenuOpen();
- expect(isMenuOpen).toBeTruthy();
-
- await homePage.closeMobileMenu();
- const isMenuClosed = await !(await homePage.isMobileMenuOpen());
- expect(isMenuClosed).toBeTruthy();
-});
-```
-
-**Step 2: 运行测试验证失败**
-
-Run: `cd e2e && npm run test:regression -- --grep "应该能够打开和关闭移动端菜单"`
-
-Expected: FAIL - 移动端菜单交互未实现
-
-**Step 3: 实现移动端菜单状态管理**
-
-```typescript
-// src/components/Header.tsx
-'use client';
-
-import { useState } from 'react';
-
-export default function Header() {
- const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-
- const toggleMobileMenu = () => {
- setIsMobileMenuOpen(!isMobileMenuOpen);
- };
-
- return (
-
-
-
-
-
- );
-}
-```
-
-**Step 4: 运行测试验证通过**
-
-Run: `cd e2e && npm run test:regression -- --grep "应该能够打开和关闭移动端菜单"`
-
-Expected: PASS
-
-**Step 5: 提交**
-
-```bash
-git add src/components/Header.tsx
-git commit -m "feat: implement mobile menu toggle functionality"
-```
-
----
-
-### Task 3: 修复页面滚动问题
-
-**背景:** 回归测试显示页面滚动事件处理需要优化
-
-**Files:**
-- Create: `src/hooks/useSmoothScroll.ts`
-- Modify: `src/components/Header.tsx`, `src/app/contact/page.tsx`
-- Test: `e2e/src/tests/regression/navigation.regression.spec.ts`
-
-**Step 1: 编写失败的测试**
-
-```typescript
-// e2e/src/tests/regression/navigation.regression.spec.ts
-test('应该能够平滑滚动到锚点', async ({ homePage }) => {
- await homePage.navigateTo('/');
-
- await homePage.scrollToSection('services');
- const servicesSection = homePage.page.locator('#services');
- const isVisible = await servicesSection.isVisible();
- expect(isVisible).toBeTruthy();
-});
-```
-
-**Step 2: 运行测试验证失败**
-
-Run: `cd e2e && npm run test:regression -- --grep "应该能够平滑滚动到锚点"`
-
-Expected: FAIL - 平滑滚动未实现
-
-**Step 3: 创建平滑滚动Hook**
-
-```typescript
-// src/hooks/useSmoothScroll.ts
-import { useEffect } from 'react';
-
-export function useSmoothScroll() {
- useEffect(() => {
- const handleAnchorClick = (e: MouseEvent) => {
- const target = e.target as HTMLAnchorElement;
- if (target.tagName === 'A' && target.hash) {
- e.preventDefault();
- const element = document.querySelector(target.hash);
- if (element) {
- element.scrollIntoView({ behavior: 'smooth' });
- }
- }
- };
-
- document.addEventListener('click', handleAnchorClick);
- return () => document.removeEventListener('click', handleAnchorClick);
- }, []);
-}
-```
-
-**Step 4: 集成平滑滚动到页面**
-
-```typescript
-// src/app/contact/page.tsx
-import { useSmoothScroll } from '@/hooks/useSmoothScroll';
-
-export default function ContactPage() {
- useSmoothScroll();
-
- return (
- >(
- ({ children, onClick, ...props }, ref) => {
- const handleClick = (e: React.MouseEvent) => {
- requestAnimationFrame(() => {
- onClick?.(e);
- });
- };
-
- return (
-
- );
- }
-);
-
-Button.displayName = 'Button';
-```
-
-**Step 4: 运行测试验证通过**
-
-Run: `cd e2e && npm run test:performance -- --grep "按钮点击应该在100ms内响应"`
-
-Expected: PASS
-
-**Step 5: 提交**
-
-```bash
-git add src/components/Button.tsx
-git commit -m "perf: improve button click response time with requestAnimationFrame"
-```
-
----
-
-### Task 6: 优化滚动性能
-
-**背景:** 性能测试显示滚动性能需要改善
-
-**Files:**
-- Create: `src/hooks/useThrottle.ts`
-- Modify: `src/components/Header.tsx`
-- Test: `e2e/src/tests/performance/performance.spec.ts`
-
-**Step 1: 编写失败的测试**
-
-```typescript
-// e2e/src/tests/performance/performance.spec.ts
-test('滚动帧率应该保持在60fps', async ({ page }) => {
- await page.goto('/');
-
- const frameRates: number[] = [];
-
- for (let i = 0; i < 10; i++) {
- await page.evaluate(() => {
- window.scrollBy(0, 100);
- });
- await page.waitForTimeout(100);
-
- const fps = await page.evaluate(() => {
- return (window as any).performance?.fps || 60;
- });
- frameRates.push(fps);
- }
-
- const avgFps = frameRates.reduce((a, b) => a + b, 0) / frameRates.length;
- expect(avgFps).toBeGreaterThan(55);
-});
-```
-
-**Step 2: 运行测试验证失败**
-
-Run: `cd e2e && npm run test:performance -- --grep "滚动帧率应该保持在60fps"`
-
-Expected: FAIL - 滚动帧率低于55fps
-
-**Step 3: 创建节流Hook**
-
-```typescript
-// src/hooks/useThrottle.ts
-import { useCallback, useRef } from 'react';
-
-export function useThrottle any>(
- callback: T,
- delay: number
-): T {
- const lastRan = useRef(Date.now());
-
- return useCallback(
- (...args: Parameters) => {
- if (Date.now() - lastRan.current >= delay) {
- callback(...args);
- lastRan.current = Date.now();
- }
- },
- [callback, delay]
- ) as T;
-}
-```
-
-**Step 4: 应用节流优化滚动事件**
-
-```typescript
-// src/components/Header.tsx
-import { useThrottle } from '@/hooks/useThrottle';
-
-export default function Header() {
- const handleScroll = useThrottle(() => {
- const isScrolled = window.scrollY > 50;
- // 更新滚动状态
- }, 100);
-
- useEffect(() => {
- window.addEventListener('scroll', handleScroll);
- return () => window.removeEventListener('scroll', handleScroll);
- }, [handleScroll]);
-}
-```
-
-**Step 5: 运行测试验证通过**
-
-Run: `cd e2e && npm run test:performance -- --grep "滚动帧率应该保持在60fps"`
-
-Expected: PASS
-
-**Step 6: 提交**
-
-```bash
-git add src/hooks/useThrottle.ts src/components/Header.tsx
-git commit -m "perf: optimize scroll performance with throttle"
-```
-
----
-
-## 阶段3: 优先级3 - 响应式改进
-
-### Task 7: 完善移动端布局
-
-**背景:** 响应式测试显示移动端布局需要完善
-
-**Files:**
-- Modify: `src/app/contact/page.tsx`, `src/components/Header.tsx`
-- Test: `e2e/src/tests/responsive/responsive.spec.ts`
-
-**Step 1: 编写失败的测试**
-
-```typescript
-// e2e/src/tests/responsive/responsive.spec.ts
-test('移动端布局应该正确显示', async ({ page }) => {
- await page.setViewportSize({ width: 375, height: 667 });
- await page.goto('/contact');
-
- const form = page.locator('form');
- const isVisible = await form.isVisible();
-
- expect(isVisible).toBeTruthy();
-
- const formWidth = await form.evaluate(el => el.getBoundingClientRect().width);
- expect(formWidth).toBeLessThan(375);
-});
-```
-
-**Step 2: 运行测试验证失败**
-
-Run: `cd e2e && npm run test:responsive -- --grep "移动端布局应该正确显示"`
-
-Expected: FAIL - 移动端布局未优化
-
-**Step 3: 优化移动端表单布局**
-
-```typescript
-// src/app/contact/page.tsx
-export default function ContactPage() {
- return (
-
- {children}
-
-
-
- );
-}
-```
-
-**Step 5: 运行测试验证错误处理**
-
-Run: `npm run build`
-
-Expected: BUILD SUCCESS
-
-**Step 6: 添加错误处理的E2E测试**
-
-```typescript
-// e2e/src/tests/smoke/error-handling.smoke.spec.ts
-import { test, expect } from '@playwright/test';
-
-test.describe('错误处理冒烟测试 @smoke', () => {
- test('应该显示404页面', async ({ page }) => {
- await page.goto('/non-existent-page');
- await expect(page.locator('h1')).toContainText('404');
- await expect(page.locator('h2')).toContainText('页面未找到');
- });
-
- test('404页面应该有返回首页按钮', async ({ page }) => {
- await page.goto('/non-existent-page');
- const homeButton = page.getByRole('link', { name: /返回首页/ });
- await expect(homeButton).toBeVisible();
- await homeButton.click();
- await expect(page).toHaveURL('/');
- });
-});
-```
-
-**Step 7: 提交代码**
-
-```bash
-git add src/app/not-found.tsx src/app/error.tsx src/components/ui/error-boundary.tsx src/app/layout.tsx e2e/src/tests/smoke/error-handling.smoke.spec.ts
-git commit -m "feat: implement comprehensive error handling with 404 and error pages"
-```
-
----
-
-## 阶段二：中优先级优化（1周）
-
-### Task 2.1: 优化加载性能
-
-**Files:**
-- Create: `src/components/ui/optimized-image.tsx`
-- Modify: `src/components/sections/hero-section.tsx:1-100`
-- Modify: `src/components/sections/services-section.tsx:1-100`
-- Modify: `src/components/sections/products-section.tsx:1-100`
-- Modify: `src/components/sections/cases-section.tsx:1-100`
-- Modify: `src/components/sections/news-section.tsx:1-100`
-- Modify: `next.config.ts:1-50`
-
-**Step 1: 创建优化的图片组件**
-
-```typescript
-// src/components/ui/optimized-image.tsx
-'use client';
-
-import Image from 'next/image';
-import { useState } from 'react';
-
-interface OptimizedImageProps {
- src: string;
- alt: string;
- width?: number;
- height?: number;
- className?: string;
- priority?: boolean;
-}
-
-export function OptimizedImage({
- src,
- alt,
- width = 800,
- height = 600,
- className,
- priority = false,
-}: OptimizedImageProps) {
- const [isLoading, setIsLoading] = useState(true);
-
- return (
- ![]()
标签为
-(null);
-
- useEffect(() => {
- const handleClickOutside = (event: MouseEvent) => {
- if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
- onClose();
- }
- };
-
- if (isOpen) {
- document.addEventListener('mousedown', handleClickOutside);
- document.body.style.overflow = 'hidden';
- } else {
- document.body.style.overflow = 'unset';
- }
-
- return () => {
- document.removeEventListener('mousedown', handleClickOutside);
- document.body.style.overflow = 'unset';
- };
- }, [isOpen, onClose]);
-
- if (!isOpen) return null;
-
- return (
-
->((props, ref) => {
- return (
-
- );
-});
-```
-
-**Step 3: 添加移动端UX测试**
-
-```typescript
-// e2e/src/tests/responsive/mobile-ux.spec.ts
-import { test, expect } from '@playwright/test';
-
-test.describe('移动端UX测试 @responsive', () => {
- test.use({ viewport: { width: 375, height: 667 } });
-
- test('应该能够打开和关闭移动端菜单', async ({ page }) => {
- await page.goto('/');
-
- const menuButton = page.getByRole('button', { name: /菜单/ });
- await menuButton.tap();
- await expect(page.locator('[role="dialog"]')).toBeVisible();
-
- const closeButton = page.getByRole('button', { name: /关闭/ });
- await closeButton.tap();
- await expect(page.locator('[role="dialog"]')).not.toBeVisible();
- });
-
- test('应该能够通过触摸导航', async ({ page }) => {
- await page.goto('/');
-
- const menuButton = page.getByRole('button', { name: /菜单/ });
- await menuButton.tap();
-
- const navItem = page.getByRole('link', { name: /核心业务/ });
- await navItem.tap();
- await expect(page).toHaveURL(/services/);
- });
-
- test('触摸目标应该足够大', async ({ page }) => {
- await page.goto('/');
-
- const buttons = await page.locator('button, a[role="button"]').all();
- for (const button of buttons) {
- const box = await button.boundingBox();
- expect(box?.width).toBeGreaterThanOrEqual(44);
- expect(box?.height).toBeGreaterThanOrEqual(44);
- }
- });
-});
-```
-
-**Step 4: 运行移动端测试**
-
-Run: `cd e2e && npm test --grep "移动端UX测试"`
-
-Expected: PASS
-
-**Step 5: 提交代码**
-
-```bash
-git add src/components/layout/mobile-menu.tsx src/components/ui/touch-button.tsx e2e/src/tests/responsive/mobile-ux.spec.ts
-git commit -m "feat: improve mobile experience with optimized menu and touch targets"
-```
-
----
-
-### Task 2.3: SEO优化
-
-**Files:**
-- Create: `src/components/seo/structured-data.tsx`
-- Modify: `src/app/layout.tsx:1-50`
-- Modify: `src/app/(marketing)/page.tsx:1-20`
-- Modify: `src/app/(marketing)/about/page.tsx:1-15`
-- Modify: `src/app/(marketing)/cases/page.tsx:1-20`
-- Modify: `src/app/(marketing)/services/page.tsx:1-20`
-- Modify: `src/app/(marketing)/products/page.tsx:1-20`
-
-**Step 1: 创建结构化数据组件**
-
-```typescript
-// src/components/seo/structured-data.tsx
-interface StructuredDataProps {
- data: Record;
-}
-
-export function StructuredData({ data }: StructuredDataProps) {
- return (
-
- );
-}
-```
-
-**Step 2: 在根布局中添加基础SEO**
-
-```typescript
-// src/app/layout.tsx
-import { StructuredData } from '@/components/seo/structured-data';
-import { COMPANY_INFO } from '@/lib/constants';
-
-export const metadata = {
- metadataBase: new URL('http://localhost:3000'),
- title: {
- default: `${COMPANY_INFO.name} - ${COMPANY_INFO.slogan}`,
- template: `%s - ${COMPANY_INFO.name}`,
- },
- description: COMPANY_INFO.description,
- keywords: ['数字化转型', '软件开发', '云服务', '数据分析', '信息安全'],
- openGraph: {
- title: COMPANY_INFO.name,
- description: COMPANY_INFO.description,
- url: 'http://localhost:3000',
- siteName: COMPANY_INFO.name,
- images: [
- {
- url: '/logo.webp',
- width: 1200,
- height: 630,
- },
- ],
- },
-};
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
- const organizationData = {
- '@context': 'https://schema.org',
- '@type': 'Organization',
- name: COMPANY_INFO.name,
- url: 'http://localhost:3000',
- logo: 'http://localhost:3000/logo.webp',
- description: COMPANY_INFO.description,
- address: {
- '@type': 'PostalAddress',
- streetAddress: COMPANY_INFO.address,
- addressLocality: '成都市',
- addressRegion: '四川省',
- addressCountry: 'CN',
- },
- contactPoint: {
- '@type': 'ContactPoint',
- telephone: COMPANY_INFO.phone,
- email: COMPANY_INFO.email,
- },
- };
-
- return (
-
-
-
-
- {image && (
-
-
-
- );
-}
-```
-
-**Step 3: 在各个页面中使用统一组件**
-
-```typescript
-// 示例：src/app/(marketing)/cases/page.tsx
-import { PageHeader } from '@/components/ui/page-header';
-import { ContentCard } from '@/components/ui/content-card';
-
-export default function CasesPage() {
- return (
-
- {children}
-
- );
-}
-```
-
-**Step 2: 添加微交互效果**
-
-```typescript
-// src/components/ui/interactive-card.tsx
-'use client';
-
-import { motion } from 'framer-motion';
-import { Card } from './card';
-
-interface InteractiveCardProps {
- children: React.ReactNode;
- className?: string;
- onClick?: () => void;
-}
-
-export function InteractiveCard({
- children,
- className = '',
- onClick,
-}: InteractiveCardProps) {
- return (
-
- {children}
-
- );
-}
-```
-
-**Step 3: 添加视觉回归测试**
-
-```typescript
-// e2e/src/tests/visual/interactions.visual.spec.ts
-import { test, expect } from '@playwright/test';
-
-test.describe('交互视觉回归测试 @visual', () => {
- test('卡片悬停状态应该一致', async ({ page }) => {
- await page.goto('/services');
-
- const card = page.locator('.group').first();
- await card.hover();
- await expect(page).toHaveScreenshot('card-hover.png', {
- maxDiffPixels: 100,
- });
- });
-
- test('按钮点击状态应该一致', async ({ page }) => {
- await page.goto('/');
-
- const button = page.getByRole('button', { name: /立即咨询/ });
- await button.hover();
- await expect(page).toHaveScreenshot('button-hover.png', {
- maxDiffPixels: 100,
- });
- });
-});
-```
-
-**Step 4: 运行视觉测试**
-
-Run: `cd e2e && npm test --grep "交互视觉回归测试"`
-
-Expected: PASS
-
-**Step 5: 提交代码**
-
-```bash
-git add src/components/ui/animated-section.tsx src/components/ui/interactive-card.tsx e2e/src/tests/visual/interactions.visual.spec.ts
-git commit -m "feat: add enhanced animations and micro-interactions"
-```
-
----
-
-## 测试验证清单
-
-在每个阶段完成后，运行以下测试验证：
-
-### 阶段一验证
-```bash
-# 导航一致性测试
-cd e2e && npm test --grep "导航"
-
-# 页面冒烟测试
-cd e2e && npm test --grep "冒烟测试"
-
-# 错误处理测试
-cd e2e && npm test --grep "错误处理"
-```
-
-### 阶段二验证
-```bash
-# 性能测试
-cd e2e && npm test --grep "@performance"
-
-# 移动端测试
-cd e2e && npm test --grep "@responsive"
-
-# SEO测试
-cd e2e && npm test --grep "SEO"
-```
-
-### 阶段三验证
-```bash
-# 视觉测试
-cd e2e && npm test --grep "@visual"
-
-# 回归测试
-cd e2e && npm test --grep "@regression"
-
-# 完整测试套件
-cd e2e && npm test
-```
-
----
-
-## 代码质量检查
-
-在每个任务完成后，运行以下命令确保代码质量：
-
-```bash
-# Lint检查
-npm run lint
-
-# 类型检查
-npx tsc --noEmit
-
-# 构建检查
-npm run build
-
-# 格式化检查
-npx prettier --check "src/**/*.{ts,tsx}"
-```
-
----
-
-## 文档更新
-
-在完成每个阶段后，更新以下文档：
-
-### README.md
-- 更新项目结构
-- 添加新的组件说明
-- 更新测试命令
-
-### CHANGELOG.md
-```markdown
-## [版本号] - YYYY-MM-DD
-
-### 新增
-- 面包屑导航组件
-- 统一的错误处理页面
-- 优化的图片加载组件
-- 移动端触摸优化
-- SEO结构化数据
-
-### 改进
-- 导航一致性
-- 移动端体验
-- 页面加载性能
-- SEO优化
-
-### 修复
-- 修复服务详情页Link导入问题
-- 修复导航不一致问题
-```
-
----
-
-## 部署检查清单
-
-在部署到生产环境前，确保：
-
-- [ ] 所有测试通过
-- [ ] Lint检查通过
-- [ ] 类型检查通过
-- [ ] 构建成功
-- [ ] 环境变量配置正确
-- [ ] API端点配置正确
-- [ ] 图片资源优化
-- [ ] 性能指标达标（Lighthouse分数 > 90）
-- [ ] 无障碍检查通过（axe-core）
-- [ ] SEO检查通过（Google Rich Results Test）
-
----
-
-## 回滚计划
-
-如果某个阶段出现问题，可以按以下步骤回滚：
-
-```bash
-# 查看提交历史
-git log --oneline
-
-# 回滚到上一个稳定版本
-git revert
-
-# 或者回滚到特定提交
-git reset --hard
-
-# 强制推送（谨慎使用）
-git push --force
-```
-
----
-
-## 持续集成配置
-
-确保以下CI/CD配置正确：
-
-### .woodpecker.yml
-```yaml
-pipeline:
- test:
- image: node:18
- commands:
- - npm ci
- - npm run lint
- - npm run build
- - cd e2e && npm ci
- - cd e2e && npm test
-
- deploy:
- image: node:18
- commands:
- - npm run build
- - # 部署命令
-```
-
----
-
-## 总结
-
-本实施计划分为三个阶段，每个阶段包含多个bite-sized任务：
-
-1. **阶段一（1-2天）**：高优先级修复
- - 导航一致性
- - 测试覆盖
- - 错误处理
-
-2. **阶段二（1周）**：中优先级优化
- - 性能优化
- - 移动端体验
- - SEO优化
-
-3. **阶段三（1个月）**：低优先级优化
- - 代码重构
- - 视觉优化
-
-每个任务都遵循TDD原则，包含完整的测试、实现和验证步骤。建议按阶段顺序执行，每个阶段完成后进行完整的测试验证。
diff --git a/docs/plans/2026-02-28-e2e-test-migration-implementation.md b/docs/plans/2026-02-28-e2e-test-migration-implementation.md
deleted file mode 100644
index 42df1f9..0000000
--- a/docs/plans/2026-02-28-e2e-test-migration-implementation.md
+++ /dev/null
@@ -1,287 +0,0 @@
-# E2E测试框架统一迁移实施计划
-
-> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
-
-**Goal:** 将现有的Python+Pytest测试框架完全迁移到TypeScript+Playwright，建立金融级网站的完整E2E测试体系
-
-**Architecture:** 采用页面对象模式(POM)设计，分层架构（基础设施层、页面对象层、测试用例层、报告监控层），五层测试体系（Smoke、Regression、Performance、Security、Accessibility）
-
-**Tech Stack:** TypeScript 5, Playwright 1.48+, Node.js 20, Woodpecker CI, @axe-core/playwright
-
----
-
-## 阶段1: 评估与准备（1-2天）
-
-### Task 1: 分析现有Python测试用例
-
-**Files:**
-- Read: `e2e-tests/tests/*.py`
-- Create: `docs/test-migration-analysis.md`
-
-**Step 1: 读取所有Python测试文件**
-
-分析以下文件：
-- `e2e-tests/tests/test_contact_form.py`
-- `e2e-tests/tests/test_home_page.py`
-- `e2e-tests/tests/test_navigation.py`
-- `e2e-tests/tests/test_performance.py`
-- `e2e-tests/tests/test_responsive.py`
-
-**Step 2: 分析测试用例清单**
-
-创建测试用例清单，包含：
-- 测试场景描述
-- 测试类型（smoke/regression/performance等）
-- 优先级（高/中/低）
-- 迁移状态（待迁移/已迁移/需重构）
-- Playwright对应文件路径
-
-**Step 3: 生成分析报告**
-
-创建文档 `docs/test-migration-analysis.md`，包含：
-- 现有测试统计（总用例数、各类型分布）
-- 核心测试场景识别
-- 需要迁移的测试列表
-- 需要新增的测试列表
-- 风险评估
-
-**Step 4: 提交分析结果**
-
-```bash
-git add docs/test-migration-analysis.md
-git commit -m "docs: 添加Python测试用例分析报告"
-```
-
----
-
-### Task 2: 评估现有Playwright测试
-
-**Files:**
-- Read: `e2e/src/tests/**/*.spec.ts`
-- Read: `e2e/src/pages/*.ts`
-- Create: `docs/playwright-test-coverage.md`
-
-**Step 1: 分析现有Playwright测试结构**
-
-检查以下目录：
-- `e2e/src/tests/smoke/`
-- `e2e/src/tests/regression/`
-- `e2e/src/tests/performance/`
-- `e2e/src/tests/visual/`
-- `e2e/src/tests/mobile/`
-- `e2e/src/tests/responsive/`
-
-**Step 2: 评估页面对象模型**
-
-检查以下文件：
-- `e2e/src/pages/BasePage.ts`
-- `e2e/src/pages/HomePage.ts`
-- `e2e/src/pages/ContactPage.ts`
-- 其他页面对象文件
-
-**Step 3: 生成覆盖率报告**
-
-创建文档 `docs/playwright-test-coverage.md`，包含：
-- 现有测试覆盖率统计
-- 页面对象完整性评估
-- 缺失的测试场景
-- 需要改进的地方
-
-**Step 4: 提交评估结果**
-
-```bash
-git add docs/playwright-test-coverage.md
-git commit -m "docs: 添加Playwright测试覆盖率评估"
-```
-
----
-
-### Task 3: 准备测试数据管理
-
-**Files:**
-- Create: `e2e/test-data/contact-form.json`
-- Create: `e2e/test-data/products.json`
-- Create: `e2e/test-data/performance-budgets.json`
-- Modify: `e2e/src/utils/TestDataGenerator.ts`
-
-**Step 1: 创建联系表单测试数据**
-
-创建文件 `e2e/test-data/contact-form.json`:
-
-```json
-{
- "valid": {
- "name": "张三",
- "email": "zhangsan@example.com",
- "phone": "13800138000",
- "company": "测试公司",
- "message": "这是一条测试消息，用于验证联系表单功能。"
- },
- "invalid": {
- "emptyName": {
- "name": "",
- "email": "test@example.com",
- "message": "测试消息",
- "expectedError": "请输入姓名"
- },
- "emptyEmail": {
- "name": "测试用户",
- "email": "",
- "message": "测试消息",
- "expectedError": "请输入邮箱"
- },
- "invalidEmail": {
- "name": "测试用户",
- "email": "invalid-email",
- "message": "测试消息",
- "expectedError": "邮箱格式不正确"
- },
- "emptyMessage": {
- "name": "测试用户",
- "email": "test@example.com",
- "message": "",
- "expectedError": "请输入留言内容"
- }
- },
- "xss": {
- "scriptInjection": {
- "name": "",
- "email": "test@example.com",
- "message": "
"
- }
- }
-}
-```
-
-**Step 2: 创建产品测试数据**
-
-创建文件 `e2e/test-data/products.json`:
-
-```json
-{
- "products": [
- {
- "id": "product-1",
- "name": "智能风控系统",
- "category": "风险管理",
- "description": "基于AI的智能风控解决方案"
- }
- ]
-}
-```
-
-**Step 3: 创建性能预算配置**
-
-创建文件 `e2e/test-data/performance-budgets.json`:
-
-```json
-{
- "performanceBudgets": {
- "home": {
- "loadTime": 3000,
- "fcp": 1500,
- "lcp": 2500,
- "tti": 3500,
- "totalSize": 1500000
- },
- "contact": {
- "loadTime": 2500,
- "fcp": 1200,
- "lcp": 2000,
- "tti": 3000,
- "totalSize": 1200000
- }
- }
-}
-```
-
-**Step 4: 增强TestDataGenerator**
-
-修改文件 `e2e/src/utils/TestDataGenerator.ts`，添加数据加载功能。
-
-**Step 5: 提交测试数据**
-
-```bash
-git add e2e/test-data/ e2e/src/utils/TestDataGenerator.ts
-git commit -m "feat: 添加测试数据管理功能"
-```
-
----
-
-### Task 4: 配置多环境支持
-
-**Files:**
-- Create: `e2e/.env.development`
-- Create: `e2e/.env.staging`
-- Create: `e2e/.env.production`
-- Create: `e2e/.env.example`
-- Modify: `e2e/playwright.config.ts`
-
-**Step 1: 创建环境配置文件**
-
-创建各环境配置文件，支持development/staging/production环境。
-
-**Step 2: 更新Playwright配置**
-
-修改文件 `e2e/playwright.config.ts`，支持环境变量。
-
-**Step 3: 安装dotenv依赖**
-
-```bash
-cd e2e
-npm install --save-dev dotenv
-```
-
-**Step 4: 提交环境配置**
-
-```bash
-git add e2e/.env* e2e/playwright.config.ts e2e/package.json
-git commit -m "feat: 配置多环境支持"
-```
-
----
-
-## 阶段2: 核心测试迁移（3-5天）
-
-### Task 5-8: 完善页面对象和测试
-
-详细步骤包括：
-- Task 5: 完善BasePage页面对象
-- Task 6: 完善ContactPage页面对象
-- Task 7: 完善其他页面对象
-- Task 8: 迁移导航测试
-
-每个任务遵循TDD流程：编写测试 → 运行验证失败 → 实现功能 → 运行验证通过 → 提交代码。
-
----
-
-## 阶段3: 专项测试补充（3-4天）
-
-### Task 9-11: 实施专项测试
-
-- Task 9: 实施性能测试（Core Web Vitals）
-- Task 10: 实施安全测试（XSS防护、安全头）
-- Task 11: 实施可访问性测试（WCAG 2.1 AA）
-
----
-
-## 阶段4: CI/CD集成与清理（2-3天）
-
-### Task 12-15: CI配置和清理
-
-- Task 12: 配置Woodpecker CI
-- Task 13: 创建测试报告脚本
-- Task 14: 删除Python测试框架
-- Task 15: 创建测试指南文档
-
----
-
-## 总结
-
-本实施计划将整个迁移工作分解为15个具体任务，遵循TDD原则，每个任务都有明确的文件路径、代码示例和验证步骤。预计总工期9-14天，可根据实际情况调整。
-
-**关键原则**:
-- DRY (Don't Repeat Yourself)
-- YAGNI (You Aren't Gonna Need It)
-- TDD (Test-Driven Development)
-- 频繁提交
diff --git a/docs/plans/2026-02-28-e2e-test-unification-design.md b/docs/plans/2026-02-28-e2e-test-unification-design.md
deleted file mode 100644
index f1c9ce0..0000000
--- a/docs/plans/2026-02-28-e2e-test-unification-design.md
+++ /dev/null
@@ -1,944 +0,0 @@
-# Novalon Website E2E测试统一方案设计
-
-**创建时间**: 2026-02-28
-**目标**: 统一E2E测试框架，从Python+Pytest迁移到TypeScript+Playwright，建立金融级网站完整的测试体系
-
----
-
-## 一、背景与目标
-
-### 当前状态
-- **两套测试框架并存**:
- - TypeScript + Playwright (`e2e/` 目录)
- - Python + Pytest (`e2e-tests/` 目录)
-- **维护成本高**: 需要维护两套技术栈
-- **测试覆盖不完整**: 部分测试场景缺失或重复
-
-### 核心目标
-1. **统一技术栈**: 完全迁移到Playwright，与Next.js项目技术栈一致
-2. **全面测试覆盖**: 建立业务流程、性能、安全、可访问性完整测试体系
-3. **金融级质量**: 满足金融行业对安全、合规、可靠性的高要求
-4. **CI/CD集成**: 建立分层测试流程，平衡速度和覆盖率
-
----
-
-## 二、技术选型决策
-
-### 选择: TypeScript + Playwright
-
-**决策理由**:
-- ✅ 与项目技术栈一致（Next.js + TypeScript）
-- ✅ 可共享类型定义，更好的类型安全
-- ✅ Playwright功能强大，支持多浏览器、移动端、视觉测试
-- ✅ 社区活跃，文档完善，生态成熟
-- ✅ 原生支持并行执行，性能优异
-
-**放弃: Python + Pytest**
-- ❌ 与项目技术栈不一致，增加维护成本
-- ❌ 无法共享类型定义，降低开发效率
-- ❌ 需要维护两套依赖和环境
-
----
-
-## 三、整体架构设计
-
-### 3.1 分层架构
-
-```
-┌─────────────────────────────────────────────────┐
-│ 报告与监控层 (Reports & Monitoring) │
-│ HTML报告 | JSON/JUnit报告 | 性能指标 | 趋势分析 │
-└─────────────────────────────────────────────────┘
- ↓
-┌─────────────────────────────────────────────────┐
-│ 测试用例层 (Test Cases) │
-│ Smoke | Regression | Performance | Security │
-│ Accessibility | Visual | Mobile │
-└─────────────────────────────────────────────────┘
- ↓
-┌─────────────────────────────────────────────────┐
-│ 页面对象层 (Page Objects) │
-│ BasePage | HomePage | ContactPage | Products │
-│ Components (Header, Footer, Form) │
-└─────────────────────────────────────────────────┘
- ↓
-┌─────────────────────────────────────────────────┐
-│ 基础设施层 (Infrastructure) │
-│ Playwright配置 | 测试数据 | 工具库 | Fixtures │
-└─────────────────────────────────────────────────┘
-```
-
-### 3.2 目录结构
-
-```
-e2e/
-├── src/
-│ ├── fixtures/ # 测试夹具
-│ │ ├── base.fixture.ts # 基础fixture
-│ │ ├── a11y.fixture.ts # 可访问性fixture
-│ │ └── auth.fixture.ts # 认证fixture（如需要）
-│ ├── pages/ # 页面对象
-│ │ ├── BasePage.ts # 基础页面
-│ │ ├── HomePage.ts # 首页
-│ │ ├── ContactPage.ts # 联系页面
-│ │ ├── ProductsPage.ts # 产品页面
-│ │ ├── ServicesPage.ts # 服务页面
-│ │ ├── AboutPage.ts # 关于页面
-│ │ ├── CasesPage.ts # 案例页面
-│ │ ├── SolutionsPage.ts # 解决方案页面
-│ │ └── NewsPage.ts # 新闻页面
-│ ├── tests/ # 测试用例
-│ │ ├── smoke/ # 冒烟测试
-│ │ ├── regression/ # 回归测试
-│ │ ├── performance/ # 性能测试
-│ │ ├── security/ # 安全测试
-│ │ ├── accessibility/ # 可访问性测试
-│ │ ├── visual/ # 视觉回归测试
-│ │ ├── mobile/ # 移动端测试
-│ │ ├── responsive/ # 响应式测试
-│ │ └── error-handling/ # 错误处理测试
-│ ├── types/ # 类型定义
-│ │ └── index.ts # 共享类型
-│ └── utils/ # 工具库
-│ ├── PerformanceMonitor.ts # 性能监控
-│ ├── TestDataGenerator.ts # 测试数据生成
-│ ├── devices.ts # 设备配置
-│ └── helpers.ts # 辅助函数
-├── test-data/ # 测试数据文件
-│ ├── contact-form.json # 联系表单数据
-│ ├── products.json # 产品数据
-│ └── performance-budgets.json # 性能预算
-├── playwright.config.ts # Playwright配置
-├── package.json # 依赖管理
-└── tsconfig.json # TypeScript配置
-```
-
----
-
-## 四、测试分层策略
-
-### 4.1 测试金字塔
-
-```
- ┌─────────┐
- │ Security│ (每周/发布前)
- │ Access │ 10-15分钟
- └─────────┘
- ┌───────────────┐
- │ Performance │ (每日/发布前)
- │ 10-20分钟 │
- └───────────────┘
- ┌─────────────────────┐
- │ Regression │ (PR合并前/每日)
- │ 15-30分钟 │
- └─────────────────────┘
- ┌───────────────────────────┐
- │ Smoke │ (每次提交)
- │ < 5分钟 │
- └───────────────────────────┘
-```
-
-### 4.2 各层测试详解
-
-#### Level 1: Smoke Tests（冒烟测试）
-
-**执行频率**: 每次代码提交
-**执行时间**: < 5分钟
-**标签**: `@smoke`
-
-**覆盖范围**:
-- ✅ 所有关键页面可访问性（首页、产品、服务、联系）
-- ✅ 核心导航功能
-- ✅ 关键表单提交（联系表单）
-- ✅ 页面基本渲染（无JS错误）
-
-**测试用例**:
-```typescript
-test.describe('Smoke Tests @smoke', () => {
- test('首页可访问', async ({ page }) => {
- await homePage.goto();
- await expect(page).toHaveTitle(/Novalon/);
- });
-
- test('导航功能正常', async ({ page }) => {
- await homePage.goto();
- await homePage.navigateTo('产品');
- await expect(page).toHaveURL(/products/);
- });
-
- test('联系表单可提交', async ({ page }) => {
- await contactPage.goto();
- await contactPage.fillForm({
- name: '测试用户',
- email: 'test@example.com',
- message: '测试消息'
- });
- await contactPage.submit();
- await expect(contactPage.successMessage).toBeVisible();
- });
-});
-```
-
-#### Level 2: Regression Tests（回归测试）
-
-**执行频率**: PR合并前、每日构建
-**执行时间**: 15-30分钟
-**标签**: `@regression`
-
-**覆盖范围**:
-- ✅ 所有业务流程完整测试
-- ✅ 表单验证（必填项、格式校验、错误提示）
-- ✅ 页面间跳转和数据传递
-- ✅ 响应式布局（桌面/平板/移动端）
-- ✅ 多浏览器兼容性
-
-**测试用例**:
-```typescript
-test.describe('Contact Form Regression @regression', () => {
- test('表单验证 - 必填项', async ({ page }) => {
- await contactPage.goto();
- await contactPage.submit();
- await expect(contactPage.nameError).toHaveText('请输入姓名');
- await expect(contactPage.emailError).toHaveText('请输入邮箱');
- });
-
- test('表单验证 - 邮箱格式', async ({ page }) => {
- await contactPage.goto();
- await contactPage.fillEmail('invalid-email');
- await contactPage.submit();
- await expect(contactPage.emailError).toHaveText('邮箱格式不正确');
- });
-
- test('表单提交成功', async ({ page }) => {
- await contactPage.goto();
- await contactPage.fillForm(testData.validContact);
- await contactPage.submit();
- await expect(contactPage.successMessage).toBeVisible();
- });
-});
-```
-
-#### Level 3: Performance Tests（性能测试）
-
-**执行频率**: 每日构建、发布前
-**执行时间**: 10-20分钟
-**标签**: `@performance`
-
-**覆盖范围**:
-- ✅ 页面加载时间（FCP、LCP、TTI）
-- ✅ 资源大小优化（图片、JS、CSS）
-- ✅ 网络请求数量和瀑布流
-- ✅ 核心交互响应时间
-- ✅ 性能预算验证
-
-**性能预算**:
-```json
-{
- "performanceBudgets": {
- "home": {
- "loadTime": 3000,
- "fcP": 1500,
- "lcp": 2500,
- "tti": 3500,
- "totalSize": 1500000
- },
- "contact": {
- "loadTime": 2500,
- "fcp": 1200,
- "lcp": 2000,
- "tti": 3000,
- "totalSize": 1200000
- }
- }
-}
-```
-
-**测试用例**:
-```typescript
-test.describe('Performance Tests @performance', () => {
- test('首页性能预算', async ({ page }) => {
- const metrics = await performanceMonitor.measurePageLoad(page, '/');
-
- expect(metrics.loadTime).toBeLessThan(budgets.home.loadTime);
- expect(metrics.fcp).toBeLessThan(budgets.home.fcp);
- expect(metrics.lcp).toBeLessThan(budgets.home.lcp);
- });
-
- test('图片优化验证', async ({ page }) => {
- await page.goto('/');
- const images = await page.$$eval('img', imgs =>
- imgs.map(img => ({
- src: img.src,
- naturalWidth: img.naturalWidth,
- naturalHeight: img.naturalHeight,
- displayWidth: img.width,
- displayHeight: img.height
- }))
- );
-
- for (const img of images) {
- expect(img.naturalWidth).toBeLessThanOrEqual(img.displayWidth * 2);
- }
- });
-});
-```
-
-#### Level 4: Security Tests（安全测试）
-
-**执行频率**: 每周、发布前
-**执行时间**: 10-15分钟
-**标签**: `@security`
-
-**覆盖范围**:
-- ✅ XSS漏洞检测（表单输入）
-- ✅ CSRF保护验证
-- ✅ 安全头验证（CSP、HSTS等）
-- ✅ 敏感数据处理（联系表单数据加密）
-- ✅ HTTPS强制跳转
-
-**测试用例**:
-```typescript
-test.describe('Security Tests @security', () => {
- test('XSS防护 - 联系表单', async ({ page }) => {
- await contactPage.goto();
- await contactPage.fillForm({
- name: '',
- email: 'test@example.com',
- message: ''
- });
- await contactPage.submit();
-
- const pageContent = await page.content();
- expect(pageContent).not.toContain('
-
-
-
-
-
-
- 联系我们
-
- {/* 表单 */}
-
-
- );
-}
-```
-
-**Step 5: 运行测试验证通过**
-
-Run: `cd e2e && npm run test:regression -- --grep "应该能够平滑滚动到锚点"`
-
-Expected: PASS
-
-**Step 6: 提交**
-
-```bash
-git add src/hooks/useSmoothScroll.ts src/app/contact/page.tsx
-git commit -m "feat: implement smooth scrolling for anchor links"
-```
-
----
-
-## 阶段2: 优先级2 - 性能优化
-
-### Task 4: 优化页面加载时间
-
-**背景:** 性能测试显示页面加载时间超出阈值
-
-**Files:**
-- Modify: `next.config.mjs`
-- Create: `src/app/loading.tsx`
-- Test: `e2e/src/tests/performance/performance.spec.ts`
-
-**Step 1: 编写失败的测试**
-
-```typescript
-// e2e/src/tests/performance/performance.spec.ts
-test('首页应该在2秒内完成加载', async ({ page }) => {
- const startTime = Date.now();
- await page.goto('/');
- await page.waitForLoadState('networkidle');
- const loadTime = Date.now() - startTime;
-
- expect(loadTime).toBeLessThan(2000);
-});
-```
-
-**Step 2: 运行测试验证失败**
-
-Run: `cd e2e && npm run test:performance -- --grep "首页应该在2秒内完成加载"`
-
-Expected: FAIL - 页面加载时间超过2秒
-
-**Step 3: 配置代码分割和优化**
-
-```javascript
-// next.config.mjs
-/** @type {import('next').NextConfig} */
-const nextConfig = {
- reactStrictMode: true,
- swcMinify: true,
- compress: true,
- images: {
- formats: ['image/avif', 'image/webp'],
- deviceSizes: [640, 750, 828, 1080, 1200, 1920],
- imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
- },
- experimental: {
- optimizeCss: true,
- },
-};
-
-export default nextConfig;
-```
-
-**Step 4: 创建加载状态组件**
-
-```typescript
-// src/app/loading.tsx
-export default function Loading() {
- return (
-
-
-
- );
-}
-```
-
-**Step 5: 运行测试验证通过**
-
-Run: `cd e2e && npm run test:performance -- --grep "首页应该在2秒内完成加载"`
-
-Expected: PASS
-
-**Step 6: 提交**
-
-```bash
-git add next.config.mjs src/app/loading.tsx
-git commit -m "perf: optimize page load time with code splitting and image optimization"
-```
-
----
-
-### Task 5: 改善交互响应时间
-
-**背景:** 性能测试显示交互响应时间需要优化
-
-**Files:**
-- Modify: `src/components/Header.tsx`, `src/components/Button.tsx`
-- Test: `e2e/src/tests/performance/performance.spec.ts`
-
-**Step 1: 编写失败的测试**
-
-```typescript
-// e2e/src/tests/performance/performance.spec.ts
-test('按钮点击应该在100ms内响应', async ({ page }) => {
- await page.goto('/');
- const button = page.locator('button:has-text("立即咨询")').first();
-
- const startTime = Date.now();
- await button.click();
- const responseTime = Date.now() - startTime;
-
- expect(responseTime).toBeLessThan(100);
-});
-```
-
-**Step 2: 运行测试验证失败**
-
-Run: `cd e2e && npm run test:performance -- --grep "按钮点击应该在100ms内响应"`
-
-Expected: FAIL - 按钮响应时间超过100ms
-
-**Step 3: 优化按钮组件**
-
-```typescript
-// src/components/Button.tsx
-'use client';
-
-import { forwardRef } from 'react';
-
-export const Button = forwardRef
-
-
- );
-}
-```
-
-**Step 4: 运行测试验证通过**
-
-Run: `cd e2e && npm run test:responsive -- --grep "移动端布局应该正确显示"`
-
-Expected: PASS
-
-**Step 5: 提交**
-
-```bash
-git add src/app/contact/page.tsx
-git commit -m "style: improve mobile responsive layout for contact form"
-```
-
----
-
-### Task 8: 优化平板端显示
-
-**背景:** 响应式测试显示平板端显示需要调整
-
-**Files:**
-- Modify: `src/app/contact/page.tsx`, `src/components/Header.tsx`
-- Test: `e2e/src/tests/responsive/responsive.spec.ts`
-
-**Step 1: 编写失败的测试**
-
-```typescript
-// e2e/src/tests/responsive/responsive.spec.ts
-test('平板端布局应该正确显示', async ({ page }) => {
- await page.setViewportSize({ width: 768, height: 1024 });
- await page.goto('/contact');
-
- const form = page.locator('form');
- const isVisible = await form.isVisible();
-
- expect(isVisible).toBeTruthy();
-
- const formWidth = await form.evaluate(el => el.getBoundingClientRect().width);
- expect(formWidth).toBeGreaterThan(700);
- expect(formWidth).toBeLessThan(768);
-});
-```
-
-**Step 2: 运行测试验证失败**
-
-Run: `cd e2e && npm run test:responsive -- --grep "平板端布局应该正确显示"`
-
-Expected: FAIL - 平板端布局未优化
-
-**Step 3: 优化平板端布局**
-
-```typescript
-// src/app/contact/page.tsx
-export default function ContactPage() {
- return (
-
-
-
- );
-}
-```
-
-**Step 4: 运行测试验证通过**
-
-Run: `cd e2e && npm run test:responsive -- --grep "平板端布局应该正确显示"`
-
-Expected: PASS
-
-**Step 5: 提交**
-
-```bash
-git add src/app/contact/page.tsx
-git commit -m "style: improve tablet responsive layout"
-```
-
----
-
-### Task 9: 改善大屏幕体验
-
-**背景:** 响应式测试显示大屏幕显示需要优化
-
-**Files:**
-- Modify: `src/app/contact/page.tsx`, `src/app/page.tsx`
-- Test: `e2e/src/tests/responsive/responsive.spec.ts`
-
-**Step 1: 编写失败的测试**
-
-```typescript
-// e2e/src/tests/responsive/responsive.spec.ts
-test('大屏幕布局应该正确显示', async ({ page }) => {
- await page.setViewportSize({ width: 1920, height: 1080 });
- await page.goto('/contact');
-
- const form = page.locator('form');
- const isVisible = await form.isVisible();
-
- expect(isVisible).toBeTruthy();
-
- const formWidth = await form.evaluate(el => el.getBoundingClientRect().width);
- expect(formWidth).toBeGreaterThan(1200);
- expect(formWidth).toBeLessThan(1920);
-});
-```
-
-**Step 2: 运行测试验证失败**
-
-Run: `cd e2e && npm run test:responsive -- --grep "大屏幕布局应该正确显示"`
-
-Expected: FAIL - 大屏幕布局未优化
-
-**Step 3: 优化大屏幕布局**
-
-```typescript
-// src/app/contact/page.tsx
-export default function ContactPage() {
- return (
-
-
-
- );
-}
-```
-
-**Step 4: 运行测试验证通过**
-
-Run: `cd e2e && npm run test:responsive -- --grep "大屏幕布局应该正确显示"`
-
-Expected: PASS
-
-**Step 5: 提交**
-
-```bash
-git add src/app/contact/page.tsx
-git commit -m "style: improve large screen responsive layout"
-```
-
----
-
-## 验证和总结
-
-### Task 10: 运行完整测试套件验证改进
-
-**Files:**
-- Test: `e2e/src/tests/**/*.spec.ts`
-
-**Step 1: 运行所有测试**
-
-Run: `cd e2e && npm run test:all-with-progress`
-
-Expected: 所有测试通过率显著提升
-
-**Step 2: 生成测试报告**
-
-Run: `cd e2e && npm run test:report`
-
-Expected: 生成详细的HTML测试报告
-
-**Step 3: 更新测试报告文档**
-
-Modify: `e2e/test-report.md`
-
-添加改进前后的对比数据和总结
-
-**Step 4: 提交**
-
-```bash
-git add e2e/test-report.md
-git commit -m "docs: update test report with improvements"
-```
-
----
-
-## 执行策略
-
-### TDD流程
-每个任务都遵循以下TDD循环：
-1. **Red**: 编写失败的测试
-2. **Green**: 编写最小代码使测试通过
-3. **Refactor**: 重构代码（如果需要）
-4. **Commit**: 提交代码
-
-### 测试优先级
-- **冒烟测试**: 100%通过率（已达成）
-- **回归测试**: 目标80%+通过率
-- **性能测试**: 目标70%+通过率
-- **响应式测试**: 目标80%+通过率
-
-### 频繁提交
-每个任务完成后立即提交，保持代码历史清晰
-
----
-
-## 成功标准
-
-- [ ] 回归测试通过率达到80%以上
-- [ ] 性能测试通过率达到70%以上
-- [ ] 响应式测试通过率达到80%以上
-- [ ] 所有冒烟测试保持100%通过
-- [ ] 页面加载时间优化到2秒以内
-- [ ] 移动端菜单交互流畅
-- [ ] 联系表单提交功能完整
-- [ ] 平滑滚动正常工作
-
----
-
-## 风险和缓解
-
-### 风险1: 测试环境不稳定
-**缓解**: 使用Playwright的重试机制和超时配置
-
-### 风险2: 性能优化可能影响功能
-**缓解**: 每次优化后运行完整测试套件验证
-
-### 风险3: 响应式改动可能影响现有布局
-**缓解**: 逐步实施，每个改动后测试所有断点
-
----
-
-## 时间估算
-
-- 阶段1（关键功能修复）: 2-3小时
-- 阶段2（性能优化）: 2-3小时
-- 阶段3（响应式改进）: 1-2小时
-- 验证和总结: 1小时
-
-**总计**: 6-9小时
diff --git a/docs/plans/2026-02-27-website-comprehensive-optimization.md b/docs/plans/2026-02-27-website-comprehensive-optimization.md
deleted file mode 100644
index 122b895..0000000
--- a/docs/plans/2026-02-27-website-comprehensive-optimization.md
+++ /dev/null
@@ -1,1420 +0,0 @@
-# 网站全面优化实施计划
-
-> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
-
-**Goal:** 全面优化睿新致远网站，提升导航一致性、测试覆盖率、错误处理、性能、移动端体验和SEO。
-
-**Architecture:** 采用渐进式优化策略，按优先级分阶段实施，每个阶段独立可验证和回滚。
-
-**Tech Stack:** Next.js 16.1.6, TypeScript, Framer Motion, Playwright, Tailwind CSS
-
----
-
-## 阶段一：高优先级修复（1-2天）
-
-### Task 1.1: 修复导航一致性问题
-
-**Files:**
-- Create: `src/components/layout/breadcrumb.tsx`
-- Modify: `src/components/layout/header.tsx:1-150`
-- Modify: `src/app/(marketing)/about/page.tsx:1-15`
-- Modify: `src/app/(marketing)/cases/page.tsx:1-20`
-- Modify: `src/app/(marketing)/services/page.tsx:1-20`
-- Modify: `src/app/(marketing)/products/page.tsx:1-20`
-- Modify: `src/app/(marketing)/solutions/page.tsx:1-20`
-- Modify: `src/app/(marketing)/contact/page.tsx:1-20`
-- Modify: `src/app/(marketing)/news/page.tsx:1-20`
-
-**Step 1: 创建面包屑导航组件**
-
-```typescript
-// src/components/layout/breadcrumb.tsx
-'use client';
-
-import Link from 'next/link';
-import { ChevronRight, Home } from 'lucide-react';
-
-interface BreadcrumbItem {
- label: string;
- href: string;
-}
-
-interface BreadcrumbProps {
- items: BreadcrumbItem[];
-}
-
-export function Breadcrumb({ items }: BreadcrumbProps) {
- return (
-
- );
-}
-```
-
-**Step 2: 运行测试验证组件创建**
-
-Run: `npm run build`
-
-Expected: BUILD SUCCESS
-
-**Step 3: 在各个页面集成面包屑导航**
-
-```typescript
-// 示例：src/app/(marketing)/about/page.tsx
-import { Breadcrumb } from '@/components/layout/breadcrumb';
-
-export default function AboutPage() {
- return (
-
-
- );
-}
-```
-
-**Step 4: 更新 Header 组件以支持统一导航**
-
-```typescript
-// src/components/layout/header.tsx
-// 修改导航逻辑，使其在首页使用锚点，在详情页使用路由
-const getNavigationHref = (item: typeof NAVIGATION[number], isHomePage: boolean) => {
- return isHomePage ? item.href : `/${item.id}`;
-};
-```
-
-**Step 5: 运行测试验证导航一致性**
-
-Run: `npm run lint`
-
-Expected: No linting errors
-
-**Step 6: 提交代码**
-
-```bash
-git add src/components/layout/breadcrumb.tsx src/components/layout/header.tsx src/app/
-git commit -m "feat: implement consistent navigation with breadcrumbs"
-```
-
----
-
-### Task 1.2: 补充关键页面的E2E测试
-
-**Files:**
-- Create: `e2e/src/pages/AboutPage.ts`
-- Create: `e2e/src/pages/CasesPage.ts`
-- Create: `e2e/src/pages/ServicesPage.ts`
-- Create: `e2e/src/pages/ProductsPage.ts`
-- Create: `e2e/src/pages/SolutionsPage.ts`
-- Create: `e2e/src/pages/NewsPage.ts`
-- Create: `e2e/src/tests/smoke/about-page.smoke.spec.ts`
-- Create: `e2e/src/tests/smoke/cases-page.smoke.spec.ts`
-- Create: `e2e/src/tests/smoke/services-page.smoke.spec.ts`
-- Create: `e2e/src/tests/smoke/products-page.smoke.spec.ts`
-- Create: `e2e/src/tests/smoke/solutions-page.smoke.spec.ts`
-- Create: `e2e/src/tests/smoke/news-page.smoke.spec.ts`
-
-**Step 1: 创建 AboutPage Page Object**
-
-```typescript
-// e2e/src/pages/AboutPage.ts
-import { Page, Locator, expect } from '@playwright/test';
-
-export class AboutPage {
- readonly page: Page;
- readonly breadcrumb: Locator;
- readonly pageHeader: Locator;
-
- constructor(page: Page) {
- this.page = page;
- this.breadcrumb = page.locator('nav');
- this.pageHeader = page.locator('h1');
- }
-
- async goto() {
- await this.page.goto('/about');
- await this.page.waitForLoadState('networkidle');
- }
-
- async waitForPageLoad() {
- await this.page.waitForLoadState('networkidle');
- await expect(this.pageHeader).toBeVisible();
- }
-
- async getBreadcrumbItems() {
- return await this.breadcrumb.allTextContents();
- }
-}
-```
-
-**Step 2: 创建关于页面冒烟测试**
-
-```typescript
-// e2e/src/tests/smoke/about-page.smoke.spec.ts
-import { test, expect } from '../../fixtures/base.fixture';
-
-test.describe('关于页面冒烟测试 @smoke', () => {
- test.beforeEach(async ({ aboutPage }) => {
- await aboutPage.goto();
- await aboutPage.waitForPageLoad();
- });
-
- test('应该成功加载关于页面', async ({ aboutPage }) => {
- await expect(aboutPage.page).toHaveURL(/\/about/);
- await expect(aboutPage.pageHeader).toBeVisible();
- });
-
- test('应该显示面包屑导航', async ({ aboutPage }) => {
- const items = await aboutPage.getBreadcrumbItems();
- expect(items.length).toBeGreaterThan(0);
- });
-});
-```
-
-**Step 3: 运行测试验证失败**
-
-Run: `cd e2e && npm test --grep "关于页面冒烟测试"`
-
-Expected: FAIL with "aboutPage is not defined"
-
-**Step 4: 更新 fixtures 以包含新页面**
-
-```typescript
-// e2e/src/fixtures/base.fixture.ts
-import { test as base } from '@playwright/test';
-import { AboutPage } from '../pages/AboutPage';
-import { CasesPage } from '../pages/CasesPage';
-import { ServicesPage } from '../pages/ServicesPage';
-import { ProductsPage } from '../pages/ProductsPage';
-import { SolutionsPage } from '../pages/SolutionsPage';
-import { NewsPage } from '../pages/NewsPage';
-
-export const test = base.extend<{
- aboutPage: AboutPage;
- casesPage: CasesPage;
- servicesPage: ServicesPage;
- productsPage: ProductsPage;
- solutionsPage: SolutionsPage;
- newsPage: NewsPage;
-}>({
- aboutPage: async ({ page }, use) => {
- const aboutPage = new AboutPage(page);
- await use(aboutPage);
- },
- casesPage: async ({ page }, use) => {
- const casesPage = new CasesPage(page);
- await use(casesPage);
- },
- servicesPage: async ({ page }, use) => {
- const servicesPage = new ServicesPage(page);
- await use(servicesPage);
- },
- productsPage: async ({ page }, use) => {
- const productsPage = new ProductsPage(page);
- await use(productsPage);
- },
- solutionsPage: async ({ page }, use) => {
- const solutionsPage = new SolutionsPage(page);
- await use(solutionsPage);
- },
- newsPage: async ({ page }, use) => {
- const newsPage = new NewsPage(page);
- await use(newsPage);
- },
-});
-```
-
-**Step 5: 运行测试验证通过**
-
-Run: `cd e2e && npm test --grep "关于页面冒烟测试"`
-
-Expected: PASS
-
-**Step 6: 为其他页面创建类似的测试**
-
-重复步骤 1-5，为 CasesPage、ServicesPage、ProductsPage、SolutionsPage、NewsPage 创建 Page Objects 和测试。
-
-**Step 7: 提交代码**
-
-```bash
-git add e2e/src/pages/ e2e/src/tests/smoke/ e2e/src/fixtures/base.fixture.ts
-git commit -m "test: add smoke tests for all major pages"
-```
-
----
-
-### Task 1.3: 完善错误处理
-
-**Files:**
-- Create: `src/app/not-found.tsx`
-- Create: `src/app/error.tsx`
-- Create: `src/components/ui/error-boundary.tsx`
-- Modify: `src/app/layout.tsx:1-50`
-
-**Step 1: 创建 404 页面**
-
-```typescript
-// src/app/not-found.tsx
-import Link from 'next/link';
-import { Button } from '@/components/ui/button';
-import { Home, ArrowRight } from 'lucide-react';
-
-export default function NotFound() {
- return (
-
-
- );
-}
-```
-
-**Step 2: 创建全局错误页面**
-
-```typescript
-// src/app/error.tsx
-'use client';
-
-import { useEffect } from 'react';
-import { Button } from '@/components/ui/button';
-import Link from 'next/link';
-import { AlertCircle, RefreshCw } from 'lucide-react';
-
-export default function Error({
- error,
- reset,
-}: {
- error: Error & { digest?: string };
- reset: () => void;
-}) {
- useEffect(() => {
- console.error(error);
- }, [error]);
-
- return (
-
-
- 404
-- 页面未找到 -
-- 抱歉，您访问的页面不存在。 -
-
-
-
-
-
-
- );
-}
-```
-
-**Step 3: 创建错误边界组件**
-
-```typescript
-// src/components/ui/error-boundary.tsx
-'use client';
-
-import { Component, ReactNode } from 'react';
-
-interface ErrorBoundaryProps {
- children: ReactNode;
- fallback?: ReactNode;
-}
-
-interface ErrorBoundaryState {
- hasError: boolean;
-}
-
-export class ErrorBoundary extends Component<
- ErrorBoundaryProps,
- ErrorBoundaryState
-> {
- constructor(props: ErrorBoundaryProps) {
- super(props);
- this.state = { hasError: false };
- }
-
- static getDerivedStateFromError(_: Error): ErrorBoundaryState {
- return { hasError: true };
- }
-
- componentDidCatch(error: Error, errorInfo: any) {
- console.error('ErrorBoundary caught an error:', error, errorInfo);
- }
-
- render() {
- if (this.state.hasError) {
- return this.props.fallback || (
-
-
-
-
- - 出错了 -
-- 抱歉，页面加载时发生了错误。请刷新页面或联系我们的技术支持。 -
-
-
-
-
-
-
- );
- }
-
- return this.props.children;
- }
-}
-```
-
-**Step 4: 在根布局中集成错误边界**
-
-```typescript
-// src/app/layout.tsx
-import { ErrorBoundary } from '@/components/ui/error-boundary';
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
- return (
-
-
-
-
- - 组件加载失败 -
-- 抱歉，页面部分内容加载失败。请刷新页面重试。 -
-
- {isLoading && (
-
- )}
- setIsLoading(false)}
- sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
- />
-
- );
-}
-```
-
-**Step 2: 更新 Next.js 配置以支持图片优化**
-
-```typescript
-// next.config.ts
-const nextConfig = {
- images: {
- remotePatterns: [
- {
- protocol: 'https',
- hostname: '**',
- },
- ],
- formats: ['image/avif', 'image/webp'],
- deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
- imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
- },
- // 其他配置...
-};
-```
-
-**Step 3: 在各个 section 中使用优化的图片组件**
-
-```typescript
-// 示例：src/components/sections/hero-section.tsx
-import { OptimizedImage } from '@/components/ui/optimized-image';
-
-// 替换所有
-
- );
-}
-```
-
-**Step 2: 添加移动端触摸优化**
-
-```typescript
-// src/components/ui/touch-button.tsx
-'use client';
-
-import { Button } from './button';
-import { forwardRef } from 'react';
-
-export const TouchButton = forwardRef<
- HTMLButtonElement,
- React.ComponentProps
-
-
-
- {children}
-
-
-
- );
-}
-```
-
-**Step 4: 添加SEO验证测试**
-
-```typescript
-// e2e/src/tests/smoke/seo.smoke.spec.ts
-import { test, expect } from '@playwright/test';
-
-test.describe('SEO冒烟测试 @smoke', () => {
- test('应该有正确的页面标题', async ({ page }) => {
- await page.goto('/');
-
- const title = await page.title();
- expect(title).toContain('睿新致远');
- });
-
- test('应该有meta描述', async ({ page }) => {
- await page.goto('/');
-
- const description = await page.locator('meta[name="description"]').getAttribute('content');
- expect(description).toBeTruthy();
- expect(description?.length).toBeGreaterThan(50);
- });
-
- test('应该有结构化数据', async ({ page }) => {
- await page.goto('/');
-
- const structuredData = await page.locator('script[type="application/ld+json"]').count();
- expect(structuredData).toBeGreaterThan(0);
- });
-
- test('应该有Open Graph标签', async ({ page }) => {
- await page.goto('/');
-
- const ogTitle = await page.locator('meta[property="og:title"]').getAttribute('content');
- const ogDescription = await page.locator('meta[property="og:description"]').getAttribute('content');
- expect(ogTitle).toBeTruthy();
- expect(ogDescription).toBeTruthy();
- });
-});
-```
-
-**Step 5: 运行SEO测试**
-
-Run: `cd e2e && npm test --grep "SEO冒烟测试"`
-
-Expected: PASS
-
-**Step 6: 提交代码**
-
-```bash
-git add src/components/seo/structured-data.tsx src/app/layout.tsx src/app/ e2e/src/tests/smoke/seo.smoke.spec.ts
-git commit -m "feat: implement comprehensive SEO optimization with structured data"
-```
-
----
-
-## 阶段三：低优先级优化（1个月）
-
-### Task 3.1: 代码重构
-
-**Files:**
-- Create: `src/components/ui/page-header.tsx`
-- Modify: `src/app/(marketing)/about/page.tsx:1-15`
-- Modify: `src/app/(marketing)/cases/page.tsx:1-20`
-- Modify: `src/app/(marketing)/services/page.tsx:1-20`
-- Modify: `src/app/(marketing)/products/page.tsx:1-20`
-- Modify: `src/app/(marketing)/solutions/page.tsx:1-20`
-- Modify: `src/app/(marketing)/contact/page.tsx:1-20`
-- Modify: `src/app/(marketing)/news/page.tsx:1-20`
-
-**Step 1: 统一页面标题组件**
-
-```typescript
-// src/components/ui/page-header.tsx
-import { Badge } from './badge';
-
-interface PageHeaderProps {
- badge?: string;
- title: string;
- description: string;
-}
-
-export function PageHeader({ badge, title, description }: PageHeaderProps) {
- return (
-
-
- );
-}
-```
-
-**Step 2: 提取公共卡片组件**
-
-```typescript
-// src/components/ui/content-card.tsx
-import Link from 'next/link';
-import { Card, CardContent } from './card';
-import { Badge } from './badge';
-
-interface ContentCardProps {
- id: string;
- title: string;
- description: string;
- category?: string;
- date?: string;
- image?: string;
- href: string;
-}
-
-export function ContentCard({
- id,
- title,
- description,
- category,
- date,
- image,
- href,
-}: ContentCardProps) {
- return (
-
-
- {badge && (
- {badge}
- )}
-
- - {title} -
-- {description} -
-
- 📰
-
- )}
-
- {category && (
-
- {category}
-
- )}
- {date && (
-
-
- {date}
-
- )}
- - {title} -
-- {description} -
-
-
- );
-}
-```
-
-**Step 4: 运行测试验证重构**
-
-Run: `npm run lint && npm run build`
-
-Expected: No linting errors, BUILD SUCCESS
-
-**Step 5: 提交代码**
-
-```bash
-git add src/components/ui/page-header.tsx src/components/ui/content-card.tsx src/app/
-git commit -m "refactor: extract common components and unify page structure"
-```
-
----
-
-### Task 3.2: 视觉优化
-
-**Files:**
-- Create: `src/components/ui/animated-section.tsx`
-- Modify: `src/components/sections/hero-section.tsx:1-100`
-- Modify: `src/components/sections/services-section.tsx:1-100`
-- Modify: `src/components/sections/products-section.tsx:1-100`
-
-**Step 1: 创建优化的动画section组件**
-
-```typescript
-// src/components/ui/animated-section.tsx
-'use client';
-
-import { useRef, useEffect } from 'react';
-import { motion, useInView } from 'framer-motion';
-
-interface AnimatedSectionProps {
- children: React.ReactNode;
- className?: string;
- delay?: number;
-}
-
-export function AnimatedSection({
- children,
- className = '',
- delay = 0,
-}: AnimatedSectionProps) {
- const ref = useRef(null);
- const isInView = useInView(ref, { once: true, margin: '-100px' });
-
- return (
-
-
-
- {CASES.map((caseItem) => (
-
-