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

使用CCSection重构PropertyGroup

Browse Source
This commit is contained in:
xu_yanfeng 2024-12-10 10:34:27 +08:00
parent e05e488d44
commit 004b8f8241
2 changed files with 26 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -51,7 +51,7 @@
</div> </div>
<CCDivider></CCDivider> <CCDivider></CCDivider>
<div class="right"> <div class="right">
<properties v-if="treeItemData" :data="treeItemData"></properties> <Properties v-if="treeItemData" :data="treeItemData"></Properties>
</div> </div>
</div> </div>
<div v-show="!isShowDebug" class="no-find"> <div v-show="!isShowDebug" class="no-find">
@ -79,7 +79,7 @@ import { connectBackground } from "./connectBackground";
import { EngineData, FrameDetails, Info, NodeInfoData, ObjectData, ObjectItemRequestData, TreeData } from "./data"; import { EngineData, FrameDetails, Info, NodeInfoData, ObjectData, ObjectItemRequestData, TreeData } from "./data";
import { appStore, RefreshType } from "./store"; import { appStore, RefreshType } from "./store";
import Test from "./test/test.vue"; import Test from "./test/test.vue";
import properties from "./ui/propertys.vue"; import Properties from "./ui/propertys.vue";
import SettingsVue from "./ui/settings.vue"; import SettingsVue from "./ui/settings.vue";
ccui.components.CCAd; ccui.components.CCAd;
const { CCTree, CCFootBar, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components; const { CCTree, CCFootBar, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
@ -89,7 +89,7 @@ interface FrameInfo {
} }
export default defineComponent({ export default defineComponent({
components: { Test, CCFootBar, CCDialog, CCTree, CCDivider, CCButtonGroup, properties, SettingsVue, CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor }, components: { Test, CCFootBar, CCDialog, CCTree, CCDivider, CCButtonGroup, Properties, SettingsVue, CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor },
name: "devtools", name: "devtools",
props: {}, props: {},
setup(props, ctx) { setup(props, ctx) {
@ -333,6 +333,9 @@ export default defineComponent({
requestList.push({ id: data.id, cb }); requestList.push({ id: data.id, cb });
connectBackground.sendMsgToContentScript(Msg.GetObjectItemData, data); connectBackground.sendMsgToContentScript(Msg.GetObjectItemData, data);
}); });
Bus.on(BusMsg.UpdateSettings, () => {
syncSettings();
});
Bus.on(BusMsg.LogData, (data: string[]) => { Bus.on(BusMsg.LogData, (data: string[]) => {
connectBackground.sendMsgToContentScript(Msg.LogData, data); connectBackground.sendMsgToContentScript(Msg.LogData, data);
}); });
@ -496,7 +499,8 @@ export default defineComponent({
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background-color: #5c5c5c;
color: white;
.head { .head {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

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

@ -1,20 +1,14 @@
<template> <template>
<div class="property-group"> <div class="property-group">
<div class="header" @click="onClickHeader" @mouseenter="showLogBtn = true" @mouseleave="showLogBtn = false"> <CCSection :expand="!fold" :name="group.name" :expand-by-full-header="true" :auto-slot-header="true">
<div style="margin: 0 5px"> <template v-slot:header>
<i v-if="fold" class="iconfont icon_arrow_right"></i> <div style="flex: 1"></div>
<i v-if="!fold" class="iconfont icon_arrow_down"></i> <i style="" @click.stop="onLog" class="print iconfont icon_print"></i>
</template>
<div>
<UiProp v-for="(item, index) in group.data" :key="index" :name="item.name" :value="item.value"> </UiProp>
</div> </div>
<div style="flex: 1"> </CCSection>
{{ group.name }}
</div>
<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>
</div>
</div> </div>
</template> </template>
@ -24,11 +18,12 @@ import { defineComponent, PropType, ref } from "vue";
import Bus, { BusMsg } from "../bus"; import Bus, { BusMsg } from "../bus";
import { Group } from "../data"; import { Group } from "../data";
import UiProp from "./ui-prop.vue"; import UiProp from "./ui-prop.vue";
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components; const { CCInput, CCSection, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
export default defineComponent({ export default defineComponent({
name: "property-group", name: "property-group",
components: { components: {
UiProp, UiProp,
CCSection,
CCInput, CCInput,
CCButton, CCButton,
CCInputNumber, CCInputNumber,
@ -49,17 +44,11 @@ export default defineComponent({
fold.value = b; fold.value = b;
}); });
const fold = ref(false); const fold = ref(false);
const showLogBtn = ref(false);
return { return {
showLogBtn,
fold, fold,
onLog() { onLog() {
Bus.emit(BusMsg.LogData, [props.group.id]); Bus.emit(BusMsg.LogData, [props.group.id]);
}, },
onClickHeader() {
fold.value = !fold.value;
},
}; };
}, },
}); });
@ -67,23 +56,14 @@ export default defineComponent({
<style scoped lang="less"> <style scoped lang="less">
.property-group { .property-group {
.header { .print {
height: 40px; margin-right: 10px;
display: flex; &:hover {
flex-direction: row; color: #ffffff;
align-items: center; }
user-select: none; &:active {
cursor: pointer; color: #ffaa00;
border-bottom: 1px #6d6d6d solid; }
background-color: #1da1f7;
}
.header:hover {
color: #6d6d6d;
}
.content {
padding: 0 5px;
} }
} }
</style> </style>