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/DataBrowser/KLineChartView.tsx
+++ b/src/views/DataBrowser/KLineChartView.tsx
@@ -12,11 +12,11 @@ import {
 } from '@chakra-ui/react';
 import { init, dispose } from 'klinecharts';
 import {
-  FaExpand,
-  FaCompress,
-  FaCamera,
-  FaRedo,
-} from 'react-icons/fa';
+  Maximize,
+  Minimize,
+  Camera,
+  RotateCcw,
+} from 'lucide-react';
 import { MetricDataPoint } from '@services/categoryService';

 // 黑金主题配色
@@ -265,7 +265,7 @@ const KLineChartView: React.FC<KLineChartViewProps> = ({
              _hover={{ color: themeColors.primary.gold }}
              onClick={handleReset}
            >
-              <Icon as={FaRedo} />
+              <Icon as={RotateCcw} />
            </Button>
          </Tooltip>
          <Tooltip label="截图">
@@ -276,7 +276,7 @@ const KLineChartView: React.FC<KLineChartViewProps> = ({
              _hover={{ color: themeColors.primary.gold }}
              onClick={handleScreenshot}
            >
-              <Icon as={FaCamera} />
+              <Icon as={Camera} />
            </Button>
          </Tooltip>
          <Tooltip label={isFullscreen ? '退出全屏' : '全屏'}>
@@ -287,7 +287,7 @@ const KLineChartView: React.FC<KLineChartViewProps> = ({
              _hover={{ color: themeColors.primary.gold }}
              onClick={toggleFullscreen}
            >
-              <Icon as={isFullscreen ? FaCompress : FaExpand} />
+              <Icon as={isFullscreen ? Minimize : Maximize} />
            </Button>
          </Tooltip>
        </HStack>
--- a/src/views/DataBrowser/MetricDataModal.tsx
+++ b/src/views/DataBrowser/MetricDataModal.tsx
@@ -29,7 +29,7 @@ import {
  Input,
  useToast,
 } from '@chakra-ui/react';
-import { FaTable, FaChartLine, FaCalendar, FaDownload } from 'react-icons/fa';
+import { Table2, LineChart, Calendar, Download } from 'lucide-react';
 import { fetchMetricData, MetricDataResponse, TreeMetric } from '@services/categoryService';
 import SimpleLineChart from './SimpleLineChart';

@@ -182,7 +182,7 @@ const MetricDataModal: React.FC<MetricDataModalProps> = ({ isOpen, onClose, metr
              >
                <HStack spacing={4} wrap="wrap">
                  <HStack flex="1" minW="200px">
-                    <Icon as={FaCalendar} color={themeColors.text.muted} />
+                    <Icon as={Calendar} color={themeColors.text.muted} />
                    <Input
                      type="date"
                      size="sm"
@@ -235,7 +235,7 @@ const MetricDataModal: React.FC<MetricDataModalProps> = ({ isOpen, onClose, metr
                    variant="outline"
                    borderColor={themeColors.border.gold}
                    color={themeColors.text.gold}
-                    leftIcon={<FaDownload />}
+                    leftIcon={<Download />}
                    onClick={handleExportCSV}
                    isDisabled={!metricData || !metricData.data || metricData.data.length === 0}
                  >
@@ -260,7 +260,7 @@ const MetricDataModal: React.FC<MetricDataModalProps> = ({ isOpen, onClose, metr
                        bg: themeColors.bg.card,
                      }}
                    >
-                      <Icon as={FaChartLine} mr={2} />
+                      <Icon as={LineChart} mr={2} />
                      折线图
                    </Tab>
                    <Tab
@@ -271,7 +271,7 @@ const MetricDataModal: React.FC<MetricDataModalProps> = ({ isOpen, onClose, metr
                        bg: themeColors.bg.card,
                      }}
                    >
-                      <Icon as={FaTable} mr={2} />
+                      <Icon as={Table2} mr={2} />
                      数据表格
                    </Tab>
                  </TabList>
--- a/src/views/DataBrowser/SimpleLineChart.tsx
+++ b/src/views/DataBrowser/SimpleLineChart.tsx
@@ -11,11 +11,11 @@ import {
  Tooltip,
 } from '@chakra-ui/react';
 import {
-  FaExpand,
-  FaCompress,
-  FaCamera,
-  FaRedo,
-} from 'react-icons/fa';
+  Maximize,
+  Minimize,
+  Camera,
+  RotateCcw,
+} from 'lucide-react';
 import { MetricDataPoint } from '@services/categoryService';

 // 黑金主题配色
@@ -386,7 +386,7 @@ const SimpleLineChart: React.FC<SimpleLineChartProps> = ({
              _hover={{ color: themeColors.primary.gold }}
              onClick={handleReset}
            >
-              <Icon as={FaRedo} />
+              <Icon as={RotateCcw} />
            </Button>
          </Tooltip>
          <Tooltip label="截图">
@@ -397,7 +397,7 @@ const SimpleLineChart: React.FC<SimpleLineChartProps> = ({
              _hover={{ color: themeColors.primary.gold }}
              onClick={handleScreenshot}
            >
-              <Icon as={FaCamera} />
+              <Icon as={Camera} />
            </Button>
          </Tooltip>
          <Tooltip label={isFullscreen ? '退出全屏' : '全屏'}>
@@ -408,7 +408,7 @@ const SimpleLineChart: React.FC<SimpleLineChartProps> = ({
              _hover={{ color: themeColors.primary.gold }}
              onClick={toggleFullscreen}
            >
-              <Icon as={isFullscreen ? FaCompress : FaExpand} />
+              <Icon as={isFullscreen ? Minimize : Maximize} />
            </Button>
          </Tooltip>
        </HStack>
--- a/src/views/DataBrowser/index.tsx
+++ b/src/views/DataBrowser/index.tsx
@@ -21,17 +21,17 @@ import {
  useDisclosure,
 } from '@chakra-ui/react';
 import {
-  FaDatabase,
-  FaFolder,
-  FaFolderOpen,
-  FaFile,
-  FaSearch,
-  FaHome,
-  FaChevronRight,
-  FaChevronDown,
-  FaTimes,
-  FaEye,
-} from 'react-icons/fa';
+  Database,
+  Folder,
+  FolderOpen,
+  File,
+  Search,
+  Home,
+  ChevronRight,
+  ChevronDown,
+  X,
+  Eye,
+} from 'lucide-react';
 import { motion } from 'framer-motion';
 import {
  fetchCategoryTree,
@@ -126,7 +126,7 @@ const TreeNodeComponent: React.FC<{
          <Spinner size="xs" color={themeColors.primary.gold} mr={2} />
        ) : hasChildren || !hasMetrics ? (
          <Icon
-            as={isExpanded ? FaChevronDown : FaChevronRight}
+            as={isExpanded ? ChevronDown : ChevronRight}
            color={themeColors.text.muted}
            mr={2}
            fontSize="xs"
@@ -136,7 +136,7 @@ const TreeNodeComponent: React.FC<{
        )}

        <Icon
-          as={hasChildren || !hasMetrics ? (isExpanded ? FaFolderOpen : FaFolder) : FaFile}
+          as={hasChildren || !hasMetrics ? (isExpanded ? FolderOpen : Folder) : File}
          color={hasChildren || !hasMetrics ? themeColors.primary.gold : themeColors.text.secondary}
          mr={2}
        />
@@ -244,7 +244,7 @@ const MetricCard: React.FC<{ metric: TreeMetric; onClick: () => void }> = ({ met
              size="xs"
              variant="ghost"
              color={themeColors.primary.gold}
-              leftIcon={<FaEye />}
+              leftIcon={<Eye />}
              _hover={{ bg: themeColors.bg.cardHover }}
            >
              查看数据
@@ -489,7 +489,7 @@ const DataBrowser: React.FC = () => {
        >
          <VStack spacing={4} align="stretch" mb={8}>
            <HStack spacing={4}>
-              <Icon as={FaDatabase} color={themeColors.primary.gold} boxSize={8} />
+              <Icon as={Database} color={themeColors.primary.gold} boxSize={8} />
              <VStack align="start" spacing={0}>
                <Text
                  fontSize="3xl"
@@ -568,7 +568,7 @@ const DataBrowser: React.FC = () => {
                    }}
                  />
                  <Button
-                    leftIcon={<FaSearch />}
+                    leftIcon={<Search />}
                    bg={themeColors.primary.gold}
                    color={themeColors.bg.primary}
                    _hover={{ bg: themeColors.primary.goldLight }}
@@ -579,7 +579,7 @@ const DataBrowser: React.FC = () => {
                  </Button>
                  {searchQuery && (
                    <Button
-                      leftIcon={<FaTimes />}
+                      leftIcon={<X />}
                      variant="ghost"
                      color={themeColors.text.secondary}
                      _hover={{ color: themeColors.text.primary }}
@@ -625,7 +625,7 @@ const DataBrowser: React.FC = () => {
              <CardBody py={2}>
                <Breadcrumb
                  spacing={2}
-                  separator={<Icon as={FaChevronRight} color={themeColors.text.muted} />}
+                  separator={<Icon as={ChevronRight} color={themeColors.text.muted} />}
                >
                  <BreadcrumbItem>
                    <BreadcrumbLink
@@ -633,7 +633,7 @@ const DataBrowser: React.FC = () => {
                      _hover={{ color: themeColors.primary.gold }}
                      onClick={() => handleBreadcrumbClick(-1)}
                    >
-                      <Icon as={FaHome} />
+                      <Icon as={Home} />
                    </BreadcrumbLink>
                  </BreadcrumbItem>
                  {breadcrumbs.map((crumb, index) => (
@@ -754,7 +754,7 @@ const DataBrowser: React.FC = () => {
                    ) : searchResults ? (
                      <Flex justify="center" align="center" py={10}>
                        <VStack spacing={3}>
-                          <Icon as={FaSearch} color={themeColors.text.muted} boxSize={12} />
+                          <Icon as={Search} color={themeColors.text.muted} boxSize={12} />
                          <Text color={themeColors.text.muted}>未找到匹配的指标</Text>
                          <Text color={themeColors.text.muted} fontSize="sm">
                            尝试使用不同的关键词
@@ -837,7 +837,7 @@ const DataBrowser: React.FC = () => {
                    ) : (
                      <Flex justify="center" align="center" py={10}>
                        <VStack spacing={3}>
-                          <Icon as={FaFolder} color={themeColors.text.muted} boxSize={12} />
+                          <Icon as={Folder} color={themeColors.text.muted} boxSize={12} />
                          <Text color={themeColors.text.muted}>
                            {currentNode.children && currentNode.children.length > 0
                              ? '该节点包含子分类，请展开查看'
@@ -850,7 +850,7 @@ const DataBrowser: React.FC = () => {
                ) : (
                  <Flex justify="center" align="center" py={20}>
                    <VStack spacing={4}>
-                      <Icon as={FaDatabase} color={themeColors.primary.gold} boxSize={16} />
+                      <Icon as={Database} color={themeColors.primary.gold} boxSize={16} />
                      <Text color={themeColors.text.secondary} fontSize="lg" textAlign="center">
                        选择左侧分类树节点查看详情
                      </Text>