From 4c41ea8ad4ee97442519bd9842d82d38d6b42b18 Mon Sep 17 00:00:00 2001
From: luoyifan <luoyifan@qq.com>
Date: Tue, 20 May 2025 19:10:26 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=AE=9A=E4=B9=89=EF=BC=8Cwi?=
 =?UTF-8?q?dgetview=20=E6=8C=82=E4=BB=B6=E8=A7=86=E5=9B=BE=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                       | 33 ++++-----
 src/components/viewWidgets/alarm/AlarmMeta.ts      |  2 +-
 .../viewWidgets/modeltree/ModeltreeMeta.ts         |  2 +-
 src/components/viewWidgets/monitor/MonitorMeta.ts  |  2 +-
 src/components/viewWidgets/script/ScriptMeta.ts    |  2 +-
 src/components/viewWidgets/toolbox/ToolboxMeta.ts  | 12 ++++
 src/components/viewWidgets/toolbox/ToolboxView.vue | 22 ++++++
 src/utils/webutils.ts                              | 33 +++++----
 src/views/ModelMain.vue                            | 80 +++++++++++++---------
 src/views/ModelMainInit.ts                         |  2 +
 yarn.lock                                          |  5 ++
 11 files changed, 128 insertions(+), 67 deletions(-)
 create mode 100644 src/components/viewWidgets/toolbox/ToolboxMeta.ts
 create mode 100644 src/components/viewWidgets/toolbox/ToolboxView.vue

diff --git a/package.json b/package.json
index 4edda1b..b47b83a 100644
--- a/package.json
+++ b/package.json
@@ -12,37 +12,38 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@vicons/antd": "^0.13.0",
+    "ag-grid-enterprise": "^28.2.1",
+    "ag-grid-vue3": "^28.2.1",
     "axios": "^1.9.0",
+    "codemirror": "^5.65.19",
     "dat.gui": "^0.7.9",
+    "decimal.js": "^10.5.0",
     "element-plus": "^2.9.10",
+    "jquery": "^3.6.0",
+    "less": "^4.2.1",
+    "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "pinia": "^3.0.1",
+    "rimraf": "^3.0.2",
+    "sortablejs": "1.15.6",
+    "split.js": "^1.6.4",
     "three": "^0.176.0",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0",
-    "less": "^4.2.1",
-    "split.js": "^1.6.4",
-    "localforage": "^1.10.0",
-    "rimraf": "^3.0.2",
     "vue-i18n": "9.2.2",
-    "codemirror": "^5.65.19",
-    "vue3-menus": "^1.1.2",
-    "jquery": "^3.6.0",
-    "ag-grid-enterprise": "^28.2.1",
-    "sortablejs": "1.15.6",
-    "ag-grid-vue3": "^28.2.1",
-    "decimal.js": "^10.5.0"
+    "vue-router": "^4.5.0",
+    "vue3-menus": "^1.1.2"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.1",
+    "@types/jquery": "^3.3.31",
+    "@types/lodash-es": "^4.17.7",
     "@types/node": "^22.14.0",
+    "@types/three": "^0.176.0",
+    "@vicons/fa": "^0.12.0",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vitejs/plugin-vue-jsx": "^4.1.2",
     "@vue/tsconfig": "^0.7.0",
-    "@types/lodash-es": "^4.17.7",
-    "@types/three": "^0.176.0",
-    "@types/jquery": "^3.3.31",
-    "@vicons/fa": "^0.12.0",
     "npm-run-all2": "^7.0.2",
     "prettier": "3.5.3",
     "typescript": "~5.8.0",
diff --git a/src/components/viewWidgets/alarm/AlarmMeta.ts b/src/components/viewWidgets/alarm/AlarmMeta.ts
index 846c9ea..56cd72e 100644
--- a/src/components/viewWidgets/alarm/AlarmMeta.ts
+++ b/src/components/viewWidgets/alarm/AlarmMeta.ts
@@ -5,7 +5,7 @@ import AlarmView from './AlarmView.vue'
 export default defineWidget({
   name: 'alarm',
   title: '告警',
-  icon: renderIcon('element BellFilled'),
+  icon: renderIcon('antd AlertOutlined'),
   side: 'right',
   order: 2,
   component: AlarmView
diff --git a/src/components/viewWidgets/modeltree/ModeltreeMeta.ts b/src/components/viewWidgets/modeltree/ModeltreeMeta.ts
index dc7f1c3..09b1363 100644
--- a/src/components/viewWidgets/modeltree/ModeltreeMeta.ts
+++ b/src/components/viewWidgets/modeltree/ModeltreeMeta.ts
@@ -5,7 +5,7 @@ import ModeltreeView from './ModeltreeView.vue'
 export default defineWidget({
   name: 'modeltree',
   title: '模型',
-  icon: renderIcon('fa Tree'),
+  icon: renderIcon('antd ClusterOutlined'),
   side: 'left',
   order: 1,
   component: ModeltreeView
diff --git a/src/components/viewWidgets/monitor/MonitorMeta.ts b/src/components/viewWidgets/monitor/MonitorMeta.ts
index e25dac7..07cddde 100644
--- a/src/components/viewWidgets/monitor/MonitorMeta.ts
+++ b/src/components/viewWidgets/monitor/MonitorMeta.ts
@@ -5,7 +5,7 @@ import MonitorView from './MonitorView.vue'
 export default defineWidget({
   name: 'monitor',
   title: '监控',
-  icon: renderIcon('element Monitor'),
+  icon: renderIcon('antd DashboardOutlined'),
   side: 'left',
   order: 2,
   component: MonitorView
diff --git a/src/components/viewWidgets/script/ScriptMeta.ts b/src/components/viewWidgets/script/ScriptMeta.ts
index ac296c8..aaebd89 100644
--- a/src/components/viewWidgets/script/ScriptMeta.ts
+++ b/src/components/viewWidgets/script/ScriptMeta.ts
@@ -5,7 +5,7 @@ import ScriptView from './ScriptView.vue'
 export default defineWidget({
   name: 'script',
   title: '脚本',
-  icon: renderIcon('element Film'),
+  icon: renderIcon('antd CodeOutlined'),
   side: 'bottom',
   order: 3,
   component: ScriptView
diff --git a/src/components/viewWidgets/toolbox/ToolboxMeta.ts b/src/components/viewWidgets/toolbox/ToolboxMeta.ts
new file mode 100644
index 0000000..9ccd171
--- /dev/null
+++ b/src/components/viewWidgets/toolbox/ToolboxMeta.ts
@@ -0,0 +1,12 @@
+import { defineWidget } from '@/runtime/DefineWidget.ts'
+import { renderIcon } from '@/utils/webutils.ts'
+import ToolboxView from './ToolboxView.vue'
+
+export default defineWidget({
+  name: 'toolbox',
+  title: '工具箱',
+  icon: renderIcon('antd CodepenOutlined'),
+  side: 'left',
+  order: 3,
+  component: ToolboxView
+})
\ No newline at end of file
diff --git a/src/components/viewWidgets/toolbox/ToolboxView.vue b/src/components/viewWidgets/toolbox/ToolboxView.vue
new file mode 100644
index 0000000..4cdb0a7
--- /dev/null
+++ b/src/components/viewWidgets/toolbox/ToolboxView.vue
@@ -0,0 +1,22 @@
+<template>
+  ToolboxView1<br />
+  ToolboxView2<br />
+  ToolboxView3<br />
+  ToolboxView4<br />
+  ToolboxView5<br />
+  ToolboxView6<br />
+  ToolboxView7<br />
+  ToolboxView8<br />
+  ToolboxView9<br />
+  ToolboxView10<br />
+  ToolboxView11<br />
+  ToolboxView12<br />
+  ToolboxView13<br />
+  ToolboxView14<br />
+  ToolboxView15<br />
+  ToolboxView16<br />
+  ToolboxView17<br />
+  ToolboxView18<br />
+  ToolboxView19<br />
+  ToolboxView20<br />
+</template>
\ No newline at end of file
diff --git a/src/utils/webutils.ts b/src/utils/webutils.ts
index b21a069..a959642 100644
--- a/src/utils/webutils.ts
+++ b/src/utils/webutils.ts
@@ -1,6 +1,7 @@
 import _ from 'lodash'
-import {type Component, h, toRaw} from 'vue'
-import {ElIcon} from "element-plus"
+import { type Component, h, toRaw } from 'vue'
+import * as AntdIcon from '@vicons/antd'
+import { ElIcon } from 'element-plus'
 import * as FaIcon from '@vicons/fa'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
@@ -9,30 +10,34 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
  */
 export function renderIcon(icon: string, props = {}): any {
   if (!icon) {
-    return undefined;
+    return undefined
   }
-  let component: any = undefined;
+  let component: any = undefined
   if (typeof icon === 'string') {
-    if (icon.startsWith("element ")) {
-      icon = icon.substring("element ".length);
-      component = ElementPlusIconsVue[icon];
+    if (icon.startsWith('element ')) {
+      icon = icon.substring('element '.length)
+      component = ElementPlusIconsVue[icon]
 
-    } else if (icon.startsWith("fa ")) {
-      icon = icon.substring("fa ".length);
-      component = FaIcon[icon];
+    } else if (icon.startsWith('antd ')) {
+      icon = icon.substring('antd '.length)
+      component = AntdIcon[icon]
+
+    } else if (icon.startsWith('fa ')) {
+      icon = icon.substring('fa '.length)
+      component = FaIcon[icon]
 
       // } else if (icon.startsWith('tb ')) {
       //     icon = icon.substring("fa ".length);
       //     component = Tabler[icon];
 
     } else {
-      component = ElementPlusIconsVue[icon];
-      if (!component) component = FaIcon[icon];
+      component = ElementPlusIconsVue[icon]
+      if (!component) component = FaIcon[icon]
     }
   }
   if (!component) {
     // component = AntdIcon["ProfileOutlined"];
-    return undefined;
+    return undefined
   }
-  return () => h(ElIcon, props, {default: () => h(component)});
+  return () => h(ElIcon, props, { default: () => h(component) })
 }
\ No newline at end of file
diff --git a/src/views/ModelMain.vue b/src/views/ModelMain.vue
index 2803634..a304c81 100644
--- a/src/views/ModelMain.vue
+++ b/src/views/ModelMain.vue
@@ -19,7 +19,7 @@
       <div class="btns-toolbar btns-toolbar-left">
         <div class="btns btns-top">
           <template v-for="panel in getWidgetBySide('left')">
-            <div class="item" :class="{selected:sectionLeftTitle===panel.name}" @click="btnLeftMe(panel)"
+            <div class="item" :class="{selected:sectionLeftName===panel.name}" @click="btnLeftMe(panel)"
                  :title="panel.title">
               <component :is="panel.icon" />
             </div>
@@ -27,17 +27,19 @@
         </div>
         <div class="btns btns-bottom">
           <template v-for="panel in getWidgetBySide('bottom')">
-            <div class="item" :class="{selected:sectionBottomTitle===panel.name}" @click="btnBottomMe(panel)"
+            <div class="item" :class="{selected:sectionBottomName===panel.name}" @click="btnBottomMe(panel)"
                  :title="panel.title">
               <component :is="panel.icon" />
             </div>
           </template>
         </div>
       </div>
-      <Split class="section" :direction="'vertical'" style="flex-shrink: 0;flex-grow:1;" ref="mainSplit">
+      <Split class="section" :direction="'vertical'" style="flex-shrink: 0;flex-grow:1;" ref="mainSplit"
+             @onDragEnd="bottomDragEnd">
         <SplitArea class="section-top" :size="hideBottom ? 100 : (100 - bottomSize)" :min-size="50"
                    :class="{'hidden-split':hideBottom}">
-          <Split class="section" :direction="'horizontal'" style="flex-shrink: 0;flex-grow:1;" ref="centerSplit">
+          <Split class="section" :direction="'horizontal'" style="flex-shrink: 0;flex-grow:1;" ref="centerSplit"
+                 @onDragEnd="centerDragEnd">
             <SplitArea v-show="!hideLeft" class="section-left" :class="{'hidden-split':hideLeft}"
                        :size="hideLeft ? 0 : sectionLeftSize">
               <div class="section-item-wrap">
@@ -58,14 +60,14 @@
               </div>
             </SplitArea>
             <SplitArea class="section-center" :class="{'hidden-split':hideRight}" :size="calcCenterSize">
-              <el-tabs type="card" class="section-tabs">
-                <el-tab-pane label="模型属性" lazy>
-                  <el-empty description="暂无数据" />
-                </el-tab-pane>
-                <el-tab-pane label="3D编辑器" name="ModelEditor" lazy>
+              <el-tabs type="card" class="section-tabs" v-model="centerActiveName" @tab-click="handleCenterTabClick">
+                <el-tab-pane label="2D视图" name="ModelEditor" lazy>
                   <ModelEditor />
                 </el-tab-pane>
-                <el-tab-pane label="基础资料" lazy>
+                <el-tab-pane label="模型属性" name="ModelFile" lazy>
+                  <el-empty description="暂无数据" />
+                </el-tab-pane>
+                <el-tab-pane label="基础资料" name="ModelDataSet" lazy>
                   <el-empty description="暂无数据" />
                 </el-tab-pane>
               </el-tabs>
@@ -145,37 +147,37 @@ export default {
     return {
       Logo,
       calcRootMenu: getRootMenu(),
-      activeIndex: '',
       bottomSize: 30,
       hideBottom: true,
       hideLeft: false,
       hideRight: false,
       sectionLeftSize: 20,
       sectionRightSize: 20,
-      sectionLeftTitle: 'modeltree',
-      sectionRightTitle: 'property',
-      sectionBottomTitle: '',
-      sectionLeftSearch: ''
+      sectionLeftName: 'modeltree',
+      sectionRightName: 'property',
+      sectionBottomName: '',
+      sectionLeftSearch: '',
+      centerActiveName: 'ModelEditor'
     }
   },
   computed: {
     calcLeftPanel() {
-      if (!this.sectionLeftTitle || this.hideLeft) {
+      if (!this.sectionLeftName || this.hideLeft) {
         return undefined
       }
-      return getWidgetByName(this.sectionLeftTitle)
+      return getWidgetByName(this.sectionLeftName)
     },
     calcRightPanel() {
-      if (!this.sectionRightTitle || this.hideRight) {
+      if (!this.sectionRightName || this.hideRight) {
         return undefined
       }
-      return getWidgetByName(this.sectionRightTitle)
+      return getWidgetByName(this.sectionRightName)
     },
     calcBottomPanel() {
-      if (!this.sectionBottomTitle || this.hideBottom) {
+      if (!this.sectionBottomName || this.hideBottom) {
         return undefined
       }
-      return getWidgetByName(this.sectionBottomTitle)
+      return getWidgetByName(this.sectionBottomName)
     },
     calcCenterSize() {
       if (this.hideLeft && this.hideRight) {
@@ -206,6 +208,18 @@ export default {
   methods: {
     renderIcon,
     getWidgetBySide,
+    handleCenterTabClick(tab) {
+      if (tab?.name) {
+        this.centerActiveName = tab.name
+      }
+    },
+    centerDragEnd(sizes) {
+      this.sectionLeftSize = sizes[0]
+      this.sectionRightSize = sizes[2]
+    },
+    bottomDragEnd(sizes) {
+      this.bottomSize = sizes[1]
+    },
     recalcCenterSize() {
       if (this.hideLeft && this.hideRight) {
         this.$refs.centerSplit.refreshSize([0, 100, 0])
@@ -227,45 +241,45 @@ export default {
 
     },
     btnLeftMe(panel) {
-      if (this.sectionLeftTitle === panel.name) {
+      if (this.sectionLeftName === panel.name) {
         this.hideLeft = true
-        this.sectionLeftTitle = ''
+        this.sectionLeftName = ''
 
       } else {
         this.hideLeft = false
-        this.sectionLeftTitle = panel.name
+        this.sectionLeftName = panel.name
       }
     },
     btnRightMe(panel) {
-      if (this.sectionRightTitle === panel.name) {
+      if (this.sectionRightName === panel.name) {
         this.hideRight = true
-        this.sectionRightTitle = ''
+        this.sectionRightName = ''
 
       } else {
         this.hideRight = false
-        this.sectionRightTitle = panel.name
+        this.sectionRightName = panel.name
       }
     },
     btnBottomMe(panel) {
-      if (this.sectionBottomTitle === panel.name) {
+      if (this.sectionBottomName === panel.name) {
         this.hideBottom = true
-        this.sectionBottomTitle = ''
+        this.sectionBottomName = ''
 
       } else {
         this.hideBottom = false
-        this.sectionBottomTitle = panel.name
+        this.sectionBottomName = panel.name
       }
     },
     closeMe(btn) {
       if (btn === 'hideLeft') {
         this.hideLeft = true
-        this.sectionLeftTitle = ''
+        this.sectionLeftName = ''
       } else if (btn === 'hideRight') {
         this.hideRight = true
-        this.sectionRightTitle = ''
+        this.sectionRightName = ''
       } else if (btn === 'hideBottom') {
         this.hideBottom = true
-        this.sectionBottomTitle = ''
+        this.sectionBottomName = ''
       }
     }
   }
diff --git a/src/views/ModelMainInit.ts b/src/views/ModelMainInit.ts
index 6c91358..8de7df5 100644
--- a/src/views/ModelMainInit.ts
+++ b/src/views/ModelMainInit.ts
@@ -5,6 +5,7 @@ import MonitorMeta from '@/components/viewWidgets/monitor/MonitorMeta'
 import PropertyMeta from '@/components/viewWidgets/property/PropertyMeta'
 import ScriptMeta from '@/components/viewWidgets/script/ScriptMeta'
 import TaskMeta from '@/components/viewWidgets/task/TaskMeta'
+import ToolboxMeta from '@/components/viewWidgets/toolbox/ToolboxMeta'
 
 import FileMenu from '@/components/viewMenus/fileMenu/FileMenu'
 import EditMenu from '@/components/viewMenus/editMenu/EditMenu'
@@ -20,6 +21,7 @@ export default function ModelMainInit() {
   PropertyMeta.install()
   ScriptMeta.install()
   TaskMeta.install()
+  ToolboxMeta.install()
 
   FileMenu.install()
   EditMenu.install()
diff --git a/yarn.lock b/yarn.lock
index d58b6db..4e43f28 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -694,6 +694,11 @@
   resolved "https://registry.npmmirror.com/@types/webxr/-/webxr-0.5.22.tgz#d8a14c12bbfaaa4a13de21ec2d4a8197b3e1b532"
   integrity sha512-Vr6Stjv5jPRqH690f5I5GLjVk8GSsoQSYJ2FVd/3jJF7KaqfwPi3ehfBS96mlQ2kPCwZaX6U0rG2+NGHBKkA/A==
 
+"@vicons/antd@^0.13.0":
+  version "0.13.0"
+  resolved "http://mirrors.cloud.tencent.com/npm/@vicons/antd/-/antd-0.13.0.tgz#a81d1fb4acb276191d8e13e96817b768d0d2519c"
+  integrity sha512-yrUGoUSz2BbGupk9ghQOahc04n5H3MwUDM9pVPsLh9U1uqB47oRWZvYRiZaT1JKPqgTgSE6BXcVw4i9MOF4M+g==
+
 "@vicons/fa@^0.12.0":
   version "0.12.0"
   resolved "http://mirrors.cloud.tencent.com/npm/@vicons/fa/-/fa-0.12.0.tgz#a5f92db45990f8a47b5eeedcdb9b673f0dababc8"