From 705c9d0d10fe21190f520feb21be0a2b5f76dce3 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Fri, 27 Sep 2024 17:52:22 -0700
Subject: [PATCH 1/3] fix: add block panel can't open

---
 packages/plugins/materials/src/meta/block/src/Main.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/plugins/materials/src/meta/block/src/Main.vue b/packages/plugins/materials/src/meta/block/src/Main.vue
index 9e50c91a94..1120ea35b1 100644
--- a/packages/plugins/materials/src/meta/block/src/Main.vue
+++ b/packages/plugins/materials/src/meta/block/src/Main.vue
@@ -10,10 +10,7 @@ export default {
   components: {
     BlockPanel
   },
-  props: {
-    activeTabName: String,
-    rightPanelRef: Object
-  },
+  props: {},
   setup() {
     const existBlockModule = getMergeMeta('engine.plugins.blockmanage')
 

From 967ec452fc38c0cac650d0f31b9f5aae17d82358 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Fri, 27 Sep 2024 19:43:44 -0700
Subject: [PATCH 2/3] fix: blockgroup select

---
 packages/common/component/PluginBlockList.vue | 23 +++++++++++--------
 packages/plugins/block/src/Main.vue           |  2 +-
 .../src/meta/block/src/BlockPanel.vue         | 12 +++++++---
 .../materials/src/meta/layout/src/Main.vue    | 13 +++++++----
 4 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue
index 91c15ddf4c..f6682bec0e 100644
--- a/packages/common/component/PluginBlockList.vue
+++ b/packages/common/component/PluginBlockList.vue
@@ -1,6 +1,6 @@
 <template>
   <ul
-    v-if="state.data.length"
+    v-if="state.data.length || showAddButton"
     :class="['block-list', 'lowcode-scrollbar', { 'is-small-list': blockStyle === 'mini' }, { isShortcutPanel }]"
     @mouseleave="state.hover = false"
   >
@@ -10,6 +10,7 @@
       :draggable="!isBlockManage && showSettingIcon"
       :class="['block-item', { 'is-disabled': showBlockDetail }, { 'block-item-small-list': blockStyle === 'mini' }]"
       :title="getTitle(item)"
+      @mousedown.stop.left="blockClick({ item, index })"
       @mouseover.stop="openBlockShotPanel(item, $event)"
       @mouseleave="handleBlockItemLeave"
     >
@@ -71,7 +72,7 @@
                     <svg-button class="list-item-svg" name="text-source-setting"> </svg-button>
                     <span>设置</span>
                   </li>
-                  <li class="list-item" @mousedown.stop.left="blockClick({ event: $event, item, index })">
+                  <li class="list-item" @mousedown.stop.left="editBlock({ event: $event, item, index })">
                     <svg-button class="list-item-svg" name="to-edit"> </svg-button><span>编辑</span>
                   </li>
                 </ul>
@@ -132,7 +133,7 @@
         </div>
       </slot>
     </li>
-    <li v-if="state.showAddButton" class="block-item block-plus" @click="$emit('add')">
+    <li v-if="showAddButton" class="block-item block-plus" @click="$emit('add')">
       <span class="block-plus-icon"><icon-plus></icon-plus></span>
     </li>
     <div v-if="showBlockShot && state.hover && state.currentBlock.screenshot" class="block-shortcut">
@@ -149,7 +150,7 @@
       </div>
     </div>
   </ul>
-  <search-empty :isShow="!state.data.length" />
+  <search-empty :isShow="!state.data.length && !showAddButton" />
 </template>
 
 <script>
@@ -228,13 +229,12 @@ export default {
       default: null
     }
   },
-  emits: ['click', 'iconClick', 'add', 'deleteBlock', 'openVersionPanel'],
+  emits: ['click', 'iconClick', 'add', 'deleteBlock', 'openVersionPanel', 'editBlock'],
   setup(props, { emit }) {
     const panelState = inject('panelState', {})
     const state = reactive({
       activeIndex: -1,
       data: computed(() => props.data),
-      showAddButton: computed(() => props.showAddButton),
       top: 0,
       hover: false,
       currentBlock: {},
@@ -263,12 +263,16 @@ export default {
       }
     }
 
-    const blockClick = ({ event, item, index }) => {
+    const blockClick = ({ item }) => {
+      emit('click', item)
+    }
+
+    const editBlock = ({ event, item, index }) => {
       if (props.isBlockManage) {
         state.activeIndex = index
       }
 
-      emit('click', item)
+      emit('editBlock', item)
       // 点击区块并不打开设置面板
       emit('iconClick', { event, item, index, isOpen: false })
     }
@@ -361,7 +365,8 @@ export default {
       defaultImg,
       handleBlockItemLeave,
       handleSettingMouseOver,
-      handleShowVersionMenu
+      handleShowVersionMenu,
+      editBlock
     }
   }
 }
diff --git a/packages/plugins/block/src/Main.vue b/packages/plugins/block/src/Main.vue
index 59566b60c7..75d7e98fee 100644
--- a/packages/plugins/block/src/Main.vue
+++ b/packages/plugins/block/src/Main.vue
@@ -89,7 +89,7 @@
         :blockStyle="state.layout"
         default-icon-tip="查看区块"
         :externalBlock="externalBlock"
-        @click="editBlock"
+        @editBlock="editBlock"
         @iconClick="openSettingPanel"
       ></plugin-block-list>
       <block-setting></block-setting>
diff --git a/packages/plugins/materials/src/meta/block/src/BlockPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockPanel.vue
index 3cc7f0179d..27085d16ae 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockPanel.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockPanel.vue
@@ -6,7 +6,7 @@
     </tiny-search>
     <block-list v-model:blockList="filterBlocks" :show-add-button="true" :show-block-shot="true"></block-list>
   </div>
-  <teleport to=".material-right-panel" v-if="rightPanelRef">
+  <teleport defer :to="rightPanelClassName">
     <block-group-panel></block-group-panel>
     <block-version-select></block-version-select>
   </teleport>
@@ -35,8 +35,14 @@ export default {
     BlockVersionSelect
   },
   props: {
-    activeTabName: String,
-    rightPanelRef: Object
+    activeTabName: {
+      type: String,
+      default: ''
+    },
+    rightPanelClassName: {
+      type: String,
+      default: ''
+    }
   },
   setup(props) {
     const { addDefaultGroup, isDefaultGroupId, isAllGroupId, isRefresh, selectedGroup } = useBlock()
diff --git a/packages/plugins/materials/src/meta/layout/src/Main.vue b/packages/plugins/materials/src/meta/layout/src/Main.vue
index 9e9b22de92..390d40882b 100644
--- a/packages/plugins/materials/src/meta/layout/src/Main.vue
+++ b/packages/plugins/materials/src/meta/layout/src/Main.vue
@@ -6,11 +6,15 @@
     <template #content>
       <tiny-tabs v-model="activeName" tab-style="button-card" class="full-width-tabs" v-if="!onlyShowDefault">
         <tiny-tab-item :key="item.id" v-for="item in tabComponents" :title="item.title" :name="item.id">
-          <component :is="item.component" :activeTabName="activeName" :rightPanelRef="rightPanelRef"></component>
+          <component
+            :is="item.component"
+            :activeTabName="activeName"
+            :rightPanelClassName="`.${rightPanelClassName}`"
+          ></component>
         </tiny-tab-item>
       </tiny-tabs>
       <component :is="defaultComponent" v-if="onlyShowDefault"></component>
-      <div class="material-right-panel" ref="rightPanelRef"></div>
+      <div :class="rightPanelClassName"></div>
     </template>
   </plugin-panel>
 </template>
@@ -21,6 +25,8 @@ import { Tabs, TabItem } from '@opentiny/vue'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { PluginPanel } from '@opentiny/tiny-engine-common'
 
+const rightPanelClassName = 'material-right-panel'
+
 export default {
   components: {
     PluginPanel,
@@ -49,7 +55,6 @@ export default {
     provide('panelState', panelState) // 使用provide传给子组件,后续可能会有调整，先暂定
 
     const pluginRegistryData = ref(props.registryData)
-    const rightPanelRef = ref(null)
     const displayComponentIds = pluginRegistryData.value.options.displayComponentIds || []
     const headerComponent = pluginRegistryData.value.components?.header
     const onlyShowDefault = ref(displayComponentIds.length === 1)
@@ -77,7 +82,7 @@ export default {
       defaultComponent,
       onlyShowDefault,
       tabComponents,
-      rightPanelRef
+      rightPanelClassName
     }
   }
 }

From 4a99ce7c740fd4f98a5cd44d14cbc7d2fbced7e7 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Fri, 27 Sep 2024 23:09:34 -0700
Subject: [PATCH 3/3] fix: support vue3.5 below version

---
 .../materials/src/meta/block/src/BlockPanel.vue     |  8 +++-----
 .../plugins/materials/src/meta/layout/src/Main.vue  | 13 ++++---------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/plugins/materials/src/meta/block/src/BlockPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockPanel.vue
index 27085d16ae..88436953af 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockPanel.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockPanel.vue
@@ -6,7 +6,8 @@
     </tiny-search>
     <block-list v-model:blockList="filterBlocks" :show-add-button="true" :show-block-shot="true"></block-list>
   </div>
-  <teleport defer :to="rightPanelClassName">
+  <!-- TODO: vue 版本升级到 3.5+ 之后，支持 defer，就不需要 rightPanelRef 了 -->
+  <teleport defer to=".material-right-panel" v-if="rightPanelRef">
     <block-group-panel></block-group-panel>
     <block-version-select></block-version-select>
   </teleport>
@@ -39,10 +40,7 @@ export default {
       type: String,
       default: ''
     },
-    rightPanelClassName: {
-      type: String,
-      default: ''
-    }
+    rightPanelRef: Object
   },
   setup(props) {
     const { addDefaultGroup, isDefaultGroupId, isAllGroupId, isRefresh, selectedGroup } = useBlock()
diff --git a/packages/plugins/materials/src/meta/layout/src/Main.vue b/packages/plugins/materials/src/meta/layout/src/Main.vue
index 390d40882b..9e9b22de92 100644
--- a/packages/plugins/materials/src/meta/layout/src/Main.vue
+++ b/packages/plugins/materials/src/meta/layout/src/Main.vue
@@ -6,15 +6,11 @@
     <template #content>
       <tiny-tabs v-model="activeName" tab-style="button-card" class="full-width-tabs" v-if="!onlyShowDefault">
         <tiny-tab-item :key="item.id" v-for="item in tabComponents" :title="item.title" :name="item.id">
-          <component
-            :is="item.component"
-            :activeTabName="activeName"
-            :rightPanelClassName="`.${rightPanelClassName}`"
-          ></component>
+          <component :is="item.component" :activeTabName="activeName" :rightPanelRef="rightPanelRef"></component>
         </tiny-tab-item>
       </tiny-tabs>
       <component :is="defaultComponent" v-if="onlyShowDefault"></component>
-      <div :class="rightPanelClassName"></div>
+      <div class="material-right-panel" ref="rightPanelRef"></div>
     </template>
   </plugin-panel>
 </template>
@@ -25,8 +21,6 @@ import { Tabs, TabItem } from '@opentiny/vue'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { PluginPanel } from '@opentiny/tiny-engine-common'
 
-const rightPanelClassName = 'material-right-panel'
-
 export default {
   components: {
     PluginPanel,
@@ -55,6 +49,7 @@ export default {
     provide('panelState', panelState) // 使用provide传给子组件,后续可能会有调整，先暂定
 
     const pluginRegistryData = ref(props.registryData)
+    const rightPanelRef = ref(null)
     const displayComponentIds = pluginRegistryData.value.options.displayComponentIds || []
     const headerComponent = pluginRegistryData.value.components?.header
     const onlyShowDefault = ref(displayComponentIds.length === 1)
@@ -82,7 +77,7 @@ export default {
       defaultComponent,
       onlyShowDefault,
       tabComponents,
-      rightPanelClassName
+      rightPanelRef
     }
   }
 }