medical-mall/docs/FRONTEND_ARCHITECTURE_ANALYSIS.md

CRMEB Admin 前端架构梳理分析

项目概述

• 项目名称: CRMEB Admin Template
• 技术栈: Vue.js + Element UI + Vue Router + Vuex
• 项目类型: 电商管理后台系统
• 分析时间: 2026-01-23

1. 页面总览表

路由路径	页面标题	所属端	是否tab/子包	说明	入口文件
/admin/index	主页	Admin后台	否	系统首页，包含基础统计信息	src/pages/index/index.vue
/admin/product/product_list	商品管理	Admin后台	否	商品列表管理页面	src/pages/product/productList/index.vue
/admin/product/product_classify	商品分类	Admin后台	否	商品分类管理	src/pages/product/productClassify/index.vue
/admin/product/add_product/:id?	商品添加	Admin后台	否	添加/编辑商品	src/pages/product/productAdd/index.vue
/admin/order/list	订单管理	Admin后台	否	订单列表管理	src/pages/order/orderList/index.vue
/admin/order/offline	收银订单	Admin后台	否	线下收银订单	src/pages/order/offline/index.vue
/admin/order/refund	售后订单	Admin后台	否	售后退款订单	src/pages/order/refund/index.vue
/admin/user/list	用户管理	Admin后台	否	用户列表管理	src/pages/user/list/index.vue
/admin/user/level	用户等级	Admin后台	否	用户等级管理	src/pages/user/level/index.vue
/admin/user/group	用户分组	Admin后台	否	用户分组管理	src/pages/user/group/index.vue
/admin/setting/system_config	系统设置	Admin后台	否	系统基础配置	src/pages/setting/setSystem/index.vue
/admin/setting/system_role/index	身份管理	Admin后台	否	管理员角色管理	src/pages/setting/systemRole/index.vue
/admin/setting/system_admin/index	管理员列表	Admin后台	否	管理员账户管理	src/pages/setting/systemAdmin/index.vue
/admin/marketing/store_combination/index	拼团商品	Admin后台	否	拼团活动商品管理	src/pages/marketing/storeCombination/index.vue
/admin/marketing/store_coupon_issue/index	优惠券	Admin后台	否	优惠券发放管理	src/pages/marketing/storeCouponIssue/index.vue
/admin/system/log	前端日志	Admin后台	否	系统日志查看	src/pages/system/log/index.vue

来源: src/router/modules/*.js 文件中的路由配置

2. 页面关系树

CRMEB Admin 后台系统
├── 主页 (home_index)
│   ├── 基础信息展示 (baseInfo)
│   ├── 快捷菜单 (gridMenu)
│   ├── 访问统计图表 (visitChart)
│   └── 用户统计图表 (userChart)
├── 商品管理 (product)
│   ├── 商品列表 (productList)
│   │   ├── 搜索筛选区
│   │   ├── 商品列表表格
│   │   └── 操作按钮区
│   ├── 商品分类 (productClassify)
│   ├── 添加商品 (productAdd)
│   ├── 商品评论 (productEvaluate)
│   ├── 商品规格 (productAttr)
│   ├── 商品参数 (paramList)
│   └── 商品标签 (labelList)
├── 订单管理 (order)
│   ├── 订单列表 (orderList)
│   ├── 收银订单 (offline)
│   ├── 售后订单 (refund)
│   └── 发票管理 (invoice)
├── 用户管理 (user)
│   ├── 用户列表 (list)
│   │   ├── 用户搜索筛选
│   │   ├── 用户列表表格
│   │   └── 用户详情弹窗
│   ├── 用户等级 (level)
│   ├── 用户分组 (group)
│   ├── 用户标签 (label)
│   ├── 会员类型 (type)
│   ├── 卡密会员 (card)
│   ├── 会员记录 (record)
│   └── 会员权益 (right)
├── 系统设置 (setting)
│   ├── 系统配置 (setSystem)
│   ├── 身份管理 (systemRole)
│   ├── 管理员列表 (systemAdmin)
│   ├── 消息管理 (notification)
│   ├── 物流配置 (logistics)
│   ├── 短信配置 (sms)
│   ├── 商城配置 (config)
│   ├── 主题风格 (themeStyle)
│   ├── 店铺装修 (devise)
│   ├── 客服管理 (service)
│   ├── 城市数据 (dada)
│   ├── 运费模板 (templates)
│   ├── 提货点管理 (store)
│   ├── 核销员管理 (staff)
│   └── 核销订单 (order)
├── 营销活动 (marketing)
│   ├── 拼团商品 (combinalist)
│   ├── 优惠券 (storeCouponIssue)
│   ├── 秒杀商品 (storeSeckill)
│   ├── 积分商品 (storeIntegral)
│   └── 砍价商品 (bargain)
├── 财务管理 (finance)
│   ├── 财务对账 (financeList)
│   ├── 资金记录 (capitalFlow)
│   ├── 佣金记录 (commissionList)
│   ├── 提现申请 (extractList)
│   └── 账单记录 (billList)
├── 系统管理 (system)
│   ├── 代码生成 (codeGeneration)
│   ├── 文件管理 (fileList)
│   ├── 维护管理 (maintain)
│   └── 数据配置 (groupData)
├── 应用管理 (app)
│   ├── 微信菜单 (wechatMenu)
│   ├── 微信回复 (wechatReply)
│   └── 微信用户 (wechatUser)
└── 统计报表 (statistic)
    ├── 产品统计 (productStatistic)
    ├── 用户统计 (userStatistic)
    ├── 订单统计 (orderStatistic)
    └── 交易统计 (transactionStatistic)

3. 页面区域-文件映射表

3.1 主页 (home_index)

区域名	对应组件/文件	说明	关键状态	关键接口
基础信息展示区	src/pages/index/components/baseInfo.vue	显示今日/昨日数据对比和总计信息	infoList数组	headerApi (来源: src/api/index.js)
快捷菜单区	src/pages/index/components/gridMenu.vue	九宫格快捷入口菜单	-	-
访问统计图表	src/pages/index/components/visitChart.vue	订单统计图表展示	visitType, visitDate	-
用户统计图表	src/pages/index/components/userChart.vue	用户数据统计图表	-	-
页面布局容器	src/pages/index/index.vue	主页布局容器，组合上述组件	userInfo	auth() (来源: src/api/system.js)
Vuex状态	src/store/module/userInfo.js	用户信息状态管理	userInfo	-

来源: src/pages/index/index.vue (行7-15), src/store/module/userInfo.js

3.2 商品列表页面 (product_productList)

区域名	对应组件/文件	说明	关键状态	关键接口
搜索筛选区	内联在页面模板中	商品名称、类型、分类、配送方式等筛选条件	artFrom表单对象	-
商品列表表格	内联在页面模板中	商品数据表格展示，包含分页	tableData数组	productList() (来源: src/api/product.js)
操作按钮区	内联在页面模板中	批量操作、添加商品等按钮	-	-
页面布局容器	src/pages/product/productList/index.vue	商品管理主页面	artFrom, tableData, loading	productList(), productStatus() (来源: src/api/product.js)

来源: src/pages/product/productList/index.vue (行1-50), src/api/product.js

3.3 用户列表页面 (user_list)

区域名	对应组件/文件	说明	关键状态	关键接口
用户搜索筛选区	内联在页面模板中	用户昵称、等级、分组等筛选条件	userFrom表单对象, field_key	-
用户列表表格	内联在页面模板中	用户数据表格，包含用户信息展示	tableData数组	userList() (来源: src/api/user.js)
用户详情弹窗	src/pages/user/list/handle/userDetails.vue	用户详细信息弹窗组件	visible, userInfo	-
用户编辑弹窗	src/pages/user/list/handle/userEdit.vue	用户信息编辑弹窗	visible, editForm	userEdit() (来源: src/api/user.js)
页面布局容器	src/pages/user/list/index.vue	用户管理主页面	userFrom, tableData, collapse	userList(), userLevel(), userGroup() (来源: src/api/user.js)

来源: src/pages/user/list/index.vue (行1-100), src/api/user.js

4. 文件职责清单

4.1 Pages 目录文件职责

主页相关 (src/pages/index/)

• index.vue: 主页容器组件，组合统计组件，处理用户认证
• components/baseInfo.vue: 基础统计信息卡片展示
• components/gridMenu.vue: 快捷操作菜单网格
• components/visitChart.vue: 访问统计图表组件
• components/userChart.vue: 用户统计图表组件

商品管理 (src/pages/product/)

• productList/index.vue: 商品列表页面，包含搜索、筛选、表格展示
• productClassify/index.vue: 商品分类管理页面
• productAdd/index.vue: 商品添加/编辑页面
• productReply/index.vue: 商品评论管理页面
• productAttr/index.vue: 商品规格管理页面
• paramList/index.vue: 商品参数管理页面
• labelList/index.vue: 商品标签管理页面

订单管理 (src/pages/order/)

• orderList/index.vue: 订单列表管理页面
• offline/index.vue: 收银订单管理页面
• refund/index.vue: 售后订单管理页面
• invoice/index.vue: 发票管理页面

用户管理 (src/pages/user/)

• list/index.vue: 用户列表主页面
• list/handle/userDetails.vue: 用户详情弹窗组件
• list/handle/userEdit.vue: 用户编辑弹窗组件
• list/handle/userEditForm.vue: 用户编辑表单组件
• list/handle/userInfo.vue: 用户信息展示组件
• list/tableExpand.vue: 用户列表表格展开组件
• level/index.vue: 用户等级管理页面
• group/index.vue: 用户分组管理页面
• label/index.vue: 用户标签管理页面

系统设置 (src/pages/setting/)

• setSystem/index.vue: 系统配置主页面
• systemRole/index.vue: 管理员角色管理页面
• systemAdmin/index.vue: 管理员列表管理页面
• notification/index.vue: 消息管理页面
• notification/notificationEdit.vue: 消息编辑页面
• membershipLevel/index.vue: 分销等级管理页面
• freight/index.vue: 物流公司管理页面
• cityDada/index.vue: 城市数据管理页面
• shippingTemplates/index.vue: 运费模板管理页面
• storeList/index.vue: 提货点管理页面
• clerkList/index.vue: 核销员管理页面
• verifyOrder/index.vue: 核销订单管理页面
• themeStyle/index.vue: 主题风格设置页面
• devise/list.vue: 店铺装修页面
• devisePage/index.vue: 页面设计页面
• link.vue: 链接管理页面
• storage.vue: 存储配置页面
• ticket.vue: 打印机设置页面
• agreement/index.vue: 协议设置页面

营销活动 (src/pages/marketing/)

• storeCombination/index.vue: 拼团商品管理页面
• storeCombination/combinaList.vue: 拼团列表页面
• storeCouponIssue/index.vue: 优惠券管理页面
• storeSeckill/index.vue: 秒杀商品管理页面
• storeIntegral/index.vue: 积分商品管理页面
• storeBargain/index.vue: 砍价商品管理页面

财务管理 (src/pages/finance/)

• financeList/index.vue: 财务对账页面
• capitalFlow/index.vue: 资金记录页面
• commissionList/index.vue: 佣金记录页面
• extractList/index.vue: 提现申请页面
• billList/index.vue: 账单记录页面

系统管理 (src/pages/system/)

• codeGeneration/index.vue: 代码生成页面
• fileList/index.vue: 文件管理页面
• maintain/index.vue: 维护管理页面
• group/list.vue: 数据配置页面

应用管理 (src/pages/app/)

• wechatMenu/index.vue: 微信菜单管理页面
• wechatReply/index.vue: 微信回复管理页面
• wechatUser/index.vue: 微信用户管理页面

统计报表 (src/pages/statistic/)

• productStatistic/index.vue: 产品统计页面
• userStatistic/index.vue: 用户统计页面
• orderStatistic/index.vue: 订单统计页面
• transactionStatistic/index.vue: 交易统计页面

4.2 Components 目录文件职责

通用组件 (src/components/)

• common-icon/: 通用图标组件
• copyright/: 版权信息组件
• Pagination/: 分页组件
• parent-view/: 父视图组件
• publicSearchFrom/: 公共搜索表单组件
• searchFrom/: 搜索表单组件
• uploadImg/: 图片上传组件
• uploadPictures/: 多图上传组件
• uploadVideo/: 视频上传组件
• uploadVideo2/: 视频上传组件(增强版)

表单组件 (src/components/from/)

• from/: 通用表单组件

图表组件 (src/components/echarts/)

• echarts/: ECharts图表基础组件
• echartsNew/: 新版ECharts图表组件

移动端配置组件 (src/components/mobileConfig/)

• 包含大量移动端页面配置组件

弹窗组件 (src/components/hotpotModal/)

• hotpotModal/: 热区弹窗组件

编辑器组件 (src/components/wangEditor/)

• wangEditor/: 富文本编辑器组件

4.3 Store 目录文件职责

Vuex状态管理模块 (src/store/module/)

• user.js: 用户登录状态管理
• app.js: 应用全局状态
• menus.js: 菜单数据管理
• menu.js: 当前菜单状态
• userInfo.js: 用户信息管理
• userLevel.js: 用户等级管理
• order.js: 订单相关状态
• media.js: 媒体文件管理
• goodSelect.js: 商品选择状态
• moren.js: 默认配置管理
• shopping.js: 购物相关状态
• fresh.js: 刷新状态管理
• kefu.js: 客服状态管理
• integralOrder.js: 积分订单管理
• mobildConfig.js: 移动端配置
• upgrade.js: 升级状态管理
• layout.js: 布局状态管理
• themeConfig.js: 主题配置
• routesList.js: 路由列表
• tagsViewRoutes.js: 标签页路由
• userInfos.js: 用户信息扩展
• keepAliveNames.js: 缓存页面名称

4.4 API 目录文件职责

接口文件 (src/api/)

• index.js: 首页相关接口
• account.js: 账户相关接口
• agent.js: 代理商相关接口
• app.js: 应用相关接口
• cms.js: CMS内容管理接口
• common.js: 通用接口
• crud.js: CRUD通用接口
• diy.js: DIY装修接口
• export.js: 导出相关接口
• finance.js: 财务相关接口
• index.js: 首页统计接口
• kefu.js: 客服相关接口
• kefu_mobile.js: 移动端客服接口
• live.js: 直播相关接口
• lottery.js: 抽奖相关接口
• marketing.js: 营销活动接口
• membershipLevel.js: 会员等级接口
• notification.js: 消息通知接口
• order.js: 订单相关接口
• product.js: 商品相关接口
• setting.js: 设置相关接口
• statistic.js: 统计相关接口
• system.js: 系统相关接口
• systemAdmin.js: 管理员接口
• systemBackendRouting.js: 后端路由接口
• systemCodeGeneration.js: 代码生成接口
• systemMenus.js: 菜单接口
• systemOutAccount.js: 外部账户接口
• upload.js: 上传相关接口
• uploadPictures.js: 图片上传接口
• user.js: 用户相关接口

4.5 Utils 目录文件职责

工具函数 (src/utils/)

• ase.js: AES加密工具
• authLapse.js: 认证过期处理
• bus.js: 事件总线
• city.js: 城市数据处理
• componentSize.js: 组件尺寸工具
• compressImg.js: 图片压缩工具
• editorImg.js: 编辑器图片处理
• emoji.js: 表情符号处理
• Excel.js: Excel处理工具
• icon.js: 图标处理工具
• index.js: 工具函数入口
• loading.js: 加载状态管理
• modalForm.js: 弹窗表单工具
• newToExcel.js: 新版Excel导出
• public.js: 公共工具函数
• scroll-to.js: 滚动工具
• storage.js: 本地存储工具
• theme.js: 主题工具
• toolsValidate.js: 表单验证工具
• upload.js: 上传工具
• validate.js: 数据验证工具
• videoCloud.js: 视频云处理

4.6 Styles 目录文件职责

样式文件 (src/theme/)

• app.scss: 应用主样式
• base.scss: 基础样式
• common/transition.scss: 过渡动画样式
• dark.scss: 暗色主题
• element.scss: Element UI样式覆盖
• iview.scss: iView样式覆盖
• index.scss: 样式入口文件
• loading.scss: 加载样式
• variables.scss: 样式变量

5. 未知/缺失信息清单

5.1 需要补充分析的页面文件

• src/pages/kefu/: 客服模块页面文件（40个文件）- 未详细分析
• src/pages/marketing/: 部分营销活动页面组件 - 未完全追踪依赖关系
• src/pages/setting/: 系统设置下多个子页面 - 未完全分析组件结构
• src/pages/system/: 系统管理页面 - 未详细分析
• src/pages/app/: 应用管理页面 - 未详细分析
• src/pages/statistic/: 统计报表页面 - 未详细分析

5.2 需要补充的组件依赖

• src/components/mobileConfig/: 35个移动端配置组件 - 未分析具体职责
• src/components/mobileConfigRight/: 39个右侧配置组件 - 未分析具体职责
• src/components/mobilePage/: 28个移动端页面组件 - 未分析具体职责
• src/components/mobilePageDiy/: 23个DIY页面组件 - 未分析具体职责

5.3 需要补充的API接口分析

• 大部分API文件只分析了入口，未分析具体接口函数职责
• 缺少接口参数和返回数据结构分析

5.4 需要补充的Store状态分析

• 大部分store模块只分析了入口，未分析具体state/mutations/actions结构

5.5 需要补充的Utils工具分析

• 大部分工具文件未分析具体函数功能和使用场景

6. 架构优化建议

6.1 组件抽取建议

1. 搜索筛选组件: 将各页面的搜索筛选逻辑抽取为通用组件
2. 数据表格组件: 标准化列表页面的表格展示组件
3. 弹窗表单组件: 统一弹窗编辑表单的结构和交互
4. 统计卡片组件: 标准化统计信息展示组件

6.2 Store模块重组建议

1. 按业务域重组: 将相关业务的状态管理集中到一起
2. 状态规范化: 统一state的命名和结构规范
3. Actions抽象: 将通用数据操作抽象为通用actions

6.3 API接口重组建议

1. 按模块分组: 将API按业务模块重新组织
2. 接口规范化: 统一接口命名和参数结构
3. 错误处理统一: 标准化API错误处理逻辑

6.4 Utils工具优化建议

1. 工具分类: 按功能类型重新组织工具函数
2. 通用工具库: 抽取跨页面使用的通用工具
3. 类型定义: 为工具函数添加TypeScript类型定义

6.5 文件组织优化建议

1. 组件按功能分组: 将组件按功能类型重新组织目录结构
2. 页面组件瘦身: 将复杂页面的逻辑抽取到composables中
3. 样式模块化: 将样式按组件和页面分离组织

---

分析说明: 本文档基于代码静态分析生成，重点分析了页面结构、组件依赖和文件职责关系。由于项目规模较大，部分细节需要进一步深入分析。