模型查看器-添加split

src/designer/Model3DView.vue

@@ -5,11 +5,16 @@
       <span>文件上传</span>
     </div>
     <div class="main-content">
+      <Split class="model3d-content" :direction="'horizontal'">
+        <SplitArea class="model3d-canvas" :size="70">
           <!-- Three.js 渲染画布 -->
           <div class="canvas-container" ref="canvasContainer"></div>
-
+        </SplitArea>
+        <SplitArea class="model3d-gui" :size="30">
           <!-- 右侧面板 -->
           <div class="gui-panel" ref="guiPanel"></div>
+        </SplitArea>
+      </Split>
     </div>
   </div>
 </template>
@@ -22,7 +27,8 @@ import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
 import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
 import * as dat from 'three/examples/jsm/libs/lil-gui.module.min.js'
 import Stats from 'three/examples/jsm/libs/stats.module'
-
+import Split from '@/components/split/split.vue'
+import SplitArea from '@/components/split/split-area.vue'
 // DOM refs
 const canvasContainer = ref(null)
 const guiPanel = ref(null)
@@ -353,11 +359,12 @@ function handleFileUpload(event) {
   // modelGroup.scale.set(1, 1, 1)
 }
 </script>
-<style scoped>
+<style scoped lang="less">
 .model3d-view {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  overflow: hidden;
 
   .dialog-container {
     display: flex;
@@ -375,19 +382,28 @@ function handleFileUpload(event) {
     display: flex;
     flex: 1;
     overflow: hidden;
+    .model3d-content{
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+    }
   }
 
   .canvas-container {
-    flex: 3;
+    width: 100%;
+    height:100%;
     position: relative;
   }
 
   .gui-panel {
-    flex: 1;
     border-left: 1px solid #ccc;
-    background: #fff;
+    background: #111;
-    padding: 10px;
+    width: 100%;
+    height:100%;
     overflow-y: auto;
+    :deep(.lil-gui.root){
+      width: 100%;
+    }
   }
 }
 

src/designer/menus/Model3DView.ts

@@ -17,7 +17,8 @@ export default defineMenu((menus) => {
             showClose: true,
             showMax: true,
             showCancelButton: false,
-            showOkButton: false
+            showOkButton: false,
+            dialogClass:'model-3d-view-wrap',
           })
         }
       }

src/views/ModelMain.less

@@ -278,3 +278,16 @@
   margin:5px 0;
   border-color:#656668
 }
+
+.model-3d-view-wrap.el-dialog.resize-dialog{
+  padding:0!important;
+  .el-dialog__footer{
+    //padding-top:8px;
+    display: none;
+  }
+  .el-dialog__header{
+    display: flex;
+    align-items: center;
+    padding:8px 0 8px 8px;
+  }
+}