对接Settings，增加测试面板

.gitignore

@@ -3,7 +3,7 @@ CocosCreatorInspector/src/build
 /source/artifacts/
 /cc-inspector-v1.2/
 /test/
-cc-inspector/.yalc/
+
 cc-inspector/node_modules/
 cc-inspector/yalc.lock
 cc-inspector/chrome/

cc-inspector/.vscode/settings.json

@@ -5,9 +5,16 @@
   "[typescript]": {
     "editor.tabSize": 2,
     "editor.formatOnSave": true,
-    "prettier.printWidth": 800,
+    "prettier.printWidth": 1800,
     "editor.defaultFormatter": "vscode.typescript-language-features"
   },
+  "[json]": {
+    "editor.quickSuggestions": {
+      "strings": true
+    },
+    "editor.suggest.insertMode": "replace",
+    "editor.tabSize": 2
+  },
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.tabSize": 2,

cc-inspector/package.json

@@ -29,4 +29,4 @@
     "tiny-emitter": "2.1.0",
     "uuid": "^8.3.2"
   }
-}
+}

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

@@ -2,6 +2,7 @@ import ccui from "@xuyanfeng/cc-ui";
 import "@xuyanfeng/cc-ui/dist/ccui.css";
 import "@xuyanfeng/cc-ui/iconfont/iconfont.css";
 import CCP from "cc-plugin/src/ccp/entry-render";
+import { createPinia } from 'pinia';
 import { createApp } from "vue";
 import pluginConfig from "../../../cc-plugin.config";
 import "../global.less";
@@ -12,6 +13,7 @@ export default CCP.init(pluginConfig, {
     init();
     const app = createApp(App);
     app.use(ccui);
+    app.use(createPinia());
     app.mount(rootElement);
   },
 });

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

@@ -1,10 +1,6 @@
 <template>
   <div id="devtools">
-    <!-- <el-drawer title="settings" direction="btt" @close="onCloseSettings" :visible.sync="showSettings">
-            <div>
-                <SettingsVue></SettingsVue>
-            </div>
-        </el-drawer> -->
+    <Test @valid-game="testValidGame"> </Test>
     <div class="head" v-show="iframes.length > 1">
       <div class="label">inspect target:</div>
       <CCSelect v-model:value="frameID" placeholder="please select ..." @change="onChangeFrame" :data="getFramesData()"> </CCSelect>
@@ -64,6 +60,8 @@
         <i class="iconfont icon_refresh"></i>
       </CCButton>
     </div>
+    <CCDialog></CCDialog>
+    <CCFootBar :version="version"></CCFootBar>
   </div>
 </template>
 
@@ -72,27 +70,31 @@ import ccui from "@xuyanfeng/cc-ui";
 import { ButtonGroupItem } from "@xuyanfeng/cc-ui/types/cc-button-group/const";
 import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
 import { ITreeData } from "@xuyanfeng/cc-ui/types/cc-tree/const";
-import { defineComponent, nextTick, onMounted, PropType, reactive, ref, toRaw, watch } from "vue";
+import { _UnwrapAll, Store, storeToRefs } from "pinia";
+import { defineComponent, nextTick, onMounted, PropType, reactive, Ref, ref, toRaw, watch } from "vue";
+import PluginConfig from "../../../cc-plugin.config";
 import { Msg, Page, PluginEvent } from "../../core/types";
 import Bus, { BusMsg } from "./bus";
 import { connectBackground } from "./connectBackground";
 import { EngineData, FrameDetails, Info, NodeInfoData, ObjectData, ObjectItemRequestData, TreeData } from "./data";
-import { RefreshType, settings } from "./settings";
+import { appStore, RefreshType } from "./store";
+import Test from "./test.vue";
 import properties from "./ui/propertys.vue";
 import SettingsVue from "./ui/settings.vue";
-const { CCTree, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
+const { CCTree, CCFootBar, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
 interface FrameInfo {
   label: string;
   value: number;
 }
 
 export default defineComponent({
-  components: { 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) {
+    appStore().init();
+    const { config } = storeToRefs(appStore());
     const treeItemData = ref<NodeInfoData | null>({ uuid: "", group: [] });
-    const showSettings = ref<boolean>(false);
     const isShowDebug = ref<boolean>(true);
     const frameID = ref<number>(0);
     const iframes = ref<Array<FrameInfo>>([]);
@@ -108,7 +110,10 @@ export default defineComponent({
       {
         icon: "icon_settings",
         click: () => {
-          showSettings.value = true;
+          ccui.dialog.showDialog({
+            comp: SettingsVue,
+            title: "Settings",
+          });
         },
       },
     ]);
@@ -391,18 +396,16 @@ export default defineComponent({
       }
     }
     function syncSettings() {
-      if (settings.data) {
-        const { refreshType, refreshTime } = settings.data;
-        switch (refreshType) {
-          case RefreshType.Auto: {
-            btnRefresh.visible = false;
-            onEnableTreeWatch(true, refreshTime);
-            break;
-          }
-          case RefreshType.Manual: {
-            btnRefresh.visible = true;
-            onEnableTreeWatch(false);
-          }
+      const { refreshType, refreshTime } = config.value;
+      switch (refreshType) {
+        case RefreshType.Auto: {
+          btnRefresh.visible = false;
+          onEnableTreeWatch(true, refreshTime);
+          break;
+        }
+        case RefreshType.Manual: {
+          btnRefresh.visible = true;
+          onEnableTreeWatch(false);
         }
       }
     }
@@ -422,7 +425,9 @@ export default defineComponent({
       connectBackground.sendMsgToContentScript(Msg.UseFrame, frameID);
     }
     const elLeft = ref<HTMLDivElement>();
+    const version = ref(PluginConfig.manifest.version);
     return {
+      version,
       buttonGroup,
       elTree,
       memory,
@@ -431,11 +436,13 @@ export default defineComponent({
       matchCase,
       iframes,
       isShowDebug,
-      showSettings,
       expandedKeys,
       treeData,
       treeItemData,
       frameID,
+      testValidGame(b: boolean) {
+        isShowDebug.value = !!b;
+      },
       getFramesData(): Option[] {
         const frames: FrameInfo[] = toRaw(iframes.value);
         const options: Option[] = [];
@@ -471,10 +478,6 @@ export default defineComponent({
       onBtnClickUpdatePage() {
         connectBackground.sendMsgToContentScript(Msg.Support);
       },
-      onCloseSettings() {
-        syncSettings();
-      },
-
       onMemoryTest() {
         connectBackground.sendMsgToContentScript(Msg.MemoryInfo);
       },

cc-inspector/src/views/devtools/settings.ts

@@ -1,47 +1,5 @@
-const Key = "settings";
 
-export const enum RefreshType {
-  Auto = "auto",
-  Manual = "manual",
-}
 
-interface SettingsData {
-  refreshType: string;
-  refreshTime: number;
-}
 
-let defaultData: SettingsData = {
-  refreshTime: 500,
-  refreshType: RefreshType.Manual,
-}
 
-class Settings {
-  public data: SettingsData | null = null;
 
-  constructor() {
-    this.init();
-  }
-
-  private init() {
-    const data = localStorage.getItem(Key)
-    if (data) {
-      try {
-        this.data = JSON.parse(data)
-      } catch (e) {
-        this.data = defaultData;
-      }
-    }
-    this.data = Object.assign(defaultData, this.data)
-  }
-
-  isManualRefresh() {
-    return this.data?.refreshType === RefreshType.Manual;
-  }
-
-  save() {
-    const str = JSON.stringify(this.data);
-    localStorage.setItem(Key, str);
-  }
-}
-
-export const settings = new Settings();

cc-inspector/src/views/devtools/store.ts

@@ -0,0 +1,35 @@
+import profile from "cc-plugin/src/ccp/profile";
+import { defineStore } from "pinia";
+import { ref, toRaw } from "vue";
+import pluginConfig from "../../../cc-plugin.config";
+export const enum RefreshType {
+  Auto = "auto",
+  Manual = "manual",
+}
+export class ConfigData {
+  /**
+   * 刷新类型
+   */
+  refreshType: string = RefreshType.Manual;
+  /**
+   * 刷新间隔时间，单位ms
+   */
+  refreshTime: number = 500;
+}
+
+export const appStore = defineStore("app", () => {
+  const config = ref<ConfigData>(new ConfigData());
+  return {
+    config,
+    init() {
+      profile.init(new ConfigData(), pluginConfig);
+      const data = profile.load(`${pluginConfig.manifest.name}.json`) as ConfigData;
+      config.value.refreshType = data.refreshType || RefreshType.Manual;
+      config.value.refreshTime = data.refreshTime || 500;
+    },
+    save() {
+      const cfg = toRaw(config.value);
+      profile.save(cfg);
+    },
+  }
+});

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

@@ -0,0 +1,39 @@
+<template>
+  <div v-if="show" class="test">
+    <CCSection name="功能测试">
+      <CCButton @click="onClickHasCocosGame">Has CocosGame</CCButton>
+      <CCButton @click="onClickNoCocosGame">No CocosGame</CCButton>
+    </CCSection>
+  </div>
+</template>
+<script lang="ts">
+import ccui from "@xuyanfeng/cc-ui";
+import { defineComponent, ref } from "vue";
+const { CCButton, CCSection } = ccui.components;
+export default defineComponent({
+  name: "test",
+  components: { CCButton, CCSection },
+  emits: ["validGame"],
+  props: {
+    isCocosGame: { type: Boolean, default: false },
+  },
+  setup(props, { emit }) {
+    const show = ref(__DEV__);
+    return {
+      show,
+      onClickHasCocosGame() {
+        emit("validGame", true);
+      },
+      onClickNoCocosGame() {
+        emit("validGame", false);
+      },
+    };
+  },
+});
+</script>
+<style scoped lang="less">
+.test {
+  color: rgb(192, 56, 56);
+  font-size: 11%;
+}
+</style>

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

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

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

@@ -1,26 +1,26 @@
 <template>
   <div class="settings">
-    <settings-prop label="refresh">
-      <CCSelect v-model="refreshType" :data="refreshOptions" @change="onCommonSave" style="flex: 1"> </CCSelect>
-    </settings-prop>
-    <settings-prop label="refresh time: " v-show="isRefreshAuto()">
-      <CCInputNumber style="flex: 1" :min="100" v-model="refreshTime" @change="onCommonSave"></CCInputNumber>
-      <span>ms</span>
-    </settings-prop>
+    <CCProp name="refresh">
+      <CCSelect :value="config.refreshType" :data="refreshOptions" @change="onChangeRefreshType" style="flex: 1"> </CCSelect>
+    </CCProp>
+    <CCProp name="refresh time: " v-show="isRefreshAuto()">
+      <CCInputNumber style="flex: 1" :min="100" :value="config.refreshTime" @change="onChangeRefreshTime"></CCInputNumber>
+      <span style="margin: 0 3px">ms</span>
+    </CCProp>
   </div>
 </template>
 
 <script lang="ts">
 import ccui from "@xuyanfeng/cc-ui";
 import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
+import { storeToRefs } from "pinia";
 import { defineComponent, onMounted, ref, toRaw } from "vue";
-import { RefreshType, settings } from "../settings";
-import SettingsProp from "./settings-prop.vue";
-const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
+import { appStore, RefreshType } from "../store";
+const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCProp, CCColor } = ccui.components;
 export default defineComponent({
   name: "settings",
   components: {
-    SettingsProp,
+    CCProp,
     CCInput,
     CCButton,
     CCInputNumber,
@@ -34,22 +34,22 @@ export default defineComponent({
       { label: "auto", value: RefreshType.Auto },
       { label: "manual", value: RefreshType.Manual },
     ]);
-    const refreshType = ref(settings.data?.refreshType || "");
-    const refreshTime = ref(settings.data?.refreshTime || 500);
+    const { config } = storeToRefs(appStore());
     return {
-      refreshType,
-      refreshTime,
+      config,
       refreshOptions,
       isRefreshAuto() {
-        return refreshType.value === RefreshType.Auto;
+        return config.value.refreshType === RefreshType.Auto;
       },
-      onChangeRefreshType() {},
-      onCommonSave() {
-        if (settings.data) {
-          settings.data.refreshType = toRaw(refreshType.value);
-          settings.data.refreshTime = toRaw(refreshTime.value);
-          settings.save();
-        }
+      onChangeRefreshType(type: RefreshType) {
+        const store = appStore();
+        store.config.refreshType = type;
+        store.save();
+      },
+      onChangeRefreshTime(v: number) {
+        const store = appStore();
+        store.config.refreshTime = v;
+        store.save();
       },
     };
   },
@@ -58,5 +58,7 @@ export default defineComponent({
 
 <style scoped lang="less">
 .settings {
+  color: white;
+  background-color: #4d4d4d;
 }
 </style>