diff --git a/packages/controller/src/usePage.js b/packages/controller/src/usePage.js index 0832eaec4..8af5fc0e4 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 09924fef2..b01e1a5ef 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 b5203ece0..215e93abe 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 b3d10cbba..5f044908f 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) @@ -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() diff --git a/packages/plugins/page/src/PageTree.vue b/packages/plugins/page/src/PageTree.vue index a1a220e12..0ebad553a 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: { @@ -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,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])