update ui

2025-11-14 08:09:18 +08:00
parent 98d063bcfe
commit ad8ff50001
3 changed files with 59 additions and 38 deletions
--- 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"
--- 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) => {
--- 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>