diff --git a/README.md b/README.md
index 1b25aaf..8ccb998 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# ccc-devtools v2.3.2
+# ccc-devtools v2.3.3
 Cocos Creator 网页调试工具，运行时查看、修改节点树，实时更新节点属性，可视化显示缓存资源。
 
 ## 预览
diff --git a/css/themes/dark.css b/css/themes/dark.css
index 4669f70..3ab028b 100644
--- a/css/themes/dark.css
+++ b/css/themes/dark.css
@@ -2,7 +2,7 @@
 	background: #444 !important;
 }
 
-.right-pane *,
+.right-panel *,
 .ivu-split-trigger,
 .el-color-dropdown,
 .el-color-dropdown *:not(.el-button--text),
@@ -10,47 +10,48 @@
 .el-popover * ,
 #panelCtl .el-button{
 	border-color: #333 !important;
+	color: #bbb !important;
 }
 
 .el-popover,
 .el-color-dropdown input,
-.right-pane input,
-.right-pane textarea,
-.right-pane .el-checkbox__inner:not(.is-checked) {
+.right-panel input,
+.right-panel textarea,
+.right-panel .el-checkbox__inner:not(.is-checked) {
 	background-color: #333 !important;
 	color: #bbb !important;
 }
 
-.right-pane button,
-.right-pane span[role='button'],
-.right-pane .ant-tree,
-.right-pane .demo-split-pane,
-.right-pane .el-card,
-.right-pane .el-tree,
+.right-panel button,
+.right-panel span[role='button'],
+.right-panel .ant-tree,
+.right-panel .demo-split-pane,
+.right-panel .el-card,
+.right-panel .el-tree,
 .el-color-dropdown,
 .el-popover {
 	background-color: #222 !important;
 }
 
-.right-pane .el-button {
+.right-panel .el-button {
 	padding-left: 10px !important;
 	padding-right: 10px !important;
 }
 
-.right-pane .top-pane span,
-.right-pane .ant-tree,
-.right-pane .demo-split-pane,
-.right-pane .el-card,
-.right-pane .el-tree {
+.right-panel .top-pane span,
+.right-panel .ant-tree,
+.right-panel .demo-split-pane,
+.right-panel .el-card,
+.right-panel .el-tree {
 	color: #aaa !important;
 }
 
-.right-pane .ant-tree-node-selected {
+.right-panel .ant-tree-node-selected {
 	background-color: #456 !important;
 }
 
-.right-pane .ant-tree-node-content-wrapper:hover,
-.right-pane .el-tree-node .el-tree-node__content:hover {
+.right-panel .ant-tree-node-content-wrapper:hover,
+.right-panel .el-tree-node .el-tree-node__content:hover {
 	background-color: #567 !important;
 }
 
@@ -60,13 +61,15 @@
 	background-color: #367 !important;
 }
 
-.right-pane .el-checkbox__label,
-.right-pane .el-button,
+.right-panel .el-checkbox__label,
+.right-panel .el-button,
 .el-color-dropdown, button {
 	color: #59a !important;
 	background-color: #222 !important;
 }
 
+.tree-panel,
+.prop-panel,
 .ivu-modal-content,
 .ivu-table-column-center,
 .ivu-modal-header-inner {
diff --git a/index.html b/index.html
index 4aba1a3..fcdc55d 100644
--- a/index.html
+++ b/index.html
@@ -4,200 +4,195 @@
 <link rel="stylesheet" type="text/css" href="app/editor/static/preview-templates/ccc-devtools/css/style.css">
 
 <div id="app">
-	<div class="demo-split">
-		<Split v-model="splitLeft" v-if="isDevMode">
-			<!-- 左边游戏预览区域 -->
-			<div slot="left" class="demo-split-pane" id="game_panel"
-				style="display:flex;justify-content:left;align-items:center;height: 100vh;">
-				<div id="top" style="position: absolute;top:0;"></div>
-			</div>
-			<!-- 右边节点树和属性区域 -->
-			<div slot="right" class="demo-split-pane no-padding">
-				<Split v-model="splitRight" mode="vertical">
-					<!-- 节点树面板 -->
-					<div slot="top" class="demo-split-pane" style="padding-left: 5px;">
-						<el-input v-if="!isAutoRefreshTree" placeholder="搜索节点" v-model="filterText" size="mini"
-							id="searchInput"></el-input>
-						<v-tree v-if="isDevMode&&isAutoRefreshTree" :data="sceneTreeData" ref="sceneTree"
-							@select="handleNodesSelect"
-							style="min-width: 250px;height: 100%;overflow-x:hidden;overflow-y:auto;background: white;">
-						</v-tree>
-						<el-tree v-if="isDevMode&&!isAutoRefreshTree" :data="sceneTreeData" :draggable="true"
-							:props="nodeProps" :default-expanded-keys="defaultExpandedKeys" empty-text="暂无数据..."
-							:node-key="'_id'" :expand-on-click-node="false" :filter-node-method="filterNode"
-							ref="sceneTree" @node-click="handleNodeClick"
-							style="min-width: 250px;height: 100%;overflow-x:hidden;overflow-y:auto;">
-							<span class="custom-tree-node" slot-scope="{ node, data }">
-								<span
-									v-bind:style="{color: data.activeInHierarchy?'#606266':'#C0C4CC'}">{{ node.label }}</span>
-							</span>
-						</el-tree>
-						<el-button v-if="!isAutoRefreshTree" @click="handleRefreshTree" icon="el-icon-refresh"
-							size="mini" style="position: absolute;right:0;top:0;"></el-button>
-						<div style="position: absolute;right:0;bottom:0;width: 100px;height:20px;">
-							<span style="line-height:20px;">自动刷新</span>
-							<el-switch v-model="isAutoRefreshTree" active-color="#0099ff" inactive-color="gray">
-							</el-switch>
-						</div>
-
-						<!-- <el-button @click="handleSwitchTreeMode" icon="el-icon-refresh" size="mini" style="position: absolute;right:0;bottom:0;"></el-button> -->
-					</div>
-					<!-- 节点属性面板 -->
-					<div slot="bottom" class="demo-split-pane"
-						style="background: white;min-width: 250px;height: 100%;padding:5px 0;overflow-x:hidden;overflow-y:auto;">
-						<div v-if="node">
-							<el-row style="margin:5px 0;">
-								<el-col :span="2" style="text-align:center;padding-top:7px;padding-left:5px;">
-									<el-checkbox v-model="node.active"></el-checkbox>
-								</el-col>
-								<el-col :span="18">
-									<el-input v-model="node.name" size="mini"></el-input>
-								</el-col>
-								<el-col :span="4">
-									<div style="width: 100%;height:28px;border: solid 1px rgb(220, 223, 230);border-radius: 4px;text-align: center;"
-										@click="handleChangeNodeSchema"><span style="line-height: 28px;"
-											:style="{color: is3DNode?'#409EFF':'#606266'}">2.5d</span></div>
-								</el-col>
-
-							</el-row>
-							<el-card v-if="nodeSchema">
-								<div>
-									<span>{{ nodeSchema.title }}</span>
-									<el-button style="float: right; padding: 3px 0;" type="text"
-										@click="outputNodeHandler">输出引用</el-button>
-									<el-button style="float: right; padding: 3px 0;margin-right: 10px;" type="text"
-										@click="drawNodeRect">标记位置</el-button>
-								</div>
-								<hr style="margin: 10px 0;" />
-								<div>
-									<el-row style="height: 28px;margin-bottom:3px;" v-for="(row, ri) in nodeSchema.rows"
-										:key="ri">
-										<el-col v-for="(col, ci) in row" :key="ci" :span="col.span"
-											style="text-align: left;line-height: 28px;">
-											<span v-if="col.type == 'label'">{{col.field}}</span>
-											<el-input-number v-if="col.type == 'number'" v-model="node[col.field]"
-												controls-position="right" size="mini" style="width: 100%;">
-											</el-input-number>
-											<el-input-number v-if="col.type == '3DAngle'"
-												v-model="node.eulerAngles[col.field]" controls-position="right"
-												size="mini" style="width: 100%;"></el-input-number>
-											<el-input v-if="col.type == 'input'" v-model="node[col.field]" size="mini">
-											</el-input>
-											<el-color-picker v-if="col.type == 'color'" :ref="col.key" size="mini"
-												v-model="node[col.field]"></el-color-picker>
-										</el-col>
-									</el-row>
-								</div>
-							</el-card>
-							<el-card v-for="(section,index) in componentsSchema" :key="section.key"
-								style="margin: 10px 0;">
-								<div>
-									<el-checkbox v-model="node[section.key].enabled">{{ section.title }}</el-checkbox>
-									<el-button style="float: right; padding: 3px 0" type="text"
-										@click="outputComponentHandler(section.key)">输出引用</el-button>
-								</div>
-								<hr v-if="section.rows" style="margin: 10px 0;" />
-								<div>
-									<el-row style="height: 28px;margin-bottom:3px;" v-for="(row,ri) in section.rows"
-										:key="ri">
-										<el-col v-for="(col,ci) in row" :key="ci" :span="col.span"
-											style="text-align: left;line-height: 28px;">
-											<span v-if="col.type == 'label'">{{col.field}}</span>
-											<el-input-number v-if="col.type == 'number'"
-												v-model="node[section.key][col.field]" controls-position="right"
-												size="mini" style="width: 100%;"></el-input-number>
-											<el-input v-if="col.type == 'input'" v-model="node[section.key][col.field]"
-												size="mini"></el-input>
-											<el-input v-if="col.type == 'textarea'" type="textarea" :rows="1"
-												v-model="node[section.key][col.field]" size="mini">
-											</el-input>
-											<el-color-picker v-if="col.type == 'color'" :ref="col.key" size="mini"
-												v-model="node[section.key][col.field]"></el-color-picker>
-											<el-checkbox v-if="col.type == 'bool'"
-												v-model="node[section.key][col.field]"></el-checkbox>
-											<el-select v-if="col.type == 'select'"
-												v-model="node[section.key][col.field]" size="mini">
-												<el-option v-for="item in col.options" :key="item.value"
-													:label="item.label" :value="item.value">
-												</el-option>
-											</el-select>
-										</el-col>
-									</el-row>
-								</div>
-							</el-card>
-						</div>
-					</div>
-				</Split>
-			</div>
-		</Split>
-		<!-- 控制按钮 -->
-		<div id="panelCtl" style="position:absolute;left:5px;top:50px;height: 50px;display: flex;align-items: center;">
-			<el-popover width="150" placement="top-start" trigger="click">
-				<el-button type="info" icon="el-icon-setting" circle slot="reference" size="mini"></el-button>
-				<div>
-					<el-row style="margin:5px 0;">
-						<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
-							节点树
-						</el-col>
-						<el-col :span="12">
-							<el-switch style="margin: 5px;" v-model="isDevMode" @change="handleChangeMode"
-								active-color="#0099ff" inactive-color="gray">
-							</el-switch>
-						</el-col>
-					</el-row>
-					<el-row style="margin:5px 0;">
-						<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
-							调试信息
-						</el-col>
-						<el-col :span="12">
-							<el-switch style="margin: 5px;" v-model="isShowProfile" @change="handleChangeStats"
-								active-color="#0099ff" inactive-color="gray">
-							</el-switch>
-						</el-col>
-					</el-row>
-					<el-row style="margin:5px 0;">
-						<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
-							缓存
-						</el-col>
-						<el-col :span="12">
-							<el-switch style="margin: 5px;" v-model="isShowCache" @change="handleChangeCachePanel"
-								active-color="#0099ff" inactive-color="gray">
-							</el-switch>
-						</el-col>
-					</el-row>
-					<el-row style="margin:5px 0;">
-						<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
-							暗黑主题
-						</el-col>
-						<el-col :span="12">
-							<el-switch style="margin: 5px;" v-model="isDarkTheme" @change="handleChangeTheme"
-								active-color="#0099ff" inactive-color="gray">
-							</el-switch>
-						</el-col>
-					</el-row>
-					<el-row style="margin:5px 0;">
-						<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
-							检查版本
-						</el-col>
-						<el-col :span="12">
-							<el-switch style="margin: 5px;" v-model="isCheckVersion" @change="handleChangeCheckVersion"
-								active-color="#0099ff" inactive-color="gray">
-							</el-switch>
-						</el-col>
-					</el-row>
-					<el-row style="margin:5px 0;">
-						<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
-							源码
-						</el-col>
-						<el-col :span="12">
-							<el-badge value="new" :hidden="!needUpdate">
-								<Icon style="margin: 5px;" type="logo-github" size="24" @click="openGithub" />
-							</el-badge>
-						</el-col>
-					</el-row>
-				</div>
-			</el-popover>
+	<div v-if="isDevMode" style="display: flex;min-height: 100vh;">
+		<!-- 左边游戏预览区域 -->
+		<div id="game_panel"
+			style="display:flex;flex:auto;flex-direction: column;">
+			<div id="top" style="flex: none"></div>
 		</div>
+		<!-- 右边节点树和属性区域 -->
+		<div class="right-panel" style="flex: none;display: block;width: 400px;">
+			<!-- 节点树面板 -->
+			<div class="tree-panel" style="height: 50vh;overflow: auto;border-bottom: 1px solid #2d2d2d;">
+				<el-input v-if="!isAutoRefreshTree" placeholder="搜索节点" v-model="filterText" size="mini"
+					id="searchInput"></el-input>
+				<v-tree v-if="isDevMode&&isAutoRefreshTree" :data="sceneTreeData" ref="sceneTree"
+					@select="handleNodesSelect"
+					style="min-width: 250px;height: 100%;overflow-x:hidden;overflow-y:auto;background: white;">
+				</v-tree>
+				<el-tree v-if="isDevMode&&!isAutoRefreshTree" :data="sceneTreeData" :draggable="true"
+					:props="nodeProps" :default-expanded-keys="defaultExpandedKeys" empty-text="暂无数据..."
+					:node-key="'_id'" :expand-on-click-node="false" :filter-node-method="filterNode"
+					ref="sceneTree" @node-click="handleNodeClick"
+					style="min-width: 250px;height: 100%;overflow-x:hidden;overflow-y:auto;">
+					<span class="custom-tree-node" slot-scope="{ node, data }">
+						<span
+							v-bind:style="{color: data.activeInHierarchy?'#606266':'#C0C4CC'}">{{ node.label }}</span>
+					</span>
+				</el-tree>
+				<el-button v-if="!isAutoRefreshTree" @click="handleRefreshTree" icon="el-icon-refresh"
+					size="mini" style="position: absolute;right:0;top:0;"></el-button>
+				<div style="position: absolute;right:0;bottom:51vh;width: 100px;height:20px;">
+					<span style="line-height:20px;">自动刷新</span>
+					<el-switch v-model="isAutoRefreshTree" active-color="#0099ff" inactive-color="gray">
+					</el-switch>
+				</div>
+
+				<!-- <el-button @click="handleSwitchTreeMode" icon="el-icon-refresh" size="mini" style="position: absolute;right:0;bottom:0;"></el-button> -->
+			</div>
+			<!-- 节点属性面板 -->
+			<div class="prop-panel" style="background: white;height: 50vh;overflow:auto;">
+				<div v-if="node">
+					<el-row style="margin:5px 0;">
+						<el-col :span="2" style="text-align:center;padding-top:7px;padding-left:5px;">
+							<el-checkbox v-model="node.active"></el-checkbox>
+						</el-col>
+						<el-col :span="18">
+							<el-input v-model="node.name" size="mini"></el-input>
+						</el-col>
+						<el-col :span="4">
+							<div style="width: 100%;height:28px;border: solid 1px rgb(220, 223, 230);border-radius: 4px;text-align: center;"
+								@click="handleChangeNodeSchema"><span style="line-height: 28px;"
+									:style="{color: is3DNode?'#409EFF':'#606266'}">2.5d</span></div>
+						</el-col>
+
+					</el-row>
+					<el-card v-if="nodeSchema">
+						<div>
+							<span>{{ nodeSchema.title }}</span>
+							<el-button style="float: right; padding: 3px 0;" type="text"
+								@click="outputNodeHandler">输出引用</el-button>
+							<el-button style="float: right; padding: 3px 0;margin-right: 10px;" type="text"
+								@click="drawNodeRect">标记位置</el-button>
+						</div>
+						<hr style="margin: 10px 0;" />
+						<div>
+							<el-row style="height: 28px;margin-bottom:3px;" v-for="(row, ri) in nodeSchema.rows"
+								:key="ri">
+								<el-col v-for="(col, ci) in row" :key="ci" :span="col.span"
+									style="text-align: left;line-height: 28px;">
+									<span v-if="col.type == 'label'">{{col.field}}</span>
+									<el-input-number v-if="col.type == 'number'" v-model="node[col.field]"
+										controls-position="right" size="mini" style="width: 100%;">
+									</el-input-number>
+									<el-input-number v-if="col.type == '3DAngle'"
+										v-model="node.eulerAngles[col.field]" controls-position="right"
+										size="mini" style="width: 100%;"></el-input-number>
+									<el-input v-if="col.type == 'input'" v-model="node[col.field]" size="mini">
+									</el-input>
+									<el-color-picker v-if="col.type == 'color'" :ref="col.key" size="mini"
+										v-model="node[col.field]"></el-color-picker>
+								</el-col>
+							</el-row>
+						</div>
+					</el-card>
+					<el-card v-for="(section,index) in componentsSchema" :key="section.key"
+						style="margin: 10px 0;">
+						<div>
+							<el-checkbox v-model="node[section.key].enabled">{{ section.title }}</el-checkbox>
+							<el-button style="float: right; padding: 3px 0" type="text"
+								@click="outputComponentHandler(section.key)">输出引用</el-button>
+						</div>
+						<hr v-if="section.rows" style="margin: 10px 0;" />
+						<div>
+							<el-row style="height: 28px;margin-bottom:3px;" v-for="(row,ri) in section.rows"
+								:key="ri">
+								<el-col v-for="(col,ci) in row" :key="ci" :span="col.span"
+									style="text-align: left;line-height: 28px;">
+									<span v-if="col.type == 'label'">{{col.field}}</span>
+									<el-input-number v-if="col.type == 'number'"
+										v-model="node[section.key][col.field]" controls-position="right"
+										size="mini" style="width: 100%;"></el-input-number>
+									<el-input v-if="col.type == 'input'" v-model="node[section.key][col.field]"
+										size="mini"></el-input>
+									<el-input v-if="col.type == 'textarea'" type="textarea" :rows="1"
+										v-model="node[section.key][col.field]" size="mini">
+									</el-input>
+									<el-color-picker v-if="col.type == 'color'" :ref="col.key" size="mini"
+										v-model="node[section.key][col.field]"></el-color-picker>
+									<el-checkbox v-if="col.type == 'bool'"
+										v-model="node[section.key][col.field]"></el-checkbox>
+									<el-select v-if="col.type == 'select'"
+										v-model="node[section.key][col.field]" size="mini">
+										<el-option v-for="item in col.options" :key="item.value"
+											:label="item.label" :value="item.value">
+										</el-option>
+									</el-select>
+								</el-col>
+							</el-row>
+						</div>
+					</el-card>
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- 控制按钮 -->
+	<div id="panelCtl" style="position:absolute;left:5px;top:50px;height: 50px;display: flex;align-items: center;">
+		<el-popover width="150" placement="top-start" trigger="click">
+			<el-button type="info" icon="el-icon-setting" circle slot="reference" size="mini"></el-button>
+			<div>
+				<el-row style="margin:5px 0;">
+					<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
+						节点树
+					</el-col>
+					<el-col :span="12">
+						<el-switch style="margin: 5px;" v-model="isDevMode" @change="handleChangeMode"
+							active-color="#0099ff" inactive-color="gray">
+						</el-switch>
+					</el-col>
+				</el-row>
+				<el-row style="margin:5px 0;">
+					<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
+						调试信息
+					</el-col>
+					<el-col :span="12">
+						<el-switch style="margin: 5px;" v-model="isShowProfile" @change="handleChangeStats"
+							active-color="#0099ff" inactive-color="gray">
+						</el-switch>
+					</el-col>
+				</el-row>
+				<el-row style="margin:5px 0;">
+					<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
+						缓存
+					</el-col>
+					<el-col :span="12">
+						<el-switch style="margin: 5px;" v-model="isShowCache" @change="handleChangeCachePanel"
+							active-color="#0099ff" inactive-color="gray">
+						</el-switch>
+					</el-col>
+				</el-row>
+				<el-row style="margin:5px 0;">
+					<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
+						暗黑主题
+					</el-col>
+					<el-col :span="12">
+						<el-switch style="margin: 5px;" v-model="isDarkTheme" @change="handleChangeTheme"
+							active-color="#0099ff" inactive-color="gray">
+						</el-switch>
+					</el-col>
+				</el-row>
+				<el-row style="margin:5px 0;">
+					<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
+						检查版本
+					</el-col>
+					<el-col :span="12">
+						<el-switch style="margin: 5px;" v-model="isCheckVersion" @change="handleChangeCheckVersion"
+							active-color="#0099ff" inactive-color="gray">
+						</el-switch>
+					</el-col>
+				</el-row>
+				<el-row style="margin:5px 0;">
+					<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
+						源码
+					</el-col>
+					<el-col :span="12">
+						<el-badge value="new" :hidden="!needUpdate">
+							<Icon style="margin: 5px;" type="logo-github" size="24" @click="openGithub" />
+						</el-badge>
+					</el-col>
+				</el-row>
+			</div>
+		</el-popover>
 	</div>
 	<!-- 缓存面板弹窗 -->
 	<Modal v-model="isShowCache" width="800" :mask-closable="false" :mask="false" scrollable @on-cancel="closeCachePanel()" :title="cacheTitle" footer-hide="true">
diff --git a/js/app.js b/js/app.js
index 6a6e923..bc68763 100644
--- a/js/app.js
+++ b/js/app.js
@@ -519,10 +519,10 @@ let app = new Vue({
                 let borderNode = new cc.Node();
                 let bgNode = new cc.Node();
                 let graphics = bgNode.addComponent(cc.Graphics);
-                let canvas = cc.find('Canvas');
-                canvas.addChild(bgNode);
+                let scene = cc.director.getScene();
+                scene.addChild(bgNode);
                 bgNode.addChild(borderNode);
-                bgNode.position = canvas.convertToNodeSpaceAR(rect.center);
+                bgNode.position = scene.convertToNodeSpaceAR(rect.center);
                 let isZeroSize = rect.width === 0 || rect.height === 0;
                 if (isZeroSize) {
                     graphics.circle(0, 0, 100);
diff --git a/version.json b/version.json
index 08ef89b..af8bcf2 100644
--- a/version.json
+++ b/version.json
@@ -1,6 +1,6 @@
 {
     "name": "ccc-devtools",
-    "version": "2.3.2",
+    "version": "2.3.3",
     "author": "Next",
     "repo": "https://github.com/potato47/ccc-devtools.git"
 }
\ No newline at end of file