refactor(icons): 迁移其他 views 目录图标到 lucide-react

- views/Center, views/Community, views/DataBrowser 等 - views/EventDetail, views/LimitAnalyse, views/StockOverview - views/TradingSimulation, views/Pages, views/Authentication - views/Profile, views/Settings - 处理 Tag/TagIcon 命名冲突 - 涉及 52 个组件文件 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-25 12:25:28 +08:00
parent d6cf776530
commit 2207a680b5
52 changed files with 426 additions and 468 deletions
--- a/src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx
+++ b/src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx
@@ -13,7 +13,7 @@ import {
  Collapse,
  Badge,
 } from '@chakra-ui/react';
-import { CloseIcon, ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
+import { X, ChevronDown, ChevronUp } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';

 import MiniTimelineChart from './MiniTimelineChart';
@@ -210,7 +210,7 @@ const QuoteTile: React.FC<QuoteTileProps> = ({
        {/* 操作按钮 */}
        <HStack spacing={1} ml={2}>
          <IconButton
-            icon={expanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
+            icon={expanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
            size="xs"
            variant="ghost"
            color={subTextColor}
@@ -223,7 +223,7 @@ const QuoteTile: React.FC<QuoteTileProps> = ({
          />
          <Tooltip label="移除">
            <IconButton
-              icon={<CloseIcon />}
+              icon={<X size={16} />}
              size="xs"
              variant="ghost"
              color="red.400"
--- a/src/views/StockOverview/components/FlexScreen/index.tsx
+++ b/src/views/StockOverview/components/FlexScreen/index.tsx
@@ -42,21 +42,7 @@ import {
  Tag,
  TagLabel,
 } from '@chakra-ui/react';
-import {
-  SearchIcon,
-  CloseIcon,
-  AddIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  SettingsIcon,
-} from '@chakra-ui/icons';
-import {
-  FaDesktop,
-  FaTrash,
-  FaSync,
-  FaWifi,
-  FaExclamationCircle,
-} from 'react-icons/fa';
+import { Search, X, Plus, ChevronDown, ChevronUp, Settings, Monitor, Trash2, RefreshCw, Wifi, AlertCircle } from 'lucide-react';

 import { useRealtimeQuote } from './hooks';
 import { getFullCode } from './hooks/utils';
@@ -299,7 +285,7 @@ const FlexScreen: React.FC = () => {
        {/* 头部 */}
        <Flex align="center" mb={4}>
          <HStack spacing={3}>
-            <Icon as={FaDesktop} boxSize={6} color={accentColor} />
+            <Icon as={Monitor} boxSize={6} color={accentColor} />
            <Heading size="md" color={textColor}>
              灵活屏
            </Heading>
@@ -311,7 +297,7 @@ const FlexScreen: React.FC = () => {
                alignItems="center"
                gap={1}
              >
-                <Icon as={FaWifi} boxSize={3} />
+                <Icon as={Wifi} boxSize={3} />
                {isAnyConnected ? '实时' : '离线'}
              </Badge>
            </Tooltip>
@@ -322,7 +308,7 @@ const FlexScreen: React.FC = () => {
            <Menu>
              <MenuButton
                as={IconButton}
-                icon={<SettingsIcon />}
+                icon={<Settings size={16} />}
                size="sm"
                variant="ghost"
                color={subTextColor}
@@ -331,7 +317,7 @@ const FlexScreen: React.FC = () => {
              />
              <MenuList bg="#1a1a2e" borderColor={borderColor}>
                <MenuItem
-                  icon={<FaSync />}
+                  icon={<RefreshCw />}
                  onClick={resetWatchlist}
                  bg="transparent"
                  color={textColor}
@@ -340,7 +326,7 @@ const FlexScreen: React.FC = () => {
                  重置为默认
                </MenuItem>
                <MenuItem
-                  icon={<FaTrash />}
+                  icon={<Trash2 />}
                  onClick={clearWatchlist}
                  bg="transparent"
                  color="red.400"
@@ -352,7 +338,7 @@ const FlexScreen: React.FC = () => {
            </Menu>
            {/* 折叠按钮 */}
            <IconButton
-              icon={isCollapsed ? <ChevronDownIcon /> : <ChevronUpIcon />}
+              icon={isCollapsed ? <ChevronDown size={16} /> : <ChevronUp size={16} />}
              size="sm"
              variant="ghost"
              color={subTextColor}
@@ -369,7 +355,7 @@ const FlexScreen: React.FC = () => {
          <Box position="relative" mb={4}>
            <InputGroup size="md">
              <InputLeftElement pointerEvents="none">
-                <SearchIcon color={subTextColor} />
+                <Search size={16} color={subTextColor} />
              </InputLeftElement>
              <Input
                placeholder="搜索股票/指数代码或名称..."
@@ -390,7 +376,7 @@ const FlexScreen: React.FC = () => {
                <InputRightElement>
                  <IconButton
                    size="sm"
-                    icon={<CloseIcon />}
+                    icon={<X size={16} />}
                    variant="ghost"
                    color={subTextColor}
                    _hover={{ bg: hoverBg, color: textColor }}
@@ -457,7 +443,7 @@ const FlexScreen: React.FC = () => {
                            </Text>
                          </VStack>
                          <IconButton
-                            icon={<AddIcon />}
+                            icon={<Plus size={16} />}
                            size="xs"
                            colorScheme="purple"
                            variant="ghost"
@@ -523,7 +509,7 @@ const FlexScreen: React.FC = () => {
          ) : (
            <Center py={8}>
              <VStack spacing={3}>
-                <Icon as={FaExclamationCircle} boxSize={10} color={subTextColor} />
+                <Icon as={AlertCircle} boxSize={10} color={subTextColor} />
                <Text color={subTextColor}>自选列表为空，请搜索添加证券</Text>
              </VStack>
            </Center>
--- a/src/views/StockOverview/index.js
+++ b/src/views/StockOverview/index.js
@@ -48,13 +48,11 @@ import {
  Skeleton,
  SkeletonText,
 } from '@chakra-ui/react';
-import { SearchIcon, CloseIcon, ArrowForwardIcon, TrendingUpIcon, InfoIcon, ChevronRightIcon, CalendarIcon } from '@chakra-ui/icons';
-import { FaChartLine, FaFire, FaRocket, FaBrain, FaCalendarAlt, FaChevronRight, FaArrowUp, FaArrowDown, FaChartBar, FaTag, FaLayerGroup, FaBolt } from 'react-icons/fa';
+import { Search, X, ArrowRight, TrendingUp, Info, ChevronRight, Calendar, LineChart, Flame, Rocket, Brain, ArrowUp, ArrowDown, BarChart2, Tag as TagIcon, Layers, Zap } from 'lucide-react';
 import ConceptStocksModal from '@components/ConceptStocksModal';
 import TradeDatePicker from '@components/TradeDatePicker';
 import HotspotOverview from './components/HotspotOverview';
 import FlexScreen from './components/FlexScreen';
-import { BsGraphUp, BsLightningFill } from 'react-icons/bs';
 import { echarts } from '@lib/echarts';
 import { logger } from '../../utils/logger';
 import tradingDays from '../../data/tradingDays.json';
@@ -652,7 +650,7 @@ const StockOverview = () => {
          <VStack spacing={8} align="center">
            <VStack spacing={4} textAlign="center" maxW="3xl">
              <HStack spacing={3}>
-                <Icon as={BsGraphUp} boxSize={12} color={colorMode === 'dark' ? goldColor : 'white'} />
+                <Icon as={TrendingUp} boxSize={12} color={colorMode === 'dark' ? goldColor : 'white'} />
                <Heading 
                  as="h1" 
                  size="2xl" 
@@ -680,7 +678,7 @@ const StockOverview = () => {
                borderColor={colorMode === 'dark' ? goldColor : 'transparent'}
              >
                <InputLeftElement pointerEvents="none">
-                  <SearchIcon color={colorMode === 'dark' ? goldColor : 'gray.400'} />
+                  <Search size={16} color={colorMode === 'dark' ? goldColor : 'gray.400'} />
                </InputLeftElement>
                <Input
                  placeholder="搜索股票代码、名称或拼音首字母..."
@@ -702,7 +700,7 @@ const StockOverview = () => {
                  <InputRightElement>
                    <IconButton
                      size="sm"
-                      icon={<CloseIcon />}
+                      icon={<X size={16} />}
                      variant="ghost"
                      onClick={handleClearSearch}
                      aria-label="清空搜索"
@@ -771,7 +769,7 @@ const StockOverview = () => {
                            </VStack>
                            <Button
                              size="sm"
-                              rightIcon={<ArrowForwardIcon />}
+                              rightIcon={<ArrowRight size={16} />}
                              variant="ghost"
                              colorScheme={colorMode === 'dark' ? 'yellow' : 'purple'}
                              _hover={{
@@ -923,14 +921,14 @@ const StockOverview = () => {
        <Box mb={10}>
          <Flex align="center" mb={6}>
            <HStack spacing={3}>
-              <Icon as={FaFire} boxSize={6} color={colorMode === 'dark' ? goldColor : 'orange.500'} />
+              <Icon as={Flame} boxSize={6} color={colorMode === 'dark' ? goldColor : 'orange.500'} />
              <Heading size="lg" color={textColor}>今日热门概念</Heading>
            </HStack>
            <Spacer />
            <Button
              size="sm"
              variant="ghost"
-              rightIcon={<ChevronRightIcon />}
+              rightIcon={<ChevronRight size={16} />}
              onClick={() => navigate('/concepts')}
              color={colorMode === 'dark' ? goldColor : 'purple.600'}
              _hover={{
@@ -997,7 +995,7 @@ const StockOverview = () => {
                    >
                      <HStack spacing={1}>
                        <Icon
-                          as={concept.change_percent > 0 ? FaArrowUp : FaArrowDown}
+                          as={concept.change_percent > 0 ? ArrowUp : ArrowDown}
                          boxSize={3}
                        />
                        <Text>{formatChangePercent(concept.change_percent)}</Text>
@@ -1014,7 +1012,7 @@ const StockOverview = () => {
                        {/* 层级信息 */}
                        {concept.hierarchy && (
                          <HStack spacing={1} flexWrap="wrap">
-                            <Icon as={FaLayerGroup} boxSize={3} color="gray.400" />
+                            <Icon as={Layers} boxSize={3} color="gray.400" />
                            <Text fontSize="xs" color="gray.500">
                              {[concept.hierarchy.lv1, concept.hierarchy.lv2, concept.hierarchy.lv3]
                                .filter(Boolean)
@@ -1039,7 +1037,7 @@ const StockOverview = () => {
                                colorScheme="blue"
                                borderRadius="full"
                              >
-                                <Icon as={FaTag} boxSize={2} mr={1} />
+                                <Icon as={Tag} boxSize={2} mr={1} />
                                <TagLabel fontSize="xs">{tag}</TagLabel>
                              </Tag>
                            ))}
@@ -1054,7 +1052,7 @@ const StockOverview = () => {
                        {/* 爆发日期 */}
                        {concept.outbreak_dates && concept.outbreak_dates.length > 0 && (
                          <HStack spacing={2} fontSize="xs" color="orange.500">
-                            <Icon as={FaBolt} />
+                            <Icon as={Zap} />
                            <Text>
                              近期爆发: {concept.outbreak_dates.slice(0, 2).join(', ')}
                              {concept.outbreak_dates.length > 2 && ` 等${concept.outbreak_dates.length}次`}
@@ -1110,7 +1108,7 @@ const StockOverview = () => {
                            size="sm"
                            colorScheme="purple"
                            variant="ghost"
-                            rightIcon={<FaChevronRight />}
+                            rightIcon={<ChevronRight />}
                            onClick={(e) => {
                              e.stopPropagation();
                              handleConceptClick(concept, index);
@@ -1131,12 +1129,12 @@ const StockOverview = () => {
        <Box mb={10}>
          <Flex align="center" mb={6}>
            <HStack spacing={3}>
-              <Icon as={FaChartBar} boxSize={6} color={accentColor} />
+              <Icon as={BarChart2} boxSize={6} color={accentColor} />
              <Heading size="lg" color={textColor}>市值热力图</Heading>
            </HStack>
            <Spacer />
            <Tooltip label="基于市值大小和涨跌幅展示的市场全景图">
-              <Icon as={InfoIcon} color={subTextColor} />
+              <Icon as={Info} color={subTextColor} />
            </Tooltip>
          </Flex>