chore: opts guidance ui (#31)

Co-authored-by: 逍为 <[email protected]>

Author: hustcc

client/packages/plugins/graph-analysis/src/client/components/guidance/assets/index.ts

@@ -9,11 +9,11 @@ export const Assets = {
   download: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*QjWNRZ-LQ2kAAAAAAAAAAAAADgOBAQ/original',
   end: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*-a6uRYo-9qEAAAAAAAAAAAAADgOBAQ/fmt.webp',
   close: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*1qMxQ4fS3e0AAAAAAAAAAAAADgOBAQ/original',
-  btnWelcome: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*T7bRTrLqVcUAAAAAAAAAAAAADgOBAQ/original',
+  btnWelcome: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*-0IkQ4wm8TEAAAAAAAAAAAAADgOBAQ/original',
   btnNext: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*T7bRTrLqVcUAAAAAAAAAAAAADgOBAQ/original',
   btnEnd: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*8lvqQr_me34AAAAAAAAAAAAADgOBAQ/original',
-  afterStyle: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*HGX-S4sElRQAAAAAAAAAAAAADgOBAQ/original',
-  afterFilter: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*49UiTaFF8E4AAAAAAAAAAAAADgOBAQ/original',
+  afterStyle: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*x3QnTr_EA2oAAAAAAAAAAAAADgOBAQ/original',
+  afterFilter: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*iWG-S7i0c6EAAAAAAAAAAAAADgOBAQ/original',
   afterSpread: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*2XqOQ4y9pjsAAAAAAAAAAAAADgOBAQ/original',
   styleGif: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*v8SsRJ0mkFAAAAAAAAAAAAAADgOBAQ/original',
   spreadGif: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*P2nrTLAjhCkAAAAAAAAAAAAADgOBAQ/original',

client/packages/plugins/graph-analysis/src/client/components/guidance/index.tsx

@@ -8,7 +8,6 @@ import { FilterBtn, FilterPanel } from './filter';
 import { Download } from './download';
 import { End } from './end';
 
-// @ts-ignore
 import styles from './index.module.less';
 
 const LocalStorageKey = '__guidance_key__';
@@ -70,10 +69,11 @@ export const Guidance: React.FC = () => {
     if (step === 1) {
       // 查询
       getElement(SelectorQuery).click();
+    } else if (step === 2) {
+      getElement(SelectorPlaceholder).style.display = 'none';
     } else if (step === 3) {
       // 样式
       getElement(SelectorStyle).click();
-      getElement(SelectorPlaceholder).style.display = 'none';
     } else if (step === 5) {
       // 筛选
       getElement(SelectorFilter).click();
@@ -138,7 +138,8 @@ export const Guidance: React.FC = () => {
     const fullscreen = document.body.getBoundingClientRect();
     if (step === 1 || step === 4 || step === 6) {
       const rect = getBoundings(SelectorSidebar);
-      return getClipPathByTwoRect(rect, fullscreen);
+      const newRect = new DOMRect(rect.x, rect.y, rect.width, rect.height - 64);
+      return getClipPathByTwoRect(newRect, fullscreen);
     }
     if (step === 3) {
       const rect = getBoundings(SelectorStyle);

client/packages/plugins/graph-analysis/src/client/components/guidance/spread.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { StepUIProps } from './types';
 import { Assets } from './assets';
-// @ts-ignore
 import styles from './index.module.less';
 
 /**
@@ -13,7 +12,7 @@ export const Spread: React.FC<StepUIProps> = ({ prev, next, end, x = 0, y = 0 })
     <div className={styles.spread} style={{ top: y, left: x }}>
       <div className={styles.container}>
         <img className={styles.background} style={{ width: 430 }} src={Assets.spread} />
-        <img className={styles.gif} src={Assets.spreadGif} style={{ top: 78, left: 76, maxWidth: 256 }} />
+        <img className={styles.gif} src={Assets.spreadGif} style={{ top: 82, left: 77, maxWidth: 246 }} />
         <div className={styles.btnContainer} style={{ top: 356, left: 245 }}>
           <div className={styles.nextBtn}>
             <img className={styles.btnBackground} src={Assets.btnNext} />
@@ -27,4 +26,3 @@ export const Spread: React.FC<StepUIProps> = ({ prev, next, end, x = 0, y = 0 })
     </div>
   );
 };
-

client/packages/plugins/graph-analysis/src/client/components/guidance/style.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { StepUIProps } from './types';
 import { Assets } from './assets';
-// @ts-ignore
 import styles from './index.module.less';
 
 /**
@@ -39,7 +38,7 @@ export const StylePanel: React.FC<StepUIProps> = ({ prev, next, end, x = 0, y =
       <div className={styles.container}>
         <img className={styles.background} style={{ width: 384 }} src={Assets.stylePanel} />
         <img className={styles.background} style={{ top: canvasY - y, left: canvasX - x }} src={Assets.afterStyle} />
-        <img className={styles.gif} src={Assets.styleGif} style={{ top: 49, left: 43, maxWidth: 288 }} />
+        <img className={styles.gif} src={Assets.styleGif} style={{ top: 55, left: 50, maxWidth: 273 }} />
         <div className={styles.btnContainer} style={{ top: 362, left: 248 }}>
           <div className={styles.nextBtn}>
             <img className={styles.btnBackground} src={Assets.btnNext} />