refactor(icons): 迁移 views/Concept 目录图标到 lucide-react
- @chakra-ui/icons → lucide-react - react-icons → lucide-react - 处理 Box/BoxIcon 命名冲突 - 涉及 6 个组件文件 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -79,9 +79,43 @@ import {
|
||||
Collapse,
|
||||
useBreakpointValue,
|
||||
} from '@chakra-ui/react';
|
||||
import { SearchIcon, ViewIcon, CalendarIcon, ExternalLinkIcon, StarIcon, ChevronDownIcon, InfoIcon, CloseIcon, ChevronRightIcon } from '@chakra-ui/icons';
|
||||
import { FaThLarge, FaList, FaTags, FaChartLine, FaRobot, FaTable, FaHistory, FaBrain, FaLightbulb, FaRocket, FaShieldAlt, FaCalendarAlt, FaArrowUp, FaArrowDown, FaNewspaper, FaFileAlt, FaExpand, FaCompress, FaClock, FaLock, FaSitemap, FaLayerGroup, FaCube, FaProjectDiagram } from 'react-icons/fa';
|
||||
import { BsGraphUp, BsLightningFill } from 'react-icons/bs';
|
||||
import {
|
||||
Search,
|
||||
Eye,
|
||||
Calendar,
|
||||
ExternalLink,
|
||||
Star,
|
||||
ChevronDown,
|
||||
Info,
|
||||
X,
|
||||
ChevronRight,
|
||||
LayoutGrid,
|
||||
List,
|
||||
Tags,
|
||||
LineChart,
|
||||
Bot,
|
||||
Table2,
|
||||
History,
|
||||
Brain,
|
||||
Lightbulb,
|
||||
Rocket,
|
||||
Shield,
|
||||
CalendarDays,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
Newspaper,
|
||||
FileText,
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
Clock,
|
||||
Lock,
|
||||
GitBranch,
|
||||
Layers,
|
||||
Box as BoxIcon,
|
||||
Network,
|
||||
TrendingUp,
|
||||
Zap,
|
||||
} from 'lucide-react';
|
||||
import { keyframes } from '@emotion/react';
|
||||
import ConceptTimelineModal from './ConceptTimelineModal';
|
||||
import ConceptStatsPanel from './components/ConceptStatsPanel';
|
||||
@@ -769,7 +803,7 @@ const ConceptCenter = () => {
|
||||
|
||||
return (
|
||||
<HStack spacing={2}>
|
||||
<Icon as={CalendarIcon} boxSize={3} color="blue.500" />
|
||||
<Icon as={Calendar} boxSize={3} color="blue.500" />
|
||||
<Text fontSize="xs" color="gray.600" fontWeight="medium">
|
||||
添加于 {new Date(addedDate).toLocaleDateString('zh-CN')}
|
||||
</Text>
|
||||
@@ -1021,7 +1055,7 @@ const ConceptCenter = () => {
|
||||
<Flex align="center" justify="space-between">
|
||||
<Box flex={1}>
|
||||
<HStack spacing={2} mb={{ base: 1, md: 2 }}>
|
||||
<Icon as={FaChartLine} boxSize={3} color="purple.300" />
|
||||
<Icon as={LineChart} boxSize={3} color="purple.300" />
|
||||
<Text fontSize="xs" color="purple.200" fontWeight="bold">
|
||||
热门个股
|
||||
</Text>
|
||||
@@ -1068,7 +1102,7 @@ const ConceptCenter = () => {
|
||||
</>
|
||||
) : (
|
||||
<HStack spacing={1}>
|
||||
<Icon as={FaLock} boxSize="10px" color="yellow.400" />
|
||||
<Icon as={Lock} boxSize="10px" color="yellow.400" />
|
||||
<Text fontSize="xs" color="yellow.400" fontWeight="medium">
|
||||
升级查看{concept.stocks.length}只个股
|
||||
</Text>
|
||||
@@ -1077,7 +1111,7 @@ const ConceptCenter = () => {
|
||||
</HStack>
|
||||
</Box>
|
||||
<Icon
|
||||
as={hasFeatureAccess('hot_stocks') ? ChevronRightIcon : FaLock}
|
||||
as={hasFeatureAccess('hot_stocks') ? ChevronRight : FaLock}
|
||||
color={hasFeatureAccess('hot_stocks') ? 'purple.300' : 'yellow.400'}
|
||||
boxSize={4}
|
||||
/>
|
||||
@@ -1097,7 +1131,7 @@ const ConceptCenter = () => {
|
||||
if (latestOutbreak) {
|
||||
return (
|
||||
<HStack spacing={2}>
|
||||
<Icon as={BsLightningFill} boxSize={3} color="orange.400" />
|
||||
<Icon as={Zap} boxSize={3} color="orange.400" />
|
||||
<Text fontSize="xs" color="orange.300" fontWeight="medium">
|
||||
爆发于 {new Date(latestOutbreak).toLocaleDateString('zh-CN')}
|
||||
</Text>
|
||||
@@ -1106,7 +1140,7 @@ const ConceptCenter = () => {
|
||||
} else if (addedDate) {
|
||||
return (
|
||||
<HStack spacing={2}>
|
||||
<Icon as={CalendarIcon} boxSize={3} color="cyan.400" />
|
||||
<Icon as={Calendar} boxSize={3} color="cyan.400" />
|
||||
<Text fontSize="xs" color="whiteAlpha.600" fontWeight="medium">
|
||||
添加于 {new Date(addedDate).toLocaleDateString('zh-CN')}
|
||||
</Text>
|
||||
@@ -1202,7 +1236,7 @@ const ConceptCenter = () => {
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.100"
|
||||
>
|
||||
<Icon as={FaTags} boxSize={{ base: 6, md: 8 }} color="white" opacity={0.8} />
|
||||
<Icon as={Tags} boxSize={{ base: 6, md: 8 }} color="white" opacity={0.8} />
|
||||
{hasChange && (
|
||||
<Badge
|
||||
position="absolute"
|
||||
@@ -1247,7 +1281,7 @@ const ConceptCenter = () => {
|
||||
_hover={{ color: 'purple.300' }}
|
||||
transition="color 0.2s"
|
||||
>
|
||||
<Icon as={FaChartLine} boxSize={4} color="purple.300" />
|
||||
<Icon as={LineChart} boxSize={4} color="purple.300" />
|
||||
<Text fontSize="sm" fontWeight="medium" color="whiteAlpha.800" _groupHover={{ color: 'purple.300' }}>
|
||||
{concept.stock_count || 0} 只股票
|
||||
</Text>
|
||||
@@ -1255,7 +1289,7 @@ const ConceptCenter = () => {
|
||||
|
||||
{hasChange && concept.price_info?.trade_date && (
|
||||
<HStack spacing={1}>
|
||||
<Icon as={FaCalendarAlt} boxSize={4} color="cyan.400" />
|
||||
<Icon as={CalendarDays} boxSize={4} color="cyan.400" />
|
||||
<Text fontSize="sm" color="whiteAlpha.600">
|
||||
{new Date(concept.price_info.trade_date).toLocaleDateString('zh-CN')}
|
||||
</Text>
|
||||
@@ -1270,7 +1304,7 @@ const ConceptCenter = () => {
|
||||
if (latestOutbreak) {
|
||||
return (
|
||||
<HStack spacing={1}>
|
||||
<Icon as={BsLightningFill} boxSize={4} color="orange.400" />
|
||||
<Icon as={Zap} boxSize={4} color="orange.400" />
|
||||
<Text fontSize="sm" color="orange.300" fontWeight="medium">
|
||||
爆发于 {new Date(latestOutbreak).toLocaleDateString('zh-CN')}
|
||||
</Text>
|
||||
@@ -1279,7 +1313,7 @@ const ConceptCenter = () => {
|
||||
} else if (addedDate) {
|
||||
return (
|
||||
<HStack spacing={1}>
|
||||
<Icon as={CalendarIcon} boxSize={4} color="cyan.400" />
|
||||
<Icon as={Calendar} boxSize={4} color="cyan.400" />
|
||||
<Text fontSize="sm" color="whiteAlpha.600">
|
||||
添加于 {new Date(addedDate).toLocaleDateString('zh-CN')}
|
||||
</Text>
|
||||
@@ -1297,7 +1331,7 @@ const ConceptCenter = () => {
|
||||
<HStack spacing={3}>
|
||||
<Button
|
||||
size="sm"
|
||||
leftIcon={<ViewIcon />}
|
||||
leftIcon={<Eye size={16} />}
|
||||
bg="whiteAlpha.100"
|
||||
color="white"
|
||||
border="1px solid"
|
||||
@@ -1373,7 +1407,7 @@ const ConceptCenter = () => {
|
||||
) : (
|
||||
<WrapItem>
|
||||
<HStack spacing={1}>
|
||||
<Icon as={FaLock} boxSize="8px" color="yellow.400" />
|
||||
<Icon as={Lock} boxSize="8px" color="yellow.400" />
|
||||
<Text fontSize="xs" color="yellow.400" fontWeight="medium">
|
||||
升级查看{concept.stocks.length}只
|
||||
</Text>
|
||||
@@ -1518,7 +1552,7 @@ const ConceptCenter = () => {
|
||||
_hover={{ opacity: 1 }}
|
||||
transition="opacity 0.2s"
|
||||
>
|
||||
<Icon as={InfoIcon} color="blue.300" boxSize={3} />
|
||||
<Icon as={Info} color="blue.300" boxSize={3} />
|
||||
<Text fontSize="xs" color="blue.200">
|
||||
数据更新至 {latestTradeDate.toLocaleDateString('zh-CN')}
|
||||
</Text>
|
||||
@@ -1585,7 +1619,7 @@ const ConceptCenter = () => {
|
||||
{/* 标题区域 */}
|
||||
<VStack spacing={3} textAlign="center">
|
||||
<HStack spacing={3} justify="center">
|
||||
<Icon as={FaBrain} boxSize={10} color="cyan.300" filter="drop-shadow(0 0 10px rgba(6, 182, 212, 0.5))" />
|
||||
<Icon as={Brain} boxSize={10} color="cyan.300" filter="drop-shadow(0 0 10px rgba(6, 182, 212, 0.5))" />
|
||||
</HStack>
|
||||
|
||||
<VStack spacing={1}>
|
||||
@@ -1601,7 +1635,7 @@ const ConceptCenter = () => {
|
||||
概念中心
|
||||
</Heading>
|
||||
<HStack spacing={2} justify="center">
|
||||
<Icon as={FaClock} boxSize={3} color="cyan.200" />
|
||||
<Icon as={Clock} boxSize={3} color="cyan.200" />
|
||||
<Text fontSize="xs" fontWeight="medium" opacity={0.8}>
|
||||
数据约下午4点更新
|
||||
</Text>
|
||||
@@ -1627,21 +1661,21 @@ const ConceptCenter = () => {
|
||||
boxShadow="0 8px 32px rgba(0, 0, 0, 0.3)"
|
||||
>
|
||||
<HStack spacing={2}>
|
||||
<Icon as={FaTags} boxSize={4} color="cyan.300" />
|
||||
<Icon as={Tags} boxSize={4} color="cyan.300" />
|
||||
<VStack spacing={0} align="start">
|
||||
<Text fontSize="xl" fontWeight="bold" color="cyan.300">500+</Text>
|
||||
<Text fontSize="xs" opacity={0.7}>概念板块</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
<HStack spacing={2}>
|
||||
<Icon as={FaChartLine} boxSize={4} color="purple.300" />
|
||||
<Icon as={LineChart} boxSize={4} color="purple.300" />
|
||||
<VStack spacing={0} align="start">
|
||||
<Text fontSize="xl" fontWeight="bold" color="purple.300">5000+</Text>
|
||||
<Text fontSize="xs" opacity={0.7}>相关个股</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
<HStack spacing={2}>
|
||||
<Icon as={BsLightningFill} boxSize={4} color="yellow.300" />
|
||||
<Icon as={Zap} boxSize={4} color="yellow.300" />
|
||||
<VStack spacing={0} align="start">
|
||||
<Text fontSize="xl" fontWeight="bold" color="yellow.300">24/7</Text>
|
||||
<Text fontSize="xs" opacity={0.7}>实时监控</Text>
|
||||
@@ -1668,7 +1702,7 @@ const ConceptCenter = () => {
|
||||
>
|
||||
<InputGroup size="lg" flex={1}>
|
||||
<InputLeftElement pointerEvents="none" h="full">
|
||||
<Icon as={SearchIcon} color="purple.400" boxSize={5} />
|
||||
<Icon as={Search} color="purple.400" boxSize={5} />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
placeholder="搜索概念板块、个股、关键词..."
|
||||
@@ -1696,7 +1730,7 @@ const ConceptCenter = () => {
|
||||
transform="translateY(-50%)"
|
||||
size="sm"
|
||||
aria-label="清除搜索"
|
||||
icon={<CloseIcon />}
|
||||
icon={<X size={16} />}
|
||||
variant="ghost"
|
||||
color="gray.500"
|
||||
borderRadius="full"
|
||||
@@ -1711,7 +1745,7 @@ const ConceptCenter = () => {
|
||||
borderRadius="0 50px 50px 0"
|
||||
bgGradient="linear(135deg, #667eea 0%, #764ba2 100%)"
|
||||
color="white"
|
||||
leftIcon={<SearchIcon />}
|
||||
leftIcon={<Search size={16} />}
|
||||
_hover={{
|
||||
bgGradient: 'linear(135deg, #5568d3 0%, #663a8e 100%)',
|
||||
transform: 'scale(1.02)',
|
||||
@@ -1777,7 +1811,7 @@ const ConceptCenter = () => {
|
||||
{/* 排序方式 - 仅在列表视图显示 */}
|
||||
{viewMode === 'list' && (
|
||||
<HStack spacing={4} align="center">
|
||||
<Icon as={FaTags} boxSize={4} color="purple.300" />
|
||||
<Icon as={Tags} boxSize={4} color="purple.300" />
|
||||
<Text fontWeight="bold" color="white">排序方式：</Text>
|
||||
<Select
|
||||
value={sortBy}
|
||||
@@ -1812,7 +1846,7 @@ const ConceptCenter = () => {
|
||||
borderRadius="full"
|
||||
boxShadow="0 0 10px rgba(59, 130, 246, 0.4)"
|
||||
>
|
||||
<Icon as={InfoIcon} color="white" boxSize={3} />
|
||||
<Icon as={Info} color="white" boxSize={3} />
|
||||
<Text fontSize="xs" color="white" fontWeight="medium">
|
||||
智能排序
|
||||
</Text>
|
||||
@@ -1896,7 +1930,7 @@ const ConceptCenter = () => {
|
||||
{selectedDate && viewMode !== 'hierarchy' && viewMode !== 'force3d' && (
|
||||
<Box mb={4} p={3} bg="rgba(59, 130, 246, 0.2)" borderRadius="xl" borderLeft="4px solid" borderColor="blue.400">
|
||||
<HStack>
|
||||
<Icon as={InfoIcon} color="blue.300" />
|
||||
<Icon as={Info} color="blue.300" />
|
||||
<Text fontSize="sm" color="whiteAlpha.800">
|
||||
当前显示 <Text as="strong" color="cyan.300">{selectedDate.toLocaleDateString('zh-CN')}</Text> 的概念涨跌幅数据
|
||||
{searchQuery && <span>，搜索词：<Text as="strong" color="cyan.300">"{searchQuery}"</Text></span>}
|
||||
@@ -2030,7 +2064,7 @@ const ConceptCenter = () => {
|
||||
) : viewMode !== 'hierarchy' && viewMode !== 'force3d' ? (
|
||||
<Center h="400px">
|
||||
<VStack spacing={6}>
|
||||
<Icon as={FaTags} boxSize={20} color="whiteAlpha.300" />
|
||||
<Icon as={Tags} boxSize={20} color="whiteAlpha.300" />
|
||||
<VStack spacing={2}>
|
||||
<Text fontSize="xl" color="white" fontWeight="medium">暂无概念数据</Text>
|
||||
<Text color="whiteAlpha.600">
|
||||
@@ -2075,7 +2109,7 @@ const ConceptCenter = () => {
|
||||
>
|
||||
<CardBody p={6}>
|
||||
<VStack spacing={4} textAlign="center">
|
||||
<Icon as={FaChartLine} boxSize={12} color="whiteAlpha.300" />
|
||||
<Icon as={LineChart} boxSize={12} color="whiteAlpha.300" />
|
||||
<VStack spacing={2}>
|
||||
<Heading size="md" color="white">
|
||||
概念统计中心
|
||||
@@ -2087,7 +2121,7 @@ const ConceptCenter = () => {
|
||||
<Button
|
||||
bg="blue.500"
|
||||
color="white"
|
||||
leftIcon={<Icon as={FaRocket} />}
|
||||
leftIcon={<Icon as={Rocket} />}
|
||||
onClick={() => {
|
||||
setUpgradeFeature('pro');
|
||||
setUpgradeModalOpen(true);
|
||||
|
||||
Reference in New Issue
Block a user