update

src/App.vue

@@ -1,29 +1,30 @@
 <script setup lang="ts">
 import TreePanel from './components/TreePanel.vue';
 import { ref } from 'vue';
-let showTree = ref(false);
+import ProfilerPanel from './components/ProfilerPanel.vue';
+let showProfiler = ref(false);
+window.addEventListener('showProfiler', (e: any) => {
+  showProfiler.value = !showProfiler.value;
+});
 </script>
 
 <template>
-  <!-- <div>
-    <vue-final-modal v-model="showTree" classes="modal-container" content-class="modal-content" :hide-overlay="true"
+  <div>
+    <vue-final-modal v-model="showProfiler" classes="modal-container" content-class="modal-content" :hide-overlay="true"
       :click-to-close="false" :prevent-click="true" :drag="true" :fit-parent="true" drag-selector=".modal-drag">
-      <TreePanel :show="showTree"></TreePanel>
+      <ProfilerPanel :show="showProfiler"></ProfilerPanel>
     </vue-final-modal>
-    <el-button size="small" @click="showTree = !showTree">节点树</el-button>
-  </div> -->
-  <!-- <div style="width: 100%;border: 2px solid blue;"> -->
+  </div>
   <el-card :body-style="{ padding: 0 }" style="margin: 10px;">
     <TreePanel :show="true"></TreePanel>
   </el-card>
-  <!-- </div> -->
 </template>
 
 <style scoped>
 :deep(.modal-container) {
   display: flex;
-  justify-content: start;
-  align-items: center;
+  justify-content: end;
+  align-items: start;
 }
 
 :deep(.modal-content) {
@@ -34,8 +35,6 @@ let showTree = ref(false);
   padding: 0;
   border: 1px solid cadetblue;
   background: #171920;
-  min-width: 400px;
-  height: 80%;
 }
 </style>
 

src/components/CCNode.vue

@@ -1,12 +1,15 @@
 <template>
-    <div class="row">
-        <el-checkbox v-model="ccNode!.active" size="small" style="margin-right: 10px;" />
-        <span class="header-title" style="flex: 1;">Node</span>
-        <el-button size="small" @click="Utils.drawNodeRect(ccNode)">+</el-button>
-        <el-button size="small" @click="Utils.outputToConsole(ccNode)">></el-button>
-    </div>
-    <PropItem v-for="prop in NodeModel.props" :key="prop.key" :model="NodeModel" :prop-name="prop.name"
-        :prop-key="prop.key" :update-key="updateKey!"></PropItem>
+    <template v-if="ccNode!.name != 'PROFILER_NODE'">
+        <div class="row">
+            <el-checkbox v-model="ccNode!.active" size="small" style="margin-right: 10px;" />
+            <span class="header-title" style="flex: 1;">Node</span>
+            <el-button size="small" @click="Utils.drawNodeRect(ccNode)">+</el-button>
+            <el-button size="small" @click="Utils.outputToConsole(ccNode)">></el-button>
+        </div>
+        <PropItem v-for="prop in NodeModel.props" :key="prop.key" :model="NodeModel" :prop-name="prop.name"
+            :prop-key="prop.key" :update-key="updateKey!"></PropItem>
+    </template>
+    <ProfilerPanel v-if="ccNode!.name == 'PROFILER_NODE'" :show="true"></ProfilerPanel>
 </template>
 
 <script setup lang="ts">

src/components/ProfilerPanel.vue

@@ -0,0 +1,70 @@
+<template>
+    <div style="width: 100%;height: 30px;background-color: #26282f;display: flex;align-items: center;justify-content: center;color: white;"
+        class="modal-drag">
+        Profiler
+    </div>
+    <div style="width: 100%;">
+        <div class="row" v-for="item in items" :key="item.key">
+            <span>{{ item.desc }}</span>
+            <span style="flex: 1;text-align: right;">{{ item.value }}</span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue-demi';
+
+const props = defineProps({
+    show: Boolean,
+});
+
+let updateKey = ref(1);
+let items = ref<any[]>([]);
+
+function refresh() {
+    if (props.show) {
+        updateKey.value = -updateKey.value;
+    }
+    // @ts-ignore
+    const stats = cc.profiler._stats;
+    items.value.forEach(item => {
+        const data = stats[item.key];
+        item.desc = data.desc;
+        if (data.isInteger) {
+            item.value = data.counter._value | 0;
+        } else {
+            item.value = data.counter._value.toFixed(2);
+        }
+    });
+    setTimeout(refresh, 1000);
+}
+
+function init() {
+    items.value = [
+        { key: 'fps', desc: '', value: 0 },
+        { key: 'draws', desc: '', value: 0 },
+        { key: 'frame', desc: '', value: 0 },
+        { key: 'instances', desc: '', value: 0 },
+        { key: 'tricount', desc: '', value: 0 },
+        { key: 'logic', desc: '', value: 0 },
+        { key: 'physics', desc: '', value: 0 },
+        { key: 'render', desc: '', value: 0 },
+        { key: 'textureMemory', desc: '', value: 0 },
+        { key: 'bufferMemory', desc: '', value: 0 },
+    ];
+    refresh();
+}
+
+onMounted(() => {
+  init();
+});
+
+</script>
+
+<style>
+.row {
+    display: flex;
+    justify-content: center;
+    margin: 10px;
+}
+</style>

src/components/TreePanel.vue

@@ -1,9 +1,4 @@
 <template>
-  <!-- <div
-    style="width: 100%;height: 30px;background-color: #26282f;display: flex;align-items: center;justify-content: center;color: white;"
-    class="modal-drag">
-    节点树
-  </div> -->
   <div style="width: 100%;" :style="{ height: treeViewHeight }">
     <el-tree-v2 ref="treeView" :props="defaultProps" empty-text="正在加载场景" :highlight-current="true"
       :expand-on-click-node="false" :default-expanded-keys="expandedKeys" @current-change="handleCurrentNodeChange"
@@ -113,7 +108,8 @@ function setChildren(container: TreeNode[], children: any[], path: string[]) {
 }
 
 function refreshTree() {
-  if (props.show) {
+  // @ts-ignore
+  if (props.show && window.ccdevShow) {
     let value: TreeNode[] = [];
     //@ts-ignore
     setChildren(value, cc.director.getScene().children, []);