Blessed小部件生成器Skill blessed-widget-generator

---

name: blessed-widget-generator description: 为Node.js终端用户界面生成blessed小部件，包括盒子、列表、表单和仪表板布局。 allowed-tools: Read, Write, Edit, Bash, Glob, Grep

Blessed 小部件生成器

为Node.js终端用户界面生成blessed小部件。

功能

• 生成blessed小部件定义
• 创建仪表板布局
• 设置交互式表单
• 实现自定义组件
• 配置样式和边框
• 创建事件处理模式

使用场景

在以下情况下调用此技能：

• 使用Node.js构建终端仪表板
• 创建复杂的TUI布局
• 实现监控界面
• 设置blessed项目结构

输入参数

参数	类型	是否必需	描述
projectName	字符串	是	项目名称
layout	字符串	否	布局类型（仪表板、表单、列表）
widgets	数组	否	小部件定义

生成模式

仪表板布局

const blessed = require('blessed');
const contrib = require('blessed-contrib');

// 创建屏幕
const screen = blessed.screen({
  smartCSR: true,
  title: '系统仪表板',
});

// 创建网格布局
const grid = new contrib.grid({
  rows: 12,
  cols: 12,
  screen: screen,
});

// CPU折线图
const cpuLine = grid.set(0, 0, 4, 6, contrib.line, {
  style: { line: 'yellow', text: 'green', baseline: 'black' },
  xLabelPadding: 3,
  xPadding: 5,
  showLegend: true,
  label: 'CPU使用率',
});

// 内存仪表
const memGauge = grid.set(0, 6, 4, 6, contrib.gauge, {
  label: '内存使用率',
  stroke: 'green',
  fill: 'white',
});

// 日志框
const logBox = grid.set(4, 0, 4, 12, contrib.log, {
  fg: 'green',
  selectedFg: 'green',
  label: '日志',
});

// 进程表
const processTable = grid.set(8, 0, 4, 12, contrib.table, {
  keys: true,
  fg: 'white',
  selectedFg: 'white',
  selectedBg: 'blue',
  interactive: true,
  label: '进程',
  columnSpacing: 4,
  columnWidth: [10, 30, 10, 10],
});

// 更新数据
function updateDashboard() {
  // CPU数据
  cpuLine.setData([{
    title: 'CPU',
    x: ['1', '2', '3', '4', '5'],
    y: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100],
  }]);

  // 内存
  memGauge.setPercent(Math.random() * 100);

  // 日志
  logBox.log(`[${new Date().toISOString()}] 系统事件`);

  // 进程
  processTable.setData({
    headers: ['PID', '名称', 'CPU', '内存'],
    data: [
      ['1234', 'node', '2.5%', '150MB'],
      ['5678', 'chrome', '15.2%', '500MB'],
    ],
  });

  screen.render();
}

// 按键绑定
screen.key(['escape', 'q', 'C-c'], () => process.exit(0));

// 更新间隔
setInterval(updateDashboard, 1000);
updateDashboard();

screen.render();

表单小部件

const blessed = require('blessed');

const screen = blessed.screen({
  smartCSR: true,
  title: '配置表单',
});

const form = blessed.form({
  parent: screen,
  keys: true,
  left: 'center',
  top: 'center',
  width: 60,
  height: 20,
  border: { type: 'line' },
  style: { border: { fg: 'blue' } },
});

// 输入字段
blessed.text({
  parent: form,
  top: 1,
  left: 2,
  content: '用户名：',
});

const usernameInput = blessed.textbox({
  parent: form,
  name: 'username',
  top: 1,
  left: 12,
  height: 1,
  width: 40,
  inputOnFocus: true,
  style: { fg: 'white', bg: 'black' },
});

// 密码字段
blessed.text({
  parent: form,
  top: 3,
  left: 2,
  content: '密码：',
});

const passwordInput = blessed.textbox({
  parent: form,
  name: 'password',
  top: 3,
  left: 12,
  height: 1,
  width: 40,
  censor: true,
  inputOnFocus: true,
  style: { fg: 'white', bg: 'black' },
});

// 提交按钮
const submitBtn = blessed.button({
  parent: form,
  name: 'submit',
  content: ' 提交 ',
  top: 6,
  left: 'center',
  shrink: true,
  style: {
    fg: 'white',
    bg: 'blue',
    focus: { bg: 'green' },
  },
});

submitBtn.on('press', () => {
  form.submit();
});

form.on('submit', (data) => {
  console.log('表单数据：', data);
  process.exit(0);
});

screen.key(['escape', 'q'], () => process.exit(0));
screen.render();

依赖项

{
  "dependencies": {
    "blessed": "^0.1.81",
    "blessed-contrib": "^4.10.1"
  }
}

目标流程

• tui-application-framework
• dashboard-monitoring-tui
• interactive-form-implementation