菜单定义，widgetview 挂件视图定义

src/runtime/DefineWidget.ts

@@ -1,4 +1,4 @@
-import type { Component } from 'vue'
+import { type Component, markRaw } from 'vue'
 
 export type WidgetSide = 'left' | 'right' | 'bottom'
 
@@ -31,7 +31,7 @@ export class WidgetInfo {
       console.log(`Widget ${this.option.name} already exists`)
       return
     }
-    _widgetMap.set(this.option.name, this.option)
+    _widgetMap.set(this.option.name, markRaw(this.option))
   }
 }
 
@@ -44,6 +44,10 @@ export function getWidgetBySide(side: WidgetSide): WidgetOption[] {
     .sort((a, b) => (a.order || 0) - (b.order || 0))
 }
 
+export function getWidgetByName(name: string): WidgetOption | undefined {
+  return _widgetMap.get(name)
+}
+
 /**
  * 定义一个 Widget
  */

src/views/ModelMain.vue

@@ -5,7 +5,8 @@
       <div class="app-header-menu-wrap">
         <div class="app-header-menu" v-for="rootMenu in calcRootMenu" @click="clickRootMenu"
              v-menus:left="rootMenu.children"
-        >{{ rootMenu.label }} <component :is="renderIcon('element ArrowDown')"></component>
+        >{{ rootMenu.label }}
+          <component :is="renderIcon('element ArrowDown')"></component>
         </div>
       </div>
       <div class="user">
@@ -17,14 +18,28 @@
     <div class="app-section">
       <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)">
+              {{ panel.title }}
+            </div>
+          </template>
+          <!--
           <div :class="['item',sectionLeftTitle==='模型'?'selected':'']" @click="btnLeftMe('模型')">模型</div>
           <div :class="['item',sectionLeftTitle==='监控'?'selected':'']" @click="btnLeftMe('监控')">监控</div>
           <div :class="['item',sectionLeftTitle==='对象'?'selected':'']" @click="btnLeftMe('对象')">对象</div>
+          -->
         </div>
         <div class="btns btns-bottom">
+          <template v-for="panel in getWidgetBySide('bottom')">
+            <div class="item" :class="{selected:sectionBottomTitle===panel.name}" @click="btnBottomMe(panel)">
+              {{ panel.title }}
+            </div>
+          </template>
+          <!--
           <div :class="['item',sectionBottomTitle==='任务'?'selected':'']" @click="btnBottomMe('任务')">任务</div>
           <div :class="['item',sectionBottomTitle==='日志'?'selected':'']" @click="btnBottomMe('日志')">日志</div>
           <div :class="['item',sectionBottomTitle==='脚本'?'selected':'']" @click="btnBottomMe('脚本')">脚本</div>
+          -->
         </div>
       </div>
       <Split class="section" :direction="'vertical'" style="flex-shrink: 0;flex-grow:1;" ref="mainSplit">
@@ -34,8 +49,9 @@
             <SplitArea v-show="!hideLeft" class="section-left" :class="{'hidden-split':hideLeft}"
                        :size="hideLeft ? 0 : sectionLeftSize">
               <div class="section-item-wrap">
-                <div class="title">{{ sectionLeftTitle }}</div>
+                <div class="title">{{ calcLeftPanel?.title }}</div>
               </div>
+              <component :is="calcLeftPanel.component" />
             </SplitArea>
             <SplitArea class="section-center" :class="{'hidden-split':hideRight}" :size="calcCenterSize">
               <el-tabs type="card" class="section-tabs">
@@ -85,44 +101,51 @@
             </SplitArea>
             <SplitArea v-show="!hideRight" class="section-right" :size="hideRight ? 0 : sectionRightSize">
               <div class="section-item-wrap">
-                <div class="title">{{ sectionRightTitle }}</div>
+                <div class="title">{{ calcRightPanel?.title }}</div>
               </div>
+              <component :is="calcRightPanel.component" />
             </SplitArea>
           </Split>
         </SplitArea>
         <SplitArea v-show="!hideBottom" :class="['section-bottom']" :size="hideBottom ? 0 : bottomSize" :min-size="0">
           <div class="section-item-wrap">
-            <div class="title">{{ sectionBottomTitle }}</div>
+            <div class="title">{{ calcBottomPanel?.title }}</div>
           </div>
+          <component :is="calcBottomPanel.component" />
         </SplitArea>
       </Split>
       <div class="btns-toolbar btns-toolbar-right">
         <div class="btns btns-top">
+          <template v-for="panel in getWidgetBySide('right')">
+            <div class="item" :class="{selected:sectionRightTitle===panel.name}" @click="btnRightMe(panel)">
+              {{ panel.title }}
+            </div>
+          </template>
+          <!--
           <div :class="['item',sectionRightTitle==='属性'?'selected':'']" @click="btnRightMe('属性')">属性</div>
           <div :class="['item',sectionRightTitle==='数据'?'selected':'']" @click="btnRightMe('数据')">数据</div>
           <div :class="['item',sectionRightTitle==='警告'?'selected':'']" @click="btnRightMe('警告')">警告</div>
+          -->
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import { renderIcon } from '@/utils/webutils.js'
 import Split from '@/components/split/split.vue'
 import SplitArea from '@/components/split/split-area.vue'
-import { renderIcon } from '@/utils/webutils.js'
 
 import Logo from '@/assets/images/logo.png'
 import './ModelMain.less'
 import ModelMainInit from '@/views/ModelMainInit.js'
 import { getRootMenu } from '@/runtime/DefineMenu.js'
+import { getWidgetByName, getWidgetBySide } from '@/runtime/DefineWidget.js'
 
 ModelMainInit()
 
 export default {
-  components: {
-    Split,
-    SplitArea
-  },
+  components: { Split, SplitArea },
   mounted() {
   },
   data() {
@@ -131,17 +154,35 @@ export default {
       calcRootMenu: getRootMenu(),
       activeIndex: '',
       bottomSize: 30,
-      hideBottom: false,
+      hideBottom: true,
       hideLeft: false,
       hideRight: false,
       sectionLeftSize: 20,
       sectionRightSize: 20,
-      sectionLeftTitle: '模型',
-      sectionRightTitle: '属性',
-      sectionBottomTitle: '任务'
+      sectionLeftTitle: 'modeltree',
+      sectionRightTitle: 'property',
+      sectionBottomTitle: ''
     }
   },
   computed: {
+    calcLeftPanel() {
+      if (!this.sectionLeftTitle || this.hideLeft) {
+        return undefined
+      }
+      return getWidgetByName(this.sectionLeftTitle)
+    },
+    calcRightPanel() {
+      if (!this.sectionRightTitle || this.hideRight) {
+        return undefined
+      }
+      return getWidgetByName(this.sectionRightTitle)
+    },
+    calcBottomPanel() {
+      if (!this.sectionBottomTitle || this.hideBottom) {
+        return undefined
+      }
+      return getWidgetByName(this.sectionBottomTitle)
+    },
     calcCenterSize() {
       if (this.hideLeft && this.hideRight) {
         return 100
@@ -170,6 +211,7 @@ export default {
   },
   methods: {
     renderIcon,
+    getWidgetBySide,
     recalcCenterSize() {
       if (this.hideLeft && this.hideRight) {
         this.$refs.centerSplit.refreshSize([0, 100, 0])
@@ -190,34 +232,34 @@ export default {
     handleSelect() {
 
     },
-    btnLeftMe(name) {
-      if (this.sectionLeftTitle === name) {
+    btnLeftMe(panel) {
+      if (this.sectionLeftTitle === panel.name) {
         this.hideLeft = true
         this.sectionLeftTitle = ''
 
       } else {
         this.hideLeft = false
-        this.sectionLeftTitle = name
+        this.sectionLeftTitle = panel.name
       }
     },
-    btnRightMe(name) {
-      if (this.sectionRightTitle === name) {
+    btnRightMe(panel) {
+      if (this.sectionRightTitle === panel.name) {
         this.hideRight = true
         this.sectionRightTitle = ''
 
       } else {
         this.hideRight = false
-        this.sectionRightTitle = name
+        this.sectionRightTitle = panel.name
       }
     },
-    btnBottomMe(name) {
-      if (this.sectionBottomTitle === name) {
+    btnBottomMe(panel) {
+      if (this.sectionBottomTitle === panel.name) {
         this.hideBottom = true
         this.sectionBottomTitle = ''
 
       } else {
         this.hideBottom = false
-        this.sectionBottomTitle = name
+        this.sectionBottomTitle = panel.name
       }
     }
   }