企业官网建设流程全解析

figures实战教程：10个技巧打造高颜值CLI界面——进度条、表格、提示符与日志符号

【免费下载链接】figuresUnicode symbols with fallbacks for older terminals项目地址: https://gitcode.com/gh_mirrors/fi/figures

figures是一个专为 Node.js 命令行工具打造的 Unicode 符号库，核心功能是为老旧终端提供符号回退（fallback）：在支持 Unicode 的终端显示精致的✔，在不支持的终端自动降级为√，让你的 CLI 进度条、表格、提示符与日志符号在任何环境下都保持美观。本文用 10 个实用技巧带你快速上手。

为什么需要 figures？

Windows 控制终端（CMD）等旧终端只支持有限的字符集，直接打印✔、╔═╗这类符号可能会出现乱码。figures 通过 is-unicode-supported 检测终端能力，一次性解决跨平台显示问题——这也是它被众多知名 CLI 工具依赖的原因。

快速安装：一条命令搞定

npm install figures

需要 Node.js >= 18（见 package.json）。如果需要浏览源码，可克隆仓库：

git clone https://gitcode.com/gh_mirrors/fi/figures

技巧1：用默认导出，符号自动适配终端 🎯

最常用的方式——导入后直接取用，figures 会根据终端能力自动选择主符号或回退符号（核心逻辑见 index.js）：

import figures from 'figures'; console.log(`${figures.tick} 构建成功`); // Unicode 终端: ✔ 构建成功 // 老旧终端: √ 构建成功

技巧2：日志符号——4 个符号搞定日志等级

日志是 CLI 的脸面。figures 内置了日志等级符号，配合颜色库可快速做出log-symbols风格的效果：

console.log(`${figures.warning} 磁盘空间不足`);

技巧3：用方块渐变画进度条

figures 提供 4 级灰度的方块符号，是绘制进度条的绝佳原料（定义见 index.js）：

• squareDarkShade→▓
• squareMediumShade→▒
• squareLightShade→░
• square→█（实心，表示已完成部分）

拼接即可得到渐变进度条，例如████▓▒░ 75%，比纯数字更有质感。

技巧4：用制表线符号搭高颜值表格 📊

figures 内置了 100+ 种制表线（box-drawing）符号，粗细、虚实、双边框一应俱全。用"双线 + 粗线"组合可以做出精致表格：

╔══════════════════╗ ║ 部署任务状态 ║ ╚══════════════════╝ ├────────┬─────────┤ │ 环境 │ 状态 │ ├────────┼─────────┤ │ prod │ ✔ │ └────────┴─────────┘

对应符号：lineDownDoubleRightDouble（╔）、line（─）、lineVertical（│）、lineUpDownLeft（├）。完整符号对照表见 readme.md。

技巧5：提示符用 pointer，告别生硬的>

命令行提示符是交互的第一步。figures 提供了更优雅的指针符号：

• figures.pointer→❯（老旧终端回退为>，完全兼容）
• figures.pointerSmall→›

process.stdout.write(`${figures.pointer} 请输入指令：`); // ❯ 请输入指令：

技巧6：单选与复选框——命令行表单利器

做交互式命令行时，figures自带整套表单控件符号，无需自己拼字符：

console.log(`${figures.checkboxOn} 启用日志`); console.log(`${figures.checkboxOff} 自动部署`);

技巧7：箭头与三角形——导航 UI 的点睛之笔

交互式菜单、分页导航都离不开方向符号：

• arrowUp/arrowDown/arrowLeft/arrowRight→↑ ↓ ← →
• triangleLeft◀与triangleRight▶表示"上一页/下一页"
• triangleUpSmall▴/triangleDownSmall▾表示下拉展开/收起

配合技巧5的pointer，就能画出一个高颜值的上下选择菜单。

技巧8：replaceSymbols() 一键批量替换字符串

如果你写死了 Unicode 符号（比如在常量模板里），可以让replaceSymbols在老终端上自动降级（实现见 index.js）：

import {replaceSymbols} from 'figures'; console.log(replaceSymbols('✔︎ check')); // Unicode 终端: ✔︎ check // 老旧终端: √ check

它只会替换特殊符号，普通字符原样保留，测试用例见 test.js。

技巧9：强制指定符号集——mainSymbols 与 fallbackSymbols

默认导出会"智能选择"，但有时你需要绝对确定：

• mainSymbols：无论终端如何，永远输出 Unicode 主符号（如✔）
• fallbackSymbols：永远输出回退符号（如√）

两者均带完整 TypeScript 类型（见 index.d.ts），适合用于生成截图、测试断言等需要确定输出的场景。

技巧10：注意终端兼容性清单

大部分主流终端都完美支持，但有三个终端未被官方支持：xterm、Linux Terminal (kernel)、cmder——它们能显示大部分但无法显示全部符号（详见 readme.md）。面向用户发布前，建议在 CI 里对目标终端跑一遍符号渲染测试。

总结：把 figures 放进你的 CLI 工具箱

figures 用极小的体积（核心代码仅一个 index.js）换来了跨平台一致的视觉体验。记住这 10 个技巧的组合拳：默认导出做日志（技巧2）、方块渐变做进度条（技巧3）、制表线做表格（技巧4）、pointer 做提示符（技巧5），你的命令行工具颜值立刻上一个台阶。🚀

【免费下载链接】figuresUnicode symbols with fallbacks for older terminals项目地址: https://gitcode.com/gh_mirrors/fi/figures