huangzhenbao/medical-mall

Fork 0

Files

huangzhenbao 9f3c2803e3 完善页面布局

2026-01-28 17:54:30 +08:00

8.0 KiB

Raw Blame History

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 配置

// 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 全屏页面

// 路由meta配置
meta: {
  fullScreen: true  // 启用全屏模式
}

隐藏侧边栏和顶部导航
适用于页面设计器等特殊场景

8.2 内嵌页面

// 路由meta配置
meta: {
  isIframe: true,   // 内嵌iframe
  isLink: true      // 链接页面
}

支持iframe内嵌外部页面
支持直接跳转外部链接

8.3 标签页固定

// 路由meta配置
meta: {
  isAffix: true     // 固定标签页
}

标签页不可关闭
通常用于首页等重要页面

9. 响应式适配

9.1 移动端适配

屏幕宽度检测
├── < 600px → Mobile模式
├── 600-992px → Tablet模式
├── > 992px → Desktop模式

布局自适应
├── 移动端隐藏侧边栏
├── 自动切换到单列布局
└── 调整组件尺寸

源码位置: src/App.vue (line 33-49)

10. 总结

CRMEB Admin的页面结构采用了典型的管理后台架构：

分层设计: 入口层 → 布局层 → 路由层 → 页面层
模块化组织: 路由按业务模块拆分，便于维护
灵活布局: 支持多种布局模式，适应不同使用场景
权限控制: 基于路由的权限验证体系
缓存优化: 智能的页面缓存机制提升用户体验
响应式适配: 支持多终端访问

这种架构设计使得系统具有良好的可扩展性和维护性，同时提供了丰富的定制化选项。

8.0 KiB Raw Blame History Unescape Escape