fix:标题气泡样式更改

alibaba · Dec 24, 2024 · 120fc79 · 120fc79
1 parent 48397ba
commit 120fc79
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 4 deletions.
diff --git a/packages/x-flow/src/components/NodeContainer/TitleMenuTooltip.tsx b/packages/x-flow/src/components/NodeContainer/TitleMenuTooltip.tsx
@@ -0,0 +1,24 @@
+import React, { useMemo } from 'react';
+import createIconFont from '../../utils/createIconFont';
+
+const TitleMenuTooltip = ({ icon, title, description, iconFontUrl, iconSvg }: any) => {
+  const IconBox = useMemo(() => createIconFont(iconFontUrl), [iconFontUrl]);
+
+  return (
+    <div className='xflow-node-title-menu-tooltip'>
+      <div className='header-wrap'>
+      <div className='icon-box-max' style={{ background: icon?.bgColor || '#F79009', marginRight: '8px' }}>
+        {iconSvg ? iconSvg :<IconBox type={icon?.type} style={{ color: '#fff', fontSize: 13, ...icon?.style }} />}
+      </div>
+      <div className='title'>
+          {title}
+        </div>
+      </div>
+      <div className='description'>
+        {description}
+      </div>
+    </div>
+  )
+};
+
+export default TitleMenuTooltip;
diff --git a/packages/x-flow/src/components/NodeContainer/index.less b/packages/x-flow/src/components/NodeContainer/index.less
@@ -32,7 +32,40 @@
     justify-content: center;
   }
 
-  .node-widget{
+  .node-widget {
     width: 100%;
   }
 }
+
+.xflow-node-title-menu-tooltip {
+  width: 200px;
+
+  .header-wrap {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+
+  .title {
+    color: #101828;
+    display: inline-flex;
+  }
+
+  .description {
+    font-size: 12px;
+    font-weight: normal;
+    color: #101828;
+    margin-top: 3px;
+  }
+
+  .icon-box-max {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    min-height: 24px;
+    border-radius: 6px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
diff --git a/packages/x-flow/src/components/NodeContainer/index.tsx b/packages/x-flow/src/components/NodeContainer/index.tsx
@@ -2,8 +2,8 @@ import { Popover, Typography } from 'antd';
 import classNames from 'classnames';
 import React, { memo, useMemo } from 'react';
 import createIconFont from '../../utils/createIconFont';
-import { MenuTooltip } from '../NodesMenu';
 import './index.less';
+import TitleMenuTooltip from './TitleMenuTooltip';
 
 const { Text, Paragraph } = Typography;
 
@@ -21,7 +21,7 @@ export default memo((props: any) => {
     iconSvg,
     hideTitleTips,
   } = props;
-  const IconBox = useMemo(() => createIconFont(iconFontUrl), [iconFontUrl]);
+  const IconBox = useMemo(() => createIconFont(iconFontUrl), [iconFontUrl])
 
   return (
     <div
@@ -33,12 +33,14 @@ export default memo((props: any) => {
       <div className="node-title">
         {!hideTitleTips ? (
           <Popover
-            content={<MenuTooltip {...props} />}
+            overlayClassName="nodes-popover"
+            content={<TitleMenuTooltip {...props} />}
             placement="bottomLeft"
             trigger="hover"
             getPopupContainer={() =>
               document.getElementById('xflow-container') as HTMLElement
             }
+            overlayInnerStyle={{ padding: '12px 6px' }}
           >
             <span className="icon-box" style={{ background: icon?.bgColor }}>
               {iconSvg ? iconSvg : <IconBox {...icon} />}