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

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

Browse Source 
- @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
2025-12-25 12:24:38 +08:00
parent 29f6701de3
commit d4e671428d
6 changed files with 228 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/views/Concept/ConceptTimelineModal.js
View File

@@ -33,21 +33,21 @@ import {
useBreakpointValue,
} from '@chakra-ui/react';
import {
ChevronDownIcon,
ChevronRightIcon,
ExternalLinkIcon,
ViewIcon,
CalendarIcon,
} from '@chakra-ui/icons';
ChevronDown,
ChevronRight,
ExternalLink,
Eye,
Calendar,
} from 'lucide-react';
import {
FaChartLine,
FaArrowUp,
FaArrowDown,
FaHistory,
FaNewspaper,
FaFileAlt,
FaClock,
} from 'react-icons/fa';
LineChart,
ArrowUp,
ArrowDown,
History,
Newspaper as NewspaperIcon,
FileText,
Clock,
} from 'lucide-react';
import { keyframes } from '@emotion/react';
dayjs.locale('zh-cn');
@@ -179,13 +179,13 @@ const ConceptTimelineModal = ({
if (value > 0) {
return {
color: 'red',
icon: FaArrowUp,
icon: ArrowUp,
text: `+${value.toFixed(2)}%`
};
} else if (value < 0) {
return {
color: 'green',
icon: FaArrowDown,
icon: ArrowDown,
text: `${value.toFixed(2)}%`
};
} else {
@@ -691,7 +691,7 @@ const ConceptTimelineModal = ({
>
<HStack spacing={{ base: 2, md: 4 }} flexWrap="wrap">
<Icon
as={FaChartLine}
as={LineChart}
boxSize={{ base: 4, md: 6 }}
color="cyan.400"
/>
@@ -815,7 +815,7 @@ const ConceptTimelineModal = ({
borderColor="red.400"
flexShrink={0}
>
<Icon as={FaArrowUp} color="red.400" boxSize={{ base: 2, md: 3 }} />
<Icon as={ArrowUp} color="red.400" boxSize={{ base: 2, md: 3 }} />
<Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="medium" color="whiteAlpha.900" whiteSpace="nowrap">上涨</Text>
</HStack>
<HStack
@@ -828,7 +828,7 @@ const ConceptTimelineModal = ({
borderColor="green.400"
flexShrink={0}
>
<Icon as={FaArrowDown} color="green.400" boxSize={{ base: 2, md: 3 }} />
<Icon as={ArrowDown} color="green.400" boxSize={{ base: 2, md: 3 }} />
<Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="medium" color="whiteAlpha.900" whiteSpace="nowrap">下跌</Text>
</HStack>
<HStack
@@ -874,7 +874,7 @@ const ConceptTimelineModal = ({
borderColor="whiteAlpha.200"
>
<Icon
as={FaHistory}
as={History}
boxSize={24}
color="purple.400"
opacity={0.6}
@@ -928,7 +928,7 @@ const ConceptTimelineModal = ({
<VStack align="start" spacing={3} position="relative" zIndex={1}>
<HStack spacing={3}>
<Icon
as={CalendarIcon}
as={Calendar}
boxSize={6}
color="cyan.400"
/>
@@ -991,7 +991,7 @@ const ConceptTimelineModal = ({
borderColor="blue.500"
>
<HStack spacing={2}>
<Icon as={FaNewspaper} color="blue.400" boxSize={5} />
<Icon as={Newspaper} color="blue.400" boxSize={5} />
<Text fontWeight="bold" fontSize="lg" color="blue.300">
{selectedDateData.events.filter(e => e.type === 'news').length}
</Text>
@@ -1007,7 +1007,7 @@ const ConceptTimelineModal = ({
borderColor="green.500"
>
<HStack spacing={2}>
<Icon as={FaFileAlt} color="green.400" boxSize={5} />
<Icon as={FileText} color="green.400" boxSize={5} />
<Text fontWeight="bold" fontSize="lg" color="green.300">
{selectedDateData.events.filter(e => e.type === 'report').length}
</Text>
@@ -1109,7 +1109,7 @@ const ConceptTimelineModal = ({
<HStack spacing={4} w="100%" justify="space-between" align="center" mt={1}>
{event.time && (
<HStack spacing={1}>
<Icon as={FaClock} color="whiteAlpha.500" boxSize={3} />
<Icon as={Clock} color="whiteAlpha.500" boxSize={3} />
<Text fontSize="xs" color="whiteAlpha.500" fontWeight="medium">
{formatDateTime(event.time)}
</Text>
@@ -1120,7 +1120,7 @@ const ConceptTimelineModal = ({
size="sm"
colorScheme={event.type === 'news' ? 'blue' : 'green'}
variant="solid"
leftIcon={<ViewIcon />}
leftIcon={<Eye size={16} />}
boxShadow="sm"
_hover={{
transform: 'scale(1.05)',
@@ -1175,7 +1175,7 @@ const ConceptTimelineModal = ({
borderColor="whiteAlpha.200"
>
<Icon
as={FaHistory}
as={History}
boxSize={20}
color="purple.400"
opacity={0.6}
@@ -1286,7 +1286,7 @@ const ConceptTimelineModal = ({
size="sm"
bg="whiteAlpha.100"
color="white"
leftIcon={<ExternalLinkIcon />}
leftIcon={<ExternalLink size={16} />}
onClick={() => {
const url = formatUrl(selectedReport.content_url);
if (url) {
@@ -1379,7 +1379,7 @@ const ConceptTimelineModal = ({
size="sm"
bg="whiteAlpha.100"
color="white"
leftIcon={<ExternalLinkIcon />}
leftIcon={<ExternalLink size={16} />}
onClick={() => window.open(selectedNews.url, '_blank')}
_hover={{ bg: 'whiteAlpha.200' }}
>

11
src/views/Concept/components/BreadcrumbNav.js
View File

@@ -16,8 +16,7 @@ import {
Flex,
Tooltip,
} from '@chakra-ui/react';
import { ChevronRightIcon } from '@chakra-ui/icons';
import { FaFilter, FaTimes, FaHome } from 'react-icons/fa';
import { ChevronRight, Filter, X, Home } from 'lucide-react';
const BreadcrumbNav = ({
filter,
@@ -139,7 +138,7 @@ const BreadcrumbNav = ({
py={1}
borderRadius="full"
>
<Icon as={FaFilter} boxSize={3} />
<Icon as={Filter} boxSize={3} />
<Text fontSize="sm" fontWeight="bold">
层级筛选
</Text>
@@ -161,7 +160,7 @@ const BreadcrumbNav = ({
alignItems="center"
gap={1}
>
<Icon as={FaHome} boxSize={3} />
<Icon as={Home} boxSize={3} />
全部
</Badge>
</Tooltip>
@@ -169,7 +168,7 @@ const BreadcrumbNav = ({
{/* 面包屑路径 */}
{breadcrumbs.map((crumb, index) => (
<React.Fragment key={crumb.level}>
<Icon as={ChevronRightIcon} color={styles.chevron.color} boxSize={4} />
<Icon as={ChevronRight} color={styles.chevron.color} boxSize={4} />
<Badge
{...(isDarkMode ? {} : { colorScheme: styles.crumbBadge(crumb.level, index === breadcrumbs.length - 1).colorScheme })}
bg={isDarkMode ? styles.crumbBadge(crumb.level, index === breadcrumbs.length - 1).bg : undefined}
@@ -196,7 +195,7 @@ const BreadcrumbNav = ({
<Tooltip label="清除筛选" placement="top">
<IconButton
size="sm"
icon={<FaTimes />}
icon={<X />}
{...(isDarkMode ? {} : { colorScheme: 'red' })}
color={isDarkMode ? styles.clearBtn.color : undefined}
variant="ghost"

50
src/views/Concept/components/ConceptStatsPanel.js
View File

@@ -37,14 +37,16 @@ import {
useToast,
} from '@chakra-ui/react';
import {
FaArrowUp,
FaArrowDown,
FaChartLine,
FaNewspaper,
FaRocket,
FaCrown,
} from 'react-icons/fa';
import { BsLightningFill, BsGraphUp, BsGraphDown } from 'react-icons/bs';
ArrowUp,
ArrowDown,
LineChart,
Newspaper,
Rocket,
Crown,
Zap,
TrendingUp,
TrendingDown,
} from 'lucide-react';
const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
// 获取正确的API基础URL
@@ -274,7 +276,7 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
const tabsData = [
{
label: '涨幅榜',
icon: FaArrowUp,
icon: ArrowUp,
color: 'red',
data: statsData.hot_concepts,
renderItem: (item, index) => (
@@ -314,7 +316,7 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
</Badge>
{index === 0 && (
<Icon
as={FaCrown}
as={Crown}
position="absolute"
top="-8px"
right="-8px"
@@ -329,12 +331,12 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
</Text>
<HStack spacing={2} fontSize="xs" color="whiteAlpha.600">
<HStack spacing={1}>
<Icon as={FaChartLine} boxSize={2.5} />
<Icon as={LineChart} boxSize={2.5} />
<Text>{item.stock_count}股</Text>
</HStack>
<Text>·</Text>
<HStack spacing={1}>
<Icon as={FaNewspaper} boxSize={2.5} />
<Icon as={Newspaper} boxSize={2.5} />
<Text>{item.news_count}讯</Text>
</HStack>
</HStack>
@@ -349,7 +351,7 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
px={2}
py={1}
>
<Icon as={FaArrowUp} boxSize={2} mr={1} />
<Icon as={ArrowUp} boxSize={2} mr={1} />
{formatChange(item.change_pct)}
</Badge>
</Flex>
@@ -357,7 +359,7 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
},
{
label: '跌幅榜',
icon: FaArrowDown,
icon: ArrowDown,
color: 'green',
data: statsData.cold_concepts,
renderItem: (item, index) => (
@@ -400,12 +402,12 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
</Text>
<HStack spacing={2} fontSize="xs" color="whiteAlpha.600">
<HStack spacing={1}>
<Icon as={FaChartLine} boxSize={2.5} />
<Icon as={LineChart} boxSize={2.5} />
<Text>{item.stock_count}股</Text>
</HStack>
<Text>·</Text>
<HStack spacing={1}>
<Icon as={FaNewspaper} boxSize={2.5} />
<Icon as={Newspaper} boxSize={2.5} />
<Text>{item.news_count}讯</Text>
</HStack>
</HStack>
@@ -420,7 +422,7 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
px={2}
py={1}
>
<Icon as={FaArrowDown} boxSize={2} mr={1} />
<Icon as={ArrowDown} boxSize={2} mr={1} />
{formatChange(item.change_pct)}
</Badge>
</Flex>
@@ -428,7 +430,7 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
},
{
label: '波动榜',
icon: BsLightningFill,
icon: Zap,
color: 'purple',
data: statsData.volatile_concepts,
renderItem: (item, index) => (
@@ -468,7 +470,7 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
</Badge>
{index === 0 && (
<Icon
as={BsLightningFill}
as={Zap}
position="absolute"
top="-8px"
right="-8px"
@@ -495,7 +497,7 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
px={2}
py={1}
>
<Icon as={BsLightningFill} boxSize={2} mr={1} />
<Icon as={Zap} boxSize={2} mr={1} />
{item.volatility?.toFixed(1)}%
</Badge>
</Flex>
@@ -503,7 +505,7 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
},
{
label: '连涨榜',
icon: FaRocket,
icon: Rocket,
color: 'cyan',
data: statsData.momentum_concepts,
renderItem: (item, index) => (
@@ -543,7 +545,7 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
</Badge>
{index === 0 && (
<Icon
as={FaRocket}
as={Rocket}
position="absolute"
top="-8px"
right="-8px"
@@ -570,7 +572,7 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
px={2}
py={1}
>
<Icon as={FaRocket} boxSize={2} mr={1} />
<Icon as={Rocket} boxSize={2} mr={1} />
{item.consecutive_days}天
</Badge>
</Flex>
@@ -620,7 +622,7 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
<Flex justify="space-between" align="center" w="full">
<HStack spacing={2}>
<Box p={2} bg="whiteAlpha.100" borderRadius="lg" border="1px solid" borderColor="cyan.500">
<Icon as={FaChartLine} color="cyan.400" boxSize={4} />
<Icon as={LineChart} color="cyan.400" boxSize={4} />
</Box>
<VStack align="start" spacing={0}>
<Heading size="sm" color="white" fontWeight="bold">

38
src/views/Concept/components/ForceGraphView.js
View File

@@ -31,18 +31,18 @@ import {
} from '@chakra-ui/react';
import { keyframes } from '@emotion/react';
import {
FaLayerGroup,
FaSync,
FaExpand,
FaCompress,
FaHome,
FaArrowUp,
FaArrowDown,
FaCircle,
FaTh,
FaChevronRight,
FaArrowLeft,
} from 'react-icons/fa';
Layers,
RefreshCw,
Maximize2,
Minimize2,
Home,
ArrowUp,
ArrowDown,
Circle,
Grid3x3,
ChevronRight,
ArrowLeft,
} from 'lucide-react';
import { logger } from '../../../utils/logger';
// 极光动画 - 黑金色主题
@@ -1052,7 +1052,7 @@ const ForceGraphView = ({
borderColor="whiteAlpha.100"
>
<VStack spacing={4}>
<Icon as={FaLayerGroup} boxSize={16} color="gray.600" />
<Icon as={Layers} boxSize={16} color="gray.600" />
<Text color="gray.400">加载失败：{error}</Text>
<Button
colorScheme="purple"
@@ -1078,7 +1078,7 @@ const ForceGraphView = ({
<Tooltip label="返回上一层" placement="bottom">
<IconButton
size="sm"
icon={<FaArrowLeft />}
icon={<ArrowLeft />}
onClick={handleGoBack}
bg="whiteAlpha.100"
color="white"
@@ -1104,7 +1104,7 @@ const ForceGraphView = ({
border="1px solid"
borderColor="whiteAlpha.200"
>
<Icon as={FaTh} color="purple.300" />
<Icon as={Grid3x3} color="purple.300" />
<Text color="white" fontWeight="bold" fontSize="sm">
概念矩形树图
</Text>
@@ -1123,7 +1123,7 @@ const ForceGraphView = ({
{breadcrumbItems.map((item, index) => (
<HStack key={index} spacing={2}>
{index > 0 && (
<Icon as={FaChevronRight} color="whiteAlpha.400" boxSize={3} />
<Icon as={ChevronRight} color="whiteAlpha.400" boxSize={3} />
)}
<Text
color={index === breadcrumbItems.length - 1 ? 'purple.300' : 'whiteAlpha.700'}
@@ -1153,7 +1153,7 @@ const ForceGraphView = ({
<Tooltip label="返回全部" placement="left">
<IconButton
size="sm"
icon={<FaHome />}
icon={<Home />}
onClick={handleGoHome}
bg="whiteAlpha.100"
color="white"
@@ -1174,7 +1174,7 @@ const ForceGraphView = ({
<Tooltip label="刷新数据" placement="left">
<IconButton
size="sm"
icon={<FaSync />}
icon={<RefreshCw />}
onClick={handleRefresh}
isLoading={priceLoading}
bg="whiteAlpha.100"
@@ -1195,7 +1195,7 @@ const ForceGraphView = ({
<Tooltip label={isFullscreen ? '退出全屏' : '全屏'} placement="left">
<IconButton
size="sm"
icon={isFullscreen ? <FaCompress /> : <FaExpand />}
icon={isFullscreen ? <Minimize2 /> : <Maximize2 />}
onClick={toggleFullscreen}
bg="whiteAlpha.100"
color="white"

170
src/views/Concept/components/HierarchyView.js
View File

@@ -27,87 +27,87 @@ import {
} from '@chakra-ui/react';
import { keyframes } from '@emotion/react';
import {
FaLayerGroup,
FaExpand,
FaCompress,
FaSync,
FaHome,
FaChevronRight,
FaBrain,
FaMicrochip,
FaRobot,
FaMobileAlt,
FaCar,
FaBolt,
FaRocket,
FaShieldAlt,
FaGlobe,
FaIndustry,
FaShoppingCart,
FaCoins,
FaHeartbeat,
FaAtom,
FaArrowUp,
FaArrowDown,
FaCubes,
FaServer,
FaCode,
FaMagic,
FaEye,
FaPlane,
FaSatellite,
FaBatteryFull,
FaSolarPanel,
FaTags,
FaExternalLinkAlt,
} from 'react-icons/fa';
Layers,
Maximize2,
Minimize2,
RefreshCw,
Home,
ChevronRight,
Brain,
Cpu,
Bot,
Smartphone,
Car,
Zap,
Rocket,
Shield,
Globe,
Factory,
ShoppingCart,
Coins,
Heart,
Atom,
ArrowUp,
ArrowDown,
Box as BoxIcon,
Server,
Code,
Sparkles,
Eye,
Plane,
Satellite,
BatteryFull,
Sun,
Tags,
ExternalLink,
} from 'lucide-react';
import { logger } from '../../../utils/logger';
// 一级分类图标映射
const LV1_ICONS = {
'人工智能': FaBrain,
'半导体': FaMicrochip,
'机器人': FaRobot,
'消费电子': FaMobileAlt,
'智能驾驶与汽车': FaCar,
'新能源与电力': FaBolt,
'空天经济': FaRocket,
'国防军工': FaShieldAlt,
'政策与主题': FaGlobe,
'周期与材料': FaIndustry,
'大消费': FaShoppingCart,
'数字经济与金融科技': FaCoins,
'全球宏观与贸易': FaGlobe,
'医药健康': FaHeartbeat,
'前沿科技': FaAtom,
'人工智能': Brain,
'半导体': Cpu,
'机器人': Bot,
'消费电子': Smartphone,
'智能驾驶与汽车': Car,
'新能源与电力': Zap,
'空天经济': Rocket,
'国防军工': Shield,
'政策与主题': Globe,
'周期与材料': Factory,
'大消费': ShoppingCart,
'数字经济与金融科技': Coins,
'全球宏观与贸易': Globe,
'医药健康': Heart,
'前沿科技': Atom,
};
// 二级分类图标映射
const LV2_ICONS = {
'AI基础设施': FaServer,
'AI模型与软件': FaCode,
'AI应用': FaMagic,
'半导体设备': FaCubes,
'半导体材料': FaAtom,
'芯片设计与制造': FaMicrochip,
'先进封装': FaCubes,
'人形机器人整机': FaRobot,
'机器人核心零部件': FaCubes,
'其他类型机器人': FaRobot,
'智能终端': FaMobileAlt,
'XR与空间计算': FaEye,
'华为产业链': FaMobileAlt,
'自动驾驶解决方案': FaCar,
'智能汽车产业链': FaCar,
'车路协同': FaCar,
'新型电池技术': FaBatteryFull,
'电力设备与电网': FaBolt,
'清洁能源': FaSolarPanel,
'低空经济': FaPlane,
'商业航天': FaSatellite,
'无人作战与信息化': FaShieldAlt,
'海军装备': FaShieldAlt,
'军贸出海': FaGlobe,
'AI基础设施': Server,
'AI模型与软件': Code,
'AI应用': Sparkles,
'半导体设备': BoxIcon,
'半导体材料': Atom,
'芯片设计与制造': Cpu,
'先进封装': BoxIcon,
'人形机器人整机': Bot,
'机器人核心零部件': BoxIcon,
'其他类型机器人': Bot,
'智能终端': Smartphone,
'XR与空间计算': Eye,
'华为产业链': Smartphone,
'自动驾驶解决方案': Car,
'智能汽车产业链': Car,
'车路协同': Car,
'新型电池技术': BatteryFull,
'电力设备与电网': Zap,
'清洁能源': Sun,
'低空经济': Plane,
'商业航天': Satellite,
'无人作战与信息化': Shield,
'海军装备': Shield,
'军贸出海': Globe,
};
// 根据涨跌幅获取背景渐变色（涨红跌绿）
@@ -151,10 +151,10 @@ const formatChangePercent = (value) => {
// 获取图标
const getIcon = (name, level) => {
if (level === 'lv1') return LV1_ICONS[name] || FaLayerGroup;
if (level === 'lv2') return LV2_ICONS[name] || FaCubes;
if (level === 'lv3') return FaCubes;
return FaTags;
if (level === 'lv1') return LV1_ICONS[name] || Layers;
if (level === 'lv2') return LV2_ICONS[name] || Box;
if (level === 'lv3') return Box;
return Tags;
};
// 从 API 返回的名称中提取纯名称
@@ -352,7 +352,7 @@ const GlassCard = ({ item, onClick, size = 'normal' }) => {
{/* 外链图标 */}
{isLeafConcept && (
<Icon
as={FaExternalLinkAlt}
as={ExternalLink}
boxSize={3}
color="whiteAlpha.500"
/>
@@ -372,7 +372,7 @@ const GlassCard = ({ item, onClick, size = 'normal' }) => {
<HStack spacing={1} align="center">
{hasChange && (isPositive || isNegative) && (
<Icon
as={isPositive ? FaArrowUp : FaArrowDown}
as={isPositive ? ArrowUp : ArrowDown}
boxSize={3}
color={getChangeTextColor(item.avg_change_pct)}
/>
@@ -766,7 +766,7 @@ const HierarchyView = ({
<Center h="400px" position="relative">
<AuroraBackground />
<VStack spacing={4} position="relative" zIndex={1}>
<Icon as={FaLayerGroup} boxSize={16} color="gray.600" />
<Icon as={Layers} boxSize={16} color="gray.600" />
<Text color="gray.400">加载失败：{error}</Text>
<Button
colorScheme="purple"
@@ -787,7 +787,7 @@ const HierarchyView = ({
<Center h="400px" position="relative">
<AuroraBackground />
<VStack spacing={4} position="relative" zIndex={1}>
<Icon as={FaLayerGroup} boxSize={16} color="gray.600" />
<Icon as={Layers} boxSize={16} color="gray.600" />
<Text color="gray.400">暂无层级数据</Text>
</VStack>
</Center>
@@ -832,14 +832,14 @@ const HierarchyView = ({
{breadcrumbs.map((crumb, index) => (
<React.Fragment key={index}>
{index > 0 && (
<Icon as={FaChevronRight} color="whiteAlpha.400" boxSize={3} mx={1} />
<Icon as={ChevronRight} color="whiteAlpha.400" boxSize={3} mx={1} />
)}
<Button
size="sm"
variant="ghost"
bg={index === breadcrumbs.length - 1 ? 'purple.500' : 'transparent'}
color={index === breadcrumbs.length - 1 ? 'white' : 'whiteAlpha.700'}
leftIcon={index === 0 ? <FaHome /> : undefined}
leftIcon={index === 0 ? <Home /> : undefined}
onClick={() => handleBreadcrumbClick(crumb, index)}
isDisabled={index === breadcrumbs.length - 1}
fontWeight={index === breadcrumbs.length - 1 ? 'bold' : 'medium'}
@@ -861,7 +861,7 @@ const HierarchyView = ({
<Tooltip label="刷新涨跌幅" placement="top">
<IconButton
size="sm"
icon={<FaSync />}
icon={<RefreshCw />}
onClick={handleRefreshPrice}
isLoading={priceLoading}
bg="whiteAlpha.100"
@@ -876,7 +876,7 @@ const HierarchyView = ({
<Tooltip label={isFullscreen ? '退出全屏' : '全屏'} placement="top">
<IconButton
size="sm"
icon={isFullscreen ? <FaCompress /> : <FaExpand />}
icon={isFullscreen ? <Minimize2 /> : <Maximize2 />}
onClick={toggleFullscreen}
bg="whiteAlpha.100"
color="white"

96
src/views/Concept/index.js
View File

@@ -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);