# MYSQL数据可视化

**Repository Path**: beifengc/mysql-data-visualization

## Basic Information

- **Project Name**: MYSQL数据可视化
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-27
- **Last Updated**: 2026-05-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MySQL Data Visualization

一款基于 Electron + Vue 3 的 MySQL 数据可视化桌面工具，提供直观的数据库管理、SQL 查询、性能监控和数据导入导出功能。

## 功能特性

- **连接管理** - 支持多数据库连接配置，一键测试与连接
- **数据库浏览** - 可视化浏览数据库、表结构、索引信息
- **数据 CRUD** - 表数据的增删改查操作，支持分页浏览
- **SQL 查询** - SQL 编辑器，支持多语句执行、危险操作确认
- **性能监控** - 实时 QPS、慢查询、连接数监控，自动刷新
- **导入导出** - 支持 SQL/CSV 格式的数据导入导出
- **操作日志** - 完整的操作审计日志记录
- **暗色模式** - 支持亮色/暗色主题切换，跟随系统偏好
- **响应式设计** - 适配桌面端与平板设备

## 技术栈

### 前端
| 技术 | 版本 | 用途 |
|------|------|------|
| Vue 3 | 3.x | 前端框架（Composition API） |
| Vite | 6.x | 构建工具 |
| Vue Router | 4.x | 路由管理 |
| Pinia | 2.x | 状态管理 |
| Axios | 1.x | HTTP 请求 |

### 后端
| 技术 | 版本 | 用途 |
|------|------|------|
| Express | 4.x | API 服务 |
| mysql2 | 3.x | MySQL 驱动 |
| cors | 2.x | 跨域支持 |

### 桌面端
| 技术 | 版本 | 用途 |
|------|------|------|
| Electron | 28.x | 桌面应用框架 |

## 项目结构

```
MySQLvs-Desktop/
├── main.js                    # Electron 主进程
├── preload.js                 # 预加载脚本
├── client/                    # 前端项目
│   ├── src/
│   │   ├── api/index.js       # API 请求封装
│   │   ├── composables/       # 组合式函数
│   │   │   ├── useConnection.js
│   │   │   └── useToast.js
│   │   ├── router/index.js    # 路由配置
│   │   ├── stores/            # Pinia 状态管理
│   │   │   └── connection.js
│   │   ├── views/             # 页面组件
│   │   │   ├── ConnectView.vue
│   │   │   ├── DatabaseView.vue
│   │   │   ├── QueryView.vue
│   │   │   ├── MonitorView.vue
│   │   │   ├── ImportExportView.vue
│   │   │   └── LogsView.vue
│   │   ├── App.vue            # 根组件
│   │   ├── main.js            # 入口文件
│   │   └── style.css          # 全局设计系统
│   ├── index.html
│   ├── vite.config.js
│   └── package.json
├── server/                    # 后端服务
│   ├── index.js               # 服务入口
│   ├── config.js              # 配置文件
│   ├── db.js                  # 数据库连接池
│   ├── routes/                # API 路由
│   │   ├── connection.js
│   │   ├── database.js
│   │   ├── query.js
│   │   ├── crud.js
│   │   ├── importExport.js
│   │   ├── monitor.js
│   │   └── logs.js
│   └── middleware/
│       └── logger.js
└── package.json
```

## 快速开始

### 环境要求

- Node.js >= 16
- MySQL >= 5.7
- npm >= 8

### 安装依赖

```bash
# 安装后端依赖
npm install

# 安装前端依赖
cd client
npm install
```

### 开发模式

```bash
# 启动后端服务（端口 8400）
npm start

# 启动前端开发服务器（端口 5173）
cd client
npm run dev
```

浏览器访问 http://localhost:5173

### 桌面应用模式

```bash
# 构建前端
cd client
npm run build

# 启动 Electron
cd ..
npm run electron
```

### 生产构建

```bash
# 构建前端
cd client
npm run build

# 打包 Electron 应用
cd ..
npm run build
```

## 设计规范

本项目采用 BEIFENGC 设计风格：

### 色彩体系

| 角色 | 色值 | 用途 |
|------|------|------|
| 主色 Teal-600 | `#0d9488` | 按钮、链接、图标强调 |
| 主色亮 Teal-400 | `#2dd4bf` | 暗色模式、hover 状态 |
| 成功绿 | `#059669` | 成功状态、在线标识 |
| 警告橙 | `#d97706` | 警告状态 |
| 错误红 | `#dc2626` | 错误状态、删除操作 |

### 动画系统

- **缓动曲线**：ease-default / ease-out / ease-spring
- **入场动画**：fadeInUp (350ms) / scaleIn (250ms)
- **交互微动画**：按钮 hover 上移、卡片阴影增强、输入框 focus 发光环
- **装饰动画**：状态指示器脉冲呼吸、列表交错入场

### 视觉特征

- 毛玻璃侧边栏（backdrop-filter: blur(20px)）
- 多层阴影系统（xs/sm/md/lg/xl）
- 圆角卡片（6px/10px/16px/24px）
- 细边框 + 柔和过渡

## API 接口

| 方法 | 路径 | 说明 |
|------|------|------|
| POST | /api/connect | 连接数据库 |
| POST | /api/test | 测试连接 |
| POST | /api/disconnect | 断开连接 |
| GET | /api/server-info | 获取服务器信息 |
| GET | /api/databases | 获取数据库列表 |
| GET | /api/tables/:db | 获取表列表 |
| GET | /api/table-info/:db/:table | 获取表结构 |
| GET | /api/table-data/:db/:table | 获取表数据 |
| POST | /api/data/:db/:table | 新增记录 |
| PUT | /api/data/:db/:table | 更新记录 |
| DELETE | /api/data/:db/:table | 删除记录 |
| POST | /api/query | 执行 SQL |
| POST | /api/export | 导出数据 |
| POST | /api/import | 导入数据 |
| GET | /api/monitor/status | 监控状态 |
| GET | /api/monitor/processlist | 进程列表 |
| GET | /api/monitor/variables | 服务器变量 |
| GET | /api/logs | 操作日志 |
| DELETE | /api/logs | 清除日志 |

## 配置说明

编辑 `server/config.js` 修改服务端口：

```javascript
module.exports = {
  server: {
    port: 8400
  }
}
```

## 开源协议

MIT License