update ui

src/views/Community/components/DynamicNewsDetail/StockListItem.js

@@ -21,6 +21,7 @@ import MiniKLineChart from './MiniKLineChart';
 import StockChartModal from '../../../../components/StockChart/StockChartModal';
 import CitedContent from '../../../../components/Citation/CitedContent';
 import { getChangeColor } from '../../../../utils/colorUtils';
+import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme';
 
 /**
  * 股票卡片组件
@@ -42,12 +43,12 @@ const StockListItem = ({
   isInWatchlist = false,
   onWatchlistToggle
 }) => {
-  const cardBg = useColorModeValue('white', 'gray.800');
-  const borderColor = useColorModeValue('gray.200', 'gray.700');
-  const codeColor = useColorModeValue('blue.600', 'blue.300');
-  const nameColor = useColorModeValue('gray.700', 'gray.300');
-  const descColor = useColorModeValue('gray.600', 'gray.400');
-  const dividerColor = useColorModeValue('gray.200', 'gray.600');
+  const cardBg = PROFESSIONAL_COLORS.background.card;
+  const borderColor = PROFESSIONAL_COLORS.border.default;
+  const codeColor = '#3B82F6';
+  const nameColor = PROFESSIONAL_COLORS.text.primary;
+  const descColor = PROFESSIONAL_COLORS.text.secondary;
+  const dividerColor = PROFESSIONAL_COLORS.border.default;
 
   const [isDescExpanded, setIsDescExpanded] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -195,11 +196,11 @@ const StockListItem = ({
           <VStack
             w="115px"
             borderWidth="1px"
-            borderColor={useColorModeValue('blue.100', 'blue.700')}
+            borderColor="rgba(59, 130, 246, 0.3)"
             borderRadius="md"
             px={1.5}
             py={1}
-            bg={useColorModeValue('blue.50', 'blue.900')}
+            bg="rgba(59, 130, 246, 0.1)"
             onClick={(e) => {
               e.stopPropagation();
               setIsModalOpen(true);
@@ -210,15 +211,15 @@ const StockListItem = ({
             spacing={0}
             h="fit-content"
             _hover={{
-              borderColor: useColorModeValue('blue.300', 'blue.500'),
-              boxShadow: 'md',
+              borderColor: '#3B82F6',
+              boxShadow: '0 0 10px rgba(59, 130, 246, 0.3)',
               transform: 'translateY(-1px)'
             }}
             transition="all 0.2s"
           >
             <Text
               fontSize="10px"
-              color={useColorModeValue('blue.700', 'blue.200')}
+              color="#3B82F6"
               fontWeight="semibold"
               whiteSpace="nowrap"
               mb={0.5}
@@ -237,11 +238,11 @@ const StockListItem = ({
           <VStack
             w="115px"
             borderWidth="1px"
-            borderColor={useColorModeValue('purple.100', 'purple.700')}
+            borderColor="rgba(168, 85, 247, 0.3)"
             borderRadius="md"
             px={1.5}
             py={1}
-            bg={useColorModeValue('purple.50', 'purple.900')}
+            bg="rgba(168, 85, 247, 0.1)"
             onClick={(e) => {
               e.stopPropagation();
               setIsModalOpen(true);
@@ -252,15 +253,15 @@ const StockListItem = ({
             spacing={0}
             h="fit-content"
             _hover={{
-              borderColor: useColorModeValue('purple.300', 'purple.500'),
-              boxShadow: 'md',
+              borderColor: '#A855F7',
+              boxShadow: '0 0 10px rgba(168, 85, 247, 0.3)',
               transform: 'translateY(-1px)'
             }}
             transition="all 0.2s"
           >
             <Text
               fontSize="10px"
-              color={useColorModeValue('purple.700', 'purple.200')}
+              color="#A855F7"
               fontWeight="semibold"
               whiteSpace="nowrap"
               mb={0.5}
@@ -285,8 +286,8 @@ const StockListItem = ({
                 label={isDescExpanded ? "点击收起" : "点击展开完整描述"}
                 placement="top"
                 hasArrow
-                bg="gray.600"
-                color="white"
+                bg="rgba(20, 20, 20, 0.95)"
+                color={PROFESSIONAL_COLORS.gold[500]}
                 fontSize="xs"
               >
                 <Box
@@ -297,10 +298,10 @@ const StockListItem = ({
                   cursor="pointer"
                   px={3}
                   py={2}
-                  bg={useColorModeValue('gray.50', 'gray.700')}
+                  bg={PROFESSIONAL_COLORS.background.secondary}
                   borderRadius="md"
                   _hover={{
-                    bg: useColorModeValue('gray.100', 'gray.600'),
+                    bg: PROFESSIONAL_COLORS.background.cardHover,
                   }}
                   transition="background 0.2s"
                   position="relative"
@@ -325,8 +326,8 @@ const StockListItem = ({
                 label={isDescExpanded ? "点击收起" : "点击展开完整描述"}
                 placement="top"
                 hasArrow
-                bg="gray.600"
-                color="white"
+                bg="rgba(20, 20, 20, 0.95)"
+                color={PROFESSIONAL_COLORS.gold[500]}
                 fontSize="xs"
               >
                 <Box
@@ -337,10 +338,10 @@ const StockListItem = ({
                   cursor="pointer"
                   px={3}
                   py={2}
-                  bg={useColorModeValue('gray.50', 'gray.700')}
+                  bg={PROFESSIONAL_COLORS.background.secondary}
                   borderRadius="md"
                   _hover={{
-                    bg: useColorModeValue('gray.100', 'gray.600'),
+                    bg: PROFESSIONAL_COLORS.background.cardHover,
                   }}
                   transition="background 0.2s"
                   position="relative"