初步构建起页面布局

2026-01-23 17:55:26 +08:00
parent 2b0ee0c8b6
commit b6ad549737
37 changed files with 13405 additions and 5385 deletions
--- a/layouts/admin/README.md
+++ b/layouts/admin/README.md
@@ -0,0 +1,217 @@
+# 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. 样式冲突是否解决