我开源了一个免费在线工具！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

安装步骤

方法一：从源码安装（推荐开发者使用）

1. 克隆仓库到本地

# 从Gitee克隆
git clone https://gitee.com/tomdac/uied-tools.git# 或从GitHub克隆
git clone https://github.com/Tomccc520/UIED-tools.git# 进入项目目录
cd uied-tools

1. 安装依赖

# 使用npm安装（推荐）
npm install# 或使用yarn
yarn install# 或使用pnpm
pnpm install

1. 启动开发服务器

# 开发模式启动
npm run dev# 指定端口启动
npm run dev -- --port 3000

1. 构建生产版本

# 标准构建
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               # 项目说明文档

开发指南

添加新工具

添加新工具需要完成以下四个步骤：

1. 创建工具组件

在 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>

1. 添加路由配置

在 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新工具，可以帮助用户快速处理数据',}
}

1. 注册工具信息

在 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: ['新品']  // 可选：添加标签
}

1. 添加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 项目做出贡献！请遵循以下步骤：

贡献流程

1. Fork 仓库

   • 访问 GitHub仓库 或 Gitee仓库
   • 点击右上角"Fork"按钮创建个人分支

2. 克隆到本地

   git clone https://github.com/你的用户名/UIED-tools.git
   cd UIED-tools
   

3. 创建功能分支

   # 以功能命名分支
   git checkout -b feature/新功能名称
   # 或以修复命名分支
   git checkout -b fix/问题名称
   

4. 开发与测试

   • 进行代码修改和开发
   • 运行测试确保功能正常
   • 遵循代码规范和样式指南

5. 提交更改

   git add .
   git commit -m "feat: 添加了xxx功能"
   

6. 推送到GitHub

   git push origin feature/新功能名称
   

7. 创建 Pull Request

   • 访问你Fork的仓库
   • 点击"New Pull Request"按钮
   • 选择你的功能分支和原仓库的主分支
   • 填写PR描述，说明更改内容和目的