diff --git a/src/views/Company/components/StockQuoteCard/components/CompareStockInput.tsx b/src/views/Company/components/StockQuoteCard/components/CompareStockInput.tsx index d77ddfd1..e9b93f52 100644 --- a/src/views/Company/components/StockQuoteCard/components/CompareStockInput.tsx +++ b/src/views/Company/components/StockQuoteCard/components/CompareStockInput.tsx @@ -4,7 +4,7 @@ */ import React, { useState, useEffect, useRef } from 'react'; -import { useSelector } from 'react-redux'; +import { useSelector, useDispatch } from 'react-redux'; import { Box, HStack, @@ -18,6 +18,8 @@ import { } from '@chakra-ui/react'; import { BarChart2, Search } from 'lucide-react'; import { useStockSearch, type Stock } from '../../../hooks/useStockSearch'; +import { loadAllStocks } from '@store/slices/stockSlice'; +import { DEEP_SPACE_THEME as T } from './theme'; interface CompareStockInputProps { onCompare: (stockCode: string) => void; @@ -40,13 +42,21 @@ const CompareStockInput: React.FC = ({ const [showDropdown, setShowDropdown] = useState(false); const [selectedStock, setSelectedStock] = useState(null); const containerRef = useRef(null); + const dispatch = useDispatch(); // 从 Redux 获取全部股票列表 const allStocks = useSelector((state: RootState) => state.stock.allStocks); + // 确保股票列表已加载(用于模糊搜索) + useEffect(() => { + if (!allStocks || allStocks.length === 0) { + dispatch(loadAllStocks() as any); + } + }, [dispatch, allStocks]); + // 黑金主题颜色(提高对比度) const borderColor = '#E8C14D'; - const textColor = 'rgba(245, 240, 225, 0.95)'; + const textColor = T.textSecondary; const goldColor = '#F4D03F'; const bgColor = '#1A202C'; @@ -108,7 +118,7 @@ const CompareStockInput: React.FC = ({ { setInputValue(e.target.value); @@ -121,7 +131,7 @@ const CompareStockInput: React.FC = ({ fontSize="sm" borderColor={borderColor} bg="transparent" - _placeholder={{ color: textColor, fontSize: 'sm' }} + _placeholder={{ color: T.textPlaceholder, fontSize: 'sm' }} _focus={{ borderColor: goldColor, boxShadow: `0 0 0 1px ${goldColor}`, diff --git a/src/views/Company/components/StockQuoteCard/components/theme.ts b/src/views/Company/components/StockQuoteCard/components/theme.ts index 51d77cb3..ede95edd 100644 --- a/src/views/Company/components/StockQuoteCard/components/theme.ts +++ b/src/views/Company/components/StockQuoteCard/components/theme.ts @@ -61,6 +61,8 @@ export const DEEP_SPACE_THEME = { textSecondary: 'rgba(245, 240, 225, 0.95)', // 标签文字(柔和白色) textMuted: 'rgba(235, 230, 215, 0.85)', + // 占位符文字(低透明度,避免过亮) + textPlaceholder: 'rgba(235, 230, 215, 0.45)', // 纯白文字 textWhite: 'rgba(255, 255, 255, 0.98)', textWhiteMuted: 'rgba(255, 255, 255, 0.8)',