huangzhenbao/medical-mall

Fork 0

Files

huangzhenbao b6ad549737 初步构建起页面布局

2026-01-23 17:55:26 +08:00

4.7 KiB

Raw Permalink Blame History

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

添加新页面

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

📋 页面ID对照表

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

🐛 常见问题

菜单不显示

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

样式异常

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

移动端异常

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

🔄 迁移指南

从旧布局迁移

导入新布局

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

包装页面内容

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

更新配置

{
  "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);

📞 技术支持

如有问题，请检查：

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

4.7 KiB Raw Permalink Blame History Unescape Escape