CocosPlugin/cc-inspector-chrome
1
0
Fork 0
mirror of https://github.com/tidys/cc-inspector-chrome synced 2025-04-19 08:28:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

简单适配完毕

Browse Source
This commit is contained in:
xu_yanfeng 2024-01-09 15:33:34 +08:00
parent 83798ff401
commit 797d75bb2b
8 changed files with 352 additions and 313 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
cc-inspector/.vscode/settings.json vendored
View File

@ -10,5 +10,13 @@
"[vue]": { "[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode" "editor.defaultFormatter": "esbenp.prettier-vscode"
}, },
"files.refactoring.autoSave": false "files.refactoring.autoSave": false,
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/*.code-search": true,
"chrome": true,
"yarn-error.log": true,
"yarn.lock": true
}
} }

6
cc-inspector/package.json
View File

@ -8,7 +8,7 @@
"@types/lodash": "^4.14.176", "@types/lodash": "^4.14.176",
"@types/node": "16.11.12", "@types/node": "16.11.12",
"@types/uuid": "^8.3.1", "@types/uuid": "^8.3.1",
"@xuyanfeng/cc-ui": "^0.2.14", "@xuyanfeng/cc-ui": "file:.yalc/@xuyanfeng/cc-ui",
"cc-plugin": "file:.yalc/cc-plugin" "cc-plugin": "file:.yalc/cc-plugin"
}, },
"name": "cc-plugin-demo", "name": "cc-plugin-demo",
@ -25,8 +25,8 @@
}, },
"version": "1.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"uuid": "^8.3.2", "lodash": "^4.17.21",
"tiny-emitter": "2.1.0", "tiny-emitter": "2.1.0",
"lodash": "^4.17.21" "uuid": "^8.3.2"
} }
} }

33
cc-inspector/src/views/devtools/data.ts
View File

@ -26,9 +26,20 @@ export class Info {
constructor() { constructor() {
this.id = v4(); this.id = v4();
} }
public isEnum(): boolean { public isEnum(): boolean { return false; }
return false; public isVec2(): boolean { return false; }
} public isVec3(): boolean { return false; }
public isBool(): boolean { return false; }
public isText(): boolean { return false; }
public isString(): boolean { return false; }
public isColor(): boolean { return false; }
public isInvalid(): boolean { return false; }
public isNumber(): boolean { return false; }
public isArrayOrObject(): boolean { return false; }
public isArray(): boolean { return false; }
public isObject(): boolean { return false; }
public isImage(): boolean { return false; }
public isEngine(): boolean { return false; }
} }
export class TextData extends Info { export class TextData extends Info {
@ -36,6 +47,7 @@ export class TextData extends Info {
super(); super();
this.type = DataType.Text; this.type = DataType.Text;
} }
public isText(): boolean { return true; }
} }
export interface ObjectItemRequestData { export interface ObjectItemRequestData {
@ -57,6 +69,7 @@ export class EngineData extends Info {
super(); super();
this.type = DataType.Engine; this.type = DataType.Engine;
} }
public isEngine(): boolean { return true; }
} }
export class ArrayData extends Info { export class ArrayData extends Info {
@ -71,6 +84,7 @@ export class ArrayData extends Info {
this.data.push(info); this.data.push(info);
return this; return this;
} }
public isArray(): boolean { return true; }
} }
export class ObjectDataItem extends Info { export class ObjectDataItem extends Info {
@ -83,6 +97,7 @@ export class ObjectData extends Info {
super(); super();
this.type = DataType.Object; this.type = DataType.Object;
} }
public isObject(): boolean { return true; }
} }
export class InvalidData extends Info { export class InvalidData extends Info {
@ -93,6 +108,7 @@ export class InvalidData extends Info {
this.data = data; this.data = data;
this.type = DataType.Invalid; this.type = DataType.Invalid;
} }
public isInvalid(): boolean { return true; }
} }
export class ColorData extends Info { export class ColorData extends Info {
@ -101,6 +117,7 @@ export class ColorData extends Info {
this.type = DataType.Color; this.type = DataType.Color;
this.data = color; this.data = color;
} }
public isColor(): boolean { return true; }
} }
export class StringData extends Info { export class StringData extends Info {
@ -109,6 +126,7 @@ export class StringData extends Info {
this.type = DataType.String; this.type = DataType.String;
this.data = data; this.data = data;
} }
public isString(): boolean { return true; }
} }
export class NumberData extends Info { export class NumberData extends Info {
@ -117,6 +135,7 @@ export class NumberData extends Info {
this.type = DataType.Number; this.type = DataType.Number;
this.data = data; this.data = data;
} }
public isNumber(): boolean { return true; }
} }
export class BoolData extends Info { export class BoolData extends Info {
@ -125,6 +144,7 @@ export class BoolData extends Info {
this.type = DataType.Bool; this.type = DataType.Bool;
this.data = bol; this.data = bol;
} }
public isBool(): boolean { return true; }
} }
export class Vec2Data extends Info { export class Vec2Data extends Info {
@ -141,6 +161,9 @@ export class Vec2Data extends Info {
this.data.push(info); this.data.push(info);
return this; return this;
} }
public isVec2(): boolean {
return true;
}
} }
export class Vec3Data extends Info { export class Vec3Data extends Info {
@ -157,6 +180,9 @@ export class Vec3Data extends Info {
this.data.push(info); this.data.push(info);
return this; return this;
} }
public isVec3(): boolean {
return true;
}
} }
export class ImageData extends Info { export class ImageData extends Info {
@ -168,6 +194,7 @@ export class ImageData extends Info {
this.data = null; this.data = null;
return this; return this;
} }
public isImage(): boolean { return true; }
} }
export class EnumData extends Info { export class EnumData extends Info {

272
cc-inspector/src/views/devtools/index.vue
View File

@ -7,24 +7,18 @@
</el-drawer> --> </el-drawer> -->
<div class="head" v-show="iframes.length > 1"> <div class="head" v-show="iframes.length > 1">
<div class="label">inspect target:</div> <div class="label">inspect target:</div>
<el-select <CCSelect
v-model="frameID" v-model="frameID"
placeholder="please select ..." placeholder="please select ..."
@change="onChangeFrame" @change="onChangeFrame"
:data="getFramesData()"
style="flex: 1" style="flex: 1"
> >
<el-option </CCSelect>
v-for="item in iframes"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div> </div>
<div v-show="isShowDebug" class="find"> <div v-show="isShowDebug" class="find">
<div v-if="false"> <div v-if="false">
<el-button type="success" @click="onMemoryTest">内存测试</el-button> <CCButton type="success" @click="onMemoryTest">内存测试</CCButton>
</div> </div>
<div v-if="false"> <div v-if="false">
<span>JS堆栈限制: {{ memory.performance.jsHeapSizeLimit }}</span> <span>JS堆栈限制: {{ memory.performance.jsHeapSizeLimit }}</span>
@ -34,30 +28,25 @@
<div ref="left" class="left"> <div ref="left" class="left">
<div class="tool-btn"> <div class="tool-btn">
<div style="padding-left: 15px; flex: 1">Node Tree</div> <div style="padding-left: 15px; flex: 1">Node Tree</div>
<el-button <CCButton
v-show="isShowRefreshBtn" v-show="isShowRefreshBtn"
type="success" type="success"
class="el-icon-refresh" class="el-icon-refresh"
size="mini" size="mini"
@click="onBtnClickUpdateTree" @click="onBtnClickUpdateTree"
></el-button> ></CCButton>
<el-button <CCButton @click="onClickSettings" class="el-icon-s-tools"></CCButton>
@click="onClickSettings"
class="el-icon-s-tools"
></el-button>
</div> </div>
<!-- <el-input placeholder="enter keywords to filter" v-model="filterText"> <CCInput placeholder="enter keywords to filter" :data="filterText">
<template slot="append"> <slot>
<div class="matchCase"> <div
<div class="matchCase iconfont el-icon-third-font-size"
class="iconfont el-icon-third-font-size" @click.stop="onChangeCase"
@click.stop="onChangeCase" title="match case"
title="match case" :style="{ color: matchCase ? 'red' : '' }"
:style="{ color: matchCase ? 'red' : '' }" ></div>
></div> </slot>
</div> </CCInput>
</template>
</el-input> -->
<div class="treeList"> <div class="treeList">
<!-- <el-tree <!-- <el-tree
:data="treeData" :data="treeData"
@ -91,19 +80,31 @@
</div> </div>
<div v-show="!isShowDebug" class="no-find"> <div v-show="!isShowDebug" class="no-find">
<span>No games created by cocos creator found!</span> <span>No games created by cocos creator found!</span>
<el-button <CCButton
type="success" type="success"
class="el-icon-refresh" class="el-icon-refresh"
@click="onBtnClickUpdatePage" @click="onBtnClickUpdatePage"
>刷新</el-button >刷新
> </CCButton>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType, ref, onMounted, watch } from "vue"; import {
defineComponent,
PropType,
ref,
onMounted,
watch,
toRaw,
nextTick,
} from "vue";
import properties from "./ui/propertys.vue"; import properties from "./ui/propertys.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;
import { Msg, Page, PluginEvent } from "../../core/types"; import { Msg, Page, PluginEvent } from "../../core/types";
import { connectBackground } from "./connectBackground"; import { connectBackground } from "./connectBackground";
import { import {
@ -120,30 +121,41 @@ import SettingsVue from "./ui/settings.vue";
import { RefreshType, settings } from "./settings"; import { RefreshType, settings } from "./settings";
import UiDivider from "./ui/ui-divider.vue"; import UiDivider from "./ui/ui-divider.vue";
interface FrameInfo {
label: string;
value: number;
}
export default defineComponent({ export default defineComponent({
components: { UiDivider, properties, SettingsVue }, components: {
name: "devtools", UiDivider,
props: { properties,
isShowDebug: { type: Boolean, default: false }, SettingsVue,
treeItemData: { type: Object as PropType<NodeInfoData>, default: () => {} }, CCInput,
isShowRefreshBtn: { type: Boolean, default: false }, CCButton,
showSettings: { type: Boolean, default: false }, CCInputNumber,
iframes: { CCSelect,
type: Array as PropType<Array<{ label: string; value: number }>>, CCCheckBox,
default: () => [], CCColor,
},
frameID: { type: Number, default: 0 },
}, },
name: "devtools",
props: {},
setup(props, ctx) { setup(props, ctx) {
const treeItemData = ref<NodeInfoData | null>({ uuid: "", group: [] });
const isShowRefreshBtn = ref<boolean>(false);
const showSettings = ref<boolean>(false);
const isShowDebug = ref<boolean>(false);
const frameID = ref<number>(0);
const iframes = ref<Array<FrameInfo>>([]);
function _checkSelectedUUID() { function _checkSelectedUUID() {
if (this.selectedUUID) { if (selectedUUID) {
const b = this._findUuidInTree(this.treeData, this.selectedUUID); const b = _findUuidInTree(toRaw(treeData.value), selectedUUID);
if (b) { if (b) {
return true; return true;
} }
} }
this.selectedUUID = null; selectedUUID = null;
this.treeItemData = null; treeItemData.value = null;
return false; return false;
} }
@ -193,44 +205,42 @@ export default defineComponent({
} }
} }
circle(this.treeData); circle(treeData);
expandKeys.forEach((key) => { expandKeys.forEach((key) => {
if (!this.expandedKeys.find((el) => el === key)) { if (!expandedKeys.value.find((el) => el === key)) {
this.expandedKeys.push(key); expandedKeys.value.push(key);
} }
}); });
// 高亮uuid // 高亮uuid
} }
function _onMsgNodeInfo(eventData: NodeInfoData) { function _onMsgNodeInfo(eventData: NodeInfoData) {
this.isShowDebug = true; isShowDebug.value = true;
this.treeItemData = eventData; treeItemData.value = eventData;
} }
function _onMsgMemoryInfo(eventData: any) { function _onMsgMemoryInfo(eventData: any) {
this.memory = eventData; memory.value = eventData;
} }
function _onMsgSupport(isCocosGame: boolean) { function _onMsgSupport(isCocosGame: boolean) {
this.isShowDebug = isCocosGame; isShowDebug.value = isCocosGame;
if (isCocosGame) { if (isCocosGame) {
syncSettings(); syncSettings();
this.onBtnClickUpdateTree(); onBtnClickUpdateTree();
} else { } else {
this._clearTimer(); _clearTimer();
this.treeData = []; treeData.value.length = 0;
this.treeItemData = null; treeItemData.value = null;
this.selectedUUID = null; selectedUUID = null;
} }
} }
function _onMsgGetObjectItemData(requestData: ObjectItemRequestData) { function _onMsgGetObjectItemData(requestData: ObjectItemRequestData) {
if (requestData.id !== null) { if (requestData.id !== null) {
let findIndex = this.requestList.findIndex( let findIndex = requestList.findIndex((el) => el.id === requestData.id);
(el) => el.id === requestData.id
);
if (findIndex > -1) { if (findIndex > -1) {
let del = this.requestList.splice(findIndex, 1)[0]; let del = requestList.splice(findIndex, 1)[0];
del.cb(requestData.data); del.cb(requestData.data);
} }
} }
@ -238,17 +248,17 @@ export default defineComponent({
function _onMsgUpdateFrames(details: FrameDetails[]) { function _onMsgUpdateFrames(details: FrameDetails[]) {
// 先把iframes里面无效的清空了 // 先把iframes里面无效的清空了
this.iframes = this.iframes.filter((item) => { iframes.value = iframes.value.filter((item) => {
details.find((el) => el.frameID === item.value); details.find((el) => el.frameID === item.value);
}); });
// 同步配置 // 同步配置
details.forEach((item) => { details.forEach((item) => {
let findItem = this.iframes.find((el) => el.value === item.frameID); let findItem = iframes.value.find((el) => el.value === item.frameID);
if (findItem) { if (findItem) {
findItem.label = item.url; findItem.label = item.url;
} else { } else {
this.iframes.push({ iframes.value.push({
label: item.url, label: item.url,
value: item.frameID, value: item.frameID,
}); });
@ -256,12 +266,12 @@ export default defineComponent({
}); });
// 第一次获取到frame配置后，自动获取frame数据 // 第一次获取到frame配置后，自动获取frame数据
if ( if (
this.frameID === null && frameID === null &&
this.iframes.length > 0 && iframes.value.length > 0 &&
!this.iframes.find((el) => el.value === this.frameID) !iframes.value.find((el) => el.value === frameID.value)
) { ) {
this.frameID = this.iframes[0].value; frameID.value = iframes[0].value;
this.onChangeFrame(); onChangeFrame();
} }
} }
@ -279,7 +289,7 @@ export default defineComponent({
} }
// 更新指定uuid节点的tree的name // 更新指定uuid节点的tree的name
circle(this.treeData); circle(treeData.value);
let ret = treeArray.find((el) => el.uuid === uuid); let ret = treeArray.find((el) => el.uuid === uuid);
if (ret) { if (ret) {
if (key === "name") { if (key === "name") {
@ -317,29 +327,32 @@ export default defineComponent({
} }
); );
} }
const elTree = ref<HTMLElement>();
function _onMsgTreeInfo(treeData: Array<TreeData>) { function _onMsgTreeInfo(treeData: Array<TreeData>) {
this.isShowDebug = true; isShowDebug.value = true;
if (!Array.isArray(treeData)) { if (!Array.isArray(treeData)) {
treeData = [treeData]; treeData = [treeData];
} }
this.treeData = treeData; treeData = treeData;
if (this._checkSelectedUUID()) { if (_checkSelectedUUID()) {
this.updateNodeInfo(); updateNodeInfo();
this.$nextTick(() => { nextTick(() => {
//@ts-ignore if (elTree.value) {
this.$refs.tree.setCurrentKey(this.selectedUUID); //@ts-ignore
elTree.value.setCurrentKey(selectedUUID);
}
}); });
} }
} }
function _initChromeRuntimeConnect() { function _initChromeRuntimeConnect() {
const msgFunctionMap: Record<string, Function> = {}; const msgFunctionMap: Record<string, Function> = {};
msgFunctionMap[Msg.TreeInfo] = this._onMsgTreeInfo; msgFunctionMap[Msg.TreeInfo] = _onMsgTreeInfo;
msgFunctionMap[Msg.Support] = this._onMsgSupport; msgFunctionMap[Msg.Support] = _onMsgSupport;
msgFunctionMap[Msg.NodeInfo] = this._onMsgNodeInfo; msgFunctionMap[Msg.NodeInfo] = _onMsgNodeInfo;
msgFunctionMap[Msg.MemoryInfo] = this._onMsgMemoryInfo; msgFunctionMap[Msg.MemoryInfo] = _onMsgMemoryInfo;
msgFunctionMap[Msg.UpdateProperty] = this._onMsgUpdateProperty; msgFunctionMap[Msg.UpdateProperty] = _onMsgUpdateProperty;
msgFunctionMap[Msg.UpdateFrames] = this._onMsgUpdateFrames; msgFunctionMap[Msg.UpdateFrames] = _onMsgUpdateFrames;
msgFunctionMap[Msg.GetObjectItemData] = this._onMsgGetObjectItemData; msgFunctionMap[Msg.GetObjectItemData] = _onMsgGetObjectItemData;
// 接收来自background.js的消息数据 // 接收来自background.js的消息数据
connectBackground.onBackgroundMessage( connectBackground.onBackgroundMessage(
(data: PluginEvent, sender: any) => { (data: PluginEvent, sender: any) => {
@ -418,20 +431,20 @@ export default defineComponent({
function onEnableTreeWatch(watch: boolean, time = 300) { function onEnableTreeWatch(watch: boolean, time = 300) {
if (watch) { if (watch) {
this._clearTimer(); _clearTimer();
this.timerID = setInterval(() => { timerID = setInterval(() => {
this.onBtnClickUpdateTree(); onBtnClickUpdateTree();
}, time); }, time);
} else { } else {
this._clearTimer(); _clearTimer();
} }
} }
let timerID: number | null = null; let timerID: NodeJS.Timer | null = null;
function _clearTimer() { function _clearTimer() {
if (this.timerID !== null) { if (timerID !== null) {
clearInterval(this.timerID); clearInterval(timerID);
this.timerID = null; timerID = null;
} }
} }
function syncSettings() { function syncSettings() {
@ -439,46 +452,71 @@ export default defineComponent({
const { refreshType, refreshTime } = settings.data; const { refreshType, refreshTime } = settings.data;
switch (refreshType) { switch (refreshType) {
case RefreshType.Auto: { case RefreshType.Auto: {
this.isShowRefreshBtn = false; isShowRefreshBtn.value = false;
this.onEnableTreeWatch(true, refreshTime); onEnableTreeWatch(true, refreshTime);
break; break;
} }
case RefreshType.Manual: { case RefreshType.Manual: {
this.isShowRefreshBtn = true; isShowRefreshBtn.value = true;
this.onEnableTreeWatch(false); onEnableTreeWatch(false);
} }
} }
} }
} }
function updateNodeInfo() { function updateNodeInfo() {
if (this.selectedUUID) { if (selectedUUID) {
sendMsgToContentScript(Msg.NodeInfo, this.selectedUUID); sendMsgToContentScript(Msg.NodeInfo, selectedUUID);
} }
} }
let selectedUUID: string | null = null; let selectedUUID: string | null = null;
function updateFilterText(val: any) { function updateFilterText(val: any) {
(this.$refs?.tree as any)?.filter(val); (elTree.value as any)?.filter(val);
} }
function onBtnClickUpdateTree() {
sendMsgToContentScript(Msg.TreeInfo, frameID);
}
function onChangeFrame() {
sendMsgToContentScript(Msg.UseFrame, frameID);
}
const elLeft = ref<HTMLDivElement>();
return { return {
elTree,
memory, memory,
defaultProps, defaultProps,
filterText, filterText,
matchCase, matchCase,
iframes,
isShowDebug,
showSettings,
isShowRefreshBtn,
expandedKeys, expandedKeys,
treeData, treeData,
treeItemData,
frameID,
getFramesData(): Option[] {
const frames: FrameInfo[] = toRaw(iframes.value);
const options: Option[] = [];
frames.forEach((frame) => {
options.push({
label: frame.label,
value: frame.value,
});
});
return options;
},
onChangeCase() { onChangeCase() {
this.matchCase = !this.matchCase; matchCase.value = !matchCase.value;
updateFilterText(this.filterText); updateFilterText(filterText);
}, },
handleNodeClick(data: TreeData) { handleNodeClick(data: TreeData) {
this.selectedUUID = data.uuid; selectedUUID = data.uuid;
this.updateNodeInfo(); updateNodeInfo();
}, },
filterNode(value: any, data: any) { filterNode(value: any, data: any) {
if (!value) { if (!value) {
return true; return true;
} else { } else {
if (this.matchCase) { if (matchCase) {
// 严格匹配大写 // 严格匹配大写
return data?.name?.indexOf(value) !== -1; return data?.name?.indexOf(value) !== -1;
} else { } else {
@ -489,7 +527,7 @@ export default defineComponent({
} }
}, },
onDividerMove(event: MouseEvent) { onDividerMove(event: MouseEvent) {
const leftDiv: HTMLDivElement = this.$refs.left as HTMLDivElement; const leftDiv: HTMLDivElement = elLeft.value as HTMLDivElement;
if (leftDiv) { if (leftDiv) {
let width = leftDiv.clientWidth; let width = leftDiv.clientWidth;
width += event.movementX; width += event.movementX;
@ -498,9 +536,7 @@ export default defineComponent({
} }
} }
}, },
onBtnClickUpdateTree() { onBtnClickUpdateTree,
sendMsgToContentScript(Msg.TreeInfo, this.frameID);
},
onBtnClickUpdatePage() { onBtnClickUpdatePage() {
sendMsgToContentScript(Msg.Support); sendMsgToContentScript(Msg.Support);
@ -513,22 +549,19 @@ export default defineComponent({
sendMsgToContentScript(Msg.MemoryInfo); sendMsgToContentScript(Msg.MemoryInfo);
}, },
onClickSettings() { onClickSettings() {
this.showSettings = true; showSettings.value = true;
},
onChangeFrame() {
sendMsgToContentScript(Msg.UseFrame, this.frameID);
}, },
onChangeFrame,
onNodeExpand(data: TreeData) { onNodeExpand(data: TreeData) {
if (data.hasOwnProperty("uuid") && data.uuid) { if (data.hasOwnProperty("uuid") && data.uuid) {
this.expandedKeys.push(data.uuid); expandedKeys.value.push(data.uuid);
} }
}, },
onNodeCollapse(data: TreeData) { onNodeCollapse(data: TreeData) {
if (data.hasOwnProperty("uuid")) { if (data.hasOwnProperty("uuid")) {
let index = this.expandedKeys.findIndex((el) => el === data.uuid); let index = expandedKeys.value.findIndex((el) => el === data.uuid);
if (index !== -1) { if (index !== -1) {
this.expandedKeys.splice(index, 1); expandedKeys.value.splice(index, 1);
} }
} }
}, },
@ -538,7 +571,6 @@ export default defineComponent({
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "../../index.less";
#devtools { #devtools {
display: flex; display: flex;

18
cc-inspector/src/views/devtools/ui/property-group.vue
View File

@ -13,14 +13,14 @@
<div style="flex: 1"> <div style="flex: 1">
{{ group.name }} {{ group.name }}
</div> </div>
<el-button <CCButton
style="margin-right: 10px" style="margin-right: 10px"
v-show="showLogBtn" v-show="showLogBtn"
type="success" type="success"
icon="el-icon-chat-dot-round" icon="el-icon-chat-dot-round"
@click.stop="onLog" @click.stop="onLog"
> >
</el-button> </CCButton>
</div> </div>
<div class="content" v-show="!fold"> <div class="content" v-show="!fold">
<ui-prop <ui-prop
@ -39,10 +39,20 @@ import { defineComponent, ref, PropType } from "vue";
import { Group } from "../data"; import { Group } from "../data";
import UiProp from "./ui-prop.vue"; import UiProp from "./ui-prop.vue";
import Bus, { BusMsg } from "../bus"; import Bus, { BusMsg } from "../bus";
import ccui from "@xuyanfeng/cc-ui";
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
ccui.components;
export default defineComponent({ export default defineComponent({
name: "property-group", name: "property-group",
components: { UiProp }, components: {
UiProp,
CCInput,
CCButton,
CCInputNumber,
CCSelect,
CCCheckBox,
CCColor,
},
props: { props: {
group: { group: {
type: Object as PropType<Group>, type: Object as PropType<Group>,

45
cc-inspector/src/views/devtools/ui/settings.vue
View File

@ -1,33 +1,23 @@
<template> <template>
<div class="settings"> <div class="settings">
<settings-prop label="refresh"> <settings-prop label="refresh">
<el-select v-model="refreshType" @change="onCommonSave" style="flex: 1"> <CCSelect
<el-option v-model="refreshType"
v-for="item in refreshOptions" :data="refreshOptions"
:key="item.value" @change="onCommonSave"
:label="item.label" style="flex: 1"
:value="item.value" >
> </CCSelect>
</el-option>
</el-select>
</settings-prop> </settings-prop>
<settings-prop label="refresh time: " v-show="isRefreshAuto()"> <settings-prop label="refresh time: " v-show="isRefreshAuto()">
<el-input-number <CCInputNumber
style="flex: 1" style="flex: 1"
:min="100" :min="100"
v-model="refreshTime" v-model="refreshTime"
@change="onCommonSave" @change="onCommonSave"
></el-input-number> ></CCInputNumber>
<span>ms</span> <span>ms</span>
</settings-prop> </settings-prop>
<!-- <el-dropdown>-->
<!-- <span>refresh</span>-->
<!-- <el-dropdown-menu slot="dropdown">-->
<!-- <el-dropdown-item>auto</el-dropdown-item>-->
<!-- <el-dropdown-item>Manual</el-dropdown-item>-->
<!-- </el-dropdown-menu>-->
<!-- </el-dropdown>-->
</div> </div>
</template> </template>
@ -35,13 +25,24 @@
import { defineComponent, onMounted, ref, toRaw } from "vue"; import { defineComponent, onMounted, ref, toRaw } from "vue";
import { RefreshType, settings } from "../settings"; import { RefreshType, settings } from "../settings";
import SettingsProp from "./settings-prop.vue"; 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;
export default defineComponent({ export default defineComponent({
name: "settings", name: "settings",
components: { SettingsProp }, components: {
SettingsProp,
CCInput,
CCButton,
CCInputNumber,
CCSelect,
CCCheckBox,
CCColor,
},
props: {}, props: {},
setup(props, ctx) { setup(props, ctx) {
const refreshOptions = ref<Array<{ label: string; value: RefreshType }>>([ const refreshOptions = ref<Array<Option>>([
{ label: "auto", value: RefreshType.Auto }, { label: "auto", value: RefreshType.Auto },
{ label: "manual", value: RefreshType.Manual }, { label: "manual", value: RefreshType.Manual },
]); ]);

272
cc-inspector/src/views/devtools/ui/ui-prop.vue
View File

@ -27,29 +27,30 @@
> >
</i> </i>
<div class="text" ref="propText"> <div class="text" ref="propText">
<el-popover <!-- 使用CCProp -->
<!-- <el-popover
placement="top" placement="top"
trigger="hover" trigger="hover"
:disabled="!isShowTooltip()" :disabled="!isShowTooltip()"
> >
<div>{{ name }}</div> <div>{{ name }}</div>
<span>{{ name }}</span> <span>{{ name }}</span>
</el-popover> </el-popover> -->
</div> </div>
</div> </div>
<div class="value"> <div class="value">
<div v-if="isInvalid()" class="invalid"> <div v-if="value.isInvalid()" class="invalid">
{{ value.data }} {{ value.data }}
</div> </div>
<el-input <CCInput
v-if="isString()" v-if="value.isString()"
v-model="value.data" v-model="value.data"
:disabled="value.readonly" :disabled="value.readonly"
@change="onChangeValue" @change="onChangeValue"
> >
</el-input> </CCInput>
<el-input <CCInput
v-if="isText()" v-if="value.isText()"
type="textarea" type="textarea"
:autosize="{ minRows: 3, maxRows: 5 }" :autosize="{ minRows: 3, maxRows: 5 }"
placeholder="请输入内容" placeholder="请输入内容"
@ -57,18 +58,18 @@
@change="onChangeValue" @change="onChangeValue"
v-model="value.data" v-model="value.data"
> >
</el-input> </CCInput>
<el-input-number <CCInputNumber
v-if="isNumber()" v-if="value.isNumber()"
style="width: 100%; text-align: left" style="width: 100%; text-align: left"
v-model="value.data" v-model="value.data"
:step="step" :step="step"
:disabled="value.readonly" :disabled="value.readonly"
@change="onChangeValue" @change="onChangeValue"
controls-position="right" controls-position="right"
></el-input-number> ></CCInputNumber>
<div v-if="isVec2() || isVec3()" class="vec"> <div v-if="value.isVec2() || value.isVec3()" class="vec">
<ui-prop <ui-prop
v-for="(vec, index) in value.data" v-for="(vec, index) in value.data"
:key="index" :key="index"
@ -78,47 +79,37 @@
> >
</ui-prop> </ui-prop>
</div> </div>
<el-select <CCSelect
v-model="value.data" v-model="value.data"
:disabled="value.readonly" :disabled="value.readonly"
v-if="isEnum()" :data="getEnumValues(value)"
v-if="value.isEnum()"
style="width: 100%" style="width: 100%"
@change="onChangeValue" @change="onChangeValue"
> >
<el-option </CCSelect>
v-for="(opt, index) in value.values" <CCCheckBox
:key="index"
:label="opt.name"
:value="opt.value"
>
</el-option>
</el-select>
<el-checkbox
v-model="value.data" v-model="value.data"
v-if="isBool()" v-if="value.isBool()"
:disabled="value.readonly" :disabled="value.readonly"
@change="onChangeValue" @change="onChangeValue"
> >
</el-checkbox> </CCCheckBox>
<div class="color" v-if="isColor()"> <div class="color" v-if="value.isColor()">
<el-color-picker <CCColor
style="position: absolute" style="position: absolute"
:disabled="value.readonly" :disabled="value.readonly"
v-model="value.data" v-model="value.data"
@change="onChangeValue" @change="onChangeValue"
> >
</el-color-picker> </CCColor>
<div class="hex" :style="{ color: colorReverse(value.data) }"> <div class="hex" :style="{ color: colorReverse(value.data) }">
{{ value.data }} {{ value.data }}
</div> </div>
</div> </div>
<!-- <div v-if="isArrayOrObject()" class="array-object">--> <div v-if="value.isImage()" class="image-property">
<!-- <div class="text">--> <!-- TODO: 适配 -->
<!-- </div>--> <div v-if="value.isImage() || true" placement="top" trigger="hover">
<!-- <el-button @click="onShowValueInConsole">log</el-button>-->
<!-- </div>-->
<div v-if="isImage()" class="image-property">
<el-popover v-if="isImage()" placement="top" trigger="hover">
<div <div
style=" style="
width: 100%; width: 100%;
@ -136,27 +127,29 @@
/> />
</div> </div>
<img :src="value.data" style="height: 36px" alt="图片" /> <img :src="value.data" style="height: 36px" alt="图片" />
</el-popover> </div>
<div style="flex: 1; display: flex; flex-direction: row-reverse"> <div style="flex: 1; display: flex; flex-direction: row-reverse">
<el-button @click="onShowValueInConsole">log</el-button> <CCButton @click="onShowValueInConsole">log</CCButton>
</div> </div>
</div> </div>
<div v-if="isEngine()" class="engine"> <div v-if="value.isEngine()" class="engine">
<div class="head"> <div class="head">
<i class="icon" :class="getEngineTypeIcon()"></i> <i class="icon" :class="getEngineTypeIcon()"></i>
<div class="type">{{ value.engineType }}</div> <div class="type">{{ value["engineType"] }}</div>
</div> </div>
<div class="name">{{ value.engineName }}</div> <div class="name">{{ value["engineName"] }}</div>
<el-button <CCButton
@click="onPlaceInTree" @click="onPlaceInTree"
type="primary" type="primary"
icon="el-icon-place" icon="el-icon-place"
></el-button> ></CCButton>
</div> </div>
<div v-if="isObject() && fold" class="objectDesc"> <div v-if="value.isObject() && fold" class="objectDesc">
{{ value.data }} {{ value.data }}
</div> </div>
<div v-if="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"> <div class="slot" v-if="false">
<slot></slot> <slot></slot>
</div> </div>
@ -172,7 +165,7 @@
:key="index" :key="index"
:indent="indent + 1" :indent="indent + 1"
:value="arr.value" :value="arr.value"
:name="getName(isArray(), arr)" :name="getName(value.isArray(), arr)"
> >
</ui-prop> </ui-prop>
</div> </div>
@ -194,109 +187,98 @@ import { DataType, EngineData, EnumData, Info, Property } from "../data";
import { connectBackground } from "../connectBackground"; import { connectBackground } from "../connectBackground";
import { Msg } from "../../../core/types"; import { Msg } from "../../../core/types";
import Bus, { BusMsg } from "../bus"; 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;
export default defineComponent({ export default defineComponent({
name: "UiProp", name: "UiProp",
components: {
CCInput,
CCButton,
CCInputNumber,
CCSelect,
CCCheckBox,
CCColor,
},
props: { props: {
name: { name: { type: String, default: "" },
type: String, indent: { type: Number, default: 0 },
default: "", arrow: { type: Boolean, default: true },
}, step: { type: Number, default: 1 },
indent: {
type: Number,
default: 0,
},
arrow: {
type: Boolean,
default: true,
},
value: { value: {
type: Object as PropType<Info | EngineData | EnumData>, type: Object as PropType<Info | EngineData | EnumData>,
default: () => {}, default: () => {},
}, },
step: {
type: Number,
default: 1,
},
}, },
setup(props, { emit }) {
setup(props, ctx) { const { value, step } = props;
const fold = ref(true);
let clientX: number = 0; let clientX: number = 0;
onMounted(() => { onMounted(() => {
watchValue(); watchValue();
}); });
function watchValue() { function watchValue() {
this.fold = true; fold.value = true;
if (this.isArray()) { if (value.isArray()) {
this.subData = this.value.data; subData.value = value.data;
} else { } else {
this.subData = null; subData.value = null;
} }
} }
const fold = ref(true);
watch(props.value, () => { watch(props.value, () => {
watchValue(); watchValue();
}); });
const subData = ref<Property[]>([]); const subData = ref<Property[]>([]);
const propText = ref<HTMLDivElement>();
function _onMouseMove(event: MouseEvent) {
let x = event.clientX;
let calcStep = step || 0;
if (x > clientX) {
calcStep = Math.abs(calcStep);
} else {
calcStep = -Math.abs(calcStep);
}
emit("movestep", calcStep);
clientX = x;
}
function _onMouseUp(event: MouseEvent) {
document.removeEventListener("mousemove", _onMouseMove);
document.removeEventListener("mouseup", _onMouseUp);
document.removeEventListener("onselectstart", _onSelect);
}
function _onSelect() {
return false;
}
return { return {
fold, fold,
propText,
subData, subData,
isInvalid() { getEnumValues(data: any): Option[] {
return this.value && this.value.type === DataType.Invalid; const value: EnumData = data;
}, const ret: Option[] = [];
isString() { value.values.map((item) => {
return this.value && this.value.type === DataType.String; ret.push({
}, label: item.name,
isText() { value: item.value,
return this.value && this.value.type === DataType.Text; });
}, });
isNumber() { return ret;
return this.value && this.value.type === DataType.Number;
},
isVec2() {
return this.value && this.value.type === DataType.Vec2;
},
isVec3() {
return this.value && this.value.type === DataType.Vec3;
},
isEnum() {
return this.value && this.value.type === DataType.Enum;
},
isBool() {
return this.value && this.value.type === DataType.Bool;
},
isColor() {
return this.value && this.value.type === DataType.Color;
}, },
isArrayOrObject() { isArrayOrObject() {
return ( return value && (value.isArray() || value.isObject());
this.value &&
(this.value.type === DataType.Array ||
this.value.type === DataType.Object)
);
},
isObject() {
return this.value && this.value.type === DataType.Object;
},
isArray() {
return this.value && this.value.type === DataType.Array;
},
isImage() {
return this.value && this.value.type === DataType.Image;
}, },
isImageValid() { isImageValid() {
return !!this.value.data; return !!value.data;
},
isEngine() {
return this.value && this.value.type === DataType.Engine;
}, },
onPlaceInTree() { onPlaceInTree() {
Bus.emit(BusMsg.ShowPlace, this.value); Bus.emit(BusMsg.ShowPlace, value);
}, },
isShowTooltip() { isShowTooltip() {
const el: HTMLDivElement = this.$refs.propText as HTMLDivElement; const el: HTMLDivElement = propText.value as HTMLDivElement;
if (el) { if (el) {
if (el.scrollWidth > el.offsetWidth) { if (el.scrollWidth > el.offsetWidth) {
// 出现了省略号 // 出现了省略号
@ -306,8 +288,7 @@ export default defineComponent({
return false; return false;
}, },
getEngineTypeIcon() { getEngineTypeIcon() {
const value = this.value as EngineData; switch ((value as EngineData).engineType) {
switch (value.engineType) {
case "cc_Sprite": { case "cc_Sprite": {
return "el-icon-picture-outline"; return "el-icon-picture-outline";
} }
@ -329,21 +310,20 @@ export default defineComponent({
} }
}, },
onClickFold() { onClickFold() {
if (this.isObject() && this.fold && !this.subData) { if (value.isObject() && fold && !subData) {
// 请求object的item数据 // 请求object的item数据
Bus.emit(BusMsg.RequestObjectData, this.value, (info: Property[]) => { Bus.emit(BusMsg.RequestObjectData, value, (info: Property[]) => {
this.fold = false; fold.value = false;
this.subData = info; subData.value = info;
}); });
} else { } else {
this.fold = !this.fold; fold.value = !fold.value;
} }
}, },
onShowValueInConsole() { onShowValueInConsole() {
if (Array.isArray(this.value.path)) { if (Array.isArray(value.path)) {
let uuid = this.value.path[0]; let uuid = value.path[0];
let key = this.value.path[1]; // todo 暂时只支持一级key let key = value.path[1]; // todo 暂时只支持一级key
if (uuid && key) { if (uuid && key) {
chrome.devtools.inspectedWindow.eval( chrome.devtools.inspectedWindow.eval(
`window.CCInspector.logValue('${uuid}','${key}')` `window.CCInspector.logValue('${uuid}','${key}')`
@ -351,46 +331,24 @@ export default defineComponent({
} }
} }
}, },
onChangeValue() { onChangeValue() {
if (!this.value.readonly) { if (!value.readonly) {
connectBackground.postMessageToBackground( connectBackground.postMessageToBackground(Msg.SetProperty, value);
Msg.SetProperty,
this.value
);
} }
}, },
onPropNameMouseDown(event: MouseEvent) { onPropNameMouseDown(event: MouseEvent) {
document.addEventListener("mousemove", this._onMouseMove); document.addEventListener("mousemove", _onMouseMove);
document.addEventListener("mouseup", this._onMouseUp); document.addEventListener("mouseup", _onMouseUp);
document.addEventListener("onselectstart", this._onSelect); document.addEventListener("onselectstart", _onSelect);
}, },
colorReverse(OldColorValue: string) { colorReverse(OldColorValue: string) {
OldColorValue = "0x" + OldColorValue.replace(/#/g, ""); OldColorValue = "0x" + OldColorValue.replace(/#/g, "");
var str = "000000" + (0xffffff - parseInt(OldColorValue)).toString(16); var str = "000000" + (0xffffff - parseInt(OldColorValue)).toString(16);
return "#" + str.substring(str.length - 6, str.length); return "#" + str.substring(str.length - 6, str.length);
}, },
_onMouseMove(event: MouseEvent) { _onMouseMove,
let x = event.clientX; _onMouseUp,
let calcStep = this.step || 0; _onSelect,
if (x > this.clientX) {
calcStep = Math.abs(calcStep);
} else {
calcStep = -Math.abs(calcStep);
}
this.$emit("movestep", calcStep);
this.clientX = x;
},
_onMouseUp(event: MouseEvent) {
document.removeEventListener("mousemove", this._onMouseMove);
document.removeEventListener("mouseup", this._onMouseUp);
document.removeEventListener("onselectstart", this._onSelect);
},
_onSelect() {
return false;
},
}; };
}, },
}); });

9
cc-inspector/src/views/popup/index.vue
View File

@ -3,10 +3,10 @@
<div class="head"> <div class="head">
<div class="name">{{ title }}</div> <div class="name">{{ title }}</div>
<div style="flex: 1"></div> <div style="flex: 1"></div>
<el-button <CCButton
class="el-icon-setting btn" class="el-icon-setting btn"
@click="onClickOptions" @click="onClickOptions"
></el-button> ></CCButton>
</div> </div>
<div class="wechat"> <div class="wechat">
@ -43,9 +43,12 @@
import { defineComponent, onMounted, ref, provide, nextTick } from "vue"; import { defineComponent, onMounted, ref, provide, nextTick } from "vue";
import CCP from "cc-plugin/src/ccp/entry-render"; import CCP from "cc-plugin/src/ccp/entry-render";
import { ChromeConst } from "cc-plugin/src/chrome/const"; import { ChromeConst } from "cc-plugin/src/chrome/const";
import ccui from "@xuyanfeng/cc-ui";
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
ccui.components;
export default defineComponent({ export default defineComponent({
name: "popup", name: "popup",
components: {}, components: {CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor},
setup(props, ctx) { setup(props, ctx) {
const title = ref(CCP.manifest.name); const title = ref(CCP.manifest.name);
const version = ref(CCP.manifest.version); const version = ref(CCP.manifest.version);