feat: add base updateParams function in global service

gene9831 · Feb 14, 2025 · 0d16d91 · 0d16d91
1 parent 14b9868
commit 0d16d91
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 27 deletions.
diff --git a/packages/canvas/container/src/components/CanvasMenu.vue b/packages/canvas/container/src/components/CanvasMenu.vue
@@ -228,7 +228,7 @@ export default {
       route() {
         // check中验证过了 targetPageId 是有效值
         const targetPageId = getCurrent().schema.props.to.name
-        usePage().switchPageWithConfirm(targetPageId)
+        usePage().switchPageWithConfirm(targetPageId, true)
       }
     }
 

diff --git a/packages/canvas/container/src/components/CanvasRouterJumper.vue b/packages/canvas/container/src/components/CanvasRouterJumper.vue
@@ -42,7 +42,7 @@ export default {
 
     const routerPageJump = () => {
       if (state.targetPageId) {
-        switchPage(state.targetPageId)
+        switchPage(state.targetPageId, true)
       }
     }
 

diff --git a/packages/common/composable/defaultGlobalService.js b/packages/common/composable/defaultGlobalService.js
@@ -61,38 +61,89 @@ const { subscribe, publish } = useMessage()
 
 const postLocationHistoryChanged = (data) => publish({ topic: 'locationHistoryChanged', data })
 
-const updatePageId = (pageId) => {
+/**
+ * 过滤掉没有变化的URL参数。pageId和blockId互斥，如果同时存在，会去掉blockId
+ * @param {Record<string, any>} params
+ * @returns
+ */
+const filterParams = (params) => {
+  const fieldsMap = ['pageId', 'blockId', 'previewId'].reduce((result, field) => {
+    result[field] = field.toLowerCase()
+    return result
+  }, {})
+
+  const paramFileds = Object.keys(params)
   const url = new URL(window.location.href)
-  url.searchParams.delete('blockid')
-  url.searchParams.set('pageid', pageId)
-  window.history.pushState({}, '', url)
-  postLocationHistoryChanged({ pageId })
-}
+  const changedParams = {}
 
-const updateBlockId = (blockId) => {
-  const url = new URL(window.location.href)
-  url.searchParams.delete('pageid')
-  url.searchParams.set('blockid', blockId)
-  window.history.pushState({}, '', url)
-  postLocationHistoryChanged({ blockId })
+  Object.entries(fieldsMap).forEach(([field, urlParamKey]) => {
+    if (paramFileds.includes(field) && params[field] !== url.searchParams.get(urlParamKey)) {
+      changedParams[field] = params[field]
+    }
+  })
+
+  const changedParamFields = Object.keys(changedParams)
+  // pageId和blockId互斥，如果同时存在，会去掉blockId
+  if (changedParamFields.includes('pageId') && changedParamFields.includes('blockId')) {
+    delete changedParams.blockId
+  }
+
+  return changedParams
 }
 
-const updatePreviewId = (previewId, replace = false) => {
+/**
+ * 支持pageId, blockId, previewId 批量更新，pageId和blockId互斥，如果同时存在，会去掉blockId
+ * @param {*} params
+ * @param {*} replace
+ * @returns
+ */
+const updateParams = (params, replace = false) => {
+  const changedParams = filterParams(params)
   const url = new URL(window.location.href)
-  if (previewId) {
-    if (previewId === url.searchParams.get('previewid')) {
-      return
+
+  const { pageId, blockId, previewId } = changedParams
+  const changedParamFields = Object.keys(changedParams)
+
+  if (changedParamFields.length === 0) {
+    return
+  }
+
+  // pageId 与 blockId 互斥
+  if (changedParamFields.includes('pageId')) {
+    url.searchParams.delete('blockid')
+    url.searchParams.set('pageid', pageId)
+  } else if (changedParamFields.includes('blockId')) {
+    url.searchParams.delete('pageid')
+    url.searchParams.set('blockid', blockId)
+  }
+
+  if (changedParamFields.includes('previewId')) {
+    if (previewId) {
+      url.searchParams.set('previewid', previewId)
+    } else {
+      url.searchParams.delete('previewid')
     }
-    url.searchParams.set('previewid', previewId)
-  } else {
-    url.searchParams.delete('previewid')
   }
+
   if (replace) {
     window.history.replaceState({}, '', url)
   } else {
     window.history.pushState({}, '', url)
   }
-  postLocationHistoryChanged({ previewId })
+
+  postLocationHistoryChanged(changedParams)
+}
+
+const updatePageId = (pageId) => {
+  updateParams({ pageId })
+}
+
+const updateBlockId = (blockId) => {
+  updateParams({ blockId })
+}
+
+const updatePreviewId = (previewId, replace = false) => {
+  updateParams({ previewId }, replace)
 }
 
 export default defineService({
@@ -159,6 +210,7 @@ export default defineService({
     getBaseInfo,
     isAdmin: () => state.userInfo.resetPasswordToken === 'p_webcenter',
     postLocationHistoryChanged,
+    updateParams,
     updatePageId,
     updateBlockId,
     updatePreviewId

diff --git a/packages/plugins/page/src/composable/usePage.js b/packages/plugins/page/src/composable/usePage.js
@@ -362,13 +362,17 @@ const clearCurrentState = () => {
   pageState.pageSchema = null
 }
 
-const switchPage = (pageId) => {
+const switchPage = (pageId, clearPreview = false) => {
   // 切换页面时清空 选中节点信息状态
   clearCurrentState()
 
   // pageId !== 0 防止 pageId 为 0 的时候判断不出来
   if (pageId !== 0 && !pageId) {
-    getMetaApi(META_SERVICE.GlobalService).updatePageId('')
+    if (clearPreview) {
+      getMetaApi(META_SERVICE.GlobalService).updateParams({ pageId: '', previewId: '' })
+    } else {
+      getMetaApi(META_SERVICE.GlobalService).updatePageId('')
+    }
     useCanvas().initData({ componentName: COMPONENT_NAME.Page }, {})
     useLayout().layoutState.pageStatus = {
       state: 'empty',
@@ -386,7 +390,11 @@ const switchPage = (pageId) => {
         useBreadcrumb().setBreadcrumbPage([data.name])
       }
 
-      getMetaApi(META_SERVICE.GlobalService).updatePageId(pageId)
+      if (clearPreview) {
+        getMetaApi(META_SERVICE.GlobalService).updateParams({ pageId, previewId: '' })
+      } else {
+        getMetaApi(META_SERVICE.GlobalService).updatePageId(pageId)
+      }
       useLayout().closePlugin()
       useLayout().layoutState.pageStatus = getCanvasStatus(data.occupier)
       useCanvas().initData(data['page_content'], data)
@@ -399,7 +407,7 @@ const switchPage = (pageId) => {
     })
 }
 
-const switchPageWithConfirm = (pageId) => {
+const switchPageWithConfirm = (pageId, clearPreview = false) => {
   const checkPageSaved = () => {
     const { isSaved, isBlock } = useCanvas()
 
@@ -424,7 +432,7 @@ const switchPageWithConfirm = (pageId) => {
 
   checkPageSaved().then((proceed) => {
     if (proceed) {
-      switchPage(pageId)
+      switchPage(pageId, clearPreview)
     }
   })
 }