如何以 JavaScript 形式建立漂亮的終端 UI (TUI)！

我對 TUI 著迷——也許你也是！如果還沒有，我希望您會的，因為它們不僅有趣，而且非常有用！

大約兩個月前，我將 Lipgloss 從 Go 移植到了 WebAssembly。這是本系列的第一篇！我的下一個計劃是移植表單，但是長話短說，某些功能無法跳到 WASM。本機功能和運行時限制帶來了障礙，因此我更進一步：DLL 和 SO 檔案（共用程式庫）。最後，我們有表格！

注意： 要在 JavaScript 中使用共用函式庫，您需要具有本機模組支援的 Node.js 和用於 C 綁定的 node-gyp。

最簡單的方法？重新安裝 Node.js 並在安裝過程中選擇本機模組選項：

比較喜歡手動安裝？請遵循此自述文件。

---

為什麼是 DLL 和 SO 檔案？

與 WASM 相比，它們要小得多，我可能最終會重寫所有內容來利用它！

如果您準備好投入使用，請設定一個新的 JavaScript 專案並安裝 charsm：

pnpm add charsm

---

CLI 中的表單

1. 主題定制

要自訂表單的外觀，請使用主題：

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

---

2. 建立確認對話框

一個簡單的確認對話框，帶有可自訂的「是」（肯定）和「否」（否定）按鈕：

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");
}

---

3. 建立輸入欄位

範例 1：單輸入

使用驗證和占位符定義輸入欄位：

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」確保輸入滿足所有條件，然後再繼續。

驗證者包括：

• 必需的
• 電子郵件
• 沒有數字
• 僅阿爾法
• no_special_chars

模式：

• 0：單行輸入
• 1：多行文字區域

範例 2：多行輸入

pnpm add charsm

---

4. 建立選擇元件

import { huh } from "charsm";
huh.SetTheme("dracula");

---

5. 新增旋轉器

huh.SetTheme("dracula"); 
// Components here use Dracula
huh.SetTheme("Catppuccin");
// Components here use Catppuccin

// Available themes: default, Charm, Base16, Dracula, Catppuccin

---

6. 建立表單

表單可以容納多個群組，並按順序渲染它們。這是一個例子：

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 上找到我。

即將發布的關於 Substack 的文章和系列：

• P2P 系列： 建立 Livescribe，一個 Go 語言的開源點對點寫作應用程式（桌面和行動裝置）。
• 自訂模板引擎：從頭開始製作一個。
• 低階 Libuv 伺服器： 探索自訂協定和伺服器建置。
• Windows Universal 遇見 WebView： 時尚統治。
• RAG 應用程式： 深入研究檢索增強生成。
• 自訂 Node.js C/C 模組： 將 Node.js 推向極限。

感謝您的閱讀－祝 2025 年美好！ ？

以上是如何以 JavaScript 形式建立漂亮的終端 UI (TUI)！的詳細內容。更多資訊請關注PHP中文網其他相關文章！