# toolbox

**Repository Path**: wndproc12/toolbox

## Basic Information

- **Project Name**: toolbox
- **Description**: 一款基于 React 18 + TypeScript + Tailwind CSS 开发的现代化全能实用工具箱
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-02
- **Last Updated**: 2026-03-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 实用工具箱

一款基于 React 18 + TypeScript + Tailwind CSS 开发的现代化全能实用工具箱，纯前端本地运行，无需后端服务，开箱即用。

## 功能特性

### 文本处理工具
- **大小写转换**：支持大写、小写、首字母大写、驼峰命名、蛇形命名、短横线命名
- **文本统计**：实时统计字符数、词数、行数、字节数
- **文本替换**：支持普通替换和正则表达式替换
- **文本格式化**：去除空格、去除空行、去除重复行、文本倒序、行排序、字符串转义

### 编码加密工具
- **Base64**：编码/解码
- **URL 编码**：编码/解码
- **哈希加密**：MD5、SHA1、SHA256、SHA512
- **Unicode**：中文与 Unicode 编码互转

### 时间日期工具
- **时间戳转换**：时间戳与日期时间互转，支持毫秒/秒
- **日期计算**：计算日期差、日期加减
- **倒计时/秒表**：支持倒计时和秒表功能

### 开发常用工具
- **JSON 格式化**：格式化、校验、压缩、转义
- **UUID 生成**：生成 UUID v4 和随机字符串
- **进制转换**：2/8/10/16 进制互转
- **正则测试**：正则表达式匹配、替换测试

### 日常便捷工具
- **密码生成**：自定义长度和字符集，显示密码强度
- **颜色工具**：随机颜色生成，HEX/RGB/HSL 转换
- **计算器**：基础计算功能
- **单位转换**：长度、重量、温度、面积单位转换

## 技术栈

- **核心**：React 18 + TypeScript 5.x
- **样式**：Tailwind CSS 4
- **动效**：Framer Motion
- **图标**：Lucide React
- **工具库**：
  - crypto-js：加密哈希
  - dayjs：日期处理
  - marked：Markdown 处理

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

访问 http://localhost:5173

### 生产构建

```bash
npm run build
```

构建后的文件位于 `dist` 目录

### 预览生产构建

```bash
npm run preview
```

## 项目结构

```
toolbox/
├── src/
│   ├── components/
│   │   ├── layout/          # 布局组件
│   │   ├── tools/           # 工具组件
│   │   │   ├── text/        # 文本处理工具
│   │   │   ├── encode/      # 编码加密工具
│   │   │   ├── time/        # 时间日期工具
│   │   │   ├── dev/         # 开发工具
│   │   │   └── daily/       # 日常工具
│   │   └── ui/              # UI 组件
│   ├── hooks/               # 自定义 Hooks
│   ├── utils/               # 工具函数
│   ├── types/               # TypeScript 类型
│   ├── config/              # 配置文件
│   ├── App.tsx              # 主应用组件
│   └── main.tsx             # 入口文件
├── public/                  # 静态资源
├── index.html               # HTML 模板
├── package.json             # 项目配置
├── tsconfig.json            # TypeScript 配置
└── vite.config.ts           # Vite 配置
```

## 特性亮点

- **现代化 UI**：极简卡片式设计，毛玻璃效果，流畅动画
- **深色模式**：支持浅色/深色/跟随系统三种模式
- **响应式布局**：完美适配 PC、平板、手机
- **搜索功能**：快速定位工具
- **历史记录**：本地保存使用记录
- **类型安全**：完整的 TypeScript 类型定义
- **懒加载**：工具组件按需加载，优化性能

## 浏览器支持

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

## 许可证

MIT License