feat: 相关概念添加 PRO 权限控制...

src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/index.js

@@ -28,8 +28,18 @@ import { logger } from '../../../../../utils/logger';
  * @param {string} props.eventTitle - 事件标题（用于搜索概念）
  * @param {string} props.effectiveTradingDate - 有效交易日期（涨跌幅数据日期）
  * @param {string|Object} props.eventTime - 事件发生时间
+ * @param {React.ReactNode} props.subscriptionBadge - 订阅徽章组件（可选）
+ * @param {boolean} props.isLocked - 是否锁定详细模式（需要付费）
+ * @param {Function} props.onLockedClick - 锁定时的点击回调（触发付费弹窗）
  */
-const RelatedConceptsSection = ({ eventTitle, effectiveTradingDate, eventTime }) => {
+const RelatedConceptsSection = ({
+  eventTitle,
+  effectiveTradingDate,
+  eventTime,
+  subscriptionBadge = null,
+  isLocked = false,
+  onLockedClick = null
+}) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [concepts, setConcepts] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -202,28 +212,41 @@ const RelatedConceptsSection = ({ eventTitle, effectiveTradingDate, eventTime })
 
   return (
     <Box bg={sectionBg} p={3} borderRadius="md">
-      {/* 标题栏 */}
-      <Flex justify="space-between" align="center" mb={3}>
-        <Flex align="center" gap={3}>
-          <Heading size="sm" color={headingColor}>
-            相关概念
-          </Heading>
-          {/* 交易日期信息 */}
-          <TradingDateInfo
-            effectiveTradingDate={effectiveTradingDate}
-            eventTime={eventTime}
-          />
+      {/* 标题栏 - 两行布局 */}
+      <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 {
+                // 否则正常展开/收起
+                setIsExpanded(!isExpanded);
+              }
+            }}
+          >
+            {isExpanded ? '收起' : '查看详细描述'}
+          </Button>
         </Flex>
-        <Button
-          size="sm"
-          variant="ghost"
-          colorScheme="blue"
-          rightIcon={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
-          onClick={() => setIsExpanded(!isExpanded)}
-        >
-          {isExpanded ? '收起' : '查看详细描述'}
-        </Button>
-      </Flex>
+        {/* 第二行：交易日期信息 */}
+        <TradingDateInfo
+          effectiveTradingDate={effectiveTradingDate}
+          eventTime={eventTime}
+        />
+      </Box>
 
       {/* 简单模式：横向卡片列表（总是显示） */}
       <Flex gap={2} flexWrap="wrap" mb={isExpanded ? 3 : 0}>