# 数据分析页面 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  
**状态**: ✅ 已完成