v1.2.83 - 我的行情页面搜索和排序功能修复

frontend/src/pages/List.jsx

@@ -19,6 +19,9 @@ export default function List() {
   const [page, setPage] = useState(1)
   const [pagination, setPagination] = useState({ total: 0, pages: 1 })
   const [activeTab, setActiveTab] = useState('collections') // collections-藏品, deals-行情
+  const [dealSearch, setDealSearch] = useState('')
+  const [dealSortField, setDealSortField] = useState('created_at')
+  const [dealSortOrder, setDealSortOrder] = useState('desc')
   const [myDeals, setMyDeals] = useState([])
   const [dealsLoading, setDealsLoading] = useState(false)
 
@@ -95,6 +98,26 @@ export default function List() {
     }
   }, [activeTab])
 
+  // 行情过滤和排序
+  const filteredDeals = myDeals.filter(deal => {
+    if (!dealSearch) return true
+    const s = dealSearch.toLowerCase().trim()
+    const fields = [deal.title, deal.content, deal.category, deal.packaging, deal.grading_company, deal.grading_score, deal.deal_no, deal.seller, deal.platform, deal.buyer, deal.deal_price?.toString(), deal.deal_date].filter(v => v).map(v => v.toString().toLowerCase())
+    return fields.some(f => f.includes(s))
+  }).sort((a, b) => {
+    let aVal = a[dealSortField] || ''
+    let bVal = b[dealSortField] || ''
+    if (dealSortField === 'created_at') {
+      aVal = new Date(a.created_at).getTime()
+      bVal = new Date(b.created_at).getTime()
+    } else if (dealSortField === 'deal_price') {
+      aVal = a.deal_price || 0
+      bVal = b.deal_price || 0
+    }
+    if (dealSortOrder === 'asc') return aVal > bVal ? 1 : -1
+    return aVal < bVal ? 1 : -1
+  })
+
   const fetchCollections = async () => {
     setLoading(true)
     const token = localStorage.getItem('token')
@@ -527,6 +550,8 @@ export default function List() {
           </div>
         )}
         
+        {activeTab === 'collections' && (
+        <>
         {/* 搜索框 - 全字段搜索 */}
         <div style={{ position: 'relative', marginBottom: '16px' }}>
           <input type="text" 
@@ -602,6 +627,8 @@ export default function List() {
             </div>
           ))}
         </div>
+        </>
+        )}
 
         {/* 分页组件 - 仅在藏品tab下显示 */}
         {activeTab === 'collections' && pagination.pages > 1 && (
@@ -624,16 +651,57 @@ export default function List() {
         {/* 行情tab内容 */}
         {activeTab === 'deals' && (
           <div>
+            {/* 行情搜索和排序 */}
+            <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
+              <input type="text" 
+                placeholder="🔍 搜索行情..." 
+                value={dealSearch}
+                onChange={e => setDealSearch(e.target.value)}
+                style={{ 
+                  flex: 1,
+                  background: 'rgba(255,255,255,0.05)', 
+                  border: '1px solid rgba(255,255,255,0.1)', 
+                  color: '#fff', 
+                  padding: '8px 12px', 
+                  borderRadius: '8px',
+                  fontSize: '14px',
+                  outline: 'none'
+                }} 
+              />
+              <select 
+                value={dealSortField + '-' + dealSortOrder}
+                onChange={e => {
+                  const [field, order] = e.target.value.split('-')
+                  setDealSortField(field)
+                  setDealSortOrder(order)
+                }}
+                style={{
+                  background: 'rgba(255,255,255,0.1)',
+                  border: '1px solid rgba(255,255,255,0.2)',
+                  color: '#fff',
+                  padding: '8px 12px',
+                  borderRadius: '8px',
+                  fontSize: '14px',
+                  cursor: 'pointer'
+                }}
+              >
+                <option value="created_at-desc">最新</option>
+                <option value="created_at-asc">最早</option>
+                <option value="deal_price-desc">价格高</option>
+                <option value="deal_price-asc">价格低</option>
+              </select>
+            </div>
+
             {dealsLoading ? (
               <div style={{ textAlign: 'center', padding: '60px', color: '#64748b' }}>加载中...</div>
-            ) : myDeals.length === 0 ? (
+            ) : filteredDeals.length === 0 ? (
               <div style={{ textAlign: 'center', padding: '60px 0' }}>
                 <div style={{ fontSize: '50px', opacity: 0.3 }}>📊</div>
-                <div style={{ color: '#64748b', marginTop: '16px' }}>暂无行情记录</div>
+                <div style={{ color: '#64748b', marginTop: '16px' }}>{dealSearch ? '没有匹配的行情' : '暂无行情记录'}</div>
               </div>
             ) : (
               <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-                {myDeals.map(deal => (
+                {filteredDeals.map(deal => (
                   <DealListItem key={deal.id} deal={deal} onRefresh={fetchMyDeals} />
                 ))}
               </div>