NodeJS 未正确清除Typescript控制台行

ruarlubt  于 2023-08-04  发布在  Node.js
关注(0)|答案(1)|浏览(134)

我正在为一个cli应用程序写一个进度条。一切都很好,但在清除线路时有一个问题。我必须显示某些操作的执行状态。
我的库代码:

import chalk from 'chalk';

export default class ProgressBar {
  total: number;
  current: number = 0;

  barLength = 20;

  progressList: string[] = [];

  previousText = '';

  constructor(total: number, barLength = 20, progressList: string[] = []) {
    this.total = total;

    this.barLength = barLength;

    this.progressList = progressList;
  }

  updateTotal(total: number) {
    this.total = total;
  }

  updateCurrent(current: number) {
    this.current = current;

    this.render();
  }

  render() {
    const active = Math.floor((this.current / this.total) * this.barLength);

    const bar =
      chalk.bgGreenBright(' '.repeat(active)) +
      chalk.bgWhiteBright(' '.repeat(this.barLength - active));
    const progress = `${this.current}/${this.total}`;
    const name = this.progressList[this.current - 1] ?? 'N/A';
    const percentage = Math.floor((this.current / this.total) * 100)
      .toString()
      .padStart(3, '0') + '%';

    const text = `${bar} ${progress} [${percentage}]\nProgress: ${name}`;

    this.clearLines(this.previousText, text);
    this.previousText = text;

    process.stdout.write(text);
  }

  end() {
    const bar = chalk.bgGreenBright(' '.repeat(this.barLength));
    const progress = `${this.total}/${this.total}`;
    const percentage = '100%';

    const text = `${bar} ${progress} [${percentage}]\nProgress: Ended`;
    this.clearLines(this.previousText, text);
    this.previousText = text;

    process.stdout.write(text);
  }

  clearLines = (prevText: string, currText: string) => {
    const prevLines = prevText.split('\n').length;
    const currLines = currText.split('\n').length;
    const linesToClear = Math.max(prevLines - currLines + 1, 0);

    for (let i = 0; i < linesToClear; i++) {
      process.stdout.moveCursor(0, -1);
      process.stdout.clearLine(1);
    }
    process.stdout.cursorTo(0);
  };
}

字符串
我的主代码:

import fs from 'node:fs';
import path from 'node:path';
import ASS from './classes/ASS';
import ProgressBar from './classes/ProgressBar';

console.log('\n');

const progressBar = new ProgressBar(4, 20, [
    'Importing file',
    'Reading file',
    'Initing ASS Parser Class',
    'Waiting a 5 seconds'
]);

; (async () => {
    progressBar.updateCurrent(0);
    const file = path.join(__dirname, 'files/example.ass');

    progressBar.updateCurrent(1);
    const content = fs.readFileSync(file, 'utf-8');

    progressBar.updateCurrent(2);
    const ass = new ASS(content);

    progressBar.updateCurrent(3);
    await new Promise(res => setTimeout(res, 5000));

    progressBar.end();

})();


通常我会得到这样的输出:

的数据
但奇怪的是,我得到了以下样式的输出,因为错误地删除了:

bvk5enib

bvk5enib1#

我解决了更新的问题:(感谢AKX

export default class ProgressBar {
  // ...
  end() {
    const bar = chalk.bgGreenBright(' '.repeat(this.barLength));
    const progress = `${this.total}/${this.total}`;
    const percentage = '100%';

    const text = `${bar} ${progress} [${percentage}]\nProgress: Ended`
    this.clearLines(this.previousText, text);

    process.stdout.write(text.padEnd(this.previousText.length, ' '));
    this.previousText = text;
  }
  // ...
}

字符串

相关问题