CocosPlugin/ccc-devtools
1
0
Fork 0
mirror of https://github.com/potato47/ccc-devtools.git synced 2024-12-26 03:39:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

测试

Browse Source
This commit is contained in:
Next 2022-07-26 10:16:56 +08:00
parent 256d5edc5a
commit 65d90e20b9
6 changed files with 59 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -1,2 +1,2 @@
<div id="app"></div> <div id="app" style="width: 400px;height: 100%;display: flex;flex-direction: column;justify-content: center;"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>

8
release/preview-template/index.ejs
View File

@ -18,9 +18,10 @@
<link rel="stylesheet" type="text/css" href="./index.css" /> <link rel="stylesheet" type="text/css" href="./index.css" />
</head> </head>
<body> <body>
<%- include(cocosToolBar, {config: config}) %> <%- include('./toolbar', {config: config}) %>
<div id="content" class="content"> <div id="content" class="content" style="flex-direction: row;">
<div class="contentWrap"> <% include ./dist/index.html %>
<div class="contentWrap" style="flex: 1;">
<div id="GameDiv" class="wrapper"> <div id="GameDiv" class="wrapper">
<div id="Cocos3dGameContainer"> <div id="Cocos3dGameContainer">
<canvas id="GameCanvas"></canvas> <canvas id="GameCanvas"></canvas>
@ -38,7 +39,6 @@
</div> </div>
</div> </div>
<p class="footer"> <p class="footer">
<% include ./dist/index.html %>
</p> </p>
</div> </div>
<%- include(cocosTemplate, {}) %> <%- include(cocosTemplate, {}) %>

46
release/preview-template/toolbar.ejs Normal file
View File

@ -0,0 +1,46 @@
<div class="toolbar disabled">
<div class="item"><button id="btn-show-devtools">CCDevtools</button></div>
<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="NONE">None</option>
<option value="VERBOSE">Verbose</option>
<option value="INFO">Info</option>
<option value="WARN">Warn</option>
<option value="ERROR">Error</option>
<option value="INFO_FOR_WEB_PAGE">Info For Web Page</option>
<option value="WARN_FOR_WEB_PAGE">Warn For Web Page</option>
<option value="ERROR_FOR_WEB_PAGE">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>
<div id="step-length">
<span>Step Length: </span>
<input type="text" value="1">
<span>ms</span>
</div>
</div>
<script>
const devtoolsBtn = document.getElementById('btn-show-devtools');
devtoolsBtn.addEventListener('click', () => {
cc.showDevtools = !cc.showDevtools;
if (cc.showDevtools) {
devtoolsBtn.classList.add('checked');
} else {
devtoolsBtn.classList.remove('checked');
}
}, false);
</script>

5
src/App.vue
View File

@ -5,13 +5,14 @@ let showTree = ref(false);
</script> </script>
<template> <template>
<div> <!-- <div>
<vue-final-modal v-model="showTree" classes="modal-container" content-class="modal-content" :hide-overlay="true" <vue-final-modal v-model="showTree" classes="modal-container" content-class="modal-content" :hide-overlay="true"
:click-to-close="false" :prevent-click="true" :drag="true" :fit-parent="true" drag-selector=".modal-drag"> :click-to-close="false" :prevent-click="true" :drag="true" :fit-parent="true" drag-selector=".modal-drag">
<TreePanel :show="showTree"></TreePanel> <TreePanel :show="showTree"></TreePanel>
</vue-final-modal> </vue-final-modal>
<el-button size="small" @click="showTree = !showTree">节点树</el-button> <el-button size="small" @click="showTree = !showTree">节点树</el-button>
</div> </div> -->
<TreePanel :show="true" style="border: 2px solid blue;"></TreePanel>
</template> </template>
<style scoped> <style scoped>

6
src/components/TreePanel.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div <!-- <div
style="width: 100%;height: 30px;background-color: #26282f;display: flex;align-items: center;justify-content: center;color: white;" style="width: 100%;height: 30px;background-color: #26282f;display: flex;align-items: center;justify-content: center;color: white;"
class="modal-drag"> class="modal-drag">
节点树 节点树
</div> </div> -->
<el-tree-v2 ref="treeView" :props="defaultProps" empty-text="正在加载场景" :highlight-current="true" <el-tree-v2 ref="treeView" :props="defaultProps" empty-text="正在加载场景" :highlight-current="true"
:expand-on-click-node="false" :default-expanded-keys="expandedKeys" @current-change="handleCurrentNodeChange" :expand-on-click-node="false" :default-expanded-keys="expandedKeys" @current-change="handleCurrentNodeChange"
@node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" :height="treeViewHeight"> @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" :height="treeViewHeight">
@ -11,7 +11,7 @@
<span :class="{ 'node-hide': !node.data.active }">{{ node.label }}</span> <span :class="{ 'node-hide': !node.data.active }">{{ node.label }}</span>
</template> </template>
</el-tree-v2> </el-tree-v2>
<div style="width: 100%;border-top: 2px solid #1d1e21;overflow: auto;flex: 1;"> <div style="width: 100%;border-top: 2px solid #1d1e21;overflow: auto;" :style="{ height: treeViewHeight }">
<template v-if="updateKey !== 0 && Utils.checkNodeValid(currentNode)"> <template v-if="updateKey !== 0 && Utils.checkNodeValid(currentNode)">
<el-scrollbar> <el-scrollbar>
<CCNode :cc-node="currentNode" :update-key="updateKey"></CCNode> <CCNode :cc-node="currentNode" :update-key="updateKey"></CCNode>

3
vite.config.ts
View File

@ -17,7 +17,8 @@ export default defineConfig({
], ],
base: '/dist/', base: '/dist/',
build: { build: {
outDir: './release/preview-template/dist', outDir: '/Users/next/projects/cocos/test360/preview-template/dist',
// outDir: './release/preview-template/dist',
emptyOutDir: true emptyOutDir: true
} }
}) })