快速搭建！一个轻量的在线工具箱！
<p>大家好，我是 <code>Java陈序员</code>。</p><p>之前给大家介绍过一款个人在线工具箱。</p>
<p>8.7K+ Star！快速搭建个人在线工具箱</p>
<p>今天，再给大家安利一个开源轻量的在线工具箱！</p>
<blockquote>
<p>关注微信公众号：【Java陈序员】，获取<strong>开源项目分享、AI副业分享、超200本经典计算机电子书籍等。</strong></p>
</blockquote>
<h2 id="项目介绍">项目介绍</h2>
<p><code>tools-web</code> —— 一个轻量的在线工具箱，覆盖开发运维、文本处理、教育学术、图片处理、数据图表、选择随机等数十种工具，只需简单几步，即可快速搭建。</p>
<p><strong>工具列表</strong>：</p>
<ul>
<li>开发运维：随机密码生成、URL编码/解码、UUID生成器、时间戳转换、MD5在线加密、Json在线转换、正则测试工具、Unicode转中文、HTTP状态码、JWT解析、html实体转义、js代码格式化/压缩、Html代码格式化、Css代码格式化/压缩</li>
<li>文本处理：文本对比、markdown编辑器、字数统计、文本去重、ASCII字形生成器、在线文本编辑/HTML获取</li>
<li>教育学术：单位换算、摩斯电码、常用进制转换、ASCII码表、长度单位转换、面积单位转换、重量单位转换、时间单位转换、温度单位转换、压力单位转换、热量单位转换、功率单位转换</li>
<li>图片处理：二维码生成、在线图片处理、文本转图片、图片分割</li>
<li>数据图表：柱状图、折线图、饼图、散点图</li>
<li>选择随机：生成随机数、帮我决定、抛硬币、投骰子</li>
<li>其他工具：数字转金额大写、手持弹幕、色板、Color选择器</li>
</ul>
<h2 id="快速部署">快速部署</h2>
<p><code>tools-web</code> 支持 Docker 部署，可使用 Docker 一键部署。</p>
<pre><code class="language-bash">docker run -d \
--name tools-web \
--restart unless-stopped\
-p 8080:80 docker0796/tools-web:latest
</code></pre>
<p>容器启动成功后，访问：</p>
<pre><code class="language-bash">http://{ip/域名}:8080
</code></pre>
<h2 id="功能截图">功能截图</h2>
<ul>
<li><strong>开发运维</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/tools-web/img-20250413144248.png"></p>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/tools-web/img-20250413144413.png"></p>
<ul>
<li><strong>文本处理</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/tools-web/img-20250413144436.png"></p>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/tools-web/img-20250413144629.png"></p>
<ul>
<li><strong>教育学术 && 图片处理</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/tools-web/img-20250413144657.png"></p>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/tools-web/img-20250413144852.png"></p>
<ul>
<li><strong>数据图表 && 选择随机 && 其他工具</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/tools-web/img-20250413144929.png"></p>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/tools-web/img-20250413145034.png"></p>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/tools-web/img-20250413145053.png"></p>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/tools-web/img-20250413145145.png"></p>
<h2 id="本地开发">本地开发</h2>
<h3 id="本地运行">本地运行</h3>
<blockquote>
<p>依赖 Node.js 环境。</p>
</blockquote>
<p>1、克隆源码</p>
<pre><code class="language-bash">git clone --depth=1 https://github.com/naroat/tools-web.git
</code></pre>
<p>2、安装依赖，推荐使用 pnpm</p>
<pre><code class="language-bash">## 安装 pnpm
npm install pnpm -g
## 进入项目
cd tools-web
## 安装依赖
pnpm install
</code></pre>
<p>3、复制配置文件</p>
<pre><code class="language-bash">cp .env.example .env.development
</code></pre>
<p>4、启动</p>
<pre><code class="language-bash">pnpm run dev
</code></pre>
<p>5、打包构建</p>
<pre><code class="language-bash">pnpm run build
</code></pre>
<h3 id="添加新功能">添加新功能</h3>
<p>如果想在源项目的基础上添加新功能，只需要如下几步：</p>
<p>1、在 <code>components/Tools/tools.ts</code> 文件中添加工具信息</p>
<p>2、在 <code>router/router.ts</code> 中添加路由</p>
<p>3、拷贝示例目录 <code>components/Tools/Example</code> 修改名称，在这个拷贝出来的目录中开发工具即可</p>
<p><code>tools-web</code> 提供了一套基础的在线工具模板，只需要几步，就能轻松搭建。而且，还能继续扩展工具箱！快去体验试试吧~</p>
<pre><code class="language-bash">项目地址：https://github.com/naroat/tools-web
</code></pre>
<h2 id="最后">最后</h2>
<p>推荐的开源项目已经收录到 <code>GitHub</code> 项目，欢迎 <code>Star</code>：</p>
<pre><code>https://github.com/chenyl8848/great-open-source-project
</code></pre>
<p>或者访问网站，进行在线浏览：</p>
<pre><code>https://chencoding.top:8090/#/
</code></pre>
<p><img src="https://chen-coding.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240629100336.png"></p>
<p><strong>我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目</strong>。</p>
<p><strong>但是任何人在群里打任何广告，都会被 T 掉</strong>。</p>
<p><strong>如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群</strong>：</p>
<p><strong>关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群</strong>。</p>
<blockquote>
<p>大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！</p>
</blockquote>
<hr><br><br>
来源：https://www.cnblogs.com/codechen8848/p/18826937
頁:
[1]