终端美化神器——打造高颜值命令行输出

雨夜寻晴天
1,225 阅读5分钟

前言

最近在控制台输出信息这块，想把项目的信息，版本号，打包时间等信息展示出来，且想好看一点。

image.png

发现一个不错的小工具，所以在此也给大家推荐一下，它就是boxen。

Boxen

Boxen 是一个在命令行中绘制“方框”的小工具，它可以将字符串包装在一个彩色、边框样式可定制的框中，为你的 CLI 输出增添视觉层次感，便于用户阅读或提示关键信息。

特点

  • 自定义样式：支持自定义边框样式、边框颜色、背景颜色等。
  • 多种边框类型：内置了多种边框字符（如圆角、双线、ASCII 等），也可以自己定义。
  • 易于集成：只需要一个简单的函数调用，就能在命令行中生成精美的方框输出。

安装

在你的 Node.js 项目中，使用 npm、yarn 或 pnpm 安装：

# 使用 npm
npm install boxen

# 使用 yarn
yarn add boxen

# 使用 pnpm
pnpm add boxen

基本用法

安装完成后，就可以在项目中引入并使用 Boxen。以下是一个简单示例：

import boxen from 'boxen';

const message = 'Hello, Boxen!';

// 使用默认边框样式
const boxedMessage = boxen(message);

console.log(boxedMessage);

运行后，你会在命令行中看到一条由默认样式包裹的 “Hello, Boxen!”。

import boxen from 'boxen';

// 基本文本框
console.log(boxen('独角兽', { padding: 1 }));
/* 输出：
┌─────────────┐
│             │
│   独角兽     │
│             │
└─────────────┘
*/

// 带外边距的双线边框
console.log(boxen('独角兽', {
  padding: 1,
  margin: 1,
  borderStyle: 'double'
}));
/* 输出：
   
   ╔═════════════╗
   ║             ║
   ║   独角兽     ║
   ║             ║
   ╚═════════════╝
   
*/

// 居中标题
console.log(boxen('独角兽爱彩虹', {
  title: '魔法世界',
  titleAlignment: 'center'
}));
/* 输出：
┌───── 魔法世界 ─────┐
│ 独角兽爱彩虹        │
└───────────────────┘
*/

自定义配置

Boxen 提供了多种配置选项，让你根据需要自定义外观和布局。例如：

import boxen from 'boxen';

const message = 'Hello, Boxen with custom options!';

const options = {
  padding: 1,           // 内部边距
  margin: 1,            // 外部边距
  borderStyle: 'double',// 边框类型（round、double、classic 等）
  borderColor: 'cyan',  // 边框颜色（支持16进制、CSS颜色名称等）
  backgroundColor: 'magenta'
};

console.log(boxen(message, options));

使用场景

  1. CLI 欢迎界面
    在命令行工具启动时，用一个漂亮的方框展示欢迎信息或版本号，让用户对 CLI 有直观的第一印象。
  2. 错误或警告提示
    当检测到错误或潜在风险时，用醒目的红色边框输出提示，避免用户忽略关键消息。
  3. 命令行教程或示例
    在命令行教程中，可以使用 Boxen 来突出重点，增强可读性。
  4. 与其他库结合
    可以配合 chalk 等终端着色库，为文字部分设置更多颜色或格式，让方框内外都变得更丰富。
  5. 动态内容
    结合外部数据或交互结果，把提示信息随时更新在方框中，例如显示当前任务进度或状态。

Boxen API 整理 🔥

参数详解

参数类型默认值可选值/格式说明注意事项
borderColorstring-'black'/'red'/'green'/'yellow'/'blue'/'magenta'/'cyan'/'white'/'gray' 或 HEX 值边框颜色需终端支持 ANSI 颜色
borderStylestring | object'single''single'/'double'/'round'/'bold'/'singleDouble'/'doubleSingle'/'classic'/'arrow'/'none'
或自定义对象：
{ topLeft, topRight, bottomLeft, bottomRight, top, bottom, left, right }		边框样式箭头样式在部分终端可能显示异常
dimBorderbooleanfalsetrue/false降低边框透明度依赖终端透明度支持
titlestring-任意字符串顶部标题文字标题过长会自动扩展框体宽度
titleAlignmentstring'left''left'/'center'/'right'标题对齐方式需配合 title 参数使用
widthnumber-正整数固定框体宽度禁用终端自动换行，可能导致显示异常
heightnumber-正整数固定框体高度内容超长会被裁剪
fullscreenboolean | function-true/false
或 (width, height) => [width, height]		全屏模式回调函数需返回宽高数组
paddingnumber | object0数字或对象：
{ top, right, bottom, left }		内边距数字类型时左右边距是上下的3倍
marginnumber | object0数字或对象：
{ top, right, bottom, left }		外边距数字类型时左右边距是上下的3倍
floatstring'left''left'/'center'/'right'浮动定位依赖终端可用空间
backgroundColorstring-同 borderColor背景颜色需终端支持背景色渲染
textAlignmentstring'left''left'/'center'/'right'文本对齐方式基于最长行进行对齐

预定义边框样式

样式名称效果示例Unicode 特性
'single'┌───┐
│foo│
└───┘		标准方框
'double'╔═══╗
║foo║
╚═══╝		双线边框
'round'╭───╮
│foo│
╰───╯		圆角设计
'bold'┏━━━┓
┃foo┃
┗━━━┛		加粗线条
'singleDouble╓───╖
║foo║
╙───╜		上下单线+左右双线
'doubleSingle╒═══╕
│foo│
╘═══╛		上下双线+左右单线
'classic'+---+
|foo|
+---+		ASCII 字符
'arrow'↘↓↓↓↙
→foo←
↗↑↑↑↖		箭头装饰（部分终端支持）

特殊参数

fullscreen 回调示例

(width, height) => [newWidth, newHeight]
// 典型应用：保留底部状态栏
(width, height) => [width, height - 2]

padding/margin 对象格式

// 非对称边距设置
{
  top: 1,
  right: 3,
  bottom: 1,
  left: 3
}

我的效果与代码

image.png

import boxen, { type Options as BoxenOptions } from 'boxen';
import gradientString from 'gradient-string';

const version = '0.2.1'; // 可以从 package.json 中动态获取
const buildTime = new Date().toLocaleString(); // 获取当前时间作为打包时间

const welcomeMessage = gradientString('#0087FF', 'magenta').multiline(
  `Welcome to Coco App!\nVersion: ${version}\nBuild Time: ${buildTime}`
);

const boxenOptions: BoxenOptions = {
  borderColor: '#0087FF',
  borderStyle: 'round',
  margin: 2,
  padding: 1,
  title: `✨  Coco AI  ✨ `,
  titleAlignment: 'center',
};

console.log(boxen(welcomeMessage, boxenOptions));

小结

Boxen 作为一个轻量级的 CLI 美化工具，可以帮助你在命令行里更好地展示关键信息，打造更加友好、专业的交互体验。通过灵活的配置项和简单的 API，你可以轻松定制边框样式、颜色、背景色等，让终端输出不再单调。

如果你对 CLI 用户体验感兴趣，赶快试试 Boxen 吧，让你的命令行工具更显个性与专业感！

参考链接

avatar
文章
阅读
粉丝