From a95ab9cef293cf89f95921f4974a2e870da3edf4 Mon Sep 17 00:00:00 2001
From: liupeng <511646242@qq.com>
Date: Thu, 22 May 2025 15:52:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E6=9F=A5=E7=9C=8B=E5=99=A8-?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0split?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/designer/Model3DView.vue      | 38 +++++++++++++++++++++++++++-----------
 src/designer/menus/Model3DView.ts |  3 ++-
 src/views/ModelMain.less          | 13 +++++++++++++
 3 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/designer/Model3DView.vue b/src/designer/Model3DView.vue
index c12430b..16cdf18 100644
--- a/src/designer/Model3DView.vue
+++ b/src/designer/Model3DView.vue
@@ -5,11 +5,16 @@
       <span>文件上传</span>
     </div>
     <div class="main-content">
-      <!-- Three.js 渲染画布 -->
-      <div class="canvas-container" ref="canvasContainer"></div>
-
-      <!-- 右侧面板 -->
-      <div class="gui-panel" ref="guiPanel"></div>
+      <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;
-    padding: 10px;
+    background: #111;
+    width: 100%;
+    height:100%;
     overflow-y: auto;
+    :deep(.lil-gui.root){
+      width: 100%;
+    }
   }
 }
 
diff --git a/src/designer/menus/Model3DView.ts b/src/designer/menus/Model3DView.ts
index da6149a..846121f 100644
--- a/src/designer/menus/Model3DView.ts
+++ b/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',
           })
         }
       }
diff --git a/src/views/ModelMain.less b/src/views/ModelMain.less
index 175a9bc..08a8438 100644
--- a/src/views/ModelMain.less
+++ b/src/views/ModelMain.less
@@ -277,4 +277,17 @@
 .el-popper .el-divider--horizontal{
   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;
+  }
 }
\ No newline at end of file