ccc-devtools/custom.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, {}) %>