diff --git a/cc-inspector/.vscode/settings.json b/cc-inspector/.vscode/settings.json
index 41ddf0d..96f8e9d 100644
--- a/cc-inspector/.vscode/settings.json
+++ b/cc-inspector/.vscode/settings.json
@@ -10,5 +10,13 @@
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "files.refactoring.autoSave": false
+  "files.refactoring.autoSave": false,
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/*.code-search": true,
+    "chrome": true,
+    "yarn-error.log": true,
+    "yarn.lock": true
+  }
 }
diff --git a/cc-inspector/package.json b/cc-inspector/package.json
index f08d8b8..40ee893 100644
--- a/cc-inspector/package.json
+++ b/cc-inspector/package.json
@@ -8,7 +8,7 @@
     "@types/lodash": "^4.14.176",
     "@types/node": "16.11.12",
     "@types/uuid": "^8.3.1",
-    "@xuyanfeng/cc-ui": "^0.2.14",
+    "@xuyanfeng/cc-ui": "file:.yalc/@xuyanfeng/cc-ui",
     "cc-plugin": "file:.yalc/cc-plugin"
   },
   "name": "cc-plugin-demo",
@@ -25,8 +25,8 @@
   },
   "version": "1.0.0",
   "dependencies": {
-    "uuid": "^8.3.2",
+    "lodash": "^4.17.21",
     "tiny-emitter": "2.1.0",
-    "lodash": "^4.17.21"
+    "uuid": "^8.3.2"
   }
 }
diff --git a/cc-inspector/src/views/devtools/data.ts b/cc-inspector/src/views/devtools/data.ts
index 2936554..4405f7f 100644
--- a/cc-inspector/src/views/devtools/data.ts
+++ b/cc-inspector/src/views/devtools/data.ts
@@ -26,9 +26,20 @@ export class Info {
   constructor() {
     this.id = v4();
   }
-  public isEnum(): boolean {
-    return false;
-  }
+  public isEnum(): boolean { return false; }
+  public isVec2(): boolean { return false; }
+  public isVec3(): boolean { return false; }
+  public isBool(): boolean { return false; }
+  public isText(): boolean { return false; }
+  public isString(): boolean { return false; }
+  public isColor(): boolean { return false; }
+  public isInvalid(): boolean { return false; }
+  public isNumber(): boolean { return false; }
+  public isArrayOrObject(): boolean { return false; }
+  public isArray(): boolean { return false; }
+  public isObject(): boolean { return false; }
+  public isImage(): boolean { return false; }
+  public isEngine(): boolean { return false; }
 }
 
 export class TextData extends Info {
@@ -36,6 +47,7 @@ export class TextData extends Info {
     super();
     this.type = DataType.Text;
   }
+  public isText(): boolean { return true; }
 }
 
 export interface ObjectItemRequestData {
@@ -57,6 +69,7 @@ export class EngineData extends Info {
     super();
     this.type = DataType.Engine;
   }
+  public isEngine(): boolean { return true; }
 }
 
 export class ArrayData extends Info {
@@ -71,6 +84,7 @@ export class ArrayData extends Info {
     this.data.push(info);
     return this;
   }
+  public isArray(): boolean { return true; }
 }
 
 export class ObjectDataItem extends Info {
@@ -83,6 +97,7 @@ export class ObjectData extends Info {
     super();
     this.type = DataType.Object;
   }
+  public isObject(): boolean { return true; }
 }
 
 export class InvalidData extends Info {
@@ -93,6 +108,7 @@ export class InvalidData extends Info {
     this.data = data;
     this.type = DataType.Invalid;
   }
+  public isInvalid(): boolean { return true; }
 }
 
 export class ColorData extends Info {
@@ -101,6 +117,7 @@ export class ColorData extends Info {
     this.type = DataType.Color;
     this.data = color;
   }
+  public isColor(): boolean { return true; }
 }
 
 export class StringData extends Info {
@@ -109,6 +126,7 @@ export class StringData extends Info {
     this.type = DataType.String;
     this.data = data;
   }
+  public isString(): boolean { return true; }
 }
 
 export class NumberData extends Info {
@@ -117,6 +135,7 @@ export class NumberData extends Info {
     this.type = DataType.Number;
     this.data = data;
   }
+  public isNumber(): boolean { return true; }
 }
 
 export class BoolData extends Info {
@@ -125,6 +144,7 @@ export class BoolData extends Info {
     this.type = DataType.Bool;
     this.data = bol;
   }
+  public isBool(): boolean { return true; }
 }
 
 export class Vec2Data extends Info {
@@ -141,6 +161,9 @@ export class Vec2Data extends Info {
     this.data.push(info);
     return this;
   }
+  public isVec2(): boolean {
+    return true;
+  }
 }
 
 export class Vec3Data extends Info {
@@ -157,6 +180,9 @@ export class Vec3Data extends Info {
     this.data.push(info);
     return this;
   }
+  public isVec3(): boolean {
+    return true;
+  }
 }
 
 export class ImageData extends Info {
@@ -168,6 +194,7 @@ export class ImageData extends Info {
     this.data = null;
     return this;
   }
+  public isImage(): boolean { return true; }
 }
 
 export class EnumData extends Info {
diff --git a/cc-inspector/src/views/devtools/index.vue b/cc-inspector/src/views/devtools/index.vue
index 8b02897..0ca167d 100644
--- a/cc-inspector/src/views/devtools/index.vue
+++ b/cc-inspector/src/views/devtools/index.vue
@@ -7,24 +7,18 @@
         </el-drawer> -->
     <div class="head" v-show="iframes.length > 1">
       <div class="label">inspect target:</div>
-      <el-select
+      <CCSelect
         v-model="frameID"
         placeholder="please select ..."
         @change="onChangeFrame"
+        :data="getFramesData()"
         style="flex: 1"
       >
-        <el-option
-          v-for="item in iframes"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
-      </el-select>
+      </CCSelect>
     </div>
     <div v-show="isShowDebug" class="find">
       <div v-if="false">
-        <el-button type="success" @click="onMemoryTest">内存测试</el-button>
+        <CCButton type="success" @click="onMemoryTest">内存测试</CCButton>
       </div>
       <div v-if="false">
         <span>JS堆栈限制: {{ memory.performance.jsHeapSizeLimit }}</span>
@@ -34,30 +28,25 @@
       <div ref="left" class="left">
         <div class="tool-btn">
           <div style="padding-left: 15px; flex: 1">Node Tree</div>
-          <el-button
+          <CCButton
             v-show="isShowRefreshBtn"
             type="success"
             class="el-icon-refresh"
             size="mini"
             @click="onBtnClickUpdateTree"
-          ></el-button>
-          <el-button
-            @click="onClickSettings"
-            class="el-icon-s-tools"
-          ></el-button>
+          ></CCButton>
+          <CCButton @click="onClickSettings" class="el-icon-s-tools"></CCButton>
         </div>
-        <!-- <el-input placeholder="enter keywords to filter" v-model="filterText">
-          <template slot="append">
-            <div class="matchCase">
-              <div
-                class="iconfont el-icon-third-font-size"
-                @click.stop="onChangeCase"
-                title="match case"
-                :style="{ color: matchCase ? 'red' : '' }"
-              ></div>
-            </div>
-          </template>
-        </el-input> -->
+        <CCInput placeholder="enter keywords to filter" :data="filterText">
+          <slot>
+            <div
+              class="matchCase iconfont el-icon-third-font-size"
+              @click.stop="onChangeCase"
+              title="match case"
+              :style="{ color: matchCase ? 'red' : '' }"
+            ></div>
+          </slot>
+        </CCInput>
         <div class="treeList">
           <!-- <el-tree
             :data="treeData"
@@ -91,19 +80,31 @@
     </div>
     <div v-show="!isShowDebug" class="no-find">
       <span>No games created by cocos creator found!</span>
-      <el-button
+      <CCButton
         type="success"
         class="el-icon-refresh"
         @click="onBtnClickUpdatePage"
-        >刷新</el-button
-      >
+        >刷新
+      </CCButton>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, onMounted, watch } from "vue";
+import {
+  defineComponent,
+  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 { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
+  ccui.components;
 import { Msg, Page, PluginEvent } from "../../core/types";
 import { connectBackground } from "./connectBackground";
 import {
@@ -120,30 +121,41 @@ import SettingsVue from "./ui/settings.vue";
 import { RefreshType, settings } from "./settings";
 import UiDivider from "./ui/ui-divider.vue";
 
+interface FrameInfo {
+  label: string;
+  value: number;
+}
+
 export default defineComponent({
-  components: { UiDivider, properties, SettingsVue },
-  name: "devtools",
-  props: {
-    isShowDebug: { type: Boolean, default: false },
-    treeItemData: { type: Object as PropType<NodeInfoData>, default: () => {} },
-    isShowRefreshBtn: { type: Boolean, default: false },
-    showSettings: { type: Boolean, default: false },
-    iframes: {
-      type: Array as PropType<Array<{ label: string; value: number }>>,
-      default: () => [],
-    },
-    frameID: { type: Number, default: 0 },
+  components: {
+    UiDivider,
+    properties,
+    SettingsVue,
+    CCInput,
+    CCButton,
+    CCInputNumber,
+    CCSelect,
+    CCCheckBox,
+    CCColor,
   },
+  name: "devtools",
+  props: {},
   setup(props, ctx) {
+    const treeItemData = ref<NodeInfoData | null>({ uuid: "", group: [] });
+    const isShowRefreshBtn = ref<boolean>(false);
+    const showSettings = ref<boolean>(false);
+    const isShowDebug = ref<boolean>(false);
+    const frameID = ref<number>(0);
+    const iframes = ref<Array<FrameInfo>>([]);
     function _checkSelectedUUID() {
-      if (this.selectedUUID) {
-        const b = this._findUuidInTree(this.treeData, this.selectedUUID);
+      if (selectedUUID) {
+        const b = _findUuidInTree(toRaw(treeData.value), selectedUUID);
         if (b) {
           return true;
         }
       }
-      this.selectedUUID = null;
-      this.treeItemData = null;
+      selectedUUID = null;
+      treeItemData.value = null;
       return false;
     }
 
@@ -193,44 +205,42 @@ export default defineComponent({
         }
       }
 
-      circle(this.treeData);
+      circle(treeData);
 
       expandKeys.forEach((key) => {
-        if (!this.expandedKeys.find((el) => el === key)) {
-          this.expandedKeys.push(key);
+        if (!expandedKeys.value.find((el) => el === key)) {
+          expandedKeys.value.push(key);
         }
       });
       // 高亮uuid
     }
 
     function _onMsgNodeInfo(eventData: NodeInfoData) {
-      this.isShowDebug = true;
-      this.treeItemData = eventData;
+      isShowDebug.value = true;
+      treeItemData.value = eventData;
     }
 
     function _onMsgMemoryInfo(eventData: any) {
-      this.memory = eventData;
+      memory.value = eventData;
     }
 
     function _onMsgSupport(isCocosGame: boolean) {
-      this.isShowDebug = isCocosGame;
+      isShowDebug.value = isCocosGame;
       if (isCocosGame) {
         syncSettings();
-        this.onBtnClickUpdateTree();
+        onBtnClickUpdateTree();
       } else {
-        this._clearTimer();
-        this.treeData = [];
-        this.treeItemData = null;
-        this.selectedUUID = null;
+        _clearTimer();
+        treeData.value.length = 0;
+        treeItemData.value = null;
+        selectedUUID = null;
       }
     }
     function _onMsgGetObjectItemData(requestData: ObjectItemRequestData) {
       if (requestData.id !== null) {
-        let findIndex = this.requestList.findIndex(
-          (el) => el.id === requestData.id
-        );
+        let findIndex = requestList.findIndex((el) => el.id === requestData.id);
         if (findIndex > -1) {
-          let del = this.requestList.splice(findIndex, 1)[0];
+          let del = requestList.splice(findIndex, 1)[0];
           del.cb(requestData.data);
         }
       }
@@ -238,17 +248,17 @@ export default defineComponent({
 
     function _onMsgUpdateFrames(details: FrameDetails[]) {
       // 先把iframes里面无效的清空了
-      this.iframes = this.iframes.filter((item) => {
+      iframes.value = iframes.value.filter((item) => {
         details.find((el) => el.frameID === item.value);
       });
 
       // 同步配置
       details.forEach((item) => {
-        let findItem = this.iframes.find((el) => el.value === item.frameID);
+        let findItem = iframes.value.find((el) => el.value === item.frameID);
         if (findItem) {
           findItem.label = item.url;
         } else {
-          this.iframes.push({
+          iframes.value.push({
             label: item.url,
             value: item.frameID,
           });
@@ -256,12 +266,12 @@ export default defineComponent({
       });
       // 第一次获取到frame配置后，自动获取frame数据
       if (
-        this.frameID === null &&
-        this.iframes.length > 0 &&
-        !this.iframes.find((el) => el.value === this.frameID)
+        frameID === null &&
+        iframes.value.length > 0 &&
+        !iframes.value.find((el) => el.value === frameID.value)
       ) {
-        this.frameID = this.iframes[0].value;
-        this.onChangeFrame();
+        frameID.value = iframes[0].value;
+        onChangeFrame();
       }
     }
 
@@ -279,7 +289,7 @@ export default defineComponent({
       }
 
       // 更新指定uuid节点的tree的name
-      circle(this.treeData);
+      circle(treeData.value);
       let ret = treeArray.find((el) => el.uuid === uuid);
       if (ret) {
         if (key === "name") {
@@ -317,29 +327,32 @@ export default defineComponent({
         }
       );
     }
+    const elTree = ref<HTMLElement>();
     function _onMsgTreeInfo(treeData: Array<TreeData>) {
-      this.isShowDebug = true;
+      isShowDebug.value = true;
       if (!Array.isArray(treeData)) {
         treeData = [treeData];
       }
-      this.treeData = treeData;
-      if (this._checkSelectedUUID()) {
-        this.updateNodeInfo();
-        this.$nextTick(() => {
-          //@ts-ignore
-          this.$refs.tree.setCurrentKey(this.selectedUUID);
+      treeData = treeData;
+      if (_checkSelectedUUID()) {
+        updateNodeInfo();
+        nextTick(() => {
+          if (elTree.value) {
+            //@ts-ignore
+            elTree.value.setCurrentKey(selectedUUID);
+          }
         });
       }
     }
     function _initChromeRuntimeConnect() {
       const msgFunctionMap: Record<string, Function> = {};
-      msgFunctionMap[Msg.TreeInfo] = this._onMsgTreeInfo;
-      msgFunctionMap[Msg.Support] = this._onMsgSupport;
-      msgFunctionMap[Msg.NodeInfo] = this._onMsgNodeInfo;
-      msgFunctionMap[Msg.MemoryInfo] = this._onMsgMemoryInfo;
-      msgFunctionMap[Msg.UpdateProperty] = this._onMsgUpdateProperty;
-      msgFunctionMap[Msg.UpdateFrames] = this._onMsgUpdateFrames;
-      msgFunctionMap[Msg.GetObjectItemData] = this._onMsgGetObjectItemData;
+      msgFunctionMap[Msg.TreeInfo] = _onMsgTreeInfo;
+      msgFunctionMap[Msg.Support] = _onMsgSupport;
+      msgFunctionMap[Msg.NodeInfo] = _onMsgNodeInfo;
+      msgFunctionMap[Msg.MemoryInfo] = _onMsgMemoryInfo;
+      msgFunctionMap[Msg.UpdateProperty] = _onMsgUpdateProperty;
+      msgFunctionMap[Msg.UpdateFrames] = _onMsgUpdateFrames;
+      msgFunctionMap[Msg.GetObjectItemData] = _onMsgGetObjectItemData;
       // 接收来自background.js的消息数据
       connectBackground.onBackgroundMessage(
         (data: PluginEvent, sender: any) => {
@@ -418,20 +431,20 @@ export default defineComponent({
 
     function onEnableTreeWatch(watch: boolean, time = 300) {
       if (watch) {
-        this._clearTimer();
-        this.timerID = setInterval(() => {
-          this.onBtnClickUpdateTree();
+        _clearTimer();
+        timerID = setInterval(() => {
+          onBtnClickUpdateTree();
         }, time);
       } else {
-        this._clearTimer();
+        _clearTimer();
       }
     }
-    let timerID: number | null = null;
+    let timerID: NodeJS.Timer | null = null;
 
     function _clearTimer() {
-      if (this.timerID !== null) {
-        clearInterval(this.timerID);
-        this.timerID = null;
+      if (timerID !== null) {
+        clearInterval(timerID);
+        timerID = null;
       }
     }
     function syncSettings() {
@@ -439,46 +452,71 @@ export default defineComponent({
         const { refreshType, refreshTime } = settings.data;
         switch (refreshType) {
           case RefreshType.Auto: {
-            this.isShowRefreshBtn = false;
-            this.onEnableTreeWatch(true, refreshTime);
+            isShowRefreshBtn.value = false;
+            onEnableTreeWatch(true, refreshTime);
             break;
           }
           case RefreshType.Manual: {
-            this.isShowRefreshBtn = true;
-            this.onEnableTreeWatch(false);
+            isShowRefreshBtn.value = true;
+            onEnableTreeWatch(false);
           }
         }
       }
     }
     function updateNodeInfo() {
-      if (this.selectedUUID) {
-        sendMsgToContentScript(Msg.NodeInfo, this.selectedUUID);
+      if (selectedUUID) {
+        sendMsgToContentScript(Msg.NodeInfo, selectedUUID);
       }
     }
     let selectedUUID: string | null = null;
     function updateFilterText(val: any) {
-      (this.$refs?.tree as any)?.filter(val);
+      (elTree.value as any)?.filter(val);
     }
+    function onBtnClickUpdateTree() {
+      sendMsgToContentScript(Msg.TreeInfo, frameID);
+    }
+    function onChangeFrame() {
+      sendMsgToContentScript(Msg.UseFrame, frameID);
+    }
+    const elLeft = ref<HTMLDivElement>();
     return {
+      elTree,
       memory,
       defaultProps,
       filterText,
       matchCase,
+      iframes,
+      isShowDebug,
+      showSettings,
+      isShowRefreshBtn,
       expandedKeys,
       treeData,
+      treeItemData,
+      frameID,
+      getFramesData(): Option[] {
+        const frames: FrameInfo[] = toRaw(iframes.value);
+        const options: Option[] = [];
+        frames.forEach((frame) => {
+          options.push({
+            label: frame.label,
+            value: frame.value,
+          });
+        });
+        return options;
+      },
       onChangeCase() {
-        this.matchCase = !this.matchCase;
-        updateFilterText(this.filterText);
+        matchCase.value = !matchCase.value;
+        updateFilterText(filterText);
       },
       handleNodeClick(data: TreeData) {
-        this.selectedUUID = data.uuid;
-        this.updateNodeInfo();
+        selectedUUID = data.uuid;
+        updateNodeInfo();
       },
       filterNode(value: any, data: any) {
         if (!value) {
           return true;
         } else {
-          if (this.matchCase) {
+          if (matchCase) {
             // 严格匹配大写
             return data?.name?.indexOf(value) !== -1;
           } else {
@@ -489,7 +527,7 @@ export default defineComponent({
         }
       },
       onDividerMove(event: MouseEvent) {
-        const leftDiv: HTMLDivElement = this.$refs.left as HTMLDivElement;
+        const leftDiv: HTMLDivElement = elLeft.value as HTMLDivElement;
         if (leftDiv) {
           let width = leftDiv.clientWidth;
           width += event.movementX;
@@ -498,9 +536,7 @@ export default defineComponent({
           }
         }
       },
-      onBtnClickUpdateTree() {
-        sendMsgToContentScript(Msg.TreeInfo, this.frameID);
-      },
+      onBtnClickUpdateTree,
 
       onBtnClickUpdatePage() {
         sendMsgToContentScript(Msg.Support);
@@ -513,22 +549,19 @@ export default defineComponent({
         sendMsgToContentScript(Msg.MemoryInfo);
       },
       onClickSettings() {
-        this.showSettings = true;
-      },
-      onChangeFrame() {
-        sendMsgToContentScript(Msg.UseFrame, this.frameID);
+        showSettings.value = true;
       },
+      onChangeFrame,
       onNodeExpand(data: TreeData) {
         if (data.hasOwnProperty("uuid") && data.uuid) {
-          this.expandedKeys.push(data.uuid);
+          expandedKeys.value.push(data.uuid);
         }
       },
-
       onNodeCollapse(data: TreeData) {
         if (data.hasOwnProperty("uuid")) {
-          let index = this.expandedKeys.findIndex((el) => el === data.uuid);
+          let index = expandedKeys.value.findIndex((el) => el === data.uuid);
           if (index !== -1) {
-            this.expandedKeys.splice(index, 1);
+            expandedKeys.value.splice(index, 1);
           }
         }
       },
@@ -538,7 +571,6 @@ export default defineComponent({
 </script>
 
 <style scoped lang="less">
-@import "../../index.less";
 
 #devtools {
   display: flex;
diff --git a/cc-inspector/src/views/devtools/ui/property-group.vue b/cc-inspector/src/views/devtools/ui/property-group.vue
index c028dc9..a265e0f 100644
--- a/cc-inspector/src/views/devtools/ui/property-group.vue
+++ b/cc-inspector/src/views/devtools/ui/property-group.vue
@@ -13,14 +13,14 @@
       <div style="flex: 1">
         {{ group.name }}
       </div>
-      <el-button
+      <CCButton
         style="margin-right: 10px"
         v-show="showLogBtn"
         type="success"
         icon="el-icon-chat-dot-round"
         @click.stop="onLog"
       >
-      </el-button>
+      </CCButton>
     </div>
     <div class="content" v-show="!fold">
       <ui-prop
@@ -39,10 +39,20 @@ import { defineComponent, ref, PropType } from "vue";
 import { Group } from "../data";
 import UiProp from "./ui-prop.vue";
 import Bus, { BusMsg } from "../bus";
-
+import ccui from "@xuyanfeng/cc-ui";
+const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
+  ccui.components;
 export default defineComponent({
   name: "property-group",
-  components: { UiProp },
+  components: {
+    UiProp,
+    CCInput,
+    CCButton,
+    CCInputNumber,
+    CCSelect,
+    CCCheckBox,
+    CCColor,
+  },
   props: {
     group: {
       type: Object as PropType<Group>,
diff --git a/cc-inspector/src/views/devtools/ui/settings.vue b/cc-inspector/src/views/devtools/ui/settings.vue
index 5c07d79..1cbc6a8 100644
--- a/cc-inspector/src/views/devtools/ui/settings.vue
+++ b/cc-inspector/src/views/devtools/ui/settings.vue
@@ -1,33 +1,23 @@
 <template>
   <div class="settings">
     <settings-prop label="refresh">
-      <el-select v-model="refreshType" @change="onCommonSave" style="flex: 1">
-        <el-option
-          v-for="item in refreshOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
-      </el-select>
+      <CCSelect
+        v-model="refreshType"
+        :data="refreshOptions"
+        @change="onCommonSave"
+        style="flex: 1"
+      >
+      </CCSelect>
     </settings-prop>
     <settings-prop label="refresh time: " v-show="isRefreshAuto()">
-      <el-input-number
+      <CCInputNumber
         style="flex: 1"
         :min="100"
         v-model="refreshTime"
         @change="onCommonSave"
-      ></el-input-number>
+      ></CCInputNumber>
       <span>ms</span>
     </settings-prop>
-
-    <!--        <el-dropdown>-->
-    <!--          <span>refresh</span>-->
-    <!--          <el-dropdown-menu slot="dropdown">-->
-    <!--            <el-dropdown-item>auto</el-dropdown-item>-->
-    <!--            <el-dropdown-item>Manual</el-dropdown-item>-->
-    <!--          </el-dropdown-menu>-->
-    <!--        </el-dropdown>-->
   </div>
 </template>
 
@@ -35,13 +25,24 @@
 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";
+import ccui from "@xuyanfeng/cc-ui";
+const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
+  ccui.components;
 export default defineComponent({
   name: "settings",
-  components: { SettingsProp },
+  components: {
+    SettingsProp,
+    CCInput,
+    CCButton,
+    CCInputNumber,
+    CCSelect,
+    CCCheckBox,
+    CCColor,
+  },
   props: {},
   setup(props, ctx) {
-    const refreshOptions = ref<Array<{ label: string; value: RefreshType }>>([
+    const refreshOptions = ref<Array<Option>>([
       { label: "auto", value: RefreshType.Auto },
       { label: "manual", value: RefreshType.Manual },
     ]);
diff --git a/cc-inspector/src/views/devtools/ui/ui-prop.vue b/cc-inspector/src/views/devtools/ui/ui-prop.vue
index 3936691..5565dcd 100644
--- a/cc-inspector/src/views/devtools/ui/ui-prop.vue
+++ b/cc-inspector/src/views/devtools/ui/ui-prop.vue
@@ -27,29 +27,30 @@
         >
         </i>
         <div class="text" ref="propText">
-          <el-popover
+          <!-- 使用CCProp -->
+          <!-- <el-popover
             placement="top"
             trigger="hover"
             :disabled="!isShowTooltip()"
           >
             <div>{{ name }}</div>
             <span>{{ name }}</span>
-          </el-popover>
+          </el-popover> -->
         </div>
       </div>
       <div class="value">
-        <div v-if="isInvalid()" class="invalid">
+        <div v-if="value.isInvalid()" class="invalid">
           {{ value.data }}
         </div>
-        <el-input
-          v-if="isString()"
+        <CCInput
+          v-if="value.isString()"
           v-model="value.data"
           :disabled="value.readonly"
           @change="onChangeValue"
         >
-        </el-input>
-        <el-input
-          v-if="isText()"
+        </CCInput>
+        <CCInput
+          v-if="value.isText()"
           type="textarea"
           :autosize="{ minRows: 3, maxRows: 5 }"
           placeholder="请输入内容"
@@ -57,18 +58,18 @@
           @change="onChangeValue"
           v-model="value.data"
         >
-        </el-input>
-        <el-input-number
-          v-if="isNumber()"
+        </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"
-        ></el-input-number>
+        ></CCInputNumber>
 
-        <div v-if="isVec2() || isVec3()" class="vec">
+        <div v-if="value.isVec2() || value.isVec3()" class="vec">
           <ui-prop
             v-for="(vec, index) in value.data"
             :key="index"
@@ -78,47 +79,37 @@
           >
           </ui-prop>
         </div>
-        <el-select
+        <CCSelect
           v-model="value.data"
           :disabled="value.readonly"
-          v-if="isEnum()"
+          :data="getEnumValues(value)"
+          v-if="value.isEnum()"
           style="width: 100%"
           @change="onChangeValue"
         >
-          <el-option
-            v-for="(opt, index) in value.values"
-            :key="index"
-            :label="opt.name"
-            :value="opt.value"
-          >
-          </el-option>
-        </el-select>
-        <el-checkbox
+        </CCSelect>
+        <CCCheckBox
           v-model="value.data"
-          v-if="isBool()"
+          v-if="value.isBool()"
           :disabled="value.readonly"
           @change="onChangeValue"
         >
-        </el-checkbox>
-        <div class="color" v-if="isColor()">
-          <el-color-picker
+        </CCCheckBox>
+        <div class="color" v-if="value.isColor()">
+          <CCColor
             style="position: absolute"
             :disabled="value.readonly"
             v-model="value.data"
             @change="onChangeValue"
           >
-          </el-color-picker>
+          </CCColor>
           <div class="hex" :style="{ color: colorReverse(value.data) }">
             {{ value.data }}
           </div>
         </div>
-        <!--      <div v-if="isArrayOrObject()" class="array-object">-->
-        <!--        <div class="text">-->
-        <!--        </div>-->
-        <!--        <el-button @click="onShowValueInConsole">log</el-button>-->
-        <!--      </div>-->
-        <div v-if="isImage()" class="image-property">
-          <el-popover v-if="isImage()" placement="top" trigger="hover">
+        <div v-if="value.isImage()" class="image-property">
+          <!-- TODO: 适配 -->
+          <div v-if="value.isImage() || true" placement="top" trigger="hover">
             <div
               style="
                 width: 100%;
@@ -136,27 +127,29 @@
               />
             </div>
             <img :src="value.data" style="height: 36px" alt="图片" />
-          </el-popover>
+          </div>
           <div style="flex: 1; display: flex; flex-direction: row-reverse">
-            <el-button @click="onShowValueInConsole">log</el-button>
+            <CCButton @click="onShowValueInConsole">log</CCButton>
           </div>
         </div>
-        <div v-if="isEngine()" class="engine">
+        <div v-if="value.isEngine()" class="engine">
           <div class="head">
             <i class="icon" :class="getEngineTypeIcon()"></i>
-            <div class="type">{{ value.engineType }}</div>
+            <div class="type">{{ value["engineType"] }}</div>
           </div>
-          <div class="name">{{ value.engineName }}</div>
-          <el-button
+          <div class="name">{{ value["engineName"] }}</div>
+          <CCButton
             @click="onPlaceInTree"
             type="primary"
             icon="el-icon-place"
-          ></el-button>
+          ></CCButton>
         </div>
-        <div v-if="isObject() && fold" class="objectDesc">
+        <div v-if="value.isObject() && fold" class="objectDesc">
           {{ value.data }}
         </div>
-        <div v-if="isArray()" class="array">Array({{ value.data.length }})</div>
+        <div v-if="value.isArray()" class="array">
+          Array({{ value.data.length }})
+        </div>
         <div class="slot" v-if="false">
           <slot></slot>
         </div>
@@ -172,7 +165,7 @@
           :key="index"
           :indent="indent + 1"
           :value="arr.value"
-          :name="getName(isArray(), arr)"
+          :name="getName(value.isArray(), arr)"
         >
         </ui-prop>
       </div>
@@ -194,109 +187,98 @@ 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 ccui from "@xuyanfeng/cc-ui";
+const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
+  ccui.components;
 
 export default defineComponent({
   name: "UiProp",
+  components: {
+    CCInput,
+    CCButton,
+    CCInputNumber,
+    CCSelect,
+    CCCheckBox,
+    CCColor,
+  },
   props: {
-    name: {
-      type: String,
-      default: "",
-    },
-    indent: {
-      type: Number,
-      default: 0,
-    },
-    arrow: {
-      type: Boolean,
-      default: true,
-    },
+    name: { type: String, default: "" },
+    indent: { type: Number, default: 0 },
+    arrow: { type: Boolean, default: true },
+    step: { type: Number, default: 1 },
     value: {
       type: Object as PropType<Info | EngineData | EnumData>,
       default: () => {},
     },
-    step: {
-      type: Number,
-      default: 1,
-    },
   },
-
-  setup(props, ctx) {
+  setup(props, { emit }) {
+    const { value, step } = props;
+    const fold = ref(true);
     let clientX: number = 0;
-
     onMounted(() => {
       watchValue();
     });
     function watchValue() {
-      this.fold = true;
-      if (this.isArray()) {
-        this.subData = this.value.data;
+      fold.value = true;
+      if (value.isArray()) {
+        subData.value = value.data;
       } else {
-        this.subData = null;
+        subData.value = null;
       }
     }
-    const fold = ref(true);
     watch(props.value, () => {
       watchValue();
     });
     const subData = ref<Property[]>([]);
+    const propText = ref<HTMLDivElement>();
 
+    function _onMouseMove(event: MouseEvent) {
+      let x = event.clientX;
+      let calcStep = step || 0;
+      if (x > clientX) {
+        calcStep = Math.abs(calcStep);
+      } else {
+        calcStep = -Math.abs(calcStep);
+      }
+      emit("movestep", calcStep);
+      clientX = x;
+    }
+
+    function _onMouseUp(event: MouseEvent) {
+      document.removeEventListener("mousemove", _onMouseMove);
+      document.removeEventListener("mouseup", _onMouseUp);
+      document.removeEventListener("onselectstart", _onSelect);
+    }
+    function _onSelect() {
+      return false;
+    }
     return {
       fold,
+      propText,
       subData,
-      isInvalid() {
-        return this.value && this.value.type === DataType.Invalid;
-      },
-      isString() {
-        return this.value && this.value.type === DataType.String;
-      },
-      isText() {
-        return this.value && this.value.type === DataType.Text;
-      },
-      isNumber() {
-        return this.value && this.value.type === DataType.Number;
-      },
-      isVec2() {
-        return this.value && this.value.type === DataType.Vec2;
-      },
-      isVec3() {
-        return this.value && this.value.type === DataType.Vec3;
-      },
-      isEnum() {
-        return this.value && this.value.type === DataType.Enum;
-      },
-      isBool() {
-        return this.value && this.value.type === DataType.Bool;
-      },
-      isColor() {
-        return this.value && this.value.type === DataType.Color;
+      getEnumValues(data: any): Option[] {
+        const value: EnumData = data;
+        const ret: Option[] = [];
+        value.values.map((item) => {
+          ret.push({
+            label: item.name,
+            value: item.value,
+          });
+        });
+        return ret;
       },
       isArrayOrObject() {
-        return (
-          this.value &&
-          (this.value.type === DataType.Array ||
-            this.value.type === DataType.Object)
-        );
-      },
-      isObject() {
-        return this.value && this.value.type === DataType.Object;
-      },
-      isArray() {
-        return this.value && this.value.type === DataType.Array;
-      },
-      isImage() {
-        return this.value && this.value.type === DataType.Image;
+        return value && (value.isArray() || value.isObject());
       },
       isImageValid() {
-        return !!this.value.data;
-      },
-      isEngine() {
-        return this.value && this.value.type === DataType.Engine;
+        return !!value.data;
       },
       onPlaceInTree() {
-        Bus.emit(BusMsg.ShowPlace, this.value);
+        Bus.emit(BusMsg.ShowPlace, value);
       },
       isShowTooltip() {
-        const el: HTMLDivElement = this.$refs.propText as HTMLDivElement;
+        const el: HTMLDivElement = propText.value as HTMLDivElement;
         if (el) {
           if (el.scrollWidth > el.offsetWidth) {
             // 出现了省略号
@@ -306,8 +288,7 @@ export default defineComponent({
         return false;
       },
       getEngineTypeIcon() {
-        const value = this.value as EngineData;
-        switch (value.engineType) {
+        switch ((value as EngineData).engineType) {
           case "cc_Sprite": {
             return "el-icon-picture-outline";
           }
@@ -329,21 +310,20 @@ export default defineComponent({
         }
       },
       onClickFold() {
-        if (this.isObject() && this.fold && !this.subData) {
+        if (value.isObject() && fold && !subData) {
           // 请求object的item数据
-          Bus.emit(BusMsg.RequestObjectData, this.value, (info: Property[]) => {
-            this.fold = false;
-            this.subData = info;
+          Bus.emit(BusMsg.RequestObjectData, value, (info: Property[]) => {
+            fold.value = false;
+            subData.value = info;
           });
         } else {
-          this.fold = !this.fold;
+          fold.value = !fold.value;
         }
       },
-
       onShowValueInConsole() {
-        if (Array.isArray(this.value.path)) {
-          let uuid = this.value.path[0];
-          let key = this.value.path[1]; // todo 暂时只支持一级key
+        if (Array.isArray(value.path)) {
+          let uuid = value.path[0];
+          let key = value.path[1]; // todo 暂时只支持一级key
           if (uuid && key) {
             chrome.devtools.inspectedWindow.eval(
               `window.CCInspector.logValue('${uuid}','${key}')`
@@ -351,46 +331,24 @@ export default defineComponent({
           }
         }
       },
-
       onChangeValue() {
-        if (!this.value.readonly) {
-          connectBackground.postMessageToBackground(
-            Msg.SetProperty,
-            this.value
-          );
+        if (!value.readonly) {
+          connectBackground.postMessageToBackground(Msg.SetProperty, value);
         }
       },
       onPropNameMouseDown(event: MouseEvent) {
-        document.addEventListener("mousemove", this._onMouseMove);
-        document.addEventListener("mouseup", this._onMouseUp);
-        document.addEventListener("onselectstart", this._onSelect);
+        document.addEventListener("mousemove", _onMouseMove);
+        document.addEventListener("mouseup", _onMouseUp);
+        document.addEventListener("onselectstart", _onSelect);
       },
-
       colorReverse(OldColorValue: string) {
         OldColorValue = "0x" + OldColorValue.replace(/#/g, "");
         var str = "000000" + (0xffffff - parseInt(OldColorValue)).toString(16);
         return "#" + str.substring(str.length - 6, str.length);
       },
-      _onMouseMove(event: MouseEvent) {
-        let x = event.clientX;
-        let calcStep = this.step || 0;
-        if (x > this.clientX) {
-          calcStep = Math.abs(calcStep);
-        } else {
-          calcStep = -Math.abs(calcStep);
-        }
-        this.$emit("movestep", calcStep);
-        this.clientX = x;
-      },
-
-      _onMouseUp(event: MouseEvent) {
-        document.removeEventListener("mousemove", this._onMouseMove);
-        document.removeEventListener("mouseup", this._onMouseUp);
-        document.removeEventListener("onselectstart", this._onSelect);
-      },
-      _onSelect() {
-        return false;
-      },
+      _onMouseMove,
+      _onMouseUp,
+      _onSelect,
     };
   },
 });
diff --git a/cc-inspector/src/views/popup/index.vue b/cc-inspector/src/views/popup/index.vue
index 5e9fbae..ab5582a 100644
--- a/cc-inspector/src/views/popup/index.vue
+++ b/cc-inspector/src/views/popup/index.vue
@@ -3,10 +3,10 @@
     <div class="head">
       <div class="name">{{ title }}</div>
       <div style="flex: 1"></div>
-      <el-button
+      <CCButton
         class="el-icon-setting btn"
         @click="onClickOptions"
-      ></el-button>
+      ></CCButton>
     </div>
 
     <div class="wechat">
@@ -43,9 +43,12 @@
 import { defineComponent, onMounted, ref, provide, nextTick } from "vue";
 import CCP from "cc-plugin/src/ccp/entry-render";
 import { ChromeConst } from "cc-plugin/src/chrome/const";
+import ccui from "@xuyanfeng/cc-ui";
+const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
+  ccui.components;
 export default defineComponent({
   name: "popup",
-  components: {},
+  components: {CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor},
   setup(props, ctx) {
     const title = ref(CCP.manifest.name);
     const version = ref(CCP.manifest.version);