feat: 首页介绍视频改为弹窗显示，不跳转b站

src/routes/home/components/cobe.tsx

@@ -1,10 +1,12 @@
 import type { SVGProps } from 'react';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import createGlobe from 'cobe';
 import { useSpring } from 'react-spring';
 import { useTranslation } from 'react-i18next';
 
+import VideoPlayer from './videoPlayer.tsx';
+
 import {
   SlackWhiteIcon,
   DiscordIcon,
@@ -13,8 +15,6 @@ import {
   YoutubeIcon,
 } from '@/components/icons';
 
-import { siteConfig } from '@/config';
-
 export const TextLogo = (props: SVGProps<SVGSVGElement>) => (
   <svg fill="none" viewBox="0 0 423 120" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
@@ -25,6 +25,7 @@ export const TextLogo = (props: SVGProps<SVGSVGElement>) => (
 );
 
 export const Cobe = () => {
+  const [showPopup, setShowPopup] = useState(false);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const canvasRef = useRef<any>();
   const pointerInteracting = useRef<number | null>(0);
@@ -40,6 +41,11 @@ export const Cobe = () => {
   }));
   const { t } = useTranslation();
 
+  const handleClosePopup = () => {
+    setShowPopup(!showPopup);
+    console.log('~showPopup:', showPopup);
+  };
+
   useEffect(() => {
     let phi = 0;
     let width = 0;
@@ -87,10 +93,10 @@ export const Cobe = () => {
         position: 'relative',
         display: 'block',
       }}
-      href={siteConfig.links.bilibili}
-      target="_blank"
     >
+      {showPopup && <VideoPlayer onClose={handleClosePopup} />}
       <div
+        onClick={handleClosePopup}
         className={'group  cursor-pointer'}
         style={{
           width: '100%',

src/routes/home/components/videoPlayer.tsx

@@ -0,0 +1,51 @@
+import ReactDOM from 'react-dom';
+
+const VideoPlayer = ({ onClose }) => {
+  const handleCloseClick = (e) => {
+    // 确保点击的是背景层而不是播放器内部
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return ReactDOM.createPortal(
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)', // 半透明背景
+        zIndex: 9998, // 比视频播放器层级低一层
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+      onClick={handleCloseClick}
+    >
+      <div
+        style={{
+          width: '100vw',
+          height: '56.25vw',
+          maxWidth: '1280px',
+          maxHeight: '720px',
+          boxShadow: '0 0 10px rgba(0, 0, 0, 0.5)',
+        }}
+      >
+        <iframe
+          src="//player.bilibili.com/player.html?aid=241596420&bvid=BV1se411n7tD&cid=1413412972&p=1"
+          style={{ width: '100%', height: '100%' }}
+          scrolling="no"
+          border="0"
+          frameBorder="no"
+          framespacing="0"
+          allowFullScreen="true"
+        ></iframe>
+      </div>
+    </div>,
+    document.body,
+  );
+};
+
+export default VideoPlayer;