wurenzhi/makemd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
427becbc8f24915a6dfe0d9dfe2dde873ad003df
makemd/docs/01_Architecture/frontend/04_IndependentSite.md
wurenzhi eafa1bbe94 feat: 添加货币和汇率管理功能 
refactor: 重构前端路由和登录逻辑

docs: 更新业务闭环、任务和架构文档

style: 调整代码格式和文件结构

chore: 更新依赖项和配置文件
2026-03-19 19:08:15 +08:00

4.8 KiB
Raw Blame History

独立站 页面前端业务说明书

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：获取可用模板列表
Reference in New Issue View Git Blame Copy Permalink