From d5180d01b67a508e191bb9b7b8538492817c1ba7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B2=E8=BE=B0=E7=94=9F=E4=BA=A7?= <jiachenlong@local>
Date: Sat, 11 Apr 2026 20:13:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=90=E4=BA=A4=E8=A1=8C=E6=83=85=E4=BB=B7?=
 =?UTF-8?q?=E6=A0=BC=E7=BB=9F=E8=AE=A1=E8=A1=A8=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/News.jsx | 115 ++++++++++++++++++++++++------------
 1 file changed, 77 insertions(+), 38 deletions(-)

diff --git a/frontend/src/pages/News.jsx b/frontend/src/pages/News.jsx
index 981c766..ce54341 100644
--- a/frontend/src/pages/News.jsx
+++ b/frontend/src/pages/News.jsx
@@ -481,55 +481,94 @@ export default function News() {
           </div>
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-            {/* 成交行情 - 统计区域 */}
+            {/* 成交行情 - 价格统计表格 */}
             {activeTab === 'deal' && (() => {
-              // 统计各维度
-              const stats = { version: {}, packaging: {}, category: {}, platform: {}, date: {}, totalCount: infoList.length, totalAmount: 0 }
-              infoList.forEach(item => {
-                const content = item.content || ''
-                // 版本
+              const [selectedVersion, setSelectedVersion] = useState('龙钞')
+              const [selectedDate, setSelectedDate] = useState('')
+              
+              const versions = ['龙钞', '马钞', '蛇钞', '其他']
+              const packagings = ['标百', '标十', '单张']
+              const categories = ['带4号', '带7号', '永恒号', '钻石号', '如意号', '朦胧号', '天马号', '金山号', '金马号']
+              
+              const filteredData = infoList.filter(item => {
                 const serial = (item.title || '').split('-')[0] || ''
                 let version = '其他'
                 if (serial.startsWith('J0')) version = '龙钞'
                 else if (serial.startsWith('J1')) version = '马钞'
                 else if (serial.startsWith('J3')) version = '蛇钞'
-                stats.version[version] = (stats.version[version] || 0) + 1
-                // 包装
-                const pkg = content.match(/包装:\s*(.+?)(?:\n|$)/)?.[1]?.trim() || item.packaging || '-'
-                stats.packaging[pkg] = (stats.packaging[pkg] || 0) + 1
-                // 分类
-                const cat = content.match(/分类:\s*(.+?)(?:\n|$)/)?.[1]?.trim() || item.category || '-'
-                stats.category[cat] = (stats.category[cat] || 0) + 1
-                // 平台
-                const plat = content.match(/平台:\s*(.+?)(?:\n|$)/)?.[1]?.trim() || '-'
-                stats.platform[plat] = (stats.platform[plat] || 0) + 1
-                // 日期
-                const date = content.match(/日期:\s*(.+?)(?:\n|$)/)?.[1]?.trim() || item.deal_date || '-'
-                stats.date[date] = (stats.date[date] || 0) + 1
-                // 总金额
-                stats.totalAmount += item.deal_price || 0
+                if (version !== selectedVersion) return false
+                if (selectedDate) {
+                  const dealDate = item.deal_date || ''
+                  if (!dealDate.startsWith(selectedDate)) return false
+                }
+                return true
               })
               
-              const renderStat = (title, data) => (
-                <div style={{ marginBottom: '12px' }}>
-                  <div style={{ color: '#94a3b8', fontSize: '12px', marginBottom: '6px' }}>{title}</div>
-                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
-                    {Object.entries(data).sort((a,b) => b[1] - a[1]).map(([k, v]) => (
-                      <span key={k} style={{ background: '#3b82f6', color: '#fff', padding: '4px 10px', borderRadius: '6px', fontSize: '12px' }}>{k} ({v})</span>
-                    ))}
-                  </div>
-                </div>
-              )
+              const calcAvg = (pkg, cat) => {
+                const items = filteredData.filter(item => {
+                  const content = item.content || ''
+                  const p = content.match(/包装:\s*(.+?)(?:\n|$)/)?.[1]?.trim() || item.packaging || ''
+                  const c = content.match(/分类:\s*(.+?)(?:\n|$)/)?.[1]?.trim() || item.category || ''
+                  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 }
+              }
               
               return (
                 <div style={{ background: '#1e293b', borderRadius: '12px', padding: '16px', marginBottom: '12px' }}>
-                  <div style={{ color: '#fff', fontSize: '16px', fontWeight: '600', marginBottom: '12px' }}>📊 成交行情统计</div>
-                  <div style={{ color: '#22c55e', fontSize: '14px', marginBottom: '16px' }}>总成交 {stats.totalCount} 笔，总金额 ¥{stats.totalAmount.toLocaleString()}</div>
-                  {renderStat('版本分布', stats.version)}
-                  {renderStat('包装分布', stats.packaging)}
-                  {renderStat('号码分类', stats.category)}
-                  {renderStat('成交平台', stats.platform)}
-                  {renderStat('成交日期', stats.date)}
+                  <div style={{ marginBottom: '16px' }}>
+                    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', marginBottom: '12px' }}>
+                      {versions.map(v => (
+                        <button key={v} onClick={() => setSelectedVersion(v)}
+                          style={{ padding: '6px 16px', borderRadius: '8px', border: 'none', cursor: 'pointer',
+                            background: selectedVersion === v ? '#3b82f6' : 'rgba(255,255,255,0.1)',
+                            color: '#fff', fontSize: '13px', fontWeight: selectedVersion === v ? '600' : '400' }}>
+                          {v}
+                        </button>
+                      ))}
+                    </div>
+                    <input type="month" value={selectedDate} onChange={e => setSelectedDate(e.target.value)}
+                      style={{ padding: '8px 12px', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.2)', 
+                        background: 'rgba(255,255,255,0.05)', color: '#fff', fontSize: '14px' }} />
+                  </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>
+                          {packagings.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>
+                        {categories.map(cat => {
+                          const rowData = packagings.map(pkg => calcAvg(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={() => alert(`${selectedVersion} ${cat} ${packagings[i]} 平均价¥${d.avg.toLocaleString()}, 共${d.count}笔`)}>
+                                      ¥{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>
               )
             })()}