首页添加今日成交数据统计卡片

frontend/src/pages/Home.jsx

@@ -9,8 +9,47 @@ export default function Home() {
   const [seekStats, setSeekStats] = useState({ seekCount: 0, matchedCount: 0 })
   const [recentPosts, setRecentPosts] = useState([])
   const [dragonStats, setDragonStats] = useState({})
+  const [dealStats, setDealStats] = useState({ total: 0, items: [] })
+  const [dealVersion, setDealVersion] = useState('龙钞')
+  const [dealDetailItems, setDealDetailItems] = useState(null)
   const currentPath = window.location.hash.slice(1) || '/'
 
+  // 成交行情数据处理
+  const categoryOrder = ['带4号', '带7号', '永恒号', '天马号', '天马王', '金山号', '金山王', '钻石号', '朦胧号', '朦胧王', '金马号', '金马王', '倒置号', '圆圆号']
+  
+  const normalizeCat = (c) => {
+    if (c === '通货') return '带4号'
+    if (c === '无4') return '带7号'
+    return c
+  }
+  
+  const calcDealAvg = (pkg, cat) => {
+    const items = dealStats.items.filter(item => {
+      const content = item.content || ''
+      const p = content.includes('包装:') ? content.split('包装:')[1].split('\n')[0].trim() : (item.packaging || '')
+      let c = content.includes('分类:') ? content.split('分类:')[1].split('\n')[0].trim() : (item.category || '')
+      c = normalizeCat(c)
+      return p === pkg && c === cat
+    })
+    if (items.length === 0) return null
+    const sum = items.reduce((a, b) => a + (b.deal_price || 0), 0)
+    return { avg: Math.round(sum / items.length), count: items.length, items }
+  }
+
+  // 获取今日成交数据
+  useEffect(() => {
+    const today = new Date()
+    const dealDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
+    fetch(`/api/information/list?info_type=deal&deal_date=${dealDate}&page_size=500`)
+      .then(res => res.json())
+      .then(data => {
+        if (Array.isArray(data)) {
+          setDealStats({ total: data.length, items: data })
+        }
+      })
+      .catch(() => {})
+  }, [])
+
   useEffect(() => {
     const token = localStorage.getItem('token')
     const userData = localStorage.getItem('user')
@@ -232,6 +271,60 @@ export default function Home() {
         </div>
       </div>
 
+      {/* 今日成交数据统计 */}
+      {dealStats && dealStats.total > 0 && (
+        <div style={{ marginBottom: '20px' }}>
+          <div style={{ color: 'rgba(255,255,255,0.7)', fontSize: '14px', marginBottom: '12px', paddingLeft: '4px' }}>📈 今日成交数据统计</div>
+          <div style={{ background: '#1e293b', borderRadius: '12px', padding: '16px' }}>
+            <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', marginBottom: '12px' }}>
+              {['龙钞', '马钞', '蛇钞', '其他'].map(v => (
+                <button key={v} onClick={() => setDealVersion(v)}
+                  style={{ padding: '6px 16px', borderRadius: '8px', border: 'none', cursor: 'pointer',
+                    background: dealVersion === v ? '#3b82f6' : 'rgba(255,255,255,0.1)',
+                    color: '#fff', fontSize: '13px', fontWeight: dealVersion === v ? '600' : '400' }}>
+                  {v}
+                </button>
+              ))}
+            </div>
+            <div style={{ overflowX: 'auto' }}>
+              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '13px' }}>
+                <thead>
+                  <tr>
+                    <th style={{ padding: '8px', textAlign: 'left', color: '#94a3b8', borderBottom: '1px solid rgba(255,255,255,0.1)' }}></th>
+                    {['标百', '标十', '单张'].map(p => (
+                      <th key={p} style={{ padding: '8px', textAlign: 'center', color: '#94a3b8', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>{p}</th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {categoryOrder.map(cat => {
+                    const rowData = ['标百', '标十', '单张'].map(pkg => calcDealAvg(pkg, cat))
+                    const hasData = rowData.some(d => d !== null)
+                    if (!hasData) return null
+                    return (
+                      <tr key={cat}>
+                        <td style={{ padding: '8px', color: '#fbbf24', fontWeight: '500', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>{cat}</td>
+                        {rowData.map((d, i) => (
+                          <td key={i} style={{ padding: '8px', textAlign: 'center', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
+                            {d ? (
+                              <div style={{ color: '#22c55e', fontWeight: '600', cursor: 'pointer' }}
+                                onClick={() => setDealDetailItems(d.items)}>
+                                ¥{d.avg.toLocaleString()}
+                                <span style={{ color: '#64748b', fontSize: '11px', marginLeft: '4px' }}>({d.count})</span>
+                              </div>
+                            ) : <span style={{ color: '#475569' }}>-</span>}
+                          </td>
+                        ))}
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* 一尘今日数据 */}
       <div style={{ marginBottom: '20px' }}>
         <div style={{ color: 'rgba(255,255,255,0.7)', fontSize: '14px', marginBottom: '12px', paddingLeft: '4px' }}>📊 一尘今日连体纪念钞数据</div>
@@ -389,6 +482,55 @@ export default function Home() {
         ))}
       </div>
       <div style={{ height: '70px' }}></div>
+      
+      {/* 成交详情弹窗 */}
+      {dealDetailItems && (
+        <div style={{
+          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
+          background: 'rgba(0,0,0,0.8)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+          zIndex: 1000, padding: '20px'
+        }} onClick={() => setDealDetailItems(null)}>
+          <div style={{
+            background: '#1e293b', borderRadius: '12px', padding: '20px', maxWidth: '600px', width: '100%', maxHeight: '80vh', overflow: 'auto'
+          }} onClick={e => e.stopPropagation()}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
+              <div style={{ color: '#fff', fontSize: '16px', fontWeight: '600' }}>成交详情列表</div>
+              <button onClick={() => setDealDetailItems(null)} 
+                style={{ background: 'none', border: 'none', color: '#94a3b8', fontSize: '20px', cursor: 'pointer' }}>✕</button>
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+              {([...dealDetailItems].sort((a, b) => (a.deal_price || 0) - (b.deal_price || 0))).map((item, idx) => {
+                const content = item.content || ''
+                const grade = content.includes('评级:') ? content.split('评级:')[1].split('\n')[0].trim() : (item.grading_score || '')
+                const sizeMatch = content.match(/大小号:\s*(.+?)(?:\n|$)/)
+                const size = sizeMatch ? sizeMatch[1].trim() : ''
+                const platformMatch = content.match(/平台:\s*(.+?)(?:\n|$)/)
+                const platform = platformMatch ? platformMatch[1].trim() : '-'
+                return (
+                  <div key={idx} style={{ 
+                    background: 'rgba(255,255,255,0.05)', borderRadius: '8px', padding: '12px',
+                    display: 'flex', justifyContent: 'space-between', alignItems: 'center'
+                  }}>
+                    <div>
+                      <div style={{ color: '#fbbf24', fontWeight: '600', marginBottom: '4px' }}>
+                        {(item.title || '').split('-')[0]}
+                        {size && <span style={{ color: '#94a3b8', marginLeft: '8px' }}>| {size}</span>}
+                        {grade && <span style={{ color: '#06b6d4', marginLeft: '8px' }}>| {grade}</span>}
+                      </div>
+                      <div style={{ color: '#94a3b8', fontSize: '12px' }}>
+                        {item.deal_date} | {item.category} | {item.packaging} | {platform}
+                      </div>
+                    </div>
+                    <div style={{ color: '#22c55e', fontSize: '18px', fontWeight: '700' }}>
+                      ¥{item.deal_price?.toLocaleString()}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }