fix: add shooting star and Mic remind

frontend/src/components/ParticleBackground.jsx

@@ -18,6 +18,8 @@ const ParticleBackground = () => {
 
     const particles = [];
     const particleCount = 100;
+    const meteors = [];
+    const meteorCount = 8;
 
     class Particle {
       constructor() {
@@ -45,13 +47,93 @@ const ParticleBackground = () => {
       }
     }
 
+    class Meteor {
+      constructor() {
+        this.reset();
+      }
+
+      reset() {
+        this.x = Math.random() * canvas.width * 1.5; // Start further right
+        this.y = Math.random() * -canvas.height; // Start further above
+        this.vx = -(Math.random() * 5 + 5); // Faster
+        this.vy = Math.random() * 5 + 5; // Faster
+        this.len = Math.random() * 150 + 150; // Longer trail
+        this.color = Math.random() > 0.5 ? 'rgba(0, 185, 107, ' : 'rgba(0, 240, 255, ';
+        this.opacity = 0;
+        this.maxOpacity = Math.random() * 0.5 + 0.2;
+        this.wait = Math.random() * 300; // Random delay before showing up
+      }
+
+      update() {
+        if (this.wait > 0) {
+          this.wait--;
+          return;
+        }
+        
+        this.x += this.vx;
+        this.y += this.vy;
+
+        if (this.opacity < this.maxOpacity) {
+          this.opacity += 0.02;
+        }
+
+        if (this.x < -this.len || this.y > canvas.height + this.len) {
+          this.reset();
+        }
+      }
+
+      draw() {
+        if (this.wait > 0) return;
+        
+        const tailX = this.x - this.vx * (this.len / 15);
+        const tailY = this.y - this.vy * (this.len / 15);
+        
+        const gradient = ctx.createLinearGradient(this.x, this.y, tailX, tailY);
+        gradient.addColorStop(0, this.color + this.opacity + ')');
+        gradient.addColorStop(0.1, this.color + (this.opacity * 0.5) + ')');
+        gradient.addColorStop(1, this.color + '0)');
+
+        ctx.save();
+        
+        // Add glow effect
+        ctx.shadowBlur = 8;
+        ctx.shadowColor = this.color.replace('rgba', 'rgb').replace(', ', ')');
+        
+        ctx.beginPath();
+        ctx.strokeStyle = gradient;
+        ctx.lineWidth = 2;
+        ctx.lineCap = 'round';
+        ctx.moveTo(this.x, this.y);
+        ctx.lineTo(tailX, tailY);
+        ctx.stroke();
+        
+        // Add a bright head
+        ctx.beginPath();
+        ctx.fillStyle = '#fff';
+        ctx.arc(this.x, this.y, 1, 0, Math.PI * 2);
+        ctx.fill();
+        
+        ctx.restore();
+      }
+    }
+
     for (let i = 0; i < particleCount; i++) {
       particles.push(new Particle());
     }
 
+    for (let i = 0; i < meteorCount; i++) {
+      meteors.push(new Meteor());
+    }
+
     const animate = () => {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       
+      // Draw meteors first (in background)
+      meteors.forEach(m => {
+        m.update();
+        m.draw();
+      });
+
       // Draw connecting lines
       ctx.lineWidth = 0.5;
       for (let i = 0; i < particleCount; i++) {

frontend/src/pages/Home.jsx

@@ -156,9 +156,10 @@ const Home = () => {
                 <div style={{ marginBottom: 10, height: 40, overflow: 'hidden', color: '#bbb' }}>
                   {product.description}
                 </div>
-                <div style={{ marginBottom: 15 }}>
-                  <Tag color="cyan" style={{ background: 'rgba(0,255,255,0.1)', border: '1px solid cyan' }}>{product.chip_type}</Tag>
-                  {product.has_camera && <Tag color="blue" style={{ background: 'rgba(0,0,255,0.1)', border: '1px solid blue' }}>Camera</Tag>}
+                <div style={{ marginBottom: 15, display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+                  <Tag color="cyan" style={{ background: 'rgba(0,255,255,0.1)', border: '1px solid cyan', margin: 0 }}>{product.chip_type}</Tag>
+                  {product.has_camera && <Tag color="blue" style={{ background: 'rgba(0,0,255,0.1)', border: '1px solid blue', margin: 0 }}>Camera</Tag>}
+                  {product.has_microphone && <Tag color="purple" style={{ background: 'rgba(114,46,209,0.1)', border: '1px solid #722ed1', margin: 0 }}>Mic</Tag>}
                 </div>
                 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                   <div className="tech-price neon-text-green">¥{product.price}</div>

frontend/src/pages/ProductDetail.jsx

@@ -139,10 +139,10 @@ const ProductDetail = () => {
           <h1 style={{ fontSize: 48, fontWeight: 'bold', color: '#fff' }}>{product.name}</h1>
           <p style={{ fontSize: 20, color: '#888', margin: '20px 0' }}>{product.description}</p>
           
-          <div style={{ marginBottom: 30 }}>
-            <span className="spec-tag">{product.chip_type}</span>
-            {product.has_camera && <span className="spec-tag">高清摄像头</span>}
-            {product.has_microphone && <span className="spec-tag">阵列麦克风</span>}
+          <div style={{ marginBottom: 30, display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+            <Tag color="cyan" style={{ background: 'rgba(0,255,255,0.1)', border: '1px solid cyan', padding: '4px 12px', fontSize: '14px', margin: 0 }}>{product.chip_type}</Tag>
+            {product.has_camera && <Tag color="blue" style={{ background: 'rgba(0,0,255,0.1)', border: '1px solid blue', padding: '4px 12px', fontSize: '14px', margin: 0 }}>高清摄像头</Tag>}
+            {product.has_microphone && <Tag color="purple" style={{ background: 'rgba(114,46,209,0.1)', border: '1px solid #722ed1', padding: '4px 12px', fontSize: '14px', margin: 0 }}>阵列麦克风</Tag>}
           </div>
 
           <div style={{ display: 'flex', alignItems: 'flex-end', gap: 20, marginBottom: 40 }}>