update pay ui

src/views/Concept/components/BreadcrumbNav.js

@@ -16,13 +16,14 @@ import {
     Flex,
     Tooltip,
 } from '@chakra-ui/react';
-import { ChevronRightIcon, CloseIcon } from '@chakra-ui/icons';
-import { FaLayerGroup, FaFilter, FaTimes, FaHome } from 'react-icons/fa';
+import { ChevronRightIcon } from '@chakra-ui/icons';
+import { FaFilter, FaTimes, FaHome } from 'react-icons/fa';
 
 const BreadcrumbNav = ({
     filter,
     onClearFilter,
     onNavigate,
+    isDarkMode = false,
 }) => {
     // 如果没有筛选条件，不显示
     if (!filter || (!filter.lv1 && !filter.lv2 && !filter.lv3)) {
@@ -56,14 +57,71 @@ const BreadcrumbNav = ({
         });
     }
 
+    // 深色主题样式
+    const darkStyles = {
+        container: {
+            bg: 'rgba(15, 23, 42, 0.8)',
+            backdropFilter: 'blur(20px)',
+            borderColor: 'whiteAlpha.100',
+        },
+        filterBadge: {
+            bg: 'purple.500',
+            color: 'white',
+        },
+        homeBadge: {
+            bg: 'whiteAlpha.100',
+            color: 'white',
+            _hover: { bg: 'whiteAlpha.200' },
+        },
+        chevron: { color: 'whiteAlpha.400' },
+        crumbBadge: (level, isLast) => ({
+            bg: level === 'lv1' ? 'purple.500' : level === 'lv2' ? 'blue.500' : 'cyan.500',
+            color: 'white',
+        }),
+        clearBtn: {
+            color: 'red.300',
+            _hover: { bg: 'whiteAlpha.100' },
+        },
+        hintText: { color: 'whiteAlpha.500' },
+        linkText: { color: 'purple.300' },
+    };
+
+    // 浅色主题样式
+    const lightStyles = {
+        container: {
+            bg: 'linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%)',
+            borderColor: 'purple.200',
+        },
+        filterBadge: {
+            bg: 'purple.500',
+            color: 'white',
+        },
+        homeBadge: {
+            colorScheme: 'gray',
+            _hover: { bg: 'gray.200' },
+        },
+        chevron: { color: 'gray.400' },
+        crumbBadge: (level, isLast) => ({
+            colorScheme: level === 'lv1' ? 'purple' : level === 'lv2' ? 'blue' : 'cyan',
+        }),
+        clearBtn: {
+            colorScheme: 'red',
+        },
+        hintText: { color: 'gray.500' },
+        linkText: { color: 'purple.600' },
+    };
+
+    const styles = isDarkMode ? darkStyles : lightStyles;
+
     return (
         <Box
-            bg="linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%)"
+            bg={styles.container.bg}
+            backdropFilter={isDarkMode ? styles.container.backdropFilter : undefined}
             borderRadius="xl"
             p={{ base: 3, md: 4 }}
             mb={4}
             border="1px solid"
-            borderColor="purple.200"
+            borderColor={styles.container.borderColor}
         >
             <Flex
                 align="center"
@@ -75,8 +133,8 @@ const BreadcrumbNav = ({
                     {/* 筛选图标 */}
                     <HStack
                         spacing={2}
-                        bg="purple.500"
-                        color="white"
+                        bg={styles.filterBadge.bg}
+                        color={styles.filterBadge.color}
                         px={3}
                         py={1}
                         borderRadius="full"
@@ -90,15 +148,15 @@ const BreadcrumbNav = ({
                     {/* 首页入口 */}
                     <Tooltip label="返回全部概念" placement="top">
                         <Badge
-                            colorScheme="gray"
+                            {...(isDarkMode ? {} : { colorScheme: 'gray' })}
+                            bg={isDarkMode ? styles.homeBadge.bg : undefined}
+                            color={isDarkMode ? styles.homeBadge.color : undefined}
                             px={3}
                             py={1}
                             borderRadius="full"
                             cursor="pointer"
                             onClick={onClearFilter}
-                            _hover={{
-                                bg: 'gray.200',
-                            }}
+                            _hover={styles.homeBadge._hover}
                             display="flex"
                             alignItems="center"
                             gap={1}
@@ -111,12 +169,11 @@ const BreadcrumbNav = ({
                     {/* 面包屑路径 */}
                     {breadcrumbs.map((crumb, index) => (
                         <React.Fragment key={crumb.level}>
-                            <Icon as={ChevronRightIcon} color="gray.400" boxSize={4} />
+                            <Icon as={ChevronRightIcon} color={styles.chevron.color} boxSize={4} />
                             <Badge
-                                colorScheme={
-                                    crumb.level === 'lv1' ? 'purple' :
-                                    crumb.level === 'lv2' ? 'blue' : 'cyan'
-                                }
+                                {...(isDarkMode ? {} : { colorScheme: styles.crumbBadge(crumb.level, index === breadcrumbs.length - 1).colorScheme })}
+                                bg={isDarkMode ? styles.crumbBadge(crumb.level, index === breadcrumbs.length - 1).bg : undefined}
+                                color={isDarkMode ? styles.crumbBadge(crumb.level, index === breadcrumbs.length - 1).color : undefined}
                                 px={3}
                                 py={1}
                                 borderRadius="full"
@@ -140,21 +197,23 @@ const BreadcrumbNav = ({
                     <IconButton
                         size="sm"
                         icon={<FaTimes />}
-                        colorScheme="red"
+                        {...(isDarkMode ? {} : { colorScheme: 'red' })}
+                        color={isDarkMode ? styles.clearBtn.color : undefined}
                         variant="ghost"
                         borderRadius="full"
                         onClick={onClearFilter}
                         aria-label="清除筛选"
+                        _hover={isDarkMode ? styles.clearBtn._hover : undefined}
                     />
                 </Tooltip>
             </Flex>
 
             {/* 筛选提示 */}
-            <Text fontSize="xs" color="gray.500" mt={2}>
+            <Text fontSize="xs" color={styles.hintText.color} mt={2}>
                 当前显示「{breadcrumbs.map(b => b.label).join(' > ')}」分类下的概念，
                 <Text
                     as="span"
-                    color="purple.600"
+                    color={styles.linkText.color}
                     cursor="pointer"
                     fontWeight="medium"
                     onClick={onClearFilter}