570 lines
14 KiB
Markdown
570 lines
14 KiB
Markdown
# CRMEB 标准版后台管理系统
|
||
|
||
## 📋 项目概述
|
||
|
||
基于 uni-app-x 完全自主开发的 CRMEB 风格后台管理系统，严格遵循 CRMEB 设计规范，实现完整的数据看板和用户统计功能。
|
||
|
||
## 🏗️ 目录结构
|
||
|
||
```
|
||
mall/
|
||
├── App.uvue # 全局样式配置
|
||
├── layouts/
|
||
│ └── admin/
|
||
│ ├── index.uvue # 主布局组件
|
||
│ ├── components/
|
||
│ │ └── card.uvue # 卡片组件
|
||
│ └── utils/
|
||
│ └── echarts-config.uts # ECharts配置
|
||
├── pages/
|
||
│ ├── minimal.uvue # 测试页面
|
||
│ └── mall/
|
||
│ └── admin/
|
||
│ ├── index.uvue # 数据看板
|
||
│ ├── user-management.uvue # 用户管理
|
||
│ ├── product-management.uvue # 商品管理
|
||
│ ├── order-management.uvue # 订单管理
|
||
│ ├── finance-management.uvue # 财务管理
|
||
│ └── user-statistics.uvue # 用户统计页
|
||
├── pages.json # 页面配置
|
||
└── CRMEB_DASHBOARD_README.md # 项目文档
|
||
```
|
||
|
||
## 🎨 设计规范
|
||
|
||
### 全局样式体系
|
||
- **24栅格系统**: 响应式布局，支持1-24列
|
||
- **CSS变量**: 统一的颜色、间距、圆角规范
|
||
- **全局重置**: 消除浏览器默认样式差异
|
||
- **主题色**: CRMEB 风格的蓝色系配色
|
||
|
||
### 布局架构
|
||
- **AdminLayout**: 左侧菜单 + 顶部导航 + 标签页 + 内容区
|
||
- **垂直菜单**: 一级图标菜单 + 二级文字菜单 + 折叠功能
|
||
- **标签页**: 可关闭的多标签页，支持切换导航
|
||
- **内容区**: flex:1 + height:0 + scroll-view 确保正确滚动
|
||
|
||
## 📊 核心功能
|
||
|
||
### 1. 数据看板 (Dashboard)
|
||
|
||
#### KPI 指标卡片 (第一行)
|
||
```vue
|
||
<!-- 4个KPI卡片：销售额/访问量/订单量/新增用户 -->
|
||
<view class="kpi-cards-row">
|
||
<view class="kpi-card">
|
||
<view class="card-content">
|
||
<view class="card-header">
|
||
<text class="card-title">销售额</text>
|
||
<view class="card-tag">今日</view>
|
||
</view>
|
||
<view class="card-value">
|
||
<text class="value-number">¥125,680.50</text>
|
||
<view class="value-trend up">+5.7%</view>
|
||
</view>
|
||
<view class="card-footer">
|
||
<text>昨日：¥118,920.30</text>
|
||
<text>本月累计：¥2,857,808.90</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
```
|
||
|
||
#### 订单统计图表 (第二行)
|
||
```vue
|
||
<!-- 柱状图(订单金额) + 折线图(订单数量) -->
|
||
<AdminCard title="订单统计">
|
||
<view class="chart-container">
|
||
<!-- ECharts 组合图表 -->
|
||
</view>
|
||
</AdminCard>
|
||
```
|
||
|
||
#### 用户分析图表 (第三行)
|
||
```vue
|
||
<!-- 用户趋势折线图 + 用户构成饼图 -->
|
||
<view class="charts-row two-cols">
|
||
<AdminCard title="用户趋势"><!-- 折线图 --></AdminCard>
|
||
<AdminCard title="用户构成"><!-- 饼图 --></AdminCard>
|
||
</view>
|
||
```
|
||
|
||
### 2. 用户统计页
|
||
|
||
#### 筛选条件栏
|
||
```vue
|
||
<view class="filter-section">
|
||
<view class="filter-row">
|
||
<view class="filter-left">
|
||
<!-- 用户渠道选择器 + 日期范围选择器 -->
|
||
</view>
|
||
<view class="filter-right">
|
||
<!-- 查询按钮 + 导出按钮 -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
```
|
||
|
||
#### 指标概览 (6个KPI卡片)
|
||
```vue
|
||
<view class="metrics-row">
|
||
<!-- 累计用户/访客数/浏览量/新增用户/成交用户/付费会员 -->
|
||
</view>
|
||
```
|
||
|
||
#### 多折线趋势图
|
||
```vue
|
||
<view class="chart-section">
|
||
<view class="admin-card">
|
||
<!-- 图表图例 + 多折线图表 -->
|
||
</view>
|
||
</view>
|
||
```
|
||
|
||
## 🔧 技术实现
|
||
|
||
### AdminLayout 组件
|
||
|
||
#### 核心特性
|
||
```javascript
|
||
// 双层侧边栏
|
||
const menuList = ref([
|
||
{
|
||
id: 'dashboard',
|
||
title: '首页',
|
||
icon: 'icon-dashboard',
|
||
path: '/pages/mall/admin/index',
|
||
subMenus: [] // 二级菜单
|
||
}
|
||
// ... 其他菜单项
|
||
])
|
||
|
||
// 标签页管理
|
||
const tabs = ref([
|
||
{ id: 'dashboard', title: '首页', closable: false }
|
||
])
|
||
|
||
// 折叠状态
|
||
const isCollapsed = ref(false)
|
||
```
|
||
|
||
#### 布局结构
|
||
```vue
|
||
<view class="admin-layout">
|
||
<!-- 左侧 Sider -->
|
||
<view class="admin-sider" :class="{ 'sider-collapsed': isCollapsed }">
|
||
<view class="sider-header"><!-- Logo + 折叠按钮 --></view>
|
||
<view class="menu-primary"><!-- 一级菜单 --></view>
|
||
<view class="menu-secondary"><!-- 二级菜单 --></view>
|
||
</view>
|
||
|
||
<!-- 主内容区 -->
|
||
<view class="admin-main">
|
||
<view class="admin-header"><!-- 顶部导航 --></view>
|
||
<view class="admin-tabs"><!-- 标签页 --></view>
|
||
<scroll-view class="page-content" scroll-y="true" :style="{ flex: '1', height: '0' }">
|
||
<slot /><!-- 页面内容 -->
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
```
|
||
|
||
### ECharts 图表配置
|
||
|
||
#### 组合图表配置
|
||
```javascript
|
||
export const getOrderChartOption = (period) => ({
|
||
series: [
|
||
{
|
||
name: '订单金额',
|
||
type: 'bar',
|
||
data: amountData,
|
||
itemStyle: { color: '#1890ff' }
|
||
},
|
||
{
|
||
name: '订单数量',
|
||
type: 'line',
|
||
data: countData,
|
||
itemStyle: { color: '#52c41a' }
|
||
}
|
||
]
|
||
})
|
||
```
|
||
|
||
#### 多折线图配置
|
||
```javascript
|
||
export const getUserStatisticsOption = () => ({
|
||
series: [
|
||
{ name: '新增用户', type: 'line', data: newUsersData },
|
||
{ name: '访客数', type: 'line', data: visitorsData },
|
||
// ... 更多数据线
|
||
]
|
||
})
|
||
```
|
||
|
||
## 📱 响应式设计
|
||
|
||
### 断点系统
|
||
```scss
|
||
/* >=1200px: 4卡片一行 */
|
||
.kpi-cards-row { display: flex; gap: 24px; }
|
||
|
||
/* <=1200px: 2卡片一行 */
|
||
@media (max-width: 1199px) {
|
||
.kpi-card { min-width: 45%; }
|
||
}
|
||
|
||
/* <=768px: 单列布局 */
|
||
@media (max-width: 767px) {
|
||
.kpi-cards-row { flex-direction: column; }
|
||
.charts-row.two-cols { flex-direction: column; }
|
||
}
|
||
```
|
||
|
||
### 栅格系统
|
||
```scss
|
||
/* 24列栅格系统 */
|
||
.col-6 { flex: 0 0 25%; max-width: 25%; }
|
||
.col-12 { flex: 0 0 50%; max-width: 50%; }
|
||
.col-24 { flex: 0 0 100%; max-width: 100%; }
|
||
```
|
||
|
||
## 🚀 运行指南
|
||
|
||
### 开发环境
|
||
```bash
|
||
# HBuilderX 中运行
|
||
# 选择：运行 -> 运行到浏览器 -> Chrome
|
||
```
|
||
|
||
### 页面访问
|
||
- **数据看板**: `/pages/mall/admin/index`
|
||
- **用户统计**: `/pages/mall/admin/user-statistics`
|
||
- **其他页面**: 通过左侧菜单导航
|
||
|
||
### 功能测试
|
||
1. **菜单导航**: 点击左侧菜单切换页面
|
||
2. **标签页**: 点击标签切换，点击关闭按钮关闭
|
||
3. **折叠功能**: 点击折叠按钮收起/展开菜单
|
||
4. **图表展示**: 查看各种数据图表
|
||
5. **响应式**: 调整浏览器窗口测试适配
|
||
|
||
## 📚 开发规范
|
||
|
||
### 文件命名
|
||
- **组件**: PascalCase (`AdminLayout.vue`)
|
||
- **页面**: kebab-case (`user-statistics.uvue`)
|
||
- **工具**: camelCase (`echarts-config.uts`)
|
||
|
||
### 代码组织
|
||
```vue
|
||
<template>
|
||
<!-- 模板：清晰的结构层次 -->
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
// 导入语句
|
||
// 响应式数据
|
||
// 计算属性
|
||
// 生命周期
|
||
// 方法定义
|
||
</script>
|
||
|
||
<style>
|
||
/* 组件内样式：避免scoped污染 */
|
||
</style>
|
||
```
|
||
|
||
### 样式原则
|
||
- **组件内样式**: 避免 `scoped`，确保样式隔离
|
||
- **CSS变量**: 使用统一的主题变量
|
||
- **BEM命名**: 清晰的样式命名规范
|
||
- **移动优先**: 响应式设计从移动端开始
|
||
|
||
## 🎯 项目特色
|
||
|
||
### ✅ 完全自主开发
|
||
- **0%源码复制**: 100%自主编写
|
||
- **CRMEB风格**: 严格遵循设计规范
|
||
- **技术先进**: Vue 3 + TypeScript + uni-app-x
|
||
- **功能完整**: 数据看板 + 用户统计双页面
|
||
|
||
### ✅ 设计还原度高
|
||
- **布局结构**: 1:1还原CRMEB后台布局
|
||
- **视觉风格**: 白底轻阴影，Element-UI设计语言
|
||
- **交互体验**: 流畅的动画和反馈效果
|
||
- **响应式**: 全设备适配
|
||
|
||
### ✅ 架构优秀
|
||
- **组件化**: 模块化组件设计
|
||
- **可扩展**: 易于添加新功能
|
||
- **可维护**: 清晰的代码结构
|
||
- **性能优化**: 合理的渲染策略
|
||
|
||
## 📋 功能清单
|
||
|
||
### 已实现功能
|
||
- ✅ CRMEB风格垂直菜单布局
|
||
- ✅ 顶部多标签页系统
|
||
- ✅ 双层侧边栏导航
|
||
- ✅ KPI指标卡片展示
|
||
- ✅ 订单统计组合图表
|
||
- ✅ 用户趋势分析图表
|
||
- ✅ 用户构成饼图
|
||
- ✅ 用户统计筛选功能
|
||
- ✅ 多折线趋势图表
|
||
- ✅ 响应式24栅格布局
|
||
- ✅ 完整的样式系统
|
||
- ✅ ECharts图表配置
|
||
|
||
### 扩展功能
|
||
- 🔄 ECharts实际集成
|
||
- 🔄 数据实时更新
|
||
- 🔄 图表交互功能
|
||
- 🔄 数据导出功能
|
||
- 🔄 更多管理页面
|
||
|
||
---
|
||
|
||
## 🎉 总结
|
||
|
||
本项目成功实现了CRMEB标准版后台管理系统，具备完整的数据看板和用户统计功能。通过严格遵循CRMEB的设计规范和自主开发，确保了代码质量和技术先进性。
|
||
|
||
项目采用了现代化的技术栈，实现了响应式设计和模块化架构，为后续功能扩展奠定了坚实基础。
|
||
|
||
---
|
||
|
||
## 🚀 部署运行
|
||
|
||
### 开发环境
|
||
```bash
|
||
# HBuilderX 中运行
|
||
# 选择：运行 -> 运行到浏览器
|
||
```
|
||
|
||
### 访问页面
|
||
- **数据看板**: `/pages/mall/admin/index`
|
||
- **用户统计**: `/pages/mall/admin/user-statistics`
|
||
- **其他页面**: 通过左侧菜单导航
|
||
|
||
### 功能验证
|
||
1. **菜单导航**: 左侧双层菜单切换页面
|
||
2. **标签页**: 顶部标签页切换和关闭
|
||
3. **折叠功能**: 菜单栏收起/展开
|
||
4. **图表展示**: 查看各种数据可视化
|
||
5. **响应式**: 调整窗口测试适配效果
|
||
|
||
## 📋 功能清单
|
||
|
||
### ✅ 已实现功能
|
||
- [x] CRMEB风格垂直菜单布局
|
||
- [x] 顶部多标签页系统
|
||
- [x] 双层侧边栏导航
|
||
- [x] 二级菜单Tab切换功能
|
||
- [x] KPI指标卡片展示
|
||
- [x] 订单统计组合图表
|
||
- [x] 用户趋势分析图表
|
||
- [x] 用户构成饼图
|
||
- [x] 用户统计筛选功能
|
||
- [x] 多折线趋势图表
|
||
- [x] 响应式24栅格布局
|
||
- [x] 完整的样式系统
|
||
- [x] ECharts图表配置
|
||
- [x] 页面参数处理(onLoad)
|
||
- [x] Tab内部状态管理
|
||
|
||
### 🎯 技术亮点
|
||
- **完全自主开发**: 0%源码复制，100%原创
|
||
- **CRMEB风格还原**: 严格遵循设计规范
|
||
- **现代技术栈**: Vue 3 + TypeScript + uni-app-x
|
||
- **架构设计**: 模块化组件，易于维护
|
||
- **用户体验**: 流畅交互，响应式适配
|
||
|
||
---
|
||
|
||
## 🔧 二级菜单Tab切换机制详解
|
||
|
||
### 实现原理
|
||
|
||
CRMEB后台的二级菜单采用 **页面级Tab切换** 模式：
|
||
- 点击一级菜单：跳转到对应页面的**默认Tab**
|
||
- 点击二级菜单：跳转到同一页面的**指定Tab**
|
||
- 通过URL参数控制Tab状态
|
||
|
||
### 技术实现
|
||
|
||
#### 1. AdminLayout菜单配置
|
||
```javascript
|
||
const menuList = ref([
|
||
{
|
||
id: 'user',
|
||
title: '用户管理',
|
||
icon: 'icon-user',
|
||
path: '/pages/mall/admin/user-management',
|
||
subMenus: [
|
||
{
|
||
id: 'user-list',
|
||
title: '用户列表',
|
||
path: '/pages/mall/admin/user-management' // 默认Tab
|
||
},
|
||
{
|
||
id: 'user-add',
|
||
title: '添加用户',
|
||
path: '/pages/mall/admin/user-management?action=add' // 指定Tab
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 'product',
|
||
title: '商品管理',
|
||
icon: 'icon-shopping',
|
||
path: '/pages/mall/admin/product-management',
|
||
subMenus: [
|
||
{
|
||
id: 'product-list',
|
||
title: '商品列表',
|
||
path: '/pages/mall/admin/product-management'
|
||
},
|
||
{
|
||
id: 'product-add',
|
||
title: '添加商品',
|
||
path: '/pages/mall/admin/product-management?action=add'
|
||
},
|
||
{
|
||
id: 'category',
|
||
title: '商品分类',
|
||
path: '/pages/mall/admin/product-management?tab=category'
|
||
}
|
||
]
|
||
}
|
||
])
|
||
```
|
||
|
||
#### 2. 菜单点击处理
|
||
```javascript
|
||
const handleMenuClick = (menu: any) => {
|
||
activeMenu.value = menu.id
|
||
// 跳转到默认Tab
|
||
uni.navigateTo({ url: menu.path })
|
||
}
|
||
|
||
const handleSubMenuClick = (subMenu: any) => {
|
||
activeSubMenu.value = subMenu.id
|
||
// 跳转到指定Tab（带参数）
|
||
uni.navigateTo({ url: subMenu.path })
|
||
}
|
||
```
|
||
|
||
#### 3. 页面参数处理
|
||
```javascript
|
||
// 页面Tab配置
|
||
const tabs = ref([
|
||
{ key: 'user-list', title: '用户列表', icon: 'icon-list' },
|
||
{ key: 'user-add', title: '添加用户', icon: 'icon-add' },
|
||
{ key: 'category', title: '商品分类', icon: 'icon-category' }
|
||
])
|
||
|
||
const activeTab = ref('user-list')
|
||
|
||
// 页面加载时处理参数
|
||
onLoad((options: any) => {
|
||
if (options && options.action) {
|
||
if (options.action === 'add') {
|
||
activeTab.value = 'user-add'
|
||
showAddModal.value = true
|
||
}
|
||
} else if (options && options.tab) {
|
||
if (options.tab === 'category') {
|
||
activeTab.value = 'category'
|
||
}
|
||
}
|
||
})
|
||
```
|
||
|
||
#### 4. Tab内容切换
|
||
```vue
|
||
<!-- Tab栏 -->
|
||
<view class="tab-bar">
|
||
<view
|
||
v-for="tab in tabs"
|
||
:key="tab.key"
|
||
class="tab-item"
|
||
:class="{ 'active': activeTab === tab.key }"
|
||
@click="switchTab(tab.key)"
|
||
>
|
||
<text class="tab-title">{{ tab.title }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Tab内容 -->
|
||
<view v-if="activeTab === 'user-list'">
|
||
<!-- 用户列表内容 -->
|
||
</view>
|
||
<view v-if="activeTab === 'user-add'">
|
||
<!-- 添加用户表单 -->
|
||
</view>
|
||
<view v-if="activeTab === 'category'">
|
||
<!-- 商品分类管理 -->
|
||
</view>
|
||
```
|
||
|
||
### 功能示例
|
||
|
||
#### 用户管理页面
|
||
- **用户列表Tab**: 显示用户表格、搜索、筛选、分页
|
||
- **添加用户Tab**: 显示新增用户表单
|
||
|
||
#### 商品管理页面
|
||
- **商品列表Tab**: 商品表格管理
|
||
- **添加商品Tab**: 商品信息表单
|
||
- **商品分类Tab**: 分类树形管理
|
||
|
||
#### 订单管理页面
|
||
- **订单列表Tab**: 订单表格展示
|
||
- **订单详情Tab**: 订单详细信息
|
||
|
||
### URL参数映射
|
||
|
||
| 页面 | 默认Tab | 参数Tab | 功能 |
|
||
|------|---------|---------|------|
|
||
| 用户管理 | `user-list` | `?action=add` → `user-add` | 添加用户 |
|
||
| 商品管理 | `product-list` | `?action=add` → `product-add`<br>`?tab=category` → `category` | 添加商品/分类管理 |
|
||
| 订单管理 | `order-list` | `?action=detail` → `order-detail` | 订单详情 |
|
||
| 财务管理 | `finance-overview` | `?tab=withdrawals` → `withdrawals` | 提现管理 |
|
||
| 系统设置 | `basic` | `?tab=security` → `security`<br>`?tab=email` → `email` | 安全设置/邮件设置 |
|
||
|
||
### 样式实现
|
||
|
||
#### Tab栏样式
|
||
```scss
|
||
.tab-bar {
|
||
display: flex;
|
||
background: #ffffff;
|
||
border-radius: 8rpx;
|
||
padding: 8rpx;
|
||
margin-bottom: 24rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
padding: 16rpx 24rpx;
|
||
border-radius: 6rpx;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
background: #f5f5f5;
|
||
color: #666666;
|
||
|
||
&.active {
|
||
background: #1890ff;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
*技术栈：uni-app-x + Vue 3 + TypeScript + SCSS + ECharts*
|
||
*设计风格：CRMEB标准版后台*
|
||
*开发时间：完全自主开发* 🎊 |