201 lines
4.8 KiB
Markdown
201 lines
4.8 KiB
Markdown
# 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)，感谢原作者的开源贡献。
|