feat(plugin-view-manager-pane): add disabled、tips configs

liujuping · JackLian · commit 9075f9f428b3 · 2024-01-09T09:07:40.000+08:00
diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss b/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss
@@ -72,12 +72,6 @@
     font-size: 12px;
     color: var(--color-title, #5f697a);
 
-
-    &.resource-tree-group-item-pro-code {
-      color: var(--color-text-disabled, #bcc5d1);
-      pointer-events: none;
-    }
-
     &.active .resource-tree-title {
       background-color: var(--color-block-background-light, #f7f8fa);
     }
@@ -144,6 +138,13 @@
     }
   }
 
+  &-group-disabled {
+    .resource-tree-title {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+
   &-title {
     height: 24px;
     display: flex;
diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx
@@ -263,13 +263,17 @@ function ResourceItem(props: {
   }
 
   const children = props.children?.filter(d => d.config?.display !== false);
+  const {
+    disabled,
+    tips,
+  } = props.resource?.config || {};
 
-  return (
+  const context = (
     <div
       ref={ref}
       className={`resource-tree-group-node ${
-        props.resource?.options.isProCodePage
-          ? 'resource-tree-group-item-pro-code'
+        disabled
+          ? 'resource-tree-group-disabled'
           : ''
       } ${props.activeId === props.resource?.options.id || props.activeId === props.resource?.id ? 'active' : ''}`}
       onContextMenu={(e) => {
@@ -281,6 +285,9 @@ function ResourceItem(props: {
     >
       <div
         onClick={() => {
+          if (disabled) {
+            return;
+          }
           props.resource && props.pluginContext?.workspace.openEditorWindow(props.resource);
         }}
         className="resource-tree-title"
@@ -316,9 +323,6 @@ function ResourceItem(props: {
         </div>
         <div className="resource-tree-group-title-label">
           {props.resource?.options?.label || props.resource?.title}
-          {props.resource?.options.isProCodePage
-            ? intl('view_manager.components.resourceTree.SourceCode')
-            : ''}
 
           {
             props.resource?.options?.slug ||
@@ -369,6 +373,22 @@ function ResourceItem(props: {
       }
     </div>
   );
+
+  if (tips) {
+    return (
+      <Balloon
+        v2
+        trigger={context}
+        triggerType="hover"
+        align='r'
+        title=""
+      >
+        {tips}
+      </Balloon>
+    );
+  }
+
+  return context;
 }
 
 interface IPluginOptions {
