217 lines
4.7 KiB
Markdown
217 lines
4.7 KiB
Markdown
# Mall Admin 布局系统
|
||
|
||
基于CRMEB Admin的设计，创建的uni-app版本的管理后台布局系统。
|
||
|
||
## 📁 文件结构
|
||
|
||
```
|
||
layouts/admin/
|
||
├── index.uvue # 主布局组件（入口）
|
||
├── defaults.uvue # 默认布局（完整布局）
|
||
├── aside.uvue # 侧边栏组件
|
||
├── header.uvue # 顶部栏组件
|
||
├── breadcrumb.uvue # 面包屑导航组件
|
||
├── tags-view.uvue # 标签页组件（可选）
|
||
└── README.md # 使用说明
|
||
```
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 1. 在页面中使用布局
|
||
|
||
```vue
|
||
<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页面都需要设置：
|
||
|
||
```json
|
||
{
|
||
"path": "admin/your-page",
|
||
"style": {
|
||
"navigationBarTitleText": "页面标题",
|
||
"navigationStyle": "custom"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 📋 组件说明
|
||
|
||
### AdminLayout (主组件)
|
||
- **用途**: 统一的admin布局入口
|
||
- **属性**:
|
||
- `current-page`: 当前页面ID，用于菜单高亮
|
||
|
||
### AdminDefaults (默认布局)
|
||
- **用途**: 完整的页面布局容器
|
||
- **功能**: 包含侧边栏、主内容区、响应式适配
|
||
|
||
### AdminAside (侧边栏)
|
||
- **用途**: 垂直菜单栏
|
||
- **功能**:
|
||
- 菜单折叠/展开
|
||
- 子菜单支持
|
||
- 移动端抽屉模式
|
||
|
||
### AdminHeader (顶部栏)
|
||
- **用途**: 页面头部导航
|
||
- **功能**: 面包屑导航、用户信息、通知中心
|
||
|
||
### AdminBreadcrumb (面包屑)
|
||
- **用途**: 页面导航指示器
|
||
- **功能**: 显示当前页面位置、快速导航
|
||
|
||
## 🎨 菜单配置
|
||
|
||
菜单配置在 `defaults.uvue` 中：
|
||
|
||
```javascript
|
||
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. **导入新布局**
|
||
```javascript
|
||
import AdminLayout from '@/layouts/admin/index.uvue'
|
||
```
|
||
|
||
2. **包装页面内容**
|
||
```vue
|
||
<template>
|
||
<AdminLayout current-page="page-id">
|
||
<!-- 原有内容 -->
|
||
</AdminLayout>
|
||
</template>
|
||
```
|
||
|
||
3. **更新配置**
|
||
```json
|
||
{
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 🎨 样式变量
|
||
|
||
```scss
|
||
// 主题色
|
||
$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. 样式冲突是否解决 |