创赢未来评分系统 - 初始化提交（移除大文件）

miniprogram/src/components/MarkdownReader/CodeBlock.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { View, Text, ScrollView } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { AtIcon } from 'taro-ui'
+import './index.scss'
+
+interface Props {
+  code: string
+  language?: string
+}
+
+const CodeBlock: React.FC<Props> = ({ code, language }) => {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = (e) => {
+    e.stopPropagation()
+    Taro.setClipboardData({
+      data: code,
+      success: () => {
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      }
+    })
+  }
+
+  return (
+    <View className='markdown-code-block'>
+      <View className='code-header'>
+        <Text className='language'>{language || 'text'}</Text>
+        <View className='copy-btn' onClick={handleCopy}>
+          <AtIcon value='copy' size='14' color='#ccc' />
+          <Text className='copy-text'>{copied ? '已复制' : '复制'}</Text>
+        </View>
+      </View>
+      <ScrollView scrollX scrollY className='code-content'>
+        <Text userSelect className='code-text'>{code}</Text>
+      </ScrollView>
+    </View>
+  )
+}
+
+export default CodeBlock

miniprogram/src/components/MarkdownReader/index.scss

@@ -0,0 +1,101 @@
+.markdown-reader {
+  .markdown-text {
+    /* Inherit font styles and color from parent */
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+    
+    /* Ensure rich text images are responsive */
+    image {
+      max-width: 100%;
+    }
+  }
+
+  .markdown-video-container {
+    width: 100%;
+    margin: 16px 0;
+    border-radius: 12px;
+    overflow: hidden;
+    position: relative;
+    background: #0a0a1a;
+    border: 1px solid rgba(0, 243, 255, 0.3);
+    box-shadow: 0 0 20px rgba(0, 243, 255, 0.1);
+    
+    .markdown-video {
+      width: 100%;
+      height: 225px;
+      display: block;
+    }
+    
+    .markdown-video-caption {
+      padding: 12px;
+      background: rgba(10, 10, 26, 0.9);
+      color: rgba(0, 243, 255, 0.9);
+      font-size: 14px;
+      text-align: center;
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+
+.markdown-code-block {
+  margin: 16px 0;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: #1e1e1e;
+  border: 1px solid #333;
+
+  .code-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: #252526;
+    border-bottom: 1px solid #333;
+
+    .language {
+      color: #9cdcfe;
+      font-size: 14px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .copy-btn {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      padding: 4px 8px;
+      border-radius: 4px;
+      background-color: rgba(255, 255, 255, 0.1);
+      transition: background-color 0.2s;
+
+      &:active {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+
+      .copy-text {
+        color: #ccc;
+        font-size: 14px;
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .code-content {
+    padding: 12px;
+    background-color: #1e1e1e;
+    max-height: 400px;
+    box-sizing: border-box;
+
+    .code-text {
+      color: #d4d4d4;
+      font-family: 'Courier New', Courier, monospace;
+      font-size: 16px;
+      line-height: 1.5;
+      white-space: pre;
+      display: block;
+      width: max-content;
+      min-width: 100%;
+    }
+  }
+}

miniprogram/src/components/MarkdownReader/index.tsx

@@ -0,0 +1,146 @@
+import React, { useMemo } from 'react'
+import { View, RichText, Video } from '@tarojs/components'
+import { marked, Renderer } from 'marked'
+import CodeBlock from './CodeBlock'
+import './index.scss'
+
+interface Props {
+  content: string
+  themeColor?: string
+}
+
+const MarkdownReader: React.FC<Props> = ({ content, themeColor = '#00b96b' }) => {
+  const elements = useMemo(() => {
+    if (!content) return []
+    
+    const tokens = marked.lexer(content)
+    const result: React.ReactNode[] = []
+    let currentTokens: any[] = []
+    
+    // Configure renderer
+    const renderer = new Renderer()
+    
+    renderer.table = (header, body) => {
+        return `<div style="overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch;">
+          <table style="width: 100%; min-width: 600px; border-collapse: collapse; margin: 16px 0; font-size: 16px;">
+            <thead>${header}</thead>
+            <tbody>${body}</tbody>
+          </table>
+        </div>`
+    }
+
+    renderer.tablecell = (content, flags) => {
+        const type = flags.header ? 'th' : 'td'
+        const style = [
+            'border: 1px solid rgba(255,255,255,0.1)',
+            'padding: 10px',
+            flags.header ? 'background-color: rgba(255,255,255,0.05); font-weight: 700; color: #fff;' : 'color: #ddd;',
+            flags.align ? `text-align: ${flags.align}` : 'text-align: left'
+        ].join(';')
+        return `<${type} style="${style}">${content}</${type}>`
+    }
+
+    renderer.image = (href, title, text) => {
+        return `<img src="${href}" style="max-width:100%;border-radius:8px;margin:10px 0;box-shadow: 0 4px 12px rgba(0,0,0,0.3);" title="${title || ''}" alt="${text || ''}" />`
+    }
+
+    renderer.link = (href, title, text) => {
+        return `<a href="${href}" style="color: ${themeColor}; text-decoration: none;">${text}</a>`
+    }
+
+    // Process tokens
+    tokens.forEach((token, index) => {
+      if (token.type === 'code') {
+        // Skip css blocks that look like the video component styles
+        if ((token.lang === 'css' || !token.lang) && token.text.includes('.simple-tech-video')) {
+            return
+        }
+
+        // Flush accumulated tokens
+        if (currentTokens.length > 0) {
+          // preserve links if any
+          (currentTokens as any).links = (tokens as any).links
+          const html = marked.parser(currentTokens as any, { renderer, breaks: true })
+          result.push(<RichText key={`rt-${index}`} nodes={html} className='markdown-text' />)
+          currentTokens = []
+        }
+        
+        // Add code block
+        result.push(
+          <View key={`cb-${index}`} className='code-block-wrapper'>
+            <CodeBlock 
+              code={token.text} 
+              language={token.lang} 
+            />
+          </View>
+        )
+      } else if (token.type === 'html') {
+          // Check for video tag
+          const videoRegex = /<video[^>]*>[\s\S]*?<source[^>]*src=["'](.*?)["'][^>]*>[\s\S]*?<\/video>/i
+          const simpleVideoRegex = /<video[^>]*src=["'](.*?)["'][^>]*>/i
+          
+          const match = token.text.match(videoRegex) || token.text.match(simpleVideoRegex)
+          
+          if (match) {
+              // Flush accumulated tokens
+              if (currentTokens.length > 0) {
+                  (currentTokens as any).links = (tokens as any).links
+                  const html = marked.parser(currentTokens as any, { renderer, breaks: true })
+                  result.push(<RichText key={`rt-${index}`} nodes={html} className='markdown-text' />)
+                  currentTokens = []
+              }
+
+              const src = match[1]
+              // Try to extract caption
+              const captionRegex = /class=["']video-caption["'][^>]*>(.*?)<\/div>/i
+              const captionMatch = token.text.match(captionRegex)
+              const caption = captionMatch ? captionMatch[1] : null
+              
+              result.push(
+                  <View key={`video-${index}`} className='markdown-video-container'>
+                      <Video 
+                          src={src} 
+                          className='markdown-video' 
+                          controls
+                          autoplay={false}
+                          objectFit='contain'
+                          showFullscreenBtn
+                          showPlayBtn
+                          showCenterPlayBtn
+                          enablePlayGesture
+                      />
+                      {caption && <View className='markdown-video-caption'>{caption}</View>}
+                  </View>
+              )
+          } else {
+              // Filter out style tags for video component if they are parsed as HTML
+              if (token.text.includes('<style>') && token.text.includes('.simple-tech-video')) {
+                  // If it's JUST the style tag, ignore it. If it's mixed with other content, we might need to be careful.
+                  // But usually marked parses block HTML separately.
+                  // Let's verify if we can just skip it.
+                  // If the token is ONLY the style block, we skip it.
+                  // If it contains other content, we might need to strip the style.
+                  // For now, let's assume it's a block HTML token.
+                  return
+              }
+              currentTokens.push(token)
+          }
+      } else {
+        currentTokens.push(token)
+      }
+    })
+    
+    // Flush remaining tokens
+    if (currentTokens.length > 0) {
+      (currentTokens as any).links = (tokens as any).links
+      const html = marked.parser(currentTokens as any, { renderer, breaks: true })
+      result.push(<RichText key={`rt-end`} nodes={html} className='markdown-text' />)
+    }
+    
+    return result
+  }, [content, themeColor])
+
+  return <View className='markdown-reader'>{elements}</View>
+}
+
+export default MarkdownReader

miniprogram/src/components/ParticleBackground/index.scss

@@ -0,0 +1,10 @@
+.particle-canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+  background: #000;
+}

miniprogram/src/components/ParticleBackground/index.tsx

@@ -0,0 +1,175 @@
+import { Canvas, View } from '@tarojs/components'
+import Taro, { useReady, useUnload } from '@tarojs/taro'
+import { useRef } from 'react'
+import './index.scss'
+
+export default function ParticleBackground() {
+  const canvasRef = useRef<any>(null)
+  const animationRef = useRef<any>(null)
+
+  useReady(() => {
+    const query = Taro.createSelectorQuery()
+    query.select('#particle-canvas')
+      .fields({ node: true, size: true })
+      .exec((res) => {
+        if (!res[0]) return
+        const canvas = res[0].node
+        const ctx = canvas.getContext('2d')
+        const dpr = Taro.getSystemInfoSync().pixelRatio
+
+        canvas.width = res[0].width * dpr
+        canvas.height = res[0].height * dpr
+        ctx.scale(dpr, dpr)
+
+        const width = res[0].width
+        const height = res[0].height
+
+        // Init particles
+        const particles: any[] = []
+        const particleCount = 40 // Reduced for mobile performance
+        const meteors: any[] = []
+        const meteorCount = 4
+
+        class Particle {
+            x: number
+            y: number
+            vx: number
+            vy: number
+            size: number
+            color: string
+            constructor() {
+                this.x = Math.random() * width
+                this.y = Math.random() * height
+                this.vx = (Math.random() - 0.5) * 0.5
+                this.vy = (Math.random() - 0.5) * 0.5
+                this.size = Math.random() * 2
+                this.color = Math.random() > 0.5 ? 'rgba(0, 185, 107, ' : 'rgba(0, 240, 255, '
+            }
+            update() {
+                this.x += this.vx
+                this.y += this.vy
+                if (this.x < 0 || this.x > width) this.vx *= -1
+                if (this.y < 0 || this.y > height) this.vy *= -1
+            }
+            draw() {
+                ctx.beginPath()
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
+                ctx.fillStyle = this.color + (0.5 + Math.random() * 0.5) + ')'
+                ctx.fill()
+            }
+        }
+
+        class Meteor {
+            x: number
+            y: number
+            vx: number
+            vy: number
+            len: number
+            color: string
+            opacity: number
+            maxOpacity: number
+            wait: number
+            constructor() {
+                this.x = 0
+                this.y = 0
+                this.vx = 0
+                this.vy = 0
+                this.len = 0
+                this.color = ''
+                this.opacity = 0
+                this.maxOpacity = 0
+                this.wait = 0
+                this.reset()
+            }
+            reset() {
+                this.x = Math.random() * width * 1.5
+                this.y = Math.random() * -height
+                this.vx = -(Math.random() * 3 + 3)
+                this.vy = Math.random() * 3 + 3
+                this.len = Math.random() * 100 + 100
+                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() * 200
+            }
+            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 > 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(1, this.color + '0)')
+
+                ctx.save()
+                ctx.beginPath()
+                ctx.strokeStyle = gradient
+                ctx.lineWidth = 2
+                ctx.lineCap = 'round'
+                ctx.moveTo(this.x, this.y)
+                ctx.lineTo(tailX, tailY)
+                ctx.stroke()
+                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, width, height)
+
+            // Draw Meteors
+            meteors.forEach(m => {
+                m.update()
+                m.draw()
+            })
+
+            // Draw Lines
+            ctx.lineWidth = 0.5
+            for (let i = 0; i < particleCount; i++) {
+                for (let j = i; j < particleCount; j++) {
+                    const dx = particles[i].x - particles[j].x
+                    const dy = particles[i].y - particles[j].y
+                    const dist = Math.sqrt(dx * dx + dy * dy)
+                    if (dist < 80) { // Reduced distance for mobile
+                        ctx.beginPath()
+                        ctx.strokeStyle = `rgba(100, 255, 218, ${1 - dist / 80})`
+                        ctx.moveTo(particles[i].x, particles[i].y)
+                        ctx.lineTo(particles[j].x, particles[j].y)
+                        ctx.stroke()
+                    }
+                }
+            }
+
+            // Draw Particles
+            particles.forEach(p => {
+                p.update()
+                p.draw()
+            })
+
+            canvas.requestAnimationFrame(animate)
+        }
+
+        animate()
+      })
+  })
+
+  return (
+    <Canvas
+      type='2d'
+      id='particle-canvas'
+      className='particle-canvas'
+    />
+  )
+}