Deno TUI 使用教程

Deno TUI 使用教程

deno_tui 🦕 Deno module for creating Terminal User Interfaces 项目地址: https://gitcode.com/gh_mirrors/de/deno_tui

1. 项目介绍

Deno TUI 是一个基于 Deno 的模块，用于创建终端用户界面（Terminal User Interfaces）。它具有简单易用、响应迅速、无依赖、良好的文档支持、多种预置组件、样式框架无关、轻量级等特点。它支持 Linux、macOS、Windows 和 WSL 操作系统，并且具有键盘和鼠标支持。

2. 项目快速启动

首先，确保你的系统中已经安装了 Deno。以下是一个快速启动 Deno TUI 的示例代码：

import { crayon } from "https://deno.land/x/crayon/mod.ts";
import { Canvas, Tui } from "https://deno.land/x/tui/mod.ts";

const tui = new Tui({
  style: crayon.bgBlack,
  refreshRate: 1000 / 60, // 60FPS
});

tui.dispatch();

// 以下是启用交互的代码
import { handleInput, handleKeyboardControls, handleMouseControls } from "https://deno.land/x/tui/mod.ts";

handleInput(tui);
handleMouseControls(tui);
handleKeyboardControls(tui);

// 添加组件
import { Button } from "https://deno.land/x/tui/src/components/mod.ts";
import { Signal, Computed } from "https://deno.land/x/tui/mod.ts";

const number = new Signal(0);
const button = new Button({
  parent: tui,
  zIndex: 0,
  label: {
    text: new Computed(() => number.value.toString())
  },
  theme: {
    base: crayon.bgRed,
    focused: crayon.bgLightRed,
    active: crayon.bgYellow,
  },
  rectangle: {
    column: 1,
    row: 1,
    height: 5,
    width: 10,
  }
});

button.state.when("active", (state) => {
  ++number.value;
});

button.on("mousePress", ({ drag, movementX, movementY }) => {
  if (!drag) return;
  const rectangle = button.rectangle.peek();
  rectangle.column += movementX;
  rectangle.row += movementY;
});

// 运行 Tui
tui.run();

3. 应用案例和最佳实践

以下是一些使用 Deno TUI 的案例和最佳实践：

• 界面布局：合理规划组件的位置和大小，确保用户界面清晰易用。
• 响应式设计：利用 TUI 的响应式特性，确保界面能够根据终端窗口大小变化进行自适应。
• 事件处理：充分利用键盘和鼠标事件，提供丰富的用户交互体验。
• 状态管理：使用 Signal 和 Computed 来创建响应式的数据流，使得界面元素能够根据数据变化自动更新。

4. 典型生态项目

Deno TUI 的生态系统中有一些典型的项目，这些项目可以提供额外的功能或集成，例如：

• Crayon：一个为终端文本提供丰富颜色的库，可以与 TUI 无缝集成。
• deno-async：提供异步编程支持，可以用于创建更复杂的交互逻辑。

通过以上介绍，你可以开始使用 Deno TUI 创建自己的终端用户界面。记住，Deno TUI 的社区是开放的，如果你有任何改进或建议，欢迎贡献你的代码。

deno_tui 🦕 Deno module for creating Terminal User Interfaces 项目地址: https://gitcode.com/gh_mirrors/de/deno_tui