feat(data builder): support show toolbar

devlive-community · Nov 19, 2024 · bc27bc2 · bc27bc2
1 parent 627d582
commit bc27bc2
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 4 deletions.
diff --git a/docs/components/data-builder.md b/docs/components/data-builder.md
@@ -65,6 +65,26 @@ const items = ref([
 
 :::
 
+## Toolbar
+
+::: raw
+
+<CodeRunner title="Usage">
+    <ShadcnDataBuilderEditor :items="panels" :show-toolbar="false" :width="800" :height="600" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+  <ShadcnDataBuilderEditor :items="items" :show-toolbar="false" :width="800" :height="600" />
+</template>
+```
+
+:::
+
 ## DataBuilder Props
 
 <ApiTable title="DataBuilder Editor Props"
@@ -78,6 +98,7 @@ const items = ref([
         ['showRuler', 'Whether to show the ruler', 'boolean', 'true', '-', '-'],
         ['width', 'The width of the content', 'number', '1920', '-', '-'],
         ['height', 'The height of the content', 'number', '1080', '-', '-'],
+        ['showToolbar', 'Whether to show the toolbar', 'boolean', 'true', '-', '-'],
     ]">
 </ApiTable>
 
@@ -102,6 +123,7 @@ const items = ref([
         ['showRuler', 'Whether to show the ruler', 'boolean', 'true', '-', '-'],
         ['width', 'The width of the content', 'number', '1920', '-', '-'],
         ['height', 'The height of the content', 'number', '1080', '-', '-'],
+        ['showToolbar', 'Whether to show the toolbar', 'boolean', 'true', '-', '-'],
     ]">
 </ApiTable>
 

diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex h-screen bg-gray-100 w-screen">
-    <ShadcnDataBuilderEditor :items="panels" :width="500" :height="500"/>
+    <ShadcnDataBuilderEditor :items="panels" :show-toolbar="false" :width="500" :height="500"/>
   </div>
 </template>
 

diff --git a/src/ui/data-builder/ShadcnDataBuilderCanvas.vue b/src/ui/data-builder/ShadcnDataBuilderCanvas.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex-1 relative flex flex-col">
     <!-- 工具栏 -->
-    <div class="h-12 border-b border-gray-200 bg-white px-4 flex items-center justify-between shrink-0">
+    <div v-if="showToolbar" class="h-12 border-b border-gray-200 bg-white px-4 flex items-center justify-between shrink-0">
       <div class="flex items-center space-x-4">
         <!-- 画布尺寸调整 -->
         <!-- Canvas size adjustment -->
@@ -134,7 +134,8 @@ const props = withDefaults(defineProps<ShadcnDataBuilderCanvasProps>(), {
   snapToGrid: true,
   showRuler: true,
   width: 1920,
-  height: 1080
+  height: 1080,
+  showToolbar: true
 })
 
 // 画布状态

diff --git a/src/ui/data-builder/ShadcnDataBuilderEditor.vue b/src/ui/data-builder/ShadcnDataBuilderEditor.vue
@@ -13,6 +13,7 @@
                              :show-ruler="showRuler"
                              :width="width"
                              :height="height"
+                             :show-toolbar="showToolbar"
                              @select="onSelect"/>
 
     <!-- Right Configure -->
@@ -36,7 +37,8 @@ withDefaults(defineProps<ShadcnDataBuilderEditorProps>(), {
   gridSize: 20,
   showRuler: true,
   width: 1920,
-  height: 1080
+  height: 1080,
+  showToolbar: true
 })
 
 const components = ref<ShadcnDataBuilderPanelChildProps[]>([])

diff --git a/src/ui/data-builder/types.ts b/src/ui/data-builder/types.ts
@@ -30,6 +30,7 @@ export interface ShadcnDataBuilderBaseProps
     showRuler?: boolean
     width?: number
     height?: number
+    showToolbar?: boolean
 }
 
 export interface ShadcnDataBuilderCanvasProps