feat(toolbars): use toolbar base component in toolbar plugins

packages/common/component/ToolbarBase.vue

@@ -0,0 +1,77 @@
+<template>
+  <span class="toolbar-item-wrap" @click="click">
+    <component :is="getRender()" v-bind="state">
+      <template #default>
+        <slot name="button"></slot>
+      </template>
+    </component>
+    <slot></slot>
+    <span v-if="state.options?.collapsed">{{ state.content }}</span>
+  </span>
+</template>
+
+<script>
+import { reactive, computed } from 'vue'
+import ToolbarBaseIcon from './toolbar-built-in/ToolbarBaseIcon.vue'
+import ToolbarBaseButton from './toolbar-built-in/ToolbarBaseButton.vue'
+
+export default {
+  components: {
+    ToolbarBaseIcon,
+    ToolbarBaseButton
+  },
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    options: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  emits: ['click-api'],
+  setup(props, { emit }) {
+    const state = reactive({
+      icon: computed(() => props.icon),
+      content: computed(() => props.content),
+      options: computed(() => props.options)
+    })
+
+    const click = () => {
+      emit('click-api')
+    }
+
+    const getRender = () => {
+      switch (props.options.renderType) {
+        case 'button':
+          return ToolbarBaseButton
+        case 'icon':
+          return ToolbarBaseIcon
+        default:
+          return false
+      }
+    }
+
+    return {
+      state,
+      click,
+      getRender
+    }
+  }
+}
+</script>
+<style scoped>
+.split-line {
+  color: var(--ti-lowcode-toolbar-border-color);
+  margin: 0 4px;
+  font-size: 14px;
+}
+.toolbar-item-wrap div {
+  display: inline-block;
+}
+</style>

packages/common/component/index.js

@@ -53,6 +53,7 @@ export { default as SplitPanes } from './SplitPanes.vue'
 export { default as Pane } from './Pane.vue'
 export { default as I18nInput } from './I18nInput.vue'
 export { default as CanvasDragItem } from './CanvasDragItem.vue'
+export { default as ToolbarBase } from './ToolbarBase.vue'
 export { default as Modal } from './Modal.jsx'
 export { default as Notify } from './Notify.jsx'
 export { ConfigGroup, ConfigItem }

packages/common/component/toolbar-built-in/ToolbarBaseButton.vue

@@ -0,0 +1,71 @@
+<template>
+  <tiny-button v-bind="extendAttrs" class="toolbar-button">
+    <span class="svg-wrap">
+      <svg-icon v-if="icon" :name="icon"></svg-icon>
+      <span v-if="options?.showDots" class="dots"></span>
+    </span>
+    <span class="save-title">{{ content }}</span>
+    <slot></slot>
+  </tiny-button>
+</template>
+<script>
+import { inject } from 'vue'
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup() {
+    const extendAttrs = inject('extend-attributes') || {}
+    return {
+      extendAttrs
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.toolbar-button {
+  background-color: var(--ti-lowcode-toolbar-button-bg) !important;
+  border: none !important;
+  min-width: 70px;
+  height: 26px;
+  line-height: 24px;
+  padding: 0 8px;
+  border-radius: 4px;
+  margin-right: 4px;
+}
+
+.svg-wrap {
+  position: relative;
+  .dots {
+    width: 6px;
+    height: 6px;
+    background: var(--ti-lowcode-toolbar-dot-color);
+    border-radius: 50%;
+    display: inline-block;
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    z-index: 100;
+  }
+}
+
+.save-title {
+  margin: 0 6px;
+}
+</style>

packages/common/component/toolbar-built-in/ToolbarBaseIcon.vue

@@ -0,0 +1,62 @@
+<template>
+  <tiny-popover
+    trigger="hover"
+    :open-delay="1000"
+    popper-class="toolbar-right-popover"
+    append-to-body
+    :content="content"
+  >
+    <template #reference>
+      <span class="icon">
+        <span class="icon-hides" v-bind="extendAttrs">
+          <svg-icon :name="icon"></svg-icon>
+          <span v-if="options?.showDots" class="dots"></span>
+        </span>
+      </span>
+    </template>
+  </tiny-popover>
+</template>
+<script>
+import { inject } from 'vue'
+import { Popover } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPopover: Popover
+  },
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    options: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  setup() {
+    const extendAttrs = inject('extend-attributes') || {}
+    return {
+      extendAttrs
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.dots {
+  width: 6px;
+  height: 6px;
+  background: var(--ti-lowcode-toolbar-dot-color);
+  border-radius: 50%;
+  display: inline-block;
+  position: absolute;
+  top: 4px;
+  right: 3px;
+  z-index: 100;
+}
+</style>

packages/design-core/index.js

@@ -33,10 +33,10 @@ export { default as Styles } from '@opentiny/tiny-engine-setting-styles'
 export { default as Layout, LayoutService } from '@opentiny/tiny-engine-layout'
 export { default as Canvas } from '@opentiny/tiny-engine-canvas'
 export { initPreview } from './src/preview/src/main'
-export { GenerateCodeService, PluginPanel } from '@opentiny/tiny-engine-common'
+export { PluginPanel, ToolbarBase } from '@opentiny/tiny-engine-common'
 
 export { default as defaultRegistry } from './registry'
 
 export * from '@opentiny/tiny-engine-meta-register'
 
-export { EditorInfoService, AppService } from '@opentiny/tiny-engine-common'
+export { EditorInfoService, AppService, GenerateCodeService } from '@opentiny/tiny-engine-common'

packages/layout/src/DesignToolbars.vue

@@ -1,20 +1,30 @@
 <template>
   <div class="tiny-engine-toolbar">
     <div class="toolbar-left">
-      <component :is="getMergeMeta(comp).entry" v-for="comp in state.leftBar" :key="comp"></component>
+      <component
+        :is="getMergeMeta(comp).entry"
+        v-for="comp in state.leftBar"
+        :key="comp"
+        :options="getMergeMeta(comp).options"
+      ></component>
     </div>
     <div class="toolbar-center">
-      <component :is="getMergeMeta(comp).entry" v-for="comp in state.centerBar" :key="comp"></component>
+      <component
+        :is="getMergeMeta(comp).entry"
+        v-for="comp in state.centerBar"
+        :key="comp"
+        :options="getMergeMeta(comp).options"
+      ></component>
     </div>
     <div class="toolbar-right">
       <div class="toolbar-right-content">
         <div class="toolbar-right-item" v-for="(item, idx) in state.rightBar" :key="idx">
           <div v-if="typeof item === 'string'">
-            <component :is="getMergeMeta(item)?.entry"></component>
+            <component :is="getMergeMeta(item)?.entry" :options="getMergeMeta(item)?.options"></component>
           </div>
           <div class="toolbar-right-item-arr" v-if="Array.isArray(item)">
             <div class="toolbar-right-item-comp" v-for="comp in item" :key="comp">
-              <component :is="getMergeMeta(comp)?.entry"></component>
+              <component :is="getMergeMeta(comp)?.entry" :options="getMergeMeta(comp)?.options"></component>
             </div>
             <span class="toolbar-right-line" v-if="layoutRegistry.options?.isShowLine">|</span>
           </div>
@@ -94,6 +104,7 @@ export default {
   }
 
   .toolbar-left,
+  .toolbar-center,
   .toolbar-right {
     :deep(.icon) {
       display: inline-flex;

packages/layout/src/ToolbarCollapse.vue

@@ -8,11 +8,11 @@
     <div class="collapse-content">
       <div class="empty-bar" v-for="(item, idx) in collapseBar" :key="idx">
         <div class="toolbar-list-button" v-if="typeof item === 'string'">
-          <component :is="getMergeMeta(item)?.entry"></component>
+          <component :is="getMergeMeta(item)?.entry" :options="getMergeMeta(comp).options"></component>
         </div>
         <div v-if="Array.isArray(item)">
           <div class="toolbar-list-button" v-for="comp in item" :key="comp">
-            <component :is="getMergeMeta(comp)?.entry"></component>
+            <component :is="getMergeMeta(comp)?.entry" :options="getMergeMeta(comp).options"></component>
           </div>
           <div class="empty-line"></div>
         </div>
@@ -70,14 +70,6 @@ export default {
       background-color: var(--ti-lowcode-toolbar-ellipsis-hover-bg);
       cursor: pointer;
     }
-
-    .operate-title {
-      vertical-align: middle;
-    }
-
-    .reference-wrapper {
-      padding-left: 8px;
-    }
   }
 
   .empty-line {

packages/toolbars/breadcrumb/meta.js

@@ -2,5 +2,10 @@ export default {
   id: 'engine.toolbars.breadcrumb',
   type: 'toolbars',
   title: 'breadcrumb',
-  icon: ''
+  options: {
+    icon: {
+      default: ''
+    },
+    renderType: 'slot'
+  }
 }

packages/toolbars/breadcrumb/src/Main.vue

@@ -1,39 +1,54 @@
 <template>
-  <div class="top-panel-breadcrumb">
-    <div
-      :class="[
-        'top-panel-breadcrumb-title',
-        { 'top-panel-breadcrumb-title-block': breadcrumbData[0] === CONSTANTS.BLOCKTEXT }
-      ]"
-    >
-      <tiny-breadcrumb separator="：" @select="open">
-        <tiny-breadcrumb-item v-for="item in breadcrumbData.slice(0, 2)" :key="item">{{ item }} </tiny-breadcrumb-item>
-      </tiny-breadcrumb>
-    </div>
-    <tiny-button
-      class="publish"
-      v-if="breadcrumbData[0] === CONSTANTS.BLOCKTEXT"
-      @click="publishBlock()"
-      type="primary"
-      size="small"
-      >区块</tiny-button
-    >
-  </div>
-  <block-deploy-dialog v-model:visible="state.showDeployBlock" :nextVersion="nextVersion"></block-deploy-dialog>
+  <toolbar-base :options="options">
+    <template #default>
+      <div class="top-panel-breadcrumb">
+        <div
+          :class="[
+            'top-panel-breadcrumb-title',
+            { 'top-panel-breadcrumb-title-block': breadcrumbData[0] === CONSTANTS.BLOCKTEXT }
+          ]"
+        >
+          <tiny-breadcrumb separator="：" @select="open">
+            <tiny-breadcrumb-item v-for="item in breadcrumbData.slice(0, 2)" :key="item"
+              >{{ item }}
+            </tiny-breadcrumb-item>
+          </tiny-breadcrumb>
+        </div>
+
+        <tiny-button
+          class="publish"
+          v-if="breadcrumbData[0] === CONSTANTS.BLOCKTEXT"
+          @click="publishBlock()"
+          type="primary"
+          size="small"
+          >发布区块
+        </tiny-button>
+      </div>
+      <block-deploy-dialog v-model:visible="state.showDeployBlock" :nextVersion="nextVersion"></block-deploy-dialog>
+    </template>
+  </toolbar-base>
 </template>
 
 <script>
 import { reactive, computed } from 'vue'
 import { Breadcrumb, BreadcrumbItem, Button } from '@opentiny/vue'
 import { useBreadcrumb, useLayout } from '@opentiny/tiny-engine-meta-register'
+import { ToolbarBase } from '@opentiny/tiny-engine-common'
 import { BlockDeployDialog } from '@opentiny/tiny-engine-common'
 
 export default {
   components: {
     TinyBreadcrumb: Breadcrumb,
     TinyBreadcrumbItem: BreadcrumbItem,
     BlockDeployDialog,
-    TinyButton: Button
+    TinyButton: Button,
+    ToolbarBase
+  },
+  props: {
+    options: {
+      type: Object,
+      default: () => ({})
+    }
   },
   setup() {
     const PLUGINS_ID = {