From 9c6c1fce618d5e1dcf8750c6623580c95140bda7 Mon Sep 17 00:00:00 2001
From: shy3130 <415333856@qq.com>
Date: Fri, 10 Jul 2026 15:18:40 +0800
Subject: [PATCH] =?UTF-8?q?fix(watchlist):=20=E6=94=AF=E6=8C=81=E9=87=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=85=A8=E9=83=A8=E7=AD=9B=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/Watchlist.tsx | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/Watchlist.tsx b/frontend/src/pages/Watchlist.tsx
index 213a185..e46d06c 100644
--- a/frontend/src/pages/Watchlist.tsx
+++ b/frontend/src/pages/Watchlist.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { motion, AnimatePresence } from 'framer-motion'
-import { Trash2, RefreshCw, Star, X, Search, LayoutGrid, List, Settings2, Plus, Check, Filter, Eye, EyeOff, Minus, ChevronsUp, Clock } from 'lucide-react'
+import { Trash2, RefreshCw, Star, X, Search, LayoutGrid, List, Settings2, Plus, Check, Filter, Eye, EyeOff, Minus, ChevronsUp, Clock, RotateCcw } from 'lucide-react'
 import { api, type KlineRow, type MinuteKlineRow } from '@/lib/api'
 import { QK } from '@/lib/queryKeys'
 import { storage } from '@/lib/storage'
@@ -754,7 +754,10 @@ export function Watchlist() {
     })
   }, [])
 
-  const clearFilters = useCallback(() => setFilters({}), [])
+  const resetAllFilters = useCallback(() => {
+    setFilters({})
+    persistBoardFilter(new Set(BOARDS))
+  }, [persistBoardFilter])
 
   // 可筛选的内置列
   const filterableBuiltinCols = useMemo(
@@ -808,6 +811,8 @@ export function Watchlist() {
   }, [rows, filters, columns, boardFilter])
 
   const activeFilterCount = Object.values(filters).filter(v => v.min || v.max || v.text).length
+  const hasBoardFilter = boardFilter.size > 0 && boardFilter.size < BOARDS.length
+  const hasActiveFilters = activeFilterCount > 0 || hasBoardFilter
 
   // 排序（复用共享三态排序 hook）
   const { sort, toggle: handleSortToggle, sortRows } = useTableSort()
@@ -872,11 +877,11 @@ export function Watchlist() {
         }
         right={
           <div className="flex items-center gap-2">
-            {/* 筛选 / 搜索 */}
+            {/* 筛选 / 重置 / 搜索 */}
             <button
               onClick={() => setFilterOpen(v => !v)}
               className={`inline-flex items-center justify-center h-8 w-8 rounded-btn transition-colors duration-150 ease-smooth ${
-                filterOpen || activeFilterCount > 0
+                filterOpen || hasActiveFilters
                   ? 'bg-accent/15 text-accent hover:bg-accent/25'
                   : 'bg-elevated text-secondary hover:bg-elevated/80'
               }`}
@@ -884,6 +889,16 @@ export function Watchlist() {
             >
               <Filter className="h-4 w-4" />
             </button>
+            {hasActiveFilters && (
+              <button
+                onClick={resetAllFilters}
+                className="inline-flex items-center justify-center h-8 w-8 rounded-btn bg-elevated text-secondary hover:bg-danger/10 hover:text-danger transition-colors duration-150 ease-smooth"
+                title="重置全部筛选"
+                aria-label="重置全部筛选"
+              >
+                <RotateCcw className="h-4 w-4" />
+              </button>
+            )}
             <StockSearchBox
               onPreview={(sym, name) => { setPreviewSymbol(sym); setPreviewName(name) }}
               existingSymbols={allSymbols as string[]}
@@ -995,9 +1010,9 @@ export function Watchlist() {
               </div>
             )
           })}
-          {activeFilterCount > 0 && (
-            <button onClick={clearFilters} className="mt-1 text-[10px] text-danger hover:text-danger/80 transition-colors">
-              清除全部筛选
+          {hasActiveFilters && (
+            <button onClick={resetAllFilters} className="mt-1 text-[10px] text-danger hover:text-danger/80 transition-colors">
+              重置全部筛选
             </button>
           )}
         </div>
@@ -1215,7 +1230,7 @@ export function Watchlist() {
             />
           ) : (
             <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-3">
-              {rows.map((r: any) => (
+              {sortedRows.map((r: any) => (
                 <StockCard
                   key={r.symbol}
                   r={r}