medical-mall/pages/mall/admin/docs/ADMIN_MANAGEMENT_GUIDE.md

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布局：

<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>

数据加载

// 获取基础统计数据
const loadBaseStats = async () => {
  const salesStats = await supa.rpc('get_sales_stats', {
    start_date: yesterday,
    end_date: today
  })
  // 更新统计数据
}

2. 用户管理 (user-management.uvue)

核心功能

• 用户搜索筛选: 支持多条件组合查询
• 用户列表展示: 分页显示用户信息
• 批量操作: 导出用户、群发消息、调整余额
• 用户状态管理: 启用/禁用用户账户
• 用户详情: 查看和编辑用户信息

搜索功能

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([]) // 分销等级选项

用户操作

// 切换用户状态
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)

功能特性

• 商品列表: 分页展示商品信息
• 高级筛选: 商品类型、分类、价格、库存等条件
• 批量操作: 批量上架/下架/删除
• 商品状态管理: 上架、下架、编辑
• 商品规格: 支持多规格商品管理

商品筛选

const productTypes = ref([
  { value: '0', label: '普通商品' },
  { value: '1', label: '卡密商品' },
  { value: '2', label: '优惠券商品' },
  { value: '3', label: '虚拟商品' }
])

const deliveryTypes = ref([
  { value: '1', label: '快递配送' },
  { value: '2', label: '到店自提' }
])

商品操作

// 批量上架
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)

核心功能

• 订单类型标签页: 全部订单、普通订单、待支付、待发货等
• 订单搜索: 订单号、用户名、收货人等条件
• 订单状态管理: 确认订单、发货、查看物流
• 订单详情: 完整的订单信息展示
• 批量操作: 批量发货、导出订单

订单状态

const orderStatuses = ref([
  { value: '0', label: '待确认' },
  { value: '1', label: '待支付' },
  { value: '2', label: '待发货' },
  { value: '3', label: '已发货' },
  { value: '4', label: '已完成' },
  { value: '5', label: '已取消' },
  { value: '6', label: '退款中' }
])

订单操作

// 确认订单
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)

功能模块

• 财务概览: 收入统计、账户余额、待结算金额
• 财务明细: 交易记录查询和筛选
• 交易类型: 订单收入、退款支出、提现支出等
• 数据导出: 支持导出财务报表

财务统计

const overview = ref({
  today_income: '0.00',
  month_income: '0.00',
  account_balance: '0.00',
  pending_settlement: '0.00'
})

交易记录查询

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、客服电话等
• 支付设置: 微信支付、支付宝、余额支付配置
• 物流设置: 默认物流公司、运费计算方式
• 消息设置: 短信、邮件通知配置

设置保存

const saveSettings = async () => {
  await supa.from('system_settings').upsert(settings.value)
}

组件架构

公共组件

• 搜索表单: 统一的搜索和筛选组件
• 数据表格: 列表展示和操作组件
• 分页组件: 统一的翻页功能
• 弹窗组件: 确认对话框和表单弹窗

样式规范

参考CRMEB设计风格，采用统一的布局和配色：

/* 布局类 */
.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集成

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调用

// 调用存储过程
const { data, error } = await supa.rpc('function_name', {
  param1: value1,
  param2: value2
})

权限管理

基于角色的访问控制

// 权限检查
const hasPermission = (permission: string) => {
  // 检查用户权限逻辑
  return userPermissions.includes(permission)
}

// 页面级权限控制
onMounted(() => {
  if (!hasPermission('admin.user.view')) {
    uni.showToast({
      title: '无权限访问',
      icon: 'error'
    })
    uni.navigateBack()
  }
})

性能优化

1. 数据分页

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. 条件查询优化

// 使用索引字段进行查询
const { data } = await supa
  .from('orders')
  .select('*')
  .eq('status', 1) // 状态字段通常有索引
  .gte('created_at', startDate)
  .order('created_at', { ascending: false })

3. 实时数据订阅

// 监听数据变化
const subscription = supa
  .channel('table-changes')
  .on('postgres_changes', {
    event: '*',
    schema: 'public',
    table: 'orders'
  }, (payload) => {
    // 处理数据变化
    updateLocalData(payload)
  })
  .subscribe()

错误处理

统一错误处理

const handleError = (error: any) => {
  console.error('操作失败:', error)

  let message = '操作失败，请重试'
  if (error.message) {
    message = error.message
  }

  uni.showToast({
    title: message,
    icon: 'error'
  })
}

网络请求错误

try {
  const { data, error } = await supa.from('table').select('*')
  if (error) throw error
  // 处理成功的数据
} catch (error) {
  handleError(error)
}

响应式设计

移动端适配

// 响应式断点
@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;
    }
  }
}

部署和维护

环境配置

// 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']
  }
}

日志记录

// 操作日志记录
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)

注释规范

/**
 * 用户管理页面
 * 功能：用户列表展示、搜索筛选、状态管理等
 */

// 函数注释
/**
 * 加载用户列表
 * @param page 页码
 * @param filters 筛选条件
 */
const loadUserList = async (page: number = 1, filters: any = {}) => {
  // 具体实现
}

常见问题

1. 数据加载慢

问题: 列表数据加载缓慢 解决方案:

• 添加合适的数据库索引
• 实现数据分页
• 使用缓存机制
• 优化查询条件

2. 权限控制

问题: 用户权限判断不准确 解决方案:

• 在路由层面进行权限检查
• 实现基于角色的访问控制
• 前端页面级权限验证

3. 实时数据同步

问题: 多用户同时操作数据冲突 解决方案:

• 使用 Supabase 实时订阅
• 实现乐观更新
• 添加数据版本控制

更新日志

v1.0.0 (2024-01-22)

• ✅ 完成基础管理功能实现
• ✅ 用户管理模块
• ✅ 商品管理模块
• ✅ 订单管理模块
• ✅ 财务管理模块
• ✅ 系统设置模块

计划功能

• 🔄 营销管理模块
• 🔄 数据统计图表
• 🔄 批量操作优化
• 🔄 移动端适配完善
• 🔄 性能优化

---

本文档持续更新中，如有问题请及时反馈。