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