fix: UserGuide click-through behavior (#2764)

* fix: UserGuide click-through behavior

* fix: UserGuide click-through behavior

packages/semi-foundation/userGuide/userGuide.scss

@@ -14,6 +14,10 @@ $module: #{$prefix}-userGuide;
         height: 100vh;
         pointer-events: none;
 
+        &-transparent-rect {
+            pointer-events: auto;
+        }
+
         &-rect {
             transition: all $transition_duration-userGuide_spotLight $transition_function-userGuide_spotLight;
         }

packages/semi-ui/userGuide/_story/userGuide.stories.jsx

@@ -11,15 +11,18 @@ export const BasicUsage = () => {
 
     return (
         <div>
+            <div style={{ marginTop: '20px' }}>
+                <Button onClick={() => setVisible(true)}>显示引导</Button>
+            </div>
+            <br />
             <Space spacing='medium'>
                 <Switch id={'step-1'} defaultChecked={true}/>     
-                <Button id={'step-2'} type="secondary">次要</Button>
+                <Button id={'step-2'} type="secondary" onClick={() => {
+                    console.log('次要')
+                }}>次要</Button>
                 <Button id={'step-3'} type="tertiary">第三</Button>
                 <Button id={'step-4'} type="warning">警告</Button>
             </Space>
-            <div style={{ marginTop: '20px' }}>
-                <Button onClick={() => setVisible(true)}>显示引导</Button>
-            </div>
             <UserGuide
                 mode="popup"
                 mask={true}

packages/semi-ui/userGuide/index.tsx

@@ -384,12 +384,42 @@ class UserGuide extends BaseComponent<UserGuideProps, UserGuideState> {
                                 </mask>
                             </defs>
                             {
-                                mask && <rect
-                                    width="100%"
-                                    height="100%"
-                                    fill="var(--semi-color-overlay-bg)"
-                                    mask={`url(#spotlight-${this.userGuideId})`}
-                                />
+                                mask && (
+                                    <>
+                                        <rect
+                                            width="100%"
+                                            height="100%"
+                                            fill="var(--semi-color-overlay-bg)"
+                                            mask={`url(#spotlight-${this.userGuideId})`} />
+                                        <rect
+                                            x={0}
+                                            y={0}
+                                            width="100%"
+                                            height={spotlightRect.y}
+                                            fill="transparent"
+                                            className={`${prefixCls}-spotlight-transparent-rect`} />
+                                        <rect
+                                            x={0}
+                                            y={spotlightRect.y}
+                                            width={spotlightRect.x}
+                                            height={spotlightRect.height}
+                                            fill="transparent"
+                                            className={`${prefixCls}-spotlight-transparent-rect`} />
+                                        <rect
+                                            x={spotlightRect.x + spotlightRect.width}
+                                            y={spotlightRect.y}
+                                            width={`calc(100% - ${spotlightRect.x + spotlightRect.width}px)`}
+                                            height={spotlightRect.height}
+                                            fill="transparent"
+                                            className={`${prefixCls}-spotlight-transparent-rect`} />
+                                        <rect
+                                            y={spotlightRect.y + spotlightRect.height}
+                                            width="100%"
+                                            height={`calc(100% - ${spotlightRect.y + spotlightRect.height}px)`}
+                                            fill="transparent"
+                                            className={`${prefixCls}-spotlight-transparent-rect`} />
+                                    </>
+                                )
                             }
                         </svg>
                     ) : null