完善页面布局
This commit is contained in:
594
docs/ADMIN_MANAGEMENT_GUIDE.md
Normal file
594
docs/ADMIN_MANAGEMENT_GUIDE.md
Normal file
@@ -0,0 +1,594 @@
|
||||
# CRMEB管理端uvue实现操作指南
|
||||
|
||||
## 项目概述
|
||||
|
||||
本文档详细介绍基于CRMEB商城系统管理端功能，使用uvue + Supabase技术栈重新实现的完整管理后台操作指南。
|
||||
|
||||
## 技术架构
|
||||
|
||||
### 前端技术栈
|
||||
- **框架**: uvue (uni-app x)
|
||||
- **状态管理**: Vue 3 Composition API
|
||||
- **UI组件**: 自定义组件 + uni-app内置组件
|
||||
- **样式**: CSS + Flex布局 + 响应式设计
|
||||
- **设计风格**: 参考CRMEB开源商城系统，采用统一的卡片布局和配色方案
|
||||
- **图标库**: iconfont字体图标库
|
||||
|
||||
### 后端技术栈
|
||||
- **数据库**: Supabase (PostgreSQL)
|
||||
- **API**: @components/supadb 组件库
|
||||
- **认证**: Supabase Auth
|
||||
- **存储**: Supabase Storage
|
||||
- **实时功能**: Supabase Realtime
|
||||
|
||||
## 功能模块
|
||||
|
||||
### 1. 管理端首页 (`index.uvue`)
|
||||
|
||||
#### 功能特性
|
||||
- **基础信息统计卡片**: 显示销售额、订单数、用户数等核心指标
|
||||
- **功能导航网格**: 快速访问各个管理模块
|
||||
- **数据可视化**: 实时统计数据展示
|
||||
|
||||
#### 页面结构
|
||||
参考CRMEB设计风格，采用统一的卡片布局和Flex布局：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="admin-dashboard">
|
||||
<!-- 顶部统计卡片 -->
|
||||
<view class="header acea-row">
|
||||
<navigator class="item" url="/pages/mall/admin/order-management" hover-class="none">
|
||||
<view class="num">{{ pendingCounts.order_pending }}</view>
|
||||
<view>待处理订单</view>
|
||||
</navigator>
|
||||
<!-- 其他统计项 -->
|
||||
</view>
|
||||
|
||||
<!-- 数据统计 -->
|
||||
<view class="wrapper">
|
||||
<view class="title">
|
||||
<span class="iconfont icon-shujutongji"></span>数据统计
|
||||
</view>
|
||||
<view class="list acea-row">
|
||||
<navigator class="item" url="/pages/mall/admin/statistics/sales" hover-class="none">
|
||||
<view class="num">{{ todayStats.sales }}</view>
|
||||
<view>今日销售额</view>
|
||||
</navigator>
|
||||
<!-- 其他统计项 -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能导航 -->
|
||||
<view class="public-wrapper">
|
||||
<view class="title">
|
||||
<span class="iconfont icon-gongnengdaohang"></span>功能导航
|
||||
</view>
|
||||
<view class="menu-grid acea-row">
|
||||
<view class="menu-item" @click="go('/pages/mall/admin/user-management')">
|
||||
<view class="menu-icon">
|
||||
<text class="iconfont icon-yonghuguanli"></text>
|
||||
</view>
|
||||
<text class="menu-text">用户管理</text>
|
||||
</view>
|
||||
<!-- 其他功能项 -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
#### 数据加载
|
||||
```typescript
|
||||
// 获取基础统计数据
|
||||
const loadBaseStats = async () => {
|
||||
const salesStats = await supa.rpc('get_sales_stats', {
|
||||
start_date: yesterday,
|
||||
end_date: today
|
||||
})
|
||||
// 更新统计数据
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 用户管理 (`user-management.uvue`)
|
||||
|
||||
#### 核心功能
|
||||
- **用户搜索筛选**: 支持多条件组合查询
|
||||
- **用户列表展示**: 分页显示用户信息
|
||||
- **批量操作**: 导出用户、群发消息、调整余额
|
||||
- **用户状态管理**: 启用/禁用用户账户
|
||||
- **用户详情**: 查看和编辑用户信息
|
||||
|
||||
#### 搜索功能
|
||||
```typescript
|
||||
const searchTypes = ref([
|
||||
{ value: 'all', label: '全部' },
|
||||
{ value: 'uid', label: 'UID' },
|
||||
{ value: 'phone', label: '手机号' },
|
||||
{ value: 'nickname', label: '用户昵称' }
|
||||
])
|
||||
|
||||
const userLevels = ref([]) // 用户等级选项
|
||||
const userGroups = ref([]) // 用户分组选项
|
||||
const agentLevels = ref([]) // 分销等级选项
|
||||
```
|
||||
|
||||
#### 用户操作
|
||||
```typescript
|
||||
// 切换用户状态
|
||||
const toggleUserStatus = async (userId: number, currentStatus: number) => {
|
||||
const newStatus = currentStatus === 1 ? 0 : 1
|
||||
await supa.from('users').update({ status: newStatus }).eq('id', userId)
|
||||
}
|
||||
|
||||
// 批量导出用户
|
||||
const exportUsers = () => {
|
||||
// 导出逻辑
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 商品管理 (`product-management.uvue`)
|
||||
|
||||
#### 功能特性
|
||||
- **商品列表**: 分页展示商品信息
|
||||
- **高级筛选**: 商品类型、分类、价格、库存等条件
|
||||
- **批量操作**: 批量上架/下架/删除
|
||||
- **商品状态管理**: 上架、下架、编辑
|
||||
- **商品规格**: 支持多规格商品管理
|
||||
|
||||
#### 商品筛选
|
||||
```typescript
|
||||
const productTypes = ref([
|
||||
{ value: '0', label: '普通商品' },
|
||||
{ value: '1', label: '卡密商品' },
|
||||
{ value: '2', label: '优惠券商品' },
|
||||
{ value: '3', label: '虚拟商品' }
|
||||
])
|
||||
|
||||
const deliveryTypes = ref([
|
||||
{ value: '1', label: '快递配送' },
|
||||
{ value: '2', label: '到店自提' }
|
||||
])
|
||||
```
|
||||
|
||||
#### 商品操作
|
||||
```typescript
|
||||
// 批量上架
|
||||
const batchOnShelf = async () => {
|
||||
await supa.from('products')
|
||||
.update({ is_show: true })
|
||||
.in('id', selectedProducts.value)
|
||||
}
|
||||
|
||||
// 删除商品
|
||||
const deleteProduct = async (productId: number) => {
|
||||
await supa.from('products')
|
||||
.update({ is_del: true })
|
||||
.eq('id', productId)
|
||||
}
|
||||
```
|
||||
|
||||
### 4. 订单管理 (`order-management.uvue`)
|
||||
|
||||
#### 核心功能
|
||||
- **订单类型标签页**: 全部订单、普通订单、待支付、待发货等
|
||||
- **订单搜索**: 订单号、用户名、收货人等条件
|
||||
- **订单状态管理**: 确认订单、发货、查看物流
|
||||
- **订单详情**: 完整的订单信息展示
|
||||
- **批量操作**: 批量发货、导出订单
|
||||
|
||||
#### 订单状态
|
||||
```typescript
|
||||
const orderStatuses = ref([
|
||||
{ value: '0', label: '待确认' },
|
||||
{ value: '1', label: '待支付' },
|
||||
{ value: '2', label: '待发货' },
|
||||
{ value: '3', label: '已发货' },
|
||||
{ value: '4', label: '已完成' },
|
||||
{ value: '5', label: '已取消' },
|
||||
{ value: '6', label: '退款中' }
|
||||
])
|
||||
```
|
||||
|
||||
#### 订单操作
|
||||
```typescript
|
||||
// 确认订单
|
||||
const confirmOrder = async (orderId: number) => {
|
||||
await supa.from('orders').update({ status: 1 }).eq('id', orderId)
|
||||
}
|
||||
|
||||
// 订单发货
|
||||
const confirmShip = async () => {
|
||||
await supa.from('orders').update({
|
||||
status: 3,
|
||||
ship_info: {
|
||||
express_company: shipForm.express_company,
|
||||
express_number: shipForm.express_number,
|
||||
ship_time: new Date().toISOString()
|
||||
}
|
||||
}).eq('id', shipForm.order_id)
|
||||
}
|
||||
```
|
||||
|
||||
### 5. 财务管理 (`finance-management.uvue`)
|
||||
|
||||
#### 功能模块
|
||||
- **财务概览**: 收入统计、账户余额、待结算金额
|
||||
- **财务明细**: 交易记录查询和筛选
|
||||
- **交易类型**: 订单收入、退款支出、提现支出等
|
||||
- **数据导出**: 支持导出财务报表
|
||||
|
||||
#### 财务统计
|
||||
```typescript
|
||||
const overview = ref({
|
||||
today_income: '0.00',
|
||||
month_income: '0.00',
|
||||
account_balance: '0.00',
|
||||
pending_settlement: '0.00'
|
||||
})
|
||||
```
|
||||
|
||||
#### 交易记录查询
|
||||
```typescript
|
||||
const loadRecords = async () => {
|
||||
let query = supa.from('finance_records')
|
||||
.select('*')
|
||||
.order('created_at', { ascending: false })
|
||||
|
||||
// 筛选条件
|
||||
if (selectedType.value) {
|
||||
query = query.eq('type', selectedType.value)
|
||||
}
|
||||
|
||||
// 分页
|
||||
const { data, count } = await query.range(from, to)
|
||||
}
|
||||
```
|
||||
|
||||
### 6. 系统设置 (`system-settings.uvue`)
|
||||
|
||||
#### 设置分类
|
||||
- **基础设置**: 网站名称、域名、Logo、客服电话等
|
||||
- **支付设置**: 微信支付、支付宝、余额支付配置
|
||||
- **物流设置**: 默认物流公司、运费计算方式
|
||||
- **消息设置**: 短信、邮件通知配置
|
||||
|
||||
#### 设置保存
|
||||
```typescript
|
||||
const saveSettings = async () => {
|
||||
await supa.from('system_settings').upsert(settings.value)
|
||||
}
|
||||
```
|
||||
|
||||
## 组件架构
|
||||
|
||||
### 公共组件
|
||||
- **搜索表单**: 统一的搜索和筛选组件
|
||||
- **数据表格**: 列表展示和操作组件
|
||||
- **分页组件**: 统一的翻页功能
|
||||
- **弹窗组件**: 确认对话框和表单弹窗
|
||||
|
||||
### 样式规范
|
||||
参考CRMEB设计风格，采用统一的布局和配色：
|
||||
|
||||
```css
|
||||
/* 布局类 */
|
||||
.acea-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.row-between-wrapper {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 颜色规范 */
|
||||
.primary-theme: #fba02a; /* 橙色主题色 */
|
||||
.secondary-theme: #2291f8; /* 蓝色辅助色 */
|
||||
.success-color: #1abb1d; /* 成功色 */
|
||||
.danger-color: #ff6969; /* 危险色 */
|
||||
|
||||
/* 卡片样式 */
|
||||
.public-wrapper {
|
||||
width: 690rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin: 20rpx auto 0 auto;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 字体图标 */
|
||||
.iconfont {
|
||||
font-family: 'iconfont';
|
||||
color: #2291f8;
|
||||
font-size: 36rpx;
|
||||
margin-right: 13rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
```
|
||||
|
||||
## 数据交互
|
||||
|
||||
### Supabase集成
|
||||
```typescript
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
|
||||
// 查询数据
|
||||
const { data, error } = await supa
|
||||
.from('table_name')
|
||||
.select('*')
|
||||
.eq('field', value)
|
||||
|
||||
// 插入数据
|
||||
const { data, error } = await supa
|
||||
.from('table_name')
|
||||
.insert(newData)
|
||||
|
||||
// 更新数据
|
||||
const { data, error } = await supa
|
||||
.from('table_name')
|
||||
.update(updateData)
|
||||
.eq('id', id)
|
||||
|
||||
// 删除数据
|
||||
const { data, error } = await supa
|
||||
.from('table_name')
|
||||
.delete()
|
||||
.eq('id', id)
|
||||
```
|
||||
|
||||
### RPC调用
|
||||
```typescript
|
||||
// 调用存储过程
|
||||
const { data, error } = await supa.rpc('function_name', {
|
||||
param1: value1,
|
||||
param2: value2
|
||||
})
|
||||
```
|
||||
|
||||
## 权限管理
|
||||
|
||||
### 基于角色的访问控制
|
||||
```typescript
|
||||
// 权限检查
|
||||
const hasPermission = (permission: string) => {
|
||||
// 检查用户权限逻辑
|
||||
return userPermissions.includes(permission)
|
||||
}
|
||||
|
||||
// 页面级权限控制
|
||||
onMounted(() => {
|
||||
if (!hasPermission('admin.user.view')) {
|
||||
uni.showToast({
|
||||
title: '无权限访问',
|
||||
icon: 'error'
|
||||
})
|
||||
uni.navigateBack()
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 性能优化
|
||||
|
||||
### 1. 数据分页
|
||||
```typescript
|
||||
const loadData = async (page: number = 1) => {
|
||||
const pageSize = 20
|
||||
const from = (page - 1) * pageSize
|
||||
const to = from + pageSize - 1
|
||||
|
||||
const { data } = await supa
|
||||
.from('table')
|
||||
.select('*')
|
||||
.range(from, to)
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 条件查询优化
|
||||
```typescript
|
||||
// 使用索引字段进行查询
|
||||
const { data } = await supa
|
||||
.from('orders')
|
||||
.select('*')
|
||||
.eq('status', 1) // 状态字段通常有索引
|
||||
.gte('created_at', startDate)
|
||||
.order('created_at', { ascending: false })
|
||||
```
|
||||
|
||||
### 3. 实时数据订阅
|
||||
```typescript
|
||||
// 监听数据变化
|
||||
const subscription = supa
|
||||
.channel('table-changes')
|
||||
.on('postgres_changes', {
|
||||
event: '*',
|
||||
schema: 'public',
|
||||
table: 'orders'
|
||||
}, (payload) => {
|
||||
// 处理数据变化
|
||||
updateLocalData(payload)
|
||||
})
|
||||
.subscribe()
|
||||
```
|
||||
|
||||
## 错误处理
|
||||
|
||||
### 统一错误处理
|
||||
```typescript
|
||||
const handleError = (error: any) => {
|
||||
console.error('操作失败:', error)
|
||||
|
||||
let message = '操作失败，请重试'
|
||||
if (error.message) {
|
||||
message = error.message
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: message,
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 网络请求错误
|
||||
```typescript
|
||||
try {
|
||||
const { data, error } = await supa.from('table').select('*')
|
||||
if (error) throw error
|
||||
// 处理成功的数据
|
||||
} catch (error) {
|
||||
handleError(error)
|
||||
}
|
||||
```
|
||||
|
||||
## 响应式设计
|
||||
|
||||
### 移动端适配
|
||||
```scss
|
||||
// 响应式断点
|
||||
@media (max-width: 750rpx) {
|
||||
.container {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15rpx;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.table-cell {
|
||||
min-width: 200rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 部署和维护
|
||||
|
||||
### 环境配置
|
||||
```javascript
|
||||
// config/admin.js
|
||||
export default {
|
||||
supabase: {
|
||||
url: process.env.SUPABASE_URL,
|
||||
anonKey: process.env.SUPABASE_ANON_KEY,
|
||||
serviceRoleKey: process.env.SUPABASE_SERVICE_ROLE_KEY
|
||||
},
|
||||
pagination: {
|
||||
defaultPageSize: 20,
|
||||
maxPageSize: 100
|
||||
},
|
||||
upload: {
|
||||
maxFileSize: 10 * 1024 * 1024, // 10MB
|
||||
allowedTypes: ['image/jpeg', 'image/png', 'image/webp']
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 日志记录
|
||||
```typescript
|
||||
// 操作日志记录
|
||||
const logOperation = async (action: string, details: any) => {
|
||||
await supa.from('admin_logs').insert({
|
||||
admin_id: currentAdmin.id,
|
||||
action,
|
||||
details,
|
||||
ip: getClientIP(),
|
||||
user_agent: navigator.userAgent,
|
||||
created_at: new Date().toISOString()
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## 开发规范
|
||||
|
||||
### 代码组织
|
||||
```
|
||||
pages/mall/admin/
|
||||
├── index.uvue # 管理首页
|
||||
├── user-management.uvue # 用户管理
|
||||
├── product-management.uvue # 商品管理
|
||||
├── order-management.uvue # 订单管理
|
||||
├── finance-management.uvue # 财务管理
|
||||
├── system-settings.uvue # 系统设置
|
||||
└── components/ # 公共组件
|
||||
├── SearchForm.uvue
|
||||
├── DataTable.uvue
|
||||
├── Pagination.uvue
|
||||
└── Modal.uvue
|
||||
```
|
||||
|
||||
### 命名规范
|
||||
- **文件命名**: 使用 kebab-case (user-management.uvue)
|
||||
- **变量命名**: 使用 camelCase (userList, isLoading)
|
||||
- **组件命名**: 使用 PascalCase (UserManagement)
|
||||
- **函数命名**: 使用 camelCase (loadUserList, handleSubmit)
|
||||
|
||||
### 注释规范
|
||||
```typescript
|
||||
/**
|
||||
* 用户管理页面
|
||||
* 功能：用户列表展示、搜索筛选、状态管理等
|
||||
*/
|
||||
|
||||
// 函数注释
|
||||
/**
|
||||
* 加载用户列表
|
||||
* @param page 页码
|
||||
* @param filters 筛选条件
|
||||
*/
|
||||
const loadUserList = async (page: number = 1, filters: any = {}) => {
|
||||
// 具体实现
|
||||
}
|
||||
```
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 1. 数据加载慢
|
||||
**问题**: 列表数据加载缓慢
|
||||
**解决方案**:
|
||||
- 添加合适的数据库索引
|
||||
- 实现数据分页
|
||||
- 使用缓存机制
|
||||
- 优化查询条件
|
||||
|
||||
### 2. 权限控制
|
||||
**问题**: 用户权限判断不准确
|
||||
**解决方案**:
|
||||
- 在路由层面进行权限检查
|
||||
- 实现基于角色的访问控制
|
||||
- 前端页面级权限验证
|
||||
|
||||
### 3. 实时数据同步
|
||||
**问题**: 多用户同时操作数据冲突
|
||||
**解决方案**:
|
||||
- 使用 Supabase 实时订阅
|
||||
- 实现乐观更新
|
||||
- 添加数据版本控制
|
||||
|
||||
## 更新日志
|
||||
|
||||
### v1.0.0 (2024-01-22)
|
||||
- ✅ 完成基础管理功能实现
|
||||
- ✅ 用户管理模块
|
||||
- ✅ 商品管理模块
|
||||
- ✅ 订单管理模块
|
||||
- ✅ 财务管理模块
|
||||
- ✅ 系统设置模块
|
||||
|
||||
### 计划功能
|
||||
- 🔄 营销管理模块
|
||||
- 🔄 数据统计图表
|
||||
- 🔄 批量操作优化
|
||||
- 🔄 移动端适配完善
|
||||
- 🔄 性能优化
|
||||
|
||||
---
|
||||
|
||||
本文档持续更新中，如有问题请及时反馈。
|
||||
Reference in New Issue
Block a user