如果您像我一样并且完全沉迷于 CLI 和终端 UI，那么这篇文章适合您！
不幸的是，没有一种原生方法可以用 JavaScript 构建漂亮的终端 UI——至少据我所知没有！这是我自己遇到的一个问题，最终导致我移植了最令人惊叹的 TUI 库之一：Lipgloss，由 Charm 的人们创建。
不相信我？看看这个：
很漂亮吧？
这里有一个问题：Lipgloss 是用 Go 编写的。虽然我通常使用 Go 工作，但最近我需要使用 Node.js 编写一个 Web 监控工具。我不愿意放弃我时尚、漂亮的 UI，所以我发现自己处于经典的开发者挑战模式。
您知道当您深入代码时，突然出现一些意想不到的事情的神奇时刻吗？这就是我最终将 Lipgloss 的部分内容移植到 WebAssembly (Wasm) 的方式。这就是魅力诞生的方式。
Charsm 是 Charm CLI Wasm 的缩写。很酷，对吧？让我们深入探讨如何使用它在 JavaScript 中构建令人惊叹的 TUI。
使用简单的 npm 命令安装 charsm：
npm install charsm
首先，导入 charsm 并在脚本中初始化它：
import { initLip, Lipgloss } from "charsm";
(async function () {
const ini = await initLip();
})();
initLip 函数加载 Wasm 文件，为渲染做好一切准备。让我们尝试打印一个表格：
const rows = [
["Chinese", "您好", "你好"],
["Japanese", "こんにちは", "やあ"],
["Arabic", "أهلين", "أهلا"],
["Russian", "Здравствуйте", "Привет"],
["Spanish", "Hola", "¿Qué tal?"],
];
const tabledata = {
headers: ["LANGUAGE", "FORMAL", "INFORMAL"],
rows: rows
};
(async function () {
const ini = await initLip();
const lip = new Lipgloss();
const table = lip.newTable({
data: tabledata,
table: { border: "rounded", color: "99", width: 100 },
header: { color: "212", bold: true },
rows: { even: { color: "246" } },
});
console.log(table);
})();
我们还可以使用十六进制代码来表示颜色（查看结尾中完整示例的链接）
结果：
简单吧？现在，让我们继续渲染列表。
目前，我们可以渲染一个简单的列表。其工作原理如下：
const subtle = { Light: "#D9DCCF", Dark: "#383838" };
const special = { Light: "#43BF6D", Dark: "#73F59F" };
const list = lip.List({
data: ["Grapefruit", "Yuzu", "Citron", "Pomelo", "Kumquat"],
selected: [],
listStyle: "alphabet",
styles: {
numeratorColor: special.Dark,
itemColor: subtle.Dark,
marginRight: 1,
},
});
const combined = table + "\n\n" + list
console.log(combined);
自定义所选项目
让我们通过对所选项目使用自定义枚举器图标（例如 ✅）来让它变得更漂亮：
const customList = lip.List({
data: ["Grapefruit", "Yuzu", "Citron", "Pomelo", "Kumquat"],
selected: ["Grapefruit", "Yuzu"],
listStyle: "custom",
customEnum: "✅",
styles: {
numeratorColor: special.Dark,
itemColor: subtle.Dark,
marginRight: 1,
},
});
console.log(customList);
所选项目将显示 ✅ 图标。
Charsm 包装了 Charm 中的 Glamour 库来处理 Markdown 渲染：
npm install charsm
将 charsm 中的样式视为终端的 CSS。您可以按照以下步骤创建自己的风格：
import { initLip, Lipgloss } from "charsm";
(async function () {
const ini = await initLip();
})();
将此样式应用于文本：
const rows = [
["Chinese", "您好", "你好"],
["Japanese", "こんにちは", "やあ"],
["Arabic", "أهلين", "أهلا"],
["Russian", "Здравствуйте", "Привет"],
["Spanish", "Hola", "¿Qué tal?"],
];
const tabledata = {
headers: ["LANGUAGE", "FORMAL", "INFORMAL"],
rows: rows
};
(async function () {
const ini = await initLip();
const lip = new Lipgloss();
const table = lip.newTable({
data: tabledata,
table: { border: "rounded", color: "99", width: 100 },
header: { color: "212", bold: true },
rows: { even: { color: "246" } },
});
console.log(table);
})();
请参阅 github 上的自述文件以获取更多选项或更好的选项，但这里是一个“完整”示例
想要布局吗？ Charsm 支持简单的类似 Flex 的布局：
const subtle = { Light: "#D9DCCF", Dark: "#383838" };
const special = { Light: "#43BF6D", Dark: "#73F59F" };
const list = lip.List({
data: ["Grapefruit", "Yuzu", "Citron", "Pomelo", "Kumquat"],
selected: [],
listStyle: "alphabet",
styles: {
numeratorColor: special.Dark,
itemColor: subtle.Dark,
marginRight: 1,
},
});
const combined = table + "\n\n" + list
console.log(combined);
这就是你得到的！使用 charsm，您可以渲染表格、列表、Markdown，甚至创建自定义样式 - 所有这些都在终端内进行，顺便说一下，您可以环绕列表或 Markdown，因为它是文本
const customList = lip.List({
data: ["Grapefruit", "Yuzu", "Citron", "Pomelo", "Kumquat"],
selected: ["Grapefruit", "Yuzu"],
listStyle: "custom",
customEnum: "✅",
styles: {
numeratorColor: special.Dark,
itemColor: subtle.Dark,
marginRight: 1,
},
});
console.log(customList);
表格和列表将被边框包裹，并带有填充和边距！
这只是开始。我将很快添加交互式组件（如表单），敬请期待。享受在 JavaScript 中尝试和构建自己漂亮的终端 UI 的乐趣！
干杯！
以上是如何用 JavaScript 构建漂亮的终端 UI (TUI)！的详细内容。更多信息请关注PHP中文网其他相关文章！
