# quickApi

**Repository Path**: qdd888/quick-api

## Basic Information

- **Project Name**: quickApi
- **Description**: http调试工具，桌面级应用
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-06-24
- **Last Updated**: 2026-05-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# QuickAPI

> 轻量级本地 HTTP 接口调试工具 —— 开发者/测试工程师的得力助手

[![Tauri](https://img.shields.io/badge/Tauri-2.x-blue)](https://tauri.app/)
[![Vue](https://img.shields.io/badge/Vue-3.x-green)](https://vuejs.org/)
[![Rust](https://img.shields.io/badge/Rust-1.75+-orange)](https://www.rust-lang.org/)
[![License](https://img.shields.io/badge/License-MIT-yellow)](LICENSE)

## ✨ 特性

- **🪶 极致轻量** — 单可执行文件，免安装，即开即用，体积仅 4-5 MB
- **🔒 数据本地** — 全部数据落本地 SQLite，无云端依赖，隐私安全
- **🎨 三色主题** — 晨曦 / 星夜 / 深海，一键切换，护眼不累
- **🌐 环境管理** — 测试 / 验证 / 正式环境一键切换，支持正式环境二次确认
- **📜 历史记录** — 每次请求自动记录，支持搜索回放，随时追溯
- **📁 集合管理** — 树形组织接口，文件夹分类，搜索支持名称 + 地址模糊匹配
- **💾 便捷导出** — 响应内容一键保存为文件，JSON 格式化 / 压缩一键操作

## 📸 界面预览

### 主界面

![主界面](docs/screenshots/main-interface.png)

左侧集合树 + 请求面板 + 响应面板的经典三栏布局。

### 环境管理

![环境管理](docs/screenshots/env-manager.png)

多环境配置、正式环境标记与切换确认提示。

### 历史记录

![历史记录](docs/screenshots/history-drawer.png)

侧边抽屉式历史列表，点击即可回放请求。

---

## 🎨 主题系统

QuickAPI 内置三套精心设计的主题：

### 晨曦 Dawn — 清爽白底，适合白天办公

![晨曦主题](docs/screenshots/dawn-theme.png)

近白背景、清爽明亮，长时间使用不刺眼。

### 星夜 Stellar — 深灰底色，GitHub Dark 风格

![星夜主题](docs/screenshots/stellar-theme.png)

深灰底色、低调沉稳，适合夜间编码。

### 幽蓝 Abyss — 蓝黑底色，科技发光效果

![幽蓝主题](docs/screenshots/abyss-theme.png)

蓝黑底色、青蓝点缀，酷炫专业感。

## 🛠 技术栈

| 层 | 技术 |
|----|------|
| **前端框架** | Vue 3 + TypeScript |
| **构建工具** | Vite |
| **状态管理** | Pinia |
| **样式方案** | Tailwind CSS + CSS 变量主题系统 |
| **桌面框架** | Tauri 2.x (Rust) |
| **数据存储** | SQLite (rusqlite) |
| **HTTP 客户端** | reqwest（绕过 CORS） |
| **UI 组件库** | Naive UI |

## 🚀 快速开始

### 安装运行（开发模式）

```bash
# 克隆项目
git clone https://gitee.com/qdd888/quick-api.git
cd quick-api/quickapi

# 安装前端依赖
npm install

# 启动开发模式
npm run tauri dev
```

### 打包发布

```bash
# 构建 release 版本并打包安装程序
npm run tauri build

# 输出目录：src-tauri/target/release/bundle/
#   - NSIS: QuickAPI_x.x.x_x64-setup.exe (~4 MB)
#   - MSI:  QuickAPI_x.x.x_x64_en-US.msi (~6 MB)
```

## 🎯 功能说明

### 接口请求
- 支持 GET / POST / PUT / DELETE / PATCH / HEAD / OPTIONS 方法
- Params、Headers、Body、Auth 四大参数面板
- Body 支持 raw JSON 格式，自动语法高亮
- 清空参数只清除键值对，保留 URL 和方法选择

### 环境变量
- 多环境配置（测试、验证、正式等）
- 支持自定义环境名称和颜色标识
- 正式环境标记与切换确认提示
- 变量引用语法：`{{变量名}}` 在 URL / Headers / Body 中自动替换

### 响应查看
- Raw / Preview 多视图切换
- JSON 自动语法高亮（关键字着色）
- 一键格式化 / 压缩 JSON
- 复制响应 / 导出为文本文件
- 显示响应时间、状态码等信息

### 集合树
- 文件夹层级组织接口
- 搜索支持接口名称 + URL 地址模糊匹配
- 右键新建 / 删除 / 重命名
- Tooltip 显示方法类型、描述信息

### 历史记录
- 侧边抽屉式历史列表
- 记录方法、URL、状态码、耗时
- 点击即可回放请求
- 支持清空历史

## 🎨 主题系统

QuickAPI 内置三套精心设计的主题：

| 主题 | 代号 | 风格定位 | 适用场景 |
|------|------|----------|----------|
| **晨曦** | `dawn` | 近白背景、清爽明亮 | 白天办公 |
| **星夜** | `stellar` | 深灰底色、GitHub 风格 | 夜间编码 |
| **幽蓝** | `abyss` | 蓝黑底色、科技发光 | 展示演示 |

主题设置自动持久化到 localStorage，刷新后保持上次选择。

## 📂 项目结构

```
quickapi/
├── src/                        # 前端源码
│   ├── components/
│   │   ├── layout/             # 布局组件（AppHeader, Sidebar, ThemeSwitcher, TitleBar）
│   │   ├── request/            # 请求面板（RequestPanel, KvEditor）
│   │   ├── response/           # 响应面板（ResponsePanel）
│   │   ├── SaveDialog.vue      # 保存接口对话框
│   │   ├── ConfirmDialog.vue   # 确认对话框
│   │   ├── InputDialog.vue     # 输入对话框
│   │   ├── FolderPicker.vue    # 文件夹选择器
│   │   ├── EnvironmentManager.vue # 环境变量管理
│   │   └── HistoryDrawer.vue   # 历史记录抽屉
│   ├── stores/                 # Pinia 状态管理
│   │   ├── request.ts          # 请求状态
│   │   ├── environment.ts      # 环境变量
│   │   ├── collection.ts       # 集合管理
│   │   ├── history.ts          # 历史记录
│   │   └── theme.ts            # 主题切换
│   ├── styles/main.css         # 全局样式 + 三色主题 CSS 变量
│   └── App.vue                 # 主应用入口
├── src-tauri/                  # Rust 后端
│   ├── src/
│   │   ├── lib.rs              # Tauri 入口
│   │   ├── commands/           # Tauri 命令
│   │   │   ├── mod.rs
│   │   │   ├── http.rs         # HTTP 请求命令
│   │   │   ├── collection.rs   # 集合 CRUD
│   │   │   ├── history.rs      # 历史记录 CRUD
│   │   │   ├── environment.rs  # 环境 CRUD
│   │   │   └── file.rs         # 文件保存
│   │   ├── db/
│   │   │   ├── mod.rs          # 数据库模块
│   │   │   ├── init.rs         # 建表 + 迁移
│   │   │   ├── models.rs       # 数据模型
│   │   │   └── repository.rs   # 数据访问层
│   │   └── config.rs           # 应用配置
│   ├── capabilities/default.json    # 权限声明
│   ├── Cargo.toml              # Rust 依赖
│   └── tauri.conf.json         # Tauri 配置
├── tailwind.config.js          # Tailwind 配置
├── package.json                # Node.js 依赖
└── vite.config.ts              # Vite 配置
```

## 🔄 Roadmap

- [x] v1.0 MVP — 请求构建、环境管理、历史记录、三色主题
- [x] v1.1 — 集合搜索增强、响应格式化/压缩/保存、Tooltip 适配
- [ ] v1.2 — 批量执行、前后置脚本、Cookie 管理、WebSocket
- [ ] v2.0 — 集合共享、OpenAPI 导入、Mock 服务

## 📄 License

MIT License © 2026 qdd888