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

前言

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

发现一个不错的小工具，所以在此也给大家推荐一下，它就是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 整理 🔥

参数详解

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

我的效果与代码

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 吧，让你的命令行工具更显个性与专业感！

参考链接

• www.npmjs.com/package/box...
• github.com/sindresorhu...