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构建日志，修复服务端渲染错误

技术栈详解

核心技术

技术版本用途文档链接
Vue3.3.10前端框架Vue文档
TypeScript5.3.3类型检查TS文档
Vite5.0.10构建工具Vite文档
Pinia2.1.7状态管理Pinia文档
Vue Router4.2.5路由管理Router文档

UI框架与样式

技术版本用途文档链接
Element Plus2.7.0UI组件库Element Plus文档
Tailwind CSS3.3.5原子CSS框架Tailwind文档
PostCSS8.4.32CSS处理器PostCSS文档

工具库

技术用途文档链接
AxiosHTTP请求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描述，说明更改内容和目的

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/80518.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/80518.shtml
英文地址，请注明出处：http://en.pswp.cn/pingmian/80518.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【vue】全局组件及组件模块抽离

【vue】全局组件及组件模块抽离

一、全局组件 只要是实例化过的区域都可以使用 Vue.component("组件名",{ template: 内容} ) 二、组件模块抽离 抽离就是把template的内容写到body里面&#xff0c;然后建立id写到变量下的template里&#xff0c;id变量写到component里 body{ template&#xff1a; …
阅读更多...
深入理解 iOS 开发中的 `use_frameworks!`

深入理解 iOS 开发中的 `use_frameworks!`

在使用 CocoaPods 管理 iOS 项目依赖时&#xff0c;开发者经常会在 Podfile 文件中看到一个配置选项&#xff1a;use_frameworks!。本文将详细介绍这个配置选项的含义&#xff0c;以及如何决定是否在项目中使用它。 一、什么是 use_frameworks! 在 CocoaPods 中引入第三方库时…
阅读更多...
《Python星球日记》 第57天：LSTM 与 GRU

《Python星球日记》 第57天：LSTM 与 GRU

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 目录 一、LSTM 的门控机制1. LSTM 结构概述2. 遗忘门(Forget Gate)3. 输入门(Input Gate)4. 输出门(Output Gate)5. 记忆单元更新过程二、GRU 的简化…
阅读更多...
Java SE所需工具与常见类型和运算符介绍

Java SE所需工具与常见类型和运算符介绍

1.Java SE所需工具 1.1 JDK JDK全称为Java Develepment Kit(Java开发者工具包&#xff09;&#xff0c;包括了Java运行环境JRE&#xff08;Java Runtime Envirnment&#xff09;、一堆Java工具&#xff08;javac/java/jdb等&#xff09;和Java基础的类库&#xff08;即Java A…
阅读更多...
QT6.8安装教程

QT6.8安装教程

官网下载 链接&#xff1a; Index of /official_releases/online_installers 这个比较慢 建议去 清华大学开源软件镜像站&#xff1a;Index of /qt/archive/online_installers/4.9/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 根据自己什么系统选择 点击打开…
阅读更多...
MIT XV6 - 1.3 Lab: Xv6 and Unix utilities - primes

MIT XV6 - 1.3 Lab: Xv6 and Unix utilities - primes

接上文 MIT XV6 - 1.2 Lab: Xv6 and Unix utilities - pingpong primes 继续实验&#xff0c;实验介绍和要求如下 (原文链接 译文链接) : Write a concurrent prime sieve program for xv6 using pipes and the design illustrated in the picture halfway down this page and…
阅读更多...
hive两个表不同数据类型字段关联引发的数据倾斜

hive两个表不同数据类型字段关联引发的数据倾斜

不同数据类型引发的Hive数据倾斜解决方案 #### 一、‌原因分析‌ 当两个表的关联字段存在数据类型不一致时&#xff08;如int vs string、bigint vs decimal&#xff09;&#xff0c;Hive会触发隐式类型转换引发以下问题&#xff1a; ‌Key值的精度损失‌&#xff1a;若关联字…
阅读更多...
【JAVA】业务系统订单号，流水号生成规则工具类

【JAVA】业务系统订单号，流水号生成规则工具类

设计业务系统订单号&#xff0c;流水号注意事项 唯一性&#xff1a;确保在分布式环境下ID不重复 有序性&#xff1a;ID随时间递增&#xff0c;有利于数据库索引性能 可读性&#xff1a;包含时间信息&#xff0c;便于人工识别 扩展性&#xff1a;支持业务前缀和类型区分 性能…
阅读更多...
【嵌入式开发-SPI】

【嵌入式开发-SPI】

嵌入式开发-SPI ■ SPI简介■ SPI &#xff08;Standard SPI&#xff09;■ DSPI &#xff08;Dual SPI&#xff09;■ QSPI是 Queued SPI的简写 ■ SPI简介 SPI协议其实是包括&#xff1a;Standard SPI、Dual SPI和Queued SPI三种协议接口&#xff0c;分别对应3-wire, 4-wire…
阅读更多...
基于HTTP头部字段的SQL注入：SQLi-labs第17-20关

基于HTTP头部字段的SQL注入：SQLi-labs第17-20关

前置知识&#xff1a;HTTP头部介绍 HTTP&#xff08;超文本传输协议&#xff09;头部&#xff08;Headers&#xff09;是客户端和服务器在通信时传递的元数据&#xff0c;用于控制请求和响应的行为、传递附加信息或定义内容类型等。它们分为请求头&#xff08;Request Headers&…
阅读更多...
基于Qt开发的http/https客户端

基于Qt开发的http/https客户端

成果展示&#xff1a; 使用Qt开发HTTP客户端主要依赖QNetworkAccessManager、QNetworkRequest和QNetworkReply三大核心类。以下是具体实现要点及最佳实践&#xff1a; 一、核心类与基础流程​​ 1.QNetworkAccessManager​​ 作为HTTP请求的管理者&#xff0c;负责异步处理…
阅读更多...
自适应蒙特卡洛定位-AMCL

自适应蒙特卡洛定位-AMCL

自适应蒙特卡洛定位&#xff0c;简称AMCL&#xff0c;主要提供定位功能并以/tf形式输出 蒙特卡洛算法的基本思想&#xff1a;当所要求的问题是某种事件出现的概率或者是某个变量的期望值时&#xff0c;它们可以通过某种"试验"的方法&#xff0c;得到这种事件出现的概…
阅读更多...
鲁滨逊归结原理详解：期末考点+解题指南

鲁滨逊归结原理详解：期末考点+解题指南

1. 引言 归结原理&#xff08;Resolution Principle&#xff09; 是自动定理证明和逻辑推理的核心技术&#xff0c;由约翰艾伦罗宾逊&#xff08;John Alan Robinson&#xff09;于1965年提出。它是一阶谓词逻辑的机械化推理方法&#xff0c;广泛应用于人工智能&#xff08;如…
阅读更多...
华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1商用服务开通教程以及模型体验

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1商用服务开通教程以及模型体验

在当今数字化浪潮迅猛推进的时代&#xff0c;云计算与人工智能技术的深度融合正不断催生出众多创新应用与服务&#xff0c;为企业和个人用户带来了前所未有的便利与发展机遇。本文将重点聚焦于在华为云这一行业领先的云计算平台上&#xff0c;对 DeepSeek-V3/R1 商用服务展开的…
阅读更多...
Matlab基于PSO-MVMD粒子群算法优化多元变分模态分解

Matlab基于PSO-MVMD粒子群算法优化多元变分模态分解

Matlab基于PSO-MVMD粒子群算法优化多元变分模态分解 目录 Matlab基于PSO-MVMD粒子群算法优化多元变分模态分解效果一览基本介绍程序设计参考资料效果一览 基本介绍 PSO-MVMD粒子群算法优化多元变分模态分解 可直接运行 分解效果好 适合作为创新点（Matlab完整源码和数据)，以包…
阅读更多...
自然语言处理NLP中的连续词袋（Continuous bag of words，CBOW）方法、优势、作用和程序举例

自然语言处理NLP中的连续词袋（Continuous bag of words，CBOW）方法、优势、作用和程序举例

自然语言处理NLP中的连续词袋&#xff08;Continuous bag of words&#xff0c;CBOW&#xff09;方法、优势、作用和程序举例 目录 自然语言处理NLP中的连续词袋&#xff08;Continuous bag of words&#xff0c;CBOW&#xff09;方法、优势、作用和程序举例一、连续词袋( Cont…
阅读更多...
商业模式解密：鸣鸣很忙下沉市场的隐忧，破局之路在何方？

商业模式解密：鸣鸣很忙下沉市场的隐忧，破局之路在何方？

文 | 大力财经 作者 | 魏力 在零售行业的版图中&#xff0c;“鸣鸣很忙”凭借独特的商业模式&#xff0c;在下沉市场异军突起&#xff0c;成为不可忽视的力量。555亿GMV、广泛的县域覆盖以及高比例的乡镇门店&#xff0c;无疑彰显了其在下沉市场的王者地位。然而&#xff0c;…
阅读更多...
YOLOv5推理代码解析

YOLOv5推理代码解析

代码如下 import cv2 import numpy as np import onnxruntime as ort import time import random# 画一个检测框 def plot_one_box(x, img, colorNone, labelNone, line_thicknessNone):"""description: 在图像上绘制一个矩形框。param:x: 框的坐标 [x1, y1, x…
阅读更多...
CATIA高效工作指南——常规配置篇（二）

CATIA高效工作指南——常规配置篇（二）

一、结构树&#xff08;Specification Tree&#xff09;操作技巧精讲 结构树是CATIA设计中记录模型历史与逻辑关系的核心模块&#xff0c;其高效管理直接影响设计效率。本节从基础操作到高级技巧进行系统梳理。 1.1 结构树激活与移动 ​​激活方式​​&#xff1a; ​​白线…
阅读更多...
批量重命名bat

批量重命名bat

作为一名程序员&#xff0c;怎么可以自己一个个改文件名呢&#xff01; Windows的批量重命名会自动加上括号和空格&#xff0c;看着很不爽&#xff0c;写一个bat处理吧&#xff01;❥(ゝω・✿ฺ) 功能&#xff1a;将当前目录下的所有文件名里面当括号和空格都去掉。 用法&…
阅读更多...
最新文章

Copyright @ 2022~2023