d8d-vite-starter/docs/ad-banner-carousel-implementation.md

广告位轮播实现方案

项目概述

在银龄智慧首页的银龄图标上方添加一个广告位轮播图，保持与现有水墨风格界面设计一致。

技术实现方案

1. 组件设计

• 组件名称: AdBannerCarousel
• 位置: src/client/mobile/components/AdBannerCarousel.tsx
• 样式风格: 延续中国水墨风格，使用现有色彩方案

2. 数据结构

interface AdBannerItem {
  id: number;
  title: string;
  description: string;
  image: string;
  link: string;
  sortOrder: number;
}

3. 样式规范

• 背景色: 使用宣纸背景色 #f5f3f0
• 边框: 淡墨色 #d4c4a8
• 文字: 墨色文字 #2f1f0f
• 圆角: 匹配现有设计，使用 border-radius: 6px
• 阴影: shadow-sm transition-all duration-300 hover:shadow-md

4. 组件特性

• 自动轮播（每4秒切换）
• 手动控制（左右箭头）
• 指示器（底部小圆点）
• 响应式设计
• 图片懒加载
• 错误图片回退机制

5. 位置布局

• 垂直位置: 服务分类区域上方（银龄图标网格上方）
• 水平位置: 全宽展示，左右边距16px
• 高度: 120px（适合移动设备展示）

6. 图片资源

• 使用现有banner图片：/images/banner1.jpg, /images/banner2.jpg
• 添加示例广告图片到 /public/images/ad-banner-*.jpg
• 备用图片：/images/placeholder-banner.jpg

7. 集成步骤

1. 创建AdBannerCarousel组件
2. 修改NewHomePage.tsx，在服务分类区域上方插入广告轮播
3. 添加示例广告数据
4. 测试轮播功能
5. 优化移动端体验

8. 响应式处理

• 移动端: 全宽展示，高度120px
• 平板: 保持相同设计，适配更大屏幕
• 桌面: 在移动视图内保持一致体验

9. 性能优化

• 图片懒加载
• 自动轮播暂停（用户悬停时）
• 内存管理（组件卸载时清理定时器）

10. 错误处理

• 图片加载失败时显示占位图
• 无广告数据时隐藏组件
• 网络异常时的优雅降级

实现代码结构

AdBannerCarousel组件

// 基础的自动轮播组件
const AdBannerCarousel: React.FC<{
  ads: AdBannerItem[];
  autoPlayInterval?: number;
}> = ({ ads, autoPlayInterval = 4000 }) => {
  // 轮播逻辑
}

样式配置

.ad-banner-container {
  background-color: rgba(255,255,255,0.7);
  border: 1px solid #d4c4a8;
  border-radius: 12px;
  margin: 16px;
  overflow: hidden;
}

测试方案

1. 手动切换测试
2. 自动轮播测试
3. 图片加载测试
4. 响应式适配测试
5. 性能测试

部署计划

1. 开发环境测试
2. 生产环境部署
3. 监控用户反馈
4. 性能监控