fix: copy pop-up modal logic displays abnormally (#1365)

修复：点击复制页面，弹出"您即将复制的页面有更改未保存，是否确定跳过更改直接复制？"，但复制页面并没有更改未保存

packages/plugins/page/src/PageSetting.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script lang="jsx">
-import { reactive, ref, computed } from 'vue'
+import { reactive, ref, computed, onActivated, onDeactivated } from 'vue'
 import { Button, Collapse, CollapseItem, Input } from '@opentiny/vue'
 import { PluginSetting, ButtonGroup, SvgButton, LifeCycles } from '@opentiny/tiny-engine-common'
 import {
@@ -71,7 +71,8 @@ import {
   useNotify,
   getMergeRegistry,
   getMetaApi,
-  META_SERVICE
+  META_SERVICE,
+  useMessage
 } from '@opentiny/tiny-engine-meta-register'
 import { extend, isEqual } from '@opentiny/vue-renderless/common/object'
 import { constants } from '@opentiny/tiny-engine-utils'
@@ -133,7 +134,8 @@ export default {
       isCurrentDataSame,
       initCurrentPageData,
       isTemporaryPage,
-      STATIC_PAGE_GROUP_ID
+      STATIC_PAGE_GROUP_ID,
+      updatePageSettingAfterSave
     } = usePage()
     const { pageState, initData } = useCanvas()
     const { confirm } = useModal()
@@ -144,6 +146,28 @@ export default {
 
     const { PLUGIN_NAME, getPluginByLayout } = useLayout()
     const align = computed(() => getPluginByLayout(PLUGIN_NAME.AppManage))
+    const { subscribe, unsubscribe } = useMessage()
+
+    // 初始化订阅
+    let subscriber = null
+
+    // 组件激活时订阅
+    onActivated(() => {
+      subscriber = subscribe({
+        topic: 'page-saved',
+        callback: () => {
+          // 当收到页面保存事件时，更新页面设置状态
+          updatePageSettingAfterSave()
+        }
+      })
+    })
+
+    // 组件卸载或失活时取消订阅
+    onDeactivated(() => {
+      if (subscriber) {
+        unsubscribe(subscriber)
+      }
+    })
 
     const state = reactive({
       activeName: Object.values(PAGE_SETTING_SESSION),

packages/plugins/page/src/composable/usePage.ts

@@ -11,7 +11,7 @@
  */
 
 import { reactive, ref } from 'vue'
-import { extend, isEqual } from '@opentiny/vue-renderless/common/object'
+import { extend, isEqual as isValuesEqual } from '@opentiny/vue-renderless/common/object'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { getCanvasStatus } from '@opentiny/tiny-engine-common/js/canvas'
 import {
@@ -153,7 +153,40 @@ const getDefaultPage = () => {
   }
 }
 
+/**
+ * 更新配置页面数据
+ */
+const syncPageContent = () => {
+  const { getBaseInfo } = getMetaApi(META_SERVICE.GlobalService)
+
+  // 只有当前页面设置的ID与正在编辑的页面ID一致时才同步内容
+  // 避免将正在编辑的页面内容错误同步到其他打开的页面设置中
+  if (pageSettingState.currentPageData.id === Number.parseInt(getBaseInfo().pageId)) {
+    const pageContent = useCanvas().getPageSchema()
+
+    // 此处赋值是确保页面内容与当前画布保持同步。
+    // 当用户在画布中编辑页面内容时，这些变更存储在Canvas内部状态，
+    // 但pageSettingState中的currentPageData.page_content并不会自动更新。
+    // 不同步会导致：
+    // 1. 保存检测失效 - isCurrentDataSame()无法检测到真实变更
+    // 2. 未保存提示缺失 - 用户离开页面时不会收到未保存变更警告
+    pageSettingState.currentPageData.page_content = pageContent
+  }
+}
+
+/**
+ * 在页面保存后更新页面设置状态
+ * 当用户通过工具栏保存按钮保存页面时，需要调用此方法来同步currentPageDataCopy
+ * 以确保isCurrentDataSame()能够正确判断页面是否被修改
+ */
+const updatePageSettingAfterSave = () => {
+  syncPageContent()
+  pageSettingState.currentPageDataCopy = extend(true, {}, pageSettingState.currentPageData)
+}
+
 const isCurrentDataSame = () => {
+  syncPageContent()
+
   const data: Record<string, any> = pageSettingState.currentPageData || {}
   const dataCopy: Record<string, any> = pageSettingState.currentPageDataCopy || {}
   let isEqual = true
@@ -166,19 +199,21 @@ const isCurrentDataSame = () => {
       const obj = {
         inputs: dataCopy[item].inputs,
         outputs: dataCopy[item].outputs,
-        lifeCycles: dataCopy[item].lifeCycles
+        lifeCycles: dataCopy[item].lifeCycles,
+        children: dataCopy[item].children
       }
       const objCopy = {
         inputs: data[item].inputs,
         outputs: data[item].outputs,
-        lifeCycles: data[item].lifeCycles
+        lifeCycles: data[item].lifeCycles,
+        children: data[item].children
       }
 
       if (JSON.stringify(obj) !== JSON.stringify(objCopy)) {
         isEqual = false
       }
     } else {
-      if (dataCopy[item] !== data[item]) {
+      if (!isValuesEqual(dataCopy[item], data[item])) {
         isEqual = false
       }
     }
@@ -235,7 +270,7 @@ const resetPageData = () => {
 }
 
 // 判断当前页面内容是否有修改
-const isChangePageData = () => !isEqual(pageSettingState.currentPageData, pageSettingState.currentPageDataCopy)
+const isChangePageData = () => !isValuesEqual(pageSettingState.currentPageData, pageSettingState.currentPageDataCopy)
 
 const generateTree = (data: PageData[]) => {
   const { ROOT_ID } = pageSettingState
@@ -463,7 +498,10 @@ const switchPageWithConfirm = (pageId: string, clearPreview = false) => {
   })
 }
 
-const updatePageContent = (familyPages: { id: any; page_content: any }[], currentPage: { id: string; page_content?: any }) => {
+const updatePageContent = (
+  familyPages: { id: any; page_content: any }[],
+  currentPage: { id: string; page_content?: any }
+) => {
   const currentPageSchema = familyPages.find((item) => item.id === currentPage.id)
   // 替换为当前页面最新的 schema
   if (currentPageSchema) {
@@ -549,6 +587,7 @@ export default () => {
     switchPageWithConfirm,
     getFamily,
     getPageChildren,
+    updatePageSettingAfterSave,
     STATIC_PAGE_GROUP_ID,
     COMMON_PAGE_GROUP_ID
   }

packages/toolbars/save/src/js/index.ts

@@ -19,12 +19,15 @@ import {
   usePage,
   getOptions,
   getMetaApi,
-  META_APP
+  META_APP,
+  useMessage
 } from '@opentiny/tiny-engine-meta-register'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { handlePageUpdate } from '@opentiny/tiny-engine-common/js/http'
 import meta from '../../meta'
 
+const { publish } = useMessage()
+
 const { PAGE_STATUS, AUTO_SAVED } = constants
 const state = reactive({
   visible: false,
@@ -64,6 +67,9 @@ const savePage = async (pageSchema: any) => {
   }
   await handlePageUpdate(updateParams)
   isLoading.value = false
+
+  // 发布页面保存事件，通知其他组件进行相应处理
+  publish({ topic: 'page-saved' })
 }
 
 export const saveCommon = (value: string) => {