292 lines
8.0 KiB
Markdown
292 lines
8.0 KiB
Markdown
# CRMEB Admin 页面结构与流转分析
|
||
|
||
## 项目概述
|
||
- **项目**: CRMEB Admin 电商管理后台
|
||
- **技术栈**: Vue.js + Vue Router + Element UI + Vuex
|
||
- **路由前缀**: `/admin` (可配置)
|
||
- **路由模式**: history
|
||
|
||
## 1. 应用入口结构
|
||
|
||
### 1.1 入口文件层级
|
||
```
|
||
main.js (应用入口)
|
||
├── Vue实例初始化
|
||
|
||
|
||
├── 路由器配置
|
||
├── Vuex状态管理
|
||
└── 全局组件/插件注册
|
||
|
||
App.vue (根组件)
|
||
├── router-view (主路由出口)
|
||
└── Setings组件 (布局设置弹窗)
|
||
```
|
||
|
||
**源码位置**:
|
||
- `src/main.js` (line 250-256): Vue实例创建
|
||
- `src/App.vue` (line 3): 根路由视图
|
||
|
||
## 2. 页面布局体系
|
||
|
||
### 2.1 布局组件层级
|
||
```
|
||
LayoutMain (主布局组件)
|
||
├── layout/index.vue (布局选择器)
|
||
│ ├── 根据主题配置选择布局类型
|
||
│ ├── 支持4种布局模式
|
||
│ └── 响应式适配
|
||
│
|
||
├── layout/main/defaults.vue (默认布局)
|
||
│ ├── Asides (侧边栏)
|
||
│ ├── Headers (顶部导航栏)
|
||
│ └── Mains (主内容区)
|
||
│
|
||
└── layout/component/main.vue (主内容容器)
|
||
├── LayoutParentView (路由视图容器)
|
||
├── Footers (页脚)
|
||
├── Links (链接页面)
|
||
└── Iframes (内嵌页面)
|
||
```
|
||
|
||
**源码位置**:
|
||
- `src/layout/index.vue` (line 3-8): 布局选择逻辑
|
||
- `src/layout/main/defaults.vue` (line 2-11): 默认布局结构
|
||
- `src/layout/component/main.vue` (line 9): 路由视图
|
||
|
||
### 2.2 路由视图容器
|
||
```
|
||
LayoutParentView (父级路由视图)
|
||
├── transition (页面切换动画)
|
||
├── keep-alive (页面缓存)
|
||
└── router-view (实际路由出口)
|
||
```
|
||
|
||
**源码位置**: `src/layout/routerView/parent.vue`
|
||
|
||
## 3. 路由配置体系
|
||
|
||
### 3.1 路由分类结构
|
||
```
|
||
路由配置 (src/router/routers.js)
|
||
├── frameIn (主框架内路由)
|
||
│ ├── 基础路径: /
|
||
│ ├── 使用LayoutMain布局
|
||
│ ├── 包含所有业务模块
|
||
│ └── 需要权限验证
|
||
│
|
||
├── frameOuts (主框架外路由)
|
||
│ ├── 登录页面
|
||
│ ├── 客服模块
|
||
│ ├── 特殊功能页面
|
||
│ └── 无需权限验证
|
||
│
|
||
└── errorPage (错误页面)
|
||
├── 403/404/500错误页
|
||
└── 通配符路由兜底
|
||
```
|
||
|
||
### 3.2 路由模块组织
|
||
```
|
||
src/router/modules/
|
||
├── index.js # 首页模块
|
||
├── product.js # 商品管理
|
||
├── order.js # 订单管理
|
||
├── user.js # 用户管理
|
||
├── setting.js # 系统设置
|
||
├── marketing.js # 营销活动
|
||
├── finance.js # 财务管理
|
||
├── system.js # 系统管理
|
||
├── app.js # 应用管理
|
||
├── statistic.js # 统计报表
|
||
├── frameOut.js # 框架外路由
|
||
├── crud.js # CRUD模块
|
||
├── division.js # 部门管理
|
||
└── agent.js # 代理商管理
|
||
```
|
||
|
||
## 4. 页面流转逻辑
|
||
|
||
### 4.1 应用启动流程
|
||
```
|
||
应用启动
|
||
├── main.js 初始化Vue实例
|
||
├── 注册全局组件和插件
|
||
├── 配置路由和状态管理
|
||
└── 挂载到 #app 元素
|
||
|
||
页面初次加载
|
||
├── App.vue 渲染 <router-view />
|
||
├── 路由器检查当前路径
|
||
├── 匹配路由配置
|
||
└── 渲染对应组件
|
||
```
|
||
|
||
### 4.2 登录认证流程
|
||
```
|
||
访问受保护页面
|
||
├── router.beforeEach 路由守卫拦截
|
||
├── 检查用户token
|
||
│ ├── 有token → 验证权限
|
||
│ └── 无token → 跳转登录页
|
||
├── 权限验证
|
||
│ ├── 有权限 → 允许访问
|
||
│ └── 无权限 → 跳转403页
|
||
└── 渲染目标页面
|
||
```
|
||
|
||
**源码位置**: `src/router/index.js` (line 116-169)
|
||
|
||
### 4.3 页面导航流程
|
||
```
|
||
用户点击导航
|
||
├── 触发路由变化 ($route变化)
|
||
├── layout/index.vue 监听路由变化
|
||
├── 更新面包屑导航
|
||
├── 更新标签页导航
|
||
├── LayoutParentView 处理页面切换
|
||
│ ├── 检查keep-alive缓存
|
||
│ ├── 执行页面切换动画
|
||
│ └── 渲染新页面组件
|
||
└── 滚动到页面顶部
|
||
```
|
||
|
||
### 4.4 布局切换流程
|
||
```
|
||
用户切换布局主题
|
||
├── Vuex状态更新 (themeConfig)
|
||
├── layout/index.vue 响应状态变化
|
||
├── 根据配置选择布局组件
|
||
├── 重新渲染布局结构
|
||
└── 保持页面内容不变
|
||
```
|
||
|
||
## 5. 关键页面路径
|
||
|
||
### 5.1 主框架内页面 (frameIn)
|
||
| 路径 | 页面名称 | 组件位置 | 权限要求 |
|
||
|------|---------|---------|---------|
|
||
| `/admin/index` | 主页 | `src/pages/index/index.vue` | `admin-index-index` |
|
||
| `/admin/product/product_list` | 商品管理 | `src/pages/product/productList/index.vue` | `admin-store-storeProuduct-index` |
|
||
| `/admin/order/list` | 订单管理 | `src/pages/order/orderList/index.vue` | `admin-order-storeOrder-index` |
|
||
| `/admin/user/list` | 用户管理 | `src/pages/user/list/index.vue` | `admin-user-user-index` |
|
||
| `/admin/setting/system_config` | 系统设置 | `src/pages/setting/setSystem/index.vue` | `setting-system-config` |
|
||
|
||
### 5.2 主框架外页面 (frameOut)
|
||
| 路径 | 页面名称 | 组件位置 | 说明 |
|
||
|------|---------|---------|------|
|
||
| `/admin/login` | 登录页面 | `src/pages/account/login/index.vue` | 无需登录即可访问 |
|
||
| `/kefu` | 客服管理 | `src/pages/kefu/index.vue` | 独立客服系统 |
|
||
| `/kefu/mobile_chat` | 移动端客服 | `src/pages/kefu/mobile/index.vue` | 移动端聊天界面 |
|
||
| `/app/upload` | 文件上传 | `src/pages/app/upload.vue` | 移动端扫码上传 |
|
||
|
||
## 6. 页面缓存机制
|
||
|
||
### 6.1 Keep-Alive 配置
|
||
```javascript
|
||
// src/layout/routerView/parent.vue
|
||
<keep-alive :include="keepAliveNameList">
|
||
<router-view :key="refreshRouterViewKey" />
|
||
</keep-alive>
|
||
```
|
||
|
||
### 6.2 缓存管理
|
||
```
|
||
缓存页面列表
|
||
├── 从Vuex获取 (keepAliveNames)
|
||
├── 支持页面刷新功能
|
||
├── 标签页关闭时清理缓存
|
||
└── 路由切换时保持状态
|
||
```
|
||
|
||
**源码位置**: `src/store/module/keepAliveNames.js`
|
||
|
||
## 7. 页面布局类型
|
||
|
||
### 7.1 支持的布局模式
|
||
```
|
||
defaults (默认布局)
|
||
├── 经典的左右布局
|
||
├── 侧边栏 + 主内容区
|
||
└── 支持固定头部
|
||
|
||
classic (经典布局)
|
||
├── 传统管理后台布局
|
||
├── 顶部导航 + 侧边栏
|
||
└── 适用于复杂导航
|
||
|
||
transverse (横向布局)
|
||
├── 横向菜单布局
|
||
├── 适用于扁平化导航
|
||
└── 节省垂直空间
|
||
|
||
columns (分栏布局)
|
||
├── 多列布局设计
|
||
├── 适用于信息密集页面
|
||
└── 提高空间利用率
|
||
```
|
||
|
||
**源码位置**: `src/layout/main/` 目录下对应文件
|
||
|
||
## 8. 特殊页面处理
|
||
|
||
### 8.1 全屏页面
|
||
```javascript
|
||
// 路由meta配置
|
||
meta: {
|
||
fullScreen: true // 启用全屏模式
|
||
}
|
||
```
|
||
- 隐藏侧边栏和顶部导航
|
||
- 适用于页面设计器等特殊场景
|
||
|
||
### 8.2 内嵌页面
|
||
```javascript
|
||
// 路由meta配置
|
||
meta: {
|
||
isIframe: true, // 内嵌iframe
|
||
isLink: true // 链接页面
|
||
}
|
||
```
|
||
- 支持iframe内嵌外部页面
|
||
- 支持直接跳转外部链接
|
||
|
||
### 8.3 标签页固定
|
||
```javascript
|
||
// 路由meta配置
|
||
meta: {
|
||
isAffix: true // 固定标签页
|
||
}
|
||
```
|
||
- 标签页不可关闭
|
||
- 通常用于首页等重要页面
|
||
|
||
## 9. 响应式适配
|
||
|
||
### 9.1 移动端适配
|
||
```
|
||
屏幕宽度检测
|
||
├── < 600px → Mobile模式
|
||
├── 600-992px → Tablet模式
|
||
├── > 992px → Desktop模式
|
||
|
||
布局自适应
|
||
├── 移动端隐藏侧边栏
|
||
├── 自动切换到单列布局
|
||
└── 调整组件尺寸
|
||
```
|
||
|
||
**源码位置**: `src/App.vue` (line 33-49)
|
||
|
||
## 10. 总结
|
||
|
||
CRMEB Admin的页面结构采用了典型的管理后台架构：
|
||
|
||
1. **分层设计**: 入口层 → 布局层 → 路由层 → 页面层
|
||
2. **模块化组织**: 路由按业务模块拆分，便于维护
|
||
3. **灵活布局**: 支持多种布局模式，适应不同使用场景
|
||
4. **权限控制**: 基于路由的权限验证体系
|
||
5. **缓存优化**: 智能的页面缓存机制提升用户体验
|
||
6. **响应式适配**: 支持多终端访问
|
||
|
||
这种架构设计使得系统具有良好的可扩展性和维护性，同时提供了丰富的定制化选项。 |