我开源了一个免费在线工具！UIED Tools
UIED Tools - 免费在线工具集合
最近更新：修改了文档说明，优化了项目结构介绍
这是设计师转开发的第一个开源项目，bug和代码规范可能有些欠缺。
这是一个功能丰富的免费在线工具集合网站，集成了多种实用工具，包括 AI 工具、设计工具、开发工具等。该项目旨在为设计师、开发者和普通用户提供一站式工具解决方案，提高工作效率。
在线站点：UIED免费在线工具集
开源地址
https://github.com/Tomccc520/UIED-tools
UIED-Tools: UIED Tools在线免费工具箱，纯AI二次开发。
更新日志
更新日志2025.5.11
项目亮点
- 丰富多样的工具：提供超过80种常用工具，覆盖设计、开发、文本处理、图片处理等多个领域，持续更新中。
- 简洁易用的界面：采用直观的UI设计，让用户快速找到并使用所需工具
- 完全免费：所有工具完全免费使用，无需注册和付费
- 持续更新：定期添加新工具，不断优化已有功能
- 开源共享：项目代码完全开源，欢迎社区贡献和改进
- 中文优化：专为中文用户设计，提供本地化的使用体验
UIED Tools 基于 Vue3、TypeScript 和 Element Plus 开发，支持响应式布局，能够在桌面端和移动端提供良好的使用体验。
快速开始
环境要求
- Node.js 版本: >= 16.0.0
- npm 版本: >= 8.0.0
安装步骤
方法一：从源码安装（推荐开发者使用）
- 克隆仓库到本地
# 从Gitee克隆
git clone https://gitee.com/tomdac/uied-tools.git# 或从GitHub克隆
git clone https://github.com/Tomccc520/UIED-tools.git# 进入项目目录
cd uied-tools
- 安装依赖
# 使用npm安装（推荐）
npm install# 或使用yarn
yarn install# 或使用pnpm
pnpm install
- 启动开发服务器
# 开发模式启动
npm run dev# 指定端口启动
npm run dev -- --port 3000
- 构建生产版本
# 标准构建
npm run build# 包含SEO优化的构建（推荐生产环境使用）
npm run build:pro# 预览构建结果
npm run preview
方法二：使用Docker部署（推荐运维人员使用）
# 拉取镜像
docker pull docker0796/tools-web:latest# 运行容器
docker run -d --name tools-web --restart unless-stopped -p 8080:80 docker0796/tools-web:latest# 访问服务
# 浏览器打开 http://localhost:8080
项目结构说明
uied-tools/
├── src/ # 源代码目录
│ ├── components/ # 组件目录
│ │ ├── Common/ # 公共组件
│ │ │ └── ToolsRecommend.vue # 工具推荐组件
│ │ ├── Home/ # 首页相关组件
│ │ ├── Layout/ # 布局组件
│ │ │ ├── Left/ # 左侧菜单
│ │ │ └── Right/ # 右侧推荐栏
│ │ └── Tools/ # 工具组件目录
│ │ ├── AI/ # AI相关工具
│ │ ├── Avatar/ # 头像相关工具
│ │ ├── Copywriting/ # 文案相关工具
│ │ ├── Design/ # 设计相关工具
│ │ ├── Dev/ # 开发相关工具
│ │ ├── tools.ts # 工具配置文件
│ │ └── ToolIcon.vue # 工具图标组件
│ ├── router/ # 路由配置
│ │ └── router.ts # 主路由文件
│ ├── store/ # 状态管理
│ │ └── modules/ # 状态模块
│ ├── assets/ # 静态资源
│ │ ├── icons/ # SVG图标
│ │ └── styles/ # 全局样式
│ ├── utils/ # 工具函数
│ └── App.vue # 根组件
├── public/ # 公共资源目录
├── docs/ # 文档目录
├── scripts/ # 脚本目录
├── dist/ # 构建输出目录
├── .env.development # 开发环境配置
├── .env.production # 生产环境配置
├── vite.config.ts # Vite配置
├── tailwind.config.js # Tailwind CSS配置
├── tsconfig.json # TypeScript配置
├── package.json # 项目依赖配置
└── README.md # 项目说明文档
开发指南
添加新工具
添加新工具需要完成以下四个步骤：
- 创建工具组件
在 src/components/Tools 对应分类目录下创建新的组件文件。例如要创建一个新的AI工具，可以在 src/components/Tools/AI/ 目录下创建：
<!-- NewAITool.vue -->
<template><div class="p-6 bg-white rounded-lg shadow-sm"><h2 class="text-xl font-bold mb-4">新AI工具</h2><!-- 工具主体内容 --><div class="mb-4"><el-input v-model="inputText" placeholder="请输入内容" /></div><!-- 操作按钮 --><div class="flex justify-between"><el-button type="primary" @click="processData">处理</el-button><el-button @click="resetForm">重置</el-button></div><!-- 结果展示区域 --><div v-if="result" class="mt-4 p-4 bg-gray-50 rounded"><p>{{ result }}</p></div><!-- 底部推荐工具 --><ToolsRecommend :currentPath="route.path" /></div>
</template><script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import ToolsRecommend from '@/components/Common/ToolsRecommend.vue'const route = useRoute()
const inputText = ref('')
const result = ref('')// 处理数据函数
const processData = () => {// 实现工具核心逻辑result.value = `处理结果: ${inputText.value}`
}// 重置表单函数
const resetForm = () => {inputText.value = ''result.value = ''
}
</script>
- 添加路由配置
在 src/router/router.ts 文件中添加新工具的路由配置：
// router.ts
{path: '/tools/ai/new-tool',component: () => import('@/components/Tools/AI/NewAITool.vue'),name: 'newAITool',meta: {title: "新AI工具",keywords: 'AI工具,人工智能,新工具',description: '这是一个强大的AI新工具，可以帮助用户快速处理数据',}
}
- 注册工具信息
在 src/components/Tools/tools.ts 中的合适位置添加工具信息：
// tools.ts
// 在AI工具分类中添加
{id: 123,title: "新AI工具",logo: { type: 'svg', name: 'newAITool' }, // 使用SVG图标desc: "强大的AI工具，可快速处理数据",url: "/tools/ai/new-tool",cateId: 1,cate: 'AI工具',tags: ['新品'] // 可选：添加标签
}
- 添加SVG图标（可选）
如果使用SVG图标，将图标文件放入 src/assets/icons/ 目录下，命名为 newAITool.svg。
完成以上步骤后，刷新页面即可看到新添加的工具。
注意事项
1. 环境配置
- 开发环境：使用
.env.development配置文件NODE_ENV=development VITE_API_BASE_URL=http://localhost:8080/api - 生产环境：使用
.env.production配置文件NODE_ENV=production VITE_API_BASE_URL=https://api.example.com - 本地配置：可创建
.env.local进行本地覆盖（不会提交到代码库）
2. 代码规范
- TypeScript：所有新代码必须使用TypeScript编写
- 开启严格模式：
"strict": true - 使用类型标注：
const name: string = 'value'
- 开启严格模式：
- Vue 规范：
- 使用 Vue 3 Composition API
- 使用
<script setup>语法糖 - 保持组件单一职责
- 样式规范：
- 使用 Tailwind CSS 实用类优先
- 自定义样式使用 scoped CSS
- 遵循 Element Plus 的设计规范
3. 性能优化准则
- 路由懒加载：所有页面组件使用动态导入
{path: '/tools/example',component: () => import('@/components/Tools/Example.vue') // 懒加载 } - 组件按需导入：使用 Element Plus 的按需导入
import { ElButton, ElInput } from 'element-plus' - 资源优化：
- 图片使用WebP格式
- SVG图标使用单色线性风格
- 大型资源使用CDN加载
4. Git提交规范
- 提交信息格式：
<类型>: <描述> - 常用类型：
feat：新功能fix：bug修复docs：文档更新style：代码格式调整refactor：代码重构perf：性能优化test：测试相关chore：构建过程或辅助工具变动
常见问题与解决方案
1. 依赖相关问题
安装依赖失败
# 方法1：清除npm缓存后重试
npm cache clean --force
npm install# 方法2：使用镜像源
npm config set registry https://registry.npmmirror.com
npm install# 方法3：尝试使用其他包管理器
yarn install
# 或
pnpm install
依赖版本冲突
# 更新依赖到兼容版本
npm update# 检查有问题的依赖
npm ls <package-name># 强制解决冲突
npm install --force
2. 开发环境问题
开发服务器启动失败
- 端口占用：修改
vite.config.ts中的端口export default defineConfig({server: {port: 3000 // 修改为其他端口} }) - 模块解析错误：
# 删除node_modules和lock文件后重新安装 rm -rf node_modules package-lock.json npm install - Node.js版本问题：使用 nvm 安装正确版本
nvm install 16 nvm use 16
热更新不工作
- 检查
vite.config.ts中的server.hmr配置 - 确认系统文件监听限制（Linux系统）
- 重启开发服务器
3. 构建与部署问题
构建失败
- 语法错误：检查控制台错误信息，修复对应代码
- 内存不足：增加Node内存限制
# 增加内存限制 export NODE_OPTIONS=--max-old-space-size=4096 npm run build - 依赖缺失：确认所有依赖正确安装
npm install --legacy-peer-deps
部署问题
- 静态资源路径错误：检查
vite.config.ts中的base配置export default defineConfig({base: '/' // 根据实际部署路径调整 }) - Docker部署问题：参考前面的Docker部署指南
- SSR渲染问题：查看SSR构建日志，修复服务端渲染错误
技术栈详解
核心技术
| 技术 | 版本 | 用途 | 文档链接 |
|---|---|---|---|
| Vue | 3.3.10 | 前端框架 | Vue文档 |
| TypeScript | 5.3.3 | 类型检查 | TS文档 |
| Vite | 5.0.10 | 构建工具 | Vite文档 |
| Pinia | 2.1.7 | 状态管理 | Pinia文档 |
| Vue Router | 4.2.5 | 路由管理 | Router文档 |
UI框架与样式
| 技术 | 版本 | 用途 | 文档链接 |
|---|---|---|---|
| Element Plus | 2.7.0 | UI组件库 | Element Plus文档 |
| Tailwind CSS | 3.3.5 | 原子CSS框架 | Tailwind文档 |
| PostCSS | 8.4.32 | CSS处理器 | PostCSS文档 |
工具库
| 技术 | 用途 | 文档链接 |
|---|---|---|
| Axios | HTTP请求 | Axios文档 |
| VueUse | 实用工具集 | VueUse文档 |
| Day.js | 日期处理 | Day.js文档 |
| ECharts | 数据可视化 | ECharts文档 |
开发工具
| 技术 | 用途 | 推荐配置 |
|---|---|---|
| VS Code | 代码编辑器 | 推荐插件：Volar, ESLint, Prettier |
| ESLint | 代码检查 | 配置文件：.eslintrc.js |
| Prettier | 代码格式化 | 配置文件：.prettierrc |
| Git | 版本控制 | 配合Husky进行提交校验 |
贡献指南
欢迎为 UIED Tools 项目做出贡献！请遵循以下步骤：
贡献流程
-
Fork 仓库
- 访问 GitHub仓库 或 Gitee仓库
- 点击右上角"Fork"按钮创建个人分支
-
克隆到本地
git clone https://github.com/你的用户名/UIED-tools.git cd UIED-tools -
创建功能分支
# 以功能命名分支 git checkout -b feature/新功能名称 # 或以修复命名分支 git checkout -b fix/问题名称 -
开发与测试
- 进行代码修改和开发
- 运行测试确保功能正常
- 遵循代码规范和样式指南
-
提交更改
git add . git commit -m "feat: 添加了xxx功能" -
推送到GitHub
git push origin feature/新功能名称 -
创建 Pull Request
- 访问你Fork的仓库
- 点击"New Pull Request"按钮
- 选择你的功能分支和原仓库的主分支
- 填写PR描述，说明更改内容和目的