Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/designer/Model3DView.vue

src/designer/Model3DView.vue

@@ -23,14 +23,49 @@
           <div class="canvas-container" ref="canvasContainer"></div>
         </SplitArea>
         <SplitArea class="model3d-gui" :size="30">
-          <!-- 右侧面板 -->
+          <div class="model3d-gui-wrap">
-          <div class="gui-panel" ref="guiPanel"></div>
+            <!-- 右侧面板 -->
+            <div class="gui-toolbar">
+              <div class="gui-row">
+                <div class="gui-item-name"></div>
+                <div class="gui-item">X</div>
+                <div class="gui-item">Y</div>
+                <div class="gui-item">Z</div>
+              </div>
+              <div class="gui-row">
+                <div class="gui-item-name">
+                  <component :is="renderIcon('element Aim')"></component>
+                </div>
+                <div class="gui-item"><el-input-number v-model="num" size="small" :min="1" :max="10" :controls="false"/></div>
+                <div class="gui-item"><el-input-number v-model="num" size="small" :min="1" :max="10" :controls="false"/></div>
+                <div class="gui-item"><el-input-number v-model="num" size="small" :min="1" :max="10" :controls="false"/></div>
+              </div>
+              <div class="gui-row">
+                <div class="gui-item-name">
+                  <component :is="renderIcon('antd RotateLeftOutlined')"></component>
+                </div>
+                <div class="gui-item"><el-input-number v-model="num" size="small" :min="1" :max="10" :controls="false"/></div>
+                <div class="gui-item"><el-input-number v-model="num" size="small" :min="1" :max="10" :controls="false"/></div>
+                <div class="gui-item"><el-input-number v-model="num" size="small" :min="1" :max="10" :controls="false"/></div>
+              </div>
+              <div class="gui-row">
+                <div class="gui-item-name">
+                  <component :is="renderIcon('element ScaleToOriginal')"></component>
+                </div>
+                <div class="gui-item"><el-input-number v-model="num" size="small" :min="1" :max="10" :controls="false"/></div>
+                <div class="gui-item"><el-input-number v-model="num" size="small" :min="1" :max="10" :controls="false"/></div>
+                <div class="gui-item"><el-input-number v-model="num" size="small" :min="1" :max="10" :controls="false"/></div>
+              </div>
+            </div>
+            <div class="gui-panel" ref="guiPanel"></div>
+          </div>
         </SplitArea>
       </Split>
     </div>
   </div>
 </template>
 <script setup>
+import { renderIcon } from '@/utils/webutils.js'
 import { ref, onMounted, nextTick, reactive } from 'vue'
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
@@ -71,7 +106,6 @@ const state = {
   },
   mode: 'translate'
 }
-
 onMounted(() => {
   nextTick(() => {
     initThree()
@@ -527,14 +561,46 @@ window['state'] = state
     position: relative;
   }
 
-  .gui-panel {
+  .model3d-gui-wrap{
     border-left: 1px solid #ccc;
     background: #111;
     width: 100%;
     height: 100%;
     overflow-y: auto;
-
+  }
-    :deep(.lil-gui.root) {
+  .gui-toolbar{
+    color:#fff;
+    .gui-row{
+      display: flex;
+      flex-direction: row;
+      gap: 3px;
+      padding:3px 0;
+      .gui-item-name{
+        width: 26px;
+        align-self: stretch;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .el-icon{
+          font-size: 16px;
+        }
+      }
+      .gui-item{
+        flex:1;
+        text-align: center;
+        font-size: 12px;
+        .el-input-number{
+          width: 100%;
+          .el-input__wrapper{
+            background-color: #424242;
+            box-shadow:none
+          }
+        }
+      }
+    }
+  }
+  .gui-panel {
+    :deep(.lil-gui.root){
       width: 100%;
     }
   }