在 He3 三分钟开发一个排版小工具

zhezhongyun 2025-08-02 22:43 55 浏览

如 He3 官网所述，He3 是一款开发者工具箱，包含诸多开发者所需要的工具。

同 uTools 和 Raycast 一样，He3 同样提供了开放体系，用户可以打造自己的工具。

刚好最近有一个工具需求，在写博客的时候，经常会遇到排版的问题，一般就中英文、数字之间需要添加空格，比如：

与2022年同一季度相比，苹果公司在2023年的前三个月中，来自iPhone的收入增长了。

需要格式化为：

与 2022 年同一季度相比，苹果公司在 2023 年的前三个月中，来自 iPhone 的收入增长了。

对于这种文本转换的场景，He3 提供了一个非常方便的 TextTransform 组件，我们只需要给定一个转换方法就能够开发一个工具：

TextTransform 组件开发文档：
https://docs.he3app.com/components/TextTransform.html

我们首先到 He3 提供的 web 端（
https://portal.he3app.com/home/createTool），登录后在「创建工具」页面，填写我们的工具名称、ID、描述、关键词等信息，然后一键下载项目工程包。

打开项目，执行 npm install 安装依赖：

项目结构很简单，主要就是 package.json 加上 index.vue 文件，在 index.vue 文件中写上我们的工具代码（这里我用了 Vue3 的写法，并且使用到一个“copywriting-correct”的 npm 包进行中英文排版转化）：

<template>
  <h-text-transform :sampleData="sampleData" :transform="transform" />
</template>

<script setup lang="ts">
import CopyWritingCorrectService from 'copywriting-correct';

const sampleData = `He3是一个包含近400种工具的终极开发者工具箱，涵盖了前后端开发者的日常所需。He3的智能搜索和剪贴板智能推荐 将您的开发效率提升到一个新的水平。`

const service = new CopyWritingCorrectService();

const transform = (inputValue: string): string => {
  return service.correct(inputValue);
};
</script>

然后执行 npm run dev，在 He3 客户端（需要安装客户端并登录），就可以看到我们的工具了：

开发完毕后，执行 npm run publish 就可以发布我们的工具了，并且得到我们的工具链接：https://t.he3app.com/67cj

到这里，我们的工具就已经发布成功了

后续，我们可以在 He3 web 端查看我们工具的审核过程：

可以看到，整体开发体验还是挺简单的，本地只需要有 node 环境，并且安装 He3 客户端，就可以打造自己的工具，同时 He3 为转换类场景提供了高度封装的组件，寥寥几行代码就可以实现一个小工具。最后，也欢迎大家体验「中英文文案排版纠正器」：https://t.he3app.com/67cj

text-transform 属性

上一篇：旋转、缩放、移动:掌握CSS Transform动画的终极指南!
下一篇：自学前端踩了30个坑，终于整理出这份新手避坑指南

在 He3 三分钟开发一个排版小工具

相关推荐

HTML标签速查手册?别死记硬背了，带你从原理上掌握它!

用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）

旧手机新玩法，MacroDeck进阶指南

推荐36种免费React模板和主题「干货」

免费领取→可编辑危废标签模板首发!

业余无线电UV段几种常见天线（uv段最强天线）

今年最常见的前端面试题，你会做几道?

GitHub和码云上，7个h5页面制作工具推荐

BarTender10.1条码软件如何制作模板标签

顶级Javaer，常用的 14 个类库