# DevKit

**Repository Path**: kariffa/dev-kit

## Basic Information

- **Project Name**: DevKit
- **Description**: 前端工具集
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-27
- **Last Updated**: 2026-09-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# Dev-Kit 开发者工具平台

Dev-Kit 是一个功能强大的开发者工具平台，提供多种常用的开发辅助功能，并集成了 AI 智能生成能力，帮助开发者提高工作效率。

## ✨ 核心功能

### 🔧 AI 智能工具
- **正则表达式生成** - 通过自然语言描述智能生成正则表达式
- **JSON 处理** - AI 辅助生成和解释 JSON 数据结构
- **Mock 数据生成** - 自动生成模拟数据和模板

### 📝 代码片段管理
- 轻量级代码片段的创建、编辑、删除和列表查看
- 快速复制和使用常用代码片段

### 🛠 常用开发工具
- **CSS 工具** - CSS 样式生成和调试
- **设计标记工具** - 设计相关标注处理
- **Flexbox 工具** - Flex 布局可视化调试
- **图片工具** - 图片处理相关功能
- **SVG 工具** - SVG 编辑和处理
- **JSON 工具** - JSON 格式化、验证等

## 🚀 快速开始

### 环境要求
- Python 3.10+
- Node.js 16+
- OpenAI API Key（用于 AI 功能）

### 后端配置

1. 进入项目目录并安装 Python 依赖：
```bash
pip install -r requirements.txt
```

2. 配置环境变量（复制 `.env.example` 为 `.env`）：
```bash
cp .env.example .env
```

3. 编辑 `.env` 文件，设置 OpenAI API Key：
```env
OPENAI_API_KEY=your_api_key_here
```

4. 启动后端服务：
```bash
# Linux/Mac
python main.py

# Windows
start_server.bat
```

### 前端配置

1. 进入前端目录：
```bash
cd web
```

2. 安装依赖：
```bash
npm install
```

3. 启动开发服务器：
```bash
npm run dev
```

4. 访问 `http://localhost:5173` 即可使用

## 📁 项目结构

```
dev-kit/
├── main.py              # FastAPI 主应用入口
├── ai_service.py        # AI 服务模块
├── config.py            # 配置管理
├── requirements.txt     # Python 依赖
├── .env.example         # 环境变量示例
├── start_server.bat     # Windows 启动脚本
├── dev.ps1              # PowerShell 开发脚本
├── start.ps1            # PowerShell 启动脚本
└── web/                 # Vue.js 前端项目
    ├── index.html       # HTML 入口
    ├── package.json     # 前端依赖配置
    ├── vite.config.ts   # Vite 配置
    ├── tailwind.config.js # Tailwind CSS 配置
    └── src/
        ├── App.vue           # 根组件
        ├── main.ts           # 应用入口
        ├── api/              # API 通信模块
        ├── components/       # 通用组件
        ├── router/           # 路由配置
        ├── utils/            # 工具函数
        ├── views/            # 页面视图
        └── style.css         # 全局样式
```

## 🧩 主要 API 接口

### 片段管理
| 方法 | 路径 | 描述 |
|------|------|------|
| GET | `/api/snippets` | 获取片段列表 |
| POST | `/api/snippets` | 创建新片段 |
| PUT | `/api/snippets/{sid}` | 更新片段 |
| DELETE | `/api/snippets/{sid}` | 删除片段 |

### AI 功能
| 方法 | 路径 | 描述 |
|------|------|------|
| POST | `/api/ai/regex` | 生成正则表达式 |
| POST | `/api/ai/json/generate` | 生成 JSON 数据 |
| POST | `/api/ai/json/explain` | 解释 JSON 结构 |
| POST | `/api/ai/mock/template` | 生成 Mock 模板 |
| POST | `/api/ai/mock/sample` | 生成 Mock 示例数据 |

### 其他
| 方法 | 路径 | 描述 |
|------|------|------|
| GET | `/api/health` | 健康检查 |

## 🛠 技术栈

### 后端
- **FastAPI** - 现代 Python Web 框架
- **OpenAI API** - AI 智能功能支持
- **SQLite** - 轻量级数据存储

### 前端
- **Vue 3** - 渐进式 JavaScript 框架
- **TypeScript** - 类型安全的 JavaScript
- **Vite** - 下一代前端构建工具
- **Tailwind CSS** - 实用优先的 CSS 框架
- **Vue Router** - 官方路由管理器

## 📝 使用说明

1. **正则表达式工具** - 在输入框中用自然语言描述需求，系统会自动生成对应的正则表达式
2. **JSON 工具** - 输入 JSON 数据，可获得格式化和 AI 解释
3. **Mock 数据** - 描述数据结构，自动生成符合要求的模拟数据
4. **代码片段** - 保存和复用常用代码片段

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。

## 📄 许可证

本项目遵循 MIT 许可证开源。