fix: blockPublishLogic (#973)

* fix: breadcrumb publish block cannot get correct version

* fix: block schema change sync

* fix: del useless comment code

* fix: hide publish block button when creating block

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,23 +141,43 @@ export default {
       }
     }
 
+    const getNextVersion = (block) => {
+      const backupList = block.histories || []
+
+      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)
       }
     )
 
     const setVisible = (visible) => emit('update:visible', visible)
 
     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,14 @@ 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 pageSchema = getSchema?.() || {}
-        if (pageSchema.componentName === 'Block') {
-          state.code = JSON.stringify(pageSchema, null, 2)
-        } else {
-          // 非区块编辑
-          state.code = state.originalCode
-        }
+        state.code = JSON.stringify(block?.content || {}, null, 2)
         state.compareVisible = true
       }
     }
@@ -207,8 +224,8 @@ export default {
         return
       }
       try {
-        const pageSchema = JSON.parse(state.newCode)
-        useCanvas().importSchema({ ...pageSchema, componentName: COMPONENT_NAME.Block })
+        const newSchema = JSON.parse(state.newCode)
+        emit('changeSchema', { ...newSchema, componentName: COMPONENT_NAME.Block })
         close()
       } catch (err) {
         useNotify({

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="publishBlock"
+    @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 } 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'
@@ -136,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({
@@ -151,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()
@@ -264,10 +259,16 @@ export default {
       setConfigItemVisible(false)
     }
 
+    const handleChangeSchema = (newSchema) => {
+      // 如果是当前正在画布编辑的区块，需要重新 importSchema
+      if (getEditBlock()?.id === useBlock().getCurrentBlock()?.id) {
+        useBlock().initBlock({ ...useBlock().getCurrentBlock(), content: newSchema })
+      }
+    }
+
     return {
       state,
       isOpen,
-      nextVersion,
       showDeployBlockDialog,
       closePanel,
       deleteBlock,
@@ -279,7 +280,9 @@ export default {
       globalConfig: getMergeMeta('engine.config'),
       onMouseLeave,
       handleClick,
-      handleShowGuide
+      handleShowGuide,
+      handleChangeSchema,
+      publishBlock
     }
   }
 }

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) {

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)
+      }
     }
   }
 }

packages/toolbars/breadcrumb/src/Main.vue

@@ -17,22 +17,26 @@
 
         <tiny-button
           class="publish"
-          v-if="breadcrumbData[0] === CONSTANTS.BLOCKTEXT"
+          v-if="breadcrumbData[0] === CONSTANTS.BLOCKTEXT && currentBlock?.id"
           @click="publishBlock()"
           type="primary"
           size="small"
           >发布区块
         </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>
 
 <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 } from '@opentiny/tiny-engine-meta-register'
 import { ToolbarBase } from '@opentiny/tiny-engine-common'
 import { BlockDeployDialog } from '@opentiny/tiny-engine-common'
 
@@ -68,36 +72,25 @@ 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 handleChangeSchema = (newSchema) => {
+      useBlock().initBlock({ ...useBlock().getCurrentBlock(), content: newSchema })
+    }
+
     return {
       breadcrumbData,
       publishBlock,
       state,
-      nextVersion,
       CONSTANTS,
-      open
+      open,
+      currentBlock,
+      handleChangeSchema
     }
   }
 }

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