update pay promo

src/hooks/useSubscription.js

@@ -34,7 +34,9 @@ const FEATURE_REQUIREMENTS = {
     'concept_stats_panel': 'pro', // 概念统计中心
     'concept_related_stocks': 'pro', // 概念相关股票
     'concept_timeline': 'max',    // 概念历史时间轴
-    'hot_stocks': 'pro'          // 热门个股
+    'hot_stocks': 'pro',          // 热门个股
+    'deep_analysis': 'pro',       // 个股深度分析
+    'concept_sector': 'pro',      // 个股概念板块
 };
 
 /**

src/views/Company/components/CompanyTabs/index.js

@@ -1,8 +1,11 @@
 // src/views/Company/components/CompanyTabs/index.js
 // Tab 容器组件 - 使用通用 TabContainer 组件
 
-import React from 'react';
+import React, { useMemo } from 'react';
+import { Box, VStack, Text, Button, Icon } from '@chakra-ui/react';
+import { Lock, Crown } from 'lucide-react';
 import TabContainer from '@components/TabContainer';
+import { useSubscription } from '@hooks/useSubscription';
 import { COMPANY_TABS, getTabNameByIndex } from '../../constants';
 
 // 子组件导入（Tab 内容组件）
@@ -32,15 +35,159 @@ const TAB_COMPONENTS = {
   overview: BasicInfoTab,
 };
 
+/**
+ * 需要 Pro 权限的 Tab 配置
+ * key: Tab 的 key
+ * value: 对应的功能权限名称
+ */
+const PRO_REQUIRED_TABS = {
+  analysis: 'deep_analysis',
+  concept: 'concept_sector',
+};
+
+/**
+ * 权限锁定遮罩组件
+ */
+const ProLockedOverlay = ({ tabName, onUpgrade }) => (
+  <Box
+    position="relative"
+    minH="400px"
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+    bg="linear-gradient(180deg, rgba(26, 32, 44, 0.95) 0%, rgba(17, 21, 28, 0.98) 100%)"
+    borderRadius="lg"
+    overflow="hidden"
+  >
+    {/* 背景装饰 */}
+    <Box
+      position="absolute"
+      top="50%"
+      left="50%"
+      transform="translate(-50%, -50%)"
+      w="300px"
+      h="300px"
+      bg="radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%)"
+      pointerEvents="none"
+    />
+
+    <VStack spacing={6} textAlign="center" zIndex={1} p={8}>
+      {/* 锁定图标 */}
+      <Box
+        p={4}
+        borderRadius="full"
+        bg="rgba(212, 175, 55, 0.15)"
+        border="2px solid rgba(212, 175, 55, 0.3)"
+      >
+        <Icon as={Lock} boxSize={10} color="rgba(212, 175, 55, 0.8)" />
+      </Box>
+
+      {/* 标题 */}
+      <VStack spacing={2}>
+        <Text
+          fontSize="xl"
+          fontWeight="bold"
+          bgGradient="linear(to-r, #D4AF37, #F5D77A)"
+          bgClip="text"
+        >
+          {tabName} - Pro 专属功能
+        </Text>
+        <Text fontSize="sm" color="whiteAlpha.700" maxW="320px">
+          升级到 Pro 版本，解锁完整的{tabName}功能，获取更深入的投资洞察
+        </Text>
+      </VStack>
+
+      {/* 功能亮点 */}
+      <VStack spacing={1} fontSize="xs" color="whiteAlpha.600">
+        {tabName === '深度分析' && (
+          <>
+            <Text>✨ AI 智能分析报告</Text>
+            <Text>✨ 多维度估值模型</Text>
+            <Text>✨ 行业对比分析</Text>
+          </>
+        )}
+        {tabName === '概念板块' && (
+          <>
+            <Text>✨ 所属概念板块详情</Text>
+            <Text>✨ 概念热度分析</Text>
+            <Text>✨ 板块联动关系</Text>
+          </>
+        )}
+      </VStack>
+
+      {/* 升级按钮 */}
+      <Button
+        leftIcon={<Crown size={16} />}
+        bg="linear-gradient(135deg, #D4AF37 0%, #B8960C 100%)"
+        color="gray.900"
+        fontWeight="bold"
+        size="md"
+        px={8}
+        _hover={{
+          bg: 'linear-gradient(135deg, #E5C349 0%, #D4AF37 100%)',
+          transform: 'translateY(-2px)',
+          boxShadow: '0 4px 20px rgba(212, 175, 55, 0.4)',
+        }}
+        _active={{
+          transform: 'translateY(0)',
+        }}
+        transition="all 0.2s"
+        onClick={onUpgrade}
+      >
+        升级 Pro 版本
+      </Button>
+
+      <Text fontSize="xs" color="whiteAlpha.500">
+        享受更多高级功能和专业分析
+      </Text>
+    </VStack>
+  </Box>
+);
+
+/**
+ * 创建带权限检查的包装组件
+ */
+const createProtectedComponent = (OriginalComponent, featureName, tabName) => {
+  const ProtectedComponent = (props) => {
+    const { hasFeatureAccess, openSubscriptionModal } = useSubscription();
+
+    // 检查是否有权限访问
+    if (!hasFeatureAccess(featureName)) {
+      return (
+        <ProLockedOverlay
+          tabName={tabName}
+          onUpgrade={openSubscriptionModal}
+        />
+      );
+    }
+
+    // 有权限，渲染原始组件
+    return <OriginalComponent {...props} />;
+  };
+
+  ProtectedComponent.displayName = `Protected(${OriginalComponent.displayName || OriginalComponent.name || 'Component'})`;
+  return ProtectedComponent;
+};
+
 /**
  * 构建 TabContainer 所需的 tabs 配置
- * 合并 COMPANY_TABS 和对应的组件
+ * 合并 COMPANY_TABS 和对应的组件，并为需要权限的 Tab 添加保护
  */
 const buildTabsConfig = () => {
-  return COMPANY_TABS.map((tab) => ({
-    ...tab,
-    component: TAB_COMPONENTS[tab.key],
-  }));
+  return COMPANY_TABS.map((tab) => {
+    const originalComponent = TAB_COMPONENTS[tab.key];
+    const featureName = PRO_REQUIRED_TABS[tab.key];
+
+    // 如果是需要 Pro 权限的 Tab，包装组件
+    const component = featureName
+      ? createProtectedComponent(originalComponent, featureName, tab.name)
+      : originalComponent;
+
+    return {
+      ...tab,
+      component,
+    };
+  });
 };
 
 // 预构建 tabs 配置（避免每次渲染重新计算）
@@ -53,6 +200,7 @@ const TABS_CONFIG = buildTabsConfig();
  * - 使用通用 TabContainer 组件
  * - 保持黑金主题风格
  * - 触发 Tab 变更追踪
+ * - 对"深度分析"和"概念板块"添加 Pro 权限控制
  *
  * @param {Object} props
  * @param {string} props.stockCode - 当前股票代码