medical-mall/layouts/admin

Mall Admin 布局系统

基于CRMEB Admin的设计，创建的uni-app版本的管理后台布局系统。

📁 文件结构

layouts/admin/
├── index.uvue           # 主布局组件（入口）
├── defaults.uvue        # 默认布局（完整布局）
├── aside.uvue           # 侧边栏组件
├── header.uvue          # 顶部栏组件
├── breadcrumb.uvue      # 面包屑导航组件
├── tags-view.uvue       # 标签页组件（可选）
└── README.md           # 使用说明

🚀 快速开始

1. 在页面中使用布局

<template>
  <AdminLayout current-page="page-id">
    <!-- 你的页面内容 -->
    <view class="page-container">
      <text>页面内容</text>
    </view>
  </AdminLayout>
</template>

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

// 页面逻辑
</script>

2. 页面配置

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

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

📋 组件说明

AdminLayout (主组件)

• 用途: 统一的admin布局入口
• 属性:
  • current-page: 当前页面ID，用于菜单高亮

AdminDefaults (默认布局)

• 用途: 完整的页面布局容器
• 功能: 包含侧边栏、主内容区、响应式适配

AdminAside (侧边栏)

• 用途: 垂直菜单栏
• 功能:
  • 菜单折叠/展开
  • 子菜单支持
  • 移动端抽屉模式

AdminHeader (顶部栏)

• 用途: 页面头部导航
• 功能: 面包屑导航、用户信息、通知中心

AdminBreadcrumb (面包屑)

• 用途: 页面导航指示器
• 功能: 显示当前页面位置、快速导航

🎨 菜单配置

菜单配置在 defaults.uvue 中：

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

📱 响应式特性

桌面端 (> 768px)

• 侧边栏默认展开 (240rpx)
• 支持折叠到 80rpx
• 完整菜单显示

平板端 (600px - 768px)

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

移动端 (< 600px)

• 侧边栏隐藏
• 点击菜单按钮显示抽屉
• 带背景遮罩

🎯 功能特性

• ✅ 垂直菜单布局 - 参考CRMEB Admin设计
• ✅ 菜单折叠 - 支持展开/收起
• ✅ 子菜单支持 - 多级菜单结构
• ✅ 路由联动 - 自动高亮当前菜单
• ✅ 响应式设计 - 适配各种屏幕尺寸
• ✅ 移动端适配 - 抽屉式菜单
• ✅ 主题定制 - 支持样式调整

🔧 自定义配置

修改菜单

编辑 defaults.uvue 中的 menuList 数组

调整样式

修改各组件的 <style> 部分

添加新页面

1. 在菜单配置中添加新项
2. 创建页面文件，使用 AdminLayout 包装
3. 在 pages.json 中注册

📋 页面ID对照表

页面ID	对应页面	说明
dashboard	首页	主页
user-list	用户管理	用户列表页
merchant-list	商家管理	商家列表页
product-list	商品管理	商品列表页
order	订单管理	订单管理页

🐛 常见问题

菜单不显示

• 检查 current-page 属性是否正确
• 确认菜单ID与页面ID匹配

样式异常

• 确保页面设置了 "navigationStyle": "custom"
• 检查组件导入是否正确

移动端异常

• 确认响应式断点设置正确
• 检查抽屉菜单逻辑

🔄 迁移指南

从旧布局迁移

1. 导入新布局

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

2. 包装页面内容

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

3. 更新配置

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

🎨 样式变量

// 主题色
$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);

📞 技术支持

如有问题，请检查：

1. 组件导入是否正确
2. 页面配置是否完整
3. 菜单ID是否匹配
4. 样式冲突是否解决