# pyi-devtools-web

**Repository Path**: cnpyi/pyi-devtools-web

## Basic Information

- **Project Name**: pyi-devtools-web
- **Description**: 面向开发者的、WEB界面形式的开发工具，便利更多开发者在确保工具源码安全的前提下使用工具，防止隐私数据泄露。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://devtools.pyigroup.cn
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-13
- **Last Updated**: 2026-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PYI Devtools | PYI 开发工具集合

<p align="center">
  <img src="https://img.shields.io/badge/React-18.2.0-61DAFB?logo=react" alt="React">
  <img src="https://img.shields.io/badge/TypeScript-5.2.2-3178C6?logo=typescript" alt="TypeScript">
  <img src="https://img.shields.io/badge/Tailwind_CSS-3.4.1-06B6D4?logo=tailwindcss" alt="Tailwind CSS">
  <img src="https://img.shields.io/badge/Vite-5.1.4-646CFF?logo=vite" alt="Vite">
  <img src="https://img.shields.io/badge/License-MIT-green.svg" alt="License">
</p>

<p align="center">
  <b>一站式开发者工具集合</b> | 免费开源 | 免费商用
</p>

<p align="center">
  <a href="https://devtools.pyigroup.cn" target="_blank">🚀 在线体验</a> •
  <a href="https://pyigroup.cn" target="_blank">🏢 鹏奕科技官网</a> •
  <a href="#功能特性">✨ 功能特性</a> •
  <a href="#快速开始">🚀 快速开始</a>
</p>

---

## 🎯 项目介绍

**PYI Devtools** 是由 [鹏奕科技开源团队](https://pyigroup.cn) 独立开发的一站式开发者工具集合，旨在为开发者提供便捷、高效、安全的在线工具服务。项目采用现代化技术栈开发，支持亮色/暗色主题切换，界面简洁美观，操作流畅。

项目完全自主设计和实现，致力于为中文开发者社区提供优质的工具体验。

## ✨ 功能特性

### 🔧 当前支持的工具 (26个)

| 序号 | 工具名称 | 功能描述 | 分类 |
|------|---------|---------|------|
| 1 | **JSON 格式化** | JSON 数据的格式化、压缩、验证，支持语法高亮 | 格式化 |
| 2 | **Base64 编解码** | 支持文本的 Base64 编码和解码 | 编解码 |
| 3 | **URL 编解码** | 支持 encodeURIComponent 和 encodeURI 两种模式 | 编解码 |
| 4 | **时间戳转换** | Unix 时间戳与日期时间相互转换，支持秒/毫秒级 | 转换 |
| 5 | **正则表达式测试** | 正则表达式实时测试，提供常用正则模板 | 其他 |
| 6 | **JWT 解码** | JWT Token 解码查看 Header、Payload、Signature | 编解码 |
| 7 | **哈希计算** | 支持 MD5、SHA-1、SHA-256、SHA-512 计算 | 编解码 |
| 8 | **HTML 转义** | HTML 实体字符的转义和反转义 | 编解码 |
| 9 | **UUID 生成** | 批量生成 UUID，支持多种格式 | 生成 |
| 10 | **颜色工具** | 颜色格式转换（HEX/RGB/HSL），支持滑块调节 | 转换 |
| 11 | **二维码生成** | 自定义内容、尺寸、颜色的二维码生成器 | 生成 |
| 12 | **密码生成器** | 高强度随机密码生成，支持自定义规则 | 生成 |
| 13 | **SSL 证书申请** | Let's Encrypt 证书自动申请，支持云厂商 DNS | 生成 |
| 14 | **SSL 证书检测** | 查询域名 SSL 证书有效期与详细信息 | 其他 |
| 15 | **文本差异对比** | 行级差异分析，高亮显示新增/删除/修改 | 其他 |
| 16 | **代码美化/压缩** | JSON/CSS/HTML/JS 格式化和压缩 | 格式化 |
| 17 | **IP 地址查询** | IPv4/IPv6 分析、私有地址检测、二进制转换、归属地查询 | 其他 |
| 18 | **Markdown 编辑器** | 实时预览、三模式切换、HTML 导出 | 其他 |
| 19 | **JSON/YAML 互转** | JSON 和 YAML 格式双向转换 | 转换 |
| 20 | **进制转换器** | 二进制、八进制、十进制、十六进制互转 | 转换 |
| 21 | **HTTP 请求测试** | 在线 API 接口调试，类似 Postman | 其他 |
| 22 | **Cron 表达式生成** | 可视化生成 Cron 表达式，支持反向解析 | 生成 |
| 23 | **CSS 单位转换** | px / rem / em / vw / vh 等单位互转 | 转换 |
| 24 | **文本处理工具箱** | 大小写转换、标点转换、空格处理、统计等 | 格式化 |
| 25 | **子域名扫描** | 检测域名下所有子域名，支持深度/超深度模式，SSE 实时推送 | 其他 |
| 26 | **APP 证书查询** | 解析 iOS/Android 应用证书签名信息，支持 .cer/.mobileprovision/.apk | 其他 |

### 🎨 界面特性

- 🌓 **主题切换** - 支持亮色/暗色模式，自动适应系统偏好
- 📱 **响应式设计** - 完美ngwen 适配桌面端和移动端
- ⚡ **极速加载** - 基于 Vite 构建，首屏加载快
- 🔄 **实时预览** - 工具操作结果实时显示
- 💾 **本地存储** - 记住主题偏好，刷新不丢失
- 🔗 **独立链接** - 每个工具有独立的 URL，支持分享和收藏
- 📤 **一键分享** - 点击分享按钮复制工具链接给好友
- ⭐ **快速收藏** - 一键将工具添加到浏览器收藏夹

## 🚀 在线体验

**官方演示地址**: [https://devtools.pyigroup.cn](https://devtools.pyigroup.cn)

无需安装，打开即用，建议收藏到浏览器书签！

## 📸 界面预览

<table>
  <tr>
    <td><b>亮色模式</b></td>
    <td><b>暗色模式</b></td>
  </tr>
  <tr>
    <td>简洁明亮的界面设计，适合白天使用</td>
    <td>护眼的深色主题，适合夜间开发</td>
  </tr>
</table>

## 🛠️ 技术栈

### 前端
- **框架**: [React 18](https://react.dev/) + [TypeScript](https://www.typescriptlang.org/)
- **构建工具**: [Vite 5](https://vitejs.dev/)
- **样式**: [Tailwind CSS 3](https://tailwindcss.com/)
- **状态管理**: [Jotai](https://jotai.org/)
- **图标**: [Lucide React](https://lucide.dev/)
- **二维码**: [qrcode](https://github.com/soldair/node-qrcode)
- **哈希计算**: [crypto-js](https://github.com/brix/crypto-js)
- **日期处理**: [dayjs](https://day.js.org/)
- **ZIP 解析**: [jszip](https://stuk.github.io/jszip/)（用于 APK 证书提取）
- **证书解析**: [pkijs](https://github.com/PeculiarVentures/PKI.js) + [asn1js](https://github.com/PeculiarVentures/ASN1.js)

### 后端 (需要服务端的工具)
- **框架**: [Express](https://expressjs.com/)
- **ACME客户端**: [acme-client](https://github.com/publishlab/node-acme-client)
- **证书处理**: [pkijs](https://github.com/PeculiarVentures/PKI.js) + [node-forge](https://github.com/digitalbazaar/forge)
- **DNS服务商**: 阿里云、腾讯云、火山云 SDK

## 📦 快速开始

### 环境要求

- Node.js >= 18.0.0
- npm >= 9.0.0 或 pnpm >= 8.0.0

### 安装步骤

```bash
# 克隆仓库（Gitee）
git clone https://gitee.com/cnpyi/pyi-devtools-web.git

# 进入项目目录
cd pyi-devtools-web

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

开发服务器启动后，访问 `http://localhost:5173` 即可预览。

### 构建生产版本

```bash
# 构建生产版本
npm run build

# 预览生产构建
npm run preview
```

构建产物将输出到 `dist/` 目录。

### 后端服务启动（SSL 证书、IP 查询、子域名扫描功能需要）

```bash
# 进入后端目录
cd server

# 安装依赖
npm install

# 开发模式启动
npm run dev

# 生产模式启动
npm run build
npm start
```

后端服务默认运行在 `http://localhost:3001`

**后端服务功能特性：**
- 🔐 SSL证书申请 - 支持 Let's Encrypt 生产环境证书，DNS-01 / HTTP-01 两种验证方式
- ☁️ DNS 自动验证 - 支持阿里云、腾讯云、火山云自动 DNS 验证
- 🔍 DNS 诊断工具 - 内置 DNS 记录检查，帮助排查验证问题
- 🌐 IP 归属地查询 - 国内外多源查询，确保网络稳定性
- 🕵️ 子域名扫描 - SSE 实时推送、多任务队列、普通/深度/超深度三种扫描模式

### API 地址配置

前端 API 地址会根据环境自动切换：

| 环境 | API 地址 |
|------|----------|
| 开发环境 (`npm run dev`) | `http://localhost:3001` |
| 生产环境 (`npm run build`) | `https://api.devtools.pyigroup.cn` |

**自定义 API 地址：**

复制 `.env.example` 为 `.env.local` 并修改：

```bash
# 自定义 API 地址
VITE_API_BASE_URL=http://your-api-server.com
```

或在对应环境文件中配置：
- `.env` - 开发环境配置
- `.env.production` - 生产环境配置

## 📂 项目结构

```
pyi-devtools-web/
├── src/
│   ├── components/      # 公共组件
│   │   ├── Header.tsx   # 顶部导航
│   │   ├── Sidebar.tsx  # 侧边栏
│   │   ├── Footer.tsx   # 页脚
│   │   ├── ShareButton.tsx    # 分享按钮
│   │   └── FavoriteButton.tsx # 收藏按钮
│   ├── config/          # 配置文件
│   │   └── api.ts       # API 地址配置
│   ├── tools/           # 工具页面
│   │   ├── JsonTool.tsx
│   │   ├── Base64Tool.tsx
│   │   ├── SslTool.tsx  # SSL证书申请
│   │   └── ...
│   ├── data/            # 数据配置
│   ├── types/           # TypeScript 类型
│   ├── store.ts         # 全局状态
│   ├── App.tsx          # 根组件
│   └── main.tsx         # 入口文件
├── server/              # 后端服务（SSL证书功能）
│   ├── src/
│   │   ├── index.ts     # Express 入口
│   │   ├── routes/      # API 路由
│   │   ├── services/    # 业务逻辑
│   │   └── providers/   # DNS 厂商适配器
│   └── package.json
├── public/              # 静态资源
├── .env                 # 开发环境变量
├── .env.production      # 生产环境变量
├── index.html           # HTML 模板
├── tailwind.config.cjs  # Tailwind 配置
├── vite.config.ts       # Vite 配置
└── package.json         # 项目依赖
```

## 📋 版本迭代计划

查看详细的版本规划：[版本迭代计划.md](./版本迭代计划.md)

我们的目标是打造**全网最火热的开发者工具类开源项目**，计划包括：
- 🔧 扩展至 50+ 实用工具
- 🤖 AI Copilot 智能助手集成
- 🔌 插件化架构与生态建设
- ☁️ 用户系统与云同步
- 👥 团队协作功能
- 🌍 国际化多语言支持

## 🤝 贡献指南

我们欢迎所有形式的贡献，无论是新功能、Bug 修复还是文档改进！

### 提交 PR 流程

1. Fork 本仓库（Gitee）
2. 创建特性分支 (`git checkout -b feature/amazing-feature`)
3. 提交更改 (`git commit -m 'Add amazing feature'`)
4. 推送分支 (`git push origin feature/amazing-feature`)
5. 创建 Pull Request（Gitee）

### 开发规范

- 使用 TypeScript 编写代码
- 遵循 ESLint 代码规范
- 提交前运行测试确保无错误

## 📄 开源协议

本项目采用 **[MIT License](LICENSE)** 开源协议。

✅ **允许免费商用** - 您可以自由地将本项目用于个人或商业用途  
✅ **允许修改分发** - 您可以修改代码并重新分发  
✅ **允许二次开发** - 您可以基于本项目开发自己的工具集

详细信息请查看 [LICENSE](LICENSE) 文件。

## 👥 开发团队

<table>
  <tr>
    <td align="center">
      <a href="https://pyigroup.cn">
        <img src="https://img.shields.io/badge/PYI-鹏奕科技-blue" alt="PYI">
      </a>
    </td>
  </tr>
  <tr>
    <td align="center">
      <b>鹏奕科技开源团队</b><br>
      鹏奕（北京）科技有限公司
    </td>
  </tr>
</table>

- 🌐 **官网**: [https://pyigroup.cn](https://pyigroup.cn)
- 💼 **团队**: 鹏奕科技开源团队
- 📧 **联系**: 欢迎通过 Gitee Issues 联系我们

## 🙏 致谢

感谢以下优秀的开源项目：

### 前端
- [React](https://react.dev/) - 前端框架
- [Vite](https://vitejs.dev/) - 构建工具
- [Tailwind CSS](https://tailwindcss.com/) - CSS 框架
- [Lucide](https://lucide.dev/) - 图标库
- [Jotai](https://jotai.org/) - 状态管理

### 后端 & 证书
- [Let's Encrypt](https://letsencrypt.org/) - 免费 SSL 证书颁发机构
- [acme-client](https://github.com/publishlab/node-acme-client) - ACME 协议客户端
- [PKI.js](https://github.com/PeculiarVentures/PKI.js) - JavaScript 加密库
- [node-forge](https://github.com/digitalbazaar/forge) - TLS 证书处理

### 工具库
- [jszip](https://stuk.github.io/jszip/) - APK 文件解压（用于提取签名证书）

---

<p align="center">
  Made with ❤️ by <a href="https://pyigroup.cn">PYI 鹏奕科技开源团队</a>
</p>

<p align="center">
  ⭐ Star 本仓库，支持我们持续更新！
</p>