# Stone-Db

**Repository Path**: lipengwei8521/stone-db

## Basic Information

- **Project Name**: Stone-Db
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-25
- **Last Updated**: 2026-02-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# StoneDB - 数据库管理工具 v1.0

StoneDB 是一个功能强大的数据库管理工具，支持 PostgreSQL 和 MySQL 双数据库，提供可视化的数据源管理、表结构查看、SQL 查询执行等功能。

## ✨ 功能特性

- 🔌 **双数据库支持**：同时支持 PostgreSQL 和 MySQL
- 📊 **数据源管理**：支持添加、编辑、删除多个数据源，可设置默认数据源
- 📋 **表结构查看**：可视化展示表结构，包括字段名、数据类型、是否可空、主键等
- 💻 **SQL 查询**：内置 SQL 编辑器，支持语法高亮，执行查询并展示结果
- 📝 **建表语句**：右键查看表的建表语句和表注释
- 🎨 **现代 UI**：基于 shadcn/ui 的现代化界面设计
- 💾 **数据持久化**：数据源配置保存在浏览器 localStorage 中
- 🎯 **固定布局**：优化布局，避免页面整体滚动，提升使用体验
- 📱 **响应式设计**：适配不同屏幕尺寸

## 🛠 技术栈

- **前端框架**：Next.js 16 (App Router)
- **UI 组件库**：shadcn/ui
- **样式方案**：Tailwind CSS 4
- **数据库**：
  - PostgreSQL (默认)
  - MySQL (支持)
- **数据库 ORM**：
  - Drizzle ORM (PostgreSQL)
  - mysql2 (MySQL)
- **类型安全**：TypeScript 5
- **包管理器**：pnpm

## 📦 环境要求

- Node.js >= 24
- pnpm (必需)
- PostgreSQL 数据库 (可选，用于默认连接)
- MySQL 数据库 (可选)

## 🚀 快速开始

### 1. 安装依赖

```bash
pnpm install
```

### 2. 配置数据库

#### 方式一：使用默认 PostgreSQL 连接

项目已配置默认的 PostgreSQL 连接，无需额外配置。

#### 方式二：使用自定义数据库连接

启动应用后，在界面中添加数据源：

1. 点击右上角"添加数据源"按钮
2. 填写数据源信息：
   - **名称**：自定义数据源名称（如：生产数据库）
   - **数据库类型**：选择 PostgreSQL 或 MySQL
   - **连接字符串**：
     - PostgreSQL 格式：`postgresql://user:password@host:5432/database`
     - MySQL 格式：`mysql://user:password@host:3306/database`
   - **描述**（可选）：数据源的描述信息
   - **设为默认数据源**（可选）：是否设为默认数据源
3. 点击"添加"按钮

### 3. 启动开发服务器

```bash
# 本地环境使用 Next.js 标准命令
pnpm run dev
```

启动后，在浏览器中打开 [http://localhost:5000](http://localhost:5000) 查看应用。

开发服务器支持热更新，修改代码后页面会自动刷新。

### 4. 构建生产版本

```bash
# 本地环境使用 Next.js 标准命令
pnpm run build
```

### 5. 启动生产服务器

```bash
# 本地环境使用 Next.js 标准命令
pnpm run start
```

> **注意**：`coze dev`、`coze build`、`coze start` 是 Coze 沙箱环境特有的命令。如果你在 Coze 平台的沙箱环境中开发，可以使用这些命令。在本地环境中，请使用上面的 `pnpm run` 命令。

## 📂 项目结构

```
src/
├── app/                          # Next.js App Router 目录
│   ├── database-manager.tsx     # 主页面 - 数据库管理器
│   ├── api/
│   │   └── database/
│   │       ├── tables/          # 表列表 API
│   │       └── structure/       # 表结构 API
│   ├── layout.tsx               # 根布局组件
│   ├── page.tsx                 # 首页
│   └── globals.css              # 全局样式
├── components/                   # React 组件目录
│   ├── ui/                      # shadcn/ui 基础组件
│   ├── sql-highlighter.tsx      # SQL 语法高亮组件
│   └── poem-splash.tsx          # 古诗词首屏组件
└── lib/                         # 工具函数库
    ├── mysql-manager.ts         # MySQL 管理器
    └── utils.ts                 # 工具函数
```

## 💡 使用指南

### 数据源管理

1. **添加数据源**：点击右上角"添加数据源"按钮
2. **编辑数据源**：点击数据源卡片上的编辑图标
3. **删除数据源**：点击数据源卡片上的删除图标
4. **切换数据源**：点击数据源卡片进入数据表列表
5. **导出数据源**：点击"导出"按钮将所有数据源配置导出为 JSON 文件
6. **导入数据源**：点击"导入"按钮从 JSON 文件导入数据源配置

### 数据表操作

1. **查看表列表**：点击数据源进入表列表
2. **查看表结构**：点击表名查看表结构详情
3. **执行 SQL 查询**：
   - 在右侧 SQL 编辑器中输入 SQL 语句
   - 点击"执行查询"按钮
   - 查询结果将显示在下方的表格中
4. **查看建表语句**：右键点击表名，选择"查看建表语句"

### 数据库支持

#### PostgreSQL

- 支持查看表名和表注释
- 支持查看表结构（字段名、数据类型、是否可空、主键等）
- 支持执行 SQL 查询

#### MySQL

- 支持查看表名和表注释
- 支持查看表结构（字段名、数据类型、是否可空、主键等）
- 支持执行 SQL 查询
- 支持查看建表语句

## 🔧 开发规范

### 依赖管理

**必须使用 pnpm 管理依赖**

```bash
# ✅ 安装依赖
pnpm install

# ✅ 添加新依赖
pnpm add package-name

# ✅ 添加开发依赖
pnpm add -D package-name

# ❌ 禁止使用 npm 或 yarn
# npm install  # 错误！
# yarn add     # 错误！
```

### 组件开发

**优先使用 shadcn/ui 基础组件**

```tsx
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
```

## ⚙️ 配置说明

### 端口配置

默认端口为 5000，可以在启动命令中指定其他端口：

```bash
# 开发模式使用自定义端口
pnpm run dev -- --port 3000

# 生产模式使用自定义端口
pnpm run start -- --port 3000
```

### 环境变量

项目支持通过环境变量配置数据库连接：

1. 创建 `.env.local` 文件（在项目根目录）：
```env
DATABASE_URL="postgresql://user:password@host:5432/database"
```

2. 在代码中使用：
```ts
const dbUrl = process.env.DATABASE_URL;
```

> **注意**：`.env.local` 文件已添加到 `.gitignore`，不会提交到代码仓库。

- 开发环境：默认使用 5000 端口
- 生产环境：默认使用 5000 端口

## 🔍 常见问题

### 1. 无法连接到数据库

**问题**：添加数据源后提示连接失败

**解决方案**：
- 检查连接字符串格式是否正确
- 确认数据库服务是否正在运行
- 检查数据库用户名、密码是否正确
- 确认数据库是否允许远程连接
- 检查防火墙设置

### 2. 表列表为空

**问题**：添加数据源后表列表显示"暂无数据表"

**解决方案**：
- 确认数据库中是否有表
- 检查数据库用户是否有查询表的权限
- 某些数据库配置可能需要指定 schema（PostgreSQL 默认为 public）

### 3. SQL 查询失败

**问题**：执行 SQL 查询时报错

**解决方案**：
- 检查 SQL 语法是否正确
- 确认表名和字段名是否正确
- 注意不同数据库的 SQL 语法差异（如 PostgreSQL 使用 `LIMIT`，MySQL 也支持 `LIMIT`）
- 查看错误提示信息

### 4. 页面样式异常

**问题**：页面显示不正常或样式错乱

**解决方案**：
- 清除浏览器缓存
- 确认是否使用现代浏览器（推荐 Chrome、Edge、Firefox）
- 检查是否有浏览器插件干扰

## 📝 版本历史

### v1.0.0 (2025-01-XX)

- ✅ 支持 PostgreSQL 数据库
- ✅ 支持 MySQL 数据库
- ✅ 数据源管理（添加、编辑、删除）
- ✅ 表列表和表结构查看
- ✅ SQL 查询执行
- ✅ 建表语句查看
- ✅ 表注释显示
- ✅ 固定布局和滚动条优化
- ✅ 数据源导入导出
- ✅ 响应式设计

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

MIT License

## 📞 联系方式

如有问题或建议，请通过 GitHub Issues 联系我们。