# Vue 工具集 - Vue Tools Kit

这是一个基于 Vue 3 + TypeScript + Tailwind CSS 开发的在线工具集合，移植自 jisuxiang-master 项目。

## 特性

- 🚀 Vue 3 + Composition API + `<script setup>` 语法糖
- 📱 响应式设计，支持移动端
- 🎨 深色/浅色主题切换
- 🌐 中英文双语支持
- ⚡ Vite 构建工具，开发体验优秀
- 🎯 TypeScript 类型安全
- 💻 包含 28+ 实用开发工具

## 工具列表

### 常用工具
- JSON 格式化器 - JSON格式化、美化、压缩和验证
- HTTP 测试器 - API接口测试工具
- 时间戳转换器 - 时间戳与日期时间相互转换
- 编码转换器 - Base64、URL编码、Unicode转换
- IP 查询工具 - IP地址归属地查询

### JSON 工具
- JSON 编辑器 - 可视化JSON编辑
- JSON 转换器 - JSON与XML、CSV、YAML互转

### 编码工具
- 正则表达式测试器 - 正则表达式测试和验证
- 加密解密工具 - MD5、SHA、AES、DES等
- URL 编码器 - URL编码解码
- Unicode 转换器 - Unicode与中文互转
- JWT 解码器 - JWT令牌解析
- 进制转换器 - 二进制、八进制、十进制、十六进制转换

### 文本工具
- 字数统计器 - 字符、词数、行数统计
- 文本处理器 - 去空格、去换行等

### 代码工具
- 代码格式化器 - HTML、CSS、JS、SQL格式化
- HTML/Markdown 转换器 - HTML与Markdown互转
- YAML/Properties 转换器 - 配置文件格式转换

### 图片工具
- 图片压缩器 - 在线图片压缩
- 二维码生成器 - 文本转二维码
- Base64图片转换器 - 图片与Base64互转
- 图片水印工具 - 添加文字或图片水印
- ICO图标生成器 - 图片转ICO格式

### 前端工具
- 颜色工具 - 颜色选择器和转换
- CSS渐变生成器 - 可视化CSS渐变生成

### 时间工具
- 日期计算器 - 日期差值计算
- 时区转换器 - 不同时区时间转换
- Cron表达式生成器 - 定时任务表达式生成

## 技术栈

- **前端**: Vue 3, TypeScript, Tailwind CSS, Vite
- **图标**: FontAwesome
- **HTTP客户端**: Axios
- **后端**: Node.js, Express
- **工具库**: 
  - marked (Markdown解析)
  - turndown (HTML转Markdown)
  - crypto-js (加密解密)
  - qrcode (二维码生成)
  - fabric.js (图片处理)
  - compressor.js (图片压缩)

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

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

# 启动后端API服务器（新终端）
npm run server
```

访问 `http://localhost:8080` 查看应用

### 生产构建

```bash
# 构建前端
npm run build

# 启动生产服务器（包含前端和API）
npm run server
```

## 项目结构

```
src/
├── components/          # 通用组件
│   ├── tools/          # 工具组件
│   ├── BackToTop.vue   # 返回顶部
│   ├── ThemeToggle.vue # 主题切换
│   └── LanguageToggle.vue # 语言切换
├── composables/        # 组合式API
│   ├── useLanguage.ts  # 语言管理
│   └── useTheme.ts     # 主题管理
├── config/            # 配置文件
│   ├── tools.ts       # 工具配置
│   ├── categories.ts  # 分类配置
│   └── i18n/          # 国际化
├── router/            # 路由配置
├── types/             # TypeScript类型
├── utils/             # 工具函数
├── views/             # 页面组件
└── style.css          # 全局样式

server/
├── index.js           # 服务器入口
└── routes/
    └── api.js         # API路由
```

## 开发指南

### 添加新工具

1. 在 `src/config/tools.ts` 中添加工具配置
2. 在 `src/config/i18n/` 中添加多语言支持
3. 在 `src/components/tools/` 中创建工具组件
4. 在 `src/views/ToolView.vue` 的映射表中注册组件

### 组件开发规范

- 使用 `<script setup>` 语法糖
- 使用箭头函数
- 使用 Composition API
- 遵循 TypeScript 类型约束
- 使用 Tailwind CSS 进行样式开发

### 主题和样式

项目使用 CSS 变量实现主题切换，主要颜色变量定义在 `src/style.css` 中。

### 国际化

使用自定义的国际化系统，配置文件在 `src/config/i18n/` 目录下。

## API 服务

项目包含 Node.js 后端，提供以下API：

- `GET /api/ip/:ip?` - IP地址查询
- `GET /api/myip` - 获取当前IP
- `POST /api/proxy` - HTTP代理请求
- `POST /api/markdown/convert` - Markdown转换
- `POST /api/format/code` - 代码格式化

## 部署

### 使用 Node.js

```bash
npm run build
npm run server
```

### 使用 Docker

```dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3001
CMD ["npm", "run", "server"]
```

## 贡献

欢迎提交 Issue 和 Pull Request！

## 许可证

MIT License

## 致谢

本项目移植自 [jisuxiang-master](https://github.com/star7th/jisuxiang)，感谢原作者的开源贡献。