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

cc-inspector/cc-plugin.config.ts

@@ -49,7 +49,7 @@ const manifest: CocosPluginManifest = {
     view_devtools: "src/views/devtools/index.ts",
     view_options: "src/views/options/index.ts",
     view_popup: "src/views/popup/index.ts",
-    script_background: "src/scripts/background.ts",
+    script_background: "src/scripts/background/index.ts",
     script_content: "src/scripts/content.ts",
     script_inject: "src/scripts/inject/index.ts",
   },

cc-inspector/src/core/types.ts

@@ -1,3 +1,5 @@
+import { Chunk } from "../scripts/terminal";
+
 export enum Page {
   None = "None",
   Inject = "Inject",
@@ -106,7 +108,15 @@ export class PluginEvent {
   static finish(event: PluginEvent) {
     event.source = event.target = null;
   }
-
+  toChunk(): Chunk[] {
+    return [
+      new Chunk(this.msg).color("white").background("black").margin('0 0 0 5px').padding("0 6px"),
+      new Chunk(this.source).color('white').background("red").padding('0 4px').margin('0 0 0 0px'),
+      new Chunk('=>').color('black').background("yellow").bold(),
+      new Chunk(this.target, true).color("white").background("green").padding('0 4px'),
+      new Chunk(JSON.stringify(this.data))
+    ];
+  }
   constructor(source: Page, target: Page, msg: Msg, data?: any) {
     if (PageInclude(target)) {
       this.source = source;

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';

cc-inspector/src/views/devtools/store.ts

@@ -15,6 +15,10 @@ export class ConfigData {
    * 刷新间隔时间，单位ms
    */
   refreshTime: number = 500;
+  /**
+   * 展开测试的section
+   */
+  expandTest: boolean = false;
 }
 
 export const appStore = defineStore("app", () => {
@@ -26,6 +30,7 @@ export const appStore = defineStore("app", () => {
       const data = profile.load(`${pluginConfig.manifest.name}.json`) as ConfigData;
       config.value.refreshType = data.refreshType || RefreshType.Manual;
       config.value.refreshTime = data.refreshTime || 500;
+      config.value.expandTest = !!data.expandTest;
     },
     save() {
       const cfg = toRaw(config.value);

cc-inspector/src/views/devtools/test/test.vue

@@ -1,12 +1,13 @@
 <template>
   <div v-if="show" class="test">
-    <CCSection name="功能测试" :expand="false">
+    <CCSection name="功能测试" :expand="config.expandTest" @change="onExpandTest">
       <CCButton @click="onClickHasCocosGame">Has CocosGame</CCButton>
       <CCButton @click="onClickNoCocosGame">No CocosGame</CCButton>
       <CCButton @click="onTestTree">init tree data</CCButton>
       <CCButton @click="onFrames">test frame</CCButton>
       <CCButton @click="onTestNodeInfo">test node info</CCButton>
       <CCButton @click="onNull">test null</CCButton>
+      <CCButton @click="onTerminal">onTerminal</CCButton>
     </CCSection>
   </div>
 </template>
@@ -16,8 +17,11 @@ import { ITreeData } from "@xuyanfeng/cc-ui/types/cc-tree/const";
 import { defineComponent, ref } from "vue";
 import { Msg, Page, PluginEvent } from "../../../core/types";
 import { bridge } from "../bridge";
+import { appStore, RefreshType } from "../store";
+import { storeToRefs } from "pinia";
 import { FrameDetails, Group, Info, InvalidData, NodeInfoData, TreeData } from "../data";
 import { testServer, TestServer } from "./server";
+import { Terminal } from "../../../scripts/terminal";
 const { CCButton, CCSection } = ccui.components;
 export default defineComponent({
   name: "test",
@@ -27,6 +31,7 @@ export default defineComponent({
     isCocosGame: { type: Boolean, default: false },
   },
   setup(props, { emit }) {
+    const { config } = storeToRefs(appStore());
     const show = ref(__DEV__);
     // 测试发送的是纯数据
     const testData = {
@@ -55,13 +60,32 @@ export default defineComponent({
       ],
     };
     return {
+      config,
       show,
+      onExpandTest(v: boolean) {
+        console.log(v);
+        config.value.expandTest = v;
+        appStore().save();
+      },
       onClickHasCocosGame() {
         emit("validGame", true);
       },
       onClickNoCocosGame() {
         emit("validGame", false);
       },
+      onTerminal() {
+        const t = new Terminal("flag");
+        const event = new PluginEvent(Page.Background, Page.Background, Msg.NodeInfo, "");
+        console.log(...t.message("1"));
+        console.log(...t.log("newline", true));
+        console.log(...t.log("oneline", false));
+        console.log(...t.disconnect("disconnect"));
+        console.log(...t.connect("connect"));
+        console.log(...t.red("red"));
+        console.log(...t.green("green"));
+        console.log(...t.blue("blue"));
+        console.log(...t.chunk(event.toChunk()));
+      },
       onTestTree() {
         const data: TreeData = {
           id: "1",