Update DesignToolbars.vue

Author: betterdancing

packages/layout/src/DesignToolbars.vue

@@ -1,6 +1,17 @@
 <template>
   <div class="tiny-engine-toolbar">
     <div class="toolbar-left">
+      <tiny-popover :visible-arrow="false" trigger="hover" placement="bottom-start" popper-class="center-popover">
+        <template #reference>
+          <div class="app-center-icon">
+            <svg-icon name="small-list"></svg-icon>
+          </div>
+        </template>
+        <div class="app-center-item">
+          <span @click="gotoCenter('app')">应用中心</span>
+          <span @click="gotoCenter('template')">模板中心</span>
+        </div>
+      </tiny-popover>
       <component
         :is="getMergeMeta(comp)?.entry"
         v-for="comp in toolbars.left"
@@ -49,12 +60,14 @@
 <script lang="ts">
 /* metaService: engine.layout.DesignToolbars */
 import { computed } from 'vue'
+import { Popover } from '@opentiny/vue'
 import { getMergeMeta, useLayout } from '@opentiny/tiny-engine-meta-register'
 import ToolbarCollapse from './ToolbarCollapse.vue'
 
 export default {
   components: {
-    ToolbarCollapse
+    ToolbarCollapse,
+    TinyPopover: Popover
   },
   props: {
     layoutRegistry: {
@@ -71,9 +84,14 @@ export default {
       return layoutConfig.toolbars
     })
 
+    const gotoCenter = (type: string) => {
+      window.open(`/template.html?type=${type}`, '_blank')
+    }
+
     return {
       getMergeMeta,
-      toolbars
+      toolbars,
+      gotoCenter
     }
   }
 }
@@ -135,6 +153,22 @@ export default {
         background: var(--te-layout-common-icon-bg-color-hover);
       }
     }
+    .app-center-icon {
+      background: var(--te-layout-common-active-bg);
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      vertical-align: middle;
+      width: 26px;
+      height: 26px;
+      border-radius: 4px;
+      position: relative;
+      margin-left: 4px;
+
+      .svg-icon {
+        font-size: 16px;
+      }
+    }
   }
 
   .toolbar-right {
@@ -198,6 +232,18 @@ export default {
     display: none;
   }
 }
+.center-popover {
+  .app-center-item {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    gap: 8px;
+
+    span {
+      cursor: pointer;
+    }
+  }
+}
 
 @media only screen and (max-width: 1280px) {
   .tiny-engine-toolbar {