258 lines
14 KiB
HTML
258 lines
14 KiB
HTML
|
<link href="./libs/css/materialdesignicons.min.css" rel="stylesheet"
|
||
|
|
type="text/css">
|
||
|
|
<link href="./libs/css/vuetify.min.css" rel="stylesheet" type="text/css">
|
||
|
|
<style>
|
||
|
|
html {
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<v-app id="app">
|
||
|
|
<v-app-bar app clipped-left color="gray" dense v-if="isShowTop">
|
||
|
|
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||
|
|
<div id="recompiling"><span>Recompiling...</span></div>
|
||
|
|
<v-spacer></v-spacer>
|
||
|
|
<%- include(cocosToolBar, {config: config}) %>
|
||
|
|
<div class="toolbar">
|
||
|
|
<!-- <div class="toolbar disabled"> -->
|
||
|
|
<!-- <div class="item">
|
||
|
|
<select id="opts-device" value="<%=config.device%>">
|
||
|
|
<% Object.keys(devices).forEach((key) => {%>
|
||
|
|
<option value="<%=key%>"><%=devices[key].name%>(<%=devices[key].width%> X <%=devices[key].height%>)</option>
|
||
|
|
<% }) %>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="item"><button id="btn-rotate" class="<%=config.rotate ? 'checked' : ''%>">Rotate</button></div>
|
||
|
|
<span style="font-size: small;" class="item">Debug Mode:</span>
|
||
|
|
<div class="item">
|
||
|
|
<select id="opts-debug-mode" value="<%=config.debugMode%>">
|
||
|
|
<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"><button id="btn-show-fps" class="<%=config.showFps ? 'checked' : ''%>">Show FPS</button></div>
|
||
|
|
<div class="item">
|
||
|
|
<span style="font-size: small;" class="item">FPS:</span><input id="input-set-fps" type="number" value="<%=config.fps%>" />
|
||
|
|
</div>
|
||
|
|
<div style="margin-right: 0;" class="item"><button id="btn-pause">Pause</button><button id="btn-step">Step</button></div>
|
||
|
|
<div class="item"><button id="btn-step" style="display: none;">Step</button></div> -->
|
||
|
|
<v-icon @click="openCocosDocs" small>mdi-cloud-search</v-icon>
|
||
|
|
<v-icon @click="openCocosForum" small>mdi-forum</v-icon>
|
||
|
|
<v-icon @click="openCacheDialog" small>mdi-table</v-icon>
|
||
|
|
<v-icon @click="openGithub" small>mdi-home</v-icon>
|
||
|
|
</div>
|
||
|
|
</v-app-bar>
|
||
|
|
|
||
|
|
<div v-if="!isShowTop">
|
||
|
|
<div id="recompiling"><span>Recompiling...</span></div>
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<v-navigation-drawer v-model="drawer" app clipped fixed width="512" v-if="isShowTop">
|
||
|
|
<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, open }">
|
||
|
|
<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 && selectedNode.parent">
|
||
|
|
<!-- 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;" @click="drawNodeRect()">
|
||
|
|
mdi-adjust</v-icon>
|
||
|
|
<v-icon @click="outputNodeHandler()">mdi-send</v-icon>
|
||
|
|
</div>
|
||
|
|
</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr v-for="row in nodeSchema.rows" :key="row.name">
|
||
|
|
<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"
|
||
|
|
v-model="selectedNode[row.key]"></v-color-picker>
|
||
|
|
<v-simple-checkbox v-else-if="row.type == 'bool'" v-model="selectedNode[row.key]"
|
||
|
|
style="padding: 10px;width: 100%;"></v-simple-checkbox>
|
||
|
|
<input v-else-if="row.type == 'object_number'" type="number" v-model.number="selectedNode[row.parentKey][row.key]"
|
||
|
|
style="padding: 10px;width: 100%;" @input="onSubPropInput(selectedNode, row)"></input>
|
||
|
|
<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 @click="outputComponentHandler(component.key)">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"
|
||
|
|
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>
|
||
|
|
<v-simple-checkbox v-else-if="row.type == 'bool'"
|
||
|
|
v-model="selectedNode[component.key][row.key]" style="padding: 10px;width: 100%;">
|
||
|
|
</v-simple-checkbox>
|
||
|
|
<input v-else-if="row.type == 'number'" type="number" v-model.number="selectedNode[component.key][row.key]"
|
||
|
|
style="padding: 10px;width: 100%;"></input>
|
||
|
|
<input v-else :type="row.type" v-model="selectedNode[component.key][row.key]"
|
||
|
|
style="padding: 10px;width: 100%;"></input>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="selectedNode && !selectedNode.parent">
|
||
|
|
<!-- TODO:场景根节点 -->
|
||
|
|
</template>
|
||
|
|
</v-container>
|
||
|
|
</v-navigation-drawer>
|
||
|
|
|
||
|
|
<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"><%=tip_sceneIsEmpty%></div>
|
||
|
|
</div>
|
||
|
|
<div class="error" id="error">
|
||
|
|
<div class="title">Error <i>(Please open the console to see detailed errors)</i></div>
|
||
|
|
<div class="error-main"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p class="footer">
|
||
|
|
Created with <a href="https://www.cocos.com/products" target="_blank" title="Cocos Creator 3D">Cocos Creator 3D</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</v-container>
|
||
|
|
</v-content>
|
||
|
|
|
||
|
|
<v-dialog v-model="cacheDialog" persistent scrollable>
|
||
|
|
<v-card>
|
||
|
|
<v-card-title>
|
||
|
|
{{ cacheTitle }}
|
||
|
|
<v-spacer></v-spacer>
|
||
|
|
<v-text-field v-model="cacheSearchText" append-icon="mdi-magnify" label="Search" single-line
|
||
|
|
hide-details>
|
||
|
|
</v-text-field>
|
||
|
|
</v-card-title>
|
||
|
|
<v-divider></v-divider>
|
||
|
|
<v-card-text>
|
||
|
|
<v-data-table :headers="cacheHeaders" :items="cacheData" :search="cacheSearchText" :sort-by="['size']"
|
||
|
|
click:row="openGithub"
|
||
|
|
:sort-desc="[true]" :footer-props="{
|
||
|
|
showFirstLastPage: true,
|
||
|
|
firstIcon: 'mdi-chevron-double-left',
|
||
|
|
lastIcon: 'mdi-chevron-double-right',
|
||
|
|
}">
|
||
|
|
<template v-slot:item.size="{ item }">
|
||
|
|
{{ item.size == -1 ? '_' : (item.size +'MB') }}
|
||
|
|
</template>
|
||
|
|
<template v-slot:item.preview="{ item }">
|
||
|
|
<div style="height: 60px;display: flex;align-items: center;">
|
||
|
|
<img :src="window.location.protocol + '//' + window.location.host + '/' + item.preview"
|
||
|
|
style="max-height: 60px;max-width: 120px;" v-if="item.preview">
|
||
|
|
<template v-else>_</template>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</v-data-table>
|
||
|
|
</v-card-text>
|
||
|
|
<v-divider></v-divider>
|
||
|
|
<v-card-actions>
|
||
|
|
<v-btn color="blue darken-1" text @click="cacheDialog = false">Close</v-btn>
|
||
|
|
<v-spacer></v-spacer>
|
||
|
|
<v-switch v-model="cacheOnlyTexture" label="只显示纹理"></v-switch>
|
||
|
|
</v-card-actions>
|
||
|
|
</v-card>
|
||
|
|
</v-dialog>
|
||
|
|
|
||
|
|
</v-app>
|
||
|
|
|
||
|
|
<script src="./libs/js/vue.min.js"></script>
|
||
|
|
<script src="./libs/js/vuetify.js"></script>
|
||
|
|
<script src="./config.js"></script>
|
||
|
|
<script src="./libs/js/cc-console-utils.js"></script>
|
||
|
|
<script src="./preview.js"></script>
|
||
|
|
|
||
|
|
<%- include(cocosTemplate, {}) %>
|