From 1517440237891b46820c672060578785107da098 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Fri, 27 Dec 2024 05:01:58 -0800
Subject: [PATCH 1/4] fix: breadcrumb publish block cannot get correct version

---
 .../common/component/BlockDeployDialog.vue    | 73 +++++++++++++------
 packages/plugins/block/src/BlockSetting.vue   | 53 ++++++++------
 .../plugins/block/src/composable/useBlock.js  |  2 +-
 packages/toolbars/breadcrumb/src/Main.vue     | 48 +++++++-----
 .../src/composable/useBreadcrumb.js           |  4 +-
 5 files changed, 115 insertions(+), 65 deletions(-)

diff --git a/packages/common/component/BlockDeployDialog.vue b/packages/common/component/BlockDeployDialog.vue
index 3c15521b1..f69dae1aa 100644
--- a/packages/common/component/BlockDeployDialog.vue
+++ b/packages/common/component/BlockDeployDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <tiny-dialog-box
-    :visible="$attrs.visible"
+    :visible="visible"
     title="发布区块"
     width="550px"
     append-to-body
@@ -80,7 +80,7 @@ import {
   Popover as TinyPopover,
   FormItem as TinyFormItem
 } from '@opentiny/vue'
-import { useNotify, useCanvas, getMetaApi, META_APP, useBlock } from '@opentiny/tiny-engine-meta-register'
+import { useNotify, getMetaApi, META_APP } from '@opentiny/tiny-engine-meta-register'
 import { constants } from '@opentiny/tiny-engine-utils'
 import VueMonaco from './VueMonaco.vue'
 
@@ -96,13 +96,17 @@ export default {
     VueMonaco
   },
   props: {
-    nextVersion: {
-      type: String,
-      default: ''
+    block: {
+      type: Object,
+      default: () => ({})
+    },
+    visible: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ['update:visible'],
-  setup(props, { emit, attrs }) {
+  emits: ['update:visible', 'changeSchema'],
+  setup(props, { emit }) {
     const { COMPONENT_NAME } = constants
     const formState = reactive({
       deployInfo: '',
@@ -137,12 +141,31 @@ export default {
       }
     }
 
+    const getNextVersion = (block) => {
+      const backupList = block.backupList || []
+
+      let latestVersion = '1.0.0'
+      let latestTime = 0
+      backupList.forEach((v) => {
+        const vTime = new Date(v.created_at).getTime()
+
+        if (vTime > latestTime) {
+          latestTime = vTime
+          latestVersion = v.version
+        }
+      })
+      // version 符合X.Y.Z的字符结构
+      return latestVersion.replace(/\d+$/, (match) => Number(match) + 1)
+    }
+
     watch(
-      () => attrs.visible,
+      () => props.visible,
       (visible) => {
-        if (visible && !formState.version) {
-          formState.version = props.nextVersion
+        if (!visible) {
+          return
         }
+
+        formState.version = getNextVersion(props.block)
       }
     )
 
@@ -150,10 +173,11 @@ export default {
 
     const deployBlock = async () => {
       deployBlockRef.value.validate((valid) => {
-        const { getEditBlock, publishBlock } = getMetaApi(META_APP.BlockManage)
+        const { publishBlock } = getMetaApi(META_APP.BlockManage)
+
         if (valid) {
           const params = {
-            block: getEditBlock() || useBlock().getCurrentBlock(),
+            block: props.block,
             is_compile: true,
             deploy_info: formState.deployInfo,
             version: formState.version,
@@ -170,21 +194,23 @@ export default {
 
     const changeCompare = async (value) => {
       const api = getMetaApi(META_APP.BlockManage)
+
       if (value) {
-        const block = api.getEditBlock()
+        const block = props.block
         const remote = await api.getBlockById(block?.id)
         const originalObj = remote?.content || {}
         state.originalCode = JSON.stringify(originalObj, null, 2)
-        const getSchema = useCanvas().getSchema
 
+        // const getSchema = useCanvas().getSchema
         // 转为普通对象，和线上代码顺序保持一致
-        const pageSchema = getSchema?.() || {}
-        if (pageSchema.componentName === 'Block') {
-          state.code = JSON.stringify(pageSchema, null, 2)
-        } else {
-          // 非区块编辑
-          state.code = state.originalCode
-        }
+        // const pageSchema = getSchema?.() || {}
+        // if (pageSchema.componentName === 'Block') {
+        //   state.code = JSON.stringify(pageSchema, null, 2)
+        // } else {
+        //   // 非区块编辑
+        // }
+
+        state.code = block?.content || {}
         state.compareVisible = true
       }
     }
@@ -207,8 +233,9 @@ export default {
         return
       }
       try {
-        const pageSchema = JSON.parse(state.newCode)
-        useCanvas().importSchema({ ...pageSchema, componentName: COMPONENT_NAME.Block })
+        const newSchema = JSON.parse(state.newCode)
+        // useCanvas().importSchema({ ...pageSchema, componentName: COMPONENT_NAME.Block })
+        emit('changeSchema', { ...newSchema, componentName: COMPONENT_NAME.Block })
         close()
       } catch (err) {
         useNotify({
diff --git a/packages/plugins/block/src/BlockSetting.vue b/packages/plugins/block/src/BlockSetting.vue
index e9b6407bc..9cb2698d1 100644
--- a/packages/plugins/block/src/BlockSetting.vue
+++ b/packages/plugins/block/src/BlockSetting.vue
@@ -75,14 +75,17 @@
       </tiny-collapse>
     </template>
   </plugin-setting>
-  <block-deploy-dialog v-model:visible="state.showDeployBlock" :nextVersion="nextVersion"></block-deploy-dialog>
+  <block-deploy-dialog
+    v-model:visible="state.showDeployBlock"
+    :block="editBlock"
+    @changeSchema="handleChangeSchema"
+  ></block-deploy-dialog>
 </template>
 
 <script lang="jsx">
 import { reactive, ref, watch, watchEffect, computed } from 'vue'
 import { Button as TinyButton, Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
-import { useModal } from '@opentiny/tiny-engine-meta-register'
-import { getMergeMeta, useBlock } from '@opentiny/tiny-engine-meta-register'
+import { useModal, getMergeMeta, useBlock, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { BlockHistoryList, PluginSetting, CloseIcon, SvgButton, ButtonGroup } from '@opentiny/tiny-engine-common'
 import { previewBlock } from '@opentiny/tiny-engine-common/js/preview'
 import { LifeCycles } from '@opentiny/tiny-engine-common'
@@ -152,22 +155,22 @@ export default {
     })
 
     // 按时间最新提交的版本的修订版本号+1, 提示输入的下一个版本
-    const nextVersion = computed(() => {
-      const backupList = state.backupList || []
-
-      let latestVersion = '1.0.0'
-      let latestTime = 0
-      backupList.forEach((v) => {
-        const vTime = new Date(v.created_at).getTime()
-
-        if (vTime > latestTime) {
-          latestTime = vTime
-          latestVersion = v.version
-        }
-      })
-      // version 符合X.Y.Z的字符结构
-      return latestVersion.replace(/\d+$/, (match) => Number(match) + 1)
-    })
+    // const nextVersion = computed(() => {
+    //   const backupList = state.backupList || []
+
+    //   let latestVersion = '1.0.0'
+    //   let latestTime = 0
+    //   backupList.forEach((v) => {
+    //     const vTime = new Date(v.created_at).getTime()
+
+    //     if (vTime > latestTime) {
+    //       latestTime = vTime
+    //       latestVersion = v.version
+    //     }
+    //   })
+    //   // version 符合X.Y.Z的字符结构
+    //   return latestVersion.replace(/\d+$/, (match) => Number(match) + 1)
+    // })
 
     watch(
       () => {
@@ -264,10 +267,17 @@ export default {
       setConfigItemVisible(false)
     }
 
+    const handleChangeSchema = (newSchema) => {
+      // 如果是当前正在画布编辑的区块，需要重新 importSchema
+      if (getEditBlock()?.id === useBlock().getCurrentBlock()?.id) {
+        useCanvas().importSchema(newSchema)
+      }
+    }
+
     return {
       state,
       isOpen,
-      nextVersion,
+      // nextVersion,
       showDeployBlockDialog,
       closePanel,
       deleteBlock,
@@ -279,7 +289,8 @@ export default {
       globalConfig: getMergeMeta('engine.config'),
       onMouseLeave,
       handleClick,
-      handleShowGuide
+      handleShowGuide,
+      handleChangeSchema
     }
   }
 }
diff --git a/packages/plugins/block/src/composable/useBlock.js b/packages/plugins/block/src/composable/useBlock.js
index f21ebbe45..1cedf024b 100644
--- a/packages/plugins/block/src/composable/useBlock.js
+++ b/packages/plugins/block/src/composable/useBlock.js
@@ -287,7 +287,7 @@ const initBlock = async (block = {}, _langs = {}, isEdit) => {
   block.content = getSchema()
 
   setCurrentBlock(block)
-  setBreadcrumbBlock([block[nameCn] || block.label], block.histories)
+  setBreadcrumbBlock([block[nameCn] || block.label])
 
   // 如果是点击区块管理列表进来的则不需要执行以下操作
   if (!isEdit) {
diff --git a/packages/toolbars/breadcrumb/src/Main.vue b/packages/toolbars/breadcrumb/src/Main.vue
index b3312d5ce..951627d3a 100644
--- a/packages/toolbars/breadcrumb/src/Main.vue
+++ b/packages/toolbars/breadcrumb/src/Main.vue
@@ -24,7 +24,11 @@
           >发布区块
         </tiny-button>
       </div>
-      <block-deploy-dialog v-model:visible="state.showDeployBlock" :nextVersion="nextVersion"></block-deploy-dialog>
+      <block-deploy-dialog
+        v-model:visible="state.showDeployBlock"
+        :block="currentBlock"
+        @changeSchema="handleChangeSchema"
+      ></block-deploy-dialog>
     </template>
   </toolbar-base>
 </template>
@@ -32,7 +36,7 @@
 <script>
 import { reactive, computed } from 'vue'
 import { Breadcrumb, BreadcrumbItem, Button } from '@opentiny/vue'
-import { useBreadcrumb, useLayout } from '@opentiny/tiny-engine-meta-register'
+import { useBreadcrumb, useLayout, useBlock, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { ToolbarBase } from '@opentiny/tiny-engine-common'
 import { BlockDeployDialog } from '@opentiny/tiny-engine-common'
 
@@ -68,36 +72,44 @@ export default {
       state.showDeployBlock = true
     }
 
-    const nextVersion = computed(() => {
-      const backupList = getBreadcrumbData().value[2] || []
+    // const nextVersion = computed(() => {
+    //   const backupList = getBreadcrumbData().value[2] || []
 
-      let latestVersion = '1.0.0'
-      let latestTime = 0
-      backupList.forEach((v) => {
-        const vTime = new Date(v.created_at).getTime()
+    //   let latestVersion = '1.0.0'
+    //   let latestTime = 0
+    //   backupList.forEach((v) => {
+    //     const vTime = new Date(v.created_at).getTime()
 
-        if (vTime > latestTime) {
-          latestTime = vTime
-          latestVersion = v.version
-        }
-      })
+    //     if (vTime > latestTime) {
+    //       latestTime = vTime
+    //       latestVersion = v.version
+    //     }
+    //   })
 
-      // version 符合X.Y.Z的字符结构
-      return latestVersion.replace(/\d+$/, (match) => Number(match) + 1)
-    })
+    //   // version 符合X.Y.Z的字符结构
+    //   return latestVersion.replace(/\d+$/, (match) => Number(match) + 1)
+    // })
 
     const open = () => {
       if (!plugins) return
       plugins.render = breadcrumbData.value[0] === CONSTANTS.PAGETEXT ? PLUGINS_ID.PAGEID : PLUGINS_ID.BLOCKID
     }
 
+    const currentBlock = computed(useBlock().getCurrentBlock())
+
+    const handleChangeSchema = (newSchema) => {
+      useCanvas().importSchema(newSchema)
+    }
+
     return {
       breadcrumbData,
       publishBlock,
       state,
-      nextVersion,
+      // nextVersion,
       CONSTANTS,
-      open
+      open,
+      currentBlock,
+      handleChangeSchema
     }
   }
 }
diff --git a/packages/toolbars/breadcrumb/src/composable/useBreadcrumb.js b/packages/toolbars/breadcrumb/src/composable/useBreadcrumb.js
index 4d1c62e36..52c119d80 100644
--- a/packages/toolbars/breadcrumb/src/composable/useBreadcrumb.js
+++ b/packages/toolbars/breadcrumb/src/composable/useBreadcrumb.js
@@ -23,8 +23,8 @@ const setBreadcrumbPage = (value) => {
   sessionStorage.setItem('pageInfo', value)
 }
 
-const setBreadcrumbBlock = (value, histories = []) => {
-  breadcrumbData.value = [CONSTANTS.BLOCKTEXT, ...value, histories]
+const setBreadcrumbBlock = (value) => {
+  breadcrumbData.value = [CONSTANTS.BLOCKTEXT, ...value]
 }
 
 const getBreadcrumbData = () => breadcrumbData

From 36f9d55928894b69f0e7715c14d7d780d3057ff5 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Fri, 27 Dec 2024 05:45:43 -0800
Subject: [PATCH 2/4] fix: block schema change sync

---
 .../common/component/BlockDeployDialog.vue    | 14 +------
 packages/plugins/block/src/BlockSetting.vue   | 38 ++++++++-----------
 .../plugins/block/src/js/blockSetting.jsx     | 13 +++++--
 packages/toolbars/breadcrumb/src/Main.vue     | 24 ++----------
 4 files changed, 30 insertions(+), 59 deletions(-)

diff --git a/packages/common/component/BlockDeployDialog.vue b/packages/common/component/BlockDeployDialog.vue
index f69dae1aa..f304a59db 100644
--- a/packages/common/component/BlockDeployDialog.vue
+++ b/packages/common/component/BlockDeployDialog.vue
@@ -142,7 +142,7 @@ export default {
     }
 
     const getNextVersion = (block) => {
-      const backupList = block.backupList || []
+      const backupList = block.histories || []
 
       let latestVersion = '1.0.0'
       let latestTime = 0
@@ -201,16 +201,7 @@ export default {
         const originalObj = remote?.content || {}
         state.originalCode = JSON.stringify(originalObj, null, 2)
 
-        // const getSchema = useCanvas().getSchema
-        // 转为普通对象，和线上代码顺序保持一致
-        // const pageSchema = getSchema?.() || {}
-        // if (pageSchema.componentName === 'Block') {
-        //   state.code = JSON.stringify(pageSchema, null, 2)
-        // } else {
-        //   // 非区块编辑
-        // }
-
-        state.code = block?.content || {}
+        state.code = JSON.stringify(block?.content || {}, null, 2)
         state.compareVisible = true
       }
     }
@@ -234,7 +225,6 @@ export default {
       }
       try {
         const newSchema = JSON.parse(state.newCode)
-        // useCanvas().importSchema({ ...pageSchema, componentName: COMPONENT_NAME.Block })
         emit('changeSchema', { ...newSchema, componentName: COMPONENT_NAME.Block })
         close()
       } catch (err) {
diff --git a/packages/plugins/block/src/BlockSetting.vue b/packages/plugins/block/src/BlockSetting.vue
index 9cb2698d1..2b347c2ce 100644
--- a/packages/plugins/block/src/BlockSetting.vue
+++ b/packages/plugins/block/src/BlockSetting.vue
@@ -77,7 +77,7 @@
   </plugin-setting>
   <block-deploy-dialog
     v-model:visible="state.showDeployBlock"
-    :block="editBlock"
+    :block="publishBlock"
     @changeSchema="handleChangeSchema"
   ></block-deploy-dialog>
 </template>
@@ -85,7 +85,7 @@
 <script lang="jsx">
 import { reactive, ref, watch, watchEffect, computed } from 'vue'
 import { Button as TinyButton, Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
-import { useModal, getMergeMeta, useBlock, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { useModal, getMergeMeta, useBlock } from '@opentiny/tiny-engine-meta-register'
 import { BlockHistoryList, PluginSetting, CloseIcon, SvgButton, ButtonGroup } from '@opentiny/tiny-engine-common'
 import { previewBlock } from '@opentiny/tiny-engine-common/js/preview'
 import { LifeCycles } from '@opentiny/tiny-engine-common'
@@ -139,6 +139,16 @@ export default {
   setup() {
     const { confirm } = useModal()
     const editBlock = computed(getEditBlock)
+    const publishBlock = computed(() => {
+      const currentBlock = useBlock().getCurrentBlock()
+      const currentEditBlock = getEditBlock()
+
+      if (currentBlock?.id === currentEditBlock?.id) {
+        return currentBlock
+      }
+
+      return currentEditBlock
+    })
     const blockConfigForm = ref(null)
 
     const state = reactive({
@@ -154,24 +164,6 @@ export default {
       state.bindLifeCycles = getEditBlock()?.content?.lifeCycles || {}
     })
 
-    // 按时间最新提交的版本的修订版本号+1, 提示输入的下一个版本
-    // const nextVersion = computed(() => {
-    //   const backupList = state.backupList || []
-
-    //   let latestVersion = '1.0.0'
-    //   let latestTime = 0
-    //   backupList.forEach((v) => {
-    //     const vTime = new Date(v.created_at).getTime()
-
-    //     if (vTime > latestTime) {
-    //       latestTime = vTime
-    //       latestVersion = v.version
-    //     }
-    //   })
-    //   // version 符合X.Y.Z的字符结构
-    //   return latestVersion.replace(/\d+$/, (match) => Number(match) + 1)
-    // })
-
     watch(
       () => {
         const block = getEditBlock()
@@ -270,14 +262,13 @@ export default {
     const handleChangeSchema = (newSchema) => {
       // 如果是当前正在画布编辑的区块，需要重新 importSchema
       if (getEditBlock()?.id === useBlock().getCurrentBlock()?.id) {
-        useCanvas().importSchema(newSchema)
+        useBlock().initBlock({ ...useBlock().getCurrentBlock(), content: newSchema })
       }
     }
 
     return {
       state,
       isOpen,
-      // nextVersion,
       showDeployBlockDialog,
       closePanel,
       deleteBlock,
@@ -290,7 +281,8 @@ export default {
       onMouseLeave,
       handleClick,
       handleShowGuide,
-      handleChangeSchema
+      handleChangeSchema,
+      publishBlock
     }
   }
 }
diff --git a/packages/plugins/block/src/js/blockSetting.jsx b/packages/plugins/block/src/js/blockSetting.jsx
index 3a8d804f7..74fd891a2 100644
--- a/packages/plugins/block/src/js/blockSetting.jsx
+++ b/packages/plugins/block/src/js/blockSetting.jsx
@@ -419,10 +419,17 @@ export const refreshBlockData = async (block = {}) => {
       if (newBlock?.public_scope_tenants?.length) {
         newBlock.public_scope_tenants = newBlock.public_scope_tenants.map((e) => e.id)
       }
-      Object.assign(block, newBlock)
-      useLayout().layoutState.pageStatus = getCanvasStatus(newBlock?.occupier)
 
-      useHistory().addHistory(block.content)
+      // 与当前正在画布编辑态的区块相同，需要同步更新
+      if (useBlock().getCurrentBlock()?.id === block.id) {
+        useLayout().layoutState.pageStatus = getCanvasStatus(newBlock?.occupier)
+        useHistory().addHistory(block.content)
+        Object.assign(useBlock().getCurrentBlock(), newBlock)
+      }
+      // 与当前区块管理面板的区块相同，需要同步更新
+      if (getEditBlock()?.id === block.id) {
+        Object.assign(getEditBlock(), newBlock)
+      }
     }
   }
 }
diff --git a/packages/toolbars/breadcrumb/src/Main.vue b/packages/toolbars/breadcrumb/src/Main.vue
index 951627d3a..95366ca6e 100644
--- a/packages/toolbars/breadcrumb/src/Main.vue
+++ b/packages/toolbars/breadcrumb/src/Main.vue
@@ -36,7 +36,7 @@
 <script>
 import { reactive, computed } from 'vue'
 import { Breadcrumb, BreadcrumbItem, Button } from '@opentiny/vue'
-import { useBreadcrumb, useLayout, useBlock, useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { useBreadcrumb, useLayout, useBlock } from '@opentiny/tiny-engine-meta-register'
 import { ToolbarBase } from '@opentiny/tiny-engine-common'
 import { BlockDeployDialog } from '@opentiny/tiny-engine-common'
 
@@ -72,33 +72,15 @@ export default {
       state.showDeployBlock = true
     }
 
-    // const nextVersion = computed(() => {
-    //   const backupList = getBreadcrumbData().value[2] || []
-
-    //   let latestVersion = '1.0.0'
-    //   let latestTime = 0
-    //   backupList.forEach((v) => {
-    //     const vTime = new Date(v.created_at).getTime()
-
-    //     if (vTime > latestTime) {
-    //       latestTime = vTime
-    //       latestVersion = v.version
-    //     }
-    //   })
-
-    //   // version 符合X.Y.Z的字符结构
-    //   return latestVersion.replace(/\d+$/, (match) => Number(match) + 1)
-    // })
-
     const open = () => {
       if (!plugins) return
       plugins.render = breadcrumbData.value[0] === CONSTANTS.PAGETEXT ? PLUGINS_ID.PAGEID : PLUGINS_ID.BLOCKID
     }
 
-    const currentBlock = computed(useBlock().getCurrentBlock())
+    const currentBlock = computed(useBlock().getCurrentBlock)
 
     const handleChangeSchema = (newSchema) => {
-      useCanvas().importSchema(newSchema)
+      useBlock().initBlock({ ...useBlock().getCurrentBlock(), content: newSchema })
     }
 
     return {

From 17f2ec7190f89bf5139430f93a858f1fe728c3c5 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Fri, 27 Dec 2024 18:40:15 -0800
Subject: [PATCH 3/4] fix: del useless comment code

---
 packages/toolbars/breadcrumb/src/Main.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/toolbars/breadcrumb/src/Main.vue b/packages/toolbars/breadcrumb/src/Main.vue
index 95366ca6e..6b6ecf6bc 100644
--- a/packages/toolbars/breadcrumb/src/Main.vue
+++ b/packages/toolbars/breadcrumb/src/Main.vue
@@ -87,7 +87,6 @@ export default {
       breadcrumbData,
       publishBlock,
       state,
-      // nextVersion,
       CONSTANTS,
       open,
       currentBlock,

From 5c90c0ff7ff138f51a29d7eae80aa3e571f8c58f Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Fri, 27 Dec 2024 18:55:40 -0800
Subject: [PATCH 4/4] fix: hide publish block button when creating block

---
 packages/toolbars/breadcrumb/src/Main.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/toolbars/breadcrumb/src/Main.vue b/packages/toolbars/breadcrumb/src/Main.vue
index 6b6ecf6bc..90e8115e3 100644
--- a/packages/toolbars/breadcrumb/src/Main.vue
+++ b/packages/toolbars/breadcrumb/src/Main.vue
@@ -17,7 +17,7 @@
 
         <tiny-button
           class="publish"
-          v-if="breadcrumbData[0] === CONSTANTS.BLOCKTEXT"
+          v-if="breadcrumbData[0] === CONSTANTS.BLOCKTEXT && currentBlock?.id"
           @click="publishBlock()"
           type="primary"
           size="small"