vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 移除暗色模式相关代码，使用固定浅色主题

Browse Source 
- DeepAnalysisTab: 移除 useColorModeValue，使用固定颜色值
- NewsEventsTab: 移除 useColorModeValue，简化 hover 颜色
- FinancialPanorama: 移除 useColorMode/useColorModeValue
- MarketDataView: 移除 dark 主题配置，简化颜色逻辑
- StockQuoteCard: 移除 useColorModeValue，使用固定颜色

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-09 18:46:30 +08:00
parent 2dd7dd755a
commit 40f6eaced6
5 changed files with 73 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/views/Company/components/CompanyOverview/DeepAnalysisTab.js
View File

@@ -20,7 +20,6 @@ import {
Tab,
TabPanel,
Button,
useColorModeValue,
Tag,
TagLabel,
Icon,
@@ -194,7 +193,7 @@ const ScoreBar = ({ label, score, icon }) => {
// 业务结构树形图组件
const BusinessTreeItem = ({ business, depth = 0 }) => {
const bgColor = useColorModeValue("gray.50", "gray.700");
const bgColor = "gray.50";
return (
<Box
@@ -286,11 +285,8 @@ const ValueChainNodeCard = ({ node, isCompany = false, level = 0 }) => {
};
const colorScheme = getColorScheme();
const bgColor = useColorModeValue(`${colorScheme}.50`, `${colorScheme}.900`);
const borderColor = useColorModeValue(
`${colorScheme}.200`,
`${colorScheme}.600`
);
const bgColor = `${colorScheme}.50`;
const borderColor = `${colorScheme}.200`;
const getNodeTypeIcon = (type) => {
const icons = {
@@ -700,8 +696,8 @@ const KeyFactorCard = ({ factor }) => {
mixed: "yellow",
}[factor.impact_direction] || "gray";
const bgColor = useColorModeValue("white", "gray.800");
const borderColor = useColorModeValue("gray.200", "gray.600");
const bgColor = "white";
const borderColor = "gray.200";
return (
<Card bg={bgColor} borderColor={borderColor} size="sm">
@@ -769,9 +765,9 @@ const TimelineComponent = ({ events }) => {
const [selectedEvent, setSelectedEvent] = useState(null);
const { isOpen, onOpen, onClose } = useDisclosure();
// 颜色模式值需要在组件顶层调用
const positiveBgColor = useColorModeValue("red.50", "red.900");
const negativeBgColor = useColorModeValue("green.50", "green.900");
// 背景颜色
const positiveBgColor = "red.50";
const negativeBgColor = "green.50";
const handleEventClick = (event) => {
setSelectedEvent(event);
@@ -1137,10 +1133,10 @@ const DeepAnalysisTab = ({
expandedSegments,
onToggleSegment,
}) => {
const blueBg = useColorModeValue("blue.50", "blue.900");
const greenBg = useColorModeValue("green.50", "green.900");
const purpleBg = useColorModeValue("purple.50", "purple.900");
const orangeBg = useColorModeValue("orange.50", "orange.900");
const blueBg = "blue.50";
const greenBg = "green.50";
const purpleBg = "purple.50";
const orangeBg = "orange.50";
if (loading) {
return (

6
src/views/Company/components/CompanyOverview/NewsEventsTab.js
View File

@@ -18,7 +18,6 @@ import {
Tag,
Center,
Spinner,
useColorModeValue,
} from "@chakra-ui/react";
import { SearchIcon } from "@chakra-ui/icons";
import {
@@ -67,9 +66,6 @@ const NewsEventsTab = ({
onPageChange,
cardBg,
}) => {
// 颜色模式值需要在组件顶层调用
const hoverBg = useColorModeValue("gray.50", "gray.700");
// 事件类型图标映射
const getEventTypeIcon = (eventType) => {
const iconMap = {
@@ -233,7 +229,7 @@ const NewsEventsTab = ({
key={event.id || idx}
variant="outline"
_hover={{
bg: hoverBg,
bg: "gray.50",
shadow: "md",
borderColor: "blue.300",
}}

27
src/views/Company/components/FinancialPanorama/index.js
View File

@@ -35,7 +35,6 @@ import {
VStack,
HStack,
Divider,
useColorModeValue,
Select,
Button,
Tooltip,
@@ -60,7 +59,6 @@ import {
ButtonGroup,
Stack,
Collapse,
useColorMode,
} from '@chakra-ui/react';
import {
ChevronDownIcon,
@@ -101,14 +99,13 @@ const FinancialPanorama = ({ stockCode: propStockCode }) => {
const [modalContent, setModalContent] = useState(null);
const [expandedRows, setExpandedRows] = useState({});
const toast = useToast();
const { colorMode } = useColorMode();
// 颜色配置（中国市场：红涨绿跌）
const bgColor = useColorModeValue('white', 'gray.800');
const borderColor = useColorModeValue('gray.200', 'gray.600');
const hoverBg = useColorModeValue('gray.50', 'gray.700');
const positiveColor = useColorModeValue('red.500', 'red.400'); // 红涨
const negativeColor = useColorModeValue('green.500', 'green.400'); // 绿跌
const bgColor = 'white';
const borderColor = 'gray.200';
const hoverBg = 'gray.50';
const positiveColor = 'red.500'; // 红涨
const negativeColor = 'green.500'; // 绿跌
// 加载所有财务数据
const loadFinancialData = async () => {
@@ -492,7 +489,7 @@ const FinancialPanorama = ({ stockCode: propStockCode }) => {
<React.Fragment key={section.key}>
{section.title !== '资产总计' && section.title !== '负债合计' && (
<Tr
bg={useColorModeValue('gray.50', 'gray.700')}
bg="gray.50"
cursor="pointer"
onClick={() => toggleSection(section.key)}
>
@@ -515,7 +512,7 @@ const FinancialPanorama = ({ stockCode: propStockCode }) => {
key={metric.key}
_hover={{ bg: hoverBg, cursor: 'pointer' }}
onClick={() => showMetricChart(metric.name, metric.key, balanceSheet, metric.path)}
bg={metric.isTotal ? useColorModeValue('blue.50', 'blue.900') : 'transparent'}
bg={metric.isTotal ? 'blue.50' : 'transparent'}
>
<Td position="sticky" left={0} bg={bgColor} zIndex={1}>
<HStack spacing={2}>
@@ -733,7 +730,7 @@ const FinancialPanorama = ({ stockCode: propStockCode }) => {
const renderSection = (section) => (
<React.Fragment key={section.key}>
<Tr
bg={useColorModeValue('gray.50', 'gray.700')}
bg="gray.50"
cursor="pointer"
onClick={() => toggleSection(section.key)}
>
@@ -755,8 +752,8 @@ const FinancialPanorama = ({ stockCode: propStockCode }) => {
key={metric.key}
_hover={{ bg: hoverBg, cursor: 'pointer' }}
onClick={() => showMetricChart(metric.name, metric.key, incomeStatement, metric.path)}
bg={metric.isTotal ? useColorModeValue('blue.50', 'blue.900') :
metric.isSubtotal ? useColorModeValue('orange.50', 'orange.900') : 'transparent'}
bg={metric.isTotal ? 'blue.50' :
metric.isSubtotal ? 'orange.50' : 'transparent'}
>
<Td position="sticky" left={0} bg={bgColor} zIndex={1}>
<HStack spacing={2}>
@@ -1268,7 +1265,7 @@ const FinancialPanorama = ({ stockCode: propStockCode }) => {
{ label: '资产负债率', value: financialMetrics[0].solvency?.asset_liability_ratio, format: 'percent' },
{ label: '研发费用率', value: financialMetrics[0].expense_ratios?.rd_expense_ratio, format: 'percent' },
].map((item, idx) => (
<Box key={idx} p={3} borderRadius="md" bg={useColorModeValue('gray.50', 'gray.700')}>
<Box key={idx} p={3} borderRadius="md" bg="gray.50">
<Text fontSize="xs" color="gray.500">{item.label}</Text>
<Text fontSize="lg" fontWeight="bold">
{item.format === 'percent' ?

108
src/views/Company/components/MarketDataView/index.js
View File

@@ -36,7 +36,6 @@ import {
VStack,
HStack,
Divider,
useColorModeValue,
Select,
Button,
Tooltip,
@@ -60,7 +59,6 @@ import {
GridItem,
ButtonGroup,
Stack,
useColorMode,
Icon,
InputGroup,
InputLeftElement,
@@ -121,25 +119,6 @@ const themes = {
border: '#CBD5E0',
chartBg: '#FFFFFF',
},
dark: {
// 夜间模式 - 黑+金
primary: '#FFD700',
primaryDark: '#FFA500',
secondary: '#1A1A1A',
secondaryDark: '#000000',
success: '#FF4444', // 涨 - 红色
danger: '#00C851', // 跌 - 绿色
warning: '#FFA500',
info: '#00BFFF',
bgMain: '#0A0A0A',
bgCard: '#141414',
bgDark: '#000000',
textPrimary: '#FFFFFF',
textSecondary: '#FFD700',
textMuted: '#999999',
border: '#333333',
chartBg: '#141414',
}
};
// API服务
@@ -236,9 +215,9 @@ const ThemedCard = ({ children, theme, ...props }) => {
};
// Markdown渲染组件
const MarkdownRenderer = ({ children, theme, colorMode }) => {
const MarkdownRenderer = ({ children, theme }) => {
return (
<Box
<Box
color={theme.textPrimary}
sx={{
'& h1, & h2, & h3, & h4, & h5, & h6': {
@@ -269,7 +248,7 @@ const MarkdownRenderer = ({ children, theme, colorMode }) => {
fontStyle: 'italic'
},
'& code': {
backgroundColor: colorMode === 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.1)',
backgroundColor: 'rgba(0,0,0,0.05)',
padding: '2px 4px',
borderRadius: '4px',
fontSize: '0.9em'
@@ -290,13 +269,12 @@ const MarkdownRenderer = ({ children, theme, colorMode }) => {
// 主组件
const MarketDataView = ({ stockCode: propStockCode }) => {
const { colorMode } = useColorMode();
const toast = useToast();
const { isOpen, onOpen, onClose } = useDisclosure();
const [modalContent, setModalContent] = useState(null);
// 获取当前主题
const theme = colorMode === 'light' ? themes.light : themes.dark;
const theme = themes.light;
// 状态管理
const [stockCode, setStockCode] = useState(propStockCode || '600000');
@@ -464,7 +442,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
opacity: 0.8
}
},
backgroundColor: colorMode === 'light' ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.8)',
backgroundColor: 'rgba(255,255,255,0.9)',
borderColor: theme.primary,
borderWidth: 1,
textStyle: {
@@ -682,7 +660,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' },
backgroundColor: colorMode === 'light' ? 'rgba(255,255,255,0.95)' : 'rgba(0,0,0,0.85)',
backgroundColor: 'rgba(255,255,255,0.95)',
borderColor: theme.primary,
borderWidth: 1,
textStyle: {
@@ -889,7 +867,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
},
tooltip: {
trigger: 'axis',
backgroundColor: colorMode === 'light' ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.8)',
backgroundColor: 'rgba(255,255,255,0.9)',
borderColor: theme.primary,
borderWidth: 1,
textStyle: {
@@ -1022,7 +1000,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
},
tooltip: {
trigger: 'axis',
backgroundColor: colorMode === 'light' ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.8)',
backgroundColor: 'rgba(255,255,255,0.9)',
borderColor: theme.primary,
borderWidth: 1,
textStyle: {
@@ -1130,7 +1108,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
<Heading size="xl" color={theme.textSecondary}>
{summary.stock_name}
</Heading>
<Badge colorScheme={colorMode === 'light' ? 'blue' : 'yellow'} fontSize="lg">
<Badge colorScheme={'blue'} fontSize="lg">
{summary.stock_code}
</Badge>
</HStack>
@@ -1236,7 +1214,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
) : (
<Tabs
variant="soft-rounded"
colorScheme={colorMode === 'light' ? 'blue' : 'yellow'}
colorScheme={'blue'}
index={activeTab}
onChange={setActiveTab}
>
@@ -1249,31 +1227,31 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
>
<HStack justify="space-between" align="center" spacing={4}>
<TabList overflowX="auto" border="none" flex="1">
<Tab color={theme.textMuted} _selected={{ color: colorMode === 'light' ? 'white' : theme.secondary, bg: theme.primary }} fontSize="sm" px={3}>
<Tab color={theme.textMuted} _selected={{ color: 'white', bg: theme.primary }} fontSize="sm" px={3}>
<HStack spacing={1}>
<Icon as={ChevronUpIcon} boxSize={4} />
<Text>交易数据</Text>
</HStack>
</Tab>
<Tab color={theme.textMuted} _selected={{ color: colorMode === 'light' ? 'white' : theme.secondary, bg: theme.primary }} fontSize="sm" px={3}>
<Tab color={theme.textMuted} _selected={{ color: 'white', bg: theme.primary }} fontSize="sm" px={3}>
<HStack spacing={1}>
<Icon as={UnlockIcon} boxSize={4} />
<Text>融资融券</Text>
</HStack>
</Tab>
<Tab color={theme.textMuted} _selected={{ color: colorMode === 'light' ? 'white' : theme.secondary, bg: theme.primary }} fontSize="sm" px={3}>
<Tab color={theme.textMuted} _selected={{ color: 'white', bg: theme.primary }} fontSize="sm" px={3}>
<HStack spacing={1}>
<Icon as={ArrowUpIcon} boxSize={4} />
<Text>大宗交易</Text>
</HStack>
</Tab>
<Tab color={theme.textMuted} _selected={{ color: colorMode === 'light' ? 'white' : theme.secondary, bg: theme.primary }} fontSize="sm" px={3}>
<Tab color={theme.textMuted} _selected={{ color: 'white', bg: theme.primary }} fontSize="sm" px={3}>
<HStack spacing={1}>
<Icon as={StarIcon} boxSize={4} />
<Text>龙虎榜</Text>
</HStack>
</Tab>
<Tab color={theme.textMuted} _selected={{ color: colorMode === 'light' ? 'white' : theme.secondary, bg: theme.primary }} fontSize="sm" px={3}>
<Tab color={theme.textMuted} _selected={{ color: 'white', bg: theme.primary }} fontSize="sm" px={3}>
<HStack spacing={1}>
<Icon as={LockIcon} boxSize={4} />
<Text>股权质押</Text>
@@ -1301,7 +1279,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
<Button
leftIcon={<RepeatIcon />}
variant="outline"
colorScheme={colorMode === 'light' ? 'blue' : 'yellow'}
colorScheme={'blue'}
onClick={loadMarketData}
isLoading={loading}
size="sm"
@@ -1323,7 +1301,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
<ReactECharts
option={getKLineOption()}
style={{ height: '100%', width: '100%' }}
theme={colorMode === 'light' ? 'light' : 'dark'}
theme={'light'}
onEvents={{
'click': (params) => {
if (params.seriesName === '涨幅分析' && params.data) {
@@ -1343,7 +1321,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
</Box>
{analysis.main_business && (
<Box p={4} bg={colorMode === 'light' ? 'gray.50' : 'gray.900'} borderRadius="md">
<Box p={4} bg={'gray.50'} borderRadius="md">
<Heading size="sm" mb={2} color={theme.primary}>主营业务</Heading>
<Text color={theme.textPrimary}>{analysis.main_business}</Text>
</Box>
@@ -1351,18 +1329,18 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
{analysis.rise_reason_detail && (
<Box p={4} bg={colorMode === 'light' ? 'purple.50' : 'purple.900'} borderRadius="md">
<Box p={4} bg={'purple.50'} borderRadius="md">
<Heading size="sm" mb={2} color={theme.primary}>详细分析</Heading>
<MarkdownRenderer theme={theme} colorMode={colorMode}>
<MarkdownRenderer theme={theme}>
{analysis.rise_reason_detail}
</MarkdownRenderer>
</Box>
)}
{analysis.announcements && analysis.announcements !== '[]' && (
<Box p={4} bg={colorMode === 'light' ? 'orange.50' : 'orange.900'} borderRadius="md">
<Box p={4} bg={'orange.50'} borderRadius="md">
<Heading size="sm" mb={2} color={theme.primary}>相关公告</Heading>
<MarkdownRenderer theme={theme} colorMode={colorMode}>
<MarkdownRenderer theme={theme}>
{analysis.announcements}
</MarkdownRenderer>
</Box>
@@ -1370,7 +1348,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
{/* 研报引用展示 */}
{analysis.verification_reports && analysis.verification_reports.length > 0 && (
<Box p={4} bg={colorMode === 'light' ? 'blue.50' : 'blue.900'} borderRadius="md">
<Box p={4} bg={'blue.50'} borderRadius="md">
<Heading size="sm" mb={3} color={theme.primary}>
<HStack spacing={2}>
<Icon as={ExternalLinkIcon} />
@@ -1382,7 +1360,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
<Box
key={reportIdx}
p={3}
bg={colorMode === 'light' ? 'white' : 'gray.800'}
bg={'white'}
borderRadius="md"
border="1px solid"
borderColor={theme.border}
@@ -1428,7 +1406,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
{report.verification_item && (
<Box
p={2}
bg={colorMode === 'light' ? 'yellow.50' : 'yellow.900'}
bg={'yellow.50'}
borderRadius="sm"
mb={2}
>
@@ -1479,7 +1457,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
当日分钟频数据
</Heading>
{minuteData && minuteData.trade_date && (
<Badge colorScheme={colorMode === 'light' ? 'blue' : 'yellow'} fontSize="xs">
<Badge colorScheme={'blue'} fontSize="xs">
{minuteData.trade_date}
</Badge>
)}
@@ -1488,7 +1466,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
leftIcon={<RepeatIcon />}
size="sm"
variant="outline"
colorScheme={colorMode === 'light' ? 'blue' : 'yellow'}
colorScheme={'blue'}
onClick={loadMinuteData}
isLoading={minuteLoading}
loadingText="获取中"
@@ -1520,7 +1498,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
<ReactECharts
option={getMinuteKLineOption()}
style={{ height: '100%', width: '100%' }}
theme={colorMode === 'light' ? 'light' : 'dark'}
theme={'light'}
/>
</Box>
@@ -1592,7 +1570,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
{/* 成交量分析 */}
<Box
p={4}
bg={colorMode === 'light' ? theme.bgDark : 'rgba(255, 215, 0, 0.05)'}
bg={theme.bgDark}
borderRadius="lg"
border="1px solid"
borderColor={theme.border}
@@ -1687,7 +1665,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
</Thead>
<Tbody>
{tradeData.slice(-10).reverse().map((item, idx) => (
<Tr key={idx} _hover={{ bg: colorMode === 'light' ? theme.bgDark : 'rgba(255, 215, 0, 0.1)' }}>
<Tr key={idx} _hover={{ bg: theme.bgDark }}>
<Td color={theme.textPrimary}>{item.date}</Td>
<Td isNumeric color={theme.textPrimary}>{item.open}</Td>
<Td isNumeric color={theme.textPrimary}>{item.high}</Td>
@@ -1718,7 +1696,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
<ReactECharts
option={getFundingOption()}
style={{ height: '100%', width: '100%' }}
theme={colorMode === 'light' ? 'light' : 'dark'}
theme={'light'}
/>
</Box>
)}
@@ -1735,7 +1713,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
<CardBody>
<VStack spacing={3} align="stretch">
{fundingData.slice(-5).reverse().map((item, idx) => (
<Box key={idx} p={3} bg={colorMode === 'light' ? 'rgba(255, 68, 68, 0.05)' : 'rgba(255, 68, 68, 0.1)'} borderRadius="md">
<Box key={idx} p={3} bg={'rgba(255, 68, 68, 0.05)'} borderRadius="md">
<HStack justify="space-between">
<Text color={theme.textMuted}>{item.date}</Text>
<VStack align="end" spacing={0}>
@@ -1762,7 +1740,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
<CardBody>
<VStack spacing={3} align="stretch">
{fundingData.slice(-5).reverse().map((item, idx) => (
<Box key={idx} p={3} bg={colorMode === 'light' ? 'rgba(0, 200, 81, 0.05)' : 'rgba(0, 200, 81, 0.1)'} borderRadius="md">
<Box key={idx} p={3} bg={'rgba(0, 200, 81, 0.05)'} borderRadius="md">
<HStack justify="space-between">
<Text color={theme.textMuted}>{item.date}</Text>
<VStack align="end" spacing={0}>
@@ -1798,7 +1776,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
<Box
key={idx}
p={4}
bg={colorMode === 'light' ? theme.bgDark : 'rgba(255, 215, 0, 0.05)'}
bg={theme.bgDark}
borderRadius="lg"
border="1px solid"
borderColor={theme.border}
@@ -1808,7 +1786,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
{dayStats.date}
</Text>
<HStack spacing={4}>
<Badge colorScheme={colorMode === 'light' ? 'blue' : 'yellow'} fontSize="md">
<Badge colorScheme={'blue'} fontSize="md">
交易笔数: {dayStats.count}
</Badge>
<Badge colorScheme="green" fontSize="md">
@@ -1838,7 +1816,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
</Thead>
<Tbody>
{dayStats.deals.map((deal, i) => (
<Tr key={i} _hover={{ bg: colorMode === 'light' ? 'rgba(43, 108, 176, 0.05)' : 'rgba(255, 215, 0, 0.1)' }}>
<Tr key={i} _hover={{ bg: 'rgba(43, 108, 176, 0.05)' }}>
<Td color={theme.textPrimary} fontSize="xs" maxW="200px" isTruncated>
<Tooltip label={deal.buyer_dept || '-'} placement="top">
<Text>{deal.buyer_dept || '-'}</Text>
@@ -1891,7 +1869,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
<Box
key={idx}
p={4}
bg={colorMode === 'light' ? theme.bgDark : 'rgba(255, 215, 0, 0.05)'}
bg={theme.bgDark}
borderRadius="lg"
border="1px solid"
borderColor={theme.border}
@@ -1925,7 +1903,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
key={i}
justify="space-between"
p={2}
bg={colorMode === 'light' ? 'rgba(255, 68, 68, 0.05)' : 'rgba(255, 68, 68, 0.1)'}
bg={'rgba(255, 68, 68, 0.05)'}
borderRadius="md"
>
<Text fontSize="sm" color={theme.textPrimary} isTruncated maxW="70%">
@@ -1953,7 +1931,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
key={i}
justify="space-between"
p={2}
bg={colorMode === 'light' ? 'rgba(0, 200, 81, 0.05)' : 'rgba(0, 200, 81, 0.1)'}
bg={'rgba(0, 200, 81, 0.05)'}
borderRadius="md"
>
<Text fontSize="sm" color={theme.textPrimary} isTruncated maxW="70%">
@@ -1975,7 +1953,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
<HStack mt={3} spacing={2}>
<Text fontSize="sm" color={theme.textMuted}>类型:</Text>
{dayData.info_types && dayData.info_types.map((type, i) => (
<Badge key={i} colorScheme={colorMode === 'light' ? 'blue' : 'yellow'} fontSize="xs">
<Badge key={i} colorScheme={'blue'} fontSize="xs">
{type}
</Badge>
))}
@@ -2002,7 +1980,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
<ReactECharts
option={getPledgeOption()}
style={{ height: '100%', width: '100%' }}
theme={colorMode === 'light' ? 'light' : 'dark'}
theme={'light'}
/>
</Box>
)}
@@ -2032,7 +2010,7 @@ const MarketDataView = ({ stockCode: propStockCode }) => {
<Tbody>
{Array.isArray(pledgeData) && pledgeData.length > 0 ? (
pledgeData.map((item, idx) => (
<Tr key={idx} _hover={{ bg: colorMode === 'light' ? theme.bgDark : 'rgba(255, 215, 0, 0.1)' }}>
<Tr key={idx} _hover={{ bg: theme.bgDark }}>
<Td color={theme.textPrimary}>{item.end_date}</Td>
<Td isNumeric color={theme.textPrimary}>{formatUtils.formatNumber(item.unrestricted_pledge, 0)}</Td>
<Td isNumeric color={theme.textPrimary}>{formatUtils.formatNumber(item.restricted_pledge, 0)}</Td>

11
src/views/Company/components/StockQuoteCard/index.tsx
View File

@@ -16,7 +16,6 @@ import {
Badge,
Progress,
Skeleton,
useColorModeValue,
} from '@chakra-ui/react';
import type { StockQuoteCardProps } from './types';
@@ -53,11 +52,11 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
isLoading = false,
}) => {
// 颜色配置
const cardBg = useColorModeValue('white', 'gray.800');
const borderColor = useColorModeValue('gray.200', 'gray.700');
const labelColor = useColorModeValue('gray.500', 'gray.400');
const valueColor = useColorModeValue('gray.800', 'gray.100');
const sectionTitleColor = useColorModeValue('gray.600', 'gray.300');
const cardBg = 'white';
const borderColor = 'gray.200';
const labelColor = 'gray.500';
const valueColor = 'gray.800';
const sectionTitleColor = 'gray.600';
// 涨跌颜色
const priceColor = data.changePercent >= 0 ? 'green.500' : 'red.500';