feat: 增加了toolbar 示例

examples/src/pages/ApiView/ToolBar/Toolbar.vue

@@ -1,14 +1,14 @@
 <template>
-  <ToolBar :bars="toolBars" />
+  <ToolBar :bars="toolBars" class="w-full h-14 align-middle" />
 </template>
 
 <script setup lang="ts">
+import type { ToolBarItemType } from '@open-data-v/designer'
+import { ToolBar } from '@open-data-v/designer'
 import { h } from 'vue'
 import { useRouter } from 'vue-router'
 
 import LogoView from '@/components/LogoView'
-import type { ToolBarItemType } from '@/components/ToolBar'
-import { ToolBar } from '@/components/ToolBar'
 
 import { toggleTheme } from './modules/actions'
 import ThemeIcon from './modules/themeSwitch/ThemeIcon.vue'

examples/src/pages/DesignerView/View.vue

@@ -1,12 +1,24 @@
 <template>
-  <Designer ref="designer" :toolbars="toolBars" />
+  <Designer ref="designer">
+    <template #top>
+      <ToolBar :bars="toolBars" class="w-full h-14 align-middle">
+        <div class="tool-bar-title">{{ canvasState.name }}</div>
+      </ToolBar>
+    </template>
+  </Designer>
 </template>
 
 <script setup lang="ts">
 import { StaticKey, useEventBus } from '@open-data-v/base'
 import { StaticDataPlugin, SubDataPlugin, WebsocketDataPlugin } from '@open-data-v/data'
 /* eslint-disable-next-line @typescript-eslint/consistent-type-imports */
-import { Designer, useCanvasState, useDataState, useScriptState } from '@open-data-v/designer'
+import {
+  Designer,
+  ToolBar,
+  useCanvasState,
+  useDataState,
+  useScriptState
+} from '@open-data-v/designer'
 import { CustomScriptPlugin, SystemScriptPlugin } from '@open-data-v/scripts'
 import { onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'

examples/src/pages/UIView.vue

@@ -1,7 +1,7 @@
 <template>
   <n-layout class="home">
-    <n-layout-header class="h-16">
-      <ToolBar />
+    <n-layout-header class="h-14">
+      <ToolBar class="w-full h-14" />
     </n-layout-header>
     <!-- 左侧组件列表 -->
     <n-layout class="main">

packages/base/src/components/RenderSlot.ts

@@ -6,6 +6,6 @@ export default defineComponent({
   },
   // @ts-ignore
   setup(props) {
-    return () => [h('div', {}, props.slots)]
+    return () => [h('template', {}, props.slots)]
   }
 })

packages/designer/src/components/ToolBar/ToolBar.vue

@@ -38,7 +38,6 @@ const props = withDefaults(
     bars: () => []
   }
 )
-
 const leftToolBars = computed<ToolBarItemType[]>(() =>
   props.bars.filter((el) => el.location === 'left' || el.location === undefined)
 )
@@ -55,11 +54,9 @@ const rightToolBars = computed<ToolBarItemType[]>(() =>
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
-  height: inherit;
   border-bottom: 1px var(--n-text-color) solid;
 }
 .tool-bar-item {
-  height: inherit;
   display: flex;
   align-items: center;
 }

packages/designer/src/editor/Editor.vue

@@ -131,7 +131,6 @@ const canvasStyleData = computed(() => canvasState.canvasStyleData)
 const curComponent = computed(() => canvasState.activeComponent)
 
 const bgStyle = computed<Record<string, string>>(() => {
-  debugger
   const backgroundStyle = backgroundToCss(canvasStyleData.value.background)
   const style = {
     ...canvasStyleData.value,

packages/designer/src/pages/designer/Designer.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="h-full flex-col flex flex-nowrap overflow-hidden">
-    <div class="w-full h-14 align-middle">
+    <template v-if="slots?.top">
+      <RenderSlot :slots="slots?.top()" />
+    </template>
+    <template v-else>
       <ToolBar :toolbars="toolbars" />
-    </div>
+    </template>
     <div class="content flex flex-1 flex-nowrap flex-row overflow-auto">
       <template v-if="slots?.left">
         <RenderSlot :slots="slots?.left()" />

packages/designer/src/pane/Toolsbar/Toolbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <ToolBar v-if="toolbars.length > 0" :bars="toolbars" class="w-full">
+  <ToolBar v-if="toolbars.length > 0" :bars="toolbars" class="w-full h-14 align-middle">
     <div class="tool-bar-title">{{ canvasState.name }}</div>
   </ToolBar>
 </template>