# 技术栈文档

## 项目概述

**项目名称**：内控管理系统（cz-hjjc-ht）  
**项目版本**：4.4.0  
**基础模板**：vue-admin-template  
**开发端口**：9530

## 核心技术栈

### 前端框架
- **Vue.js**: `2.6.10`
  - 渐进式 JavaScript 框架
  - 使用 Options API
  - 支持 Composition API（通过 @vue/composition-api）

### UI 组件库
- **Element UI**: `2.13.2`
  - 基于 Vue 2.0 的桌面端组件库
  - 主要 UI 组件来源
  - 提供完整的组件生态

- **View Design (iView)**: `4.7.0`
  - 企业级 UI 组件库
  - 作为 Element UI 的补充组件

### 状态管理
- **Vuex**: `3.1.0`
  - 集中式状态管理
  - 支持模块化 store 结构
  - 主要模块：app、permission、settings、user

- **vuex-persistedstate**: `^4.1.0`
  - Vuex 状态持久化插件
  - 将状态保存到 localStorage

### 路由管理
- **Vue Router**: `3.0.6`
  - 官方路由管理器
  - 支持动态路由、权限控制
  - 路由懒加载优化

### HTTP 客户端
- **Axios**: `0.18.1`
  - 基于 Promise 的 HTTP 库
  - 支持请求/响应拦截器
  - 统一错误处理和加载状态管理
  - Bearer Token 认证

### 构建工具
- **Vue CLI**: `4.4.4`
  - 官方脚手架工具
  - 基于 Webpack 的构建配置
  - 开发服务器、热更新支持

### CSS 预处理器
- **Less**: `^3.13.1`
  - CSS 预处理器
  - less-loader `^5.0.0`

- **Sass/SCSS**: `1.26.8`
  - CSS 预处理器
  - sass-loader `8.0.2`

### 图表与可视化
- **ECharts**: `^5.0.0`
  - 数据可视化图表库
  - 用于仪表盘和报表展示
  - 支持多种图表类型

### 文档处理
- **@vue-office/docx**: `^1.6.2`
  - Word 文档预览组件

- **@vue-office/excel**: `^1.7.11`
  - Excel 文档预览组件

- **@vue-office/pdf**: `^2.0.2`
  - PDF 文档预览组件

- **docx-preview**: `^0.3.2`
  - Word 文档预览库

### 富文本编辑器
- **wangeditor**: `^4.7.12`
  - 轻量级富文本编辑器
  - 支持 Markdown

### 工具库
- **moment**: `^2.29.4`
  - 日期时间处理库
  - 通过 `Vue.prototype.$moment` 全局使用

- **js-cookie**: `2.2.0`
  - Cookie 操作工具
  - 用于 Token 存储

- **path-to-regexp**: `2.4.0`
  - 路径匹配工具
  - 路由匹配支持

- **nprogress**: `0.2.0`
  - 页面加载进度条
  - 提升用户体验

- **normalize.css**: `7.0.0`
  - CSS 重置样式
  - 统一浏览器默认样式

### 其他功能库
- **vue-grid-layout**: `^2.4.0`
  - 网格布局组件
  - 支持拖拽和调整大小
  - 用于仪表盘布局

- **html2canvas**: `^1.4.1`
  - HTML 转 Canvas 工具
  - 用于截图功能

- **print-js**: `^1.6.0`
  - 打印功能库
  - 支持 HTML、PDF、图片打印

- **element-resize-detector**: `^1.2.4`
  - 元素尺寸监听工具
  - 用于响应式布局

- **@vue/composition-api**: `^1.7.2`
  - Composition API 支持（Vue 2）
  - 为 Vue 3 迁移做准备

- **vue-demi**: `^0.14.6`
  - 兼容 Vue 2/3 的工具库

### 微前端支持
- **Wujie（无界）**
  - 支持微前端架构
  - 可在 iframe 中运行
  - 支持生命周期管理（MOUNT/UNMOUNT）
  - 支持独立运行模式和嵌入模式

### 核心依赖
- **core-js**: `3.6.5`
  - JavaScript 标准库 polyfill
  - 提供 ES6+ 特性支持

## 开发工具

### 代码规范
- **ESLint**: `6.7.2`
  - 代码质量检查工具
  - 支持 Vue 文件检查（eslint-plugin-vue 6.2.2）
  - 使用 babel-eslint `^8.2.2` 作为解析器

### 测试框架
- **Jest**: 通过 `@vue/cli-plugin-unit-jest`
  - 单元测试框架
  - 使用 @vue/test-utils `1.0.0-beta.29`
  - babel-jest `23.6.0` 用于转译

### 编译工具
- **Babel**
  - @vue/cli-plugin-babel `4.4.4`
  - babel-plugin-dynamic-import-node `2.3.3`
  - 开发环境动态导入优化

### 构建优化
- **SVG 处理**
  - svg-sprite-loader `4.1.3` - SVG 图标精灵图
  - svgo `1.2.2` - SVG 优化工具

- **代码分割**
  - chunk-libs: 第三方库分离
  - chunk-elementUI: Element UI 单独打包
  - chunk-commons: 公共组件分离（最小引用 3 次）
  - runtime chunk: 运行时代码分离

- **构建优化插件**
  - script-ext-html-webpack-plugin `2.1.3` - 内联运行时脚本

### Mock 数据
- **mockjs**: `1.0.1-beta3`
  - 生成随机数据
  - 拦截 Ajax 请求
  - 用于开发环境数据模拟

### 其他开发工具
- **chalk**: `2.4.2` - 终端颜色输出
- **runjs**: `4.3.2` - 脚本运行工具
- **connect**: `3.6.6` - HTTP 服务器
- **serve-static**: `1.13.2` - 静态文件服务

## 项目配置

### 开发服务器
- **端口**：9530（默认）
- **自动打开浏览器**：是
- **热更新**：支持
- **代理配置**：支持多个 API 代理
  - `/old` -> 旧版系统
  - `/oa` -> OA 系统
  - 主 API -> `VUE_APP_BASE_API`

### 环境变量
- `VUE_APP_MODULE_NAME`: 模块名称（用于路由和构建路径）
- `VUE_APP_BASE_API`: API 基础路径
- `VUE_APP_OUT_URL`: 外部系统 URL
- `VUE_APP_OUT_OLD`: 旧版外部系统 URL

### 路径别名
- `@`: 指向 `src` 目录

### 浏览器兼容性
- 支持所有市场份额 > 1% 的浏览器
- 最后两个版本
- 现代浏览器和 IE 10+

## 项目结构特点

### 权限控制
- **基于角色的权限管理（RBAC）**
- **路由级别权限控制**
- **动态路由生成**
- **按钮级别权限控制**

### 多模式支持
- **独立运行模式**：直接访问应用
- **iframe 嵌入模式**：嵌入到其他系统中
- **微前端（Wujie）模式**：作为微前端子应用

### 错误处理
- **全局错误捕获**：Vue.config.errorHandler
- **iframe 环境错误上报**：向父窗口上报错误
- **Axios 请求错误统一处理**：统一错误提示和处理

### 自定义组件
- **LxHeader**: 自定义头部组件
- **XyTable**: 自定义表格组件
- **XyDialog**: 自定义对话框组件
- **XySelectors**: 自定义选择器组件
- **PlanPicker**: 计划选择器组件
- **Breadcrumb**: 面包屑导航
- **Pagination**: 分页组件

## 主要功能模块

根据项目结构，主要包含以下业务模块：

1. **预算管理** (budget)
   - 预算编制、审核、执行
   - 预算汇总、上报
   - 预算目标管理

2. **合同管理** (contract)
   - 合同列表、详情
   - 合同签订
   - 合同集成

3. **绩效管理** (achievements)
   - 评价管理
   - 积分管理
   - 类型管理

4. **部门进度** (departmentProgress)
   - 部门工作进度跟踪

5. **财务管理** (finance)
   - 收支管理
   - 资金登记

6. **系统管理** (system/sysManage)
   - 用户管理
   - 角色管理
   - 权限管理
   - 菜单管理
   - 字典管理
   - 日志管理

7. **仪表盘** (dashboard)
   - 数据可视化
   - 通知公告

8. **其他功能**
   - 请假管理 (away)
   - 借阅管理 (borrow)
   - 安装部署 (install)
   - 预览功能 (preview)
   - 统计报表 (statisticalReport)

## 运行环境要求

- **Node.js**: >= 8.9
- **npm**: >= 3.0.0

## 常用命令

```bash
# 开发环境
npm run dev

# 生产环境构建
npm run build:prod

# 预发布环境构建
npm run build:stage

# 预览构建结果
npm run preview

# 代码检查
npm run lint

# 单元测试
npm run test:unit

# 代码检查和测试
npm run test:ci

# SVG 优化
npm run svgo
```

## 技术栈版本总结

| 分类 | 技术 | 版本 |
|------|------|------|
| 前端框架 | Vue | 2.6.10 |
| UI 库 | Element UI | 2.13.2 |
| UI 库 | View Design | 4.7.0 |
| 状态管理 | Vuex | 3.1.0 |
| 路由 | Vue Router | 3.0.6 |
| HTTP | Axios | 0.18.1 |
| 构建工具 | Vue CLI | 4.4.4 |
| CSS 预处理器 | Less | ^3.13.1 |
| CSS 预处理器 | Sass | 1.26.8 |
| 图表库 | ECharts | ^5.0.0 |
| 日期处理 | moment | ^2.29.4 |
| 富文本编辑器 | wangeditor | ^4.7.12 |
| 测试框架 | Jest | - |
| 代码规范 | ESLint | 6.7.2 |
| 微前端 | Wujie | - |

## 技术栈特点

### 优势
1. **成熟稳定**：基于 Vue 2 + Element UI 的成熟方案
2. **功能完整**：包含完整的后台管理系统功能
3. **多模式支持**：支持独立运行、iframe、微前端多种部署方式
4. **权限完善**：完整的权限控制系统
5. **文档支持**：支持 Office 文档预览

### 注意事项
1. **Axios 版本较旧**：当前使用 0.18.1，建议升级到最新版本以获得更好的安全性和功能支持
2. **Vue 2 项目**：项目基于 Vue 2.6，如需升级到 Vue 3，需要大量重构工作
3. **微前端兼容**：项目支持多种运行模式，在修改入口文件时需要确保兼容性
4. **生产环境构建**：构建产物输出到 `../cz_hjjc/public/${VUE_APP_MODULE_NAME}`，需要配置相应的环境变量
5. **依赖更新**：部分依赖版本较旧，建议定期更新以获取安全补丁

## 项目构建输出

- **输出目录**：`../cz_hjjc/public/${VUE_APP_MODULE_NAME}`
- **静态资源目录**：`static`
- **源码映射**：生产环境关闭（productionSourceMap: false）

---

*文档生成时间：基于 package.json 和项目结构分析*  
*项目路径：/Users/weizongsong/www/cz-hjjc-ht*