From 29cf0d70137faae6ba6f075a8ebddb86632c9daf Mon Sep 17 00:00:00 2001 From: zzlgreat Date: Thu, 11 Dec 2025 10:07:17 +0800 Subject: [PATCH] update pay ui --- .../components/MiniTimelineChart.tsx | 8 +- .../FlexScreen/components/OrderBookPanel.tsx | 55 +++++++------- .../FlexScreen/components/QuoteTile.tsx | 55 ++++++-------- .../components/FlexScreen/index.tsx | 75 +++++++++++++------ src/views/StockOverview/index.js | 1 + 5 files changed, 110 insertions(+), 84 deletions(-) diff --git a/src/views/StockOverview/components/FlexScreen/components/MiniTimelineChart.tsx b/src/views/StockOverview/components/FlexScreen/components/MiniTimelineChart.tsx index 0730b24f..a22d2a61 100644 --- a/src/views/StockOverview/components/FlexScreen/components/MiniTimelineChart.tsx +++ b/src/views/StockOverview/components/FlexScreen/components/MiniTimelineChart.tsx @@ -256,10 +256,14 @@ const MiniTimelineChart: React.FC = ({ return () => window.removeEventListener('resize', handleResize); }, []); + // 深色主题颜色 + const subTextColor = 'rgba(255, 255, 255, 0.5)'; + const accentColor = '#8b5cf6'; + if (loading) { return (
- +
); } @@ -267,7 +271,7 @@ const MiniTimelineChart: React.FC = ({ if (error || !chartData.length) { return (
- + {error || '暂无数据'}
diff --git a/src/views/StockOverview/components/FlexScreen/components/OrderBookPanel.tsx b/src/views/StockOverview/components/FlexScreen/components/OrderBookPanel.tsx index 2ad1c5fc..423037b6 100644 --- a/src/views/StockOverview/components/FlexScreen/components/OrderBookPanel.tsx +++ b/src/views/StockOverview/components/FlexScreen/components/OrderBookPanel.tsx @@ -13,7 +13,6 @@ import { Text, Button, ButtonGroup, - useColorModeValue, Tooltip, Badge, } from '@chakra-ui/react'; @@ -41,26 +40,26 @@ const formatVolume = (volume: number): string => { }; /** - * 格式化价格 + * 格式化价格 - 深色主题 */ const formatPrice = (price: number, prevClose?: number): FormattedPrice => { if (!price || price === 0) { - return { text: '-', color: 'gray.400' }; + return { text: '-', color: 'rgba(255, 255, 255, 0.4)' }; } const text = price.toFixed(2); if (!prevClose || prevClose === 0) { - return { text, color: 'gray.600' }; + return { text, color: 'rgba(255, 255, 255, 0.6)' }; } if (price > prevClose) { - return { text, color: 'red.500' }; + return { text, color: '#ff4d4d' }; } if (price < prevClose) { - return { text, color: 'green.500' }; + return { text, color: '#22c55e' }; } - return { text, color: 'gray.600' }; + return { text, color: 'rgba(255, 255, 255, 0.6)' }; }; /** OrderRow 组件 Props */ @@ -75,7 +74,7 @@ interface OrderRowProps { } /** - * 单行盘口 + * 单行盘口 - 深色主题 */ const OrderRow: React.FC = ({ label, @@ -86,15 +85,11 @@ const OrderRow: React.FC = ({ maxVolume, isLimitPrice, }) => { - const bgColor = useColorModeValue( - isBid ? 'red.50' : 'green.50', - isBid ? 'rgba(239, 68, 68, 0.1)' : 'rgba(34, 197, 94, 0.1)' - ); - const barColor = useColorModeValue( - isBid ? 'red.200' : 'green.200', - isBid ? 'rgba(239, 68, 68, 0.3)' : 'rgba(34, 197, 94, 0.3)' - ); - const limitColor = useColorModeValue('orange.500', 'orange.300'); + // 深色主题颜色 + const barColor = isBid ? 'rgba(255, 77, 77, 0.2)' : 'rgba(34, 197, 94, 0.2)'; + const limitColor = 'orange.300'; + const labelColor = 'rgba(255, 255, 255, 0.5)'; + const volumeColor = 'rgba(255, 255, 255, 0.6)'; const priceInfo = formatPrice(price, prevClose); const volumeText = formatVolume(volume); @@ -123,7 +118,7 @@ const OrderRow: React.FC = ({ /> {/* 内容 */} - + {label} @@ -142,7 +137,7 @@ const OrderRow: React.FC = ({ )} - + {volumeText} @@ -150,7 +145,7 @@ const OrderRow: React.FC = ({ }; /** - * OrderBookPanel 组件 + * OrderBookPanel 组件 - 深色主题 */ const OrderBookPanel: React.FC = ({ bidPrices = [], @@ -162,9 +157,11 @@ const OrderBookPanel: React.FC = ({ lowerLimit, defaultLevels = 5, }) => { - const borderColor = useColorModeValue('gray.200', 'gray.700'); - const buttonBg = useColorModeValue('gray.100', 'gray.700'); - const bgColor = useColorModeValue('white', '#1a1a1a'); + // 深色主题颜色 + const borderColor = 'rgba(255, 255, 255, 0.1)'; + const buttonBg = 'rgba(255, 255, 255, 0.1)'; + const bgColor = 'transparent'; + const textColor = 'rgba(255, 255, 255, 0.6)'; // 可切换显示的档位数 const maxAvailableLevels = Math.max(bidPrices.length, askPrices.length, 1); @@ -230,7 +227,7 @@ const OrderBookPanel: React.FC = ({ if (!hasData) { return ( - + 暂无盘口数据 @@ -246,14 +243,20 @@ const OrderBookPanel: React.FC = ({ @@ -273,7 +276,7 @@ const OrderBookPanel: React.FC = ({ top="50%" transform="translateY(-50%)" fontSize="2xs" - color="gray.400" + color={textColor} bg={bgColor} px={1} > @@ -287,7 +290,7 @@ const OrderBookPanel: React.FC = ({ {/* 涨跌停价信息 */} {(upperLimit || lowerLimit) && ( - + {lowerLimit && 跌停 {lowerLimit.toFixed(2)}} {upperLimit && 涨停 {upperLimit.toFixed(2)}} diff --git a/src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx b/src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx index 5e2b0767..8054f853 100644 --- a/src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx +++ b/src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx @@ -10,7 +10,6 @@ import { Text, IconButton, Tooltip, - useColorModeValue, Collapse, Badge, } from '@chakra-ui/react'; @@ -77,41 +76,27 @@ const QuoteTile: React.FC = ({ // 类型断言，确保类型安全 const quoteData = quote as Partial; - // 颜色主题 - const cardBg = useColorModeValue('white', '#1a1a1a'); - const borderColor = useColorModeValue('gray.200', '#333'); - const hoverBorderColor = useColorModeValue('purple.300', '#666'); - const textColor = useColorModeValue('gray.800', 'white'); - const subTextColor = useColorModeValue('gray.500', 'gray.400'); + // 深色主题颜色 - 与 StockOverview 保持一致 + const cardBg = 'rgba(255, 255, 255, 0.03)'; + const borderColor = 'rgba(255, 255, 255, 0.08)'; + const hoverBorderColor = '#8b5cf6'; + const textColor = 'rgba(255, 255, 255, 0.95)'; + const subTextColor = 'rgba(255, 255, 255, 0.6)'; // 涨跌色 const { price, prevClose, change, changePct, amount } = quoteData; - const priceColor = useColorModeValue( - !prevClose || price === prevClose - ? 'gray.800' - : price && price > prevClose - ? 'red.500' - : 'green.500', - !prevClose || price === prevClose - ? 'gray.200' - : price && price > prevClose - ? 'red.400' - : 'green.400' - ); + const priceColor = !prevClose || price === prevClose + ? 'rgba(255, 255, 255, 0.7)' + : price && price > prevClose + ? '#ff4d4d' + : '#22c55e'; // 涨跌幅背景色 - const changeBgColor = useColorModeValue( - !changePct || changePct === 0 - ? 'gray.100' - : changePct > 0 - ? 'red.100' - : 'green.100', - !changePct || changePct === 0 - ? 'gray.700' - : changePct > 0 - ? 'rgba(239, 68, 68, 0.2)' - : 'rgba(34, 197, 94, 0.2)' - ); + const changeBgColor = !changePct || changePct === 0 + ? 'rgba(255, 255, 255, 0.1)' + : changePct > 0 + ? 'rgba(255, 77, 77, 0.2)' + : 'rgba(34, 197, 94, 0.2)'; // 跳转到详情页 const handleNavigate = (): void => { @@ -156,9 +141,10 @@ const QuoteTile: React.FC = ({ borderRadius="lg" overflow="hidden" transition="all 0.2s" + backdropFilter="blur(10px)" _hover={{ borderColor: hoverBorderColor, - boxShadow: 'md', + boxShadow: '0 4px 20px rgba(139, 92, 246, 0.2)', }} > {/* 头部 */} @@ -227,6 +213,8 @@ const QuoteTile: React.FC = ({ icon={expanded ? : } size="xs" variant="ghost" + color={subTextColor} + _hover={{ bg: 'rgba(255, 255, 255, 0.1)', color: textColor }} aria-label={expanded ? '收起' : '展开'} onClick={(e) => { e.stopPropagation(); @@ -238,7 +226,8 @@ const QuoteTile: React.FC = ({ icon={} size="xs" variant="ghost" - colorScheme="red" + color="red.400" + _hover={{ bg: 'rgba(239, 68, 68, 0.1)' }} aria-label="移除" onClick={(e) => { e.stopPropagation(); diff --git a/src/views/StockOverview/components/FlexScreen/index.tsx b/src/views/StockOverview/components/FlexScreen/index.tsx index dfda551e..c73e1e33 100644 --- a/src/views/StockOverview/components/FlexScreen/index.tsx +++ b/src/views/StockOverview/components/FlexScreen/index.tsx @@ -27,7 +27,6 @@ import { Flex, Spacer, Icon, - useColorModeValue, useToast, Badge, Tooltip, @@ -124,13 +123,14 @@ const FlexScreen: React.FC = () => { // 面板状态 const [isCollapsed, setIsCollapsed] = useState(false); - // 颜色主题 - const cardBg = useColorModeValue('white', '#1a1a1a'); - const borderColor = useColorModeValue('gray.200', '#333'); - const textColor = useColorModeValue('gray.800', 'white'); - const subTextColor = useColorModeValue('gray.600', 'gray.400'); - const searchBg = useColorModeValue('gray.50', '#2a2a2a'); - const hoverBg = useColorModeValue('gray.100', '#333'); + // 深色主题颜色 - 与 StockOverview 保持一致 + const cardBg = 'rgba(255, 255, 255, 0.03)'; + const borderColor = 'rgba(255, 255, 255, 0.08)'; + const textColor = 'rgba(255, 255, 255, 0.95)'; + const subTextColor = 'rgba(255, 255, 255, 0.6)'; + const searchBg = 'rgba(255, 255, 255, 0.05)'; + const hoverBg = 'rgba(255, 255, 255, 0.08)'; + const accentColor = '#8b5cf6'; // 获取订阅的证券代码列表（带后缀，用于区分上证指数000001.SH和平安银行000001.SZ） const subscribedCodes = useMemo(() => { @@ -287,12 +287,18 @@ const FlexScreen: React.FC = () => { }, [connected]); return ( - + {/* 头部 */} - + 灵活屏 @@ -318,13 +324,27 @@ const FlexScreen: React.FC = () => { icon={} size="sm" variant="ghost" + color={subTextColor} + _hover={{ bg: hoverBg, color: textColor }} aria-label="设置" /> - - } onClick={resetWatchlist}> + + } + onClick={resetWatchlist} + bg="transparent" + color={textColor} + _hover={{ bg: hoverBg }} + > 重置为默认 - } onClick={clearWatchlist} color="red.500"> + } + onClick={clearWatchlist} + bg="transparent" + color="red.400" + _hover={{ bg: 'rgba(239, 68, 68, 0.1)' }} + > 清空列表 @@ -334,6 +354,8 @@ const FlexScreen: React.FC = () => { icon={isCollapsed ? : } size="sm" variant="ghost" + color={subTextColor} + _hover={{ bg: hoverBg, color: textColor }} onClick={() => setIsCollapsed(!isCollapsed)} aria-label={isCollapsed ? '展开' : '收起'} /> @@ -346,7 +368,7 @@ const FlexScreen: React.FC = () => { - + { onChange={e => setSearchQuery(e.target.value)} bg={searchBg} borderRadius="lg" + borderColor={borderColor} + color={textColor} + _placeholder={{ color: subTextColor }} + _hover={{ borderColor: accentColor }} _focus={{ - borderColor: 'purple.400', - boxShadow: '0 0 0 1px var(--chakra-colors-purple-400)', + borderColor: accentColor, + boxShadow: `0 0 0 1px ${accentColor}`, }} /> {searchQuery && ( @@ -365,6 +391,8 @@ const FlexScreen: React.FC = () => { size="sm" icon={} variant="ghost" + color={subTextColor} + _hover={{ bg: hoverBg, color: textColor }} onClick={() => { setSearchQuery(''); setShowResults(false); @@ -383,18 +411,18 @@ const FlexScreen: React.FC = () => { left={0} right={0} mt={1} - bg={cardBg} + bg="#1a1a2e" borderWidth="1px" borderColor={borderColor} borderRadius="lg" - boxShadow="lg" + boxShadow="0 8px 32px rgba(0, 0, 0, 0.5)" maxH="300px" overflowY="auto" zIndex={10} > {isSearching ? (
- +
) : searchResults.length > 0 ? ( @@ -460,10 +488,11 @@ const FlexScreen: React.FC = () => { addSecurity(item)} > {item.name} @@ -493,7 +522,7 @@ const FlexScreen: React.FC = () => { ) : (
- + 自选列表为空，请搜索添加证券
diff --git a/src/views/StockOverview/index.js b/src/views/StockOverview/index.js index 744cc7f6..dbd5e67d 100644 --- a/src/views/StockOverview/index.js +++ b/src/views/StockOverview/index.js @@ -852,6 +852,7 @@ const StockOverview = () => { minDate={tradingDays.length > 0 ? new Date(tradingDays[0]) : undefined} maxDate={tradingDays.length > 0 ? new Date(tradingDays[tradingDays.length - 1]) : undefined} label="交易日期" + isDarkMode={true} /> {selectedDate && (