refactor(icons): 迁移 components 目录图标到 lucide-react

- @chakra-ui/icons → lucide-react
- react-icons → lucide-react
- 涉及 49 个组件文件

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/Navbars/AuthNavbar.js

@@ -48,8 +48,7 @@ import {
 import { SidebarResponsive } from 'components/Sidebar/Sidebar';
 import PropTypes from 'prop-types';
 import { Fragment } from 'react';
-import { AiFillStar } from 'react-icons/ai';
-import { GoChevronDown, GoChevronRight } from 'react-icons/go';
+import { Star, ChevronDown, ChevronRight } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { SidebarContext } from 'contexts/SidebarContext';
 import routes from 'routes.js';
@@ -313,7 +312,7 @@ export default function AuthNavbar(props) {
                     {link.name}
                   </Text>
                   <Icon
-                    as={GoChevronRight}
+                    as={ChevronRight}
                     color={mainText}
                     w='14px'
                     h='14px'
@@ -419,7 +418,7 @@ export default function AuthNavbar(props) {
           Pages
         </Text>
         <Icon
-          as={GoChevronDown}
+          as={ChevronDown}
           color={mainText}
           w='14px'
           h='14px'
@@ -457,7 +456,7 @@ export default function AuthNavbar(props) {
           Authentications
         </Text>
         <Icon
-          as={GoChevronDown}
+          as={ChevronDown}
           color={mainText}
           w='14px'
           h='14px'
@@ -493,7 +492,7 @@ export default function AuthNavbar(props) {
                   w='50px'
                   mb='12px'
                 >
-                  <Icon as={AiFillStar} w='25px' h='25px' color='blue.500' />
+                  <Icon as={Star} w='25px' h='25px' color='blue.500' fill='currentColor' />
                 </IconBox>
                 <Text
                   fontSize='xl'
@@ -527,7 +526,7 @@ export default function AuthNavbar(props) {
           Application
         </Text>
         <Icon
-          as={GoChevronDown}
+          as={ChevronDown}
           color={mainText}
           w='14px'
           h='14px'
@@ -564,7 +563,7 @@ export default function AuthNavbar(props) {
           Ecommerce
         </Text>
         <Icon
-          as={GoChevronDown}
+          as={ChevronDown}
           color={mainText}
           w='14px'
           h='14px'

src/components/Navbars/HomeNavbar.js

@@ -21,9 +21,7 @@ import {
     useColorModeValue,
     useToast,
 } from '@chakra-ui/react';
-import { ChevronDownIcon, HamburgerIcon, SunIcon, MoonIcon } from '@chakra-ui/icons';
-import { FiStar, FiCalendar, FiUser, FiSettings, FiHome, FiLogOut } from 'react-icons/fi';
-import { FaCrown } from 'react-icons/fa';
+import { ChevronDown, Menu as MenuIcon, Sun, Moon, Star, Calendar, User, Settings, Home, LogOut, Crown } from 'lucide-react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';
 import { useAuthModal } from '../../hooks/useAuthModal';

src/components/Navbars/SearchBar/SearchBar.js

@@ -20,8 +20,8 @@ import {
   ListItem,
   Flex,
 } from "@chakra-ui/react";
-import { SearchIcon, CloseIcon } from "@chakra-ui/icons";
 import { useStockSearch } from "@hooks/useStockSearch";
+import { Search, X } from "lucide-react";
 
 export function SearchBar(props) {
   const { variant, children, ...rest } = props;
@@ -80,7 +80,7 @@ export function SearchBar(props) {
     <Box ref={containerRef} position="relative" {...rest}>
       <InputGroup borderRadius="8px" w="220px">
         <InputLeftElement pointerEvents="none">
-          <SearchIcon color={searchIconColor} w="15px" h="15px" />
+          <Search color={searchIconColor} size={15} />
         </InputLeftElement>
         <Input
           variant="search"
@@ -103,7 +103,7 @@ export function SearchBar(props) {
               <IconButton
                 size="xs"
                 variant="ghost"
-                icon={<CloseIcon w="10px" h="10px" />}
+                icon={<X size={10} />}
                 onClick={clearSearch}
                 aria-label="清除搜索"
                 _hover={{ bg: "transparent" }}

src/components/Navbars/components/CalendarButton.js

@@ -9,7 +9,7 @@ import {
     ModalBody,
     ModalCloseButton
 } from '@chakra-ui/react';
-import { FiCalendar } from 'react-icons/fi';
+import { Calendar } from 'lucide-react';
 import InvestmentCalendar from '@components/InvestmentCalendar';
 
 /**
@@ -35,7 +35,7 @@ const CalendarButton = memo(() => {
                 colorScheme="blue"
                 variant="solid"
                 borderRadius="full"
-                leftIcon={<FiCalendar />}
+                leftIcon={<Calendar size={16} />}
                 onClick={() => setIsModalOpen(true)}
             >
                 投资日历

src/components/Navbars/components/FeatureMenus/FollowingEventsMenu.js

@@ -17,8 +17,7 @@ import {
     Spinner,
     useColorModeValue
 } from '@chakra-ui/react';
-import { ChevronDownIcon } from '@chakra-ui/icons';
-import { FiCalendar } from 'react-icons/fi';
+import { Calendar, ChevronDown } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useFollowingEvents } from '../../../../hooks/useFollowingEvents';
 import { getEventDetailUrl } from '@/utils/idEncoder';
@@ -67,8 +66,8 @@ const FollowingEventsMenu = memo(() => {
                 colorScheme="purple"
                 variant="solid"
                 borderRadius="full"
-                rightIcon={<ChevronDownIcon />}
-                leftIcon={<FiCalendar />}
+                rightIcon={<ChevronDown size={16} />}
+                leftIcon={<Calendar size={16} />}
             >
                 自选事件
                 {followingEvents && followingEvents.length > 0 && (

src/components/Navbars/components/FeatureMenus/WatchlistMenu.js

@@ -17,8 +17,7 @@ import {
     Spinner,
     useColorModeValue
 } from '@chakra-ui/react';
-import { ChevronDownIcon } from '@chakra-ui/icons';
-import { FiStar } from 'react-icons/fi';
+import { Star, ChevronDown } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useWatchlist } from '../../../../hooks/useWatchlist';
 import FavoriteButton from '@/components/FavoriteButton';
@@ -66,8 +65,8 @@ const WatchlistMenu = memo(() => {
                 colorScheme="teal"
                 variant="solid"
                 borderRadius="full"
-                rightIcon={<ChevronDownIcon />}
-                leftIcon={<FiStar />}
+                rightIcon={<ChevronDown size={16} />}
+                leftIcon={<Star size={16} />}
             >
                 自选股
                 {watchlistQuotes && watchlistQuotes.length > 0 && (

src/components/Navbars/components/NavbarActions/index.js

@@ -3,7 +3,7 @@
 
 import React, { memo } from 'react';
 import { HStack, IconButton, Box } from '@chakra-ui/react';
-import { HamburgerIcon } from '@chakra-ui/icons';
+import { Menu } from 'lucide-react';
 // import ThemeToggleButton from '../ThemeToggleButton'; // ❌ 已删除 - 不再支持深色模式切换
 import LoginButton from '../LoginButton';
 import CalendarButton from '../CalendarButton';
@@ -84,7 +84,7 @@ const NavbarActions = memo(({
                     ) : (
                         // 移动端：汉堡菜单（打开抽屉）
                         <IconButton
-                            icon={<HamburgerIcon />}
+                            icon={<Menu size={20} />}
                             variant="ghost"
                             onClick={onMenuOpen}
                             aria-label="打开菜单"

src/components/Navbars/components/Navigation/DesktopNav.js

@@ -17,7 +17,7 @@ import {
     Box,
     useColorModeValue
 } from '@chakra-ui/react';
-import { ChevronDownIcon } from '@chakra-ui/icons';
+import { ChevronDown } from 'lucide-react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useNavigationEvents } from '../../../../hooks/useNavigationEvents';
 import { useDelayedMenu } from '../../../../hooks/useDelayedMenu';
@@ -60,7 +60,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
                 <MenuButton
                     as={Button}
                     variant="ghost"
-                    rightIcon={<ChevronDownIcon color={isActive(['/community', '/concepts']) ? 'white' : 'inherit'} />}
+                    rightIcon={<ChevronDown size={16} color={isActive(['/community', '/concepts']) ? 'white' : 'currentColor'} />}
                     bg={isActive(['/community', '/concepts']) ? 'blue.600' : 'transparent'}
                     color={isActive(['/community', '/concepts']) ? 'white' : 'inherit'}
                     fontWeight={isActive(['/community', '/concepts']) ? 'bold' : 'normal'}
@@ -127,7 +127,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
                 <MenuButton
                     as={Button}
                     variant="ghost"
-                    rightIcon={<ChevronDownIcon color={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'white' : 'inherit'} />}
+                    rightIcon={<ChevronDown size={16} color={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'white' : 'currentColor'} />}
                     bg={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.600' : 'transparent'}
                     color={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'white' : 'inherit'}
                     fontWeight={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'bold' : 'normal'}
@@ -199,7 +199,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
                 <MenuButton
                     as={Button}
                     variant="ghost"
-                    rightIcon={<ChevronDownIcon color={isActive(['/agent-chat', '/value-forum']) ? 'white' : 'inherit'} />}
+                    rightIcon={<ChevronDown size={16} color={isActive(['/agent-chat', '/value-forum']) ? 'white' : 'currentColor'} />}
                     bg={isActive(['/agent-chat', '/value-forum']) ? 'blue.600' : 'transparent'}
                     color={isActive(['/agent-chat', '/value-forum']) ? 'white' : 'inherit'}
                     fontWeight={isActive(['/agent-chat', '/value-forum']) ? 'bold' : 'normal'}
@@ -274,7 +274,7 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
                 <MenuButton
                     as={Button}
                     variant="ghost"
-                    rightIcon={<ChevronDownIcon />}
+                    rightIcon={<ChevronDown size={16} />}
                     onMouseEnter={contactUsMenu.handleMouseEnter}
                     onMouseLeave={contactUsMenu.handleMouseLeave}
                     onClick={contactUsMenu.handleClick}

src/components/Navbars/components/Navigation/MoreMenu.js

@@ -14,7 +14,7 @@ import {
     HStack,
     Badge
 } from '@chakra-ui/react';
-import { ChevronDownIcon } from '@chakra-ui/icons';
+import { ChevronDown } from 'lucide-react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useDelayedMenu } from '../../../../hooks/useDelayedMenu';
 
@@ -45,7 +45,7 @@ const MoreMenu = memo(({ isAuthenticated, user }) => {
             <MenuButton
                 as={Button}
                 variant="ghost"
-                rightIcon={<ChevronDownIcon />}
+                rightIcon={<ChevronDown size={16} />}
                 fontWeight="medium"
                 onMouseEnter={moreMenu.handleMouseEnter}
                 onMouseLeave={moreMenu.handleMouseLeave}

src/components/Navbars/components/Navigation/PersonalCenterMenu.js

@@ -15,9 +15,7 @@ import {
     useColorModeValue,
     useDisclosure
 } from '@chakra-ui/react';
-import { ChevronDownIcon } from '@chakra-ui/icons';
-import { FiHome, FiUser, FiSettings, FiLogOut } from 'react-icons/fi';
-import { FaCrown } from 'react-icons/fa';
+import { ChevronDown, Home, User, Settings, LogOut, Crown } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 
 /**
@@ -50,7 +48,7 @@ const PersonalCenterMenu = memo(({ user, handleLogout }) => {
                 as={Button}
                 size="sm"
                 variant="ghost"
-                rightIcon={<ChevronDownIcon />}
+                rightIcon={<ChevronDown size={16} />}
                 _hover={{ bg: hoverBg }}
                 onMouseEnter={onOpen}
                 onMouseLeave={onClose}
@@ -70,7 +68,7 @@ const PersonalCenterMenu = memo(({ user, handleLogout }) => {
                 </Box>
 
                 {/* 前往个人中心 */}
-                <MenuItem icon={<FiHome />} onClick={() => {
+                <MenuItem icon={<Home size={16} />} onClick={() => {
                     onClose(); // 先关闭菜单
                     navigate('/home/center');
                 }}>
@@ -80,13 +78,13 @@ const PersonalCenterMenu = memo(({ user, handleLogout }) => {
                 <MenuDivider />
 
                 {/* 账户管理组 */}
-                <MenuItem icon={<FiUser />} onClick={() => {
+                <MenuItem icon={<User size={16} />} onClick={() => {
                     onClose(); // 先关闭菜单
                     navigate('/home/profile');
                 }}>
                     个人资料
                 </MenuItem>
-                <MenuItem icon={<FiSettings />} onClick={() => {
+                <MenuItem icon={<Settings size={16} />} onClick={() => {
                     onClose(); // 先关闭菜单
                     navigate('/home/settings');
                 }}>
@@ -96,7 +94,7 @@ const PersonalCenterMenu = memo(({ user, handleLogout }) => {
                 <MenuDivider />
 
                 {/* 功能入口组 */}
-                <MenuItem icon={<FaCrown />} onClick={() => {
+                <MenuItem icon={<Crown size={16} />} onClick={() => {
                     onClose(); // 先关闭菜单
                     navigate('/home/pages/account/subscription');
                 }}>
@@ -106,7 +104,7 @@ const PersonalCenterMenu = memo(({ user, handleLogout }) => {
                 <MenuDivider />
 
                 {/* 退出 */}
-                <MenuItem icon={<FiLogOut />} onClick={handleLogout} color="red.500">
+                <MenuItem icon={<LogOut size={16} />} onClick={handleLogout} color="red.500">
                     退出登录
                 </MenuItem>
             </MenuList>

src/components/Navbars/components/ProfileCompletenessAlert/index.js

@@ -12,7 +12,7 @@ import {
     IconButton,
     Icon
 } from '@chakra-ui/react';
-import { FiStar } from 'react-icons/fi';
+import { Star } from 'lucide-react';
 
 /**
  * 资料完整性提醒横幅组件
@@ -45,7 +45,7 @@ const ProfileCompletenessAlert = memo(({
             <Container maxW="container.xl">
                 <HStack justify="space-between" align="center" spacing={{ base: 2, md: 4 }}>
                     <HStack spacing={{ base: 2, md: 3 }} flex={1} minW={0}>
-                        <Icon as={FiStar} display={{ base: 'none', sm: 'block' }} />
+                        <Icon as={Star} boxSize={5} display={{ base: 'none', sm: 'block' }} />
                         <VStack spacing={0} align="start" flex={1} minW={0}>
                             <Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="bold" noOfLines={1}>
                                 完善资料，享受更好服务

src/components/Navbars/components/UserMenu/TabletUserMenu.js

@@ -14,8 +14,7 @@ import {
     Flex,
     useColorModeValue
 } from '@chakra-ui/react';
-import { FiStar, FiCalendar, FiUser, FiSettings, FiHome, FiLogOut } from 'react-icons/fi';
-import { FaCrown } from 'react-icons/fa';
+import { Star, Calendar, User, Settings, Home, LogOut, Crown } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import UserAvatar from './UserAvatar';
 import { useSubscription } from '../../../../hooks/useSubscription';
@@ -84,7 +83,7 @@ const TabletUserMenu = memo(({
                     </Box>
 
                     {/* 订阅管理 - 移动端导航到订阅页面 */}
-                    <MenuItem icon={<FaCrown />} onClick={() => navigate('/home/pages/account/subscription')}>
+                    <MenuItem icon={<Crown size={16} />} onClick={() => navigate('/home/pages/account/subscription')}>
                         <Flex justify="space-between" align="center" w="100%">
                             <Text>订阅管理</Text>
                             <Badge colorScheme={getSubscriptionBadgeColor()}>
@@ -96,12 +95,12 @@ const TabletUserMenu = memo(({
                     <MenuDivider />
 
                     {/* 投资日历 */}
-                    <MenuItem icon={<FiCalendar />} onClick={() => navigate('/community')}>
+                    <MenuItem icon={<Calendar size={16} />} onClick={() => navigate('/community')}>
                         <Text>投资日历</Text>
                     </MenuItem>
 
                     {/* 自选股 */}
-                    <MenuItem icon={<FiStar />} onClick={() => navigate('/home/center')}>
+                    <MenuItem icon={<Star size={16} />} onClick={() => navigate('/home/center')}>
                         <Flex justify="space-between" align="center" w="100%">
                             <Text>我的自选股</Text>
                             {watchlistQuotes && watchlistQuotes.length > 0 && (
@@ -111,7 +110,7 @@ const TabletUserMenu = memo(({
                     </MenuItem>
 
                     {/* 自选事件 */}
-                    <MenuItem icon={<FiCalendar />} onClick={() => navigate('/home/center')}>
+                    <MenuItem icon={<Calendar size={16} />} onClick={() => navigate('/home/center')}>
                         <Flex justify="space-between" align="center" w="100%">
                             <Text>我的自选事件</Text>
                             {followingEvents && followingEvents.length > 0 && (
@@ -123,20 +122,20 @@ const TabletUserMenu = memo(({
                     <MenuDivider />
 
                     {/* 个人中心 */}
-                    <MenuItem icon={<FiHome />} onClick={() => navigate('/home/center')}>
+                    <MenuItem icon={<Home size={16} />} onClick={() => navigate('/home/center')}>
                         个人中心
                     </MenuItem>
-                    <MenuItem icon={<FiUser />} onClick={() => navigate('/home/profile')}>
+                    <MenuItem icon={<User size={16} />} onClick={() => navigate('/home/profile')}>
                         个人资料
                     </MenuItem>
-                    <MenuItem icon={<FiSettings />} onClick={() => navigate('/home/settings')}>
+                    <MenuItem icon={<Settings size={16} />} onClick={() => navigate('/home/settings')}>
                         账户设置
                     </MenuItem>
 
                     <MenuDivider />
 
                     {/* 退出登录 */}
-                    <MenuItem icon={<FiLogOut />} onClick={handleLogout} color="red.500">
+                    <MenuItem icon={<LogOut size={16} />} onClick={handleLogout} color="red.500">
                         退出登录
                     </MenuItem>
                 </MenuList>