From 65d90e20b9d6b90fe15c91315a166aafffad15d5 Mon Sep 17 00:00:00 2001
From: Next <1406099478@qq.com>
Date: Tue, 26 Jul 2022 10:16:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                           |  2 +-
 release/preview-template/index.ejs   |  8 ++---
 release/preview-template/toolbar.ejs | 46 ++++++++++++++++++++++++++++
 src/App.vue                          |  5 +--
 src/components/TreePanel.vue         |  6 ++--
 vite.config.ts                       |  3 +-
 6 files changed, 59 insertions(+), 11 deletions(-)
 create mode 100644 release/preview-template/toolbar.ejs
diff --git a/index.html b/index.html
index ea3224a..010ac30 100644
--- a/index.html
+++ b/index.html
@@ -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>
\ No newline at end of file
diff --git a/release/preview-template/index.ejs b/release/preview-template/index.ejs
index 148dfb0..2625eaa 100644
--- a/release/preview-template/index.ejs
+++ b/release/preview-template/index.ejs
@@ -18,9 +18,10 @@
         <link rel="stylesheet" type="text/css" href="./index.css" />
     </head>
     <body>
-        <%- include(cocosToolBar, {config: config}) %>
-        <div id="content" class="content">
-            <div class="contentWrap">
+        <%- include('./toolbar', {config: config}) %>
+        <div id="content" class="content" style="flex-direction: row;">
+            <% include ./dist/index.html %>
+            <div class="contentWrap" style="flex: 1;">
                 <div id="GameDiv" class="wrapper">
                     <div id="Cocos3dGameContainer">
                         <canvas id="GameCanvas"></canvas>
@@ -38,7 +39,6 @@
                 </div>
             </div>
             <p class="footer">
-                <% include ./dist/index.html %>
             </p>
         </div>
         <%- include(cocosTemplate, {}) %>
diff --git a/release/preview-template/toolbar.ejs b/release/preview-template/toolbar.ejs
new file mode 100644
index 0000000..bf3d3ee
--- /dev/null
+++ b/release/preview-template/toolbar.ejs
@@ -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>
diff --git a/src/App.vue b/src/App.vue
index 4d97c32..78f0707 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,13 +5,14 @@ let showTree = ref(false);
 </script>
 
 <template>
-  <div>
+  <!-- <div>
     <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">
       <TreePanel :show="showTree"></TreePanel>
     </vue-final-modal>
     <el-button size="small" @click="showTree = !showTree">节点树</el-button>
-  </div>
+  </div> -->
+  <TreePanel :show="true" style="border: 2px solid blue;"></TreePanel>
 </template>
 
 <style scoped>
diff --git a/src/components/TreePanel.vue b/src/components/TreePanel.vue
index 09d11bf..6847f47 100644
--- a/src/components/TreePanel.vue
+++ b/src/components/TreePanel.vue
@@ -1,9 +1,9 @@
 <template>
-  <div
+  <!-- <div
     style="width: 100%;height: 30px;background-color: #26282f;display: flex;align-items: center;justify-content: center;color: white;"
     class="modal-drag">
     节点树
-  </div>
+  </div> -->
   <el-tree-v2 ref="treeView" :props="defaultProps" empty-text="正在加载场景" :highlight-current="true"
     :expand-on-click-node="false" :default-expanded-keys="expandedKeys" @current-change="handleCurrentNodeChange"
     @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" :height="treeViewHeight">
@@ -11,7 +11,7 @@
       <span :class="{ 'node-hide': !node.data.active }">{{ node.label }}</span>
     </template>
   </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)">
       <el-scrollbar>
         <CCNode :cc-node="currentNode" :update-key="updateKey"></CCNode>
diff --git a/vite.config.ts b/vite.config.ts
index 9b301f3..469277b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,7 +17,8 @@ export default defineConfig({
   ],
   base: '/dist/',
   build: {
-    outDir: './release/preview-template/dist',
+    outDir: '/Users/next/projects/cocos/test360/preview-template/dist',
+    // outDir: './release/preview-template/dist',
     emptyOutDir: true
   }
 })
