880 lines
30 KiB
TypeScript
880 lines
30 KiB
TypeScript
import React, { useState, useEffect, useMemo } from 'react';
|
|
import {
|
|
Box,
|
|
Container,
|
|
Flex,
|
|
Text,
|
|
Input,
|
|
Button,
|
|
VStack,
|
|
HStack,
|
|
Badge,
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
Icon,
|
|
Spinner,
|
|
useToast,
|
|
Card,
|
|
CardBody,
|
|
Divider,
|
|
SimpleGrid,
|
|
useDisclosure,
|
|
} from '@chakra-ui/react';
|
|
import {
|
|
FaDatabase,
|
|
FaFolder,
|
|
FaFolderOpen,
|
|
FaFile,
|
|
FaSearch,
|
|
FaHome,
|
|
FaChevronRight,
|
|
FaChevronDown,
|
|
FaTimes,
|
|
FaEye,
|
|
} from 'react-icons/fa';
|
|
import { motion } from 'framer-motion';
|
|
import {
|
|
fetchCategoryTree,
|
|
fetchCategoryNode,
|
|
searchMetrics,
|
|
TreeNode,
|
|
TreeMetric,
|
|
CategoryTreeResponse,
|
|
MetricSearchResult,
|
|
SearchResponse
|
|
} from '@services/categoryService';
|
|
import MetricDataModal from './MetricDataModal';
|
|
|
|
// 黑金主题配色
|
|
const themeColors = {
|
|
bgGradient: 'linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%)',
|
|
bgRadialGold: 'radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%)',
|
|
primary: {
|
|
gold: '#D4AF37',
|
|
goldLight: '#F4E3A7',
|
|
goldDark: '#B8941F',
|
|
},
|
|
bg: {
|
|
primary: '#0a0a0a',
|
|
secondary: '#1a1a1a',
|
|
card: '#1e1e1e',
|
|
cardHover: '#252525',
|
|
},
|
|
text: {
|
|
primary: '#ffffff',
|
|
secondary: '#b8b8b8',
|
|
muted: '#808080',
|
|
gold: '#D4AF37',
|
|
},
|
|
border: {
|
|
default: 'rgba(255, 255, 255, 0.1)',
|
|
gold: 'rgba(212, 175, 55, 0.3)',
|
|
goldGlow: 'rgba(212, 175, 55, 0.5)',
|
|
},
|
|
};
|
|
|
|
const MotionBox = motion(Box);
|
|
const MotionCard = motion(Card);
|
|
|
|
// 树节点组件（支持懒加载）
|
|
const TreeNodeComponent: React.FC<{
|
|
node: TreeNode;
|
|
source: 'SMM' | 'Mysteel';
|
|
onNodeClick: (node: TreeNode) => void;
|
|
expandedNodes: Set<string>;
|
|
onToggleExpand: (node: TreeNode) => Promise<void>;
|
|
searchQuery: string;
|
|
loadingNodes: Set<string>;
|
|
}> = ({ node, source, onNodeClick, expandedNodes, onToggleExpand, searchQuery, loadingNodes }) => {
|
|
const isExpanded = expandedNodes.has(node.path);
|
|
const isLoading = loadingNodes.has(node.path);
|
|
const hasChildren = node.children && node.children.length > 0;
|
|
const hasMetrics = node.metrics && node.metrics.length > 0;
|
|
|
|
// 高亮搜索关键词
|
|
const highlightText = (text: string) => {
|
|
if (!searchQuery) return text;
|
|
const parts = text.split(new RegExp(`(${searchQuery})`, 'gi'));
|
|
return parts.map((part, index) =>
|
|
part.toLowerCase() === searchQuery.toLowerCase() ? (
|
|
<Text as="span" key={index} color={themeColors.primary.gold} fontWeight="bold">
|
|
{part}
|
|
</Text>
|
|
) : (
|
|
part
|
|
)
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Box>
|
|
<Flex
|
|
align="center"
|
|
p={2}
|
|
pl={node.level * 4}
|
|
cursor="pointer"
|
|
bg={isExpanded ? themeColors.bg.cardHover : 'transparent'}
|
|
_hover={{ bg: themeColors.bg.cardHover }}
|
|
borderRadius="md"
|
|
transition="all 0.2s"
|
|
onClick={() => {
|
|
onToggleExpand(node);
|
|
onNodeClick(node);
|
|
}}
|
|
>
|
|
{isLoading ? (
|
|
<Spinner size="xs" color={themeColors.primary.gold} mr={2} />
|
|
) : hasChildren || !hasMetrics ? (
|
|
<Icon
|
|
as={isExpanded ? FaChevronDown : FaChevronRight}
|
|
color={themeColors.text.muted}
|
|
mr={2}
|
|
fontSize="xs"
|
|
/>
|
|
) : (
|
|
<Box w="16px" mr={2} />
|
|
)}
|
|
|
|
<Icon
|
|
as={hasChildren || !hasMetrics ? (isExpanded ? FaFolderOpen : FaFolder) : FaFile}
|
|
color={hasChildren || !hasMetrics ? themeColors.primary.gold : themeColors.text.secondary}
|
|
mr={2}
|
|
/>
|
|
|
|
<Text color={themeColors.text.primary} fontSize="sm">
|
|
{highlightText(node.name)}
|
|
</Text>
|
|
|
|
{hasMetrics && (
|
|
<Badge
|
|
ml={2}
|
|
bg={themeColors.border.gold}
|
|
color={themeColors.primary.gold}
|
|
fontSize="xs"
|
|
>
|
|
{node.metrics.length}
|
|
</Badge>
|
|
)}
|
|
</Flex>
|
|
|
|
{isExpanded && hasChildren && (
|
|
<Box>
|
|
{node.children!.map((child) => (
|
|
<TreeNodeComponent
|
|
key={child.path}
|
|
node={child}
|
|
source={source}
|
|
onNodeClick={onNodeClick}
|
|
expandedNodes={expandedNodes}
|
|
onToggleExpand={onToggleExpand}
|
|
searchQuery={searchQuery}
|
|
loadingNodes={loadingNodes}
|
|
/>
|
|
))}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
// 指标卡片组件（可点击查看详情）
|
|
const MetricCard: React.FC<{ metric: TreeMetric; onClick: () => void }> = ({ metric, onClick }) => {
|
|
return (
|
|
<MotionCard
|
|
bg={themeColors.bg.card}
|
|
borderWidth="1px"
|
|
borderColor={themeColors.border.default}
|
|
borderRadius="lg"
|
|
overflow="hidden"
|
|
cursor="pointer"
|
|
onClick={onClick}
|
|
whileHover={{
|
|
borderColor: themeColors.border.goldGlow,
|
|
scale: 1.02,
|
|
}}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<CardBody>
|
|
<VStack align="stretch" spacing={3}>
|
|
<HStack justify="space-between">
|
|
<Text color={themeColors.text.primary} fontWeight="bold" fontSize="sm" flex="1">
|
|
{metric.metric_name}
|
|
</Text>
|
|
<Badge
|
|
bg={metric.source === 'SMM' ? 'blue.500' : 'green.500'}
|
|
color="white"
|
|
fontSize="xs"
|
|
>
|
|
{metric.source}
|
|
</Badge>
|
|
</HStack>
|
|
|
|
<Divider borderColor={themeColors.border.default} />
|
|
|
|
<SimpleGrid columns={2} spacing={2}>
|
|
<Box>
|
|
<Text color={themeColors.text.muted} fontSize="xs">
|
|
频率
|
|
</Text>
|
|
<Text color={themeColors.text.secondary} fontSize="sm">
|
|
{metric.frequency}
|
|
</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text color={themeColors.text.muted} fontSize="xs">
|
|
单位
|
|
</Text>
|
|
<Text color={themeColors.text.secondary} fontSize="sm">
|
|
{metric.unit || '-'}
|
|
</Text>
|
|
</Box>
|
|
</SimpleGrid>
|
|
|
|
{metric.description && (
|
|
<Text color={themeColors.text.muted} fontSize="xs" noOfLines={2}>
|
|
{metric.description}
|
|
</Text>
|
|
)}
|
|
|
|
<HStack justify="space-between">
|
|
<Text color={themeColors.text.muted} fontSize="xs" fontFamily="monospace">
|
|
ID: {metric.metric_id}
|
|
</Text>
|
|
<Button
|
|
size="xs"
|
|
variant="ghost"
|
|
color={themeColors.primary.gold}
|
|
leftIcon={<FaEye />}
|
|
_hover={{ bg: themeColors.bg.cardHover }}
|
|
>
|
|
查看数据
|
|
</Button>
|
|
</HStack>
|
|
</VStack>
|
|
</CardBody>
|
|
</MotionCard>
|
|
);
|
|
};
|
|
|
|
const DataBrowser: React.FC = () => {
|
|
const [selectedSource, setSelectedSource] = useState<'SMM' | 'Mysteel'>('SMM');
|
|
const [treeData, setTreeData] = useState<CategoryTreeResponse | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [searchResults, setSearchResults] = useState<SearchResponse | null>(null);
|
|
const [searching, setSearching] = useState(false);
|
|
const [currentNode, setCurrentNode] = useState<TreeNode | null>(null);
|
|
const [breadcrumbs, setBreadcrumbs] = useState<string[]>([]);
|
|
const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
|
|
const [loadingNodes, setLoadingNodes] = useState<Set<string>>(new Set());
|
|
const [selectedMetric, setSelectedMetric] = useState<TreeMetric | null>(null);
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
|
|
const toast = useToast();
|
|
|
|
// 加载分类树（只加载第一层）
|
|
useEffect(() => {
|
|
loadCategoryTree();
|
|
}, [selectedSource]);
|
|
|
|
const loadCategoryTree = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await fetchCategoryTree(selectedSource, 1); // 只加载第一层
|
|
setTreeData(data);
|
|
setCurrentNode(null);
|
|
setBreadcrumbs([]);
|
|
setExpandedNodes(new Set());
|
|
setSearchResults(null); // 清空搜索结果
|
|
} catch (error) {
|
|
toast({
|
|
title: '加载失败',
|
|
description: '无法加载分类树数据',
|
|
status: 'error',
|
|
duration: 3000,
|
|
isClosable: true,
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// 执行搜索
|
|
const handleSearch = async () => {
|
|
if (!searchQuery.trim()) {
|
|
setSearchResults(null);
|
|
return;
|
|
}
|
|
|
|
setSearching(true);
|
|
try {
|
|
const results = await searchMetrics(searchQuery, selectedSource, undefined, 100);
|
|
setSearchResults(results);
|
|
} catch (error) {
|
|
toast({
|
|
title: '搜索失败',
|
|
description: '无法搜索指标数据',
|
|
status: 'error',
|
|
duration: 3000,
|
|
isClosable: true,
|
|
});
|
|
} finally {
|
|
setSearching(false);
|
|
}
|
|
};
|
|
|
|
// 当搜索关键词变化时，自动搜索
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
if (searchQuery.trim()) {
|
|
handleSearch();
|
|
} else {
|
|
setSearchResults(null);
|
|
}
|
|
}, 500); // 防抖 500ms
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [searchQuery, selectedSource]);
|
|
|
|
// 切换节点展开状态（懒加载子节点）
|
|
const toggleNodeExpand = async (node: TreeNode) => {
|
|
const isCurrentlyExpanded = expandedNodes.has(node.path);
|
|
|
|
if (isCurrentlyExpanded) {
|
|
// 收起节点
|
|
setExpandedNodes((prev) => {
|
|
const newSet = new Set(prev);
|
|
newSet.delete(node.path);
|
|
return newSet;
|
|
});
|
|
} else {
|
|
// 展开节点 - 始终尝试加载子节点（如果还没加载过）
|
|
const hasChildren = node.children && node.children.length > 0;
|
|
|
|
// 如果没有子节点数据，尝试从服务器加载
|
|
if (!hasChildren) {
|
|
// 添加加载状态
|
|
setLoadingNodes((prev) => new Set(prev).add(node.path));
|
|
|
|
try {
|
|
// 从服务器加载子节点
|
|
const nodeData = await fetchCategoryNode(node.path, selectedSource);
|
|
|
|
// 更新树数据
|
|
setTreeData((prevData) => {
|
|
if (!prevData) return prevData;
|
|
|
|
const updateNode = (nodes: TreeNode[]): TreeNode[] => {
|
|
return nodes.map((n) => {
|
|
if (n.path === node.path) {
|
|
return { ...n, children: nodeData.children, metrics: nodeData.metrics };
|
|
}
|
|
if (n.children) {
|
|
return { ...n, children: updateNode(n.children) };
|
|
}
|
|
return n;
|
|
});
|
|
};
|
|
|
|
return {
|
|
...prevData,
|
|
tree: updateNode(prevData.tree),
|
|
};
|
|
});
|
|
|
|
// 更新当前节点（如果是当前选中的节点）
|
|
if (currentNode && currentNode.path === node.path) {
|
|
setCurrentNode(nodeData);
|
|
}
|
|
} catch (error) {
|
|
toast({
|
|
title: '加载失败',
|
|
description: '无法加载子节点数据',
|
|
status: 'error',
|
|
duration: 3000,
|
|
isClosable: true,
|
|
});
|
|
} finally {
|
|
setLoadingNodes((prev) => {
|
|
const newSet = new Set(prev);
|
|
newSet.delete(node.path);
|
|
return newSet;
|
|
});
|
|
}
|
|
}
|
|
|
|
// 展开节点
|
|
setExpandedNodes((prev) => new Set(prev).add(node.path));
|
|
}
|
|
};
|
|
|
|
// 处理节点点击
|
|
const handleNodeClick = (node: TreeNode) => {
|
|
setCurrentNode(node);
|
|
const pathParts = node.path.split('|');
|
|
setBreadcrumbs(pathParts);
|
|
};
|
|
|
|
// 处理面包屑导航
|
|
const handleBreadcrumbClick = (index: number) => {
|
|
if (index === -1) {
|
|
setCurrentNode(null);
|
|
setBreadcrumbs([]);
|
|
return;
|
|
}
|
|
|
|
const targetPath = breadcrumbs.slice(0, index + 1).join('|');
|
|
// 在树中查找对应节点
|
|
const findNode = (nodes: TreeNode[], path: string): TreeNode | null => {
|
|
for (const node of nodes) {
|
|
if (node.path === path) return node;
|
|
if (node.children) {
|
|
const found = findNode(node.children, path);
|
|
if (found) return found;
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
|
|
if (treeData) {
|
|
const node = findNode(treeData.tree, targetPath);
|
|
if (node) {
|
|
handleNodeClick(node);
|
|
}
|
|
}
|
|
};
|
|
|
|
// 处理指标点击
|
|
const handleMetricClick = (metric: TreeMetric) => {
|
|
setSelectedMetric(metric);
|
|
onOpen();
|
|
};
|
|
|
|
// 显示的树节点（搜索时不显示树）
|
|
const displayTree = useMemo(() => {
|
|
if (searchQuery.trim()) {
|
|
return []; // 搜索时不显示树
|
|
}
|
|
return treeData?.tree || [];
|
|
}, [treeData, searchQuery]);
|
|
|
|
return (
|
|
<Box
|
|
minH="100vh"
|
|
bg={themeColors.bg.primary}
|
|
bgGradient={themeColors.bgGradient}
|
|
position="relative"
|
|
pt={{ base: '120px', md: '75px' }}
|
|
>
|
|
{/* 金色光晕背景 */}
|
|
<Box
|
|
position="absolute"
|
|
top="0"
|
|
left="50%"
|
|
transform="translateX(-50%)"
|
|
width="100%"
|
|
height="400px"
|
|
bgGradient={themeColors.bgRadialGold}
|
|
opacity={0.3}
|
|
pointerEvents="none"
|
|
/>
|
|
|
|
<Container maxW="container.xl" position="relative" zIndex={1}>
|
|
{/* 标题区域 */}
|
|
<MotionBox
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<VStack spacing={4} align="stretch" mb={8}>
|
|
<HStack spacing={4}>
|
|
<Icon as={FaDatabase} color={themeColors.primary.gold} boxSize={8} />
|
|
<VStack align="start" spacing={0}>
|
|
<Text
|
|
fontSize="3xl"
|
|
fontWeight="bold"
|
|
color={themeColors.text.primary}
|
|
textShadow={`0 0 20px ${themeColors.primary.gold}40`}
|
|
>
|
|
数据浏览器
|
|
</Text>
|
|
<Text color={themeColors.text.secondary} fontSize="sm">
|
|
化工商品数据分类树 - 探索海量行业指标
|
|
</Text>
|
|
</VStack>
|
|
</HStack>
|
|
|
|
{/* 数据源切换 */}
|
|
<HStack spacing={4}>
|
|
<Button
|
|
size="sm"
|
|
bg={selectedSource === 'SMM' ? themeColors.primary.gold : 'transparent'}
|
|
color={selectedSource === 'SMM' ? themeColors.bg.primary : themeColors.text.secondary}
|
|
borderWidth="1px"
|
|
borderColor={selectedSource === 'SMM' ? themeColors.primary.gold : themeColors.border.default}
|
|
_hover={{
|
|
borderColor: themeColors.primary.gold,
|
|
color: selectedSource === 'SMM' ? themeColors.bg.primary : themeColors.primary.gold,
|
|
}}
|
|
onClick={() => setSelectedSource('SMM')}
|
|
>
|
|
SMM {treeData && selectedSource === 'SMM' && `(${treeData.total_metrics.toLocaleString()} 指标)`}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
bg={selectedSource === 'Mysteel' ? themeColors.primary.gold : 'transparent'}
|
|
color={selectedSource === 'Mysteel' ? themeColors.bg.primary : themeColors.text.secondary}
|
|
borderWidth="1px"
|
|
borderColor={selectedSource === 'Mysteel' ? themeColors.primary.gold : themeColors.border.default}
|
|
_hover={{
|
|
borderColor: themeColors.primary.gold,
|
|
color: selectedSource === 'Mysteel' ? themeColors.bg.primary : themeColors.primary.gold,
|
|
}}
|
|
onClick={() => setSelectedSource('Mysteel')}
|
|
>
|
|
Mysteel {treeData && selectedSource === 'Mysteel' && `(${treeData.total_metrics.toLocaleString()} 指标)`}
|
|
</Button>
|
|
</HStack>
|
|
</VStack>
|
|
</MotionBox>
|
|
|
|
{/* 搜索和过滤 */}
|
|
<MotionBox
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.2, duration: 0.5 }}
|
|
>
|
|
<Card
|
|
bg={themeColors.bg.card}
|
|
borderWidth="1px"
|
|
borderColor={themeColors.border.gold}
|
|
mb={6}
|
|
>
|
|
<CardBody>
|
|
<VStack spacing={3} align="stretch">
|
|
<HStack spacing={4}>
|
|
<Input
|
|
placeholder="搜索分类或指标名称..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
bg={themeColors.bg.secondary}
|
|
borderColor={themeColors.border.default}
|
|
color={themeColors.text.primary}
|
|
_placeholder={{ color: themeColors.text.muted }}
|
|
_focus={{
|
|
borderColor: themeColors.primary.gold,
|
|
boxShadow: `0 0 0 1px ${themeColors.primary.gold}`,
|
|
}}
|
|
/>
|
|
<Button
|
|
leftIcon={<FaSearch />}
|
|
bg={themeColors.primary.gold}
|
|
color={themeColors.bg.primary}
|
|
_hover={{ bg: themeColors.primary.goldLight }}
|
|
onClick={handleSearch}
|
|
isLoading={searching}
|
|
>
|
|
搜索
|
|
</Button>
|
|
{searchQuery && (
|
|
<Button
|
|
leftIcon={<FaTimes />}
|
|
variant="ghost"
|
|
color={themeColors.text.secondary}
|
|
_hover={{ color: themeColors.text.primary }}
|
|
onClick={() => setSearchQuery('')}
|
|
>
|
|
清除
|
|
</Button>
|
|
)}
|
|
</HStack>
|
|
|
|
{/* 搜索结果提示 */}
|
|
{searchResults && (
|
|
<Flex align="center" justify="space-between" py={2}>
|
|
<Text color={themeColors.text.secondary} fontSize="sm">
|
|
找到 <Text as="span" color={themeColors.primary.gold} fontWeight="bold">{searchResults.total}</Text> 个相关指标
|
|
</Text>
|
|
<Text color={themeColors.text.muted} fontSize="xs">
|
|
关键词: "{searchResults.query}"
|
|
</Text>
|
|
</Flex>
|
|
)}
|
|
{searching && (
|
|
<Flex align="center" justify="center" py={2}>
|
|
<Spinner size="sm" color={themeColors.primary.gold} mr={2} />
|
|
<Text color={themeColors.text.secondary} fontSize="sm">
|
|
搜索中...
|
|
</Text>
|
|
</Flex>
|
|
)}
|
|
</VStack>
|
|
</CardBody>
|
|
</Card>
|
|
</MotionBox>
|
|
|
|
{/* 面包屑导航 */}
|
|
{breadcrumbs.length > 0 && (
|
|
<MotionBox
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
mb={4}
|
|
>
|
|
<Card bg={themeColors.bg.card} borderWidth="1px" borderColor={themeColors.border.default}>
|
|
<CardBody py={2}>
|
|
<Breadcrumb
|
|
spacing={2}
|
|
separator={<Icon as={FaChevronRight} color={themeColors.text.muted} />}
|
|
>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink
|
|
color={themeColors.text.secondary}
|
|
_hover={{ color: themeColors.primary.gold }}
|
|
onClick={() => handleBreadcrumbClick(-1)}
|
|
>
|
|
<Icon as={FaHome} />
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
{breadcrumbs.map((crumb, index) => (
|
|
<BreadcrumbItem key={index} isCurrentPage={index === breadcrumbs.length - 1}>
|
|
<BreadcrumbLink
|
|
color={index === breadcrumbs.length - 1 ? themeColors.primary.gold : themeColors.text.secondary}
|
|
_hover={{ color: themeColors.primary.gold }}
|
|
onClick={() => handleBreadcrumbClick(index)}
|
|
>
|
|
{crumb}
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
))}
|
|
</Breadcrumb>
|
|
</CardBody>
|
|
</Card>
|
|
</MotionBox>
|
|
)}
|
|
|
|
{/* 主内容区域 */}
|
|
<Flex gap={6} direction={{ base: 'column', lg: 'row' }}>
|
|
{/* 左侧：分类树 */}
|
|
<MotionBox
|
|
flex={{ base: '1', lg: '0 0 400px' }}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: 0.3, duration: 0.5 }}
|
|
>
|
|
<Card
|
|
bg={themeColors.bg.card}
|
|
borderWidth="1px"
|
|
borderColor={themeColors.border.gold}
|
|
maxH="calc(100vh - 400px)"
|
|
overflowY="auto"
|
|
css={{
|
|
'&::-webkit-scrollbar': {
|
|
width: '8px',
|
|
},
|
|
'&::-webkit-scrollbar-track': {
|
|
background: themeColors.bg.secondary,
|
|
},
|
|
'&::-webkit-scrollbar-thumb': {
|
|
background: themeColors.primary.gold,
|
|
borderRadius: '4px',
|
|
},
|
|
}}
|
|
>
|
|
<CardBody>
|
|
{loading ? (
|
|
<Flex justify="center" align="center" py={10}>
|
|
<Spinner color={themeColors.primary.gold} size="xl" />
|
|
</Flex>
|
|
) : searchQuery.trim() ? (
|
|
// 搜索模式：显示搜索结果列表
|
|
<VStack align="stretch" spacing={1}>
|
|
{searchResults && searchResults.results.length > 0 ? (
|
|
searchResults.results.map((result) => (
|
|
<Box
|
|
key={result.metric_id}
|
|
p={3}
|
|
cursor="pointer"
|
|
bg="transparent"
|
|
_hover={{
|
|
bg: themeColors.bg.cardHover,
|
|
borderLeftColor: themeColors.primary.gold,
|
|
}}
|
|
borderRadius="md"
|
|
borderLeftWidth="3px"
|
|
borderLeftColor="transparent"
|
|
transition="all 0.2s"
|
|
onClick={() => {
|
|
// 转换搜索结果为 TreeMetric 格式
|
|
const metric: TreeMetric = {
|
|
metric_id: result.metric_id,
|
|
metric_name: result.metric_name,
|
|
source: result.source as 'SMM' | 'Mysteel',
|
|
frequency: result.frequency,
|
|
unit: result.unit,
|
|
description: result.description,
|
|
};
|
|
|
|
// 更新面包屑导航为搜索结果的路径
|
|
const pathParts = result.category_path.split(' > ');
|
|
setBreadcrumbs(pathParts);
|
|
|
|
// 清空搜索框，显示树结构
|
|
setSearchQuery('');
|
|
|
|
handleMetricClick(metric);
|
|
}}
|
|
>
|
|
<VStack align="stretch" spacing={2}>
|
|
<HStack justify="space-between">
|
|
<Text color={themeColors.text.primary} fontSize="sm" fontWeight="bold" flex="1">
|
|
{result.metric_name}
|
|
</Text>
|
|
<Badge
|
|
bg={result.source === 'SMM' ? 'blue.500' : 'green.500'}
|
|
color="white"
|
|
fontSize="xs"
|
|
>
|
|
{result.source}
|
|
</Badge>
|
|
</HStack>
|
|
<HStack spacing={4} fontSize="xs" color={themeColors.text.muted}>
|
|
<Text>路径: {result.category_path}</Text>
|
|
<Text>频率: {result.frequency}</Text>
|
|
<Text>单位: {result.unit || '-'}</Text>
|
|
</HStack>
|
|
{result.score && (
|
|
<Text fontSize="xs" color={themeColors.text.muted}>
|
|
相关度: {(result.score * 100).toFixed(0)}%
|
|
</Text>
|
|
)}
|
|
</VStack>
|
|
</Box>
|
|
))
|
|
) : searchResults ? (
|
|
<Flex justify="center" align="center" py={10}>
|
|
<VStack spacing={3}>
|
|
<Icon as={FaSearch} color={themeColors.text.muted} boxSize={12} />
|
|
<Text color={themeColors.text.muted}>未找到匹配的指标</Text>
|
|
<Text color={themeColors.text.muted} fontSize="sm">
|
|
尝试使用不同的关键词
|
|
</Text>
|
|
</VStack>
|
|
</Flex>
|
|
) : null}
|
|
</VStack>
|
|
) : (
|
|
// 正常模式：显示分类树
|
|
<VStack align="stretch" spacing={1}>
|
|
{displayTree.map((node) => (
|
|
<TreeNodeComponent
|
|
key={node.path}
|
|
node={node}
|
|
source={selectedSource}
|
|
onNodeClick={handleNodeClick}
|
|
expandedNodes={expandedNodes}
|
|
onToggleExpand={toggleNodeExpand}
|
|
searchQuery=""
|
|
loadingNodes={loadingNodes}
|
|
/>
|
|
))}
|
|
</VStack>
|
|
)}
|
|
</CardBody>
|
|
</Card>
|
|
</MotionBox>
|
|
|
|
{/* 右侧：指标详情 */}
|
|
<MotionBox
|
|
flex="1"
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: 0.4, duration: 0.5 }}
|
|
>
|
|
<Card
|
|
bg={themeColors.bg.card}
|
|
borderWidth="1px"
|
|
borderColor={themeColors.border.gold}
|
|
minH="400px"
|
|
>
|
|
<CardBody>
|
|
{currentNode ? (
|
|
<VStack align="stretch" spacing={4}>
|
|
<HStack justify="space-between">
|
|
<VStack align="start" spacing={1}>
|
|
<Text color={themeColors.text.primary} fontSize="2xl" fontWeight="bold">
|
|
{currentNode.name}
|
|
</Text>
|
|
<Text color={themeColors.text.muted} fontSize="sm">
|
|
层级 {currentNode.level} | 路径: {currentNode.path}
|
|
</Text>
|
|
</VStack>
|
|
{currentNode.metrics && currentNode.metrics.length > 0 && (
|
|
<Badge
|
|
bg={themeColors.primary.gold}
|
|
color={themeColors.bg.primary}
|
|
fontSize="md"
|
|
px={3}
|
|
py={1}
|
|
>
|
|
{currentNode.metrics.length} 个指标
|
|
</Badge>
|
|
)}
|
|
</HStack>
|
|
|
|
<Divider borderColor={themeColors.border.gold} />
|
|
|
|
{currentNode.metrics && currentNode.metrics.length > 0 ? (
|
|
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={4} mt={4}>
|
|
{currentNode.metrics.map((metric) => (
|
|
<MetricCard
|
|
key={metric.metric_id}
|
|
metric={metric}
|
|
onClick={() => handleMetricClick(metric)}
|
|
/>
|
|
))}
|
|
</SimpleGrid>
|
|
) : (
|
|
<Flex justify="center" align="center" py={10}>
|
|
<VStack spacing={3}>
|
|
<Icon as={FaFolder} color={themeColors.text.muted} boxSize={12} />
|
|
<Text color={themeColors.text.muted}>
|
|
{currentNode.children && currentNode.children.length > 0
|
|
? '该节点包含子分类，请展开查看'
|
|
: '该节点暂无指标数据'}
|
|
</Text>
|
|
</VStack>
|
|
</Flex>
|
|
)}
|
|
</VStack>
|
|
) : (
|
|
<Flex justify="center" align="center" py={20}>
|
|
<VStack spacing={4}>
|
|
<Icon as={FaDatabase} color={themeColors.primary.gold} boxSize={16} />
|
|
<Text color={themeColors.text.secondary} fontSize="lg" textAlign="center">
|
|
选择左侧分类树节点查看详情
|
|
</Text>
|
|
{treeData && (
|
|
<Text color={themeColors.text.muted} fontSize="sm">
|
|
当前数据源共有 {treeData.total_metrics.toLocaleString()} 个指标
|
|
</Text>
|
|
)}
|
|
</VStack>
|
|
</Flex>
|
|
)}
|
|
</CardBody>
|
|
</Card>
|
|
</MotionBox>
|
|
</Flex>
|
|
</Container>
|
|
|
|
{/* 指标数据详情模态框 */}
|
|
{selectedMetric && (
|
|
<MetricDataModal isOpen={isOpen} onClose={onClose} metric={selectedMetric} />
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default DataBrowser;
|