feat: 添加微信交流群悬浮球

Author: CC11001100

public/wechat-qr.png

@@ -6,6 +6,7 @@ import GraphView from './GraphView';
 import DataStructuresPanel from './DataStructuresPanel';
 import ControlPanel from './ControlPanel';
 import ProgressBar from './ProgressBar';
+import WechatFloat from './WechatFloat';
 import { usePlayback } from '../hooks/usePlayback';
 import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
 import { generateSteps } from '../algorithm/stepGenerator';
@@ -155,6 +156,8 @@ function App() {
         totalSteps={steps.length}
         onSeek={goToStep}
       />
+
+      <WechatFloat />
     </div>
   );
 }

src/components/App.tsx

@@ -0,0 +1,54 @@
+.wechat-float {
+  position: fixed;
+  right: 20px;
+  bottom: 50px;
+  z-index: 200;
+}
+
+.wechat-icon {
+  width: 50px;
+  height: 50px;
+  background: #07c160;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.wechat-icon:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+}
+
+.wechat-popup {
+  position: absolute;
+  bottom: 60px;
+  right: 0;
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+  text-align: center;
+  min-width: 200px;
+}
+
+.wechat-popup img {
+  width: 180px;
+  height: 180px;
+  border-radius: 8px;
+}
+
+.wechat-popup p {
+  margin: 12px 0 0;
+  color: #333;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.wechat-popup strong {
+  color: #07c160;
+}

src/components/WechatFloat.css

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+import './WechatFloat.css';
+
+export default function WechatFloat() {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      className="wechat-float"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="wechat-icon">💬</div>
+      {isHovered && (
+        <div className="wechat-popup">
+          <img src="./wechat-qr.png" alt="微信二维码" />
+          <p>扫码发送 <strong>leetcode</strong> 加入算法交流群</p>
+        </div>
+      )}
+    </div>
+  );
+}