diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..251ce6d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,23 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
index f55bd93..c796ad0 100644
--- a/README.md
+++ b/README.md
@@ -1,78 +1,2 @@
# ccc-devtools
Cocos Creator 网页调试工具,运行时查看、修改节点树,实时更新节点属性,可视化缓存资源。
-
-> 当前分支适用于 cocos creator 2.0-2.3 版本,其他版本需切换到对应分支
-
-## 功能
-
-- 场景节点树实时显示,节点、组件属性实时显示更改
-
-![preview](./screenshots/preview1.gif)
-
-- 可视化缓存资源
-
-![preview](./screenshots/preview2.png)
-
-- 标记场景中节点位置
-
-![preview](./screenshots/preview3.png)
-
-- 输出节点、组件引用到控制台
-
-![preview](./screenshots/preview4.png)
-
-- cc控制台功能扩展
-
-![preview](./screenshots/preview5.png)
-
-## 全局使用
-
-1. 点击 Creator 右上角进入编辑器 resources 目录,再依次进入`static/preview-templates`目录
-
- ![t1](./screenshots/t1.png)
-
-2. 将本项目clone到上面的目录下,**如果使用下载压缩包的方式记得把后缀名-master去掉**
-
- ![t2](./screenshots/t2.png)
-
-3. 打开 `index.jade`,找到 `body` 将中间部分替换为 `include ./ccc-devtools/index.html`,**注意用tab键对齐**
-
- ![t3](./screenshots/t3.png)
-
-## 项目使用
-
-Cocos Creator 从 v2.2 开始新增了自定义网页预览功能。
-
-1. 重复上面的操作步骤,将修改后的 `preview-templates` 目录拷贝到项目根目录
-
-2. 将 `ccc-devtools/index.html` 里所有引用的资源路径 `app/editor/static/preview-templates/ccc-devtools/...` 替换为 `ccc-devtools/...`
-
-3. 重启 Cocos Creator
-
-## 自定义
-
-- 本项目使用了 vue 和 vuetify,可根据 [vuetify 文档](https://vuetifyjs.com/en/getting-started/quick-start/) 对页面进行修改
-
-- 节点、组件显示属性可在 `config.js` 里配置,目前支持 text,number,textarea,color,bool 几种类型
-
-## 需求、更新
-
-https://github.com/potato47/ccc-devtools
-
-如果没有更改源码,可直接在目录下 git pull
-
-论坛讨论地址:https://forum.cocos.com/t/creator-20190201/71578
-
-## 贡献指南
-
-- 版本号命名规则 https://semver.org/lang/zh-CN/ ,简单来讲,新功能第二位加一,修复bug第三位加一
-
-- 如果新增功能请在README中添加预览截图说明
-
-- 记得更新version.json中的版本号
-
-## 前人种树
-
-- https://github.com/vuejs/vue
-
-- https://github.com/vuetifyjs/vuetify
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
new file mode 100644
index 0000000..08908ed
--- /dev/null
+++ b/auto-imports.d.ts
@@ -0,0 +1,5 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+
+}
diff --git a/components.d.ts b/components.d.ts
new file mode 100644
index 0000000..53ed121
--- /dev/null
+++ b/components.d.ts
@@ -0,0 +1,23 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+ export interface GlobalComponents {
+ CCComponent: typeof import('./src/components/CCComponent.vue')['default']
+ CCNode: typeof import('./src/components/CCNode.vue')['default']
+ ElButton: typeof import('element-plus/es')['ElButton']
+ ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+ ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
+ ElInput: typeof import('element-plus/es')['ElInput']
+ ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+ ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+ ElTreeV2: typeof import('element-plus/es')['ElTreeV2']
+ PropItem: typeof import('./src/components/PropItem.vue')['default']
+ TreePanel: typeof import('./src/components/TreePanel.vue')['default']
+ UserComponent: typeof import('./src/components/UserComponent.vue')['default']
+ }
+}
diff --git a/config.js b/config.js
deleted file mode 100644
index 1f91255..0000000
--- a/config.js
+++ /dev/null
@@ -1,54 +0,0 @@
-const NEX_CONFIG = {
- nodeSchema: {
- node2d: {
- title: 'Node',
- key: 'cc.Node',
- rows: [
- { name: 'Name', key: 'name', type: 'text' },
- { name: 'X', key: 'x', type: 'number' },
- { name: 'Y', key: 'y', type: 'number' },
- { name: 'Width', key: 'width', type: 'number' },
- { name: 'Height', key: 'height', type: 'number' },
- { name: 'Angle', key: 'angle', type: 'number' },
- { name: 'ScaleX', key: 'scaleX', type: 'number' },
- { name: 'ScaleY', key: 'scaleY', type: 'number' },
- { name: 'Opacity', key: 'opacity', type: 'number' },
- { name: 'Color', key: 'hex_color', type: 'color' },
- { name: 'Group', key: 'group', type: 'text' },
- ]
- },
- node3d: {
- title: 'Node',
- key: 'cc.Node',
- rows: [
- // TODO:
- ]
- },
- },
- componentsSchema: {
- 'cc.Camera': {
- title: 'cc.Camera',
- key: 'cc.Camera',
- rows: [
- { name: 'Zoom Ratio', key: 'zoomRatio', type: 'number' },
- { name: 'Depth', key: 'depth', type: 'number' },
- { name: 'Bacground Color', key: 'hex_backgroundColor', rawKey: 'backgroundColor', type: 'color' },
- { name: 'Align with Screen', key: 'alignWithScreen', type: 'bool' },
- ]
- },
- 'cc.Sprite': {
- key: 'cc.Sprite',
- title: 'cc.Sprite',
- rows: []
- },
- 'cc.Label': {
- title: 'cc.Label',
- key: 'cc.Label',
- rows: [
- { name: 'String', key: 'string', type: 'textarea' },
- { name: 'Font Size', key: 'fontSize', type: 'number' },
- { name: 'Line Height', key: 'lineHeight', type: 'number' },
- ]
- }
- }
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index fd0eaae..ea3224a 100644
--- a/index.html
+++ b/index.html
@@ -1,249 +1,2 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ row.name }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ row.name }}
-
-
-