fix: 修复空页面执行右键删除和右键复制时控制台报错的问题 (#103)

* fix: 修复空页面执行右键删除和右键复制时控制台报错的问题 * fix: 修复空页面执行右建操作时控制台报错的问题 * refactor: 简化operations空判断代码 * fix: verify operations copy id * fix: verify operations copy id * fix: verify operations copy id * fix: copyNode function verify params * fix: 不可操作的菜单项disabled * fix: 点击disabled菜单项不关闭菜单
opentiny · Nov 30, 2023 · 1e72976 · 1e72976
1 parent a6232e5
commit 1e72976
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 18 deletions.
diff --git a/packages/canvas/src/components/container/CanvasMenu.vue b/packages/canvas/src/components/container/CanvasMenu.vue
@@ -4,9 +4,12 @@
       <li
         v-for="(item, index) in menus"
         :key="index"
-        :class="item.items ? 'li-item' : ''"
+        :class="{
+          'li-item': item.items,
+          'li-item-disabled': actionDisabled(item)
+        }"
         @click="doOperation(item)"
-        @mouseover="current = item"
+        @mouseover="onShowChildrenMenu(item)"
       >
         <div>
           <span>{{ item.name }}</span>
@@ -98,7 +101,8 @@ export default {
         items: [
           { name: '文字提示', code: 'wrap', value: 'TinyTooltip' },
           { name: '弹出框', code: 'wrap', value: 'TinyPopover' }
-        ]
+        ],
+        code: 'addParent'
       },
       { name: '删除', code: 'del' },
       { name: '复制', code: 'copy' },
@@ -111,10 +115,10 @@ export default {
 
     const operations = {
       del() {
-        removeNodeById(getCurrent().schema.id)
+        removeNodeById(getCurrent().schema?.id)
       },
       copy() {
-        copyNode(getCurrent().schema.id)
+        copyNode(getCurrent().schema?.id)
       },
       config() {
         useLayout().activeSetting('props')
@@ -128,17 +132,19 @@ export default {
       wrap({ value, name }) {
         const componentName = value || name
         const { schema, parent } = getCurrent()
-        const index = parent.children.indexOf(schema)
-        const wrapSchema = {
-          componentName,
-          id: null,
-          props: {},
-          children: [schema]
+        if (schema && parent) {
+          const index = parent.children.indexOf(schema)
+          const wrapSchema = {
+            componentName,
+            id: null,
+            props: {},
+            children: [schema]
+          }
+
+          parent.children.splice(index, 1, wrapSchema)
+
+          getController().addHistory()
         }
-
-        parent.children.splice(index, 1, wrapSchema)
-
-        getController().addHistory()
       },
       createBlock() {
         if (useCanvas().isSaved()) {
@@ -152,16 +158,25 @@ export default {
       }
     }
 
+    const actionDisabled = (actionItem) => {
+      const actions = ['del', 'copy', 'addParent']
+      return actions.includes(actionItem.code) && !getCurrent().schema?.id
+    }
+
+    const onShowChildrenMenu = (menuItem) => {
+      current.value = !actionDisabled(menuItem) ? menuItem : null
+    }
+
     const close = () => {
       boxVisibility.value = false
     }
     const doOperation = (item) => {
-      if (item.check && !item.check?.()) {
+      if ((item.check && !item.check?.()) || actionDisabled(item)) {
         return
       }
 
       if (item?.code) {
-        operations[item.code](item)
+        operations[item.code]?.(item)
         closeMenu()
       }
     }
@@ -173,7 +188,9 @@ export default {
       boxVisibility,
       close,
       current,
-      menuDom
+      menuDom,
+      actionDisabled,
+      onShowChildrenMenu
     }
   }
 }
@@ -196,6 +213,10 @@ export default {
   .li-item {
     border-bottom: 1px solid var(--ti-lowcode-canvas-menu-border-color);
   }
+  .li-item-disabled {
+    cursor: not-allowed;
+    color: var(--ti-lowcode-canvas-menu-item-disabled-color);
+  }
   li {
     & > div {
       display: flex;

diff --git a/packages/canvas/src/components/container/container.js b/packages/canvas/src/components/container/container.js
@@ -249,6 +249,9 @@ export const addComponent = (data, position) => {
 }
 
 export const copyNode = (id) => {
+  if (!id) {
+    return
+  }
   const { node, parent } = getNode(id, true)
 
   inserAfter({ parent, node, data: copyObject(node) })