工具完成
This commit is contained in:
201
README.md
201
README.md
@ -1,5 +1,200 @@
|
||||
# Vue 3 + TypeScript + Vite
|
||||
# Vue 工具集 - Vue Tools Kit
|
||||
|
||||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
这是一个基于 Vue 3 + TypeScript + Tailwind CSS 开发的在线工具集合，移植自 jisuxiang-master 项目。
|
||||
|
||||
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
||||
## 特性
|
||||
|
||||
- 🚀 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)，感谢原作者的开源贡献。
|
||||
|
||||
Reference in New Issue
Block a user