ccc-devtools/index.html

<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">

<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>

    <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>

    <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>

</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/ -->