update pay ui

package.json

@@ -52,6 +52,7 @@
     "react-circular-slider-svg": "^0.1.5",
     "react-custom-scrollbars-2": "^4.4.0",
     "react-dom": "^19.0.0",
+    "react-force-graph-3d": "^1.29.0",
     "react-github-btn": "^1.2.1",
     "react-icons": "^4.12.0",
     "react-input-pin-code": "^1.1.5",
@@ -76,6 +77,7 @@
     "styled-components": "^5.3.11",
     "stylis": "^4.0.10",
     "stylis-plugin-rtl": "^2.1.1",
+    "three": "^0.181.2",
     "typescript": "^5.9.3"
   },
   "resolutions": {

src/views/Concept/components/ForceGraphView.js

@@ -0,0 +1,918 @@
+/**
+ * ForceGraphView - 3D 力导向图概念层级视图
+ *
+ * 特性：
+ * 1. 3D 星空效果展示概念层级关系
+ * 2. 节点大小根据股票数量动态调整
+ * 3. 节点颜色根据涨跌幅显示（涨红跌绿）
+ * 4. 支持鼠标交互：旋转、缩放、拖拽
+ * 5. 点击节点可钻取或跳转
+ */
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import ForceGraph3D from 'react-force-graph-3d';
+import {
+    Box,
+    VStack,
+    HStack,
+    Text,
+    Spinner,
+    Center,
+    Icon,
+    Flex,
+    Button,
+    IconButton,
+    Tooltip,
+    Badge,
+    useBreakpointValue,
+    Slider,
+    SliderTrack,
+    SliderFilledTrack,
+    SliderThumb,
+    Switch,
+    FormControl,
+    FormLabel,
+    Select,
+    Collapse,
+    useDisclosure,
+} from '@chakra-ui/react';
+import {
+    FaLayerGroup,
+    FaSync,
+    FaExpand,
+    FaCompress,
+    FaCog,
+    FaPlay,
+    FaPause,
+    FaHome,
+    FaArrowUp,
+    FaArrowDown,
+    FaEye,
+    FaEyeSlash,
+    FaCube,
+    FaChevronDown,
+    FaChevronUp,
+} from 'react-icons/fa';
+import * as THREE from 'three';
+import { logger } from '../../../utils/logger';
+
+// 一级分类颜色映射
+const LV1_COLORS = {
+    '人工智能': '#8B5CF6',      // 紫色
+    '半导体': '#3B82F6',        // 蓝色
+    '机器人': '#10B981',        // 绿色
+    '消费电子': '#F59E0B',      // 橙色
+    '智能驾驶与汽车': '#EF4444', // 红色
+    '新能源与电力': '#06B6D4',   // 青色
+    '空天经济': '#6366F1',      // 靛蓝
+    '国防军工': '#EC4899',      // 粉色
+    '政策与主题': '#14B8A6',    // 青绿
+    '周期与材料': '#F97316',    // 深橙
+    '大消费': '#A855F7',        // 亮紫
+    '数字经济与金融科技': '#22D3EE', // 亮青
+    '全球宏观与贸易': '#84CC16', // 黄绿
+    '医药健康': '#E879F9',      // 玫红
+    '前沿科技': '#38BDF8',      // 天蓝
+};
+
+// 根据涨跌幅获取颜色
+const getChangeColor = (value) => {
+    if (value === null || value === undefined) return '#64748B'; // 灰色
+
+    // 涨 - 红色系
+    if (value > 7) return '#DC2626';
+    if (value > 5) return '#EF4444';
+    if (value > 3) return '#F87171';
+    if (value > 1) return '#FCA5A5';
+    if (value > 0) return '#FECACA';
+
+    // 跌 - 绿色系
+    if (value < -7) return '#15803D';
+    if (value < -5) return '#16A34A';
+    if (value < -3) return '#22C55E';
+    if (value < -1) return '#4ADE80';
+    if (value < 0) return '#86EFAC';
+
+    return '#64748B'; // 平盘
+};
+
+// 从 API 返回的名称中提取纯名称
+const extractPureName = (apiName) => {
+    if (!apiName) return '';
+    return apiName.replace(/^\[(一级|二级|三级)\]\s*/, '');
+};
+
+/**
+ * 主组件：3D 力导向图视图
+ */
+const ForceGraphView = ({
+    apiBaseUrl,
+    onSelectCategory,
+    selectedDate,
+}) => {
+    const [hierarchy, setHierarchy] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [priceData, setPriceData] = useState({ lv1Map: {}, lv2Map: {}, lv3Map: {}, leafMap: {} });
+    const [priceLoading, setPriceLoading] = useState(false);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [isRotating, setIsRotating] = useState(true);
+    const [showLabels, setShowLabels] = useState(true);
+    const [nodeSize, setNodeSize] = useState(1);
+    const [linkOpacity, setLinkOpacity] = useState(0.3);
+    const [displayLevel, setDisplayLevel] = useState('all'); // 'all', 'lv1', 'lv2', 'lv3', 'concept'
+    const [hoveredNode, setHoveredNode] = useState(null);
+
+    const fgRef = useRef();
+    const containerRef = useRef();
+    const { isOpen: isSettingsOpen, onToggle: onSettingsToggle } = useDisclosure();
+
+    const isMobile = useBreakpointValue({ base: true, md: false });
+
+    // 获取层级结构数据
+    const fetchHierarchy = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+
+        try {
+            const response = await fetch(`${apiBaseUrl}/hierarchy`);
+            if (!response.ok) throw new Error('获取层级结构失败');
+
+            const data = await response.json();
+            setHierarchy(data.hierarchy || []);
+
+            logger.info('ForceGraphView', '层级结构加载完成', {
+                totalLv1: data.hierarchy?.length,
+                totalConcepts: data.total_concepts
+            });
+        } catch (err) {
+            logger.error('ForceGraphView', 'fetchHierarchy', err);
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    }, [apiBaseUrl]);
+
+    // 获取层级涨跌幅数据
+    const fetchHierarchyPrice = useCallback(async () => {
+        setPriceLoading(true);
+
+        try {
+            let url = `${apiBaseUrl}/hierarchy/price`;
+            if (selectedDate) {
+                const dateStr = selectedDate.toISOString().split('T')[0];
+                url += `?trade_date=${dateStr}`;
+            }
+
+            const response = await fetch(url);
+            if (!response.ok) {
+                logger.warn('ForceGraphView', '获取层级涨跌幅失败', { status: response.status });
+                return;
+            }
+
+            const data = await response.json();
+
+            // 构建映射表
+            const lv1Map = {};
+            const lv2Map = {};
+            const lv3Map = {};
+            const leafMap = {};
+
+            (data.lv1_concepts || []).forEach(item => {
+                const pureName = extractPureName(item.concept_name);
+                lv1Map[pureName] = item;
+            });
+            (data.lv2_concepts || []).forEach(item => {
+                const pureName = extractPureName(item.concept_name);
+                lv2Map[pureName] = item;
+            });
+            (data.lv3_concepts || []).forEach(item => {
+                const pureName = extractPureName(item.concept_name);
+                lv3Map[pureName] = item;
+            });
+            (data.leaf_concepts || []).forEach(item => {
+                leafMap[item.concept_name] = item;
+            });
+
+            setPriceData({ lv1Map, lv2Map, lv3Map, leafMap });
+
+            logger.info('ForceGraphView', '层级涨跌幅加载完成', {
+                lv1Count: Object.keys(lv1Map).length,
+                lv2Count: Object.keys(lv2Map).length,
+                lv3Count: Object.keys(lv3Map).length,
+                leafCount: Object.keys(leafMap).length,
+            });
+        } catch (err) {
+            logger.warn('ForceGraphView', '获取层级涨跌幅失败', { error: err.message });
+        } finally {
+            setPriceLoading(false);
+        }
+    }, [apiBaseUrl, selectedDate]);
+
+    useEffect(() => {
+        fetchHierarchy();
+    }, [fetchHierarchy]);
+
+    useEffect(() => {
+        if (hierarchy.length > 0) {
+            fetchHierarchyPrice();
+        }
+    }, [hierarchy, fetchHierarchyPrice]);
+
+    // 构建图数据
+    const graphData = useMemo(() => {
+        const nodes = [];
+        const links = [];
+        const { lv1Map, lv2Map, lv3Map, leafMap } = priceData;
+
+        // 添加根节点
+        nodes.push({
+            id: 'root',
+            name: '概念中心',
+            level: 'root',
+            val: 50,
+            color: '#8B5CF6',
+        });
+
+        // 遍历层级结构
+        hierarchy.forEach((lv1) => {
+            const lv1Id = `lv1_${lv1.name}`;
+            const lv1Price = lv1Map[lv1.name] || {};
+            const lv1Color = LV1_COLORS[lv1.name] || '#8B5CF6';
+
+            // 添加一级节点
+            if (displayLevel === 'all' || displayLevel === 'lv1') {
+                nodes.push({
+                    id: lv1Id,
+                    name: lv1.name,
+                    level: 'lv1',
+                    val: Math.max(10, (lv1Price.stock_count || 100) / 10),
+                    color: lv1Price.avg_change_pct !== undefined
+                        ? getChangeColor(lv1Price.avg_change_pct)
+                        : lv1Color,
+                    baseColor: lv1Color,
+                    changePct: lv1Price.avg_change_pct,
+                    stockCount: lv1Price.stock_count,
+                    conceptCount: lv1.concept_count,
+                });
+
+                links.push({
+                    source: 'root',
+                    target: lv1Id,
+                    color: lv1Color,
+                });
+            }
+
+            // 添加二级节点
+            if (lv1.children && (displayLevel === 'all' || displayLevel === 'lv2')) {
+                lv1.children.forEach((lv2) => {
+                    const lv2Id = `lv2_${lv1.name}_${lv2.name}`;
+                    const lv2Price = lv2Map[lv2.name] || {};
+
+                    nodes.push({
+                        id: lv2Id,
+                        name: lv2.name,
+                        level: 'lv2',
+                        parentLv1: lv1.name,
+                        val: Math.max(5, (lv2Price.stock_count || 50) / 15),
+                        color: lv2Price.avg_change_pct !== undefined
+                            ? getChangeColor(lv2Price.avg_change_pct)
+                            : lv1Color,
+                        baseColor: lv1Color,
+                        changePct: lv2Price.avg_change_pct,
+                        stockCount: lv2Price.stock_count,
+                        conceptCount: lv2.concept_count,
+                    });
+
+                    links.push({
+                        source: displayLevel === 'lv2' ? 'root' : lv1Id,
+                        target: lv2Id,
+                        color: `${lv1Color}80`,
+                    });
+
+                    // 添加三级节点
+                    if (lv2.children && (displayLevel === 'all' || displayLevel === 'lv3')) {
+                        lv2.children.forEach((lv3) => {
+                            const lv3Id = `lv3_${lv1.name}_${lv2.name}_${lv3.name}`;
+                            const lv3Price = lv3Map[lv3.name] || {};
+
+                            nodes.push({
+                                id: lv3Id,
+                                name: lv3.name,
+                                level: 'lv3',
+                                parentLv1: lv1.name,
+                                parentLv2: lv2.name,
+                                val: Math.max(3, (lv3Price.stock_count || 30) / 20),
+                                color: lv3Price.avg_change_pct !== undefined
+                                    ? getChangeColor(lv3Price.avg_change_pct)
+                                    : lv1Color,
+                                baseColor: lv1Color,
+                                changePct: lv3Price.avg_change_pct,
+                                stockCount: lv3Price.stock_count,
+                                conceptCount: lv3.concept_count,
+                            });
+
+                            links.push({
+                                source: displayLevel === 'lv3' ? 'root' : lv2Id,
+                                target: lv3Id,
+                                color: `${lv1Color}60`,
+                            });
+
+                            // 添加叶子概念节点
+                            if (lv3.concepts && (displayLevel === 'all' || displayLevel === 'concept')) {
+                                lv3.concepts.forEach((conceptName) => {
+                                    const conceptId = `concept_${lv1.name}_${lv2.name}_${lv3.name}_${conceptName}`;
+                                    const conceptPrice = leafMap[conceptName] || {};
+
+                                    nodes.push({
+                                        id: conceptId,
+                                        name: conceptName,
+                                        level: 'concept',
+                                        parentLv1: lv1.name,
+                                        parentLv2: lv2.name,
+                                        parentLv3: lv3.name,
+                                        val: Math.max(1, (conceptPrice.stock_count || 10) / 25),
+                                        color: conceptPrice.avg_change_pct !== undefined
+                                            ? getChangeColor(conceptPrice.avg_change_pct)
+                                            : lv1Color,
+                                        baseColor: lv1Color,
+                                        changePct: conceptPrice.avg_change_pct,
+                                        stockCount: conceptPrice.stock_count,
+                                    });
+
+                                    links.push({
+                                        source: displayLevel === 'concept' ? 'root' : lv3Id,
+                                        target: conceptId,
+                                        color: `${lv1Color}40`,
+                                    });
+                                });
+                            }
+                        });
+                    }
+
+                    // 如果 lv2 直接包含概念（没有 lv3）
+                    if (lv2.concepts && (displayLevel === 'all' || displayLevel === 'concept')) {
+                        lv2.concepts.forEach((conceptName) => {
+                            const conceptId = `concept_${lv1.name}_${lv2.name}_${conceptName}`;
+                            const conceptPrice = leafMap[conceptName] || {};
+
+                            nodes.push({
+                                id: conceptId,
+                                name: conceptName,
+                                level: 'concept',
+                                parentLv1: lv1.name,
+                                parentLv2: lv2.name,
+                                val: Math.max(1, (conceptPrice.stock_count || 10) / 25),
+                                color: conceptPrice.avg_change_pct !== undefined
+                                    ? getChangeColor(conceptPrice.avg_change_pct)
+                                    : lv1Color,
+                                baseColor: lv1Color,
+                                changePct: conceptPrice.avg_change_pct,
+                                stockCount: conceptPrice.stock_count,
+                            });
+
+                            links.push({
+                                source: displayLevel === 'concept' ? 'root' : lv2Id,
+                                target: conceptId,
+                                color: `${lv1Color}40`,
+                            });
+                        });
+                    }
+                });
+            }
+        });
+
+        return { nodes, links };
+    }, [hierarchy, priceData, displayLevel]);
+
+    // 自动旋转
+    useEffect(() => {
+        if (fgRef.current && isRotating) {
+            const controls = fgRef.current.controls();
+            if (controls) {
+                controls.autoRotate = true;
+                controls.autoRotateSpeed = 0.5;
+            }
+        } else if (fgRef.current) {
+            const controls = fgRef.current.controls();
+            if (controls) {
+                controls.autoRotate = false;
+            }
+        }
+    }, [isRotating]);
+
+    // 处理节点点击
+    const handleNodeClick = useCallback((node) => {
+        if (node.level === 'concept') {
+            // 跳转到概念详情页
+            const htmlPath = `https://valuefrontier.cn/htmls/${encodeURIComponent(node.name)}.html`;
+            window.open(htmlPath, '_blank');
+        } else if (node.level === 'root') {
+            // 重置视图
+            if (fgRef.current) {
+                fgRef.current.cameraPosition({ x: 0, y: 0, z: 500 }, { x: 0, y: 0, z: 0 }, 1000);
+            }
+        } else {
+            // 聚焦到节点
+            if (fgRef.current) {
+                const distance = 200;
+                const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z);
+                fgRef.current.cameraPosition(
+                    { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio },
+                    node,
+                    1000
+                );
+            }
+        }
+
+        logger.info('ForceGraphView', '节点点击', { level: node.level, name: node.name });
+    }, []);
+
+    // 自定义节点渲染
+    const nodeThreeObject = useCallback((node) => {
+        if (node.level === 'root') {
+            // 根节点使用特殊球体
+            const geometry = new THREE.SphereGeometry(8);
+            const material = new THREE.MeshBasicMaterial({
+                color: node.color,
+                transparent: true,
+                opacity: 0.9,
+            });
+            const sphere = new THREE.Mesh(geometry, material);
+
+            // 添加发光效果
+            const glowGeometry = new THREE.SphereGeometry(12);
+            const glowMaterial = new THREE.MeshBasicMaterial({
+                color: node.color,
+                transparent: true,
+                opacity: 0.2,
+            });
+            const glow = new THREE.Mesh(glowGeometry, glowMaterial);
+            sphere.add(glow);
+
+            return sphere;
+        }
+
+        const size = (node.val || 5) * nodeSize;
+        const geometry = new THREE.SphereGeometry(size);
+        const material = new THREE.MeshBasicMaterial({
+            color: node.color,
+            transparent: true,
+            opacity: node.level === 'concept' ? 0.7 : 0.85,
+        });
+        const sphere = new THREE.Mesh(geometry, material);
+
+        // 为大节点添加发光效果
+        if (size > 5) {
+            const glowGeometry = new THREE.SphereGeometry(size * 1.3);
+            const glowMaterial = new THREE.MeshBasicMaterial({
+                color: node.color,
+                transparent: true,
+                opacity: 0.15,
+            });
+            const glow = new THREE.Mesh(glowGeometry, glowMaterial);
+            sphere.add(glow);
+        }
+
+        return sphere;
+    }, [nodeSize]);
+
+    // 刷新数据
+    const handleRefresh = useCallback(() => {
+        fetchHierarchyPrice();
+    }, [fetchHierarchyPrice]);
+
+    // 重置视图
+    const handleResetView = useCallback(() => {
+        if (fgRef.current) {
+            fgRef.current.cameraPosition({ x: 0, y: 0, z: 500 }, { x: 0, y: 0, z: 0 }, 1000);
+        }
+    }, []);
+
+    // 全屏切换
+    const toggleFullscreen = useCallback(() => {
+        setIsFullscreen(prev => !prev);
+    }, []);
+
+    // 格式化涨跌幅
+    const formatChangePercent = (value) => {
+        if (value === null || value === undefined) return '--';
+        const formatted = Math.abs(value).toFixed(2);
+        return value > 0 ? `+${formatted}%` : value < 0 ? `-${formatted}%` : '0.00%';
+    };
+
+    // 获取容器高度
+    const containerHeight = useMemo(() => {
+        if (isFullscreen) return '100vh';
+        return isMobile ? '500px' : '700px';
+    }, [isFullscreen, isMobile]);
+
+    if (loading) {
+        return (
+            <Center h="400px" bg="rgba(15, 23, 42, 0.8)" borderRadius="2xl">
+                <VStack spacing={4}>
+                    <Spinner size="xl" color="purple.400" thickness="4px" />
+                    <Text color="gray.400">正在构建 3D 星图...</Text>
+                </VStack>
+            </Center>
+        );
+    }
+
+    if (error) {
+        return (
+            <Center h="400px" bg="rgba(15, 23, 42, 0.8)" borderRadius="2xl">
+                <VStack spacing={4}>
+                    <Icon as={FaLayerGroup} boxSize={16} color="gray.600" />
+                    <Text color="gray.400">加载失败：{error}</Text>
+                    <Button
+                        colorScheme="purple"
+                        size="sm"
+                        onClick={fetchHierarchy}
+                    >
+                        重试
+                    </Button>
+                </VStack>
+            </Center>
+        );
+    }
+
+    return (
+        <Box
+            ref={containerRef}
+            position={isFullscreen ? 'fixed' : 'relative'}
+            top={isFullscreen ? 0 : 'auto'}
+            left={isFullscreen ? 0 : 'auto'}
+            right={isFullscreen ? 0 : 'auto'}
+            bottom={isFullscreen ? 0 : 'auto'}
+            zIndex={isFullscreen ? 1000 : 'auto'}
+            bg="rgba(15, 23, 42, 0.95)"
+            borderRadius={isFullscreen ? '0' : '2xl'}
+            overflow="hidden"
+            border={isFullscreen ? 'none' : '1px solid'}
+            borderColor="whiteAlpha.100"
+        >
+            {/* 工具栏 */}
+            <Flex
+                position="absolute"
+                top={4}
+                left={4}
+                right={4}
+                justify="space-between"
+                align="flex-start"
+                zIndex={10}
+                pointerEvents="none"
+            >
+                {/* 左侧信息 */}
+                <VStack align="start" spacing={2} pointerEvents="auto">
+                    <HStack
+                        bg="rgba(0, 0, 0, 0.6)"
+                        backdropFilter="blur(10px)"
+                        px={4}
+                        py={2}
+                        borderRadius="full"
+                        border="1px solid"
+                        borderColor="whiteAlpha.200"
+                    >
+                        <Icon as={FaCube} color="purple.300" />
+                        <Text color="white" fontWeight="bold" fontSize="sm">
+                            3D 概念星图
+                        </Text>
+                        <Badge colorScheme="purple" variant="solid" borderRadius="full">
+                            {graphData.nodes.length} 节点
+                        </Badge>
+                    </HStack>
+
+                    {/* 悬停节点信息 */}
+                    {hoveredNode && hoveredNode.level !== 'root' && (
+                        <Box
+                            bg="rgba(0, 0, 0, 0.8)"
+                            backdropFilter="blur(10px)"
+                            px={4}
+                            py={3}
+                            borderRadius="xl"
+                            border="1px solid"
+                            borderColor={hoveredNode.color}
+                            maxW="300px"
+                        >
+                            <VStack align="start" spacing={1}>
+                                <HStack>
+                                    <Badge
+                                        bg={hoveredNode.baseColor}
+                                        color="white"
+                                        borderRadius="full"
+                                        px={2}
+                                        fontSize="xs"
+                                    >
+                                        {hoveredNode.level === 'lv1' ? '一级' :
+                                         hoveredNode.level === 'lv2' ? '二级' :
+                                         hoveredNode.level === 'lv3' ? '三级' : '概念'}
+                                    </Badge>
+                                    {hoveredNode.changePct !== undefined && (
+                                        <Badge
+                                            bg={hoveredNode.changePct > 0 ? 'red.500' : hoveredNode.changePct < 0 ? 'green.500' : 'gray.500'}
+                                            color="white"
+                                            borderRadius="full"
+                                            px={2}
+                                            fontSize="xs"
+                                        >
+                                            {formatChangePercent(hoveredNode.changePct)}
+                                        </Badge>
+                                    )}
+                                </HStack>
+                                <Text color="white" fontWeight="bold" fontSize="md">
+                                    {hoveredNode.name}
+                                </Text>
+                                {hoveredNode.stockCount && (
+                                    <Text color="whiteAlpha.700" fontSize="xs">
+                                        {hoveredNode.stockCount} 只股票
+                                        {hoveredNode.conceptCount ? ` · ${hoveredNode.conceptCount} 个概念` : ''}
+                                    </Text>
+                                )}
+                            </VStack>
+                        </Box>
+                    )}
+                </VStack>
+
+                {/* 右侧控制按钮 */}
+                <VStack spacing={2} pointerEvents="auto">
+                    <HStack spacing={2}>
+                        {priceLoading && <Spinner size="sm" color="purple.300" />}
+
+                        <Tooltip label="刷新数据" placement="left">
+                            <IconButton
+                                size="sm"
+                                icon={<FaSync />}
+                                onClick={handleRefresh}
+                                isLoading={priceLoading}
+                                bg="rgba(0, 0, 0, 0.6)"
+                                color="white"
+                                border="1px solid"
+                                borderColor="whiteAlpha.200"
+                                _hover={{ bg: 'whiteAlpha.200' }}
+                                aria-label="刷新"
+                            />
+                        </Tooltip>
+
+                        <Tooltip label="重置视角" placement="left">
+                            <IconButton
+                                size="sm"
+                                icon={<FaHome />}
+                                onClick={handleResetView}
+                                bg="rgba(0, 0, 0, 0.6)"
+                                color="white"
+                                border="1px solid"
+                                borderColor="whiteAlpha.200"
+                                _hover={{ bg: 'whiteAlpha.200' }}
+                                aria-label="重置视角"
+                            />
+                        </Tooltip>
+
+                        <Tooltip label={isRotating ? '暂停旋转' : '开始旋转'} placement="left">
+                            <IconButton
+                                size="sm"
+                                icon={isRotating ? <FaPause /> : <FaPlay />}
+                                onClick={() => setIsRotating(!isRotating)}
+                                bg="rgba(0, 0, 0, 0.6)"
+                                color={isRotating ? 'green.300' : 'white'}
+                                border="1px solid"
+                                borderColor="whiteAlpha.200"
+                                _hover={{ bg: 'whiteAlpha.200' }}
+                                aria-label={isRotating ? '暂停旋转' : '开始旋转'}
+                            />
+                        </Tooltip>
+
+                        <Tooltip label="设置" placement="left">
+                            <IconButton
+                                size="sm"
+                                icon={isSettingsOpen ? <FaChevronUp /> : <FaCog />}
+                                onClick={onSettingsToggle}
+                                bg={isSettingsOpen ? 'purple.500' : 'rgba(0, 0, 0, 0.6)'}
+                                color="white"
+                                border="1px solid"
+                                borderColor="whiteAlpha.200"
+                                _hover={{ bg: isSettingsOpen ? 'purple.400' : 'whiteAlpha.200' }}
+                                aria-label="设置"
+                            />
+                        </Tooltip>
+
+                        <Tooltip label={isFullscreen ? '退出全屏' : '全屏'} placement="left">
+                            <IconButton
+                                size="sm"
+                                icon={isFullscreen ? <FaCompress /> : <FaExpand />}
+                                onClick={toggleFullscreen}
+                                bg="rgba(0, 0, 0, 0.6)"
+                                color="white"
+                                border="1px solid"
+                                borderColor="whiteAlpha.200"
+                                _hover={{ bg: 'whiteAlpha.200' }}
+                                aria-label={isFullscreen ? '退出全屏' : '全屏'}
+                            />
+                        </Tooltip>
+                    </HStack>
+
+                    {/* 设置面板 */}
+                    <Collapse in={isSettingsOpen}>
+                        <Box
+                            bg="rgba(0, 0, 0, 0.8)"
+                            backdropFilter="blur(10px)"
+                            p={4}
+                            borderRadius="xl"
+                            border="1px solid"
+                            borderColor="whiteAlpha.200"
+                            w="250px"
+                        >
+                            <VStack spacing={4} align="stretch">
+                                <FormControl>
+                                    <FormLabel color="whiteAlpha.800" fontSize="sm">
+                                        显示层级
+                                    </FormLabel>
+                                    <Select
+                                        value={displayLevel}
+                                        onChange={(e) => setDisplayLevel(e.target.value)}
+                                        size="sm"
+                                        bg="whiteAlpha.100"
+                                        color="white"
+                                        borderColor="whiteAlpha.300"
+                                        _hover={{ borderColor: 'purple.400' }}
+                                    >
+                                        <option value="all" style={{ background: '#1a1a2e' }}>全部层级</option>
+                                        <option value="lv1" style={{ background: '#1a1a2e' }}>仅一级</option>
+                                        <option value="lv2" style={{ background: '#1a1a2e' }}>仅二级</option>
+                                        <option value="lv3" style={{ background: '#1a1a2e' }}>仅三级</option>
+                                        <option value="concept" style={{ background: '#1a1a2e' }}>仅概念</option>
+                                    </Select>
+                                </FormControl>
+
+                                <FormControl>
+                                    <FormLabel color="whiteAlpha.800" fontSize="sm">
+                                        节点大小: {nodeSize.toFixed(1)}x
+                                    </FormLabel>
+                                    <Slider
+                                        value={nodeSize}
+                                        onChange={setNodeSize}
+                                        min={0.5}
+                                        max={2}
+                                        step={0.1}
+                                        colorScheme="purple"
+                                    >
+                                        <SliderTrack bg="whiteAlpha.200">
+                                            <SliderFilledTrack />
+                                        </SliderTrack>
+                                        <SliderThumb />
+                                    </Slider>
+                                </FormControl>
+
+                                <FormControl>
+                                    <FormLabel color="whiteAlpha.800" fontSize="sm">
+                                        连线透明度: {(linkOpacity * 100).toFixed(0)}%
+                                    </FormLabel>
+                                    <Slider
+                                        value={linkOpacity}
+                                        onChange={setLinkOpacity}
+                                        min={0.1}
+                                        max={1}
+                                        step={0.1}
+                                        colorScheme="purple"
+                                    >
+                                        <SliderTrack bg="whiteAlpha.200">
+                                            <SliderFilledTrack />
+                                        </SliderTrack>
+                                        <SliderThumb />
+                                    </Slider>
+                                </FormControl>
+
+                                <FormControl display="flex" alignItems="center" justifyContent="space-between">
+                                    <FormLabel color="whiteAlpha.800" fontSize="sm" mb={0}>
+                                        显示标签
+                                    </FormLabel>
+                                    <Switch
+                                        isChecked={showLabels}
+                                        onChange={(e) => setShowLabels(e.target.checked)}
+                                        colorScheme="purple"
+                                    />
+                                </FormControl>
+                            </VStack>
+                        </Box>
+                    </Collapse>
+                </VStack>
+            </Flex>
+
+            {/* 图例 */}
+            <Flex
+                position="absolute"
+                bottom={4}
+                left={4}
+                zIndex={10}
+                gap={3}
+                flexWrap="wrap"
+                pointerEvents="none"
+            >
+                <HStack
+                    bg="rgba(0, 0, 0, 0.6)"
+                    backdropFilter="blur(10px)"
+                    px={3}
+                    py={2}
+                    borderRadius="full"
+                    border="1px solid"
+                    borderColor="whiteAlpha.200"
+                    spacing={2}
+                >
+                    <Box w={3} h={3} borderRadius="full" bg="#EF4444" />
+                    <Text color="whiteAlpha.800" fontSize="xs">涨</Text>
+                </HStack>
+                <HStack
+                    bg="rgba(0, 0, 0, 0.6)"
+                    backdropFilter="blur(10px)"
+                    px={3}
+                    py={2}
+                    borderRadius="full"
+                    border="1px solid"
+                    borderColor="whiteAlpha.200"
+                    spacing={2}
+                >
+                    <Box w={3} h={3} borderRadius="full" bg="#22C55E" />
+                    <Text color="whiteAlpha.800" fontSize="xs">跌</Text>
+                </HStack>
+                <HStack
+                    bg="rgba(0, 0, 0, 0.6)"
+                    backdropFilter="blur(10px)"
+                    px={3}
+                    py={2}
+                    borderRadius="full"
+                    border="1px solid"
+                    borderColor="whiteAlpha.200"
+                    spacing={2}
+                >
+                    <Box w={3} h={3} borderRadius="full" bg="#64748B" />
+                    <Text color="whiteAlpha.800" fontSize="xs">平/无数据</Text>
+                </HStack>
+            </Flex>
+
+            {/* 操作提示 */}
+            <Box
+                position="absolute"
+                bottom={4}
+                right={4}
+                zIndex={10}
+                pointerEvents="none"
+            >
+                <HStack
+                    bg="rgba(0, 0, 0, 0.6)"
+                    backdropFilter="blur(10px)"
+                    px={3}
+                    py={2}
+                    borderRadius="full"
+                    border="1px solid"
+                    borderColor="whiteAlpha.200"
+                    spacing={3}
+                >
+                    <Text color="whiteAlpha.600" fontSize="xs">
+                        🖱️ 左键旋转 · 右键平移 · 滚轮缩放 · 点击聚焦
+                    </Text>
+                </HStack>
+            </Box>
+
+            {/* 3D Force Graph */}
+            <ForceGraph3D
+                ref={fgRef}
+                graphData={graphData}
+                height={isFullscreen ? window.innerHeight : (isMobile ? 500 : 700)}
+                width={containerRef.current?.clientWidth || window.innerWidth}
+                backgroundColor="rgba(15, 23, 42, 0)"
+                nodeThreeObject={nodeThreeObject}
+                nodeLabel={showLabels ? (node) => `
+                    <div style="
+                        background: rgba(0,0,0,0.8);
+                        padding: 8px 12px;
+                        border-radius: 8px;
+                        font-size: 12px;
+                        color: white;
+                        border: 1px solid ${node.color};
+                    ">
+                        <div style="font-weight: bold; margin-bottom: 4px;">${node.name}</div>
+                        ${node.changePct !== undefined ? `
+                            <div style="color: ${node.changePct > 0 ? '#FCA5A5' : node.changePct < 0 ? '#86EFAC' : '#94A3B8'}">
+                                ${node.changePct > 0 ? '↑' : node.changePct < 0 ? '↓' : ''}
+                                ${formatChangePercent(node.changePct)}
+                            </div>
+                        ` : ''}
+                        ${node.stockCount ? `<div style="color: #94A3B8; font-size: 11px;">${node.stockCount} 只股票</div>` : ''}
+                    </div>
+                ` : ''}
+                linkColor={(link) => link.color}
+                linkOpacity={linkOpacity}
+                linkWidth={1}
+                onNodeClick={handleNodeClick}
+                onNodeHover={(node) => setHoveredNode(node)}
+                enableNodeDrag={true}
+                enableNavigationControls={true}
+                showNavInfo={false}
+                d3AlphaDecay={0.02}
+                d3VelocityDecay={0.3}
+                warmupTicks={100}
+                cooldownTicks={200}
+            />
+        </Box>
+    );
+};
+
+export default ForceGraphView;

src/views/Concept/index.js

@@ -81,12 +81,13 @@ import {
     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 } from 'react-icons/fa';
+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 { keyframes } from '@emotion/react';
 import ConceptTimelineModal from './ConceptTimelineModal';
 import ConceptStatsPanel from './components/ConceptStatsPanel';
 import HierarchyView from './components/HierarchyView';
+import ForceGraphView from './components/ForceGraphView';
 import BreadcrumbNav from './components/BreadcrumbNav';
 import ConceptStocksModal from '@components/ConceptStocksModal';
 import TradeDatePicker from '@components/TradeDatePicker';
@@ -1759,6 +1760,25 @@ const ConceptCenter = () => {
                                     </HStack>
 
                                     <ButtonGroup size="sm" isAttached variant="outline">
+                                        <Tooltip label="3D星图" placement="top">
+                                            <IconButton
+                                                icon={<FaCube />}
+                                                onClick={() => {
+                                                    if (viewMode !== 'force3d') {
+                                                        trackViewModeChanged('force3d', viewMode);
+                                                        setViewMode('force3d');
+                                                    }
+                                                }}
+                                                bg={viewMode === 'force3d' ? 'purple.500' : 'transparent'}
+                                                color={viewMode === 'force3d' ? 'white' : 'whiteAlpha.700'}
+                                                borderColor="whiteAlpha.300"
+                                                _hover={{
+                                                    bg: viewMode === 'force3d' ? 'purple.400' : 'whiteAlpha.100',
+                                                    boxShadow: viewMode === 'force3d' ? '0 0 10px rgba(139, 92, 246, 0.4)' : 'none',
+                                                }}
+                                                aria-label="3D星图"
+                                            />
+                                        </Tooltip>
                                         <Tooltip label="层级图" placement="top">
                                             <IconButton
                                                 icon={<FaSitemap />}
@@ -1829,7 +1849,7 @@ const ConceptCenter = () => {
                             isDarkMode={true}
                         />
 
-                        {selectedDate && viewMode !== 'hierarchy' && (
+                        {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" />
@@ -1841,8 +1861,15 @@ const ConceptCenter = () => {
                             </Box>
                         )}
 
-                        {/* 层级图视图 */}
+                        {/* 3D 力导向图视图 */}
-                        {viewMode === 'hierarchy' ? (
+                        {viewMode === 'force3d' ? (
+                            <ForceGraphView
+                                apiBaseUrl={API_BASE_URL}
+                                onSelectCategory={handleHierarchySelect}
+                                selectedDate={selectedDate}
+                            />
+                        ) : /* 层级图视图 */
+                        viewMode === 'hierarchy' ? (
                             <HierarchyView
                                 apiBaseUrl={API_BASE_URL}
                                 onSelectCategory={handleHierarchySelect}
@@ -1956,7 +1983,7 @@ const ConceptCenter = () => {
                                     </HStack>
                                 </Center>
                             </>
-                        ) : viewMode !== 'hierarchy' ? (
+                        ) : viewMode !== 'hierarchy' && viewMode !== 'force3d' ? (
                             <Center h="400px">
                                 <VStack spacing={6}>
                                     <Icon as={FaTags} boxSize={20} color="whiteAlpha.300" />