From 8b653fde558f0d189f388be2713e8c8a85618d02 Mon Sep 17 00:00:00 2001 From: chilingling Date: Tue, 7 Nov 2023 00:43:35 -0800 Subject: [PATCH 1/4] fix(pagePlugin): clear some state when delte current page --- packages/plugins/page/src/PageSetting.vue | 38 ++++++++++++++++++++--- packages/plugins/page/src/PageTree.vue | 17 ++++++++-- 2 files changed, 48 insertions(+), 7 deletions(-) diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue index b3d10cbbac..d5c68e5e3c 100644 --- a/packages/plugins/page/src/PageSetting.vue +++ b/packages/plugins/page/src/PageSetting.vue @@ -288,6 +288,28 @@ export default { pageGeneralRef.value.validGeneralForm().then(createHistoryMessage) } + const collectAllPage = (staticPageList = []) => { + const pageList = [] + + if (!Array.isArray(staticPageList)) { + return 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 +319,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 === 0)?.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() diff --git a/packages/plugins/page/src/PageTree.vue b/packages/plugins/page/src/PageTree.vue index a1a220e122..d503695e81 100644 --- a/packages/plugins/page/src/PageTree.vue +++ b/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: { @@ -160,6 +160,17 @@ export default { } const getPageDetail = (pageId) => { + if (!`${pageId ?? ''}`) { + updateUrlPageId('') + initData({ componentName: COMPONENT_NAME.Page }, {}) + useLayout().layoutState.pageStatus = { + state: 'empty', + data: {} + } + + return + } + fetchPageDetail(pageId).then((data) => { updateUrlPageId(pageId) closePageSettingPanel() @@ -174,9 +185,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]) From 3a7d4b8b16e11a85537f52abe976d7335b276fe7 Mon Sep 17 00:00:00 2001 From: chilingling Date: Wed, 8 Nov 2023 22:23:43 -0800 Subject: [PATCH 2/4] fix(pagePlugin): del unnecessary optional chaining operator --- packages/plugins/page/src/PageSetting.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue index d5c68e5e3c..6ba8d49b4c 100644 --- a/packages/plugins/page/src/PageSetting.vue +++ b/packages/plugins/page/src/PageSetting.vue @@ -326,7 +326,7 @@ export default { const staticPageList = (pages || []).find(({ groupId }) => groupId === 0)?.data || [] const pageList = collectAllPage(staticPageList) - const pageHome = pageList.find((page) => page?.isHome) + const pageHome = pageList.find((page) => page.isHome) const firstPage = pageList?.[0] const defaultPage = { componentName: COMPONENT_NAME.Page From 64a95e97abd38ced382267b6d882165177d50485 Mon Sep 17 00:00:00 2001 From: chilingling Date: Thu, 16 Nov 2023 03:37:53 -0800 Subject: [PATCH 3/4] fix(chore): add code readablity --- packages/plugins/page/src/PageTree.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugins/page/src/PageTree.vue b/packages/plugins/page/src/PageTree.vue index d503695e81..52056574c8 100644 --- a/packages/plugins/page/src/PageTree.vue +++ b/packages/plugins/page/src/PageTree.vue @@ -160,7 +160,7 @@ export default { } const getPageDetail = (pageId) => { - if (!`${pageId ?? ''}`) { + if (pageId !== 0 && !pageId) { updateUrlPageId('') initData({ componentName: COMPONENT_NAME.Page }, {}) useLayout().layoutState.pageStatus = { From 20b990150cc6ec80b6b30e12465f9da76b5d8ebb Mon Sep 17 00:00:00 2001 From: chilingling Date: Thu, 16 Nov 2023 23:21:46 -0800 Subject: [PATCH 4/4] fix(chore): optimize code by review comment --- packages/controller/src/usePage.js | 27 ++++++++++++++--------- packages/plugins/page/src/PageGeneral.vue | 4 ++-- packages/plugins/page/src/PageHome.vue | 6 ++--- packages/plugins/page/src/PageSetting.vue | 19 +++++++++++----- packages/plugins/page/src/PageTree.vue | 20 +++++++++-------- 5 files changed, 45 insertions(+), 31 deletions(-) diff --git a/packages/controller/src/usePage.js b/packages/controller/src/usePage.js index 0832eaec41..8af5fc0e40 100644 --- a/packages/controller/src/usePage.js +++ b/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 } } diff --git a/packages/plugins/page/src/PageGeneral.vue b/packages/plugins/page/src/PageGeneral.vue index 09924fef2f..b01e1a5efa 100644 --- a/packages/plugins/page/src/PageGeneral.vue +++ b/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 = const shrinkIcon = - 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, diff --git a/packages/plugins/page/src/PageHome.vue b/packages/plugins/page/src/PageHome.vue index b5203ece08..215e93abe4 100644 --- a/packages/plugins/page/src/PageHome.vue +++ b/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]) { diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue index 6ba8d49b4c..5f044908fb 100644 --- a/packages/plugins/page/src/PageSetting.vue +++ b/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) @@ -289,12 +296,12 @@ export default { } const collectAllPage = (staticPageList = []) => { - const pageList = [] - if (!Array.isArray(staticPageList)) { - return pageList + return [] } + const pageList = [] + staticPageList.forEach((pageItem) => { if (pageItem?.isPage) { pageList.push(pageItem) @@ -323,7 +330,7 @@ export default { return } - const staticPageList = (pages || []).find(({ groupId }) => groupId === 0)?.data || [] + const staticPageList = (pages || []).find(({ groupId }) => groupId === STATIC_PAGE_GROUP_ID)?.data || [] const pageList = collectAllPage(staticPageList) const pageHome = pageList.find((page) => page.isHome) diff --git a/packages/plugins/page/src/PageTree.vue b/packages/plugins/page/src/PageTree.vue index 52056574c8..0ebad553aa 100644 --- a/packages/plugins/page/src/PageTree.vue +++ b/packages/plugins/page/src/PageTree.vue @@ -67,7 +67,8 @@ 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([]) @@ -75,23 +76,23 @@ export default { 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,7 +101,7 @@ export default { } }) - pageSettingState.treeDataMapping = orginObj + pageSettingState.treeDataMapping = originObj return pageSettingState.treeDataMapping } @@ -108,8 +109,8 @@ export default { 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,7 @@ export default { } const getPageDetail = (pageId) => { + // pageId !== 0 防止 pageId 为 0 的时候判断不出来 if (pageId !== 0 && !pageId) { updateUrlPageId('') initData({ componentName: COMPONENT_NAME.Page }, {})