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:
@@ -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}`,
|
||||
|
||||
@@ -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)',
|
||||
|
||||
Reference in New Issue
Block a user