fix(StockQuoteCard): 优化对比股票输入框样式和功能

- theme.ts: 新增 textPlaceholder 颜色配置,降低透明度避免过亮
- CompareStockInput: placeholder 改为「请输入股票代码」
- CompareStockInput: 使用主题配置的 placeholder 颜色
- CompareStockInput: 添加 loadAllStocks 确保模糊搜索数据加载

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-26 13:32:41 +08:00
parent 0f72cc633d
commit 8cf9465412
2 changed files with 16 additions and 4 deletions

View File

@@ -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<CompareStockInputProps> = ({
const [showDropdown, setShowDropdown] = useState(false);
const [selectedStock, setSelectedStock] = useState<Stock | null>(null);
const containerRef = useRef<HTMLDivElement>(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<CompareStockInputProps> = ({
<Search size={12} color={textColor} />
</InputLeftElement>
<Input
placeholder="对比股票"
placeholder="请输入股票代码"
value={inputValue}
onChange={(e) => {
setInputValue(e.target.value);
@@ -121,7 +131,7 @@ const CompareStockInput: React.FC<CompareStockInputProps> = ({
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}`,

View File

@@ -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)',