# navipet

**Repository Path**: PanvanCode/navipet

## Basic Information

- **Project Name**: navipet
- **Description**: 和navicat相同使用习惯的web端可用的数据库管理工具，目前支持mysql
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-04
- **Last Updated**: 2026-08-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# NaviPet — Web 数据库管理工具

基于浏览器的 MySQL 数据库管理工具，深色主题 IDE 风格界面，适用于无法安装客户端软件的环境。

## 技术栈

| 层 | 技术 |
|---|------|
| 前端框架 | Vue 3 + Composition API + TypeScript |
| 构建工具 | Vite 5 |
| UI 组件 | Element Plus (暗色模式) |
| 代码编辑器 | Monaco Editor (SQL 语法高亮) |
| 状态管理 | Pinia |
| 代理层 | Express + mysql2 |
| 包管理 | pnpm (monorepo) |

## 项目结构

```
navipet/
├── client/                     # Vue3 前端
│   └── src/
│       ├── views/              # 页面视图
│       │   ├── HomeView.vue    # 主布局 (IDE 三栏)
│       │   └── ConnectionView.vue
│       ├── components/
│       │   ├── layout/         # 布局组件
│       │   │   ├── Sidebar.vue     # 左侧连接/数据库树
│       │   │   ├── TopToolbar.vue  # 顶部图标工具栏
│       │   │   ├── TabBar.vue      # 查询标签页
│       │   │   └── StatusBar.vue   # 底部状态栏
│       │   ├── center/         # 中心数据区
│       │   │   ├── DataGrid.vue      # 数据表格 (编辑/选择)
│       │   │   ├── TableToolbar.vue  # 表格操作工具栏
│       │   │   └── ContextMenu.vue   # 右键菜单 (复制/删除)
│       │   ├── editor/         # SQL 编辑器
│       │   │   └── SqlEditor.vue
│       │   ├── result/         # 查询结果
│       │   │   ├── ResultPanel.vue
│       │   │   ├── ResultTable.vue
│       │   │   ├── ResultMessage.vue
│       │   │   └── TableStructure.vue
│       │   ├── right/          # 右侧属性面板
│       │   │   └── RightPanel.vue
│       │   └── connection/     # 连接管理
│       │       └── ConnectionForm.vue
│       ├── stores/             # Pinia 状态管理
│       │   ├── connection.ts
│       │   └── editor.ts
│       ├── api/                # API 封装
│       └── types/              # 类型定义
├── proxy/                      # 数据库代理层
│   └── src/
│       ├── index.ts            # 入口 (端口 3001)
│       ├── server.ts           # Express 服务器
│       ├── routes/             # API 路由
│       │   ├── connection.ts   # 连接管理
│       │   ├── database.ts     # 数据库操作
│       │   ├── table.ts        # 表操作
│       │   └── query.ts        # SQL 执行
│       ├── services/
│       │   ├── mysql.ts        # MySQL 连接池 + 查询
│       │   └── connection-store.ts  # 连接信息持久化
│       └── types.ts
└── package.json                # monorepo 根配置
```

## 快速开始

### 环境要求

- Node.js >= 18
- pnpm >= 8
- MySQL 5.7+ / 8.0+

### 安装

```bash
git clone https://gitee.com/PanvanCode/navipet.git
cd navipet
pnpm install
```

### 启动

```bash
# 同时启动代理 + 前端开发服务器
pnpm dev
```

- 前端: http://localhost:5173
- 代理: http://localhost:3001

### 使用

1. 左侧可看到空白的连接树
2. 点击顶部「连接」按钮或侧边栏搜索框旁的 `+` 新建连接
3. 填写 MySQL 连接信息 → 测试连接 → 保存并连接
4. 展开连接 → 展开数据库 → 展开「表」
5. 双击表名打开数据视图，或点击「新建查询」编写 SQL
6. `Ctrl/Cmd + Enter` 执行 SQL 查询

## 功能

### 连接管理
- 多连接保存和切换
- 连接测试
- 连接信息本地持久化存储

### 数据库浏览
- 树形结构：连接 → 数据库 → [表/视图/函数/事件/查询]
- 搜索过滤数据库/表名
- 双击表打开数据视图

### SQL 编辑器
- Monaco Editor 集成
- SQL 语法高亮 (深色主题)
- `Ctrl/Cmd + Enter` 执行查询
- 多标签页支持

### 数据表格
- 单元格双击编辑
- 行选择：点击 / Ctrl+点击 / Shift+范围选择 / 拖拽选择
- 右键菜单：
  - 复制为 INSERT / UPDATE 语句
  - 复制为制表符分割 (可粘贴到 Excel)
  - 删除行 (带确认)
- 添加/删除行、应用/放弃更改
- 分页控制 (首页/上一页/下一页/末页/跳转)

### 表结构查看
- 列信息 (名称/类型/可空/键/默认值/注释)
- 索引信息
- DDL 建表语句

### 属性面板
- 连接属性 (主机/端口/用户)
- 数据库属性
- 表属性 (列数/索引数)

## 开发

```bash
# 仅启动代理
pnpm dev:proxy

# 仅启动前端
pnpm dev:client

# 生产构建
pnpm build
```

## License

MIT