format

cc-inspector/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+web/
+.yalc/

cc-inspector/.vscode/settings.json

@@ -5,11 +5,13 @@
   "[typescript]": {
     "editor.tabSize": 2,
     "editor.formatOnSave": true,
+    "prettier.printWidth": 800,
     "editor.defaultFormatter": "vscode.typescript-language-features"
   },
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.tabSize": 2
+    "editor.tabSize": 2,
+    "prettier.printWidth": 800
   },
   "files.refactoring.autoSave": false,
   "search.exclude": {
@@ -18,7 +20,17 @@
     "**/*.code-search": true,
     "chrome": true,
     "yarn-error.log": true,
-    "yarn.lock": true
+    "yarn.lock": true,
+    ".yalc/": true
+  },
+  "files.exclude": {
+    ".yalc/": false,
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true
   },
   "prettier.printWidth": 1000
 }

cc-inspector/src/core/types.ts

@@ -33,7 +33,7 @@ export class PluginEvent {
   /**
    * 事件要发送的目标
    */
-  target: Page | null = null; 
+  target: Page | null = null;
 
   static check(event: PluginEvent, source: Page, target: Page) {
     return event && source && target && event.source === source && event.target === target;

cc-inspector/src/main.ts

@@ -1,19 +1,19 @@
-import pluginConfig from '../cc-plugin.config';
 import CCP from 'cc-plugin/src/ccp/entry-main';
-import { BuilderOptions } from 'cc-plugin/src/declare'
+import { BuilderOptions } from 'cc-plugin/src/declare';
+import pluginConfig from '../cc-plugin.config';
 
 CCP.init(pluginConfig, {
-    load: () => {
+  load: () => {
-        console.log('plugin load')
+    console.log('plugin load')
-    },
+  },
-    builder: {
+  builder: {
-        onAfterBuild(target: BuilderOptions) {
+    onAfterBuild(target: BuilderOptions) {
 
-        }
-    },
-    messages: {
-        showPanel() {
-            CCP.Adaptation.Panel.open('self.main')
-        }
     }
+  },
+  messages: {
+    showPanel() {
+      CCP.Adaptation.Panel.open('self.main')
+    }
+  }
 })

cc-inspector/src/panel/index.ts

@@ -1,15 +1,15 @@
-import { createApp } from 'vue'
-import App from './index.vue'
-import CCP from 'cc-plugin/src/ccp/entry-render';
-import pluginConfig from '../../cc-plugin.config'
 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 { createApp } from 'vue';
+import pluginConfig from '../../cc-plugin.config';
+import App from './index.vue';
 
 export default CCP.init(pluginConfig, {
-    ready: function (rootElement: any, args: any) {
+  ready: function (rootElement: any, args: any) {
-        const app = createApp(App)
+    const app = createApp(App)
-        app.use(ccui)
+    app.use(ccui)
-        app.mount(rootElement)
+    app.mount(rootElement)
-    }
+  }
 })

cc-inspector/src/panel/index.vue

@@ -5,16 +5,16 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, ref, provide, nextTick } from 'vue';
+import ccui from "@xuyanfeng/cc-ui";
-import PluginConfig from '../../cc-plugin.config';
+import { defineComponent, nextTick, onMounted, provide, ref } from "vue";
-import ccui from '@xuyanfeng/cc-ui';
+import PluginConfig from "../../cc-plugin.config";
 const { CCInput, CCButton } = ccui.components;
 export default defineComponent({
-  name: 'index',
+  name: "index",
   components: { CCButton },
   setup(props, { emit }) {
     onMounted(() => {
-      console.log('hi ~~~');
+      console.log("hi ~~~");
     });
     const msg = ref(PluginConfig.manifest.name);
     const count = ref(0);
@@ -23,7 +23,7 @@ export default defineComponent({
       count,
       onClickBtn() {
         count.value++;
-        console.log('click btn');
+        console.log("click btn");
       },
     };
   },

cc-inspector/src/scripts/background.ts

@@ -1,5 +1,5 @@
-import { Msg, Page, PluginEvent } from "../core/types";
 import { ChromeConst } from "cc-plugin/src/chrome/const";
+import { Msg, Page, PluginEvent } from "../core/types";
 
 // @ts-ignore
 // import * as UA from "universal-analytics";
@@ -180,7 +180,7 @@ class PortManagement {
         }
       }
     );
-    chrome.tabs.onActivated.addListener(({ tabId, windowId }) => {});
+    chrome.tabs.onActivated.addListener(({ tabId, windowId }) => { });
     chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
       // 页面发生刷新，通知重新生成数据
       if (changeInfo.status === "complete") {

cc-inspector/src/scripts/content.ts

@@ -1,8 +1,8 @@
 // content.js 和原始界面共享DOM，具有操作dom的能力
 // 但是不共享js,要想访问页面js,只能通过注入的方式
-import { injectScript } from "../core/util";
-import { Msg, Page, PluginEvent } from "../core/types";
 import { ChromeConst } from "cc-plugin/src/chrome/const";
+import { Msg, Page, PluginEvent } from "../core/types";
+import { injectScript } from "../core/util";
 injectScript(ChromeConst.script.inject);
 
 class Content {

cc-inspector/src/scripts/inject/index.ts

@@ -1,4 +1,6 @@
 // eval 注入脚本的代码,变量尽量使用var,后来发现在import之后,let会自动变为var
+import { uniq } from "lodash";
+import { Msg, Page, PluginEvent } from "../../core/types";
 import {
   ArrayData,
   BoolData,
@@ -19,15 +21,13 @@ import {
   Vec2Data,
   Vec3Data,
 } from "../../views/devtools/data";
-import { Msg, Page, PluginEvent } from "../../core/types";
+import { getValue, trySetValueWithConfig } from "./setValue";
 import {
   BuildArrayOptions,
   BuildImageOptions,
   BuildObjectOptions,
   BuildVecOptions,
 } from "./types";
-import { uniq } from "lodash";
-import { trySetValueWithConfig, getValue } from "./setValue";
 import { isHasProperty } from "./util";
 
 declare const cc: any;

cc-inspector/src/scripts/inject/setValue.ts

@@ -1,4 +1,4 @@
-import {isVersion3} from "./util";
+import { isVersion3 } from "./util";
 
 interface ConfigItem {
   path: string[],

cc-inspector/src/scripts/inject/types.ts

@@ -1,10 +1,10 @@
-import {ArrayData, ImageData, ObjectData, Vec2Data, Vec3Data} from "../../views/devtools/data";
+import { ArrayData, ImageData, ObjectData, Vec2Data, Vec3Data } from "../../views/devtools/data";
 
 export interface BuildObjectOptions {
   path: string[];
   value: Object;
   data: ObjectData;
-  filterKey:boolean;
+  filterKey: boolean;
 }
 
 export interface BuildArrayOptions {

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

@@ -1,4 +1,4 @@
-import {PluginEvent, Page, Msg} from "../../core/types";
+import { Msg, Page, PluginEvent } from "../../core/types";
 
 class ConnectBackground {
   connect: chrome.runtime.Port | null = null;
@@ -9,7 +9,7 @@ class ConnectBackground {
 
   private _initConnect() {
     if (chrome && chrome.runtime) {
-      this.connect = chrome.runtime.connect({name: Page.Devtools});
+      this.connect = chrome.runtime.connect({ name: Page.Devtools });
       this.connect.onDisconnect.addListener(() => {
         console.log(`%c[Connect-Dis]`, "color:red;")
         this.connect = null;

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

@@ -1,4 +1,4 @@
-import { v4 } from "uuid"
+import { v4 } from "uuid";
 
 export enum DataType {
   Number = 'Number',

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

@@ -1,12 +1,12 @@
-import { createApp } from "vue";
-import App from "./index.vue";
-import CCP from "cc-plugin/src/ccp/entry-render";
-import pluginConfig from "../../../cc-plugin.config";
 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 { createApp } from "vue";
+import pluginConfig from "../../../cc-plugin.config";
+import "../global.less";
+import App from "./index.vue";
 import { init } from './register-panel';
-import "../global.less"
 export default CCP.init(pluginConfig, {
   ready: function (rootElement: any, args: any) {
     init();

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

@@ -68,19 +68,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, PropType, ref, onMounted, watch, toRaw, nextTick } from "vue";
-import properties from "./ui/propertys.vue";
-import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
 import ccui from "@xuyanfeng/cc-ui";
-const { CCTree, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
+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 { 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 Bus, { BusMsg } from "./bus";
-import SettingsVue from "./ui/settings.vue";
 import { RefreshType, settings } from "./settings";
-import { ButtonGroupItem } from "@xuyanfeng/cc-ui/types/cc-button-group/const";
+import properties from "./ui/propertys.vue";
-import { ITreeData } from "@xuyanfeng/cc-ui/types/cc-tree/const";
+import SettingsVue from "./ui/settings.vue";
+const { CCTree, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
 interface FrameInfo {
   label: string;
   value: number;

cc-inspector/src/views/devtools/register-panel.ts

@@ -1,7 +1,7 @@
-import { ChromeConst } from "cc-plugin/src/chrome/const";
-import { connectBackground } from "./connectBackground";
-import { PluginEvent, Msg, Page } from "../../core/types";
 import CCP from "cc-plugin/src/ccp/entry-render";
+import { ChromeConst } from "cc-plugin/src/chrome/const";
+import { Msg, Page, PluginEvent } from "../../core/types";
+import { connectBackground } from "./connectBackground";
 export function init() {
   if (chrome && chrome.devtools) {
     // 对应的是Elements面板的边栏

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

@@ -1,6 +1,6 @@
 const Key = "settings";
 
-export const enum RefreshType{
+export const enum RefreshType {
   Auto = "auto",
   Manual = "manual",
 }

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

@@ -1,11 +1,6 @@
 <template>
   <div class="property-group">
-    <div
+    <div class="header" @click="onClickHeader" @mouseenter="showLogBtn = true" @mouseleave="showLogBtn = false">
-      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>
@@ -13,35 +8,23 @@
       <div style="flex: 1">
         {{ group.name }}
       </div>
-      <CCButton
+      <CCButton style="margin-right: 10px" v-show="showLogBtn" type="success" @click.stop="onLog">
-        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
+      <ui-prop v-for="(item, index) in group.data" :key="index" :name="item.name" :value="item.value"> </ui-prop>
-        v-for="(item, index) in group.data"
-        :key="index"
-        :name="item.name"
-        :value="item.value"
-      >
-      </ui-prop>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, PropType } from "vue";
+import ccui from "@xuyanfeng/cc-ui";
+import { defineComponent, PropType, ref } from "vue";
+import Bus, { BusMsg } from "../bus";
 import { Group } from "../data";
 import UiProp from "./ui-prop.vue";
-import Bus, { BusMsg } from "../bus";
+const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
-import ccui from "@xuyanfeng/cc-ui";
-const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
-  ccui.components;
 export default defineComponent({
   name: "property-group",
   components: {

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

@@ -1,19 +1,15 @@
 <template>
   <div id="prop">
-    <PropertyGroup
+    <PropertyGroup v-for="(group, index) in data.group" :key="index" :group="group"></PropertyGroup>
-      v-for="(group, index) in data.group"
-      :key="index"
-      :group="group"
-    ></PropertyGroup>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, watch } from "vue";
-import UiProp from "./ui-prop.vue";
+import Bus, { BusMsg } from "../bus";
 import { Group, NodeInfoData } from "../data";
 import PropertyGroup from "../ui/property-group.vue";
-import Bus, { BusMsg } from "../bus";
+import UiProp from "./ui-prop.vue";
 
 export default defineComponent({
   components: { PropertyGroup, UiProp },

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

@@ -1,34 +1,22 @@
 <template>
   <div class="settings">
     <settings-prop label="refresh">
-      <CCSelect
+      <CCSelect v-model="refreshType" :data="refreshOptions" @change="onCommonSave" style="flex: 1"> </CCSelect>
-        v-model="refreshType"
-        :data="refreshOptions"
-        @change="onCommonSave"
-        style="flex: 1"
-      >
-      </CCSelect>
     </settings-prop>
     <settings-prop label="refresh time: " v-show="isRefreshAuto()">
-      <CCInputNumber
+      <CCInputNumber style="flex: 1" :min="100" v-model="refreshTime" @change="onCommonSave"></CCInputNumber>
-        style="flex: 1"
-        :min="100"
-        v-model="refreshTime"
-        @change="onCommonSave"
-      ></CCInputNumber>
       <span>ms</span>
     </settings-prop>
   </div>
 </template>
 
 <script lang="ts">
+import ccui from "@xuyanfeng/cc-ui";
+import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
 import { defineComponent, onMounted, ref, toRaw } from "vue";
 import { RefreshType, settings } from "../settings";
 import SettingsProp from "./settings-prop.vue";
-import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
+const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
-import ccui from "@xuyanfeng/cc-ui";
-const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
-  ccui.components;
 export default defineComponent({
   name: "settings",
   components: {

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

@@ -1,21 +1,7 @@
 <template>
   <div id="ui-prop">
-    <div
+    <div class="normal-data" style="display: flex; flex-direction: row; align-items: center; min-height: 30px; margin: 0">
-      class="normal-data"
+      <div @mousedown="onPropNameMouseDown" class="key" @click="onClickFold" :style="{ cursor: isArrayOrObject() ? 'pointer' : '' }">
-      style="
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        min-height: 30px;
-        margin: 0;
-      "
-    >
-      <div
-        @mousedown="onPropNameMouseDown"
-        class="key"
-        @click="onClickFold"
-        :style="{ cursor: isArrayOrObject() ? 'pointer' : '' }"
-      >
         <i
           class="data-arrow"
           v-if="arrow"
@@ -42,67 +28,17 @@
         <div v-if="value.isInvalid()" class="invalid">
           {{ value.data }}
         </div>
-        <CCInput
+        <CCInput v-if="value.isString()" v-model="value.data" :disabled="value.readonly" @change="onChangeValue"> </CCInput>
-          v-if="value.isString()"
+        <CCInput v-if="value.isText()" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入内容" :disabled="value.readonly" @change="onChangeValue" v-model="value.data"> </CCInput>
-          v-model="value.data"
+        <CCInputNumber v-if="value.isNumber()" style="width: 100%; text-align: left" v-model="value.data" :step="step" :disabled="value.readonly" @change="onChangeValue" controls-position="right"></CCInputNumber>
-          :disabled="value.readonly"
-          @change="onChangeValue"
-        >
-        </CCInput>
-        <CCInput
-          v-if="value.isText()"
-          type="textarea"
-          :autosize="{ minRows: 3, maxRows: 5 }"
-          placeholder="请输入内容"
-          :disabled="value.readonly"
-          @change="onChangeValue"
-          v-model="value.data"
-        >
-        </CCInput>
-        <CCInputNumber
-          v-if="value.isNumber()"
-          style="width: 100%; text-align: left"
-          v-model="value.data"
-          :step="step"
-          :disabled="value.readonly"
-          @change="onChangeValue"
-          controls-position="right"
-        ></CCInputNumber>
 
         <div v-if="value.isVec2() || value.isVec3()" class="vec">
-          <ui-prop
+          <ui-prop v-for="(vec, index) in value.data" :key="index" :arrow="false" :value="vec.value" :name="vec.name"> </ui-prop>
-            v-for="(vec, index) in value.data"
-            :key="index"
-            :arrow="false"
-            :value="vec.value"
-            :name="vec.name"
-          >
-          </ui-prop>
         </div>
-        <CCSelect
+        <CCSelect v-model="value.data" :disabled="value.readonly" :data="getEnumValues(value)" v-if="value.isEnum()" style="width: 100%" @change="onChangeValue"> </CCSelect>
-          v-model="value.data"
+        <CCCheckBox v-model="value.data" v-if="value.isBool()" :disabled="value.readonly" @change="onChangeValue"> </CCCheckBox>
-          :disabled="value.readonly"
-          :data="getEnumValues(value)"
-          v-if="value.isEnum()"
-          style="width: 100%"
-          @change="onChangeValue"
-        >
-        </CCSelect>
-        <CCCheckBox
-          v-model="value.data"
-          v-if="value.isBool()"
-          :disabled="value.readonly"
-          @change="onChangeValue"
-        >
-        </CCCheckBox>
         <div class="color" v-if="value.isColor()">
-          <CCColor
+          <CCColor style="position: absolute" :disabled="value.readonly" v-model="value.data" @change="onChangeValue"> </CCColor>
-            style="position: absolute"
-            :disabled="value.readonly"
-            v-model="value.data"
-            @change="onChangeValue"
-          >
-          </CCColor>
           <div class="hex" :style="{ color: colorReverse(value.data) }">
             {{ value.data }}
           </div>
@@ -110,21 +46,8 @@
         <div v-if="value.isImage()" class="image-property">
           <!-- TODO: 适配 -->
           <div v-if="value.isImage() || true" placement="top" trigger="hover">
-            <div
+            <div style="width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center">
-              style="
+              <img :src="value.data" alt="图片" style="max-width: 100px; max-height: 100px; object-fit: contain" />
-                width: 100%;
-                height: 100%;
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: center;
-              "
-            >
-              <img
-                :src="value.data"
-                alt="图片"
-                style="max-width: 100px; max-height: 100px; object-fit: contain"
-              />
             </div>
             <img :src="value.data" style="height: 36px" alt="图片" />
           </div>
@@ -145,50 +68,29 @@
         <div v-if="value.isObject() && fold" class="objectDesc">
           {{ value.data }}
         </div>
-        <div v-if="value.isArray()" class="array">
+        <div v-if="value.isArray()" class="array">Array({{ value.data.length }})</div>
-          Array({{ value.data.length }})
-        </div>
         <div class="slot" v-if="false">
           <slot></slot>
         </div>
       </div>
     </div>
     <div v-if="isArrayOrObject()">
-      <div
+      <div v-show="!fold && subData" style="display: flex; flex-direction: column">
-        v-show="!fold && subData"
+        <ui-prop v-for="(arr, index) in subData" :key="index" :indent="indent + 1" :value="arr.value" :name="getName(value.isArray(), arr)"> </ui-prop>
-        style="display: flex; flex-direction: column"
-      >
-        <ui-prop
-          v-for="(arr, index) in subData"
-          :key="index"
-          :indent="indent + 1"
-          :value="arr.value"
-          :name="getName(value.isArray(), arr)"
-        >
-        </ui-prop>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import {
+import ccui from "@xuyanfeng/cc-ui";
-  defineComponent,
+import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
-  ref,
+import { defineComponent, onMounted, onUnmounted, PropType, ref, toRaw, watch } from "vue";
-  toRaw,
-  watch,
-  onUnmounted,
-  onMounted,
-  PropType,
-} from "vue";
-import { DataType, EngineData, EnumData, Info, Property } from "../data";
-import { connectBackground } from "../connectBackground";
 import { Msg } from "../../../core/types";
 import Bus, { BusMsg } from "../bus";
-import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
+import { connectBackground } from "../connectBackground";
-import ccui from "@xuyanfeng/cc-ui";
+import { DataType, EngineData, EnumData, Info, Property } from "../data";
-const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
+const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
-  ccui.components;
 
 export default defineComponent({
   name: "UiProp",
@@ -323,9 +225,7 @@ export default defineComponent({
           let uuid = value.path[0];
           let key = value.path[1]; // todo 暂时只支持一级key
           if (uuid && key) {
-            chrome.devtools.inspectedWindow.eval(
+            chrome.devtools.inspectedWindow.eval(`window.CCInspector.logValue('${uuid}','${key}')`);
-              `window.CCInspector.logValue('${uuid}','${key}')`
-            );
           }
         }
       },

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

@@ -1,10 +1,10 @@
-import { createApp } from "vue";
-import App from "./index.vue";
-import CCP from "cc-plugin/src/ccp/entry-render";
-import pluginConfig from "../../../cc-plugin.config";
 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 { createApp } from "vue";
+import pluginConfig from "../../../cc-plugin.config";
+import App from "./index.vue";
 
 export default CCP.init(pluginConfig, {
   ready: function (rootElement: any, args: any) {

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

@@ -5,7 +5,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, ref, provide, nextTick } from "vue";
+import { defineComponent, nextTick, onMounted, provide, ref } from "vue";
 export default defineComponent({
   name: "options",
   components: {},

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

@@ -1,12 +1,12 @@
-import { createApp } from "vue";
-import App from "./index.vue";
-import CCP from "cc-plugin/src/ccp/entry-render";
-import pluginConfig from "../../../cc-plugin.config";
 import ccui from "@xuyanfeng/cc-ui";
 import "@xuyanfeng/cc-ui/dist/ccui.css";
-import "@xuyanfeng/cc-ui/iconfont/use.css";
 import "@xuyanfeng/cc-ui/iconfont/iconfont.css";
-import "../global.less"
+import "@xuyanfeng/cc-ui/iconfont/use.css";
+import CCP from "cc-plugin/src/ccp/entry-render";
+import { createApp } from "vue";
+import pluginConfig from "../../../cc-plugin.config";
+import "../global.less";
+import App from "./index.vue";
 export default CCP.init(pluginConfig, {
   ready: function (rootElement: any, args: any) {
     const app = createApp(App);

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

@@ -24,10 +24,7 @@
       <a href="https://tidys.gitee.io/doc/#" target="_blank">
         <img class="icon" src="./res/tiezi.png" alt="" />
       </a>
-      <a
+      <a href="https://github.com/tidys/CocosCreatorPlugins/tree/master/CocosCreatorInspector" target="_blank">
-        href="https://github.com/tidys/CocosCreatorPlugins/tree/master/CocosCreatorInspector"
-        target="_blank"
-      >
         <img class="icon" src="./res/github.png" alt="" />
       </a>
       <a href="https://jq.qq.com/?_wv=1027&k=5SdPdy2" target="_blank">
@@ -39,12 +36,11 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, ref, provide, nextTick } from "vue";
+import ccui from "@xuyanfeng/cc-ui";
 import CCP from "cc-plugin/src/ccp/entry-render";
 import { ChromeConst } from "cc-plugin/src/chrome/const";
-import ccui from "@xuyanfeng/cc-ui";
+import { defineComponent, nextTick, onMounted, provide, ref } from "vue";
-const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
+const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
-  ccui.components;
 export default defineComponent({
   name: "popup",
   components: {