From 213e7d80e87e7913afc87299961df772aae662c2 Mon Sep 17 00:00:00 2001
From: chilingling <26962197+chilingling@users.noreply.github.com>
Date: Wed, 8 Nov 2023 01:16:28 -0800
Subject: [PATCH] fix(toolbars): disable toolbar btn when page is empty (#70)

* fix(toolbars): disable toolbar btn when page is empty

* fix(toolbar): disable preview when page is empty
---
 packages/controller/src/useLayout.js        | 28 +++++++++++++--------
 packages/toolbars/generate-vue/src/Main.vue | 10 +++++++-
 packages/toolbars/preview/src/Main.vue      | 15 ++++++++---
 packages/toolbars/refresh/src/Main.vue      |  6 ++++-
 packages/toolbars/setting/src/Main.vue      | 19 +++++++++++---
 5 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/packages/controller/src/useLayout.js b/packages/controller/src/useLayout.js
index 9e3973ef4..368b77129 100644
--- a/packages/controller/src/useLayout.js
+++ b/packages/controller/src/useLayout.js
@@ -1,16 +1,19 @@
 /**
-* 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, nextTick } from 'vue'
+import { constants } from '@opentiny/tiny-engine-utils'
+
+const { PAGE_STATUS } = constants
 
 const PLUGIN_NAME = {
   Materials: 'Materials',
@@ -111,6 +114,8 @@ const getDimension = () => layoutState.dimension
 
 const getPluginState = () => layoutState.plugins
 
+const isEmptyPage = () => layoutState.pageStatus?.state === PAGE_STATUS.Empty
+
 export default () => {
   return {
     PLUGIN_NAME,
@@ -124,6 +129,7 @@ export default () => {
     registerPluginApi,
     getPluginApi,
     getPluginState,
-    pluginState
+    pluginState,
+    isEmptyPage
   }
 }
diff --git a/packages/toolbars/generate-vue/src/Main.vue b/packages/toolbars/generate-vue/src/Main.vue
index 2c1fc2bbf..8644d8568 100644
--- a/packages/toolbars/generate-vue/src/Main.vue
+++ b/packages/toolbars/generate-vue/src/Main.vue
@@ -23,7 +23,7 @@
 <script>
 import { reactive } from 'vue'
 import { Popover } from '@opentiny/vue'
-import { getGlobalConfig, useBlock, useCanvas, useNotify } from '@opentiny/tiny-engine-controller'
+import { getGlobalConfig, useBlock, useCanvas, useNotify, useLayout } from '@opentiny/tiny-engine-controller'
 import { fs } from '@opentiny/tiny-engine-utils'
 import { getSchema } from '@opentiny/tiny-engine-canvas'
 import { generateVuePage, generateVueBlock } from './generateCode'
@@ -115,6 +115,14 @@ export default {
     }
 
     const generate = async () => {
+      const { isEmptyPage } = useLayout()
+
+      if (isEmptyPage()) {
+        useNotify({ type: 'warning', message: '请先创建页面' })
+
+        return
+      }
+
       if (state.generating) {
         useNotify({ type: 'info', title: '代码生成中, 请稍后...' })
         return
diff --git a/packages/toolbars/preview/src/Main.vue b/packages/toolbars/preview/src/Main.vue
index 4ec96d7fa..8a8963fdb 100644
--- a/packages/toolbars/preview/src/Main.vue
+++ b/packages/toolbars/preview/src/Main.vue
@@ -17,14 +17,12 @@
 <script>
 import { Popover } from '@opentiny/vue'
 import { previewPage, previewBlock } from '@opentiny/tiny-engine-common/js/preview'
-import { getGlobalConfig, useBlock, useCanvas } from '@opentiny/tiny-engine-controller'
+import { getGlobalConfig, useBlock, useCanvas, useLayout, useNotify } from '@opentiny/tiny-engine-controller'
 import { getSchema } from '@opentiny/tiny-engine-canvas'
-import { PublicIcon } from '@opentiny/tiny-engine-common'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    PublicIcon
+    TinyPopover: Popover
   },
   props: {
     icon: {
@@ -37,6 +35,15 @@ export default {
     const { getCurrentBlock } = useBlock()
 
     const preview = () => {
+      if (useLayout().isEmptyPage()) {
+        useNotify({
+          type: 'warning',
+          message: '请先创建页面'
+        })
+
+        return
+      }
+
       const params = {
         framework: getGlobalConfig()?.dslMode,
         platform: getGlobalConfig()?.platformId,
diff --git a/packages/toolbars/refresh/src/Main.vue b/packages/toolbars/refresh/src/Main.vue
index e5406db6c..e2269ea09 100644
--- a/packages/toolbars/refresh/src/Main.vue
+++ b/packages/toolbars/refresh/src/Main.vue
@@ -32,7 +32,7 @@ export default {
   setup() {
     const { confirm } = useModal()
     const { isBlock, isSaved, pageState, initData } = useCanvas()
-    const { PLUGIN_NAME, activePlugin } = useLayout()
+    const { PLUGIN_NAME, activePlugin, isEmptyPage } = useLayout()
     const { getCurrentBlock, initBlock } = useBlock()
 
     const refreshResouce = () => {
@@ -52,6 +52,10 @@ export default {
     }
 
     const refreshPage = async () => {
+      if (isEmptyPage()) {
+        return
+      }
+
       const { currentPage } = pageState
       const api = await activePlugin(PLUGIN_NAME.AppManage, true)
       const page = await api.getPageById(currentPage.id)
diff --git a/packages/toolbars/setting/src/Main.vue b/packages/toolbars/setting/src/Main.vue
index edb36f5aa..a1905da01 100644
--- a/packages/toolbars/setting/src/Main.vue
+++ b/packages/toolbars/setting/src/Main.vue
@@ -18,7 +18,7 @@
 
 <script lang="jsx">
 import { Popover } from '@opentiny/vue'
-import { useCanvas, useLayout, useBlock, usePage, useModal } from '@opentiny/tiny-engine-controller'
+import { useCanvas, useLayout, useBlock, usePage, useModal, useNotify } from '@opentiny/tiny-engine-controller'
 import { constants } from '@opentiny/tiny-engine-utils'
 
 const { PAGE_STATUS } = constants
@@ -36,7 +36,7 @@ export default {
     const { pageState, isBlock } = useCanvas()
     const { getCurrentBlock } = useBlock()
     const { initCurrentPageData, isChangePageData } = usePage()
-    const { PLUGIN_NAME, activePlugin, layoutState } = useLayout()
+    const { PLUGIN_NAME, activePlugin, layoutState, isEmptyPage } = useLayout()
     const { confirm, message } = useModal()
 
     const openBlockSetting = () => {
@@ -79,7 +79,20 @@ export default {
       })
     }
 
-    const openSetting = () => (isBlock() ? openBlockSetting() : openPageSetting())
+    const openSetting = () => {
+      if (isEmptyPage()) {
+        useNotify({ type: 'warning', message: '请先创建页面' })
+
+        return
+      }
+
+      if (isBlock()) {
+        openBlockSetting()
+        return
+      }
+
+      openPageSetting()
+    }
 
     return {
       openSetting,