This commit is contained in:
xu_yanfeng 2024-12-09 16:23:58 +08:00
parent 889722c413
commit 4da068e358
25 changed files with 127 additions and 249 deletions

3
cc-inspector/.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
node_modules/
web/
.yalc/

View File

@ -5,11 +5,13 @@
"[typescript]": {
"editor.tabSize": 2,
"editor.formatOnSave": true,
"prettier.printWidth": 800,
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
"editor.tabSize": 2,
"prettier.printWidth": 800
},
"files.refactoring.autoSave": false,
"search.exclude": {
@ -18,7 +20,17 @@
"**/*.code-search": true,
"chrome": true,
"yarn-error.log": true,
"yarn.lock": true
"yarn.lock": true,
".yalc/": true
},
"files.exclude": {
".yalc/": false,
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/Thumbs.db": true
},
"prettier.printWidth": 1000
}

View File

@ -33,7 +33,7 @@ export class PluginEvent {
/**
*
*/
target: Page | null = null;
target: Page | null = null;
static check(event: PluginEvent, source: Page, target: Page) {
return event && source && target && event.source === source && event.target === target;

View File

@ -1,19 +1,19 @@
import pluginConfig from '../cc-plugin.config';
import CCP from 'cc-plugin/src/ccp/entry-main';
import { BuilderOptions } from 'cc-plugin/src/declare'
import { BuilderOptions } from 'cc-plugin/src/declare';
import pluginConfig from '../cc-plugin.config';
CCP.init(pluginConfig, {
load: () => {
console.log('plugin load')
},
builder: {
onAfterBuild(target: BuilderOptions) {
load: () => {
console.log('plugin load')
},
builder: {
onAfterBuild(target: BuilderOptions) {
}
},
messages: {
showPanel() {
CCP.Adaptation.Panel.open('self.main')
}
}
},
messages: {
showPanel() {
CCP.Adaptation.Panel.open('self.main')
}
}
})

View File

@ -1,15 +1,15 @@
import { createApp } from 'vue'
import App from './index.vue'
import CCP from 'cc-plugin/src/ccp/entry-render';
import pluginConfig from '../../cc-plugin.config'
import ccui from '@xuyanfeng/cc-ui';
import '@xuyanfeng/cc-ui/dist/ccui.css';
import '@xuyanfeng/cc-ui/iconfont/iconfont.css';
import CCP from 'cc-plugin/src/ccp/entry-render';
import { createApp } from 'vue';
import pluginConfig from '../../cc-plugin.config';
import App from './index.vue';
export default CCP.init(pluginConfig, {
ready: function (rootElement: any, args: any) {
const app = createApp(App)
app.use(ccui)
app.mount(rootElement)
}
ready: function (rootElement: any, args: any) {
const app = createApp(App)
app.use(ccui)
app.mount(rootElement)
}
})

View File

@ -5,16 +5,16 @@
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, provide, nextTick } from 'vue';
import PluginConfig from '../../cc-plugin.config';
import ccui from '@xuyanfeng/cc-ui';
import ccui from "@xuyanfeng/cc-ui";
import { defineComponent, nextTick, onMounted, provide, ref } from "vue";
import PluginConfig from "../../cc-plugin.config";
const { CCInput, CCButton } = ccui.components;
export default defineComponent({
name: 'index',
name: "index",
components: { CCButton },
setup(props, { emit }) {
onMounted(() => {
console.log('hi ~~~');
console.log("hi ~~~");
});
const msg = ref(PluginConfig.manifest.name);
const count = ref(0);
@ -23,7 +23,7 @@ export default defineComponent({
count,
onClickBtn() {
count.value++;
console.log('click btn');
console.log("click btn");
},
};
},

View File

@ -1,5 +1,5 @@
import { Msg, Page, PluginEvent } from "../core/types";
import { ChromeConst } from "cc-plugin/src/chrome/const";
import { Msg, Page, PluginEvent } from "../core/types";
// @ts-ignore
// import * as UA from "universal-analytics";
@ -180,7 +180,7 @@ class PortManagement {
}
}
);
chrome.tabs.onActivated.addListener(({ tabId, windowId }) => {});
chrome.tabs.onActivated.addListener(({ tabId, windowId }) => { });
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
// 页面发生刷新,通知重新生成数据
if (changeInfo.status === "complete") {

View File

@ -1,8 +1,8 @@
// content.js 和原始界面共享DOM具有操作dom的能力
// 但是不共享js,要想访问页面js,只能通过注入的方式
import { injectScript } from "../core/util";
import { Msg, Page, PluginEvent } from "../core/types";
import { ChromeConst } from "cc-plugin/src/chrome/const";
import { Msg, Page, PluginEvent } from "../core/types";
import { injectScript } from "../core/util";
injectScript(ChromeConst.script.inject);
class Content {

View File

@ -1,4 +1,6 @@
// eval 注入脚本的代码,变量尽量使用var,后来发现在import之后,let会自动变为var
import { uniq } from "lodash";
import { Msg, Page, PluginEvent } from "../../core/types";
import {
ArrayData,
BoolData,
@ -19,15 +21,13 @@ import {
Vec2Data,
Vec3Data,
} from "../../views/devtools/data";
import { Msg, Page, PluginEvent } from "../../core/types";
import { getValue, trySetValueWithConfig } from "./setValue";
import {
BuildArrayOptions,
BuildImageOptions,
BuildObjectOptions,
BuildVecOptions,
} from "./types";
import { uniq } from "lodash";
import { trySetValueWithConfig, getValue } from "./setValue";
import { isHasProperty } from "./util";
declare const cc: any;

View File

@ -1,4 +1,4 @@
import {isVersion3} from "./util";
import { isVersion3 } from "./util";
interface ConfigItem {
path: string[],

View File

@ -1,10 +1,10 @@
import {ArrayData, ImageData, ObjectData, Vec2Data, Vec3Data} from "../../views/devtools/data";
import { ArrayData, ImageData, ObjectData, Vec2Data, Vec3Data } from "../../views/devtools/data";
export interface BuildObjectOptions {
path: string[];
value: Object;
data: ObjectData;
filterKey:boolean;
filterKey: boolean;
}
export interface BuildArrayOptions {

View File

@ -1,4 +1,4 @@
import {PluginEvent, Page, Msg} from "../../core/types";
import { Msg, Page, PluginEvent } from "../../core/types";
class ConnectBackground {
connect: chrome.runtime.Port | null = null;
@ -9,7 +9,7 @@ class ConnectBackground {
private _initConnect() {
if (chrome && chrome.runtime) {
this.connect = chrome.runtime.connect({name: Page.Devtools});
this.connect = chrome.runtime.connect({ name: Page.Devtools });
this.connect.onDisconnect.addListener(() => {
console.log(`%c[Connect-Dis]`, "color:red;")
this.connect = null;

View File

@ -1,4 +1,4 @@
import { v4 } from "uuid"
import { v4 } from "uuid";
export enum DataType {
Number = 'Number',

View File

@ -1,12 +1,12 @@
import { createApp } from "vue";
import App from "./index.vue";
import CCP from "cc-plugin/src/ccp/entry-render";
import pluginConfig from "../../../cc-plugin.config";
import ccui from "@xuyanfeng/cc-ui";
import "@xuyanfeng/cc-ui/dist/ccui.css";
import "@xuyanfeng/cc-ui/iconfont/iconfont.css";
import CCP from "cc-plugin/src/ccp/entry-render";
import { createApp } from "vue";
import pluginConfig from "../../../cc-plugin.config";
import "../global.less";
import App from "./index.vue";
import { init } from './register-panel';
import "../global.less"
export default CCP.init(pluginConfig, {
ready: function (rootElement: any, args: any) {
init();

View File

@ -68,19 +68,19 @@
</template>
<script lang="ts">
import { defineComponent, reactive, PropType, ref, onMounted, watch, toRaw, nextTick } from "vue";
import properties from "./ui/propertys.vue";
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
import ccui from "@xuyanfeng/cc-ui";
const { CCTree, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
import { ButtonGroupItem } from "@xuyanfeng/cc-ui/types/cc-button-group/const";
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
import { ITreeData } from "@xuyanfeng/cc-ui/types/cc-tree/const";
import { defineComponent, nextTick, onMounted, PropType, reactive, ref, toRaw, watch } from "vue";
import { Msg, Page, PluginEvent } from "../../core/types";
import Bus, { BusMsg } from "./bus";
import { connectBackground } from "./connectBackground";
import { EngineData, FrameDetails, Info, NodeInfoData, ObjectData, ObjectItemRequestData, TreeData } from "./data";
import Bus, { BusMsg } from "./bus";
import SettingsVue from "./ui/settings.vue";
import { RefreshType, settings } from "./settings";
import { ButtonGroupItem } from "@xuyanfeng/cc-ui/types/cc-button-group/const";
import { ITreeData } from "@xuyanfeng/cc-ui/types/cc-tree/const";
import properties from "./ui/propertys.vue";
import SettingsVue from "./ui/settings.vue";
const { CCTree, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
interface FrameInfo {
label: string;
value: number;

View File

@ -1,7 +1,7 @@
import { ChromeConst } from "cc-plugin/src/chrome/const";
import { connectBackground } from "./connectBackground";
import { PluginEvent, Msg, Page } from "../../core/types";
import CCP from "cc-plugin/src/ccp/entry-render";
import { ChromeConst } from "cc-plugin/src/chrome/const";
import { Msg, Page, PluginEvent } from "../../core/types";
import { connectBackground } from "./connectBackground";
export function init() {
if (chrome && chrome.devtools) {
// 对应的是Elements面板的边栏

View File

@ -1,6 +1,6 @@
const Key = "settings";
export const enum RefreshType{
export const enum RefreshType {
Auto = "auto",
Manual = "manual",
}

View File

@ -1,11 +1,6 @@
<template>
<div class="property-group">
<div
class="header"
@click="onClickHeader"
@mouseenter="showLogBtn = true"
@mouseleave="showLogBtn = false"
>
<div class="header" @click="onClickHeader" @mouseenter="showLogBtn = true" @mouseleave="showLogBtn = false">
<div style="margin: 0 5px">
<i v-if="fold" class="iconfont icon_arrow_right"></i>
<i v-if="!fold" class="iconfont icon_arrow_down"></i>
@ -13,35 +8,23 @@
<div style="flex: 1">
{{ group.name }}
</div>
<CCButton
style="margin-right: 10px"
v-show="showLogBtn"
type="success"
@click.stop="onLog"
>
<CCButton style="margin-right: 10px" v-show="showLogBtn" type="success" @click.stop="onLog">
<i class="iconfont icon_print"></i>
</CCButton>
</div>
<div class="content" v-show="!fold">
<ui-prop
v-for="(item, index) in group.data"
:key="index"
:name="item.name"
:value="item.value"
>
</ui-prop>
<ui-prop v-for="(item, index) in group.data" :key="index" :name="item.name" :value="item.value"> </ui-prop>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, PropType } from "vue";
import ccui from "@xuyanfeng/cc-ui";
import { defineComponent, PropType, ref } from "vue";
import Bus, { BusMsg } from "../bus";
import { Group } from "../data";
import UiProp from "./ui-prop.vue";
import Bus, { BusMsg } from "../bus";
import ccui from "@xuyanfeng/cc-ui";
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
ccui.components;
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
export default defineComponent({
name: "property-group",
components: {

View File

@ -1,19 +1,15 @@
<template>
<div id="prop">
<PropertyGroup
v-for="(group, index) in data.group"
:key="index"
:group="group"
></PropertyGroup>
<PropertyGroup v-for="(group, index) in data.group" :key="index" :group="group"></PropertyGroup>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, watch } from "vue";
import UiProp from "./ui-prop.vue";
import Bus, { BusMsg } from "../bus";
import { Group, NodeInfoData } from "../data";
import PropertyGroup from "../ui/property-group.vue";
import Bus, { BusMsg } from "../bus";
import UiProp from "./ui-prop.vue";
export default defineComponent({
components: { PropertyGroup, UiProp },

View File

@ -1,34 +1,22 @@
<template>
<div class="settings">
<settings-prop label="refresh">
<CCSelect
v-model="refreshType"
:data="refreshOptions"
@change="onCommonSave"
style="flex: 1"
>
</CCSelect>
<CCSelect v-model="refreshType" :data="refreshOptions" @change="onCommonSave" style="flex: 1"> </CCSelect>
</settings-prop>
<settings-prop label="refresh time: " v-show="isRefreshAuto()">
<CCInputNumber
style="flex: 1"
:min="100"
v-model="refreshTime"
@change="onCommonSave"
></CCInputNumber>
<CCInputNumber style="flex: 1" :min="100" v-model="refreshTime" @change="onCommonSave"></CCInputNumber>
<span>ms</span>
</settings-prop>
</div>
</template>
<script lang="ts">
import ccui from "@xuyanfeng/cc-ui";
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
import { defineComponent, onMounted, ref, toRaw } from "vue";
import { RefreshType, settings } from "../settings";
import SettingsProp from "./settings-prop.vue";
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
import ccui from "@xuyanfeng/cc-ui";
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
ccui.components;
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
export default defineComponent({
name: "settings",
components: {

View File

@ -1,21 +1,7 @@
<template>
<div id="ui-prop">
<div
class="normal-data"
style="
display: flex;
flex-direction: row;
align-items: center;
min-height: 30px;
margin: 0;
"
>
<div
@mousedown="onPropNameMouseDown"
class="key"
@click="onClickFold"
:style="{ cursor: isArrayOrObject() ? 'pointer' : '' }"
>
<div class="normal-data" style="display: flex; flex-direction: row; align-items: center; min-height: 30px; margin: 0">
<div @mousedown="onPropNameMouseDown" class="key" @click="onClickFold" :style="{ cursor: isArrayOrObject() ? 'pointer' : '' }">
<i
class="data-arrow"
v-if="arrow"
@ -42,67 +28,17 @@
<div v-if="value.isInvalid()" class="invalid">
{{ value.data }}
</div>
<CCInput
v-if="value.isString()"
v-model="value.data"
:disabled="value.readonly"
@change="onChangeValue"
>
</CCInput>
<CCInput
v-if="value.isText()"
type="textarea"
:autosize="{ minRows: 3, maxRows: 5 }"
placeholder="请输入内容"
:disabled="value.readonly"
@change="onChangeValue"
v-model="value.data"
>
</CCInput>
<CCInputNumber
v-if="value.isNumber()"
style="width: 100%; text-align: left"
v-model="value.data"
:step="step"
:disabled="value.readonly"
@change="onChangeValue"
controls-position="right"
></CCInputNumber>
<CCInput v-if="value.isString()" v-model="value.data" :disabled="value.readonly" @change="onChangeValue"> </CCInput>
<CCInput v-if="value.isText()" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入内容" :disabled="value.readonly" @change="onChangeValue" v-model="value.data"> </CCInput>
<CCInputNumber v-if="value.isNumber()" style="width: 100%; text-align: left" v-model="value.data" :step="step" :disabled="value.readonly" @change="onChangeValue" controls-position="right"></CCInputNumber>
<div v-if="value.isVec2() || value.isVec3()" class="vec">
<ui-prop
v-for="(vec, index) in value.data"
:key="index"
:arrow="false"
:value="vec.value"
:name="vec.name"
>
</ui-prop>
<ui-prop v-for="(vec, index) in value.data" :key="index" :arrow="false" :value="vec.value" :name="vec.name"> </ui-prop>
</div>
<CCSelect
v-model="value.data"
:disabled="value.readonly"
:data="getEnumValues(value)"
v-if="value.isEnum()"
style="width: 100%"
@change="onChangeValue"
>
</CCSelect>
<CCCheckBox
v-model="value.data"
v-if="value.isBool()"
:disabled="value.readonly"
@change="onChangeValue"
>
</CCCheckBox>
<CCSelect v-model="value.data" :disabled="value.readonly" :data="getEnumValues(value)" v-if="value.isEnum()" style="width: 100%" @change="onChangeValue"> </CCSelect>
<CCCheckBox v-model="value.data" v-if="value.isBool()" :disabled="value.readonly" @change="onChangeValue"> </CCCheckBox>
<div class="color" v-if="value.isColor()">
<CCColor
style="position: absolute"
:disabled="value.readonly"
v-model="value.data"
@change="onChangeValue"
>
</CCColor>
<CCColor style="position: absolute" :disabled="value.readonly" v-model="value.data" @change="onChangeValue"> </CCColor>
<div class="hex" :style="{ color: colorReverse(value.data) }">
{{ value.data }}
</div>
@ -110,21 +46,8 @@
<div v-if="value.isImage()" class="image-property">
<!-- TODO: 适配 -->
<div v-if="value.isImage() || true" placement="top" trigger="hover">
<div
style="
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
"
>
<img
:src="value.data"
alt="图片"
style="max-width: 100px; max-height: 100px; object-fit: contain"
/>
<div style="width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center">
<img :src="value.data" alt="图片" style="max-width: 100px; max-height: 100px; object-fit: contain" />
</div>
<img :src="value.data" style="height: 36px" alt="图片" />
</div>
@ -145,50 +68,29 @@
<div v-if="value.isObject() && fold" class="objectDesc">
{{ value.data }}
</div>
<div v-if="value.isArray()" class="array">
Array({{ value.data.length }})
</div>
<div v-if="value.isArray()" class="array">Array({{ value.data.length }})</div>
<div class="slot" v-if="false">
<slot></slot>
</div>
</div>
</div>
<div v-if="isArrayOrObject()">
<div
v-show="!fold && subData"
style="display: flex; flex-direction: column"
>
<ui-prop
v-for="(arr, index) in subData"
:key="index"
:indent="indent + 1"
:value="arr.value"
:name="getName(value.isArray(), arr)"
>
</ui-prop>
<div v-show="!fold && subData" style="display: flex; flex-direction: column">
<ui-prop v-for="(arr, index) in subData" :key="index" :indent="indent + 1" :value="arr.value" :name="getName(value.isArray(), arr)"> </ui-prop>
</div>
</div>
</div>
</template>
<script lang="ts">
import {
defineComponent,
ref,
toRaw,
watch,
onUnmounted,
onMounted,
PropType,
} from "vue";
import { DataType, EngineData, EnumData, Info, Property } from "../data";
import { connectBackground } from "../connectBackground";
import ccui from "@xuyanfeng/cc-ui";
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
import { defineComponent, onMounted, onUnmounted, PropType, ref, toRaw, watch } from "vue";
import { Msg } from "../../../core/types";
import Bus, { BusMsg } from "../bus";
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
import ccui from "@xuyanfeng/cc-ui";
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
ccui.components;
import { connectBackground } from "../connectBackground";
import { DataType, EngineData, EnumData, Info, Property } from "../data";
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
export default defineComponent({
name: "UiProp",
@ -323,9 +225,7 @@ export default defineComponent({
let uuid = value.path[0];
let key = value.path[1]; // todo key
if (uuid && key) {
chrome.devtools.inspectedWindow.eval(
`window.CCInspector.logValue('${uuid}','${key}')`
);
chrome.devtools.inspectedWindow.eval(`window.CCInspector.logValue('${uuid}','${key}')`);
}
}
},

View File

@ -1,10 +1,10 @@
import { createApp } from "vue";
import App from "./index.vue";
import CCP from "cc-plugin/src/ccp/entry-render";
import pluginConfig from "../../../cc-plugin.config";
import ccui from "@xuyanfeng/cc-ui";
import "@xuyanfeng/cc-ui/dist/ccui.css";
import "@xuyanfeng/cc-ui/iconfont/iconfont.css";
import CCP from "cc-plugin/src/ccp/entry-render";
import { createApp } from "vue";
import pluginConfig from "../../../cc-plugin.config";
import App from "./index.vue";
export default CCP.init(pluginConfig, {
ready: function (rootElement: any, args: any) {

View File

@ -5,7 +5,7 @@
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, provide, nextTick } from "vue";
import { defineComponent, nextTick, onMounted, provide, ref } from "vue";
export default defineComponent({
name: "options",
components: {},

View File

@ -1,12 +1,12 @@
import { createApp } from "vue";
import App from "./index.vue";
import CCP from "cc-plugin/src/ccp/entry-render";
import pluginConfig from "../../../cc-plugin.config";
import ccui from "@xuyanfeng/cc-ui";
import "@xuyanfeng/cc-ui/dist/ccui.css";
import "@xuyanfeng/cc-ui/iconfont/use.css";
import "@xuyanfeng/cc-ui/iconfont/iconfont.css";
import "../global.less"
import "@xuyanfeng/cc-ui/iconfont/use.css";
import CCP from "cc-plugin/src/ccp/entry-render";
import { createApp } from "vue";
import pluginConfig from "../../../cc-plugin.config";
import "../global.less";
import App from "./index.vue";
export default CCP.init(pluginConfig, {
ready: function (rootElement: any, args: any) {
const app = createApp(App);

View File

@ -24,10 +24,7 @@
<a href="https://tidys.gitee.io/doc/#" target="_blank">
<img class="icon" src="./res/tiezi.png" alt="" />
</a>
<a
href="https://github.com/tidys/CocosCreatorPlugins/tree/master/CocosCreatorInspector"
target="_blank"
>
<a href="https://github.com/tidys/CocosCreatorPlugins/tree/master/CocosCreatorInspector" target="_blank">
<img class="icon" src="./res/github.png" alt="" />
</a>
<a href="https://jq.qq.com/?_wv=1027&k=5SdPdy2" target="_blank">
@ -39,12 +36,11 @@
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, provide, nextTick } from "vue";
import ccui from "@xuyanfeng/cc-ui";
import CCP from "cc-plugin/src/ccp/entry-render";
import { ChromeConst } from "cc-plugin/src/chrome/const";
import ccui from "@xuyanfeng/cc-ui";
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
ccui.components;
import { defineComponent, nextTick, onMounted, provide, ref } from "vue";
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
export default defineComponent({
name: "popup",
components: {