huangzhenbao/medical-mall

Fork 0

Files

comlibmb fdbee0fa32 登录注册/数据分析

2026-01-22 21:15:02 +08:00

16 KiB

Raw Blame History

数据分析页面 UI 设计文档

📋 文档说明

本文档记录了数据分析中心页面的 UI 设计实现，遵循项目的 UI 设计规范，采用现代简约的设计风格，提供清晰直观的数据可视化界面。

页面访问 URL

主页面路径

完整路径：/pages/mall/analytics/index
页面标题：数据分析中心
导航栏样式：自定义导航栏（navigationStyle: "custom"）
路由配置位置：subPackages → pages/mall/analytics → index

访问方式

1. 代码中跳转（uni-app x）

// 方式一：使用 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. 从其他页面跳转示例

// 从管理后台跳转到数据分析中心
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. 带参数跳转

// 跳转并传递参数
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. 页面间跳转

// 从数据分析首页跳转到销售报表
const goToSalesReport = () => {
  uni.navigateTo({
    url: '/pages/mall/analytics/sales-report'
  })
}

// 从数据分析首页跳转到用户分析
const goToUserAnalysis = () => {
  uni.navigateTo({
    url: '/pages/mall/analytics/user-analysis'
  })
}

5. 权限控制示例

// 跳转前检查权限
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 中配置：

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/mall/analytics/index",
        "text": "数据分析"
      }
    ]
  }
}

设计原则

数据优先：突出核心数据指标，减少视觉干扰
层次清晰：通过卡片、阴影、间距建立清晰的信息层次
视觉统一：遵循项目统一的颜色系统和设计规范
响应式适配：适配不同屏幕尺寸，确保良好的用户体验

一、页面结构

1.1 整体布局

┌─────────────────────────────────────┐
│  Header（头部控制面板）              │
│  - 标题 + 最后更新时间               │
│  - 刷新/导出按钮                     │
├─────────────────────────────────────┤
│  实时大屏（4个核心指标卡片）         │
│  - GMV / 订单 / 用户 / 转化率        │
├─────────────────────────────────────┤
│  时间筛选（Tab切换）                 │
│  - 今日/本周/本月/本季度             │
├─────────────────────────────────────┤
│  销售分析                            │
│  - 销售趋势图                        │
│  - 商品销量排行                      │
├─────────────────────────────────────┤
│  用户行为分析                        │
│  - 用户活跃度                        │
│  - 流量来源                          │
├─────────────────────────────────────┤
│  商家表现                            │
│  - 商家排行榜                        │
├─────────────────────────────────────┤
│  配送效率                            │
│  - 配送时效                          │
│  - 配送覆盖                          │
├─────────────────────────────────────┤
│  快速分析工具（6个工具卡片）         │
│  - 销售报表/用户分析/商品洞察等      │
└─────────────────────────────────────┘

1.2 模块划分

Header 区域：页面标题、更新时间、操作按钮
实时大屏：核心业务指标（GMV、订单、用户、转化率）
时间筛选：时间维度切换（今日/本周/本月/本季度）
销售分析：销售趋势、商品排行
用户行为分析：用户活跃度、流量来源
商家表现：商家销售排行榜
配送效率：配送时效、覆盖情况
快速工具：常用分析工具入口

二、设计规范应用

2.1 CSS 变量系统

所有设计 token 通过 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 渐变背景

background: linear-gradient(135deg, #FF4D4F 0%, #FF7A45 100%);

实时指标卡片渐变

GMV（收入）：#FF6B6B → #FF4D4F（红色渐变）
订单：#4ECDC4 → #44A08D（青色渐变）
用户：#A8E6CF → #7FCDBB（绿色渐变）
转化率：#FFD93D → #FFA07A（黄色渐变）

状态颜色

增长（正）：绿色 #52C41A + 浅绿背景
下降（负）：红色 #FF4D4F + 浅红背景
中性：灰色 #666666 + 浅灰背景

三、组件设计详解

3.1 Header 头部

设计特点：

使用主题色渐变背景
左侧显示标题和更新时间
右侧操作按钮使用毛玻璃效果

实现代码：

.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 网格布局
每个卡片使用不同渐变背景
数值突出显示，增长指标使用标签样式

布局：

.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

设计特点：

激活状态使用主题色渐变
添加阴影效果增强层次
平滑过渡动画

实现：

.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 销售分析卡片

设计特点：

图表区域使用浅色背景区分
统计项使用独立卡片样式
数值使用主题色突出

布局：

.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 商品排行

设计特点：

排名使用圆形徽章，使用主题色渐变
商品名称和销量清晰对比
统一的分割线

实现：

.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 用户行为分析

设计特点：

指标使用列表式展示
流量来源使用进度条可视化
进度条使用主题色渐变

进度条实现：

.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 商家排行榜

设计特点：

排名徽章使用金银铜渐变
增长率使用彩色标签
商家信息清晰展示

排名徽章：

.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 列网格布局
点击反馈效果
图标 + 标题 + 描述

交互效果：

.tool-card:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-md);
}

四、响应式设计

4.1 断点设置

默认：>= 768rpx（双列布局）
小屏：< 768rpx（单列布局）

4.2 响应式规则

@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 适配策略

实时大屏：小屏下改为单列，保持卡片完整性
工具卡片：小屏下改为 2 列，提升空间利用率
配送分析：小屏下改为纵向堆叠，避免内容挤压

五、交互设计

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 功能增强

实时数据推送：使用 WebSocket 实现数据实时更新
数据钻取：点击指标可查看详细数据
自定义看板：允许用户自定义指标和布局
数据对比：支持多时间段数据对比
导出增强：支持自定义导出字段和格式

8.2 UI 优化

图表集成：集成专业图表库，替换占位符
动画效果：添加数据变化动画，提升视觉体验
暗色模式：支持暗色主题切换
国际化：支持多语言切换

8.3 交互优化

下拉刷新：支持下拉刷新数据
上拉加载：长列表支持上拉加载更多
手势操作：支持滑动切换时间维度
快捷操作：添加常用操作的快捷入口

九、技术实现

9.1 文件结构

pages/mall/analytics/
├── index.uvue          # 数据分析首页
├── profile.uvue        # 数据分析个人中心
└── report-detail.uvue  # 报表详情页

9.2 核心代码结构

<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 设计规范，实现了：

✅ 统一的视觉风格：使用项目统一的颜色系统和设计 token
✅ 清晰的信息层次：通过卡片、阴影、间距建立清晰层次
✅ 良好的用户体验：响应式设计、交互反馈、数据可视化
✅ 可维护的代码：CSS 变量系统、模块化设计、清晰的代码结构

页面已实现核心功能，后续可根据实际需求进行功能增强和 UI 优化。

文档版本: v1.0
创建时间: 2025-01-XX
最后更新: 2025-01-XX
状态: ✅ 已完成

16 KiB Raw Blame History Unescape Escape

数据分析页面 UI 设计文档

📋 文档说明

页面访问 URL

主页面路径

相关子页面 URL

访问方式

1. 代码中跳转（uni-app x）

2. 从其他页面跳转示例

3. 带参数跳转

4. 页面间跳转

5. 权限控制示例

6. 在页面配置中设置入口

设计原则

一、页面结构

1.1 整体布局

1.2 模块划分

二、设计规范应用

2.1 CSS 变量系统

2.2 卡片式设计

2.3 颜色系统应用

Header 渐变背景

实时指标卡片渐变

状态颜色

三、组件设计详解

3.1 Header 头部

3.2 实时大屏卡片

3.3 时间筛选 Tab

3.4 销售分析卡片

3.5 商品排行

3.6 用户行为分析

3.7 商家排行榜

3.8 快速工具卡片

四、响应式设计

4.1 断点设置

4.2 响应式规则

4.3 适配策略

五、交互设计

5.1 操作反馈

5.2 数据刷新

5.3 导出功能

六、数据可视化

6.1 图表占位

6.2 推荐图表库

七、性能优化

7.1 数据加载

7.2 渲染优化

八、后续优化建议

8.1 功能增强

8.2 UI 优化

8.3 交互优化

九、技术实现

9.1 文件结构

9.2 核心代码结构

9.3 数据接口

十、设计规范遵循

10.1 颜色系统 ✅

10.2 间距系统 ✅

10.3 圆角系统 ✅

10.4 阴影系统 ✅

十一、总结

16 KiB

Raw Blame History