19 KiB
19 KiB
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 组件抽取建议
- 搜索筛选组件: 将各页面的搜索筛选逻辑抽取为通用组件
- 数据表格组件: 标准化列表页面的表格展示组件
- 弹窗表单组件: 统一弹窗编辑表单的结构和交互
- 统计卡片组件: 标准化统计信息展示组件
6.2 Store模块重组建议
- 按业务域重组: 将相关业务的状态管理集中到一起
- 状态规范化: 统一state的命名和结构规范
- Actions抽象: 将通用数据操作抽象为通用actions
6.3 API接口重组建议
- 按模块分组: 将API按业务模块重新组织
- 接口规范化: 统一接口命名和参数结构
- 错误处理统一: 标准化API错误处理逻辑
6.4 Utils工具优化建议
- 工具分类: 按功能类型重新组织工具函数
- 通用工具库: 抽取跨页面使用的通用工具
- 类型定义: 为工具函数添加TypeScript类型定义
6.5 文件组织优化建议
- 组件按功能分组: 将组件按功能类型重新组织目录结构
- 页面组件瘦身: 将复杂页面的逻辑抽取到composables中
- 样式模块化: 将样式按组件和页面分离组织
分析说明: 本文档基于代码静态分析生成，重点分析了页面结构、组件依赖和文件职责关系。由于项目规模较大，部分细节需要进一步深入分析。