# Vue2-Client 项目结构详解

## 顶层目录结构
```
vue2-client/
├── src/                 # 源代码目录
├── public/              # 静态资源（不经webpack处理）
├── dist/                # 构建输出目录
├── docs/                # 项目文档
├── test/                # 测试文件（Jest）
├── tests/unit/          # 单元测试
├── node_modules/        # 依赖包
├── package.json         # 项目配置和依赖
├── vue.config.js        # Vue CLI配置
├── jest.config.js       # Jest测试配置
├── babel.config.js      # Babel配置
└── README.md            # 项目说明
```

## 核心源码结构 (src/)

### 1. base-client/ - 基础组件系统（核心）
```
base-client/
├── components/          # 可复用UI组件（全局注册）
│   ├── XForm/          # 表单组件
│   ├── XTable/         # 表格组件
│   ├── XCard/          # 卡片组件
│   ├── XPageView/      # 页面视图组件
│   └── ...             # 其他X系列组件
└── plugins/            # 全局Vue插件
    ├── auth.js         # 认证插件
    ├── i18n-extend.js  # 国际化扩展
    └── ...             # 其他插件
```
**特点**：
- 所有组件全局注册，整个应用可直接使用
- X前缀命名，表示核心基础组件
- 通过JSON配置驱动组件行为

### 2. components/ - 通用组件（按需引入）
```
components/
├── chart/              # 图表组件
├── Charts/             # G2图表组件
├── table/              # 表格相关
├── form/               # 表单相关
├── menu/               # 菜单组件
├── page/               # 页面组件
└── ...                 # 其他业务组件
```
**特点**：
- 按需引入，不全局注册
- 包含业务特定的组件
- 包含第三方组件的封装

### 3. pages/ - 页面组件
```
pages/
├── login/              # 登录页
├── dashboard/          # 仪表盘
├── system/             # 系统管理
├── WorkflowDetail/     # 工单流程详情
├── userInfoDetailManage/ # 用户信息管理
├── resourceManage/     # 资源管理
├── DynamicStatistics/  # 动态统计
├── lowCode/            # 低代码相关页面
└── ...                 # 其他业务页面
```
**特点**：
- 每个目录是一个功能模块
- 对应路由配置
- 可能包含子组件

### 4. layouts/ - 布局组件
```
layouts/
├── AdminLayout.vue     # 管理后台布局
├── BlankView.vue       # 空白布局
├── PageLayout.vue      # 页面布局
├── PageView.vue        # 页面视图
├── header/             # 头部组件
├── footer/             # 底部组件
└── tabs/               # 标签页组件
```
**特点**：
- 定义整体页面结构
- 包含通用的头部、侧边栏、底部
- 支持多种布局模式

### 5. router/ - 路由配置
```
router/
├── index.js            # 路由主入口
├── guards.js           # 路由守卫
├── i18n.js             # 国际化路由
└── async/              # 异步路由
    └── router.map.js   # 路由映射配置
```
**特点**：
- 支持动态路由
- 路由权限控制
- 国际化路由

### 6. services/ - 数据服务层
```
services/
├── apiService.js       # API服务基类
├── DataModel.js        # 数据模型转换
├── dataSource.js       # 数据源配置
├── user.js             # 用户服务
├── v3Api.js            # V3版本API
└── api/                # API接口定义
    ├── account.js      # 账户相关
    ├── system.js       # 系统相关
    └── ...             # 其他模块API
```
**特点**：
- 统一的API调用封装
- 数据模型转换层
- axios拦截器配置

### 7. store/ - Vuex状态管理
```
store/
├── index.js            # Store主入口
├── mutation-types.js   # Mutation类型常量
└── modules/            # 状态模块
    ├── account.js      # 账户状态
    ├── setting.js      # 设置状态
    ├── lowCode.js      # 低代码状态
    └── async-router.js # 异步路由状态
```
**特点**：
- 模块化状态管理
- 持久化存储支持
- 全局状态共享

### 8. config/ - 配置文件
```
config/
├── index.js            # 配置主入口
├── CreateQueryConfig.js # 查询配置
├── default/            # 默认配置
│   ├── setting.config.js
│   └── ...
└── replacer/           # 配置替换器
```
**特点**：
- 配置驱动开发
- 支持环境配置
- 可动态替换

### 9. utils/ - 工具函数
```
utils/
├── request.js          # HTTP请求封装
├── auth.js             # 认证工具
├── storage.js          # 存储工具
├── date.js             # 日期处理
├── encrypt.js          # 加密工具
├── format.js           # 格式化工具
└── ...                 # 其他工具
```
**特点**：
- 纯函数工具
- 可复用逻辑
- 无副作用

### 10. theme/ - 主题样式
```
theme/
├── index.less          # 主题入口
├── theme.less          # 主题变量
├── global.less         # 全局样式
├── antd/               # Ant Design主题定制
└── default/            # 默认主题
```
**特点**：
- Less变量定义
- Ant Design主题定制
- 动态主题切换支持

### 11. expression/ - 表达式系统
```
expression/
├── ExpressionRunner.js # 表达式运行器
├── core/               # 核心逻辑
├── enums/              # 枚举定义
├── exception/          # 异常处理
└── ts/                 # TypeScript定义
```
**特点**：
- 低代码平台表达式求值
- 支持复杂表达式计算

### 12. logic/ - 逻辑系统
```
logic/
├── LogicRunner.js      # 逻辑运行器
├── plugins/            # 逻辑插件
└── ts/                 # TypeScript定义
```
**特点**：
- 低代码平台业务逻辑执行
- 插件化扩展

### 13. assets/ - 静态资源
```
assets/
├── img/                # 图片
├── svg/                # SVG图标
├── sound/              # 音频文件
└── ttf/                # 字体文件
```

### 14. mixins/ - Vue混入
```
mixins/
└── formValidationMixin.js  # 表单验证混入
```
**特点**：
- 共享组件逻辑
- 表单验证等通用功能

### 15. plugins/ - 自定义插件
```
plugins/
├── EventLogPlugin.js   # 事件日志插件
├── FindParentsData.js  # 父级数据查找
└── HiPrintPlugin.js    # 打印插件
```

## 关键入口文件

### main.js
- 应用入口
- Vue实例创建
- 全局配置初始化

### bootstrap.js
- 应用启动引导
- 插件注册
- 全局组件注册

### index.js
- 模块导出入口
- 供外部项目引入使用

### App.vue
- 根组件
- 应用容器

## 配置文件说明

### vue.config.js
- Webpack配置
- 开发服务器配置
- 代理配置
- 别名配置
- 主题配置
- 性能优化配置

### package.json
- 项目元信息
- 依赖管理
- 脚本命令
- 版本：v1.17.13

### jest.config.js
- 测试框架配置
- 模块映射
- 转换规则

### babel.config.js
- Babel编译配置
- JSX支持
- Polyfill配置

## 特殊目录说明

### public/
不经webpack处理的静态资源：
- index.html（入口HTML）
- favicon.ico
- his/editor/（富文本编辑器）

### dist/
构建输出目录：
- 生产环境构建结果
- 压缩和优化后的资源
- 按环境生成不同配置

### docs/
项目文档：
- 低代码平台文档
- 组件使用文档
- 功能说明文档

## 模块依赖关系

```
main.js
  └── bootstrap.js
        ├── base-client/ (全局注册)
        ├── plugins/
        ├── router/
        ├── store/
        └── config/
            
pages/
  └── layouts/
        └── base-client/components/ (X组件)
              └── components/ (通用组件)
                    └── utils/
                          └── services/
```

## 构建输出结构 (dist/)
```
dist/
├── index.html          # 入口HTML
├── static/             # 静态资源
│   ├── css/           # 样式文件
│   ├── js/            # JavaScript文件
│   ├── fonts/         # 字体文件
│   └── img/           # 图片文件
├── css/               # 主题CSS
└── favicon.ico        # 图标
```