# sqlite-viewer

**Repository Path**: fgai/sqlite-viewer

## Basic Information

- **Project Name**: sqlite-viewer
- **Description**: 查看sqlite数据库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-15
- **Last Updated**: 2026-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SQLite Viewer

一个现代化的多数据库 SQLite 浏览工具，采用科技风暗色主题 UI。

## 功能特性

- **多数据库管理** — 同时注册并浏览多个 SQLite 数据库
- **表格浏览** — 分页、搜索、排序，支持最多 1000 行/页
- **SQL 查询编辑器** — 内置只读 SQL 执行器（仅 SELECT）
- **数据库信息** — 可视化展示所有表结构、字段类型与行数统计
- **科技风 UI** — 暗色主题、渐变、毛玻璃效果、发光阴影

## 技术栈

| 层级 | 技术 |
|------|------|
| 前端 | React 19 + Vite + Tailwind CSS 3 |
| 后端 | Python 3 + FastAPI + aiosqlite |
| 图标 | lucide-react |
| HTTP | axios |

## 目录结构

```
sqlite-viewer/
├── backend/               # FastAPI 后端
│   ├── main.py            # 应用入口
│   ├── run.py             # 开发服务器启动脚本
│   ├── requirements.txt
│   └── app/
│       ├── api/v1/        # 路由（databases / tables / query）
│       ├── core/          # 配置
│       ├── models/        # Pydantic schemas
│       └── services/      # 业务逻辑
├── frontend/              # React 前端
│   ├── src/
│   │   ├── api/           # axios API 封装
│   │   ├── components/    # React 组件
│   │   │   ├── Sidebar.jsx
│   │   │   ├── SchemaPanel.jsx
│   │   │   ├── TableViewer.jsx
│   │   │   ├── QueryEditor.jsx
│   │   │   └── InfoPanel.jsx
│   │   ├── App.jsx
│   │   └── index.css
│   └── vite.config.js
├── README.md
└── API.md
```

## 快速开始

### 1. 后端

```bash
cd backend
pip install -r requirements.txt
python run.py
# 访问 http://localhost:8000/docs 查看 Swagger UI
```

### 2. 前端

```bash
cd frontend
npm install
npm run dev
# 访问 http://localhost:5173
```

### 生产构建

```bash
cd frontend && npm run build
```

Vite 代理已配置：前端 `/api/*` 请求自动转发到 `http://localhost:8000`，无需跨域配置。

## 使用指南

1. **添加数据库** — 点击侧边栏的 **Add** 按钮，填写数据库名称和文件路径（服务器上的绝对路径），点击确认。
2. **选择数据库** — 点击侧边栏中的数据库卡片，右侧自动加载其表列表。
3. **浏览表数据** — 点击表名，中央区域展示分页数据，支持搜索和排序。
4. **执行 SQL** — 切换到 **SQL Query** 标签页，输入 SELECT 语句，按 `Ctrl+Enter` 运行。
5. **查看结构** — 切换到 **Info** 标签页查看完整数据库结构。
6. **删除数据库** — 鼠标悬停在侧边栏数据库卡片上，点击 🗑️ 图标移除（不会删除实际文件）。

## 安全说明

- 后端仅允许执行 SELECT 语句，已通过正则拦截所有 DML/DDL 操作
- 表名和列名通过参数化查询或标识符转义防止 SQL 注入
- 数据库注册表（`db_registry.json`）仅存储路径，不存储任何数据库内容