ccc-devtools/index.html

<link rel="stylesheet" type="text/css" href="app/editor/static/preview-templates/ccc-devtools/libs/vue-beauty/css/vue-beauty.min.css">
<link rel="stylesheet" type="text/css" href="app/editor/static/preview-templates/ccc-devtools/libs/element/css/element-ui.css">
<link rel="stylesheet" type="text/css" href="app/editor/static/preview-templates/ccc-devtools/libs/iview/css/iview.css">
<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-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>
	</div>
	<!-- 缓存面板弹窗 -->
	<Modal v-model="isShowCache" width="800" :mask-closable="false" :mask="false" scrollable @on-cancel="closeCachePanel()" :title="cacheTitle" footer-hide="true">
		<i-table border :columns="cacheColumns" height="600" size="small" :data="cacheData" :loading="cacheDataLoading">
			<template slot-scope="{ row, index }" slot="cache_preview">
				<img :src="window.location.protocol + '//' + window.location.host + '/' + row.preview" style="max-height: 40px;max-width: 120px;" v-if="row.preview">
				<div v-if="!row.preview" style="max-height: 40px;">_</div>
			</template>
			<template slot-scope="{ row, index }" slot="cache_action">
				<i-button type="primary" size="small" @click="showCacheItem(row.id)">Detail</i-button>
				<i-button type="error" size="small" @click="releaseCacheItem(row.id)">Release</i-button>
			</template>
			<template slot-scope="{ row, index }" slot="cache_size">
				{{row.size !== -1 ? row.size + 'MB' : '_'}}
			</template>
		</i-table>
	</Modal>
</div>

<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/vue/vue.min.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/vue-beauty/js/vue-beauty.min.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/element/js/element-ui.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/iview/js/iview.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/stats/Stats.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/config.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/js/app.js"></script>