138 lines
4.4 KiB
Markdown
138 lines
4.4 KiB
Markdown
# 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：启用自动调整策略 |