From d1f0a3595003d01d2000f8ff58afa3430f14a579 Mon Sep 17 00:00:00 2001
From: chilingling <26962197+chilingling@users.noreply.github.com>
Date: Thu, 9 Nov 2023 01:01:37 -0800
Subject: [PATCH] fix(canvas): change canvas menu item hiding to disabed (#75)

---
 .../src/components/container/CanvasMenu.vue   | 21 ++++++++++++++-----
 packages/theme/dark/canvas.less               |  5 +++--
 packages/theme/dark/variable.less             |  9 --------
 packages/theme/light/canvas.less              |  5 +++--
 4 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/packages/canvas/src/components/container/CanvasMenu.vue b/packages/canvas/src/components/container/CanvasMenu.vue
index 42de135..c1f568d 100644
--- a/packages/canvas/src/components/container/CanvasMenu.vue
+++ b/packages/canvas/src/components/container/CanvasMenu.vue
@@ -14,7 +14,10 @@
         </div>
         <ul v-if="item.items && current === item" class="sub-menu menu-item">
           <template v-for="(subItem, subIndex) in item.items" :key="subIndex">
-            <li v-if="subItem?.check?.() !== false" @click.stop="doOperation(subItem)">
+            <li
+              :class="[{ 'menu-item-disabled': subItem.check && !subItem.check?.() }]"
+              @click.stop="doOperation(subItem)"
+            >
               {{ subItem.name }}
             </li>
           </template>
@@ -153,6 +156,10 @@ export default {
       boxVisibility.value = false
     }
     const doOperation = (item) => {
+      if (item.check && !item.check?.()) {
+        return
+      }
+
       if (item?.code) {
         operations[item.code](item)
         closeMenu()
@@ -196,13 +203,17 @@ export default {
       justify-content: space-between;
     }
     font-size: 12px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--ti-lowcode-canvas-menu-item-color);
     padding: 6px 15px;
-    &:hover {
-      color: var(--ti-lowcode-toolbar-icon-color);
-      background: var(--ti-lowcode-canvas-menu-hover-color);
+    &:not(.menu-item-disabled):hover {
+      background: var(--ti-lowcode-canvas-menu-item-hover-bg-color);
     }
     position: relative;
+
+    &.menu-item-disabled {
+      cursor: not-allowed;
+      color: var(--ti-lowcode-canvas-menu-item-disabled-color);
+    }
   }
   &.sub-menu {
     width: 100px;
diff --git a/packages/theme/dark/canvas.less b/packages/theme/dark/canvas.less
index a5dbc7e..d3f83fe 100644
--- a/packages/theme/dark/canvas.less
+++ b/packages/theme/dark/canvas.less
@@ -20,7 +20,8 @@
     --ti-lowcode-common-secondary-text-color
   ); // canvas 宽度拖动手柄 两条竖线颜色
   --ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-hover-bg); // canvas 右键菜单背景
-  --ti-lowcode-canvas-menu-color: #adb0b8; // 右键菜单文字颜色
-  --ti-lowcode-canvas-menu-hover-color: #5e5e5e;
+  --ti-lowcode-canvas-menu-item-color: #adb0b8; // 右键菜单文字颜色
+  --ti-lowcode-canvas-menu-item-hover-bg-color: #5e5e5e;
   --ti-lowcode-canvas-menu-border-color: var(--ti-lowcode-common-border-color-2);
+  --ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-base-text-color-3);
 }
diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less
index 564c8cd..eaa6505 100644
--- a/packages/theme/dark/variable.less
+++ b/packages/theme/dark/variable.less
@@ -113,18 +113,9 @@
   --ti-lowcode-page-tree-hover-color: var(--ti-lowcode-common-primary-text-color);
 
   // 画布 canvas
-  --ti-lowcode-canvas-footer-border-top-color: transparent; // canvas 底部面包屑 边框色
   --ti-lowcode-canvas-iframe-scrollbar-track-color: var(--ti-lowcode-canvas-wrap-bg); // iframe 内部滚动条 track 颜色
   // iframe 内部滚动条 滑块 颜色
   --ti-lowcode-canvas-iframe-scrollbar-thumb-color: var(--ti-lowcode-common-component-bg);
-  --ti-lowcode-canvas-tab-handle-bg: var(--ti-lowcode-common-component-bg); // canvas 宽度拖动手柄 背景色
-  --ti-lowcode-canvas-tab-handle-hover-bg: var(--ti-lowcode-common-primary-color); // canvas 宽度拖动手柄 hover 背景色
-  --ti-lowcode-canvas-tab-handle-color: var(
-    --ti-lowcode-common-secondary-text-color
-  ); // canvas 宽度拖动手柄 两条竖线颜色
-  --ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-hover-bg); // canvas 右键菜单背景
-  --ti-lowcode-canvas-menu-hover-color: #5e5e5e;
-  --ti-lowcode-canvas-menu-border-color: var(--ti-lowcode-common-border-color-2);
 
   // 数据源
   --ti-lowcode-datasource-list-color: var(--ti-lowcode-toolbar-more-hover-color);
diff --git a/packages/theme/light/canvas.less b/packages/theme/light/canvas.less
index cf0a5a8..35e3824 100644
--- a/packages/theme/light/canvas.less
+++ b/packages/theme/light/canvas.less
@@ -18,7 +18,8 @@
   --ti-lowcode-canvas-tab-handle-hover-bg: var(--ti-lowcode-common-primary-color); // canvas 宽度拖动手柄 hover 背景色
   --ti-lowcode-canvas-tab-handle-color: var(--ti-lowcode-common-text-color-2); // canvas 宽度拖动手柄 两条竖线颜色
   --ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-bg); // canvas 右键菜单背景
-  --ti-lowcode-canvas-menu-color: var(--ti-lowcode-base-gray-90); // 右键菜单文字颜色
-  --ti-lowcode-canvas-menu-hover-color: #f5f5f5;
+  --ti-lowcode-canvas-menu-item-color: var(--ti-lowcode-base-gray-90); // 右键菜单文字颜色
+  --ti-lowcode-canvas-menu-item-hover-bg-color: #f5f5f5;
   --ti-lowcode-canvas-menu-border-color: #ddd;
+  --ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-base-text-color-4);
 }