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

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

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