diff --git a/src/designer/viewWidgets/modeltree/ModeltreeView.vue b/src/designer/viewWidgets/modeltree/ModeltreeView.vue
index ef68c13..a286bd3 100644
--- a/src/designer/viewWidgets/modeltree/ModeltreeView.vue
+++ b/src/designer/viewWidgets/modeltree/ModeltreeView.vue
@@ -1,42 +1,73 @@
 <template>
-  ModeltreeView1<br />
-  ModeltreeView2<br />
-  ModeltreeView3<br />
-  ModeltreeView4<br />
-  ModeltreeView5<br />
-  ModeltreeView6<br />
-  ModeltreeView7<br />
-  ModeltreeView8<br />
-  ModeltreeView9<br />
-  ModeltreeView10<br />
-  ModeltreeView11<br />
-  ModeltreeView12<br />
-  ModeltreeView13<br />
-  ModeltreeView14<br />
-  ModeltreeView15<br />
-  ModeltreeView16<br />
-  ModeltreeView17<br />
-  ModeltreeView18<br />
-  ModeltreeView19<br />
-  ModeltreeView20<br />
-  ModeltreeView21<br />
-  ModeltreeView22<br />
-  ModeltreeView23<br />
-  ModeltreeView24<br />
-  ModeltreeView25<br />
-  ModeltreeView26<br />
-  ModeltreeView27<br />
-  ModeltreeView28<br />
-  ModeltreeView29<br />
-  ModeltreeView30<br />
-  ModeltreeView31<br />
-  ModeltreeView32<br />
-  ModeltreeView33<br />
-  ModeltreeView34<br />
-  ModeltreeView35<br />
-  ModeltreeView36<br />
-  ModeltreeView37<br />
-  ModeltreeView38<br />
-  ModeltreeView39<br />
-  ModeltreeView40<br />
-</template>
\ No newline at end of file
+  <div class="title">
+    模型树
+    <el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
+      <template #prefix>
+        <component :is="renderIcon('element Search')"></component>
+      </template>
+    </el-input>
+    <span class="close" @click="closeMe('hideLeft')">
+      <component :is="renderIcon('element Close')" />
+    </span>
+  </div>
+  <div class="calc-left-panel">
+    ModeltreeView1<br />
+    ModeltreeView2<br />
+    ModeltreeView3<br />
+    ModeltreeView4<br />
+    ModeltreeView5<br />
+    ModeltreeView6<br />
+    ModeltreeView7<br />
+    ModeltreeView8<br />
+    ModeltreeView9<br />
+    ModeltreeView10<br />
+    ModeltreeView11<br />
+    ModeltreeView12<br />
+    ModeltreeView13<br />
+    ModeltreeView14<br />
+    ModeltreeView15<br />
+    ModeltreeView16<br />
+    ModeltreeView17<br />
+    ModeltreeView18<br />
+    ModeltreeView19<br />
+    ModeltreeView20<br />
+    ModeltreeView21<br />
+    ModeltreeView22<br />
+    ModeltreeView23<br />
+    ModeltreeView24<br />
+    ModeltreeView25<br />
+    ModeltreeView26<br />
+    ModeltreeView27<br />
+    ModeltreeView28<br />
+    ModeltreeView29<br />
+    ModeltreeView30<br />
+    ModeltreeView31<br />
+    ModeltreeView32<br />
+    ModeltreeView33<br />
+    ModeltreeView34<br />
+    ModeltreeView35<br />
+    ModeltreeView36<br />
+    ModeltreeView37<br />
+    ModeltreeView38<br />
+    ModeltreeView39<br />
+    ModeltreeView40<br />
+  </div>
+</template>
+<script>
+import { renderIcon } from '@/utils/webutils.js'
+
+export default {
+  name: 'ModeltreeView',
+  data() {
+    return {
+      searchKeyword: ''
+    }
+  },
+  methods: {
+    renderIcon,
+    closeMe(name) {
+      this.$emit('close', name)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/designer/viewWidgets/monitor/MonitorView.vue b/src/designer/viewWidgets/monitor/MonitorView.vue
index c432642..042ab18 100644
--- a/src/designer/viewWidgets/monitor/MonitorView.vue
+++ b/src/designer/viewWidgets/monitor/MonitorView.vue
@@ -1,44 +1,73 @@
 <template>
-  MonitorView1<br />
-  MonitorView2<br />
-  MonitorView3<br />
-  MonitorView4<br />
-  MonitorView5<br />
-  MonitorView6<br />
-  MonitorView7<br />
-  MonitorView8<br />
-  MonitorView9<br />
-  MonitorView10<br />
-  MonitorView11<br />
-  MonitorView12<br />
-  MonitorView13<br />
-  MonitorView14<br />
-  MonitorView15<br />
-  MonitorView16<br />
-  MonitorView17<br />
-  MonitorView18<br />
-  MonitorView19<br />
-  MonitorView20<br />
-  MonitorView21<br />
-  MonitorView22<br />
-  MonitorView23<br />
-  MonitorView24<br />
-  MonitorView25<br />
-  MonitorView26<br />
-  MonitorView27<br />
-  MonitorView28<br />
-  MonitorView29<br />
-  MonitorView30<br />
-  MonitorView31<br />
-  MonitorView32<br />
-  MonitorView33<br />
-  MonitorView34<br />
-  MonitorView35<br />
-  MonitorView36<br />
-  MonitorView37<br />
-  MonitorView38<br />
-  MonitorView39<br />
-  MonitorView40<br />
+  <div class="title">
+    监控
+    <el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
+      <template #prefix>
+        <component :is="renderIcon('element Search')"></component>
+      </template>
+    </el-input>
+    <span class="close" @click="closeMe('hideLeft')">
+      <component :is="renderIcon('element Close')" />
+    </span>
+  </div>
+  <div class="calc-left-panel">
+    MonitorView1<br />
+    MonitorView2<br />
+    MonitorView3<br />
+    MonitorView4<br />
+    MonitorView5<br />
+    MonitorView6<br />
+    MonitorView7<br />
+    MonitorView8<br />
+    MonitorView9<br />
+    MonitorView10<br />
+    MonitorView11<br />
+    MonitorView12<br />
+    MonitorView13<br />
+    MonitorView14<br />
+    MonitorView15<br />
+    MonitorView16<br />
+    MonitorView17<br />
+    MonitorView18<br />
+    MonitorView19<br />
+    MonitorView20<br />
+    MonitorView21<br />
+    MonitorView22<br />
+    MonitorView23<br />
+    MonitorView24<br />
+    MonitorView25<br />
+    MonitorView26<br />
+    MonitorView27<br />
+    MonitorView28<br />
+    MonitorView29<br />
+    MonitorView30<br />
+    MonitorView31<br />
+    MonitorView32<br />
+    MonitorView33<br />
+    MonitorView34<br />
+    MonitorView35<br />
+    MonitorView36<br />
+    MonitorView37<br />
+    MonitorView38<br />
+    MonitorView39<br />
+    MonitorView40<br />
+  </div>
 </template>
-<script setup lang="ts">
+<script>
+import { renderIcon } from '@/utils/webutils.js'
+
+export default {
+  name: 'MonitorView',
+  data() {
+    return {
+      searchKeyword: ''
+    }
+  },
+  methods: {
+    renderIcon,
+    closeMe(name) {
+      this.$emit('close', name)
+    }
+  }
+}
 </script>
\ No newline at end of file
diff --git a/src/designer/viewWidgets/toolbox/ToolboxView.vue b/src/designer/viewWidgets/toolbox/ToolboxView.vue
index 4cdb0a7..50d5538 100644
--- a/src/designer/viewWidgets/toolbox/ToolboxView.vue
+++ b/src/designer/viewWidgets/toolbox/ToolboxView.vue
@@ -1,22 +1,141 @@
 <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
+  <div class="title">
+    工具箱
+    <el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
+      <template #prefix>
+        <component :is="renderIcon('element Search')"></component>
+      </template>
+    </el-input>
+    <span class="close" @click="closeMe('hideLeft')">
+      <component :is="renderIcon('element Close')" />
+    </span>
+  </div>
+  <div class="calc-left-panel toolbox-view">
+    <el-menu class="el-menu-vertical-demo"
+             @open="handleOpen"
+             @close="handleClose">
+      <el-sub-menu v-for="itemType in itemTypes" :title="itemType.label" :index="itemType.name">
+        <template #title>
+          <component :is="renderIcon(itemType.icon)" />
+          <span>{{ itemType.label }}</span>
+          <span class="subtitle">{{ itemType.name }}</span>
+        </template>
+        <el-menu-item v-for="item in itemType.children" :index="item.name">
+          <component :is="renderIcon(item.icon)" />
+          <span>{{ item.label }}</span>
+          <span>{{ itemType.name }}</span>
+        </el-menu-item>
+      </el-sub-menu>
+    </el-menu>
+  </div>
+
+</template>
+<script>
+import { renderIcon } from '@/utils/webutils.js'
+
+export default {
+  name: 'ToolboxView',
+  data() {
+    return {
+      searchKeyword: '',
+      itemTypes: [
+        {
+          name: 'point', icon: 'antd AimOutlined', label: '点',
+          children: [
+            { name: 'point', icon: 'antd AimOutlined', label: '辅助点位' },
+            { name: 'decision_point', icon: 'antd BorderOuterOutlined', label: '决策点' },
+            { name: 'bcr', icon: 'antd BorderVerticleOutlined', label: '扫码器' },
+            { name: 'station_point', icon: 'antd BorderOutlined', label: '站点' }
+          ]
+        },
+        {
+          name: 'line', icon: 'antd LineOutlined', label: '线',
+          children: [
+            { name: 'line', icon: 'antd SmallDashOutlined', label: '辅助线' },
+            { name: 'conveyor', icon: 'antd FontSizeOutlined', label: '输送线' },
+            { name: 'moveline', icon: 'antd SwapRightOutlined', label: '行走路径' }
+          ]
+        },
+        {
+          name: 'store', icon: 'fa BuildingRegular', label: '存储',
+          children: [
+            { name: 'queue', icon: 'element Queue', label: '暂存区' },
+            { name: 'ground_rack', icon: 'element GroundRack', label: '地堆区' },
+            { name: 'rack', icon: 'element Rack', label: '常规货架' },
+            { name: 'asrs_rack', icon: 'element AsrsRack', label: '立库货架' },
+            { name: 'flash_rack', icon: 'element FlashRack', label: '密集库货架' },
+            { name: 'shuttle_rack', icon: 'element ShuttleRack', label: '多穿库货架' },
+            { name: 'pd', icon: 'element Pd', label: '层间线' }
+          ]
+        },
+        {
+          name: 'executer', icon: 'antd CarOutlined', label: '任务执行器',
+          children: [
+            { name: 'stacker', icon: 'element Stacker', label: '堆垛机' },
+            { name: 'laser', icon: 'element Laser', label: '两向穿梭车' },
+            { name: 'flash', icon: 'element Flash', label: '四向穿梭车' },
+            { name: 'flash_tp', icon: '', label: '穿梭板' },
+            { name: 'life', label: '货物提升机' },
+            { name: 'flash_life', label: '车提升机' },
+            { name: 'forklift', label: '叉车' },
+            { name: 'ptr', label: '侧叉' },
+            { name: 'agv', label: '潜伏式AGV' },
+            { name: 'people', label: '人工' },
+            { name: 'robotic_arm', label: '机械手' },
+            { name: 'stacking', label: '碟盘机' },
+            { name: 'station', label: '加工台' },
+            { name: 'tag', label: '电子标签' }
+          ]
+        },
+        {
+          name: 'flow_item', icon: 'antd CodeSandboxOutlined', label: '流动单元',
+          children: [
+            { name: 'box', label: '箱' },
+            { name: 'tote', label: '托盘' },
+            { name: 'pallet', label: '托盘' }
+          ]
+        },
+        {
+          name: 'other', icon: 'antd CiOutlined', label: '辅助',
+          children: [
+            { name: 'source', label: '发生器' },
+            { name: 'sink', label: '消失器' },
+            { name: 'dispatcher', label: '任务分配器' },
+            { name: 'text', label: '文本' },
+            { name: 'image', label: '图片' },
+            { name: 'plane', label: '区域' }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    renderIcon,
+    closeMe() {
+      this.$emit('close')
+    },
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath)
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath)
+    }
+  }
+}
+</script>
+<style lang="less">
+.toolbox-view {
+  .subtitle {
+    margin-left: 5px;
+    color: var(--el-color-info-light-5);
+  }
+
+  .el-sub-menu__title {
+    height: 35px;
+  }
+
+  .el-menu-item {
+    height: 35px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ModelMain.vue b/src/views/ModelMain.vue
index 975f8c3..7917553 100644
--- a/src/views/ModelMain.vue
+++ b/src/views/ModelMain.vue
@@ -43,20 +43,8 @@
             <SplitArea v-show="!hideLeft" class="section-left" :class="{'hidden-split':hideLeft}"
                        :size="hideLeft ? 0 : sectionLeftSize">
               <div class="section-item-wrap">
-                <div class="title">
-                  <component :is="calcLeftPanel?.icon" />
-                  {{ calcLeftPanel?.title }}
-                  <el-input v-model="sectionLeftSearch" size="small" style="width: 240px" placeholder="Search">
-                    <template #prefix>
-                      <component :is="renderIcon('element Search')"></component>
-                    </template>
-                  </el-input>
-                  <span class="close" @click="closeMe('hideLeft')"><component
-                    :is="renderIcon('element Close')"></component></span>
-                </div>
-                <div class="calc-left-panel">
-                  <component v-if="calcLeftPanel?.component" :is="calcLeftPanel.component" />
-                </div>
+                <component v-if="calcLeftPanel?.component" :is="calcLeftPanel.component"
+                           @close="closeMe('hideLeft')" />
               </div>
             </SplitArea>
             <SplitArea class="section-center" :class="{'hidden-split':hideRight}" :size="calcCenterSize">