wurenzhi/makemd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
makemd/docs/ARCHIVE/01_Architecture/frontend/03_Ad.md
wurenzhi 2b86715c09 refactor: 优化代码结构并修复类型问题 
- 移除未使用的TabPane组件
- 修复类型定义和导入方式
- 优化mock数据源的环境变量判断逻辑
- 更新文档结构并归档旧文件
- 添加新的UI组件和Memo组件
- 调整API路径和响应处理
2026-03-23 12:41:35 +08:00

4.4 KiB
Raw Permalink Blame History

Ad 页面前端业务说明书

1️⃣ 页面定义

页面目标

帮助商户：

  • 管理广告 campaigns
  • 优化广告投放
  • 分析广告效果
  • 提高广告ROI
  • 自动调整广告策略

页面类型

  • 业务核心页（直接影响利润放大）

2️⃣ 页面核心数据

核心数据字段

  • campaignId（广告活动ID）：唯一标识广告活动
  • campaignName（广告活动名称）：广告活动的名称
  • budget（预算）：广告投放预算
  • spend（花费）：已花费金额
  • impressions（展示次数）：广告展示次数
  • clicks（点击次数）：广告点击次数
  • conversions（转化次数）：广告转化次数
  • ctr（点击率）：点击次数/展示次数
  • cpc（点击成本）：花费/点击次数
  • cpa（获客成本）：花费/转化次数
  • roi（ROI）：广告投资回报率
  • status（状态）：运行中、已暂停、已结束等
  • startDate（开始日期）：广告活动开始日期
  • endDate（结束日期）：广告活动结束日期

3️⃣ 页面核心操作

用户操作

  • 创建广告活动：创建新的广告活动
  • 编辑广告活动：修改广告活动信息
  • 启动/暂停广告：控制广告活动状态
  • 查看广告效果：分析广告活动数据
  • 使用AI优化：获取AI的广告优化建议
  • 自动调整策略：根据ROI自动调整广告策略

4️⃣ 操作 → 业务结果

操作闭环

  1. 创建广告活动

    • 触发：用户点击"创建广告"按钮
    • 服务：AdService.createCampaign
    • 结果：创建新的广告活动，开始投放
    • 反馈：显示创建成功提示

  2. 使用AI优化

    • 触发：用户点击"AI优化"按钮
    • 服务：AIService.optimizeAdCampaign
    • 结果：获取AI优化建议，显示在界面上
    • 反馈：显示加载状态，完成后显示优化建议
    • 收费：每次调用AI优化服务收费

  3. 自动调整策略

    • 触发：用户启用"自动调整"功能
    • 服务：AdAutoService.autoAdjustCampaign
    • 结果：根据ROI自动调整广告预算、投放时间等
    • 反馈：显示自动调整状态和结果

5️⃣ 页面状态

状态定义

  • loading：数据加载中
  • empty：无广告数据
  • error：操作错误
  • success：操作成功
  • running：广告运行中
  • paused：广告已暂停
  • ended：广告已结束
  • optimizing：AI优化中

6️⃣ 收费点

收费触发点

  • AI广告优化：按调用次数收费
  • 自动调整策略：按功能使用时间收费
  • 高级广告分析：按功能使用时间收费
  • 批量广告操作：按操作次数收费

7️⃣ 页面结构

主要区域

  1. 广告列表区：显示所有广告活动，包含核心数据字段
  2. 广告详情区：显示单个广告活动的详细信息
  3. 广告效果区：显示广告活动的效果数据和图表
  4. AI优化区：显示AI优化建议和结果
  5. 自动调整区：显示自动调整策略和状态

8️⃣ 业务价值

核心价值

  • 帮助商户优化广告投放，提高ROI
  • 提供智能广告优化建议，节省时间和成本
  • 实时监控广告效果，及时调整策略
  • 自动调整广告策略，最大化广告效果
  • 分析广告数据，识别最佳投放策略

商业闭环

广告创建 → 投放 → 监控 → AI优化 → 自动调整 → 效果分析 → 策略调整

9️⃣ 前端实现要点

技术实现

  • 使用React组件化开发
  • 集成Ant Design表格和表单组件
  • 实现数据可视化，使用ECharts或AntV展示广告效果
  • 使用Umi Model管理全局状态
  • 实现实时数据更新和WebSocket连接

用户体验

  • 响应式设计，支持多终端访问
  • 操作反馈及时，显示loading和success/error提示
  • 数据可视化，使用图表展示广告效果和趋势
  • 批量操作支持，提高工作效率
  • 广告状态颜色区分，直观显示广告状态

🔟 后端服务依赖

核心服务

  • AdService：广告活动管理
  • AIService：广告优化建议
  • AdAutoService：自动广告调整
  • AnalyticsService：广告效果分析

数据接口

  • GET /api/v1/ads：获取广告活动列表
  • POST /api/v1/ads：创建广告活动
  • PUT /api/v1/ads/:id：更新广告活动
  • PUT /api/v1/ads/:id/status：更新广告活动状态
  • GET /api/v1/ads/:id/analytics：获取广告效果分析
  • POST /api/v1/ads/:id/ai-optimize：获取AI优化建议
  • POST /api/v1/ads/:id/auto-adjust：启用自动调整策略
Reference in New Issue View Git Blame Copy Permalink