我对 TUI 着迷——也许你也是！如果还没有，我希望您会的，因为它们不仅有趣，而且非常有用！
大约两个月前，我将 Lipgloss 从 Go 移植到了 WebAssembly。这是本系列的第一篇文章！我的下一个计划是移植表单，但是长话短说，某些功能无法跳转到 WASM。本机功能和运行时限制带来了障碍，因此我更进一步：DLL 和 SO 文件（共享库）。最后，我们有表格！
注意： 要在 JavaScript 中使用共享库，您需要具有本机模块支持的 Node.js 和用于 C 绑定的 node-gyp。
最简单的方法？重新安装 Node.js 并在安装过程中选择本机模块选项：
更喜欢手动安装？请遵循此自述文件。
为什么是 DLL 和 SO 文件？
与 WASM 相比，它们要小得多，我可能最终会重写所有内容来利用它！
如果您准备好投入使用，请设置一个新的 JavaScript 项目并安装 charsm：
pnpm add charsm
要自定义表单的外观，请使用主题：
import { huh } from "charsm";
huh.SetTheme("dracula");
之后定义的所有组件都将使用 Dracula 主题。您可以随时覆盖主题：
huh.SetTheme("dracula");
// Components here use Dracula
huh.SetTheme("Catppuccin");
// Components here use Catppuccin
// Available themes: default, Charm, Base16, Dracula, Catppuccin
一个简单的确认对话框，带有可定制的“是”（肯定）和“否”（否定）按钮：
const m = huh.Confirm("Do you want to proceed?", "Yes", "No");
运行时，它返回“1”表示是，“0”表示否。指向共享库中字符串的指针很容易返回：
if (m.run() === "1") {
console.log("User chose the affirmative option");
} else {
console.log("User chose the negative option");
}
使用验证和占位符定义输入字段：
const i = new huh.NewInput(
{
Title: "Username",
Description: "Enter your name",
Placeholder: "e.g., John Doe",
validators: "no_numbers,required",
},
0 // Mode: Single Input
);
i.load();
console.log(i.run());
验证器定义为逗号分隔的字符串。例如，“no_numbers,required”确保输入满足所有条件，然后再继续。
验证者包括：
模式：
pnpm add charsm
import { huh } from "charsm";
huh.SetTheme("dracula");
huh.SetTheme("dracula");
// Components here use Dracula
huh.SetTheme("Catppuccin");
// Components here use Catppuccin
// Available themes: default, Charm, Base16, Dracula, Catppuccin
表单可以容纳多个组，并按顺序渲染它们。这是一个例子：
const m = huh.Confirm("Do you want to proceed?", "Yes", "No");
表单中的值存储在每个组件的 value 属性中：
if (m.run() === "1") {
console.log("User chose the affirmative option");
} else {
console.log("User chose the negative option");
}
Linux 上的表单验证器可能有点问题（我可能跳过了构建更新的 .so 文件 - 哎呀！）。如果您好奇或想伸出援助之手，请查看这些存储库以获取更新 - 或者更好的是，贡献！
魅力：第一期好 – 删除输入中的 load 方法，以便在 huh.NewInput 中自动调用它。
嗯共享库代码：两个好的第一个问题 – 修复不正确的自述文件并添加 macOS 支持的构建文件。
现在，让我们小组讨论一下。您可以创建多个组并将它们传递到一个表单，如下所示：
const i = new huh.NewInput(
{
Title: "Username",
Description: "Enter your name",
Placeholder: "e.g., John Doe",
validators: "no_numbers,required",
},
0 // Mode: Single Input
);
i.load();
console.log(i.run());
当你这样做时，Huh 将以交错的顺序渲染组：
很酷，对吧？强烈感谢 Charm 的神奇工具！这只是冰山一角。我将不断更新和完善这个工具，使其更加有用。
想要一个完整的例子吗？看看建立一个航站楼咖啡店。
想要一些更轻量但与 DLL 相同的精神，请阅读我关于在 Node.js 中加载 Go 进程的文章。
如果您喜欢深入的、不适合博客的内容——想想旨在提升您的开发技能的长篇系列和未经打磨的宝石——在 Substack 上关注我，您也可以在 x 上找到我。
感谢您的阅读——祝 2025 年美好！ ？
以上是如何以 JavaScript 形式构建漂亮的终端 UI (TUI)！的详细内容。更多信息请关注PHP中文网其他相关文章！
