diff --git a/cc-inspector/cc-plugin.config.ts b/cc-inspector/cc-plugin.config.ts index 32479f9..44928f0 100644 --- a/cc-inspector/cc-plugin.config.ts +++ b/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", }, diff --git a/cc-inspector/src/core/types.ts b/cc-inspector/src/core/types.ts index 8945550..391ee96 100644 --- a/cc-inspector/src/core/types.ts +++ b/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; diff --git a/cc-inspector/src/scripts/inject/index.ts b/cc-inspector/src/scripts/inject/index.ts index b2787a2..694d3e9 100644 --- a/cc-inspector/src/scripts/inject/index.ts +++ b/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(); diff --git a/cc-inspector/src/scripts/terminal.ts b/cc-inspector/src/scripts/terminal.ts index a4a1ffa..fdfdcab 100644 --- a/cc-inspector/src/scripts/terminal.ts +++ b/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'; diff --git a/cc-inspector/src/views/devtools/store.ts b/cc-inspector/src/views/devtools/store.ts index ca68a8a..4aa0d74 100644 --- a/cc-inspector/src/views/devtools/store.ts +++ b/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); diff --git a/cc-inspector/src/views/devtools/test/test.vue b/cc-inspector/src/views/devtools/test/test.vue index 97141c9..07d4297 100644 --- a/cc-inspector/src/views/devtools/test/test.vue +++ b/cc-inspector/src/views/devtools/test/test.vue @@ -1,12 +1,13 @@ @@ -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",