初始化3.0.0版本

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

@@ -0,0 +1,41 @@
+#react-joyride-portal {
+  .react-joyride__overlay {
+    min-width: 1440px;
+  }
+}
+.joyride-tooltip {
+  min-width: 284px;
+  max-width: 384px;
+  padding: 16px 24px;
+  border-radius: 12px;
+  background: #fff;
+  &-header {
+    margin-bottom: 8px;
+    font-family: @font-family-bold;
+    font-size: 16px;
+    color: #212529;
+    letter-spacing: 0;
+    line-height: 22px;
+  }
+  &-body {
+    font-size: 14px;
+    color: #74788d;
+    letter-spacing: 0;
+    line-height: 22px;
+    font-weight: 400;
+  }
+  &-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 28px;
+    &-left {
+      color: #74788d;
+    }
+    &-right {
+      .dcloud-btn {
+        margin-left: 4px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,97 @@
+import { Button, Space } from 'knowdesign';
+import React, { useLayoutEffect, useState } from 'react';
+import Joyride, { Step, TooltipRenderProps } from 'react-joyride';
+import './index.less';
+
+interface TourGuideProps {
+  run: boolean;
+  guide: {
+    key: string;
+    steps: Step[];
+  };
+}
+
+// 全部配置项参考: https://github.com/gilbarbara/react-joyride/blob/3e08384415a831b20ce21c8423b6c271ad419fbf/src/styles.js
+const joyrideCommonStyle = {
+  options: {
+    zIndex: 2000,
+  },
+  spotlight: {
+    borderRadius: 12,
+  },
+};
+
+const JoyrideTooltip = (props: TooltipRenderProps) => {
+  const { continuous, index, size, step, isLastStep, backProps, skipProps, primaryProps, tooltipProps } = props;
+
+  return (
+    <div className="joyride-tooltip" {...tooltipProps}>
+      {step.title && <div className="joyride-tooltip-header">{step.title}</div>}
+      <div className="joyride-tooltip-body">{step.content}</div>
+      <div className="joyride-tooltip-footer">
+        <div className="joyride-tooltip-footer-left">
+          {index + 1} / {size}
+        </div>
+        <div className="joyride-tooltip-footer-right">
+          {/* {index > 0 && (
+            <Button {...backProps} size="small">
+              上一个
+            </Button>
+          )} */}
+          <Space>
+            <Button {...skipProps} size="small" type="text">
+              跳过
+            </Button>
+            {continuous && (
+              <Button {...primaryProps} size="small" type="primary">
+                {isLastStep ? '我知道了' : '下一个'}
+              </Button>
+            )}
+          </Space>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const TourGuide = ({ guide, run: ready }: TourGuideProps) => {
+  const [run, setRun] = useState<boolean>(false);
+
+  useLayoutEffect(() => {
+    if (ready) {
+      const curGuideKey = guide.key;
+      const guidedStorage = localStorage.getItem('guided');
+      let guidedInfo: string[];
+
+      try {
+        guidedInfo = JSON.parse(guidedStorage) || [];
+        if (!guidedInfo.includes(curGuideKey)) {
+          guidedInfo.push(curGuideKey);
+          localStorage.setItem('guided', JSON.stringify(guidedInfo));
+          setRun(true);
+        }
+      } catch (err) {
+        err;
+      }
+    }
+  }, [ready]);
+
+  return (
+    <Joyride
+      steps={guide.steps}
+      run={run}
+      continuous
+      hideCloseButton
+      showProgress
+      disableCloseOnEsc
+      disableOverlayClose
+      disableScrolling
+      disableScrollParentFix
+      tooltipComponent={JoyrideTooltip}
+      styles={joyrideCommonStyle}
+    />
+  );
+};
+
+export * from './steps';
+export default TourGuide;

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

@@ -0,0 +1,84 @@
+const MultiPageSteps = {
+  key: 'MultiPage',
+  steps: [
+    {
+      target: '.cluster-header-card',
+      title: 'Cluster 总数',
+      content: '这里展示了集群的数量和运行状态',
+      disableBeacon: true,
+      placement: 'bottom-start' as const,
+    },
+    {
+      target: '.header-filter-bottom',
+      title: '版本选择、健康分',
+      content: '这里展示了版本、健康分的统计信息，并可以进行筛选',
+      placement: 'bottom-start' as const,
+    },
+    {
+      target: '.multi-cluster-list-item:first-child',
+      title: '集群卡片',
+      content: '这里展示了每个集群状态、指标等综合信息，点击可以 进入单集群管理页面',
+      placement: 'bottom-start' as const,
+    },
+  ],
+};
+
+const ClusterDetailSteps = {
+  key: 'ClusterDetail',
+  steps: [
+    {
+      target: '.single-cluster-detail .left-sider',
+      title: '集群概览',
+      content: '这里展示了集群的整体健康状态和统计信息',
+      disableBeacon: true,
+      placement: 'right-start' as const,
+    },
+    {
+      target: '.single-cluster-detail .cluster-detail .left-sider .healthy-state-status .icon',
+      title: '设置健康度',
+      content: '点击这里可以设置集群的健康检查项、权重及规则',
+      placement: 'right-start' as const,
+      styles: {
+        spotlight: {
+          borderRadius: 6,
+        },
+      },
+    },
+    {
+      target: '.single-cluster-detail .cluster-detail .left-sider .healthy-state-btn',
+      title: '查看健康状态详情',
+      content: '点击这里可以查看集群的健康状态的检查结果',
+      placement: 'right-start' as const,
+      styles: {
+        spotlight: {
+          borderRadius: 6,
+        },
+      },
+    },
+    {
+      target: '.single-cluster-detail .cluster-detail .left-sider .title .edit-icon-box',
+      title: '编辑集群信息',
+      content: '点击这里可以查看集群配置信息，并且可以对信息进行编辑',
+      placement: 'right-start' as const,
+      styles: {
+        spotlight: {
+          borderRadius: 6,
+        },
+      },
+    },
+    {
+      target: '.single-cluster-detail .ks-chart-container-header .header-right .icon-box',
+      title: '指标筛选',
+      content: '点击这里可以对展示的图表进行筛选',
+      placement: 'left-start' as const,
+    },
+    {
+      target: '.single-cluster-detail .cluster-detail .change-log-panel',
+      title: '历史变更记录',
+      content: '这里展示了配置变更的历史记录',
+      placement: 'left-start' as const,
+    },
+  ],
+};
+
+export { MultiPageSteps, ClusterDetailSteps };