实现灵活控制控制台颜色的输出

cc-inspector/src/scripts/inject/index.ts

@@ -24,7 +24,7 @@ class CCInspector {
       }
     }, 300);
   }
-  private terminal = new Terminal('Inject ', 'blue', 'gray');
+  private terminal = new Terminal('Inject ');
   init() {
     console.log(...this.terminal.init());
     this.watchIsCocosGame();

cc-inspector/src/scripts/terminal.ts

@@ -1,3 +1,59 @@
+export class Chunk {
+  /**
+   * 显示的值
+   */
+  value: string = "";
+  /**
+   * 是否换行
+   */
+  private newline: boolean = false;
+  /**
+   * 显示的样式
+   */
+  style: string[] = [];
+  constructor(v: string, newline: boolean = false) {
+    this.value = v
+    this.newline = newline
+  }
+  color(c: string) {
+    this.style.push(`color:${c}`);
+    return this;
+  }
+  background(c: string) {
+    this.style.push(`background:${c}`);
+    return this;
+  }
+  padding(c: string) {
+    this.style.push(`padding:${c}`);
+    return this;
+  }
+  fontwight(c: string) {
+    this.style.push(`font-weight:${c}`);
+    return this;
+  }
+  bold() {
+    return this.fontwight("bold");
+  }
+  margin(c: string) {
+    this.style.push(`margin:${c}`);
+    return this;
+  }
+  marginLeft(c: string) {
+    this.style.push(`margin-left:${c}`);
+    return this;
+  }
+  marginRight(c: string) {
+    this.style.push(`margin-right:${c}`);
+    return this;
+  }
+  toValue() {
+    return `%c${this.value}${this.newline ? '\n' : ''}`
+  }
+  toStyle() {
+    return this.style.join(';')
+  }
+}
+
 export class Terminal {
   /**
    * 标签
@@ -10,7 +66,7 @@ export class Terminal {
   /**
    * 标签的颜色
    */
-  tagColor = 'red';
+  tagColor = 'blue';
   /**
    * 标签的背景色
    */
@@ -19,24 +75,50 @@ export class Terminal {
    * 日志文本的颜色
    */
   txtColor = 'black';
-
-  constructor(tag: string, tagColor: string = 'red', tagBackground: string = 'yellow') {
-    this.tagColor = tagColor;
-    this.tagBackground = tagBackground;
+  private chunks: Chunk[] = [];
+  constructor(tag: string) {
     this.tag = tag;
   }
   init(): string[] {
     this.txtColor = 'black';
     this.subTag = "init";
-    return this.log(``);
+    return this.log();
   }
-  public log(message: string, newline: boolean = false): string[] {
-    return [
-      `*%c${this.tag}%c${this.subTag}%c${newline ? '\n' : ''}${message}`,
-      `color:${this.tagColor};background:${this.tagBackground};padding:0 4px`,
-      `color:white;background:black;padding:0 3px`,
-      `color:${this.txtColor};background:#e6e6e6;margin-left:5px`
-    ];
+
+  public log(message: string = "", newline: boolean = false): string[] {
+    const txt = new Chunk(message).color(this.txtColor).background('#e6e6e6').marginLeft("5px")
+    return this.doChunk(newline, [txt]);
+  }
+  public chunk(chunk: Chunk[]) {
+    this.subTag = "message";
+    return this.doChunk(false, chunk)
+  }
+  private doChunk(newline: boolean = false, chunks: Chunk[]) {
+    this.chunks = [];
+    const tag = new Chunk(this.tag).color(this.tagColor).background(this.tagBackground).padding("0 4px")
+    this.chunks.push(tag);
+
+    const subTag = new Chunk(this.subTag, newline).color(this.tagBackground).background(this.tagColor).padding("0 3px")
+    this.chunks.push(subTag);
+
+    chunks.forEach((c) => {
+      this.chunks.push(c);
+    })
+
+    let head = '*';
+    for (let i = 0; i < this.chunks.length; i++) {
+      const chunk = this.chunks[i];
+      head += chunk.toValue();
+    }
+    const ret = [head];
+    this.chunks.forEach((chunk) => {
+      ret.push(chunk.toStyle());
+    })
+    this.reset();
+    return ret;
+  }
+  private reset() {
+    this.subTag = "";
   }
   public blue(message: string): string[] {
     this.txtColor = 'blue';