huangzhenbao/medical-mall

Fork 0

Files

comlibmb c14f67cfc8 数据分析页面骨架

2026-01-23 16:33:11 +08:00

24 KiB

Raw Blame History

数据分析模块页面分析文档

📋 文档说明

本文档基于项目文档（pages/mall/mall.md）、目录结构和页面配置，分析数据分析模块需要实现的页面清单。

数据来源:

pages/mall/mall.md - 项目完整需求文档（第2.6节：数据分析端，第10节：数据统计分析）
pages/mall/pages-config.json - 页面路由配置
docs/ANALYTICS_UI_DESIGN.md - UI设计文档

创建时间: 2025-01-XX
最后更新: 2026-01-23（页面骨架创建完成）

✅ 数据分析模块 URL / 路由访问（可直接复制）

1) 主页面 URL

数据分析中心首页：/pages/mall/analytics/index

2) 子页面 URL（analytics 子包）

销售报表：/pages/mall/analytics/sales-report
用户分析：/pages/mall/analytics/user-analysis
商品洞察：/pages/mall/analytics/product-insights
市场趋势：/pages/mall/analytics/market-trends
自定义报表：/pages/mall/analytics/custom-report

3) 详情页 URL（主包 pages 中配置）

报表详情：/pages/mall/analytics/report-detail
数据分析详情：/pages/mall/analytics/data-detail
数据洞察详情：/pages/mall/analytics/insight-detail

4) 代码中如何访问（uni-app x）

// 进入数据分析中心首页（推荐：保留返回栈）
uni.navigateTo({ url: '/pages/mall/analytics/index' })

// 进入销售报表
uni.navigateTo({ url: '/pages/mall/analytics/sales-report' })

// 进入用户分析
uni.navigateTo({ url: '/pages/mall/analytics/user-analysis' })

注意：switchTab 只能用于 tabBar.list 里的页面；数据分析不在 tabBar 内，因此应使用 navigateTo/redirectTo/reLaunch。

一、已实现的页面

1.1 核心页面（已存在）

页面路径	文件状态	功能描述	配置状态
`/pages/mall/analytics/index`	✅ 已实现	数据分析中心首页	✅ 已配置
`/pages/mall/analytics/profile`	✅ 已实现	数据分析个人中心	⚠️ 未在配置中
`/pages/mall/analytics/report-detail`	✅ 已实现	报表详情页	✅ 已配置

二、需要实现的页面（根据配置和文档）

2.1 子包页面（subPackages 中已配置）

2.1.1 销售报表 (`sales-report`)

路径: pages/mall/analytics/sales-report
标题: 销售报表
状态: ❌ 未实现
功能需求:
- 销售趋势分析（日/周/月/年）
- 销售数据统计（GMV、订单数、客单价）
- 商品销售排行
- 商家销售排行
- 销售地域分布
- 数据导出功能

2.1.2 用户分析 (`user-analysis`)

路径: pages/mall/analytics/user-analysis
标题: 用户分析
状态: ❌ 未实现
功能需求:
- 用户增长趋势
- 用户活跃度分析
- 用户留存率
- 用户画像分析
- 用户行为路径
- 新老用户对比

2.1.3 商品洞察 (`product-insights`)

路径: pages/mall/analytics/product-insights
标题: 商品洞察
状态: ❌ 未实现
功能需求:
- 商品销售分析
- 商品分类分析
- 热销商品排行
- 商品库存分析
- 商品价格趋势
- 商品评价分析

2.1.4 市场趋势 (`market-trends`)

路径: pages/mall/analytics/market-trends
标题: 市场趋势
状态: ❌ 未实现
功能需求:
- 市场整体趋势
- 行业对比分析
- 季节性趋势
- 价格趋势分析
- 竞争分析

2.1.5 优惠券效果分析 (`coupon-analysis`)

路径: pages/mall/analytics/coupon-analysis
标题: 优惠券效果分析
状态: ❌ 未实现
功能需求（基于 mall.md 第4节优惠券系统）:
- 优惠券发放统计（8种券类型：满减券、折扣券、免运费券、新人券、会员券、品类券、商家券、限时券）
- 优惠券使用率分析
- 优惠券转化效果（GMV提升、订单增长）
- 优惠券ROI分析
- 发放渠道效果对比（主动领取、自动发放、活动赠送、邀请奖励、客服赠送、积分兑换）
- 优惠券到期提醒统计
- 优惠券使用趋势分析

2.1.6 自定义报表 (`custom-report`)

路径: pages/mall/analytics/custom-report
标题: 自定义报表
状态: ❌ 未实现
功能需求:
- 报表创建/编辑
- 指标选择
- 时间维度选择
- 图表类型选择
- 报表保存/分享
- 报表模板管理

2.2 主包页面（pages 中已配置）

2.2.1 数据分析详情 (`data-detail`)

路径: pages/mall/analytics/data-detail
标题: 数据分析详情
状态: ❌ 未实现
功能需求:
- 详细数据展示
- 数据钻取
- 数据对比
- 数据筛选

2.2.2 数据洞察详情 (`insight-detail`)

路径: pages/mall/analytics/insight-detail
标题: 数据洞察详情
状态: ❌ 未实现
功能需求（基于 mall.md 第2.6节：预测分析和建议）:
- 洞察详情展示
- 预测分析（销售预测、用户增长预测、库存预测）
- 智能建议（运营建议、商品建议、营销建议）
- 异常检测和预警
- 趋势预测可视化

三、页面功能模块分析

3.1 首页功能模块（index.uvue）

根据 ANALYTICS_UI_DESIGN.md，首页应包含以下模块：

Header 区域
- ✅ 页面标题
- ✅ 最后更新时间
- ✅ 刷新/导出按钮
- ✅ 更多操作按钮（搜索、通知、全屏、移动端、设置）
实时大屏（KPI 卡片）
- ✅ 实时 GMV
- ✅ 实时订单
- ✅ 在线用户
- ✅ 转化率
时间筛选
- ✅ 7天/30天/90天/1年切换
核心趋势图表
- ✅ GMV/订单数组合图（柱状+折线）
用户结构分析
- ✅ 用户构成环形图
流量来源分析
- ✅ 流量来源条形图
商品/商家排行
- ✅ 热销商品 TOP
- ✅ 商家排行 TOP
配送效率（基于 mall.md 第10.1节配送指标）
- ⚠️ 配送效率图表（待完善）
- 配送时效分析
- 配送费用统计
- 配送员效率分析
- 客户满意度统计
优惠券效果分析（基于 mall.md 第2.6节）
- ❌ 优惠券效果分析（待实现）
- 优惠券发放统计
- 优惠券使用率
- 优惠券转化效果
预测分析和建议（基于 mall.md 第2.6节）
- ❌ 预测分析（待实现）
- 销售预测
- 用户增长预测
- 智能运营建议

3.2 个人中心功能模块（profile.uvue）

✅ 用户信息展示
✅ 数据分析偏好设置
✅ 报表收藏管理
✅ 导出历史记录

3.3 报表详情功能模块（report-detail.uvue）

✅ 报表数据展示
✅ 图表展示
✅ 数据导出
✅ 报表分享

四、基于 `mall.md` 的统计指标需求

4.1 运营指标（`mall.md` 第10.1节）

根据项目需求文档，数据分析端需要统计以下运营指标：

GMV（成交总额） - 核心业务指标
订单量和转化率 - 业务转化效率
用户活跃度 - 用户参与度
客单价 - 平均订单金额
复购率 - 用户忠诚度指标

4.2 商家指标（`mall.md` 第10.1节）

销售额和利润 - 商家经营状况
商品销量排行 - 热销商品分析
评价和服务质量 - 商家服务质量
库存周转率 - 库存管理效率

4.3 配送指标（`mall.md` 第10.1节）

配送时效 - 配送速度指标
配送费用 - 成本控制
配送员效率 - 人员效率分析
客户满意度 - 服务质量

4.4 统计数据模型（`mall.md` 第10.2节）

项目定义了 daily_statistics 表用于日常统计：

CREATE TABLE daily_statistics (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    stat_date DATE NOT NULL,
    merchant_id UUID REFERENCES merchants(id),
    total_orders INTEGER DEFAULT 0,
    total_amount DECIMAL(12,2) DEFAULT 0,
    total_users INTEGER DEFAULT 0,
    new_users INTEGER DEFAULT 0,
    total_products INTEGER DEFAULT 0,
    avg_order_amount DECIMAL(10,2) DEFAULT 0,
    created_at TIMESTAMPTZ DEFAULT NOW(),
    UNIQUE(stat_date, merchant_id)
);

数据查询需求:

按日期聚合统计数据
按商家维度统计
支持时间范围查询
支持数据对比分析

五、页面实现优先级

5.1 高优先级（核心功能，基于 `mall.md` 第2.6节）

销售报表 (sales-report) - 核心业务分析
- 对应需求：销售数据分析
- 包含指标：GMV、订单量、转化率、客单价
用户分析 (user-analysis) - 用户运营分析
- 对应需求：用户行为分析
- 包含指标：用户活跃度、复购率、新用户增长
商品洞察 (product-insights) - 商品运营分析
- 对应需求：商家表现分析（商品维度）
- 包含指标：商品销量排行、库存周转率
配送效率分析 - 配送系统分析
- 对应需求：配送效率分析
- 包含指标：配送时效、配送费用、配送员效率、客户满意度

5.2 中优先级（增强功能）

优惠券效果分析 (coupon-analysis) - 营销效果分析
- 对应需求：优惠券效果分析（mall.md 第2.6节）
- 包含：8种券类型分析、发放渠道效果、ROI分析
市场趋势 (market-trends) - 市场分析
- 对应需求：市场整体趋势分析
数据分析详情 (data-detail) - 数据钻取
- 支持所有报表页面的详细数据查看
数据洞察详情 (insight-detail) - 智能分析
- 对应需求：预测分析和建议（mall.md 第2.6节）

5.3 低优先级（高级功能）

自定义报表 (custom-report) - 高级定制功能
- 允许用户自定义报表配置

六、数据分析端核心功能（基于 `mall.md` 第2.6节）

根据项目需求文档，数据分析端（Analytics Dashboard）的目标用户是运营和分析师，需要实现以下核心功能：

6.1 实时数据大屏 ✅

状态: 已实现（首页 KPI 卡片）
包含: GMV、订单数、在线用户、转化率

6.2 销售数据分析 ⚠️

状态: 部分实现（首页有核心趋势图）
待完善: 需要独立的销售报表页面
包含: 销售趋势、GMV分析、订单分析、客单价分析

6.3 用户行为分析 ⚠️

状态: 部分实现（首页有用户结构分析）
待完善: 需要独立的用户分析页面
包含: 用户增长、活跃度、留存率、行为路径

6.4 商家表现分析 ⚠️

状态: 部分实现（首页有商家排行）
待完善: 需要独立的商家分析页面
包含: 销售额、利润、商品排行、服务质量、库存周转率

6.5 配送效率分析 ⚠️

状态: 部分实现（首页有配送效率图表占位）
待完善: 需要完整的配送效率分析
包含: 配送时效、配送费用、配送员效率、客户满意度

6.6 优惠券效果分析 ❌

状态: 未实现
优先级: 中优先级
包含: 8种券类型效果、发放渠道效果、使用率、ROI分析

6.7 预测分析和建议 ❌

状态: 未实现
优先级: 中优先级
包含: 销售预测、用户增长预测、智能运营建议、异常检测

七、页面依赖关系

index (首页)
├── sales-report (销售报表)
│   └── report-detail (报表详情)
├── user-analysis (用户分析)
│   └── data-detail (数据分析详情)
├── product-insights (商品洞察)
│   └── data-detail (数据分析详情)
├── coupon-analysis (优惠券效果分析) [新增，基于 mall.md]
│   └── report-detail (报表详情)
├── market-trends (市场趋势)
│   └── insight-detail (数据洞察详情)
└── custom-report (自定义报表)
    └── report-detail (报表详情)

profile (个人中心)
└── 所有报表页面的收藏/历史记录入口

八、组件复用分析

6.1 已实现的组件

✅ AnalyticsComboChart.uvue - 组合图表（柱状+折线）
✅ AnalyticsDonutChart.uvue - 环形图
✅ AnalyticsBarMini.uvue - 迷你柱状图
✅ ChartCard.uvue - 图表卡片容器
✅ KpiCard.uvue - KPI 指标卡片
✅ PeriodTabs.uvue - 时间维度切换

6.2 需要新增的组件

❌ SalesTrendChart.uvue - 销售趋势图
❌ UserGrowthChart.uvue - 用户增长图
❌ ProductRankingChart.uvue - 商品排行图
❌ RegionDistributionChart.uvue - 地域分布图
❌ CustomReportBuilder.uvue - 自定义报表构建器
❌ DataTable.uvue - 数据表格组件
❌ ExportDialog.uvue - 导出对话框

九、数据接口需求

7.1 销售报表接口

销售趋势数据（按时间维度）
销售统计数据（GMV、订单数、客单价）
商品销售排行
商家销售排行
销售地域分布

7.2 用户分析接口

用户增长趋势
用户活跃度数据
用户留存率数据
用户画像数据
用户行为路径数据

7.3 商品洞察接口

商品销售数据
商品分类数据
热销商品数据
商品库存数据
商品价格趋势

7.4 市场趋势接口

市场整体趋势
行业对比数据
季节性趋势数据
价格趋势数据

7.5 优惠券效果分析接口（基于 `mall.md` 第4节）

优惠券发放统计（按类型、渠道）
优惠券使用率数据
优惠券转化效果（GMV提升、订单增长）
优惠券ROI数据
优惠券到期提醒统计
优惠券使用趋势

7.6 配送效率分析接口（基于 `mall.md` 第6节）

配送时效统计（平均配送时间、准时率）
配送费用统计（总费用、平均费用）
配送员效率数据（订单数、评分）
客户满意度数据（评价、投诉）

7.7 预测分析接口（基于 `mall.md` 第2.6节）

销售预测数据
用户增长预测
库存预测
异常检测数据
智能建议数据

7.8 自定义报表接口

报表模板列表
报表创建/更新
报表数据查询
报表保存/分享

7.9 日常统计数据接口（基于 `mall.md` 第10.2节）

按日期查询统计数据
按商家维度统计
时间范围聚合查询
数据对比分析

十、实现建议

8.1 技术实现

统一使用 Supabase 查询
- 所有数据查询通过 @/components/supadb/aksupainstance.uts
- 使用 RLS (Row Level Security) 控制数据权限
图表组件统一
- 使用 @/uni_modules/charts/EChartsView.vue
- 封装统一的图表配置
响应式设计
- 使用 flex-direction: row !important 避免全局样式影响
- 使用媒体查询实现响应式布局

8.2 开发顺序建议

第一阶段：完善首页功能
- 完善配送效率图表
- 优化数据加载性能
第二阶段：实现核心报表页面
- 销售报表
- 用户分析
- 商品洞察
第三阶段：实现增强功能
- 市场趋势
- 数据分析详情
- 数据洞察详情
第四阶段：实现高级功能
- 自定义报表

8.3 代码规范

文件命名
- 页面文件：*.uvue
- 组件文件：*.uvue
- 样式统一使用 px 单位（避免 rpx + CSS var 问题）

代码结构

<template>
  <!-- 页面结构 -->
</template>

<script lang="uts">
  // 导入
  // 类型定义
  // 组件定义
  // 数据定义
  // 生命周期
  // 方法定义
</script>

<style>
  /* 强制横排样式 */
  /* 组件样式 */
  /* 响应式样式 */
</style>

十一、总结

11.1 页面统计

已实现（完整功能）: 3 个页面
- index.uvue - 数据分析中心首页 ✅
- profile.uvue - 数据分析个人中心 ✅
- report-detail.uvue - 报表详情页 ✅
已创建骨架（待实现功能）: 9 个页面
- sales-report.uvue - 销售报表 ⚠️
- user-analysis.uvue - 用户分析 ⚠️
- product-insights.uvue - 商品洞察 ⚠️
- delivery-analysis.uvue - 配送效率分析 ⚠️
- coupon-analysis.uvue - 优惠券效果分析 ⚠️
- market-trends.uvue - 市场趋势 ⚠️
- insight-detail.uvue - 数据洞察详情 ⚠️
- data-detail.uvue - 数据分析详情 ⚠️
- custom-report.uvue - 自定义报表 ⚠️
总计: 12 个页面

11.2 完成度（基于 `mall.md` 需求）

实时数据大屏: 90% ✅（首页已实现）
销售数据分析: 50% ⚠️（页面骨架已创建，待实现数据查询）
用户行为分析: 50% ⚠️（页面骨架已创建，待实现数据查询）
商家表现分析: 50% ⚠️（商品洞察页面骨架已创建，待实现数据查询）
配送效率分析: 50% ⚠️（页面骨架已创建，待实现数据查询）
优惠券效果分析: 50% ⚠️（页面骨架已创建，待实现数据查询）
预测分析和建议: 50% ⚠️（数据洞察详情页面骨架已创建，待实现预测算法）

11.3 页面骨架创建状态

✅ 已完成页面骨架创建（2026-01-23）:

所有9个待实现页面的骨架已创建完成，包含：

统一的页面结构
- 顶部栏（菜单图标 + 标题 + 操作按钮）
- 时间维度筛选（7天/30天/90天/1年）
- KPI 指标卡片（响应式布局）
- 图表展示区域
- 数据列表/排行
- 统一的样式规范
技术实现框架
- 使用 flex-direction: row !important 避免全局样式影响
- 响应式设计（宽屏/窄屏适配）
- 统一的组件导入（Supabase、EChartsView）
- 完整的类型定义（TypeScript/UTS）
- 方法框架（数据加载、图表构建、导出等）
待实现功能（标记为 TODO）
- 数据查询逻辑（Supabase 查询）
- 图表配置构建
- 数据导出功能
- 数据钻取逻辑

11.4 下一步行动（按优先级）

第一阶段（核心功能 - 数据查询实现）:

✅ 完善首页的配送效率图表
⚠️ 实现销售报表页面数据查询（GMV、订单量、转化率、客单价）
⚠️ 实现用户分析页面数据查询（用户增长、活跃度、留存率、复购率）
⚠️ 实现商品洞察页面数据查询（商品销量、库存周转率）

第二阶段（增强功能 - 数据查询实现）: 5. ⚠️ 实现配送效率分析页面数据查询（配送时效、费用、效率、满意度） 6. ⚠️ 实现优惠券效果分析页面数据查询（8种券类型、发放渠道、ROI） 7. ⚠️ 实现市场趋势页面数据查询 8. ⚠️ 实现数据洞察详情页面（预测分析算法、智能建议逻辑）

第三阶段（高级功能 - 完整实现）: 9. ⚠️ 实现自定义报表页面（报表创建、编辑、保存逻辑） 10. ⚠️ 实现数据分析详情页面（数据钻取、筛选、排序逻辑）

十二、参考文档

项目需求文档: pages/mall/mall.md
- 第2.6节：数据分析端功能需求
- 第4节：优惠券系统详细设计
- 第6节：配送系统详细设计
- 第10节：数据统计分析（统计指标、数据模型）
UI设计文档: docs/ANALYTICS_UI_DESIGN.md
页面配置: pages/mall/pages-config.json

十三、页面骨架创建记录

13.1 骨架创建完成时间

创建日期: 2026-01-23

13.2 已创建的页面骨架清单

页面文件	页面标题	骨架状态	功能框架	数据查询	图表配置
`sales-report.uvue`	销售报表	✅ 已创建	✅ 完整	⚠️ 待实现	⚠️ 待实现
`user-analysis.uvue`	用户分析	✅ 已创建	✅ 完整	⚠️ 待实现	⚠️ 待实现
`product-insights.uvue`	商品洞察	✅ 已创建	✅ 完整	⚠️ 待实现	⚠️ 待实现
`delivery-analysis.uvue`	配送效率分析	✅ 已创建	✅ 完整	⚠️ 待实现	⚠️ 待实现
`coupon-analysis.uvue`	优惠券效果分析	✅ 已创建	✅ 完整	⚠️ 待实现	⚠️ 待实现
`market-trends.uvue`	市场趋势	✅ 已创建	✅ 完整	⚠️ 待实现	⚠️ 待实现
`insight-detail.uvue`	数据洞察详情	✅ 已创建	✅ 完整	⚠️ 待实现	⚠️ 待实现
`data-detail.uvue`	数据分析详情	✅ 已创建	✅ 完整	⚠️ 待实现	⚠️ 待实现
`custom-report.uvue`	自定义报表	✅ 已创建	✅ 完整	⚠️ 待实现	⚠️ 待实现

13.3 骨架包含的核心功能

每个页面骨架都包含以下标准功能模块：

顶部栏（Topbar）
- 菜单图标（☰）
- 页面标题和更新时间
- 刷新/导出按钮
- 更多操作菜单（响应式）
时间维度筛选（Tabs）
- 7天/30天/90天/1年切换
- 激活状态样式
- 点击切换数据
KPI 指标卡片（KPI Grid）
- 2列/4列响应式布局
- 指标数值显示
- 增长率对比
- 格式化显示（金额、百分比）
图表展示区域（Chart Cards）
- 图表容器（EChartsView）
- 图表标题和描述
- 统一的图表高度（360px）
数据列表/排行（Rank Lists）
- 排行序号显示
- 数据项信息
- 增长率标签（正负颜色区分）
数据表格（Data Tables）（部分页面）
- 表头（支持排序）
- 表格数据行
- 数据格式化
筛选器（Filters）（部分页面）
- 时间范围选择
- 数据维度选择
- 对比模式切换

13.4 技术实现规范

所有页面骨架遵循以下技术规范：

样式规范
- 使用 flex-direction: row !important 强制横排
- 统一使用 px 单位（避免 rpx + CSS var 问题）
- 响应式断点：960px
- 统一的颜色系统（#111、#f3f4f6、rgba(0,0,0,0.06) 等）
组件导入
- @/components/supadb/aksupainstance.uts - Supabase 查询
- @/uni_modules/charts/EChartsView.vue - 图表组件
- @/components/analytics/AnalyticsComboChart.uvue - 组合图表（部分页面）
类型定义
- 使用 UTS 类型系统
- 定义数据接口类型
- 定义配置项类型
方法框架
- loadXxxData() - 数据加载方法（待实现）
- buildChartOptions() - 图表配置构建（待实现）
- refreshData() - 刷新数据
- exportReport() - 导出报表
- formatInt() / formatMoney() / formatPct() - 数据格式化

13.5 待实现功能清单

每个页面需要实现以下核心功能：

数据查询（Supabase）

根据时间维度查询数据
聚合计算（SUM、COUNT、AVG）
数据对比（同比、环比）
数据筛选（按商家、分类、地域等）

图表配置（ECharts）

构建图表 option 配置
数据格式化（时间轴、数值格式化）
图表样式配置（颜色、字体、间距）
交互配置（tooltip、legend、zoom）

数据导出

Excel 导出
PDF 导出
图片导出（图表截图）
CSV 导出（数据表格）

高级功能

数据钻取（点击数据项查看详情）
数据对比（多时间段对比）
预测分析（算法实现）
智能建议（规则引擎）

文档版本: v3.0
状态: ✅ 页面骨架已完成，📝 数据查询和图表配置待实现
最后更新: 2026-01-23（页面骨架创建完成）

24 KiB Raw Blame History Unescape Escape