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 (图片压缩)

快速开始

安装依赖

npm install

开发模式

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

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

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

生产构建

# 构建前端
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

npm run build
npm run server

使用 Docker

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，感谢原作者的开源贡献。