同步代码

km-console/packages/layout-clusters-fe/src/components/TourGuide/index.less

@@ -4,6 +4,7 @@
   }
 }
 .joyride-tooltip {
+  position: relative;
   min-width: 284px;
   max-width: 384px;
   padding: 16px 24px;
@@ -38,4 +39,20 @@
       }
     }
   }
+  &-arrow {
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background-color: #fff;
+    transform-origin: 4px;
+    &-line {
+      position: absolute;
+      top: 3px;
+      left: 7px;
+      width: 17px;
+      height: 1px;
+      background-color: #fff;
+    }
+  }
 }

km-console/packages/layout-clusters-fe/src/components/TourGuide/index.tsx

@@ -22,10 +22,23 @@ const joyrideCommonStyle = {
 };
 
 const JoyrideTooltip = (props: TooltipRenderProps) => {
-  const { continuous, index, size, step, isLastStep, backProps, skipProps, primaryProps, tooltipProps } = props;
+  const { continuous, index, size, step, isLastStep, skipProps, primaryProps, tooltipProps } = props;
+
+  const isTop = step.placement.startsWith('top');
+  const isRight = step.placement.startsWith('right');
+  const isBottom = step.placement.startsWith('bottom');
+  const tooltipStyle = {
+    [`margin-${isTop ? 'bottom' : isRight ? 'left' : isBottom ? 'top' : 'right'}`]: 20,
+    [`margin-${isTop || isBottom ? 'left' : 'top'}`]: -10,
+  };
+  const arrowStyle = {
+    [isTop || isBottom ? 'left' : 'top']: 24,
+    [isTop ? 'bottom' : isRight ? 'left' : isBottom ? 'top' : 'right']: -24,
+    transform: `rotate(${isTop ? -90 : isRight ? 0 : isBottom ? 90 : 180}deg)`,
+  };
 
   return (
-    <div className="joyride-tooltip" {...tooltipProps}>
+    <div className="joyride-tooltip" {...tooltipProps} style={tooltipStyle}>
       {step.title && <div className="joyride-tooltip-header">{step.title}</div>}
       <div className="joyride-tooltip-body">{step.content}</div>
       <div className="joyride-tooltip-footer">
@@ -50,6 +63,9 @@ const JoyrideTooltip = (props: TooltipRenderProps) => {
           </Space>
         </div>
       </div>
+      <div className="joyride-tooltip-arrow" style={arrowStyle}>
+        <div className="joyride-tooltip-arrow-line"></div>
+      </div>
     </div>
   );
 };
@@ -89,6 +105,10 @@ const TourGuide = ({ guide, run: ready }: TourGuideProps) => {
       disableScrollParentFix
       tooltipComponent={JoyrideTooltip}
       styles={joyrideCommonStyle}
+      floaterProps={{
+        hideArrow: true,
+        offset: 60,
+      }}
     />
   );
 };

km-console/packages/layout-clusters-fe/src/components/TourGuide/steps.ts

@@ -38,6 +38,7 @@ const ClusterDetailSteps = {
       title: '设置健康度',
       content: '点击这里可以设置集群的健康检查项、权重及规则',
       placement: 'right-start' as const,
+      spotlightPadding: 5,
       styles: {
         spotlight: {
           borderRadius: 6,
@@ -49,6 +50,7 @@ const ClusterDetailSteps = {
       title: '查看健康状态详情',
       content: '点击这里可以查看集群的健康状态的检查结果',
       placement: 'right-start' as const,
+      spotlightPadding: 6,
       styles: {
         spotlight: {
           borderRadius: 6,
@@ -60,6 +62,7 @@ const ClusterDetailSteps = {
       title: '编辑集群信息',
       content: '点击这里可以查看集群配置信息，并且可以对信息进行编辑',
       placement: 'right-start' as const,
+      spotlightPadding: 1,
       styles: {
         spotlight: {
           borderRadius: 6,