# 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. 样式冲突是否解决