feat: 添加移动端适配和测试功能

refactor(layout): 优化页脚布局和备案信息展示
feat(constants): 添加ICP备案和公安备案信息
feat(header): 实现移动端加载时的骨架屏效果
style(globals): 调整文字颜色和添加移动端响应样式
feat(breadcrumb): 增加返回按钮和响应式优化
feat(e2e): 添加移动端测试工具和测试用例
docs: 添加页脚重设计文档

docs/plans/2026-03-04-footer-redesign-design.md

@@ -0,0 +1,253 @@
+# Footer 全面升级设计方案
+
+**日期：** 2026-03-04  
+**设计风格：** 浅色现代风格  
+**布局结构：** 4列布局
+
+---
+
+## 一、整体布局与视觉风格
+
+### 1.1 背景与色彩体系
+
+**背景设计：**
+- 主背景：保持浅色背景 `#F5F5F5`
+- 渐变效果：从上到下微妙渐变（`#F5F5F5` → `#FAFAFA`）
+- 顶部阴影：`shadow-[0_-4px_20px_rgba(0,0,0,0.03)]`
+
+**色彩体系：**
+- 强调色：品牌深红 `#C41E3A`（图标、链接悬停、分隔线）
+- 文字层次：
+  - 标题：`#1C1C1C` 深色
+  - 正文：`#3D3D3D` 中灰色
+  - 辅助文字：`#5C5C5C` 浅灰色
+
+### 1.2 布局结构
+
+**4列布局：**
+```
+[品牌信息+二维码] [快速链接] [服务项目] [联系方式]
+```
+
+**间距优化：**
+- 列间距：`gap-8 lg:gap-12`
+- 内边距：`py-16`（增加呼吸感）
+- 元素间距：统一使用 `space-y-4` 或 `space-y-6`
+
+---
+
+## 二、品牌信息区域设计（第一列）
+
+### 2.1 品牌展示区（顶部）
+
+**Logo区域：**
+- Logo尺寸：保持当前 `h-10`
+- 悬停效果：`hover:scale-105 hover:shadow-md transition-all duration-200`
+- 公司名称：Logo右侧添加"睿新致遠"，`font-semibold text-lg text-[#1C1C1C]`
+- Slogan：名称下方添加"智连未来，成长伙伴"，`text-sm text-[#5C5C5C] mt-1`
+
+**公司描述：**
+- 保持当前内容
+- 优化行高：`leading-relaxed`
+
+### 2.2 二维码区域（中部）
+
+**分隔线：**
+- 使用 `border-t border-[#E5E5E5]` 与上方内容区分
+
+**二维码展示：**
+- 标题："关注公众号"，`text-sm font-medium text-[#1C1C1C] mb-3`
+- 卡片样式：
+  - 白色背景 + 边框
+  - 阴影：`shadow-sm hover:shadow-md transition-shadow`
+  - 内边距：`p-3`
+- 尺寸：140x140px
+- 引导文字："扫码关注获取最新资讯"，`text-xs text-[#718096] mt-2`
+
+---
+
+## 三、其他三列设计
+
+### 3.1 第二列：快速链接
+
+**标题设计：**
+- 文字："快速链接"
+- 样式：`font-semibold text-lg text-[#1C1C1C] mb-6`
+- 左侧装饰：品牌色竖线 `w-1 h-6 bg-[#C41E3A] rounded-full`
+
+**链接列表：**
+- 保持当前导航项
+- 样式优化：
+  - 默认：`text-[#3D3D3D] text-sm`
+  - 悬停：`hover:text-[#C41E3A] hover:translate-x-1 transition-all duration-200`
+  - 间距：`space-y-3`
+- 图标前缀：小圆点 `w-1.5 h-1.5 bg-[#C41E3A] rounded-full`
+
+### 3.2 第三列：服务项目
+
+**标题设计：**
+- 文字："服务项目"
+- 样式：与快速链接标题保持一致
+
+**服务列表：**
+- 保持当前服务项
+- 样式：与快速链接保持一致
+
+### 3.3 第四列：联系方式
+
+**标题设计：**
+- 文字："联系方式"
+- 样式：与其他列标题保持一致
+
+**联系信息：**
+- 保持图标 + 文字布局
+- 样式优化：
+  - 图标：`w-5 h-5 text-[#C41E3A]`
+  - 文字：`text-[#3D3D3D] text-sm`
+  - 悬停：`group-hover:translate-x-1`
+  - 间距：`space-y-4`
+
+---
+
+## 四、底部信息区域设计
+
+### 4.1 版权与合规信息区
+
+**分隔线：**
+- 使用 `border-t border-[#E5E5E5] mt-12 pt-8`
+
+**布局：**
+- `flex flex-col md:flex-row justify-between items-center gap-4`
+
+**左侧：**
+- 版权信息：`© 2026 四川睿新致远科技有限公司 All rights reserved.`
+- 样式：`text-[#5C5C5C] text-sm`
+
+**右侧：**
+- 隐私政策、服务条款链接
+- 样式：`text-[#5C5C5C] hover:text-[#C41E3A] text-sm transition-colors`
+- 间距：`gap-6`
+
+### 4.2 备案信息
+
+**位置：**
+- 版权信息下方
+- 样式：`text-center mt-4 pt-4 border-t border-[#E5E5E5]`
+
+**内容：**
+- ICP备案号：`蜀ICP备XXXXXXXX号-1`
+- 公安备案：`川公网安备 XXXXXXXXXXX号`
+- 样式：`text-xs text-[#718096]`
+- 链接：备案号可链接到工信部查询页面
+
+---
+
+## 五、响应式设计
+
+### 5.1 移动端（< 768px）
+
+**布局：**
+- 单列堆叠：`grid-cols-1`
+- 间距：`gap-8`
+- 内边距：`py-12`
+
+**顺序：**
+1. 品牌信息 + 二维码
+2. 快速链接
+3. 服务项目
+4. 联系方式
+
+**二维码：**
+- 居中显示：`mx-auto`
+
+### 5.2 平板端（768px - 1024px）
+
+**布局：**
+- 2列网格：`md:grid-cols-2`
+- 间距：`gap-8`
+
+### 5.3 桌面端（> 1024px）
+
+**布局：**
+- 4列网格：`lg:grid-cols-4`
+- 间距：`gap-12`
+- 内边距：`py-16`
+
+---
+
+## 六、交互细节优化
+
+### 6.1 链接悬停效果
+
+- 快速链接、服务项目：`hover:text-[#C41E3A] hover:translate-x-1 transition-all duration-200`
+- 联系方式：整个项目悬停时轻微右移
+- 底部链接：`hover:text-[#C41E3A] transition-colors`
+
+### 6.2 二维码交互
+
+- 悬停效果：阴影增强 `hover:shadow-lg`
+- 可选：点击放大功能（使用Dialog组件）
+
+### 6.3 Logo悬停
+
+- 轻微放大：`hover:scale-105`
+- 添加阴影：`hover:shadow-md`
+- 过渡效果：`transition-all duration-200`
+
+### 6.4 可访问性优化
+
+- 所有链接添加 `aria-label`
+- 图标添加 `aria-hidden="true"`
+- 确保颜色对比度符合 WCAG AA 标准
+- 键盘导航友好
+
+---
+
+## 七、性能优化
+
+### 7.1 图片优化
+
+- Logo：使用 `priority` 属性（首屏加载）
+- 二维码：使用 `loading="lazy"`（懒加载）
+- 添加 `sizes` 属性优化响应式图片
+
+### 7.2 CSS优化
+
+- 使用 Tailwind CSS 的 JIT 模式
+- 避免重复的类名组合
+- 使用组件化的样式方案
+
+---
+
+## 八、实施计划
+
+### 8.1 实施步骤
+
+1. 更新 `footer.tsx` 组件代码
+2. 添加必要的图标组件（如果需要）
+3. 更新 `constants.ts` 添加备案信息
+4. 测试响应式布局
+5. 验证可访问性
+6. 性能优化检查
+
+### 8.2 预期效果
+
+- ✅ 视觉层次更清晰
+- ✅ 品牌形象更突出
+- ✅ 用户体验更友好
+- ✅ 符合金融级标准
+- ✅ 响应式适配完善
+- ✅ 可访问性达标
+
+---
+
+## 九、未来扩展
+
+### 9.1 预留区域
+
+- 合作伙伴展示区（已设计，暂时隐藏）
+- 认证资质标识区（已设计，暂时隐藏）
+
+### 9.2 扩展方式
+
+需要时取消注释相关代码即可启用。