fix(pagePlugin): clear some state when delte current page (#72)

* fix(pagePlugin): clear some state when delte current page

* fix(pagePlugin): del unnecessary optional chaining operator

* fix(chore): add code readablity

* fix(chore): optimize code by review comment

packages/controller/src/usePage.js

@@ -1,14 +1,14 @@
 /**
-* Copyright (c) 2023 - present TinyEngine Authors.
-* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 import { reactive } from 'vue'
 import { extend, isEqual } from '@opentiny/vue-renderless/common/object'
@@ -127,6 +127,9 @@ const resetPageData = () => {
 // 判断当前页面内容是否有修改
 const isChangePageData = () => !isEqual(pageSettingState.currentPageData, pageSettingState.currentPageDataCopy)
 
+const STATIC_PAGE_GROUP_ID = 0
+const COMMON_PAGE_GROUP_ID = 1
+
 export default () => {
   return {
     DEFAULT_PAGE,
@@ -137,6 +140,8 @@ export default () => {
     getPageContent,
     resetPageData,
     initCurrentPageData,
-    isChangePageData
+    isChangePageData,
+    STATIC_PAGE_GROUP_ID,
+    COMMON_PAGE_GROUP_ID
   }
 }

packages/plugins/page/src/PageGeneral.vue

@@ -92,7 +92,7 @@ export default {
     }
   },
   setup() {
-    const { pageSettingState, changeTreeData } = usePage()
+    const { pageSettingState, changeTreeData, STATIC_PAGE_GROUP_ID } = usePage()
     const ROOT_ID = pageSettingState.ROOT_ID
     const oldParentId = ref(pageSettingState.currentPageData.parentId)
 
@@ -182,7 +182,7 @@ export default {
     const treeFolderOp = computed(() => {
       const expandIcon = <SvgIcon name="text-page-folder-closed" class="folder-icon"></SvgIcon>
       const shrinkIcon = <SvgIcon name="text-page-folder" class="folder-icon"></SvgIcon>
-      const staticPages = pageSettingState.pages[0]?.data || []
+      const staticPages = pageSettingState.pages[STATIC_PAGE_GROUP_ID]?.data || []
       const data = [{ name: '无', id: ROOT_ID }, ...getFolders(JSON.parse(JSON.stringify(staticPages)))]
       const options = {
         data: data,

packages/plugins/page/src/PageHome.vue

@@ -27,7 +27,7 @@ export default {
     TinyCheckbox: Checkbox
   },
   setup() {
-    const { pageSettingState } = usePage()
+    const { pageSettingState, STATIC_PAGE_GROUP_ID } = usePage()
     const { handleRouteHomeUpdate } = http
     const { confirm } = useModal()
     const state = reactive({
@@ -41,8 +41,8 @@ export default {
     })
     const homePage = computed(() => {
       let home = '暂无主页'
-      if (pageSettingState.pages[0]) {
-        const data = pageSettingState.pages[0].data
+      if (pageSettingState.pages[STATIC_PAGE_GROUP_ID]) {
+        const data = pageSettingState.pages[STATIC_PAGE_GROUP_ID].data
         const homeData = data.filter((item) => item.isHome)
 
         if (homeData[0]) {

packages/plugins/page/src/PageSetting.vue

@@ -111,8 +111,15 @@ export default {
   setup(props, { emit }) {
     const { requestCreatePage, requestDeletePage } = http
     const { appInfoState } = useApp()
-    const { DEFAULT_PAGE, pageSettingState, changeTreeData, isCurrentDataSame, initCurrentPageData, isTemporaryPage } =
-      usePage()
+    const {
+      DEFAULT_PAGE,
+      pageSettingState,
+      changeTreeData,
+      isCurrentDataSame,
+      initCurrentPageData,
+      isTemporaryPage,
+      STATIC_PAGE_GROUP_ID
+    } = usePage()
     const { pageState, initData } = useCanvas()
     const { confirm } = useModal()
     const pageGeneralRef = ref(null)
@@ -288,6 +295,28 @@ export default {
       pageGeneralRef.value.validGeneralForm().then(createHistoryMessage)
     }
 
+    const collectAllPage = (staticPageList = []) => {
+      if (!Array.isArray(staticPageList)) {
+        return []
+      }
+
+      const pageList = []
+
+      staticPageList.forEach((pageItem) => {
+        if (pageItem?.isPage) {
+          pageList.push(pageItem)
+
+          return
+        }
+
+        if (!pageItem?.isPage && pageItem?.children?.length) {
+          pageList.push(...collectAllPage(pageItem.children))
+        }
+      })
+
+      return pageList
+    }
+
     const deletePage = () => {
       confirm({
         title: '提示',
@@ -297,12 +326,20 @@ export default {
           requestDeletePage(id)
             .then(() => {
               pageSettingState.updateTreeData().then((pages) => {
-                const pageInfo = pages?.[0]?.data?.[0] || {
-                  componentName: COMPONENT_NAME.Page
+                if (pageState?.currentPage?.id !== id) {
+                  return
                 }
-                if (pageState?.currentPage?.id === id) {
-                  emit('openNewPage', pageInfo)
+
+                const staticPageList = (pages || []).find(({ groupId }) => groupId === STATIC_PAGE_GROUP_ID)?.data || []
+                const pageList = collectAllPage(staticPageList)
+
+                const pageHome = pageList.find((page) => page.isHome)
+                const firstPage = pageList?.[0]
+                const defaultPage = {
+                  componentName: COMPONENT_NAME.Page
                 }
+
+                emit('openNewPage', pageHome || firstPage || defaultPage)
               })
 
               closePageSettingPanel()

packages/plugins/page/src/PageTree.vue

@@ -47,7 +47,7 @@ import { closePageSettingPanel } from './PageSetting.vue'
 import { closeFolderSettingPanel } from './PageFolderSetting.vue'
 import http from './http.js'
 
-const { ELEMENT_TAG, PAGE_STATUS } = constants
+const { ELEMENT_TAG, PAGE_STATUS, COMPONENT_NAME } = constants
 
 export default {
   components: {
@@ -67,31 +67,32 @@ export default {
     const { appInfoState } = useApp()
     const { confirm } = useModal()
     const { initData, pageState, isBlock, isSaved } = useCanvas()
-    const { pageSettingState, changeTreeData, isCurrentDataSame } = usePage()
+    const { pageSettingState, changeTreeData, isCurrentDataSame, STATIC_PAGE_GROUP_ID, COMMON_PAGE_GROUP_ID } =
+      usePage()
     const { fetchPageList, fetchPageDetail } = http
     const { setBreadcrumbPage } = useBreadcrumb()
     const pageTreeRefs = ref([])
     const ROOT_ID = pageSettingState.ROOT_ID
 
     const state = reactive({
       pageSearchValue: '',
-      collapseValue: [0, 1],
+      collapseValue: [STATIC_PAGE_GROUP_ID, COMMON_PAGE_GROUP_ID],
       currentNodeData: {}
     })
 
     const formatTreeData = (data, parentId, id) => {
-      const orginObj = { 0: { id: ROOT_ID, name: '站点根目录', children: [] } }
+      const originObj = { [ROOT_ID]: { id: ROOT_ID, name: '站点根目录', children: [] } }
       const treeArr = []
 
       data.forEach((item) => {
-        orginObj[item[id]] = item
+        originObj[item[id]] = item
         if (item.parentId === ROOT_ID) {
-          orginObj[ROOT_ID].children.push(item)
+          originObj[ROOT_ID].children.push(item)
         }
       })
 
       data.forEach((item) => {
-        let parentObj = orginObj[item[parentId]]
+        let parentObj = originObj[item[parentId]]
         if (parentObj && parentObj.id !== ROOT_ID) {
           parentObj.children = parentObj.children || []
           parentObj.children.push(item)
@@ -100,16 +101,16 @@ export default {
         }
       })
 
-      pageSettingState.treeDataMapping = orginObj
+      pageSettingState.treeDataMapping = originObj
 
       return pageSettingState.treeDataMapping
     }
 
     const refreshPageList = async (appId, data) => {
       const pagesData = data ? data : await fetchPageList(appId)
 
-      const firstGroupData = { groupName: '静态页面', groupId: 0, data: [] }
-      const secondGroupData = { groupName: '公共页面', groupId: 1, data: [] }
+      const firstGroupData = { groupName: '静态页面', groupId: STATIC_PAGE_GROUP_ID, data: [] }
+      const secondGroupData = { groupName: '公共页面', groupId: COMMON_PAGE_GROUP_ID, data: [] }
 
       pagesData.forEach((item) => {
         const node = item.meta
@@ -160,6 +161,18 @@ export default {
     }
 
     const getPageDetail = (pageId) => {
+      // pageId !== 0 防止 pageId 为 0 的时候判断不出来
+      if (pageId !== 0 && !pageId) {
+        updateUrlPageId('')
+        initData({ componentName: COMPONENT_NAME.Page }, {})
+        useLayout().layoutState.pageStatus = {
+          state: 'empty',
+          data: {}
+        }
+
+        return
+      }
+
       fetchPageDetail(pageId).then((data) => {
         updateUrlPageId(pageId)
         closePageSettingPanel()
@@ -174,9 +187,9 @@ export default {
       pageState.hoverVm = null
       state.currentNodeData = data
 
-      let pageName = 'untitle'
+      let pageName = ''
       if (data.isPage) {
-        pageName = data?.name || 'untitle'
+        pageName = data?.name || ''
       }
       setBreadcrumbPage([pageName])