数据连接开发设计文档
1. 文档概述
1.1 文档目的
本文档旨在规范前端数据连接模块的开发与集成，确保开发团队能够依据此文档进行统一、高效、安全的数据连接开发。文档包含数据连接架构设计、API接口规范等核心内容。
1.2 功能背景
根据数据接口文档的需求，需要对数据接口相关功能进行前端开发，包括审批流程、动态流程节点、RPA机器人配置和动态表单等模块的数据接口调用和展示。同时，系统需要支持数据连接的管理，包括数据连接的新增、编辑、删除和测试连接等功能。
2. 数据连接架构设计
2.1 系统架构图
graph TD
A[前端应用] --> B[数据连接管理模块]
B --> C[DataConnectionModule主容器]
C --> D[数据连接列表组件]
C --> E[数据连接表单组件]
C --> F[数据连接测试组件]
C --> G[API请求层]
G --> H[数据连接API]
H --> I[后端服务]
I
I --> J[数据库连接池]
J --> K[MySQL数据库]
2.2 核心组件结构
bash
DataConnectionModule
├── DataConnectionModule.vue # 数据连接功能主容器组件
├── components/
│ ├── DataConnectionList.vue # 数据连接列表组件
│ ├── DataConnectionForm.vue # 数据连接表单组件
│ ├── DataConnectionTest.vue # 数据连接测试组件
├── hooks/
│ ├── useDataConnection.ts # 数据连接逻辑Hook
│ └── useApiRequest.ts # API请求Hook
├── types/
│ ├── dataConnection.ts # 数据连接类型定义
│ └── dataInterface.ts # 数据接口类型定义
└── index.ts # 模块入口2.3 数据流向图
graph TD
A[用户操作] --> B[DataConnectionModule]
B --> C{操作类型?}
C -->|新增| D[数据连接表单组件]
C -->|编辑| E[数据连接表单组件]
C -->|删除| F[调用删除API]
C -->|测试连接| G[数据连接测试组件]
D --> H[验证表单数据]
E --> H
H --> I{验证通过?}
I -->|是| J[调用保存API]
I -->|否| K[显示错误信息]
G --> L[调用测试连接API]
J --> M[后端处理]
L --> M
F --> M
M --> N[返回响应结果]
N --> O[更新前端状态]
O --> P[显示操作结果]
3. API接口规范说明
3.1 数据连接API
| 接口名称 | URL | 请求方法 | 请求参数 | 返回结果 | 描述 |
|---|---|---|---|---|---|
| 获取数据连接列表 | /api/data-connection/list |
GET | name: string |
{ success: boolean, data: DataConnection[], message: string } |
获取完整数据连接列表，全量查询 |
| 获取数据连接详情 | /api/data-connection/detail |
GET | id: string |
{ success: boolean, data: DataConnection, message: string } |
获取数据连接详情 |
| 新增数据连接 | /api/data-connection/add |
POST | DataConnection |
{ success: boolean, data: { id: string }, message: string } |
新增数据连接 |
| 修改数据连接 | /api/data-connection/update |
PUT | id: string, DataConnection |
{ success: boolean, message: string } |
修改数据连接 |
| 删除数据连接 | /api/data-connection/delete |
DELETE | id: string |
{ success: boolean, message: string } |
删除数据连接 |
| 测试数据连接 | /api/data-connection/test |
POST | DataConnection |
{ success: boolean, message: string } |
测试数据连接 |
| 获取数据库类型列表 | /api/data-connection/types |
GET | - | { success: boolean, data: string[], message: string } |
获取支持的数据库类型列表，当前仅返回["MySQL"] |
| 获取驱动列表 | /api/data-connection/drivers |
GET | dbType: string |
{ success: boolean, data: string[], message: string } |
获取指定数据库类型的驱动列表，当前仅支持MySQL |
4. DataConnectionModule.vue组件设计
4.1 组件功能
DataConnectionModule.vue作为数据连接功能的主容器组件，负责整合所有相关子组件，实现统一的视图管理和交互逻辑。它包含以下核心功能：
- 数据连接列表展示
- 新增数据连接
- 编辑数据连接
- 删除数据连接
- 测试数据连接
- 数据连接详情查看
4.4 DataConnectionForm.vue组件设计
4.4.1 组件功能
DataConnectionForm.vue是数据连接的核心表单组件，负责数据连接的新增和编辑功能。它提供以下核心功能：
- 数据连接表单的渲染
- 表单数据的验证（在保存和测试连接前触发）
- 表单数据的保存
- 与父组件的数据同步
4.4.3 组件交互逻辑
-
表单验证触发条件：
- 表单验证仅在特定条件下触发
- 仅在父组件调用
validateForm或validateAndSave方法时触发完整验证流程 - 验证触发场景：
- 点击头部区域的"保存"按钮时
- 点击头部区域的"测试连接"按钮时
- 输入过程中不进行实时验证，提升用户体验
-
表单数据同步：
- 表单数据与父组件通过props双向绑定
- 父组件可以实时获取表单数据
- 外部model变化时，表单数据自动更新
-
方法暴露：
validateForm：触发表单完整验证，返回布尔值表示验证结果validateAndSave：触发表单验证并保存数据，返回布尔值表示操作结果- 这两个方法仅由父组件在点击对应按钮时调用
-
表单布局：
- 纯表单布局，不包含任何操作按钮
- 所有操作按钮统一放置在父组件的头部区域
- 表单样式与现有界面风格保持一致
- 支持滚动，确保在不同屏幕尺寸下都能完整显示所有字段
4.3 组件交互逻辑
4.3.1 表单验证触发条件
| 触发场景 | 触发方式 | 验证范围 | 验证结果处理 |
|---|---|---|---|
| 保存数据连接 | 点击头部区域的"保存"按钮 | 完整表单验证 | 验证通过则保存数据，否则显示错误提示 |
| 测试数据连接 | 点击头部区域的"测试连接"按钮 | 完整表单验证 | 验证通过则打开测试对话框，否则显示错误提示 |
| 其他交互场景 | 用户输入、切换字段等 | 无（仅在表单提交时验证） | 不进行验证，提升用户体验 |
4.3.2 按钮布局调整后的界面结构
-
界面整体结构：
- 顶部：系统统一管理系统标题栏
- 左侧：导航菜单
- 右侧主内容区：
- 头部：数据连接管理标题和功能操作区（包含所有操作按钮）
- 主体：左右分栏布局
- 左侧：数据连接列表
- 右侧：数据连接表单/详情
-
头部功能操作区结构：
- 左侧：数据连接管理标题
- 右侧：功能按钮组，包含以下按钮：
- "设置超时"按钮（始终显示）
- "新增数据连接"按钮（仅在右侧面板未显示时显示）
- 右侧面板操作按钮组（仅在右侧面板显示时显示）：
- 表单模式 （新增/编辑）：
- "保存"按钮
- "测试连接"按钮
- "取消"按钮
- 查看模式 ：
- "编辑"按钮
- "取消"按钮
- 表单模式 （新增/编辑）：
-
按钮布局规则：
- 所有功能按钮统一放置于头部区域，形成功能操作区
- 按钮按照使用频率和重要性排序
- 按钮样式保持一致，符合Element Plus设计规范
- 不同模式下显示不同的按钮组合
- 按钮状态根据当前上下文动态变化（如禁用状态）
4.3.3 核心交互流程
-
新增数据连接：
- 点击头部区域的"新增数据连接"按钮，在界面右侧区域显示完整的新增数据连接表单
- 填写表单数据
- 点击头部区域的"保存"按钮：
- 触发表单完整验证
- 验证通过后，调用API保存数据连接
- 保存成功后，系统不关闭右侧表单面板，而是自动将表单从编辑模式切换为查看模式
- 保留面板显示状态并展示已保存的表单数据
- 刷新数据连接列表
- 点击头部区域的"测试连接"按钮：
- 触发表单完整验证
- 验证通过后，打开测试连接对话框
- 调用API测试数据连接，显示测试结果
- 点击头部区域的"取消"按钮：
- 关闭右侧表单面板
- 取消操作不会保存任何修改
-
编辑数据连接：
- 在数据连接列表中点击"编辑"按钮，在界面右侧区域显示完整的编辑数据连接表单
- 修改表单数据
- 点击头部区域的"保存"按钮，保存修改后的数据
- 点击头部区域的"测试连接"按钮，测试修改后的连接
- 点击头部区域的"取消"按钮，取消编辑操作
-
查看数据连接详情：
- 在数据连接列表中点击列表项，在右侧面板中显示数据连接详情
- 查看模式下，点击头部区域的"编辑"按钮，切换到编辑模式
- 点击头部区域的"取消"按钮，切换到查看模式
-
删除数据连接：
- 在数据连接列表中点击"删除"按钮，弹出确认对话框
- 确认删除后，调用API删除数据连接
- 删除成功后，刷新数据连接列表
- 如果当前右侧面板正在查看或编辑该数据连接，则自动关闭右侧面板
-
设置超时时间：
- 点击头部区域的"设置超时"按钮，打开设置数据连接超时时间的弹框
- 弹框中显示一个输入框，默认值为100毫秒，单位明确
- 用户可以输入超时时间，仅允许非负整数
- 输入为空表示不限制连接超时时间
- 点击"确定"按钮，保存超时设置并应用到所有数据连接请求中
- 点击"取消"按钮，关闭弹框，不保存任何设置
4.3.4 表单交互特点
-
无实时验证：
- 表单在输入过程中不进行实时验证
- 仅在点击"保存"或"测试连接"按钮时触发完整验证
- 提升用户体验，减少不必要的干扰
-
统一按钮布局：
- 所有操作按钮集中在头部区域，便于用户查找和操作
- 减少用户在界面中的移动距离
- 保持界面整洁，突出表单内容
-
清晰的模式区分：
- 不同模式下显示不同的按钮组合
- 明确当前操作上下文
- 避免用户误操作
-
流畅的状态切换：
- 模式切换时，按钮状态和表单内容平滑过渡
- 保存成功后自动切换到查看模式
- 提供明确的视觉反馈
12. 附录
12.1 数据连接类型定义
css
// src/types/dataConnection.ts
export interface DataConnection {
id?: string;
name: string;
dbType: string; // 仅支持 "MySQL"
driver: string;
databaseName: string;
host: string;
port: string;
url: string;
username: string;
password?: string;
status?: string;
createTime?: string;
updateTime?: string;
}14. 项目开发工时表
14.1 工时分配说明
根据数据连接模块的开发需求和任务复杂度，将总工作量40小时合理分配到UI编写、交互逻辑实现和接口联调三个主要任务中。工时分配遵循软件开发的常规流程和任务复杂度比例，确保资源分配合理高效。
14.2 详细工时表
| 任务名称 | 任务描述 | 预计耗时（小时） |
|---|---|---|
| UI编写 | 数据连接模块的界面设计与实现，包括主容器布局、表单组件、列表组件、对话框组件等UI元素的开发 | 15 |
| └ 主容器布局设计与实现 | 设计并实现数据连接模块的主容器布局结构 | 3 |
| └ 数据连接表单组件开发 | 开发数据连接的新增和编辑表单组件 | 5 |
| └ 数据连接列表组件开发 | 开发数据连接列表展示组件 | 3 |
| └ 对话框组件开发（测试连接、超时设置） | 开发测试连接和超时设置的对话框组件 | 2 |
| └ 样式优化与响应式设计 | 优化组件样式并实现响应式布局 | 2 |
| 交互逻辑实现 | 数据连接模块的交互逻辑开发，包括表单验证机制、按钮事件处理、模式切换、状态管理等核心功能实现 | 18 |
| └ 表单验证机制设计与实现 | 设计并实现表单验证逻辑，包括必填项、格式验证等 | 4 |
| └ 按钮事件处理逻辑 | 实现各种按钮的点击事件处理逻辑 | 3 |
| └ 模式切换与状态管理 | 实现编辑、查看、新增等模式的切换和状态管理 | 5 |
| └ 组件间通信机制实现 | 实现组件间的数据传递和通信机制 | 3 |
| └ 数据缓存与状态同步 | 实现数据缓存和组件状态同步机制 | 3 |
| 接口联调 | 数据连接模块与后端API的接口联调，包括数据连接的增删改查、测试连接、超时设置等接口的调试和验证 | 7 |
| └ 数据连接CRUD接口联调 | 调试数据连接的增删改查接口 | 3 |
| └ 测试连接接口联调 | 调试测试连接功能接口 | 2 |
| └ 超时设置接口联调 | 调试超时设置功能接口 | 1 |
| └ 接口异常处理与边界情况测试 | 测试接口异常处理和边界情况 | 1 |
| 总计 | - | 40 |