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

packages/design-core/index.js

@@ -30,7 +30,7 @@ export { default as Robot } from '@opentiny/tiny-engine-plugin-robot'
 export { default as Props, PropertiesService, PropertyService } from '@opentiny/tiny-engine-setting-props'
 export { default as Events } from '@opentiny/tiny-engine-setting-events'
 export { default as Styles } from '@opentiny/tiny-engine-setting-styles'
-export { default as Layout, LayoutService } from '@opentiny/tiny-engine-layout'
+export { default as Layout, ToolbarBaseComponent, 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'

packages/layout/index.js

@@ -1,5 +1,6 @@
 import component from './src/Main.vue'
 import metaData from './meta'
+import ToolbarBaseComponent from './src/ToolbarBaseComponent.vue'
 import { LayoutService } from './src/composable'
 import designSmbConfig from '@opentiny/vue-design-smb'
 import { ConfigProvider as TinyConfigProvider } from '@opentiny/vue'
@@ -17,4 +18,4 @@ export default {
   metas: [LayoutService]
 }
 
-export { LayoutService }
+export { ToolbarBaseComponent, LayoutService }

packages/layout/src/DesignToolbars.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="tiny-engine-toolbar">
     <div class="toolbar-left">
-      <component :is="item.entry" v-for="item in leftBar" :key="item.id"></component>
+      <component v-for="item in leftBar" :is="item.entry" :options="item.options" :key="item.id"></component>
     </div>
     <div class="toolbar-center">
-      <component :is="item.entry" v-for="item in centerBar" :key="item.id"></component>
+      <component v-for="item in centerBar" :is="item.entry" :options="item.options" :key="item.id"></component>
     </div>
     <div class="toolbar-right">
-      <component :is="item.entry" v-for="item in rightBar" :key="item.id"></component>
-      <toolbar-collapse :collapseBar="collapseBar"></toolbar-collapse>
+      <component v-for="item in rightBar" :is="item.entry" :options="item.options" :key="item.id"></component>
+      <toolbar-collapse v-if="collapseBar.length" :collapseBar="collapseBar"></toolbar-collapse>
     </div>
   </div>
   <div class="progress">
@@ -42,9 +42,9 @@ export default {
     })
 
     props.toolbars.forEach((item) => {
-      if (item.align === 'right') {
-        item?.collapsed ? collapseBar.push(item) : rightBar.push(item)
-      } else if (item.align === 'center') {
+      if (item.options.align === 'right') {
+        item?.options?.collapsed ? collapseBar.push(item) : rightBar.push(item)
+      } else if (item.options.align === 'center') {
         centerBar.push(item)
       } else {
         leftBar.push(item)
@@ -90,6 +90,7 @@ export default {
   }
 
   .toolbar-left,
+  .toolbar-center,
   .toolbar-right {
     :deep(.icon) {
       display: inline-flex;

packages/layout/src/ToolbarBaseComponent.vue

@@ -0,0 +1,82 @@
+<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" class="operate-title">{{ state.content }}</span>
+  </span>
+  <span class="split-line" v-if="state.options?.separate">|</span>
+</template>
+
+<script>
+import { reactive, computed } from 'vue'
+import ToolbarIcon from './toolbar-built-in/ToolbarIcon.vue'
+import ToolbarButton from './toolbar-built-in/ToolbarButton.vue'
+
+export default {
+  components: {
+    ToolbarIcon,
+    ToolbarButton
+  },
+  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 ToolbarButton
+        case 'icon':
+          return ToolbarIcon
+        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;
+}
+.operate-title {
+  vertical-align: middle;
+  padding-left: 8px;
+}
+</style>

packages/layout/src/ToolbarCollapse.vue

@@ -7,9 +7,9 @@
         </span>
       </template>
       <div class="empty-bar" v-for="item in collapseBar" :key="item.id">
-        <div v-if="item.splitLine" class="empty-line"></div>
+        <div v-if="item.options.splitLine" class="empty-line"></div>
         <div class="toolbar-list-button">
-          <component :is="item.entry"></component>
+          <component :is="item.entry" :options="item.options"></component>
         </div>
       </div>
     </tiny-popover>
@@ -60,10 +60,6 @@ export default {
       cursor: pointer;
     }
 
-    .operate-title {
-      vertical-align: middle;
-    }
-
     .reference-wrapper {
       padding-left: 8px;
     }

packages/layout/src/toolbar-built-in/ToolbarButton.vue

@@ -0,0 +1,71 @@
+<template>
+  <tiny-button v-bind="extendAttrs" class="toolbar-button">
+    <span class="svg-wrap">
+      <svg-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;
+  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/layout/src/toolbar-built-in/ToolbarIcon.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/toolbars/breadcrumb/meta.js

@@ -2,6 +2,11 @@ export default {
   id: 'engine.toolbars.breadcrumb',
   type: 'toolbars',
   title: 'breadcrumb',
-  icon: '',
-  align: 'left'
+  options: {
+    icon: {
+      default: ''
+    },
+    align: 'left',
+    renderType: 'slot'
+  }
 }

packages/toolbars/breadcrumb/package.json

@@ -27,7 +27,8 @@
     "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-http": "workspace:*",
     "@opentiny/tiny-engine-meta-register": "workspace:*",
-    "@opentiny/tiny-engine-utils": "workspace:*"
+    "@opentiny/tiny-engine-utils": "workspace:*",
+    "@opentiny/tiny-engine-layout": "workspace:*"
   },
   "devDependencies": {
     "@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:*",

packages/toolbars/breadcrumb/src/Main.vue

@@ -1,34 +1,49 @@
 <template>
-  <div class="top-panel-breadcrumb">
-    <div class="top-panel-breadcrumb-title">
-      <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-component :options="options">
+    <template #default>
+      <div class="top-panel-breadcrumb">
+        <div class="top-panel-breadcrumb-title">
+          <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-component>
 </template>
 
 <script>
 import { reactive, computed } from 'vue'
 import { Breadcrumb, BreadcrumbItem, Button } from '@opentiny/vue'
 import { useBreadcrumb, useLayout } from '@opentiny/tiny-engine-meta-register'
+import { ToolbarBaseComponent } from '@opentiny/tiny-engine-layout'
 import { BlockDeployDialog } from '@opentiny/tiny-engine-common'
 
 export default {
   components: {
     TinyBreadcrumb: Breadcrumb,
     TinyBreadcrumbItem: BreadcrumbItem,
     BlockDeployDialog,
-    TinyButton: Button
+    TinyButton: Button,
+    ToolbarBaseComponent
+  },
+  props: {
+    options: {
+      type: Object,
+      default: () => {}
+    }
   },
   setup() {
     const PLUGINS_ID = {