# itool
**Repository Path**: StevenRogers/itool
## Basic Information
- **Project Name**: itool
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-18
- **Last Updated**: 2025-12-18
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 🛠️ 开发者工具箱
一个功能强大、界面美观的前端开发工具集合，提供多种实用的开发辅助工具。
[在线演示](#) | [功能特性](#功能特性) | [快速开始](#快速开始)
---
## ✨ 功能特性
### 📝 Markdown 预览工具
- 实时预览 Markdown 文本
- 左右分屏编辑与预览
- 支持代码高亮、表格、引用等全部 Markdown 语法
- 优雅的排版设计
### 🔄 文本对比工具
- **统一视图**：传统的差异标记显示
- **分屏视图**：类似 Beyond Compare 的并排对比
- **双层差异标注**：
- 行级别：整行的增删改用背景色标识
- 字符级别：行内具体差异字符用深色高亮
- 智能行配对算法，精确显示文本变化
### 📋 JSON 查看器
- JSON 格式化和压缩
- **两种视图模式**：
- 格式化视图：代码高亮显示
- 树形视图：结构化展示
- 语法高亮和错误检测
- 一键复制功能
### ✅ 待办事项管理
- 添加、删除、标记完成任务
- 三级优先级设置（高/中/低）
- 多种过滤模式（全部/进行中/已完成）
- localStorage 本地持久化存储
- 实时统计信息显示
### 🔢 科学计算器
- 基本四则运算（加减乘除）
- 高级运算（平方、平方根、取模、百分比）
- 计算历史记录
- 现代深色主题设计
- 支持连续计算
### 🔗 URL 编解码工具
- **四种编码方式**：
- `encodeURIComponent` / `decodeURIComponent`
- `encodeURI` / `decodeURI`
- 适用于 URL 参数和完整 URL 的编解码
- 实时字符计数
- 详细的使用说明和示例
### 🔤 Unicode 转换工具
- **六种编码格式支持**：
- `\uXXXX` - JavaScript 标准格式
- `\UXXXXXXXX` - 8位扩展格式
- `%uXXXX` - URL Unicode 格式
- `&#xXXXX;` - HTML 十六进制实体
- `&#XXXXX;` - HTML 十进制实体
- `U+XXXX` - Unicode 标准码点格式
- 智能编码选项（全部字符/仅中文）
- 自动识别并解码所有格式
- 支持中文与 Unicode 互转
---
## 🎨 界面特点
- 🌈 **统一的渐变色主题**：紫色渐变，现代化设计
- 📱 **响应式布局**：完美适配桌面端和移动端
- ⚡ **流畅的动画效果**：悬停、点击都有精心设计的过渡动画
- 🎯 **直观的操作界面**：简洁明了，上手即用
- 🔍 **详细的帮助文档**：每个工具都有使用说明和示例
---
## 🚀 快速开始
### 前置要求
- Node.js >= 16.0.0
- npm 或 yarn 或 pnpm
### 安装步骤
1. **克隆项目**
```bash
git clone
cd itool
```
2. **安装依赖**
```bash
npm install
```
3. **启动开发服务器**
```bash
npm run dev
```
4. **访问应用**
```
打开浏览器访问: http://localhost:5173
```
### 构建生产版本
```bash
npm run build
```
构建产物将生成在 `dist` 目录中。
### 预览生产构建
```bash
npm run preview
```
---
## 📦 技术栈
- **框架**: React 18.3.1
- **构建工具**: Vite 7.3.0
- **路由**: React Router DOM 7.1.1
- **Markdown**: Marked 15.0.7
- **文本对比**: diff 7.0.0
- **UI/UX**: 纯 CSS，无额外 UI 框架
---
## 📁 项目结构
```
itool/
├── public/ # 静态资源
├── src/
│ ├── components/ # 组件目录
│ │ ├── Calculator.jsx # 计算器
│ │ ├── JsonViewer.jsx # JSON 查看器
│ │ ├── MarkdownPreview.jsx # Markdown 预览
│ │ ├── TextDiff.jsx # 文本对比
│ │ ├── TodoList.jsx # 待办事项
│ │ ├── UrlCodec.jsx # URL 编解码
│ │ ├── UnicodeCodec.jsx # Unicode 转换
│ │ └── *.css # 对应的样式文件
│ ├── App.jsx # 主应用组件
│ ├── App.css # 主应用样式
│ ├── main.jsx # 应用入口
│ └── index.css # 全局样式
├── package.json # 项目配置
├── vite.config.js # Vite 配置
└── README.md # 项目文档
```
---
## 🔧 开发指南
### 添加新工具
1. 在 `src/components/` 目录下创建新组件：
```jsx
// src/components/NewTool.jsx
import { useState } from 'react';
import './NewTool.css';
function NewTool() {
// 组件逻辑
return New Tool
;
}
export default NewTool;
```
2. 在 `src/App.jsx` 中注册路由：
```jsx
import NewTool from './components/NewTool';
const tools = [
// ...existing tools
{ path: '/new-tool', name: '新工具', component: NewTool, icon: '🆕' },
];
```
### 代码规范
- 使用 ESLint 进行代码检查
- 组件文件使用 `.jsx` 扩展名
- 样式文件与组件同名，使用 `.css` 扩展名
- 遵循 React Hooks 最佳实践
---
## 🤝 贡献指南
欢迎贡献代码、报告问题或提出建议！
1. Fork 本项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request
---
## 📄 开源协议
本项目采用 [MIT](LICENSE) 协议开源。
---
## 🙏 致谢
- [React](https://react.dev/) - 用户界面库
- [Vite](https://vitejs.dev/) - 下一代前端构建工具
- [Marked](https://marked.js.org/) - Markdown 解析器
- [diff](https://github.com/kpdecker/jsdiff) - 文本差异比较库
---
## 📧 联系方式
如有问题或建议，欢迎通过以下方式联系：
- 提交 [Issue](../../issues)
- 发起 [Discussion](../../discussions)
---
**⭐ 如果这个项目对你有帮助，请给个 Star 支持一下！⭐**
Made with ❤️ by Developer