English | 中文
Addax UI 是一个基于 Vue 3 + Vuetify 开发的现代化 ETL 数据管理前端系统，为 Addax 数据同步工具提供了直观易用的 Web 管理界面。
本项目是完整 ETL 管理解决方案的一部分，由三个核心项目组成：
- Addax - 高性能的 ETL 数据同步引擎
- Addax Admin - ETL 管理后端服务
- Addax UI - ETL 管理前端界面（本项目）
- 🚀 实时监控 - 可视化 ETL 任务执行状态和性能指标
- 📊 任务管理 - 创建、编辑、调度和监控 ETL 任务
- 🔍 数据源管理 - 支持多种数据源的连接和配置
- 📋 字段映射 - 可视化源表和目标表字段映射与对比
- 📈 性能分析 - 详细的任务执行报告和性能分析
- 🔐 权限控制 - 基于角色的用户权限管理
- 📱 响应式设计 - 支持桌面端和移动端访问
- 前端框架: Vue 3 (Composition API)
- UI 组件库: Vuetify 3
- 开发语言: TypeScript
- 状态管理: Pinia
- 路由: Vue Router 4
- 构建工具: Vite
- 图表库: Chart.js + Vue Chart.js
- HTTP 客户端: Axios
- 代码规范: ESLint + Prettier
- Node.js >= 16.0.0
- npm >= 8.0.0 或 yarn >= 1.22.0
# 克隆项目
git clone https://github.com/wgzhao/addax-ui.git
cd addax-ui
# 安装依赖
npm install
# 或使用 yarn
yarn install# 启动开发服务器
npm run dev
# 或
yarn dev访问 http://localhost:3030 查看应用。
# 构建生产版本
npm run build
# 或
yarn build
# 预览生产构建
npm run preview
# 或
yarn previewaddax-ui/
├── src/
│ ├── components/ # 可复用组件
│ │ ├── dashboard/ # 仪表板组件
│ │ ├── dataservice/ # 数据服务组件
│ │ ├── datasource/ # 数据源组件
│ │ ├── ods/ # ODS 相关组件
│ │ └── sp/ # 存储过程组件
│ ├── layouts/ # 布局组件
│ ├── router/ # 路由配置
│ ├── service/ # API 服务
│ ├── stores/ # Pinia 状态管理
│ ├── types/ # TypeScript 类型定义
│ ├── utils/ # 工具函数
│ └── views/ # 页面组件
├── public/ # 静态资源
└── screenshots/ # 项目截图
实时显示 ETL 任务状态和系统概览
ODS 表配置界面，支持表单验证和实时预览
实时任务监控面板，显示任务执行状态和性能指标
可视化对比源表和目标表字段，包括字段名、数据类型等
在项目根目录创建 .env.local 文件：
# API 基础路径
VITE_API_BASE_URL=/api
# 后端服务地址
VITE_API_HOST=http://localhost:8080项目使用 Vite 作为构建工具，主要配置在 vite.config.mts 中：
- 开发服务器端口：3030
- 自动代理 API 请求到后端服务
- 支持 TypeScript 和 Vue SFC
- 集成 Vuetify 主题系统
我们欢迎所有形式的贡献！请遵循以下步骤：
- Fork 本项目
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 创建 Pull Request
项目使用 ESLint 和 Prettier 确保代码质量：
# 代码检查
npm run lint
# 代码格式化
npm run format本项目基于 Apache License 2.0 开源协议。