145 lines
4.8 KiB
Markdown
145 lines
4.8 KiB
Markdown
|
# 独立站 页面前端业务说明书
|
|||
|
|
|
|||
|
|
## 1️⃣ 页面定义
|
|||
|
|
|
|||
|
|
### 页面目标
|
|||
|
|
帮助商户：
|
|||
|
|
- 创建和管理独立站
|
|||
|
|
- 配置独立站的基本信息和设置
|
|||
|
|
- 管理独立站的商品和订单
|
|||
|
|
- 分析独立站的运营数据
|
|||
|
|
- 优化独立站的运营策略
|
|||
|
|
|
|||
|
|
### 页面类型
|
|||
|
|
- 业务核心页（直接影响独立站运营）
|
|||
|
|
|
|||
|
|
## 2️⃣ 页面核心数据
|
|||
|
|
|
|||
|
|
### 核心数据字段
|
|||
|
|
- siteId（站点ID）：唯一标识独立站
|
|||
|
|
- siteName（站点名称）：独立站的名称
|
|||
|
|
- domain（域名）：独立站的域名
|
|||
|
|
- status（站点状态）：活跃、暂停、关闭等
|
|||
|
|
- template（模板）：独立站使用的模板
|
|||
|
|
- theme（主题）：独立站的主题设置
|
|||
|
|
- products（商品）：独立站内的商品列表
|
|||
|
|
- orders（订单）：独立站的订单列表
|
|||
|
|
- traffic（流量）：独立站的访问流量
|
|||
|
|
- sales（销售额）：独立站的销售数据
|
|||
|
|
- createdAt（创建时间）：独立站的创建时间
|
|||
|
|
- updatedAt（更新时间）：独立站的更新时间
|
|||
|
|
|
|||
|
|
## 3️⃣ 页面核心操作
|
|||
|
|
|
|||
|
|
### 用户操作
|
|||
|
|
- 创建独立站：创建新的独立站
|
|||
|
|
- 配置独立站：设置独立站的基本信息和参数
|
|||
|
|
- 管理商品：添加、编辑和删除独立站内的商品
|
|||
|
|
- 管理订单：处理独立站的订单
|
|||
|
|
- 分析数据：查看独立站的运营数据和分析报告
|
|||
|
|
- 优化设置：调整独立站的设置以提高运营效果
|
|||
|
|
|
|||
|
|
## 4️⃣ 操作 → 业务结果
|
|||
|
|
|
|||
|
|
### 操作闭环
|
|||
|
|
1. **创建独立站**
|
|||
|
|
- 触发：用户点击"创建独立站"按钮
|
|||
|
|
- 服务：IndependentSiteService.createSite
|
|||
|
|
- 结果：创建新的独立站，生成站点ID和默认配置
|
|||
|
|
- 反馈：显示创建成功提示，跳转到独立站配置页面
|
|||
|
|
|
|||
|
|
2. **配置独立站**
|
|||
|
|
- 触发：用户修改独立站的配置
|
|||
|
|
- 服务：IndependentSiteService.updateConfig
|
|||
|
|
- 结果：更新独立站的配置信息
|
|||
|
|
- 反馈：显示配置更新成功提示
|
|||
|
|
|
|||
|
|
3. **管理商品**
|
|||
|
|
- 触发：用户在独立站内添加、编辑或删除商品
|
|||
|
|
- 服务：IndependentSiteService.manageProducts
|
|||
|
|
- 结果：更新独立站的商品列表
|
|||
|
|
- 反馈：显示商品操作成功提示
|
|||
|
|
|
|||
|
|
4. **分析数据**
|
|||
|
|
- 触发：用户点击"分析数据"按钮
|
|||
|
|
- 服务：AnalyticsService.analyzeSiteData
|
|||
|
|
- 结果：生成独立站的运营分析报告
|
|||
|
|
- 反馈：显示分析结果和图表
|
|||
|
|
|
|||
|
|
## 5️⃣ 页面状态
|
|||
|
|
|
|||
|
|
### 状态定义
|
|||
|
|
- loading：数据加载中
|
|||
|
|
- empty：无独立站数据
|
|||
|
|
- error：操作错误
|
|||
|
|
- success：操作成功
|
|||
|
|
- creating：独立站创建中
|
|||
|
|
- configuring：独立站配置中
|
|||
|
|
- analyzing：数据分析中
|
|||
|
|
|
|||
|
|
## 6️⃣ 收费点
|
|||
|
|
|
|||
|
|
### 收费触发点
|
|||
|
|
- 独立站创建：按站点数量收费
|
|||
|
|
- 高级模板：按模板类型收费
|
|||
|
|
- 数据分析：按功能使用时间收费
|
|||
|
|
- 流量优化：按优化效果收费
|
|||
|
|
|
|||
|
|
## 7️⃣ 页面结构
|
|||
|
|
|
|||
|
|
### 主要区域
|
|||
|
|
1. **独立站列表区**：显示所有独立站，包含核心数据字段
|
|||
|
|
2. **独立站详情区**：显示单个独立站的详细信息
|
|||
|
|
3. **站点配置区**：配置独立站的基本信息和设置
|
|||
|
|
4. **商品管理区**：管理独立站内的商品
|
|||
|
|
5. **订单管理区**：管理独立站的订单
|
|||
|
|
6. **数据分析区**：显示独立站的运营数据和分析报告
|
|||
|
|
|
|||
|
|
## 8️⃣ 业务价值
|
|||
|
|
|
|||
|
|
### 核心价值
|
|||
|
|
- 帮助商户快速创建和管理独立站
|
|||
|
|
- 提供个性化的独立站配置选项
|
|||
|
|
- 实现商品和订单的统一管理
|
|||
|
|
- 提供数据驱动的运营分析
|
|||
|
|
- 优化独立站的运营效果，提高销售额
|
|||
|
|
|
|||
|
|
### 商业闭环
|
|||
|
|
独立站创建 → 配置设置 → 商品上传 → 订单处理 → 数据分析 → 优化调整 → 销售增长
|
|||
|
|
|
|||
|
|
## 9️⃣ 前端实现要点
|
|||
|
|
|
|||
|
|
### 技术实现
|
|||
|
|
- 使用React组件化开发
|
|||
|
|
- 集成Ant Design表格和表单组件
|
|||
|
|
- 实现虚拟列表，优化大数据量渲染
|
|||
|
|
- 使用Umi Model管理全局状态
|
|||
|
|
- 实现实时数据更新和WebSocket连接
|
|||
|
|
- 集成第三方模板和主题选择器
|
|||
|
|
|
|||
|
|
### 用户体验
|
|||
|
|
- 响应式设计，支持多终端访问
|
|||
|
|
- 操作反馈及时，显示loading和success/error提示
|
|||
|
|
- 数据可视化，使用图表展示运营数据和分析结果
|
|||
|
|
- 批量操作支持，提高工作效率
|
|||
|
|
- 拖拽式页面构建器，方便用户自定义独立站页面
|
|||
|
|
|
|||
|
|
## 🔟 后端服务依赖
|
|||
|
|
|
|||
|
|
### 核心服务
|
|||
|
|
- IndependentSiteService：独立站管理和配置
|
|||
|
|
- ProductService：商品管理
|
|||
|
|
- OrderService：订单管理
|
|||
|
|
- AnalyticsService：数据分析
|
|||
|
|
- TemplateService：模板管理
|
|||
|
|
|
|||
|
|
### 数据接口
|
|||
|
|
- GET /api/v1/sites：获取独立站列表
|
|||
|
|
- POST /api/v1/sites：创建独立站
|
|||
|
|
- GET /api/v1/sites/:id：获取独立站详情
|
|||
|
|
- PUT /api/v1/sites/:id：更新独立站配置
|
|||
|
|
- DELETE /api/v1/sites/:id：删除独立站
|
|||
|
|
- GET /api/v1/sites/:id/products：获取独立站商品列表
|
|||
|
|
- GET /api/v1/sites/:id/orders：获取独立站订单列表
|
|||
|
|
- GET /api/v1/sites/:id/analytics：获取独立站分析数据
|
|||
|
|
- GET /api/v1/templates：获取可用模板列表
|