Merge branch 'feature_bugfix/251217_stock' of https://git.valuefrontier.cn/vf/vf_react into feature_bugfix/251217_stock

* 'feature_bugfix/251217_stock' of https://git.valuefrontier.cn/vf/vf_react: 更新Company页面的UI为FUI风格更新Company页面的UI为FUI风格更新Company页面的UI为FUI风格更新Company页面的UI为FUI风格更新Company页面的UI为FUI风格更新Company页面的UI为FUI风格更新Company页面的UI为FUI风格更新Company页面的UI为FUI风格更新Company页面的UI为FUI风格更新Company页面的UI为FUI风格更新Company页面的UI为FUI风格更新Company页面的UI为FUI风格
2025-12-19 10:16:07 +08:00
parent 02cc3eadd9 25b2c2af49
commit 986ec05eb1
7 changed files with 1041 additions and 422 deletions
--- a/src/components/EventDetailPanel/DynamicNewsDetailPanel.js
+++ b/src/components/EventDetailPanel/DynamicNewsDetailPanel.js
@@ -198,10 +198,6 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
    }
  }, [sectionState.stocks, stocks.length, refreshQuotes]);

-  // 相关概念 - 展开/收起（无需加载）
-  const handleConceptsToggle = useCallback(() => {
-    dispatchSection({ type: 'TOGGLE', section: 'concepts' });
-  }, []);

  // 历史事件对比 - 数据已预加载，只需切换展开状态
  const handleHistoricalToggle = useCallback(() => {
@@ -350,13 +346,10 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
            )}
          </CollapsibleSection>

-          {/* 相关概念（可折叠） - 需要 PRO 权限 */}
+          {/* 相关概念（手风琴样式） - 需要 PRO 权限 */}
          <RelatedConceptsSection
+            eventId={event.id}
            eventTitle={event.title}
-            effectiveTradingDate={event.trading_date || event.created_at}
-            eventTime={event.created_at}
-            isOpen={sectionState.concepts.isOpen}
-            onToggle={handleConceptsToggle}
            subscriptionBadge={!canAccessConcepts ? <SubscriptionBadge tier="pro" size="sm" /> : null}
            isLocked={!canAccessConcepts}
            onLockedClick={() => handleLockedClick('相关概念', 'pro')}
--- a/src/components/EventDetailPanel/RelatedConceptsSection/DetailedConceptCard.js
+++ b/src/components/EventDetailPanel/RelatedConceptsSection/DetailedConceptCard.js
@@ -19,8 +19,9 @@ import ConceptStockItem from './ConceptStockItem';
 /**
 * 详细概念卡片组件
 * @param {Object} props
- * @param {Object} props.concept - 概念对象（兼容 v1/v2 API）
+ * @param {Object} props.concept - 概念对象（兼容 v1/v2 API 和 related_concepts 表数据）
 *   - concept: 概念名称
+ *   - reason: 关联原因（来自 related_concepts 表）
 *   - stock_count: 相关股票数量
 *   - score: 相关度（0-1）
 *   - price_info.avg_change_pct: 平均涨跌幅
@@ -34,6 +35,8 @@ const DetailedConceptCard = ({ concept, onClick }) => {
  const borderColor = useColorModeValue('gray.200', 'gray.600');
  const headingColor = useColorModeValue('gray.700', 'gray.200');
  const stockCountColor = useColorModeValue('gray.500', 'gray.400');
+  const reasonBg = useColorModeValue('blue.50', 'blue.900');
+  const reasonColor = useColorModeValue('gray.700', 'gray.200');

  // 计算相关度百分比
  const relevanceScore = Math.round((concept.score || 0) * 100);
@@ -43,6 +46,9 @@ const DetailedConceptCard = ({ concept, onClick }) => {
  const changeColor = changePct > 0 ? 'red' : changePct < 0 ? 'green' : 'gray';
  const changeSymbol = changePct > 0 ? '+' : '';

+  // 判断是否来自数据库（有 reason 字段）
+  const isFromDatabase = !!concept.reason;
+
  return (
    <Card
      bg={cardBg}
@@ -67,17 +73,27 @@ const DetailedConceptCard = ({ concept, onClick }) => {
                {concept.concept}
              </Text>
              <HStack spacing={2} flexWrap="wrap">
-                <Badge colorScheme="purple" fontSize="xs">
-                  相关度: {relevanceScore}%
-                </Badge>
-                <Badge colorScheme="orange" fontSize="xs">
-                  {concept.stock_count} 只股票
-                </Badge>
+                {/* 数据库数据显示"AI分析"标签，搜索数据显示相关度 */}
+                {isFromDatabase ? (
+                  <Badge colorScheme="green" fontSize="xs">
+                    AI 分析
+                  </Badge>
+                ) : (
+                  <Badge colorScheme="purple" fontSize="xs">
+                    相关度: {relevanceScore}%
+                  </Badge>
+                )}
+                {/* 只有搜索数据才显示股票数量 */}
+                {!isFromDatabase && concept.stock_count > 0 && (
+                  <Badge colorScheme="orange" fontSize="xs">
+                    {concept.stock_count} 只股票
+                  </Badge>
+                )}
              </HStack>
            </VStack>

-            {/* 右侧：涨跌幅 */}
-            {concept.price_info?.avg_change_pct && (
+            {/* 右侧：涨跌幅（仅搜索数据有） */}
+            {!isFromDatabase && concept.price_info?.avg_change_pct && (
              <Box textAlign="right">
                <Text fontSize="xs" color={stockCountColor} mb={1}>
                  平均涨跌幅
@@ -97,8 +113,30 @@ const DetailedConceptCard = ({ concept, onClick }) => {

          <Divider />

-          {/* 概念描述 */}
-          {concept.description && (
+          {/* 关联原因（来自数据库，突出显示） */}
+          {concept.reason && (
+            <Box
+              bg={reasonBg}
+              p={3}
+              borderRadius="md"
+              borderLeft="4px solid"
+              borderLeftColor="blue.400"
+            >
+              <Text fontSize="xs" fontWeight="bold" color="blue.500" mb={1}>
+                关联原因
+              </Text>
+              <Text
+                fontSize="sm"
+                color={reasonColor}
+                lineHeight="1.8"
+              >
+                {concept.reason}
+              </Text>
+            </Box>
+          )}
+
+          {/* 概念描述（仅搜索数据有，且没有 reason 时显示） */}
+          {!concept.reason && concept.description && (
            <Text
              fontSize="sm"
              color={stockCountColor}
--- a/src/components/EventDetailPanel/RelatedConceptsSection/SimpleConceptCard.js
+++ b/src/components/EventDetailPanel/RelatedConceptsSection/SimpleConceptCard.js
@@ -14,10 +14,11 @@ import {
 /**
 * 简单概念卡片组件
 * @param {Object} props
- * @param {Object} props.concept - 概念对象
- *   - name: 概念名称
+ * @param {Object} props.concept - 概念对象（兼容搜索数据和数据库数据）
+ *   - concept: 概念名称
+ *   - reason: 关联原因（来自数据库）
 *   - stock_count: 相关股票数量
- *   - relevance: 相关度（0-100）
+ *   - score: 相关度（0-1）
 * @param {Function} props.onClick - 点击回调
 * @param {Function} props.getRelevanceColor - 获取相关度颜色的函数
 */
@@ -34,13 +35,16 @@ const SimpleConceptCard = ({ concept, onClick, getRelevanceColor }) => {
  const changeColor = changePct !== null ? (changePct > 0 ? 'red' : changePct < 0 ? 'green' : 'gray') : null;
  const changeSymbol = changePct !== null && changePct > 0 ? '+' : '';

+  // 判断是否来自数据库（有 reason 字段）
+  const isFromDatabase = !!concept.reason;
+
  return (
    <VStack
      align="stretch"
      spacing={1}
      bg={cardBg}
      borderWidth="1px"
-      borderColor={borderColor}
+      borderColor={isFromDatabase ? 'green.300' : borderColor}
      borderRadius="md"
      px={2}
      py={1}
@@ -61,30 +65,39 @@ const SimpleConceptCard = ({ concept, onClick, getRelevanceColor }) => {
        wordBreak="break-word"
        lineHeight="1.4"
      >
-        {concept.concept}{' '}
-        <Text as="span" color="gray.500">
-          ({concept.stock_count})
-        </Text>
+        {concept.concept}
+        {/* 只有搜索数据才显示股票数量 */}
+        {!isFromDatabase && concept.stock_count > 0 && (
+          <Text as="span" color="gray.500">
+            {' '}({concept.stock_count})
+          </Text>
+        )}
      </Text>

-      {/* 第二行：相关度 + 涨跌幅 */}
+      {/* 第二行：标签 */}
      <Flex justify="space-between" align="center" gap={1} flexWrap="wrap">
-        {/* 相关度标签 */}
-        <Box
-          bg={relevanceColors.bg}
-          color={relevanceColors.color}
-          px={1.5}
-          py={0.5}
-          borderRadius="sm"
-          flexShrink={0}
-        >
-          <Text fontSize="10px" fontWeight="medium" whiteSpace="nowrap">
-            相关度: {relevanceScore}%
-          </Text>
-        </Box>
+        {/* 数据库数据显示"AI分析"，搜索数据显示相关度 */}
+        {isFromDatabase ? (
+          <Badge colorScheme="green" fontSize="10px" px={1.5} py={0.5}>
+            AI 分析
+          </Badge>
+        ) : (
+          <Box
+            bg={relevanceColors.bg}
+            color={relevanceColors.color}
+            px={1.5}
+            py={0.5}
+            borderRadius="sm"
+            flexShrink={0}
+          >
+            <Text fontSize="10px" fontWeight="medium" whiteSpace="nowrap">
+              相关度: {relevanceScore}%
+            </Text>
+          </Box>
+        )}

-        {/* 涨跌幅数据 */}
-        {changePct !== null && (
+        {/* 涨跌幅数据（仅搜索数据有） */}
+        {!isFromDatabase && changePct !== null && (
          <Badge
            colorScheme={changeColor}
            fontSize="10px"
--- a/src/components/EventDetailPanel/RelatedConceptsSection/index.js
+++ b/src/components/EventDetailPanel/RelatedConceptsSection/index.js
@@ -1,83 +1,140 @@
 // src/components/EventDetailPanel/RelatedConceptsSection/index.js
-// 相关概念区组件（主组件）
+// 相关概念区组件 - 折叠手风琴样式

 import React, { useState, useEffect } from 'react';
 import {
  Box,
-  SimpleGrid,
  Flex,
-  Button,
-  Collapse,
  Heading,
  Center,
  Spinner,
  Text,
+  Badge,
+  VStack,
+  HStack,
+  Icon,
+  Collapse,
  useColorModeValue,
 } from '@chakra-ui/react';
-import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
+import { ChevronRightIcon, ChevronDownIcon } from '@chakra-ui/icons';
 import { useNavigate } from 'react-router-dom';
-import dayjs from 'dayjs';
-import SimpleConceptCard from './SimpleConceptCard';
-import DetailedConceptCard from './DetailedConceptCard';
-import TradingDateInfo from './TradingDateInfo';
 import { logger } from '@utils/logger';
 import { getApiBase } from '@utils/apiConfig';

+/**
+ * 单个概念项组件（手风琴项）
+ */
+const ConceptItem = ({ concept, isExpanded, onToggle, onNavigate }) => {
+  const itemBg = useColorModeValue('white', 'gray.700');
+  const itemHoverBg = useColorModeValue('gray.50', 'gray.650');
+  const borderColor = useColorModeValue('gray.200', 'gray.600');
+  const conceptColor = useColorModeValue('blue.600', 'blue.300');
+  const reasonBg = useColorModeValue('blue.50', 'gray.800');
+  const reasonColor = useColorModeValue('gray.700', 'gray.200');
+  const iconColor = useColorModeValue('gray.500', 'gray.400');
+
+  return (
+    <Box
+      borderWidth="1px"
+      borderColor={borderColor}
+      borderRadius="md"
+      overflow="hidden"
+      bg={itemBg}
+    >
+      {/* 概念标题行 - 可点击展开 */}
+      <Flex
+        px={3}
+        py={2.5}
+        cursor="pointer"
+        align="center"
+        justify="space-between"
+        _hover={{ bg: itemHoverBg }}
+        onClick={onToggle}
+        transition="background 0.2s"
+      >
+        <HStack spacing={2} flex={1}>
+          <Icon
+            as={isExpanded ? ChevronDownIcon : ChevronRightIcon}
+            color={iconColor}
+            boxSize={4}
+            transition="transform 0.2s"
+          />
+          <Text
+            fontSize="sm"
+            fontWeight="medium"
+            color={conceptColor}
+            cursor="pointer"
+            _hover={{ textDecoration: 'underline' }}
+            onClick={(e) => {
+              e.stopPropagation();
+              onNavigate(concept);
+            }}
+          >
+            {concept.concept}
+          </Text>
+          <Badge colorScheme="green" fontSize="xs" flexShrink={0}>
+            AI 分析
+          </Badge>
+        </HStack>
+      </Flex>
+
+      {/* 关联原因 - 可折叠 */}
+      <Collapse in={isExpanded} animateOpacity>
+        <Box
+          px={4}
+          py={3}
+          bg={reasonBg}
+          borderTop="1px solid"
+          borderTopColor={borderColor}
+        >
+          <Text
+            fontSize="sm"
+            color={reasonColor}
+            lineHeight="1.8"
+            whiteSpace="pre-wrap"
+          >
+            {concept.reason || '暂无关联原因说明'}
+          </Text>
+        </Box>
+      </Collapse>
+    </Box>
+  );
+};
+
 /**
 * 相关概念区组件
 * @param {Object} props
- * @param {string} props.eventTitle - 事件标题（用于搜索概念）
- * @param {string} props.effectiveTradingDate - 有效交易日期（涨跌幅数据日期）
- * @param {string|Object} props.eventTime - 事件发生时间
+ * @param {number} props.eventId - 事件ID（用于获取 related_concepts 表数据）
+ * @param {string} props.eventTitle - 事件标题（备用）
 * @param {React.ReactNode} props.subscriptionBadge - 订阅徽章组件（可选）
- * @param {boolean} props.isLocked - 是否锁定详细模式（需要付费）
- * @param {Function} props.onLockedClick - 锁定时的点击回调（触发付费弹窗）
+ * @param {boolean} props.isLocked - 是否锁定（需要付费）
+ * @param {Function} props.onLockedClick - 锁定时的点击回调
 */
 const RelatedConceptsSection = ({
+  eventId,
  eventTitle,
-  effectiveTradingDate,
-  eventTime,
  subscriptionBadge = null,
  isLocked = false,
  onLockedClick = null,
-  isOpen = undefined,  // 新增：受控模式（外部控制展开状态）
-  onToggle = undefined  // 新增：受控模式（外部控制展开回调）
 }) => {
-  // 使用外部 isOpen，如果没有则使用内部 useState
-  const [internalExpanded, setInternalExpanded] = useState(false);
-  const isExpanded = onToggle !== undefined ? isOpen : internalExpanded;
  const [concepts, setConcepts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
+  // 记录每个概念的展开状态
+  const [expandedItems, setExpandedItems] = useState({});
  const navigate = useNavigate();

  // 颜色配置
  const sectionBg = useColorModeValue('gray.50', 'gray.750');
  const headingColor = useColorModeValue('gray.700', 'gray.200');
  const textColor = useColorModeValue('gray.600', 'gray.400');
+  const countBadgeBg = useColorModeValue('blue.100', 'blue.800');
+  const countBadgeColor = useColorModeValue('blue.700', 'blue.200');

-  console.log('[RelatedConceptsSection] 组件渲染', {
-    eventTitle,
-    effectiveTradingDate,
-    eventTime,
-    loading,
-    conceptsCount: concepts?.length || 0,
-    error
-  });
-
-  // 搜索相关概念
+  // 获取相关概念
  useEffect(() => {
-    const searchConcepts = async () => {
-      console.log('[RelatedConceptsSection] useEffect 触发', {
-        eventTitle,
-        effectiveTradingDate
-      });
-
-      if (!eventTitle || !effectiveTradingDate) {
-        console.log('[RelatedConceptsSection] 缺少必要参数，跳过搜索', {
-          hasEventTitle: !!eventTitle,
-          hasEffectiveTradingDate: !!effectiveTradingDate
-        });
+    const fetchConcepts = async () => {
+      if (!eventId) {
        setLoading(false);
        return;
      }
@@ -86,178 +143,103 @@ const RelatedConceptsSection = ({
        setLoading(true);
        setError(null);

-        // 格式化交易日期 - 统一使用 moment 处理
-        let formattedTradeDate;
-        try {
-          // 不管传入的是什么格式，都用 moment 解析并格式化为 YYYY-MM-DD
-          formattedTradeDate = dayjs(effectiveTradingDate).format('YYYY-MM-DD');
-
-          // 验证日期是否有效
-          if (!dayjs(formattedTradeDate, 'YYYY-MM-DD', true).isValid()) {
-            console.warn('[RelatedConceptsSection] 无效日期，使用当前日期');
-            formattedTradeDate = dayjs().format('YYYY-MM-DD');
-          }
-        } catch (error) {
-          console.warn('[RelatedConceptsSection] 日期格式化失败，使用当前日期', error);
-          formattedTradeDate = dayjs().format('YYYY-MM-DD');
-        }
-
-        const requestBody = {
-          query: eventTitle,
-          size: 5,
-          page: 1,
-          sort_by: "_score",
-          trade_date: formattedTradeDate
-        };
-
-        const apiUrl = `${getApiBase()}/concept-api/search`;
-        console.log('[RelatedConceptsSection] 发送请求', {
-          url: apiUrl,
-          requestBody
-        });
-        logger.debug('RelatedConceptsSection', '搜索概念', requestBody);
-
+        const apiUrl = `${getApiBase()}/api/events/${eventId}/concepts`;
        const response = await fetch(apiUrl, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(requestBody)
-        });
-
-        console.log('[RelatedConceptsSection] 响应状态', {
-          ok: response.ok,
-          status: response.status,
-          statusText: response.statusText
+          method: 'GET',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'include'
        });

        if (!response.ok) {
+          if (response.status === 403) {
+            setConcepts([]);
+            setLoading(false);
+            return;
+          }
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
-        console.log('[RelatedConceptsSection] 响应数据', {
-          hasResults: !!data.results,
-          resultsCount: data.results?.length || 0,
-          hasDataConcepts: !!(data.data && data.data.concepts),
-          data: data
-        });
-        logger.debug('RelatedConceptsSection', '概念搜索响应', {
-          hasResults: !!data.results,
-          resultsCount: data.results?.length || 0
-        });
-
-        // 设置概念数据
-        if (data.results && Array.isArray(data.results)) {
-          console.log('[RelatedConceptsSection] 设置概念数据 (results)', data.results);
-          setConcepts(data.results);
-        } else if (data.data && data.data.concepts) {
-          // 向后兼容
-          console.log('[RelatedConceptsSection] 设置概念数据 (data.concepts)', data.data.concepts);
-          setConcepts(data.data.concepts);
+        if (data.success && Array.isArray(data.data)) {
+          setConcepts(data.data);
+          // 默认展开第一个
+          if (data.data.length > 0) {
+            setExpandedItems({ 0: true });
+          }
        } else {
-          console.log('[RelatedConceptsSection] 没有找到概念数据，设置为空数组');
          setConcepts([]);
        }
      } catch (err) {
-        console.error('[RelatedConceptsSection] 搜索概念失败', err);
-        logger.error('RelatedConceptsSection', 'searchConcepts', err);
+        console.error('[RelatedConceptsSection] 获取概念失败', err);
+        logger.error('RelatedConceptsSection', 'fetchConcepts', err);
        setError('加载概念数据失败');
        setConcepts([]);
      } finally {
-        console.log('[RelatedConceptsSection] 加载完成');
        setLoading(false);
      }
    };

-    searchConcepts();
-  }, [eventTitle, effectiveTradingDate]);
+    fetchConcepts();
+  }, [eventId]);
+
+  // 切换某个概念的展开状态
+  const toggleItem = (index) => {
+    if (isLocked && onLockedClick) {
+      onLockedClick();
+      return;
+    }
+    setExpandedItems(prev => ({
+      ...prev,
+      [index]: !prev[index]
+    }));
+  };
+
+  // 跳转到概念中心
+  const handleNavigate = (concept) => {
+    navigate(`/concepts?q=${encodeURIComponent(concept.concept)}`);
+  };

  // 加载中状态
  if (loading) {
    return (
      <Box bg={sectionBg} p={3} borderRadius="md">
        <Center py={4}>
-          <Spinner size="md" color="blue.500" mr={2} />
+          <Spinner size="sm" color="blue.500" mr={2} />
          <Text color={textColor} fontSize="sm">加载相关概念中...</Text>
        </Center>
      </Box>
    );
  }

-  // 判断是否有数据
  const hasNoConcepts = !concepts || concepts.length === 0;

-  /**
-   * 根据相关度获取颜色（浅色背景 + 深色文字）
-   * @param {number} relevance - 相关度（0-100）
-   * @returns {Object} 包含背景色和文字色
-   */
-  const getRelevanceColor = (relevance) => {
-    if (relevance >= 90) {
-      return { bg: 'purple.50', color: 'purple.800' }; // 极高相关
-    } else if (relevance >= 80) {
-      return { bg: 'pink.50', color: 'pink.800' }; // 高相关
-    } else if (relevance >= 70) {
-      return { bg: 'orange.50', color: 'orange.800' }; // 中等相关
-    } else {
-      return { bg: 'gray.100', color: 'gray.700' }; // 低相关
-    }
-  };
-
-  /**
-   * 处理概念点击
-   * @param {Object} concept - 概念对象
-   */
-  const handleConceptClick = (concept) => {
-    // 跳转到概念中心，并搜索该概念
-    navigate(`/concepts?q=${encodeURIComponent(concept.concept)}`);
-  };
-
  return (
    <Box bg={sectionBg} p={3} borderRadius="md">
-      {/* 标题栏 - 两行布局 */}
-      <Box mb={3}>
-        {/* 第一行：标题 + Badge + 按钮 */}
-        <Flex justify="space-between" align="center" mb={2}>
-          <Flex align="center" gap={2}>
-            <Heading size="sm" color={headingColor}>
-              相关概念
-            </Heading>
-            {/* 订阅徽章 */}
-            {subscriptionBadge}
-          </Flex>
-          <Button
-            size="sm"
-            variant="ghost"
-            colorScheme="blue"
-            rightIcon={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
-            onClick={() => {
-              // 如果被锁定且有回调函数，触发付费弹窗
-              if (isLocked && onLockedClick) {
-                onLockedClick();
-              } else if (onToggle !== undefined) {
-                // 受控模式：调用外部回调
-                onToggle();
-              } else {
-                // 非受控模式：使用内部状态
-                setInternalExpanded(!internalExpanded);
-              }
-            }}
-          >
-            {isExpanded ? '收起' : '查看详细'}
-          </Button>
-        </Flex>
-        {/* 第二行：交易日期信息 */}
-        <TradingDateInfo
-          effectiveTradingDate={effectiveTradingDate}
-          eventTime={eventTime}
-        />
-      </Box>
+      {/* 标题栏 */}
+      <Flex justify="space-between" align="center" mb={3}>
+        <HStack spacing={2}>
+          <Heading size="sm" color={headingColor}>
+            相关概念
+          </Heading>
+          {!hasNoConcepts && (
+            <Badge
+              bg={countBadgeBg}
+              color={countBadgeColor}
+              fontSize="xs"
+              px={2}
+              py={0.5}
+              borderRadius="full"
+            >
+              {concepts.length}
+            </Badge>
+          )}
+          {subscriptionBadge}
+        </HStack>
+      </Flex>

-      {/* 简单模式：横向卡片列表（总是显示） */}
+      {/* 概念列表 - 手风琴样式 */}
      {hasNoConcepts ? (
-        <Box mb={isExpanded ? 3 : 0}>
+        <Box py={2}>
          {error ? (
            <Text color="red.500" fontSize="sm">{error}</Text>
          ) : (
@@ -265,41 +247,18 @@ const RelatedConceptsSection = ({
          )}
        </Box>
      ) : (
-        <Flex gap={2} flexWrap="wrap" mb={isExpanded ? 3 : 0}>
+        <VStack spacing={2} align="stretch">
          {concepts.map((concept, index) => (
-            <SimpleConceptCard
-              key={index}
+            <ConceptItem
+              key={concept.id || index}
              concept={concept}
-              onClick={handleConceptClick}
-              getRelevanceColor={getRelevanceColor}
+              isExpanded={!!expandedItems[index]}
+              onToggle={() => toggleItem(index)}
+              onNavigate={handleNavigate}
            />
          ))}
-        </Flex>
+        </VStack>
      )}
-
-      {/* 详细模式：卡片网格（可折叠） */}
-      <Collapse in={isExpanded} animateOpacity>
-        {hasNoConcepts ? (
-          <Box py={4}>
-            {error ? (
-              <Text color="red.500" fontSize="sm" textAlign="center">{error}</Text>
-            ) : (
-              <Text color={textColor} fontSize="sm" textAlign="center">暂无详细数据</Text>
-            )}
-          </Box>
-        ) : (
-          /* 详细概念卡片网格 */
-          <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
-            {concepts.map((concept, index) => (
-              <DetailedConceptCard
-                key={index}
-                concept={concept}
-                onClick={handleConceptClick}
-              />
-            ))}
-          </SimpleGrid>
-        )}
-      </Collapse>
    </Box>
  );
 };