CocosPlugin/ccc-devtools
1
0
Fork 0
mirror of https://github.com/potato47/ccc-devtools.git synced 2025-10-13 10:35:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

使用vuetify重构

Browse Source
This commit is contained in:
Next
2020-04-07 00:51:08 +08:00
parent 515259a06b
commit a6462012a1
35 changed files with 224 additions and 13173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

367
index.html
View File

@@ -1,222 +1,155 @@
<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">
<link href="ccc-devtools/libs/css/materialdesignicons.min.css" rel="stylesheet" type="text/css">
<link href="ccc-devtools/libs/css/vuetify.min.css" rel="stylesheet" type="text/css">
<div id="app">
<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>
<v-app id="app">
<v-app-bar app clipped-left color="gray" dense v-if="true">
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<!-- <v-toolbar-title class="mr-5 align-center">
<span class="title"><a>ccc-devtools</a></span>
</v-toolbar-title> -->
<div id="recompiling"><span>Recompiling...</span></div>
<v-spacer></v-spacer>
<div class="toolbar">
<div class="item">
<select id="opts-device">
<option value="0">Default</option>
</select>
</div>
<div class="item">
<v-btn id="btn-rotate" small height="25"><span style="color: #aaa;">Rotate</span></v-btn>
</div>
<span style="font-size: small;display: none;" class="item">Debug Mode:</span>
<div class="item" style="display: none;">
<select id="opts-debug-mode">
<option value="0">None</option>
<option value="1">Info</option>
<option value="2">Warn</option>
<option value="3">Error</option>
<option value="4">Info For Web Page</option>
<option value="5">Warn For Web Page</option>
<option value="6">Error For Web Page</option>
</select>
</div>
<div class="item">
<v-btn id="btn-show-fps" small height="25"><span style="color: #aaa;">Show FPS</span></v-btn>
</div>
<div class="item">
<span style="font-size: small;color: #aaa;" class="item">FPS:</span><input id="input-set-fps"
type="number" />
</div>
<div style="margin-right: 0px;" class="item">
<v-btn id="btn-pause" small height="25"><span style="color: #aaa;">Pause</span></v-btn>
</div>
<div class="item">
<v-btn id="btn-step" style="display: none;" small height="25">
<span style="color: #aaa;">Step</span>
</v-btn>
</div>
<div class="item">
<v-btn id="btn-recompile" small height="25"><span style="color: #aaa;">Recompile</span></v-btn>
</div>
</div>
</v-app-bar>
<!-- <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>
<v-navigation-drawer v-model="drawer" app clipped fixed width="512">
<v-container style="height: 50%;overflow: auto;">
<v-text-field v-model="treeSearchText" dense label="Search Node or Component" dark flat solo-inverted
hide-details clearable clear-icon="mdi-close-circle-outline"></v-text-field>
<v-treeview :items="treeData" item-key="id" dense activatable :search="treeSearchText"
:active.sync="selectedNodes">
<template v-slot:label="{ item, active }">
<label v-if="item.active" style="color: white;">{{ item.name }}</label>
<label v-else style="color: gray;">{{ item.name }}</label>
</template>
</v-treeview>
</v-container>
<v-container style="border-top: 2px solid darkgray;height: 50%;overflow-y: auto;">
<template v-if="selectedNode">
<!-- Node -->
<table style="width: 100%;color: white;" border="1">
<thead>
<tr>
<th colspan="2" style="text-align: left; padding: 10px;">
<div class="float-left" style="display:inline-flex;">
<v-simple-checkbox v-model="selectedNode.active"></v-simple-checkbox>
<span style="margin-left: 10px;">{{ nodeSchema.title }}</span>
</div>
<div class="float-right">
<v-icon style="margin-left: 10px;margin-right: 10px;">mdi-adjust</v-icon>
<v-icon>mdi-send</v-icon>
</div>
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in nodeSchema.rows" :key="row.key">
<td style="padding: 10px;width: 40%;">{{ row.name }}</td>
<td style="width: 60%;">
<v-color-picker v-if="row.type == 'color'" class="ma-2" canvas-height="80" width="259"
hide-inputs v-model="selectedNode[row.key]"></v-color-picker>
<input v-else :type="row.type" v-model="selectedNode[row.key]"
style="padding: 10px;width: 100%;"></input>
</td>
</tr>
</tbody>
</table>
<!-- Components -->
<table v-for="component in componentsSchema" style="width: 100%;color: white;" border="1">
<thead>
<tr>
<th colspan="2" style="text-align: left; padding: 10px;">
<div class="float-left" style="display:inline-flex;">
<v-simple-checkbox v-model="selectedNode[component.key].enabled">
</v-simple-checkbox>
<span style="margin-left: 10px;">{{ component.title }}</span>
</div>
<div class="float-right">
<v-icon>mdi-send</v-icon>
</div>
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in component.rows" :key="row.key">
<td style="padding: 10px;width: 40%;">{{ row.name }}</td>
<td style="width: 60%;">
<v-color-picker v-if="row.type == 'color'" class="ma-2" canvas-height="80" width="259"
hide-inputs v-model="selectedNode[component.key][row.key]"></v-color-picker>
<textarea v-else-if="row.type == 'textarea'" rows="1"
v-model="selectedNode[component.key][row.key]" style="padding: 10px;width: 100%;">
</textarea>
<input v-else :type="row.type" v-model="selectedNode[component.key][row.key]"
style="padding: 10px;width: 100%;"></input>
</td>
</tr>
</tbody>
</table>
</template>
</v-container>
</v-navigation-drawer>
</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">
<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>
<v-content>
<v-container fill-height>
<div id="content" class="content">
<div class="contentWrap">
<div id="GameDiv" class="wrapper"><canvas id="GameCanvas"></canvas>
<div id="splash">
<div class="progress-bar stripes"><span></span></div>
</div>
<div id="bulletin">
<div id="sceneIsEmpty" class="inner">预览场景中啥都没有，加点什么，或在编辑器中打开其它场景吧</div>
</div>
</div>
</div>
</div>
</v-container>
</v-content>
<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>
</v-app>
<script src="ccc-devtools/libs/js/vue.min.js"></script>
<script src="ccc-devtools/libs/js/vuetify.js"></script>
<script src="ccc-devtools/config.js"></script>
<script src="ccc-devtools/preview.js"></script>
<!-- app/editor/static/preview-templates/ -->