点击价格显示详情列表

frontend/src/pages/News.jsx

@@ -34,6 +34,7 @@ export default function News() {
   const [showMatchList, setShowMatchList] = useState(false)
   const [dealVersion, setDealVersion] = useState('龙钞')
   const [dealDate, setDealDate] = useState('')
+  const [dealDetailItems, setDealDetailItems] = useState(null)  // 弹窗显示的详情列表
   const [matchCollections, setMatchCollections] = useState([])
   const [networkMatchCollections, setNetworkMatchCollections] = useState([])
   const [showNetworkMatchList, setShowNetworkMatchList] = useState(false)
@@ -582,7 +583,7 @@ export default function News() {
                                 <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(`${dealVersion} ${cat} ${packagings[i]} 平均价¥${d.avg.toLocaleString()}, 共${d.count}笔`)}>
+                                      onClick={() => setDealDetailItems(d.items)}>
                                       ¥{d.avg.toLocaleString()}
                                       <span style={{ color: '#64748b', fontSize: '11px', marginLeft: '4px' }}>({d.count})</span>
                                     </div>
@@ -600,6 +601,49 @@ export default function News() {
               )
             })()}
             
+            {/* 成交行情详情弹窗 */}
+            {dealDetailItems && (
+              <div style={{ 
+                position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, 
+                background: 'rgba(0,0,0,0.8)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                padding: '20px'
+              }}>
+                <div style={{ 
+                  background: '#1e293b', borderRadius: '12px', padding: '16px', 
+                  maxWidth: '600px', maxHeight: '80vh', overflow: 'auto', width: '100%'
+                }}>
+                  <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.map((item, idx) => {
+                      const content = item.content || ''
+                      const grade = content.includes('评级:') ? content.split('评级:')[1].split('\n')[0].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' }}>{item.title}</div>
+                            <div style={{ color: '#94a3b8', fontSize: '12px', marginTop: '4px' }}>
+                              {item.deal_date} | {item.category} | {item.packaging}
+                              {grade && ` | ${grade}`}
+                            </div>
+                          </div>
+                          <div style={{ color: '#22c55e', fontSize: '18px', fontWeight: '700' }}>
+                            ¥{item.deal_price?.toLocaleString()}
+                          </div>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+              </div>
+            )}
+            
             {infoList.map(item => {
               // 成交行情 tab - 按维度汇总展示
               if (activeTab === 'deal') {