更新Company页面的UI为FUI风格

2025-12-18 20:06:51 +08:00
parent 64fdb6e580
commit 4ac9b30bfb
5 changed files with 165 additions and 78 deletions
--- a/app.py
+++ b/app.py
@@ -18875,5 +18875,12 @@ if __name__ == '__main__':
    # 初始化事件轮询机制（WebSocket 推送）
    initialize_event_polling()

+    # 启动时预热股票缓存（股票名称 + 前收盘价）
+    print("[启动] 正在预热股票缓存...")
+    try:
+        preload_stock_cache()
+    except Exception as e:
+        print(f"[启动] 预热缓存失败（不影响服务启动）: {e}")
+
    # 使用 socketio.run 替代 app.run 以支持 WebSocket
    socketio.run(app, host='0.0.0.0', port=5001, debug=False, allow_unsafe_werkzeug=True)
--- a/src/components/EventDetailPanel/DynamicNewsDetailPanel.js
+++ b/src/components/EventDetailPanel/DynamicNewsDetailPanel.js
@@ -352,6 +352,7 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {

          {/* 相关概念（可折叠） - 需要 PRO 权限 */}
          <RelatedConceptsSection
+            eventId={event.id}
            eventTitle={event.title}
            effectiveTradingDate={event.trading_date || event.created_at}
            eventTime={event.created_at}
--- 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
@@ -26,7 +26,8 @@ import { getApiBase } from '@utils/apiConfig';
 /**
 * 相关概念区组件
 * @param {Object} props
- * @param {string} props.eventTitle - 事件标题（用于搜索概念）
+ * @param {number} props.eventId - 事件ID（用于获取 related_concepts 表数据）
+ * @param {string} props.eventTitle - 事件标题（备用，当 eventId 不存在时使用搜索）
 * @param {string} props.effectiveTradingDate - 有效交易日期（涨跌幅数据日期）
 * @param {string|Object} props.eventTime - 事件发生时间
 * @param {React.ReactNode} props.subscriptionBadge - 订阅徽章组件（可选）
@@ -34,6 +35,7 @@ import { getApiBase } from '@utils/apiConfig';
 * @param {Function} props.onLockedClick - 锁定时的点击回调（触发付费弹窗）
 */
 const RelatedConceptsSection = ({
+  eventId,
  eventTitle,
  effectiveTradingDate,
  eventTime,
@@ -57,6 +59,7 @@ const RelatedConceptsSection = ({
  const textColor = useColorModeValue('gray.600', 'gray.400');

  console.log('[RelatedConceptsSection] 组件渲染', {
+    eventId,
    eventTitle,
    effectiveTradingDate,
    eventTime,
@@ -65,16 +68,76 @@ const RelatedConceptsSection = ({
    error
  });

-  // 搜索相关概念
+  // 获取相关概念 - 优先使用 eventId 从数据库获取
  useEffect(() => {
-    const searchConcepts = async () => {
+    const fetchConcepts = async () => {
      console.log('[RelatedConceptsSection] useEffect 触发', {
+        eventId,
        eventTitle,
        effectiveTradingDate
      });

+      // 优先使用 eventId 获取数据库中的相关概念
+      if (eventId) {
+        try {
+          setLoading(true);
+          setError(null);
+
+          const apiUrl = `${getApiBase()}/api/events/${eventId}/concepts`;
+          console.log('[RelatedConceptsSection] 从数据库获取相关概念', { url: apiUrl });
+
+          const response = await fetch(apiUrl, {
+            method: 'GET',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'include'
+          });
+
+          if (!response.ok) {
+            // 如果是 403，说明需要订阅，不是错误
+            if (response.status === 403) {
+              console.log('[RelatedConceptsSection] 需要订阅才能查看');
+              setConcepts([]);
+              setLoading(false);
+              return;
+            }
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+
+          const data = await response.json();
+          console.log('[RelatedConceptsSection] 数据库响应', data);
+
+          if (data.success && Array.isArray(data.data)) {
+            // 转换数据格式，使其与原有展示逻辑兼容
+            const formattedConcepts = data.data.map(item => ({
+              concept: item.concept,
+              reason: item.reason,
+              concept_code: item.concept_code,
+              // 保留原有字段以兼容 DetailedConceptCard
+              score: 1,  // 数据库中的都是高相关度
+              description: item.reason,  // reason 作为描述
+              stocks: [],  // 暂无股票数据
+              stock_count: 0
+            }));
+            console.log('[RelatedConceptsSection] 设置概念数据', formattedConcepts);
+            setConcepts(formattedConcepts);
+          } else {
+            setConcepts([]);
+          }
+        } catch (err) {
+          console.error('[RelatedConceptsSection] 获取概念失败', err);
+          logger.error('RelatedConceptsSection', 'fetchConcepts', err);
+          setError('加载概念数据失败');
+          setConcepts([]);
+        } finally {
+          setLoading(false);
+        }
+        return;
+      }
+
+      // 降级方案：使用 eventTitle 搜索概念（兼容旧逻辑）
      if (!eventTitle || !effectiveTradingDate) {
        console.log('[RelatedConceptsSection] 缺少必要参数，跳过搜索', {
+          hasEventId: !!eventId,
          hasEventTitle: !!eventTitle,
          hasEffectiveTradingDate: !!effectiveTradingDate
        });
@@ -86,19 +149,14 @@ 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');
        }

@@ -111,67 +169,37 @@ const RelatedConceptsSection = ({
        };

        const apiUrl = `${getApiBase()}/concept-api/search`;
-        console.log('[RelatedConceptsSection] 发送请求', {
-          url: apiUrl,
-          requestBody
-        });
-        logger.debug('RelatedConceptsSection', '搜索概念', requestBody);
+        console.log('[RelatedConceptsSection] 降级：使用搜索接口', { url: apiUrl, requestBody });

        const response = await fetch(apiUrl, {
          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
+          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(requestBody)
        });

-        console.log('[RelatedConceptsSection] 响应状态', {
-          ok: response.ok,
-          status: response.status,
-          statusText: response.statusText
-        });
-
        if (!response.ok) {
          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);
        } else {
-          console.log('[RelatedConceptsSection] 没有找到概念数据，设置为空数组');
          setConcepts([]);
        }
      } catch (err) {
        console.error('[RelatedConceptsSection] 搜索概念失败', err);
-        logger.error('RelatedConceptsSection', 'searchConcepts', err);
        setError('加载概念数据失败');
        setConcepts([]);
      } finally {
-        console.log('[RelatedConceptsSection] 加载完成');
        setLoading(false);
      }
    };

-    searchConcepts();
-  }, [eventTitle, effectiveTradingDate]);
+    fetchConcepts();
+  }, [eventId, eventTitle, effectiveTradingDate]);

  // 加载中状态
  if (loading) {