From 5484d125574e535067b15ae7b4b25c448459aac0 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 21:21:22 +0800
Subject: [PATCH] =?UTF-8?q?=E7=82=B9=E5=87=BB=E4=BB=B7=E6=A0=BC=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E8=AF=A6=E6=83=85=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/News.jsx | 46 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/News.jsx b/frontend/src/pages/News.jsx
index 6ad936a..a150c3b 100644
--- a/frontend/src/pages/News.jsx
+++ b/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') {