sql数据流，amdin业务逻辑接入

docs/project_spec/FRONTEND_ARCHITECTURE_ANALYSIS.md

@@ -0,0 +1,427 @@
+# 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. **样式模块化**: 将样式按组件和页面分离组织
+
+---
+
+**分析说明**: 本文档基于代码静态分析生成，重点分析了页面结构、组件依赖和文件职责关系。由于项目规模较大，部分细节需要进一步深入分析。