huangzhenbao/medical-mall

Fork 0

Files

huangzhenbao 3922409a25 完善

2026-02-03 21:35:57 +08:00

6.5 KiB

Raw Blame History

Mall Admin 布局系统使用指南

概述

本项目已基于CRMEB Admin的vertical布局设计，创建了一套统一的admin管理后台布局系统。该系统提供：

🎨 统一视觉设计 - 参考CRMEB Admin的深色侧边栏风格
📱 响应式布局 - 支持桌面端和移动端自适应
🔧 灵活配置 - 支持菜单折叠、主题切换等功能
🧭 智能导航 - 自动高亮当前页面，支持子菜单展开

文件结构

layouts/
├── admin/
│   └── index.uvue          # 主布局组件

pages/mall/admin/
├── index.uvue              # 首页（已集成布局）
├── user-management.uvue    # 用户管理（已集成布局）
└── ...                     # 其他页面

pages.json                  # 页面配置（已更新）

快速开始

1. 在页面中使用AdminLayout

<template>
  <AdminLayout current-page="your-page-id">
    <!-- 你的页面内容 -->
    <view class="your-page-content">
      <!-- 页面具体内容 -->
    </view>
  </AdminLayout>
</template>

<script setup lang="uts">
import AdminLayout from '@/layouts/admin/index.uvue'

// 你的页面逻辑
</script>

2. current-page 参数说明

current-page 属性用于标识当前页面，对应的菜单项会被高亮显示：

页面	current-page 值	说明
首页	`dashboard`	主页
用户管理	`user-list`	用户列表页
商品管理	`product-list`	商品列表页
订单管理	`order`	订单管理页
商家管理	`merchant-list`	商家列表页
系统设置	`system`	系统设置页

3. 页面配置

在 pages.json 中，所有admin页面都需要设置：

{
  "path": "admin/your-page",
  "style": {
    "navigationBarTitleText": "页面标题",
    "navigationStyle": "custom"
  }
}

注意: navigationStyle: "custom" 是必需的，用于隐藏uni-app默认导航栏。

AdminLayout 组件功能

侧边栏功能

菜单结构

menuList: [
  {
    id: 'dashboard',           // 菜单唯一标识
    title: '首页',             // 菜单显示文本
    icon: 'icon-shouye',       // 图标类名
    path: '/pages/mall/admin/index'  // 跳转路径
  },
  {
    id: 'user',
    title: '用户管理',
    icon: 'icon-yonghuguanli',
    children: [                // 子菜单
      {
        id: 'user-list',
        title: '用户列表',
        path: '/pages/mall/admin/user-management'
      }
    ]
  }
]

菜单图标

系统使用iconfont图标库，支持以下图标：

icon-shouye - 首页
icon-yonghuguanli - 用户管理
icon-shangpinguanli - 商品管理
icon-dingdanguanli - 订单管理
icon-caiwuguanli - 财务管理
icon-yingxiaoguanli - 营销管理
icon-xitongshezhi - 系统设置
icon-shangjiaguanli - 商家管理

顶部导航栏

左侧功能

菜单切换按钮 - 展开/收起侧边栏
面包屑导航 - 显示当前页面标题

右侧功能

通知中心 - 显示未读消息数量
用户头像 - 点击进入个人资料

响应式设计

桌面端 (> 768px)

侧边栏默认展开，宽度240rpx
支持折叠到80rpx
完整显示菜单文本和图标

平板端 (600px - 768px)

侧边栏可折叠
菜单文本正常显示

移动端 (< 600px)

侧边栏默认隐藏
点击菜单按钮显示侧边栏
菜单文本正常显示
点击遮罩层关闭侧边栏

样式定制

主题色配置

系统默认使用以下颜色：

// 主色调
$primary-color: #1890ff;
$sidebar-bg: #001529;
$navbar-bg: #ffffff;

// 文字颜色
$text-primary: #333333;
$text-secondary: rgba(255, 255, 255, 0.75);
$text-muted: rgba(255, 255, 255, 0.65);

自定义样式

如需修改样式，可以在 layouts/admin/index.uvue 的 <style> 部分进行调整：

// 修改侧边栏背景色
.admin-sidebar {
  background-color: #002140; // 更深的蓝色
}

// 修改菜单项激活状态
.menu-link-active {
  background-color: #0050b3; // 不同的激活色
}

数据持久化

系统自动保存用户偏好设置到本地存储：

侧边栏折叠状态 - admin_sidebar_collapsed
展开的子菜单 - admin_open_menus
用户信息 - 从本地存储读取

扩展指南

添加新菜单项

在 menuList 中添加新菜单配置
为菜单项分配唯一的 id
设置合适的图标和路径
如果有子菜单，使用 children 数组

添加新页面

创建页面文件 pages/mall/admin/new-page.uvue
使用 AdminLayout 包装页面内容
设置正确的 current-page 属性
在 pages.json 中注册页面，设置 "navigationStyle": "custom"

自定义菜单图标

在iconfont中添加新图标
获取图标的class名称（如 icon-new-feature）
在菜单配置中使用该class名

故障排除

菜单不显示

检查页面是否正确导入了 AdminLayout 组件
确认 current-page 属性值与菜单配置中的 id 匹配

样式异常

检查页面是否设置了 "navigationStyle": "custom"
确认没有与uni-app默认样式冲突

移动端适配问题

检查响应式断点是否正确设置
确认遮罩层和侧边栏切换逻辑正常

迁移现有页面

对于已有的admin页面，按以下步骤迁移：

导入AdminLayout组件

import AdminLayout from '@/layouts/admin/index.uvue'

包装页面内容

<template>
  <AdminLayout current-page="page-id">
    <!-- 原有页面内容 -->
  </AdminLayout>
</template>

更新pages.json配置

{
  "style": {
    "navigationStyle": "custom"
  }
}

移除原有导航栏代码
- 删除页面内的自定义导航栏
- 移除相关的导航栏样式

最佳实践

保持菜单结构清晰 - 使用合理的分组和层级
图标选择一致 - 使用统一的图标风格
页面标题准确 - 确保面包屑显示正确的页面标题
响应式测试 - 在不同设备上测试布局效果
性能优化 - 避免在菜单中放置大量数据

更新日志

v1.0.0 (2025-01-23)

✅ 基于CRMEB Admin设计创建统一布局系统
✅ 支持响应式布局和菜单折叠
✅ 集成用户管理和首页
✅ 完成pages.json配置更新
✅ 提供完整的使用文档

如有问题或需要进一步定制，请参考源代码或联系开发团队。

6.5 KiB Raw Blame History Unescape Escape