更新Company页面的UI为FUI风格

src/views/Company/index.tsx

@@ -1,14 +1,18 @@
 /**
- * 公司详情页面
+ * 公司详情页面 - FUI 科幻风格
  *
  * 特性：
- * - 黑金主题设计
- * - 懒加载 Tab 内容
- * - memo 性能优化
- * - axios 数据请求
+ * - Ash Thorp 风格 FUI 设计
+ * - James Turrell 光影效果
+ * - Glassmorphism 毛玻璃卡片
+ * - Linear.app 风格微交互
+ * - HeroUI 现代组件风格
  */
 
 import React, { memo, useCallback, useRef, useEffect, Suspense } from 'react';
+
+// FUI 动画样式
+import './theme/fui-animations.css';
 import { useSearchParams } from 'react-router-dom';
 import { Box, Spinner, Center } from '@chakra-ui/react';
 import SubTabContainer from '@components/SubTabContainer';
@@ -30,7 +34,7 @@ const TabLoadingFallback = memo(() => (
 TabLoadingFallback.displayName = 'TabLoadingFallback';
 
 // ============================================
-// 主内容区组件
+// 主内容区组件 - FUI 风格
 // ============================================
 
 interface CompanyContentProps {
@@ -41,12 +45,61 @@ interface CompanyContentProps {
 const CompanyContent = memo<CompanyContentProps>(({ stockCode, onTabChange }) => (
   <Box maxW="container.xl" mx="auto" px={4} py={6}>
     <Box
-      bg={THEME.cardBg}
+      position="relative"
+      bg={`linear-gradient(145deg, rgba(26, 26, 46, 0.95) 0%, rgba(15, 15, 26, 0.98) 100%)`}
       borderRadius="xl"
       border="1px solid"
-      borderColor={THEME.border}
+      borderColor="rgba(212, 175, 55, 0.15)"
       overflow="hidden"
+      backdropFilter="blur(16px)"
+      boxShadow="0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)"
     >
+      {/* 角落装饰 - FUI 风格 */}
+      <Box
+        position="absolute"
+        top="12px"
+        left="12px"
+        w="16px"
+        h="16px"
+        borderTop="2px solid"
+        borderLeft="2px solid"
+        borderColor="rgba(212, 175, 55, 0.4)"
+        opacity={0.6}
+      />
+      <Box
+        position="absolute"
+        top="12px"
+        right="12px"
+        w="16px"
+        h="16px"
+        borderTop="2px solid"
+        borderRight="2px solid"
+        borderColor="rgba(212, 175, 55, 0.4)"
+        opacity={0.6}
+      />
+      <Box
+        position="absolute"
+        bottom="12px"
+        left="12px"
+        w="16px"
+        h="16px"
+        borderBottom="2px solid"
+        borderLeft="2px solid"
+        borderColor="rgba(212, 175, 55, 0.4)"
+        opacity={0.6}
+      />
+      <Box
+        position="absolute"
+        bottom="12px"
+        right="12px"
+        w="16px"
+        h="16px"
+        borderBottom="2px solid"
+        borderRight="2px solid"
+        borderColor="rgba(212, 175, 55, 0.4)"
+        opacity={0.6}
+      />
+
       <Suspense fallback={<TabLoadingFallback />}>
         <SubTabContainer
           tabs={TAB_CONFIG}
@@ -128,23 +181,48 @@ const CompanyIndex: React.FC = () => {
   }, [trackTabChanged]);
 
   return (
-    <Box bg={THEME.bg} minH="calc(100vh - 60px)">
-      {/* 顶部搜索栏 */}
-      <CompanyHeader
-        stockCode={stockCode}
-        stockInfo={stockInfo}
-        stockInfoLoading={stockInfoLoading}
-        isInWatchlist={isInWatchlist}
-        watchlistLoading={watchlistLoading}
-        onStockChange={handleStockChange}
-        onWatchlistToggle={handleWatchlistToggle}
+    <Box
+      position="relative"
+      bg={THEME.bg}
+      minH="calc(100vh - 60px)"
+      overflow="hidden"
+    >
+      {/* 全局环境光效果 - James Turrell 风格 */}
+      <Box
+        position="fixed"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        pointerEvents="none"
+        zIndex={0}
+        bg={`
+          radial-gradient(ellipse 100% 80% at 50% -20%, rgba(212, 175, 55, 0.08), transparent 50%),
+          radial-gradient(ellipse 60% 50% at 0% 50%, rgba(100, 200, 255, 0.04), transparent 40%),
+          radial-gradient(ellipse 60% 50% at 100% 50%, rgba(255, 200, 100, 0.04), transparent 40%)
+        `}
       />
 
+      {/* 顶部搜索栏 */}
+      <Box position="relative" zIndex={1}>
+        <CompanyHeader
+          stockCode={stockCode}
+          stockInfo={stockInfo}
+          stockInfoLoading={stockInfoLoading}
+          isInWatchlist={isInWatchlist}
+          watchlistLoading={watchlistLoading}
+          onStockChange={handleStockChange}
+          onWatchlistToggle={handleWatchlistToggle}
+        />
+      </Box>
+
       {/* 主内容区 */}
-      <CompanyContent
-        stockCode={stockCode}
-        onTabChange={handleTabChange}
-      />
+      <Box position="relative" zIndex={1}>
+        <CompanyContent
+          stockCode={stockCode}
+          onTabChange={handleTabChange}
+        />
+      </Box>
     </Box>
   );
 };