vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
zdl
2025-12-25 12:25:28 +08:00
parent d4e671428d
commit c820cfa804
52 changed files with 426 additions and 468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/views/EventDetail/components/EventHeader.js
View File

@@ -25,15 +25,14 @@ import {
StatArrow
} from '@chakra-ui/react';
import {
FaHeart,
FaRegHeart,
FaEye,
FaComment,
FaUsers,
FaClock,
FaCalendarAlt,
FaChartLine
} from 'react-icons/fa';
Heart,
Eye,
MessageCircle,
Users,
Clock,
Calendar,
LineChart
} from 'lucide-react';
const EventHeader = ({ event, onFollowToggle }) => {
// 颜色主题
@@ -174,7 +173,7 @@ const EventHeader = ({ event, onFollowToggle }) => {
</HStack>
<HStack spacing={3}>
<Icon as={FaCalendarAlt} color={textSecondary} />
<Icon as={Calendar} color={textSecondary} />
<VStack align="flex-start" spacing={0}>
<Text fontSize="sm" color={textPrimary}>
{formatDate(event.created_at)}
@@ -190,7 +189,7 @@ const EventHeader = ({ event, onFollowToggle }) => {
{/* 右侧关注按钮 */}
<Flex align="flex-start" justify="center">
<Button
leftIcon={<Icon as={event.is_following ? FaHeart : FaRegHeart} />}
leftIcon={<Icon as={Heart} fill={event.is_following ? "currentColor" : "none"} />}
colorScheme={event.is_following ? "red" : "blue"}
variant={event.is_following ? "solid" : "outline"}
size="lg"
@@ -226,7 +225,7 @@ const EventHeader = ({ event, onFollowToggle }) => {
>
<StatLabel fontSize="xs" color={textSecondary}>
<HStack justify="center" spacing={1}>
<Icon as={FaEye} />
<Icon as={Eye} />
<Text>浏览量</Text>
</HStack>
</StatLabel>
@@ -246,7 +245,7 @@ const EventHeader = ({ event, onFollowToggle }) => {
>
<StatLabel fontSize="xs" color={textSecondary}>
<HStack justify="center" spacing={1}>
<Icon as={FaComment} />
<Icon as={MessageCircle} />
<Text>回复数</Text>
</HStack>
</StatLabel>
@@ -266,7 +265,7 @@ const EventHeader = ({ event, onFollowToggle }) => {
>
<StatLabel fontSize="xs" color={textSecondary}>
<HStack justify="center" spacing={1}>
<Icon as={FaUsers} />
<Icon as={Users} />
<Text>关注数</Text>
</HStack>
</StatLabel>
@@ -286,7 +285,7 @@ const EventHeader = ({ event, onFollowToggle }) => {
>
<StatLabel fontSize="xs" color={textSecondary}>
<HStack justify="center" spacing={1}>
<Icon as={FaChartLine} />
<Icon as={LineChart} />
<Text>热度分</Text>
</HStack>
</StatLabel>

14
src/views/EventDetail/components/HistoricalEvents.js
View File

@@ -27,9 +27,9 @@ import {
Tooltip
} from '@chakra-ui/react';
import {
FaChartLine,
FaInfoCircle
} from 'react-icons/fa';
LineChart,
Info
} from 'lucide-react';
import { Tag } from 'antd';
import { RobotOutlined } from '@ant-design/icons';
import { stockService } from '@services/eventService';
@@ -230,7 +230,7 @@ const HistoricalEvents = ({
borderRadius="md"
>
<HStack spacing={3}>
<Icon as={FaChartLine} color="yellow.600" boxSize="20px" />
<Icon as={LineChart} color="yellow.600" boxSize="20px" />
<VStack align="flex-start" spacing={1}>
<Text fontSize="sm" fontWeight="bold" color="yellow.800">
超预期得分: {expectationScore}
@@ -306,7 +306,7 @@ const HistoricalEvents = ({
{/* 右侧：相关股票按钮 */}
<Button
size="sm"
leftIcon={<Icon as={FaChartLine} />}
leftIcon={<Icon as={LineChart} boxSize={4} />}
onClick={(e) => {
e.stopPropagation();
handleViewStocks(event);
@@ -467,7 +467,7 @@ const StocksList = ({ stocks, eventTradingDate }) => {
if (!stocks || stocks.length === 0) {
return (
<Box textAlign="center" py={12} color={textSecondary}>
<Icon as={FaInfoCircle} boxSize="48px" mb={4} />
<Icon as={Info} boxSize="48px" mb={4} />
<Text fontSize="lg" mb={2}>暂无相关股票数据</Text>
<Text fontSize="sm">该历史事件暂未关联股票信息</Text>
</Box>
@@ -533,7 +533,7 @@ const StocksList = ({ stocks, eventTradingDate }) => {
variant="ghost"
colorScheme={stock.event_day_change_pct > 0 ? 'red' : stock.event_day_change_pct < 0 ? 'green' : 'gray'}
onClick={() => handleOpenKLine(stock)}
rightIcon={<Icon as={FaChartLine} boxSize={3} />}
rightIcon={<Icon as={LineChart} boxSize={3} />}
px={2}
>
<Text

44
src/views/EventDetail/components/LimitAnalyse.js
View File

@@ -42,15 +42,15 @@ import {
Container,
} from '@chakra-ui/react';
import {
FiTrendingUp,
FiBarChart2,
FiPieChart,
FiActivity,
FiDownload,
FiCalendar,
FiTarget,
FiZap,
} from 'react-icons/fi';
TrendingUp,
BarChart2,
PieChart,
Activity,
Download,
Calendar,
Target,
Zap,
} from 'lucide-react';
import 'echarts-wordcloud';
// 导入现有的卡片组件
@@ -484,7 +484,7 @@ const LimitAnalyse = () => {
<HStack justify="space-between" align="center">
<VStack align="start" spacing={2}>
<HStack spacing={3}>
<Icon as={FiTrendingUp} color="blue.500" boxSize={6} />
<Icon as={TrendingUp} color="blue.500" boxSize={6} />
<Text fontSize="xl" fontWeight="bold">
涨停分析
</Text>
@@ -508,7 +508,7 @@ const LimitAnalyse = () => {
))}
</Select>
<Button
leftIcon={<FiDownload />}
leftIcon={<Icon as={Download} boxSize={4} />}
colorScheme="blue"
variant="outline"
onClick={() => handleExport('excel')}
@@ -536,7 +536,7 @@ const LimitAnalyse = () => {
<Card bg={cardBg} shadow="xl" borderRadius="2xl" overflow="hidden">
<CardHeader>
<HStack spacing={3}>
<Icon as={FiPieChart} color="blue.500" boxSize={5} />
<Icon as={PieChart} color="blue.500" boxSize={5} />
<Text fontSize="lg" fontWeight="bold">
板块分布
</Text>
@@ -564,7 +564,7 @@ const LimitAnalyse = () => {
<Card bg={cardBg} shadow="xl" borderRadius="2xl" overflow="hidden">
<CardHeader>
<HStack spacing={3}>
<Icon as={FiBarChart2} color="green.500" boxSize={5} />
<Icon as={BarChart2} color="green.500" boxSize={5} />
<Text fontSize="lg" fontWeight="bold">
板块股票数量
</Text>
@@ -592,7 +592,7 @@ const LimitAnalyse = () => {
<Card bg={cardBg} shadow="xl" borderRadius="2xl" overflow="hidden">
<CardHeader>
<HStack spacing={3}>
<Icon as={FiPieChart} color="purple.500" boxSize={5} />
<Icon as={PieChart} color="purple.500" boxSize={5} />
<Text fontSize="lg" fontWeight="bold">
板块关联TOP10
</Text>
@@ -637,7 +637,7 @@ const LimitAnalyse = () => {
<Card bg={cardBg} shadow="xl" borderRadius="2xl" overflow="hidden">
<CardHeader>
<HStack spacing={3}>
<Icon as={FiPieChart} color="purple.500" boxSize={5} />
<Icon as={PieChart} color="purple.500" boxSize={5} />
<Text fontSize="lg" fontWeight="bold">
板块关联关系图
</Text>
@@ -670,7 +670,7 @@ const LimitAnalyse = () => {
<Card bg={cardBg} shadow="xl" borderRadius="2xl" overflow="hidden">
<CardHeader>
<HStack spacing={3}>
<Icon as={FiActivity} color="orange.500" boxSize={5} />
<Icon as={Activity} color="orange.500" boxSize={5} />
<Text fontSize="lg" fontWeight="bold">
热点词云
</Text>
@@ -691,7 +691,7 @@ const LimitAnalyse = () => {
<Card bg={cardBg} shadow="xl" borderRadius="2xl">
<CardHeader>
<HStack spacing={3}>
<Icon as={FiActivity} color="purple.500" boxSize={5} />
<Icon as={Activity} color="purple.500" boxSize={5} />
<Text fontSize="lg" fontWeight="bold">
数据统计
</Text>
@@ -700,25 +700,25 @@ const LimitAnalyse = () => {
<CardBody>
<Grid templateColumns="repeat(auto-fit, minmax(200px, 1fr))" gap={4}>
<StatCard
icon={FiTarget}
icon={Target}
label="涨停股票总数"
value={totalStocks}
color="blue"
/>
<StatCard
icon={FiBarChart2}
icon={BarChart2}
label="涉及板块数"
value={sectorCount}
color="green"
/>
<StatCard
icon={FiTrendingUp}
icon={TrendingUp}
label="平均涨幅"
value={`${avgChange}%`}
color="orange"
/>
<StatCard
icon={FiZap}
icon={Zap}
label="最大涨幅"
value={`${maxChange}%`}
color="red"
@@ -735,7 +735,7 @@ const LimitAnalyse = () => {
<Card bg={cardBg} shadow="xl" borderRadius="2xl">
<CardHeader>
<HStack spacing={3}>
<Icon as={FiBarChart2} color="teal.500" boxSize={5} />
<Icon as={BarChart2} color="teal.500" boxSize={5} />
<Text fontSize="lg" fontWeight="bold">
板块详细数据
</Text>

20
src/views/EventDetail/components/RelatedConcepts.js
View File

@@ -29,7 +29,7 @@ import {
Center,
Divider
} from '@chakra-ui/react';
import { FaEye, FaExternalLinkAlt, FaChartLine, FaCalendarAlt } from 'react-icons/fa';
import { Eye, ExternalLink, LineChart, Calendar } from 'lucide-react';
import dayjs from 'dayjs';
import tradingDayUtils from '../../../utils/tradingDayUtils'; // 引入交易日工具
import { logger } from '../../../utils/logger';
@@ -230,7 +230,7 @@ const ConceptCard = ({ concept, tradingDate, onViewDetails }) => {
<Button
size="sm"
colorScheme="blue"
leftIcon={<FaChartLine />}
leftIcon={<Icon as={LineChart} boxSize={4} />}
flex={1}
onClick={(e) => {
e.stopPropagation();
@@ -243,7 +243,7 @@ const ConceptCard = ({ concept, tradingDate, onViewDetails }) => {
size="sm"
variant="outline"
colorScheme="blue"
leftIcon={<FaEye />}
leftIcon={<Icon as={Eye} boxSize={4} />}
flex={1}
onClick={(e) => {
e.stopPropagation();
@@ -532,7 +532,7 @@ const RelatedConcepts = ({ eventTitle, eventTime, eventId, loading: externalLoad
<Button
colorScheme="blue"
size="lg"
leftIcon={<FaChartLine />}
leftIcon={<Icon as={LineChart} boxSize={5} />}
onClick={() => window.open('https://valuefrontier.cn/concepts', '_blank')}
>
进入概念中心
@@ -547,7 +547,7 @@ const RelatedConcepts = ({ eventTitle, eventTime, eventId, loading: externalLoad
{effectiveTradingDate && (
<Box mb={4} p={3} bg={bgColor} borderRadius="md">
<HStack spacing={2}>
<FaCalendarAlt color={textColor} />
<Icon as={Calendar} color={textColor} boxSize={4} />
<Text fontSize="sm" color={textColor}>
涨跌幅数据日期：{effectiveTradingDate}
{eventTime && effectiveTradingDate !== dayjs(eventTime).format('YYYY-MM-DD') && (
@@ -578,7 +578,7 @@ const RelatedConcepts = ({ eventTitle, eventTime, eventId, loading: externalLoad
<Button
colorScheme="blue"
size="lg"
leftIcon={<FaChartLine />}
leftIcon={<Icon as={LineChart} boxSize={5} />}
onClick={() => window.open('https://valuefrontier.cn/concepts', '_blank')}
px={8}
py={6}
@@ -641,7 +641,7 @@ const RelatedConcepts = ({ eventTitle, eventTime, eventId, loading: externalLoad
{selectedConcept?.description && (
<Box>
<HStack mb={3}>
<Icon as={FaChartLine} color="blue.500" />
<Icon as={LineChart} color="blue.500" />
<Text fontSize="md" fontWeight="bold">
概念解析
</Text>
@@ -666,7 +666,7 @@ const RelatedConcepts = ({ eventTitle, eventTime, eventId, loading: externalLoad
{selectedConcept?.happened_times && selectedConcept.happened_times.length > 0 && (
<Box>
<HStack mb={3}>
<Icon as={FaCalendarAlt} color="purple.500" />
<Icon as={Calendar} color="purple.500" />
<Text fontSize="md" fontWeight="bold">
历史触发时间
</Text>
@@ -691,7 +691,7 @@ const RelatedConcepts = ({ eventTitle, eventTime, eventId, loading: externalLoad
{selectedConcept?.stocks && selectedConcept.stocks.length > 0 && (
<Box>
<HStack mb={3}>
<Icon as={FaEye} color="green.500" />
<Icon as={Eye} color="green.500" />
<Text fontSize="md" fontWeight="bold">
核心相关股票 ({selectedConcept.stock_count}只)
</Text>
@@ -760,7 +760,7 @@ const RelatedConcepts = ({ eventTitle, eventTime, eventId, loading: externalLoad
onClick={() => {
window.open(`https://valuefrontier.cn/htmls/${encodeURIComponent(selectedConcept.concept)}.html`, '_blank');
}}
leftIcon={<FaExternalLinkAlt />}
leftIcon={<Icon as={ExternalLink} boxSize={4} />}
>
查看概念详情页
</Button>

20
src/views/EventDetail/components/RelatedStocks.js
View File

@@ -41,12 +41,12 @@ import {
useToast
} from '@chakra-ui/react';
import {
FaPlus,
FaTrash,
FaChartLine,
FaRedo,
FaSearch
} from 'react-icons/fa';
Plus,
Trash2,
LineChart,
RefreshCw,
Search
} from 'lucide-react';
import { echarts } from '@lib/echarts';
import StockChartModal from '../../../components/StockChart/StockChartModal';
@@ -297,7 +297,7 @@ const RelatedStocks = ({
<Flex mb={4} align="center" wrap="wrap" gap={4}>
{/* 搜索框 */}
<HStack>
<FaSearch />
<Icon as={Search} boxSize={4} />
<Input
placeholder="搜索股票代码或名称..."
value={searchTerm}
@@ -313,7 +313,7 @@ const RelatedStocks = ({
<HStack>
<Tooltip label="刷新报价">
<IconButton
icon={<FaRedo />}
icon={<Icon as={RefreshCw} boxSize={4} />}
size="sm"
onClick={handleRefreshQuotes}
isLoading={quotesLoading}
@@ -487,7 +487,7 @@ const RelatedStocks = ({
<Tooltip label="查看K线图">
<IconButton
icon={<FaChartLine />}
icon={<Icon as={LineChart} boxSize={3} />}
size="xs"
onClick={() => handleShowChart(stock)}
aria-label="查看K线图"
@@ -496,7 +496,7 @@ const RelatedStocks = ({
<Tooltip label="删除">
<IconButton
icon={<FaTrash />}
icon={<Icon as={Trash2} boxSize={3} />}
size="xs"
colorScheme="red"
variant="ghost"

5
src/views/EventDetail/components/TransmissionChainAnalysis.js
View File

@@ -32,8 +32,7 @@ import {
Tooltip,
Center
} from '@chakra-ui/react';
import { InfoIcon, ViewIcon } from '@chakra-ui/icons';
import { Share2, GitBranch, Inbox } from 'lucide-react';
import { Info, Eye, Share2, GitBranch, Inbox } from 'lucide-react';
import ReactECharts from 'echarts-for-react';
import { eventService } from '../../../services/eventService';
import CitedContent from '../../../components/Citation/CitedContent';
@@ -875,7 +874,7 @@ const TransmissionChainAnalysis = ({ eventId }) => {
py={1}
borderRadius="md"
>
<Icon as={ViewIcon} mr={1} boxSize={3} />
<Eye size={12} style={{ display: 'inline', marginRight: '4px' }} />
点击节点查看详情
</Text>
{chartReady && (