Add explain analysis workflow and UI

frontend/src/components/explain/ExplainTradesSection.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { formatDateTime } from '../../utils/formatters';
+
+export default function ExplainTradesSection({
+  tickerTrades,
+  selectedSymbol,
+  isOpen,
+  onToggle,
+}) {
+  const sideLabel = (value) => {
+    if (value === 'LONG') return '做多';
+    if (value === 'SHORT') return '做空';
+    return value || '-';
+  };
+
+  return (
+    <div className="section">
+      <div className="section-header">
+        <h2 className="section-title">成交记录</h2>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
+          <div style={{ fontSize: 11, color: '#666666' }}>
+            {tickerTrades.length} 笔与 {selectedSymbol} 相关的交易
+          </div>
+          <button
+            onClick={onToggle}
+            style={{
+              border: '1px solid #111111',
+              background: isOpen ? '#111111' : '#ffffff',
+              color: isOpen ? '#ffffff' : '#111111',
+              padding: '7px 10px',
+              fontFamily: 'inherit',
+              fontSize: 11,
+              fontWeight: 700,
+              cursor: 'pointer'
+            }}
+          >
+            {isOpen ? '收起成交记录' : `展开成交记录 ${tickerTrades.length}`}
+          </button>
+        </div>
+      </div>
+
+      {tickerTrades.length === 0 ? (
+        <div className="empty-state">该股票暂无成交记录</div>
+      ) : !isOpen ? (
+        <div className="empty-state">成交记录默认收起，需要时再展开查看。</div>
+      ) : (
+        <div className="table-wrapper">
+          <table className="data-table">
+            <thead>
+              <tr>
+                <th>时间</th>
+                <th>方向</th>
+                <th>数量</th>
+                <th>价格</th>
+              </tr>
+            </thead>
+            <tbody>
+              {tickerTrades.slice(0, 10).map((trade, index) => (
+                <tr key={trade.id || `${trade.ticker}-${trade.timestamp}-${index}`}>
+                  <td>{formatDateTime(trade.timestamp)}</td>
+                  <td style={{ fontWeight: 700, color: trade.side === 'LONG' ? '#00C853' : trade.side === 'SHORT' ? '#FF1744' : '#000000' }}>
+                    {sideLabel(trade.side)}
+                  </td>
+                  <td>{trade.qty}</td>
+                  <td>${Number(trade.price).toFixed(2)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}