feat: 实现 FloatingBall 技术交流群悬浮球组件

- 创建 FloatingBall 组件，显示在页面右下角
- 使用微信群图标样式，包含'交流群'文字
- 鼠标悬停显示微信二维码弹窗
- 提示用户扫码发送'leetcode'加入算法交流群
- 下载并集成指定的二维码图片
- 保持图片原始比例不变形

Author: CC11001100

.kiro/specs/min-stack-visualizer/tasks.md

@@ -159,8 +159,8 @@
     - **Property 7: 播放控制状态一致性**
     - **Validates: Requirements 7.3, 7.5, 7.9, 7.15**
 
-- [ ] 13. UI 组件开发 - FloatingBall
-  - [ ] 13.1 实现 FloatingBall 组件
+- [x] 13. UI 组件开发 - FloatingBall
+  - [x] 13.1 实现 FloatingBall 组件
     - 创建 components/FloatingBall/FloatingBall.tsx 和样式文件
     - 右下角悬浮球（微信群图标样式）
     - 悬停显示二维码

public/wechat-qrcode.png

@@ -5,6 +5,7 @@ import { InputPanel } from './components/InputPanel';
 import { CodePanel } from './components/CodePanel/CodePanel';
 import { Canvas } from './components/Canvas';
 import { ControlPanel } from './components/ControlPanel';
+import { FloatingBall } from './components/FloatingBall';
 import type { Operation, Language, AlgorithmStep } from './types';
 import { generateSteps } from './services/stepGenerator';
 import { 
@@ -189,6 +190,9 @@ function App() {
           />
         )}
       </main>
+
+      {/* 技术交流群悬浮球 */}
+      <FloatingBall />
     </div>
   );
 }

src/App.tsx

@@ -0,0 +1,96 @@
+.floating-ball-container {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 1000;
+}
+
+.floating-ball {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(7, 193, 96, 0.4);
+  transition: all 0.3s ease;
+}
+
+.floating-ball:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 16px rgba(7, 193, 96, 0.5);
+}
+
+.wechat-group-icon {
+  width: 24px;
+  height: 24px;
+  color: white;
+}
+
+.ball-text {
+  font-size: 10px;
+  color: white;
+  margin-top: 2px;
+  font-weight: 500;
+}
+
+.qrcode-popup {
+  position: absolute;
+  bottom: 70px;
+  right: 0;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  padding: 16px;
+  animation: fadeIn 0.2s ease;
+}
+
+.qrcode-popup::after {
+  content: '';
+  position: absolute;
+  bottom: -8px;
+  right: 20px;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid white;
+}
+
+.qrcode-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.qrcode-image {
+  width: 200px;
+  height: auto;
+  border-radius: 8px;
+}
+
+.qrcode-tip {
+  margin-top: 12px;
+  font-size: 13px;
+  color: #333;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.qrcode-tip strong {
+  color: #07c160;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/components/FloatingBall/FloatingBall.css

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import './FloatingBall.css';
+import qrcodeImage from '/wechat-qrcode.png';
+
+export function FloatingBall() {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div className="floating-ball-container">
+      <div
+        className="floating-ball"
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <svg
+          className="wechat-group-icon"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <path d="M8.5 11.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm4 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
+          <path d="M9 2C4.58 2 1 5.58 1 10c0 1.5.4 2.9 1.1 4.1L1 18l3.9-1.1c1.2.7 2.6 1.1 4.1 1.1 4.42 0 8-3.58 8-8s-3.58-8-8-8zm0 14c-1.3 0-2.5-.3-3.6-.9l-.4-.2-2.5.7.7-2.5-.2-.4C2.3 11.5 2 10.3 2 9c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7z" />
+          <path d="M19 10c0-1.3-.3-2.5-.9-3.6l.9-3.4-3.4.9C14.5 3.3 13.3 3 12 3c-.5 0-1 .05-1.5.13C12.3 2.4 14.6 2 17 2c4.42 0 8 3.58 8 8 0 1.5-.4 2.9-1.1 4.1L25 18l-3.9-1.1c-1.2.7-2.6 1.1-4.1 1.1-.5 0-1-.05-1.5-.13.8.08 1.6.13 2.5.13 1.3 0 2.5-.3 3.6-.9l.4-.2 2.5.7-.7-2.5.2-.4c.6-1.1.9-2.3.9-3.6z" />
+        </svg>
+        <span className="ball-text">交流群</span>
+      </div>
+
+      {isHovered && (
+        <div className="qrcode-popup">
+          <div className="qrcode-content">
+            <img
+              src={qrcodeImage}
+              alt="微信二维码"
+              className="qrcode-image"
+            />
+            <p className="qrcode-tip">
+              微信扫码发送 <strong>"leetcode"</strong> 加入算法交流群
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/FloatingBall/FloatingBall.tsx

@@ -0,0 +1 @@
+export { FloatingBall } from './FloatingBall';