增加右键

cc-inspector/src/views/devtools/hierarchy.vue

@@ -6,12 +6,13 @@
           <i class="matchCase iconfont icon_font_size" @click.stop="onChangeCase" title="match case" :style="{ color: matchCase ? 'red' : '' }"></i>
         </slot>
       </CCInput>
-      <CCTree style="flex: 1" ref="elTree" :expand-keys="expandedKeys" :default-expand-all="false" :value="treeData" @node-expand="onNodeExpand" @node-collapse="onNodeCollapse" @node-click="handleNodeClick" @node-unclick="handleNodeUnclick"></CCTree>
+      <CCTree @contextmenu.prevent.stop="onMenu" style="flex: 1" ref="elTree" :expand-keys="expandedKeys" :default-expand-all="false" :value="treeData" @node-expand="onNodeExpand" @node-collapse="onNodeCollapse" @node-click="handleNodeClick" @node-unclick="handleNodeUnclick"></CCTree>
     </CCDock>
   </div>
 </template>
 <script lang="ts">
 import ccui from "@xuyanfeng/cc-ui";
+import { IUiMenuItem } from "@xuyanfeng/cc-ui/types/cc-menu/const";
 import { storeToRefs } from "pinia";
 import { defineComponent, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from "vue";
 import { Msg, PluginEvent, RequestTreeInfoData, ResponseSetPropertyData } from "../../core/types";
@@ -187,6 +188,33 @@ export default defineComponent({
           }
         }
       },
+      onMenu(event: MouseEvent) {
+        const menus: IUiMenuItem[] = [];
+        menus.push({
+          name: "update hierarchy",
+          enabled: true,
+          callback: () => {
+            updateTree();
+          },
+        });
+        if (selectedUUID) {
+          menus.push({
+            name: "visible",
+            enabled: true,
+            callback: () => {
+              console.log("visible");
+            },
+          });
+          menus.push({
+            name: "destroy",
+            enabled: false,
+            callback: () => {
+              console.log("destroy");
+            },
+          });
+        }
+        ccui.menu.showMenuByMouseEvent(event, menus);
+      },
       onChangeCase() {
         matchCase.value = !matchCase.value;
         updateFilterText(filterText);

cc-inspector/src/views/devtools/index.vue

@@ -18,6 +18,7 @@
     </div>
     <Find v-if="!isShowDebug"></Find>
     <CCDialog></CCDialog>
+    <CCMenu></CCMenu>
     <CCFootBar :version="version"></CCFootBar>
   </div>
 </template>
@@ -41,14 +42,14 @@ import { Timer } from "./timer";
 import Properties from "./ui/propertys.vue";
 import SettingsVue from "./ui/settings.vue";
 import { checkSupport } from "./util";
-const { CCTree, CCFootBar, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
+const { CCTree, CCFootBar, CCMenu, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
 interface FrameInfo {
   label: string;
   value: number;
 }
 
 export default defineComponent({
-  components: { Find, Inspector, Hierarchy, Test, CCFootBar, CCDialog, CCTree, CCDivider, CCButtonGroup, Properties, SettingsVue, CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor },
+  components: { Find, Inspector, CCMenu, Hierarchy, Test, CCFootBar, CCDialog, CCTree, CCDivider, CCButtonGroup, Properties, SettingsVue, CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor },
   name: "devtools",
   props: {},
   setup(props, ctx) {
@@ -206,7 +207,7 @@ export default defineComponent({
     display: flex;
     flex: 1;
     flex-direction: row;
-    overflow: auto;
+    overflow: hidden;
   }
 }
 </style>

cc-inspector/src/views/devtools/inspector.vue

@@ -1,12 +1,15 @@
 <template>
   <div class="right">
     <CCDock name="Inspector">
+      <div class="inspector" @contextmenu.prevent.stop="onMenu">
         <Properties v-if="treeItemData" :data="treeItemData"></Properties>
+      </div>
     </CCDock>
   </div>
 </template>
 <script lang="ts">
 import ccui from "@xuyanfeng/cc-ui";
+import { IUiMenuItem } from "@xuyanfeng/cc-ui/types/cc-menu/const";
 import { defineComponent, onMounted, onUnmounted, ref } from "vue";
 import { Msg, PluginEvent, RequestNodeInfoData, RequestObjectData, ResponseObjectData, ResponseSupportData } from "../../core/types";
 import { bridge } from "./bridge";
@@ -93,6 +96,16 @@ export default defineComponent({
     });
     return {
       treeItemData,
+      onMenu(evnet: MouseEvent) {
+        const menus: IUiMenuItem[] = [];
+        menus.push({
+          name: "update node info",
+          callback: () => {
+            updateNodeInfo();
+          },
+        });
+        ccui.menu.showMenuByMouseEvent(evnet, menus);
+      },
     };
   },
 });
@@ -103,17 +116,11 @@ export default defineComponent({
   display: flex;
   overflow-x: hidden;
   overflow-y: overlay;
-
+  .inspector {
-  &::-webkit-scrollbar {
+    display: flex;
-    width: 6px;
+    flex: 1;
-    background: #999;
+    flex-direction: column;
-    border-radius: 2px;
+    overflow: hidden;
-    height: 6px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #333;
-    border-radius: 2px;
   }
 }
 </style>

cc-inspector/src/views/devtools/ui/propertys.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="prop">
+  <div class="prop ccui-scrollbar">
     <PropertyGroup v-for="(group, index) in data.group" :key="index" :group="group"></PropertyGroup>
   </div>
 </template>
@@ -47,5 +47,6 @@ export default defineComponent({
 <style scoped lang="less">
 .prop {
   color: white;
+  overflow: auto;
 }
 </style>