# HTML 无网工具箱

**Repository Path**: qzqqhy/html-netless-toolbox

## Basic Information

- **Project Name**: HTML 无网工具箱
- **Description**: html 各种离线工具箱
- **Primary Language**: HTML
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-01
- **Last Updated**: 2026-02-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HTML无网工具箱

一个轻量级的离线HTML工具集合，提供多种实用工具，无需联网即可使用。

## 📁 项目简介

本工具箱采用纯HTML、CSS和JavaScript开发，所有功能均在本地浏览器中运行，不依赖网络连接，适合在各种场景下使用，特别是网络条件受限的环境。

## ✨ 功能列表

### 1. 汉字翻译成英文工具 (fanyi.html)
- 支持中文文本到英文的快速翻译
- 简洁美观的用户界面，提供实时字符计数
- 支持复制翻译结果和清空输入
- 使用免费翻译API，翻译结果仅供参考

### 2. Mermaid图表工具 (mermaid.html)
- 支持多种图表类型：流程图、时序图、类图、状态图、甘特图、饼图等
- 提供直观的代码编辑器和实时预览功能
- 支持一键复制图表为图片格式
- 内置常用图表模板，快速开始创作
- 键盘快捷键支持，提高编辑效率

### 3. 表格工具 (biaoge.html)
- 提供表格创建、编辑和格式化功能
- 支持表格数据的导入导出
- 具备数据计算和统计功能
- 响应式设计，适配不同设备屏幕

### 4. 前端请求测试工具 (request-tester.html)
- 支持普通HTTP请求、MCP请求和批量请求测试
- 提供完整的请求配置：URL、方法、Query参数、Headers、Body等
- 支持多种Body格式：JSON、Form Data、x-www-form-urlencoded、Raw Text、GraphQL
- 实时显示响应结果，包括状态码、响应时间、响应大小
- 支持请求历史记录和收藏功能
- 批量请求支持并发控制和结果导出


## 🚀 快速开始

### 方法一：直接打开
1. 将本项目下载到本地
2. 直接双击 `src` 目录中的任意HTML文件在浏览器中打开即可使用
3. 无需安装任何额外软件

### 方法二：使用HTTP服务器（推荐）
1. 确保已安装Node.js
2. 在项目根目录运行以下命令安装依赖：
   ```bash
   npm install -g http-server
   ```
3. 启动HTTP服务器：
   ```bash
   npx http-server src -p 8080
   ```
4. 在浏览器中访问：`http://localhost:8080`
5. 从首页导航到各个工具页面

## 📋 使用说明

### 翻译工具
1. 在输入框中粘贴或输入要翻译的中文文本
2. 点击「翻译」按钮获取英文翻译结果
3. 使用「清空」按钮重置输入和结果

### Mermaid图表工具
1. 在左侧编辑器中输入Mermaid语法代码
2. 点击「渲染图表」按钮或使用Ctrl+Enter快捷键查看预览
3. 使用顶部的模板按钮快速加载常用图表结构
4. 点击「复制为图片」按钮将图表保存为PNG格式

### 表格工具
1. 在表格中直接编辑数据
2. 使用工具栏功能进行格式调整和数据处理
3. 通过导出功能保存表格数据

### 前端请求测试工具
1. **普通请求**：
   - 在URL输入框中输入请求地址
   - 选择请求方法（GET、POST、PUT等）
   - 配置Query参数、Headers和Body
   - 点击「发送请求」按钮查看响应结果

2. **MCP请求**：
   - 切换到「MCP请求」标签页
   - 输入MCP服务器地址并连接
   - 选择可用工具并配置参数
   - 点击「调用工具」按钮查看执行结果

3. **批量请求**：
   - 切换到「批量请求」标签页
   - 输入请求模板（JSON数组格式）
   - 配置并发数和请求间隔
   - 点击「开始批量请求」按钮执行
   - 查看批量请求结果和统计信息

4. **解决跨域问题**：
   - **问题描述**：当测试不同域名的API时，浏览器可能会阻止跨域请求
   - **解决方案**：使用项目提供的CORS代理服务器
   - **使用方法**：
     1. 在项目根目录的`python`文件夹中启动代理服务器：
        ```bash
        cd python
        uv run python cors_proxy.py
        ```
     2. 代理服务器将在 `http://localhost:8081` 运行
     3. 在前端工具中，将请求URL格式改为：
        ```
        http://localhost:8081/原始请求URL
        ```
        例如：
        ```
        # 原始URL
        http://api.example.com/users
        
        # 通过代理访问
        http://localhost:8081/http://api.example.com/users
        ```
     4. 其他请求配置保持不变
   - **代理服务器功能**：
     - 转发请求到目标API
     - 添加CORS响应头，解决跨域问题
     - 实时显示请求和响应日志
     - 支持各种HTTP方法和请求格式


## 💻 技术栈

- HTML5
- CSS3 (使用渐变和现代布局)
- JavaScript (原生JS，无需框架)
- 第三方库：
  - Mermaid.js (图表渲染)
  - html2canvas (图表导出为图片)
  - Tailwind CSS (现代化样式框架)
  - Font Awesome (图标库)
  - Highlight.js (代码语法高亮)

### Python依赖（用于CORS代理服务器）
- Python 3.8+
- requests (HTTP请求库)
- uv (Python包管理工具)

## 🎯 适用场景

- 无网络环境下的日常办公
- 编程学习和文档编写
- 快速绘制流程图和技术图表
- 数据整理和表格处理
- 外语学习和翻译辅助
- 前端开发API接口测试
- 后端服务MCP工具调用测试
- 批量API请求测试和性能分析

## 📝 注意事项

1. 翻译功能虽然标注为"无网"，但实际上使用了Google翻译API，需要网络连接才能进行翻译
2. 所有工具数据仅存储在浏览器本地，刷新页面可能会导致未保存数据丢失
3. 建议定期保存重要数据到本地文件

## 🤝 贡献指南

欢迎提交Issue和Pull Request来改进本项目。如果您有新的工具创意，也可以提出建议。

## 📄 许可证

本项目采用MIT许可证。详情请查看LICENSE文件。

## 🌟 鸣谢

感谢所有为开源社区做出贡献的开发者，以及相关第三方库的维护者。