From ad8ff500013c85211af83359327c9c3cfeeeacff Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Fri, 14 Nov 2025 08:09:18 +0800
Subject: [PATCH] update ui

---
 .../DynamicNewsDetail/StockListItem.js        | 49 ++++++++++---------
 .../components/HistoricalEvents.js            |  9 ++--
 .../EventDetail/components/RelatedConcepts.js | 39 +++++++++++----
 3 files changed, 59 insertions(+), 38 deletions(-)

diff --git a/src/views/Community/components/DynamicNewsDetail/StockListItem.js b/src/views/Community/components/DynamicNewsDetail/StockListItem.js
index c85b3c83..d10adfb5 100644
--- a/src/views/Community/components/DynamicNewsDetail/StockListItem.js
+++ b/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"
diff --git a/src/views/EventDetail/components/HistoricalEvents.js b/src/views/EventDetail/components/HistoricalEvents.js
index 868c30b6..48cc4204 100644
--- a/src/views/EventDetail/components/HistoricalEvents.js
+++ b/src/views/EventDetail/components/HistoricalEvents.js
@@ -32,6 +32,7 @@ import {
 import { stockService } from '../../../services/eventService';
 import { logger } from '../../../utils/logger';
 import CitedContent from '../../../components/Citation/CitedContent';
+import { PROFESSIONAL_COLORS } from '../../../constants/professionalTheme';
 
 const HistoricalEvents = ({
     events = [],
@@ -48,10 +49,10 @@ const HistoricalEvents = ({
     const [loadingStocks, setLoadingStocks] = useState({});
 
     // 颜色主题
-    const cardBg = useColorModeValue('white', 'gray.800');
-    const borderColor = useColorModeValue('gray.200', 'gray.600');
-    const textSecondary = useColorModeValue('gray.600', 'gray.400');
-    const nameColor = useColorModeValue('gray.700', 'gray.300');
+    const cardBg = PROFESSIONAL_COLORS.background.card;
+    const borderColor = PROFESSIONAL_COLORS.border.default;
+    const textSecondary = PROFESSIONAL_COLORS.text.secondary;
+    const nameColor = PROFESSIONAL_COLORS.text.primary;
 
     // 字段兼容函数
     const getEventDate = (event) => {
diff --git a/src/views/EventDetail/components/RelatedConcepts.js b/src/views/EventDetail/components/RelatedConcepts.js
index 063d5781..00fa178e 100644
--- a/src/views/EventDetail/components/RelatedConcepts.js
+++ b/src/views/EventDetail/components/RelatedConcepts.js
@@ -33,14 +33,15 @@ import { FaEye, FaExternalLinkAlt, FaChartLine, FaCalendarAlt } from 'react-icon
 import moment from 'moment';
 import tradingDayUtils from '../../../utils/tradingDayUtils'; // 引入交易日工具
 import { logger } from '../../../utils/logger';
+import { PROFESSIONAL_COLORS } from '../../../constants/professionalTheme';
 
 // 增强版 ConceptCard 组件 - 展示更多数据细节
 const ConceptCard = ({ concept, tradingDate, onViewDetails }) => {
     const [isExpanded, setIsExpanded] = useState(false);
-    const cardBg = useColorModeValue('white', 'gray.800');
-    const borderColor = useColorModeValue('gray.200', 'gray.600');
-    const textColor = useColorModeValue('gray.600', 'gray.400');
-    const highlightBg = useColorModeValue('yellow.50', 'yellow.900');
+    const cardBg = PROFESSIONAL_COLORS.background.card;
+    const borderColor = PROFESSIONAL_COLORS.border.default;
+    const textColor = PROFESSIONAL_COLORS.text.secondary;
+    const highlightBg = 'rgba(255, 195, 0, 0.1)';
 
     // 计算涨跌幅颜色和符号
     const changeColor = concept.price_info?.avg_change_pct > 0 ? 'red' : 'green';
@@ -69,8 +70,8 @@ const ConceptCard = ({ concept, tradingDate, onViewDetails }) => {
             borderWidth={2}
             _hover={{
                 transform: 'translateY(-2px)',
-                shadow: 'xl',
-                borderColor: 'blue.400'
+                boxShadow: '0 8px 20px rgba(0, 0, 0, 0.4)',
+                borderColor: '#3B82F6'
             }}
             transition="all 0.3s"
         >
@@ -80,17 +81,35 @@ const ConceptCard = ({ concept, tradingDate, onViewDetails }) => {
                     <Box>
                         <HStack justify="space-between" align="flex-start" mb={2}>
                             <VStack align="start" spacing={1} flex={1}>
-                                <Text fontSize="lg" fontWeight="bold" color="blue.600">
+                                <Text fontSize="lg" fontWeight="bold" color="#3B82F6">
                                     {concept.concept}
                                 </Text>
                                 <HStack spacing={2} flexWrap="wrap">
-                                    <Badge colorScheme="purple" fontSize="xs">
+                                    <Badge
+                                        bg="rgba(168, 85, 247, 0.15)"
+                                        color="#A855F7"
+                                        borderWidth="1px"
+                                        borderColor="#A855F7"
+                                        fontSize="xs"
+                                    >
                                         相关度: {concept.score.toFixed(2)}
                                     </Badge>
-                                    <Badge colorScheme="teal" fontSize="xs">
+                                    <Badge
+                                        bg="rgba(20, 184, 166, 0.15)"
+                                        color="#14B8A6"
+                                        borderWidth="1px"
+                                        borderColor="#14B8A6"
+                                        fontSize="xs"
+                                    >
                                         {getMatchTypeName(concept.match_type)}
                                     </Badge>
-                                    <Badge colorScheme="orange" fontSize="xs">
+                                    <Badge
+                                        bg="rgba(251, 146, 60, 0.15)"
+                                        color="#FB923C"
+                                        borderWidth="1px"
+                                        borderColor="#FB923C"
+                                        fontSize="xs"
+                                    >
                                         {concept.stock_count} 只股票
                                     </Badge>
                                 </HStack>