666 lines
16 KiB
Markdown
666 lines
16 KiB
Markdown
# 数据分析页面 UI 设计文档
|
||
|
||
## 📋 文档说明
|
||
|
||
本文档记录了**数据分析中心页面**的 UI 设计实现，遵循项目的 UI 设计规范，采用现代简约的设计风格，提供清晰直观的数据可视化界面。
|
||
|
||
### 页面访问 URL
|
||
|
||
#### 主页面路径
|
||
- **完整路径**：`/pages/mall/analytics/index`
|
||
- **页面标题**：数据分析中心
|
||
- **导航栏样式**：自定义导航栏（`navigationStyle: "custom"`）
|
||
- **路由配置位置**：`subPackages` → `pages/mall/analytics` → `index`
|
||
|
||
#### 相关子页面 URL
|
||
|
||
- **销售报表**：`/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`
|
||
- **报表详情**：`/pages/mall/analytics/report-detail`
|
||
- **数据分析详情**：`/pages/mall/analytics/data-detail`
|
||
- **数据洞察详情**：`/pages/mall/analytics/insight-detail`
|
||
|
||
### 访问方式
|
||
|
||
#### 1. 代码中跳转（uni-app x）
|
||
|
||
```typescript
|
||
// 方式一：使用 navigateTo（推荐，保留返回栈）
|
||
uni.navigateTo({
|
||
url: '/pages/mall/analytics/index'
|
||
})
|
||
|
||
// 方式二：使用 redirectTo（替换当前页面，不保留返回栈）
|
||
uni.redirectTo({
|
||
url: '/pages/mall/analytics/index'
|
||
})
|
||
|
||
// 方式三：使用 reLaunch（关闭所有页面，打开新页面）
|
||
uni.reLaunch({
|
||
url: '/pages/mall/analytics/index'
|
||
})
|
||
```
|
||
|
||
#### 2. 从其他页面跳转示例
|
||
|
||
```typescript
|
||
// 从管理后台跳转到数据分析中心
|
||
const goToAnalytics = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/mall/analytics/index'
|
||
})
|
||
}
|
||
|
||
// 从首页跳转到数据分析中心
|
||
const goToDataAnalysis = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/mall/analytics/index',
|
||
success: () => {
|
||
console.log('跳转成功')
|
||
},
|
||
fail: (err) => {
|
||
console.error('跳转失败:', err)
|
||
}
|
||
})
|
||
}
|
||
```
|
||
|
||
#### 3. 带参数跳转
|
||
|
||
```typescript
|
||
// 跳转并传递参数
|
||
uni.navigateTo({
|
||
url: '/pages/mall/analytics/index?period=30d&refresh=true'
|
||
})
|
||
|
||
// 在目标页面接收参数（index.uvue 的 onLoad）
|
||
onLoad(options: any) {
|
||
const period = options.period || '30d'
|
||
const refresh = options.refresh === 'true'
|
||
if (period) {
|
||
this.period = period
|
||
}
|
||
if (refresh) {
|
||
this.refreshData()
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 4. 页面间跳转
|
||
|
||
```typescript
|
||
// 从数据分析首页跳转到销售报表
|
||
const goToSalesReport = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/mall/analytics/sales-report'
|
||
})
|
||
}
|
||
|
||
// 从数据分析首页跳转到用户分析
|
||
const goToUserAnalysis = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/mall/analytics/user-analysis'
|
||
})
|
||
}
|
||
```
|
||
|
||
#### 5. 权限控制示例
|
||
|
||
```typescript
|
||
// 跳转前检查权限
|
||
const goToAnalyticsWithAuth = () => {
|
||
// 检查用户是否有数据分析权限
|
||
const userType = getUserType() // 假设这是获取用户类型的函数
|
||
|
||
if (userType === 'admin' || userType === 'analyst') {
|
||
uni.navigateTo({
|
||
url: '/pages/mall/analytics/index'
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '您没有访问权限',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 6. 在页面配置中设置入口
|
||
|
||
如果需要在 TabBar 或其他导航中添加入口，可以在 `pages.json` 中配置：
|
||
|
||
```json
|
||
{
|
||
"tabBar": {
|
||
"list": [
|
||
{
|
||
"pagePath": "pages/mall/analytics/index",
|
||
"text": "数据分析"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
### 设计原则
|
||
|
||
1. **数据优先**：突出核心数据指标，减少视觉干扰
|
||
2. **层次清晰**：通过卡片、阴影、间距建立清晰的信息层次
|
||
3. **视觉统一**：遵循项目统一的颜色系统和设计规范
|
||
4. **响应式适配**：适配不同屏幕尺寸，确保良好的用户体验
|
||
|
||
---
|
||
|
||
## 一、页面结构
|
||
|
||
### 1.1 整体布局
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ Header（头部控制面板） │
|
||
│ - 标题 + 最后更新时间 │
|
||
│ - 刷新/导出按钮 │
|
||
├─────────────────────────────────────┤
|
||
│ 实时大屏（4个核心指标卡片） │
|
||
│ - GMV / 订单 / 用户 / 转化率 │
|
||
├─────────────────────────────────────┤
|
||
│ 时间筛选（Tab切换） │
|
||
│ - 今日/本周/本月/本季度 │
|
||
├─────────────────────────────────────┤
|
||
│ 销售分析 │
|
||
│ - 销售趋势图 │
|
||
│ - 商品销量排行 │
|
||
├─────────────────────────────────────┤
|
||
│ 用户行为分析 │
|
||
│ - 用户活跃度 │
|
||
│ - 流量来源 │
|
||
├─────────────────────────────────────┤
|
||
│ 商家表现 │
|
||
│ - 商家排行榜 │
|
||
├─────────────────────────────────────┤
|
||
│ 配送效率 │
|
||
│ - 配送时效 │
|
||
│ - 配送覆盖 │
|
||
├─────────────────────────────────────┤
|
||
│ 快速分析工具（6个工具卡片） │
|
||
│ - 销售报表/用户分析/商品洞察等 │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
### 1.2 模块划分
|
||
|
||
1. **Header 区域**：页面标题、更新时间、操作按钮
|
||
2. **实时大屏**：核心业务指标（GMV、订单、用户、转化率）
|
||
3. **时间筛选**：时间维度切换（今日/本周/本月/本季度）
|
||
4. **销售分析**：销售趋势、商品排行
|
||
5. **用户行为分析**：用户活跃度、流量来源
|
||
6. **商家表现**：商家销售排行榜
|
||
7. **配送效率**：配送时效、覆盖情况
|
||
8. **快速工具**：常用分析工具入口
|
||
|
||
---
|
||
|
||
## 二、设计规范应用
|
||
|
||
### 2.1 CSS 变量系统
|
||
|
||
所有设计 token 通过 CSS 变量定义，便于统一管理和换肤：
|
||
|
||
```css
|
||
:root {
|
||
/* 主题色 */
|
||
--theme-primary: #FF4D4F;
|
||
--theme-primary-light: #FF7875;
|
||
--theme-primary-dark: #CF1322;
|
||
--gradient-start: #FF4D4F;
|
||
--gradient-end: #FF7A45;
|
||
|
||
/* 功能色 */
|
||
--success: #52C41A;
|
||
--warning: #FAAD14;
|
||
--error: #FF4D4F;
|
||
--info: #1890FF;
|
||
|
||
/* 文字颜色 */
|
||
--text-primary: #111111;
|
||
--text-secondary: #333333;
|
||
--text-tertiary: #666666;
|
||
--text-disabled: #999999;
|
||
|
||
/* 背景颜色 */
|
||
--bg-primary: #FFFFFF;
|
||
--bg-secondary: #F7F8FA;
|
||
--bg-tertiary: #F5F5F5;
|
||
|
||
/* 边框 */
|
||
--border-color: rgba(0, 0, 0, 0.06);
|
||
|
||
/* 阴影 */
|
||
--shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||
--shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||
|
||
/* 圆角 */
|
||
--radius-md: 12rpx;
|
||
--radius-lg: 20rpx;
|
||
--radius-xl: 24rpx;
|
||
|
||
/* 间距 */
|
||
--spacing-sm: 16rpx;
|
||
--spacing-md: 24rpx;
|
||
--spacing-lg: 32rpx;
|
||
}
|
||
```
|
||
|
||
### 2.2 卡片式设计
|
||
|
||
所有数据模块采用卡片式设计：
|
||
|
||
- **圆角**：`border-radius: 20rpx`（符合 UI 规范）
|
||
- **阴影**：`box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06)`（轻微阴影）
|
||
- **背景**：白色背景 `#FFFFFF`
|
||
- **内边距**：`32rpx`（统一间距）
|
||
- **外边距**：`24rpx`（卡片间距）
|
||
|
||
### 2.3 颜色系统应用
|
||
|
||
#### Header 渐变背景
|
||
```css
|
||
background: linear-gradient(135deg, #FF4D4F 0%, #FF7A45 100%);
|
||
```
|
||
|
||
#### 实时指标卡片渐变
|
||
- **GMV（收入）**：`#FF6B6B → #FF4D4F`（红色渐变）
|
||
- **订单**：`#4ECDC4 → #44A08D`（青色渐变）
|
||
- **用户**：`#A8E6CF → #7FCDBB`（绿色渐变）
|
||
- **转化率**：`#FFD93D → #FFA07A`（黄色渐变）
|
||
|
||
#### 状态颜色
|
||
- **增长（正）**：绿色 `#52C41A` + 浅绿背景
|
||
- **下降（负）**：红色 `#FF4D4F` + 浅红背景
|
||
- **中性**：灰色 `#666666` + 浅灰背景
|
||
|
||
---
|
||
|
||
## 三、组件设计详解
|
||
|
||
### 3.1 Header 头部
|
||
|
||
**设计特点**：
|
||
- 使用主题色渐变背景
|
||
- 左侧显示标题和更新时间
|
||
- 右侧操作按钮使用毛玻璃效果
|
||
|
||
**实现代码**：
|
||
```css
|
||
.header {
|
||
background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
|
||
padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.refresh-btn,
|
||
.export-btn {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 50%;
|
||
backdrop-filter: blur(10rpx);
|
||
}
|
||
```
|
||
|
||
### 3.2 实时大屏卡片
|
||
|
||
**设计特点**：
|
||
- 2x2 网格布局
|
||
- 每个卡片使用不同渐变背景
|
||
- 数值突出显示，增长指标使用标签样式
|
||
|
||
**布局**：
|
||
```css
|
||
.dashboard-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.dashboard-card {
|
||
width: calc(50% - var(--spacing-md) / 2);
|
||
padding: var(--spacing-lg) var(--spacing-md);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
```
|
||
|
||
### 3.3 时间筛选 Tab
|
||
|
||
**设计特点**：
|
||
- 激活状态使用主题色渐变
|
||
- 添加阴影效果增强层次
|
||
- 平滑过渡动画
|
||
|
||
**实现**：
|
||
```css
|
||
.filter-tab.active {
|
||
background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
|
||
color: #fff;
|
||
font-weight: 500;
|
||
box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
|
||
}
|
||
```
|
||
|
||
### 3.4 销售分析卡片
|
||
|
||
**设计特点**：
|
||
- 图表区域使用浅色背景区分
|
||
- 统计项使用独立卡片样式
|
||
- 数值使用主题色突出
|
||
|
||
**布局**：
|
||
```css
|
||
.trend-stats {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.stat-item {
|
||
flex: 1;
|
||
padding: var(--spacing-md);
|
||
background: var(--bg-secondary);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
```
|
||
|
||
### 3.5 商品排行
|
||
|
||
**设计特点**：
|
||
- 排名使用圆形徽章，使用主题色渐变
|
||
- 商品名称和销量清晰对比
|
||
- 统一的分割线
|
||
|
||
**实现**：
|
||
```css
|
||
.rank-number {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
|
||
border-radius: 50%;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
```
|
||
|
||
### 3.6 用户行为分析
|
||
|
||
**设计特点**：
|
||
- 指标使用列表式展示
|
||
- 流量来源使用进度条可视化
|
||
- 进度条使用主题色渐变
|
||
|
||
**进度条实现**：
|
||
```css
|
||
.progress-bar {
|
||
height: 100%;
|
||
background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
|
||
border-radius: 12rpx;
|
||
transition: width 0.3s ease;
|
||
}
|
||
```
|
||
|
||
### 3.7 商家排行榜
|
||
|
||
**设计特点**：
|
||
- 排名徽章使用金银铜渐变
|
||
- 增长率使用彩色标签
|
||
- 商家信息清晰展示
|
||
|
||
**排名徽章**：
|
||
```css
|
||
.rank-gold {
|
||
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
|
||
}
|
||
|
||
.rank-silver {
|
||
background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%);
|
||
}
|
||
|
||
.rank-bronze {
|
||
background: linear-gradient(135deg, #CD7F32 0%, #B8860B 100%);
|
||
}
|
||
```
|
||
|
||
### 3.8 快速工具卡片
|
||
|
||
**设计特点**：
|
||
- 3 列网格布局
|
||
- 点击反馈效果
|
||
- 图标 + 标题 + 描述
|
||
|
||
**交互效果**：
|
||
```css
|
||
.tool-card:active {
|
||
transform: scale(0.98);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 四、响应式设计
|
||
|
||
### 4.1 断点设置
|
||
|
||
- **默认**：>= 768rpx（双列布局）
|
||
- **小屏**：< 768rpx（单列布局）
|
||
|
||
### 4.2 响应式规则
|
||
|
||
```css
|
||
@media screen and (max-width: 768rpx) {
|
||
/* 实时大屏卡片改为单列 */
|
||
.dashboard-card {
|
||
width: 100%;
|
||
}
|
||
|
||
/* 工具卡片改为 2 列 */
|
||
.tool-card {
|
||
width: calc(50% - var(--spacing-md) / 2);
|
||
}
|
||
|
||
/* 配送分析改为纵向布局 */
|
||
.delivery-metrics {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
```
|
||
|
||
### 4.3 适配策略
|
||
|
||
1. **实时大屏**：小屏下改为单列，保持卡片完整性
|
||
2. **工具卡片**：小屏下改为 2 列，提升空间利用率
|
||
3. **配送分析**：小屏下改为纵向堆叠，避免内容挤压
|
||
|
||
---
|
||
|
||
## 五、交互设计
|
||
|
||
### 5.1 操作反馈
|
||
|
||
- **按钮点击**：缩放效果 `transform: scale(0.98)`
|
||
- **Tab 切换**：平滑过渡动画 `transition: all 0.3s`
|
||
- **进度条**：宽度变化动画 `transition: width 0.3s ease`
|
||
|
||
### 5.2 数据刷新
|
||
|
||
- **刷新按钮**：点击后显示加载状态
|
||
- **数据更新**：更新时间实时显示
|
||
- **错误处理**：友好的错误提示
|
||
|
||
### 5.3 导出功能
|
||
|
||
- **导出选项**：Excel / PDF / 图片
|
||
- **加载提示**：导出过程中显示加载动画
|
||
- **成功反馈**：导出成功后 Toast 提示
|
||
|
||
---
|
||
|
||
## 六、数据可视化
|
||
|
||
### 6.1 图表占位
|
||
|
||
当前使用占位符，后续可集成图表库：
|
||
|
||
- **销售趋势图**：折线图或面积图
|
||
- **商品销量排行**：柱状图或条形图
|
||
- **流量来源**：饼图或环形图
|
||
|
||
### 6.2 推荐图表库
|
||
|
||
- **uni-app x 兼容**：需使用原生图表组件
|
||
- **Web 端**：可使用 ECharts、Chart.js 等
|
||
- **移动端**：可使用 uni-charts 或自定义 Canvas 绘制
|
||
|
||
---
|
||
|
||
## 七、性能优化
|
||
|
||
### 7.1 数据加载
|
||
|
||
- **分步加载**：先加载核心指标，再加载详细数据
|
||
- **缓存策略**：合理使用数据缓存，减少重复请求
|
||
- **防抖处理**：刷新操作添加防抖，避免频繁请求
|
||
|
||
### 7.2 渲染优化
|
||
|
||
- **虚拟列表**：长列表使用虚拟滚动
|
||
- **懒加载**：非首屏内容延迟加载
|
||
- **图片优化**：使用合适的图片格式和尺寸
|
||
|
||
---
|
||
|
||
## 八、后续优化建议
|
||
|
||
### 8.1 功能增强
|
||
|
||
1. **实时数据推送**：使用 WebSocket 实现数据实时更新
|
||
2. **数据钻取**：点击指标可查看详细数据
|
||
3. **自定义看板**：允许用户自定义指标和布局
|
||
4. **数据对比**：支持多时间段数据对比
|
||
5. **导出增强**：支持自定义导出字段和格式
|
||
|
||
### 8.2 UI 优化
|
||
|
||
1. **图表集成**：集成专业图表库，替换占位符
|
||
2. **动画效果**：添加数据变化动画，提升视觉体验
|
||
3. **暗色模式**：支持暗色主题切换
|
||
4. **国际化**：支持多语言切换
|
||
|
||
### 8.3 交互优化
|
||
|
||
1. **下拉刷新**：支持下拉刷新数据
|
||
2. **上拉加载**：长列表支持上拉加载更多
|
||
3. **手势操作**：支持滑动切换时间维度
|
||
4. **快捷操作**：添加常用操作的快捷入口
|
||
|
||
---
|
||
|
||
## 九、技术实现
|
||
|
||
### 9.1 文件结构
|
||
|
||
```
|
||
pages/mall/analytics/
|
||
├── index.uvue # 数据分析首页
|
||
├── profile.uvue # 数据分析个人中心
|
||
└── report-detail.uvue # 报表详情页
|
||
```
|
||
|
||
### 9.2 核心代码结构
|
||
|
||
```vue
|
||
<template>
|
||
<!-- Header -->
|
||
<view class="header">...</view>
|
||
|
||
<!-- 实时大屏 -->
|
||
<view class="dashboard-section">...</view>
|
||
|
||
<!-- 时间筛选 -->
|
||
<view class="time-filter-section">...</view>
|
||
|
||
<!-- 各分析模块 -->
|
||
<view class="sales-analysis-section">...</view>
|
||
...
|
||
</template>
|
||
|
||
<script lang="uts">
|
||
// 数据定义
|
||
// 方法实现
|
||
</script>
|
||
|
||
<style>
|
||
/* CSS 变量定义 */
|
||
/* 组件样式 */
|
||
/* 响应式样式 */
|
||
</style>
|
||
```
|
||
|
||
### 9.3 数据接口
|
||
|
||
当前使用 Supabase 查询数据，主要涉及：
|
||
|
||
- `orders` 表：订单数据
|
||
- `users` 表：用户数据
|
||
- `user_sessions` 表：用户会话数据（如果存在）
|
||
|
||
---
|
||
|
||
## 十、设计规范遵循
|
||
|
||
### 10.1 颜色系统 ✅
|
||
|
||
- ✅ 使用主题色 `#FF4D4F` 作为主色调
|
||
- ✅ 使用渐变色增强视觉效果
|
||
- ✅ 使用功能色表示状态（成功/警告/错误）
|
||
|
||
### 10.2 间距系统 ✅
|
||
|
||
- ✅ 使用统一的间距变量（`--spacing-sm/md/lg`）
|
||
- ✅ 卡片间距统一为 `24rpx`
|
||
- ✅ 内容内边距统一为 `32rpx`
|
||
|
||
### 10.3 圆角系统 ✅
|
||
|
||
- ✅ 卡片圆角统一为 `20rpx`
|
||
- ✅ 小元素圆角为 `12rpx`
|
||
- ✅ 圆形元素使用 `50%`
|
||
|
||
### 10.4 阴影系统 ✅
|
||
|
||
- ✅ 卡片使用轻微阴影 `0 2rpx 8rpx rgba(0, 0, 0, 0.06)`
|
||
- ✅ 激活状态使用增强阴影
|
||
- ✅ 按钮使用阴影增强层次
|
||
|
||
---
|
||
|
||
## 十一、总结
|
||
|
||
数据分析页面 UI 设计完全遵循项目的 UI 设计规范，实现了：
|
||
|
||
1. ✅ **统一的视觉风格**：使用项目统一的颜色系统和设计 token
|
||
2. ✅ **清晰的信息层次**：通过卡片、阴影、间距建立清晰层次
|
||
3. ✅ **良好的用户体验**：响应式设计、交互反馈、数据可视化
|
||
4. ✅ **可维护的代码**：CSS 变量系统、模块化设计、清晰的代码结构
|
||
|
||
页面已实现核心功能，后续可根据实际需求进行功能增强和 UI 优化。
|
||
|
||
---
|
||
|
||
**文档版本**: v1.0
|
||
**创建时间**: 2025-01-XX
|
||
**最后更新**: 2025-01-XX
|
||
**状态**: ✅ 已完成
|