772 lines
24 KiB
Markdown
772 lines
24 KiB
Markdown
# 数据分析模块页面分析文档
|
||
|
||
## 📋 文档说明
|
||
|
||
本文档基于项目文档（`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）
|
||
|
||
```ts
|
||
// 进入数据分析中心首页（推荐：保留返回栈）
|
||
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`，首页应包含以下模块：
|
||
|
||
1. **Header 区域**
|
||
- ✅ 页面标题
|
||
- ✅ 最后更新时间
|
||
- ✅ 刷新/导出按钮
|
||
- ✅ 更多操作按钮（搜索、通知、全屏、移动端、设置）
|
||
|
||
2. **实时大屏（KPI 卡片）**
|
||
- ✅ 实时 GMV
|
||
- ✅ 实时订单
|
||
- ✅ 在线用户
|
||
- ✅ 转化率
|
||
|
||
3. **时间筛选**
|
||
- ✅ 7天/30天/90天/1年切换
|
||
|
||
4. **核心趋势图表**
|
||
- ✅ GMV/订单数组合图（柱状+折线）
|
||
|
||
5. **用户结构分析**
|
||
- ✅ 用户构成环形图
|
||
|
||
6. **流量来源分析**
|
||
- ✅ 流量来源条形图
|
||
|
||
7. **商品/商家排行**
|
||
- ✅ 热销商品 TOP
|
||
- ✅ 商家排行 TOP
|
||
|
||
8. **配送效率**（基于 `mall.md` 第10.1节配送指标）
|
||
- ⚠️ 配送效率图表（待完善）
|
||
- 配送时效分析
|
||
- 配送费用统计
|
||
- 配送员效率分析
|
||
- 客户满意度统计
|
||
|
||
9. **优惠券效果分析**（基于 `mall.md` 第2.6节）
|
||
- ❌ 优惠券效果分析（待实现）
|
||
- 优惠券发放统计
|
||
- 优惠券使用率
|
||
- 优惠券转化效果
|
||
|
||
10. **预测分析和建议**（基于 `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` 表用于日常统计：
|
||
|
||
```sql
|
||
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节）
|
||
|
||
1. **销售报表** (`sales-report`) - 核心业务分析
|
||
- 对应需求：销售数据分析
|
||
- 包含指标：GMV、订单量、转化率、客单价
|
||
|
||
2. **用户分析** (`user-analysis`) - 用户运营分析
|
||
- 对应需求：用户行为分析
|
||
- 包含指标：用户活跃度、复购率、新用户增长
|
||
|
||
3. **商品洞察** (`product-insights`) - 商品运营分析
|
||
- 对应需求：商家表现分析（商品维度）
|
||
- 包含指标：商品销量排行、库存周转率
|
||
|
||
4. **配送效率分析** - 配送系统分析
|
||
- 对应需求：配送效率分析
|
||
- 包含指标：配送时效、配送费用、配送员效率、客户满意度
|
||
|
||
### 5.2 中优先级（增强功能）
|
||
|
||
5. **优惠券效果分析** (`coupon-analysis`) - 营销效果分析
|
||
- 对应需求：优惠券效果分析（`mall.md` 第2.6节）
|
||
- 包含：8种券类型分析、发放渠道效果、ROI分析
|
||
|
||
6. **市场趋势** (`market-trends`) - 市场分析
|
||
- 对应需求：市场整体趋势分析
|
||
|
||
7. **数据分析详情** (`data-detail`) - 数据钻取
|
||
- 支持所有报表页面的详细数据查看
|
||
|
||
8. **数据洞察详情** (`insight-detail`) - 智能分析
|
||
- 对应需求：预测分析和建议（`mall.md` 第2.6节）
|
||
|
||
### 5.3 低优先级（高级功能）
|
||
|
||
9. **自定义报表** (`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 技术实现
|
||
|
||
1. **统一使用 Supabase 查询**
|
||
- 所有数据查询通过 `@/components/supadb/aksupainstance.uts`
|
||
- 使用 RLS (Row Level Security) 控制数据权限
|
||
|
||
2. **图表组件统一**
|
||
- 使用 `@/uni_modules/charts/EChartsView.vue`
|
||
- 封装统一的图表配置
|
||
|
||
3. **响应式设计**
|
||
- 使用 `flex-direction: row !important` 避免全局样式影响
|
||
- 使用媒体查询实现响应式布局
|
||
|
||
### 8.2 开发顺序建议
|
||
|
||
1. **第一阶段**：完善首页功能
|
||
- 完善配送效率图表
|
||
- 优化数据加载性能
|
||
|
||
2. **第二阶段**：实现核心报表页面
|
||
- 销售报表
|
||
- 用户分析
|
||
- 商品洞察
|
||
|
||
3. **第三阶段**：实现增强功能
|
||
- 市场趋势
|
||
- 数据分析详情
|
||
- 数据洞察详情
|
||
|
||
4. **第四阶段**：实现高级功能
|
||
- 自定义报表
|
||
|
||
### 8.3 代码规范
|
||
|
||
1. **文件命名**
|
||
- 页面文件：`*.uvue`
|
||
- 组件文件：`*.uvue`
|
||
- 样式统一使用 `px` 单位（避免 rpx + CSS var 问题）
|
||
|
||
2. **代码结构**
|
||
```vue
|
||
<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个待实现页面的骨架已创建完成，包含：
|
||
|
||
1. **统一的页面结构**
|
||
- 顶部栏（菜单图标 + 标题 + 操作按钮）
|
||
- 时间维度筛选（7天/30天/90天/1年）
|
||
- KPI 指标卡片（响应式布局）
|
||
- 图表展示区域
|
||
- 数据列表/排行
|
||
- 统一的样式规范
|
||
|
||
2. **技术实现框架**
|
||
- 使用 `flex-direction: row !important` 避免全局样式影响
|
||
- 响应式设计（宽屏/窄屏适配）
|
||
- 统一的组件导入（Supabase、EChartsView）
|
||
- 完整的类型定义（TypeScript/UTS）
|
||
- 方法框架（数据加载、图表构建、导出等）
|
||
|
||
3. **待实现功能（标记为 TODO）**
|
||
- 数据查询逻辑（Supabase 查询）
|
||
- 图表配置构建
|
||
- 数据导出功能
|
||
- 数据钻取逻辑
|
||
|
||
### 11.4 下一步行动（按优先级）
|
||
|
||
**第一阶段（核心功能 - 数据查询实现）**:
|
||
1. ✅ 完善首页的配送效率图表
|
||
2. ⚠️ 实现销售报表页面数据查询（GMV、订单量、转化率、客单价）
|
||
3. ⚠️ 实现用户分析页面数据查询（用户增长、活跃度、留存率、复购率）
|
||
4. ⚠️ 实现商品洞察页面数据查询（商品销量、库存周转率）
|
||
|
||
**第二阶段（增强功能 - 数据查询实现）**:
|
||
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 骨架包含的核心功能
|
||
|
||
每个页面骨架都包含以下标准功能模块：
|
||
|
||
1. **顶部栏（Topbar）**
|
||
- 菜单图标（☰）
|
||
- 页面标题和更新时间
|
||
- 刷新/导出按钮
|
||
- 更多操作菜单（响应式）
|
||
|
||
2. **时间维度筛选（Tabs）**
|
||
- 7天/30天/90天/1年切换
|
||
- 激活状态样式
|
||
- 点击切换数据
|
||
|
||
3. **KPI 指标卡片（KPI Grid）**
|
||
- 2列/4列响应式布局
|
||
- 指标数值显示
|
||
- 增长率对比
|
||
- 格式化显示（金额、百分比）
|
||
|
||
4. **图表展示区域（Chart Cards）**
|
||
- 图表容器（EChartsView）
|
||
- 图表标题和描述
|
||
- 统一的图表高度（360px）
|
||
|
||
5. **数据列表/排行（Rank Lists）**
|
||
- 排行序号显示
|
||
- 数据项信息
|
||
- 增长率标签（正负颜色区分）
|
||
|
||
6. **数据表格（Data Tables）**（部分页面）
|
||
- 表头（支持排序）
|
||
- 表格数据行
|
||
- 数据格式化
|
||
|
||
7. **筛选器（Filters）**（部分页面）
|
||
- 时间范围选择
|
||
- 数据维度选择
|
||
- 对比模式切换
|
||
|
||
### 13.4 技术实现规范
|
||
|
||
所有页面骨架遵循以下技术规范：
|
||
|
||
1. **样式规范**
|
||
- 使用 `flex-direction: row !important` 强制横排
|
||
- 统一使用 `px` 单位（避免 rpx + CSS var 问题）
|
||
- 响应式断点：960px
|
||
- 统一的颜色系统（#111、#f3f4f6、rgba(0,0,0,0.06) 等）
|
||
|
||
2. **组件导入**
|
||
- `@/components/supadb/aksupainstance.uts` - Supabase 查询
|
||
- `@/uni_modules/charts/EChartsView.vue` - 图表组件
|
||
- `@/components/analytics/AnalyticsComboChart.uvue` - 组合图表（部分页面）
|
||
|
||
3. **类型定义**
|
||
- 使用 UTS 类型系统
|
||
- 定义数据接口类型
|
||
- 定义配置项类型
|
||
|
||
4. **方法框架**
|
||
- `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（页面骨架创建完成）
|