更新Company页面的UI为FUI风格

src/components/SubTabContainer/index.tsx

@@ -1,8 +1,10 @@
 /**
  * SubTabContainer - 二级导航容器组件
  *
- * 用于模块内的子功能切换（如公司档案下的股权结构、管理团队等）
- * 与 TabContainer（一级导航）区分：无 Card 包裹，直接融入父容器
+ * 深空 FUI 设计风格（Glassmorphism + Ash Thorp + James Turrell）
+ * - 玻璃态导航栏，漂浮感
+ * - 选中态发光效果，科幻数据终端感
+ * - 流畅的过渡动画
  *
  * @example
  * ```tsx
@@ -43,6 +45,40 @@ export interface SubTabConfig {
   component?: ComponentType<any>;
 }
 
+/**
+ * 深空 FUI 主题配置
+ */
+const DEEP_SPACE = {
+  // 背景
+  bgGlass: 'rgba(12, 14, 28, 0.6)',
+  bgGlassHover: 'rgba(18, 22, 42, 0.7)',
+
+  // 边框
+  borderGold: 'rgba(212, 175, 55, 0.2)',
+  borderGoldHover: 'rgba(212, 175, 55, 0.5)',
+  borderGlass: 'rgba(255, 255, 255, 0.06)',
+
+  // 发光
+  glowGold: '0 0 30px rgba(212, 175, 55, 0.25), 0 4px 20px rgba(0, 0, 0, 0.3)',
+  innerGlow: 'inset 0 1px 0 rgba(255, 255, 255, 0.08)',
+
+  // 文字
+  textWhite: 'rgba(255, 255, 255, 0.95)',
+  textMuted: 'rgba(255, 255, 255, 0.6)',
+  textGold: '#F4D03F',
+  textDark: '#0A0A14',
+
+  // 选中态
+  selectedBg: 'linear-gradient(135deg, rgba(212, 175, 55, 0.95) 0%, rgba(184, 150, 12, 0.95) 100%)',
+
+  // 圆角
+  radius: '12px',
+  radiusLG: '16px',
+
+  // 动画
+  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+};
+
 /**
  * 主题配置
  */
@@ -56,16 +92,16 @@ export interface SubTabTheme {
 }
 
 /**
- * 预设主题 - FUI 风格优化
+ * 预设主题 - 深空 FUI 风格
  */
 const THEME_PRESETS: Record<string, SubTabTheme> = {
   blackGold: {
-    bg: 'transparent',
-    borderColor: 'rgba(212, 175, 55, 0.15)',
-    tabSelectedBg: 'linear-gradient(135deg, rgba(212, 175, 55, 0.95) 0%, rgba(184, 150, 12, 0.95) 100%)',
-    tabSelectedColor: '#0A0A14',
-    tabUnselectedColor: 'rgba(255, 255, 255, 0.85)', // 调亮：白色更清晰
-    tabHoverBg: 'rgba(212, 175, 55, 0.15)',
+    bg: DEEP_SPACE.bgGlass,
+    borderColor: DEEP_SPACE.borderGold,
+    tabSelectedBg: DEEP_SPACE.selectedBg,
+    tabSelectedColor: DEEP_SPACE.textDark,
+    tabUnselectedColor: DEEP_SPACE.textWhite,
+    tabHoverBg: DEEP_SPACE.bgGlassHover,
   },
   default: {
     bg: 'white',
@@ -158,74 +194,102 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
         index={currentIndex}
         onChange={handleTabChange}
       >
+        {/* TabList - 玻璃态导航栏 */}
         <TabList
           bg={theme.bg}
+          backdropFilter="blur(20px)"
+          WebkitBackdropFilter="blur(20px)"
           borderBottom="1px solid"
           borderColor={theme.borderColor}
-          pl={2}
-          pr={4}
+          borderRadius={DEEP_SPACE.radiusLG}
+          mx={2}
+          mb={2}
+          px={3}
           py={3}
           flexWrap="nowrap"
           gap={2}
           alignItems="center"
           overflowX="auto"
+          position="relative"
+          boxShadow={DEEP_SPACE.innerGlow}
           css={{
             '&::-webkit-scrollbar': { display: 'none' },
             scrollbarWidth: 'none',
           }}
         >
-          {tabs.map((tab) => (
-            <Tab
-              key={tab.key}
-              color={theme.tabUnselectedColor}
-              borderRadius="md"
-              px={5}
-              py={2.5}
-              fontSize="sm"
-              fontWeight="500"
-              whiteSpace="nowrap"
-              flexShrink={0}
-              border="1px solid transparent"
-              position="relative"
-              letterSpacing="0.05em"
-              transition="all 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
-              _before={{
-                content: '""',
-                position: 'absolute',
-                bottom: '-1px',
-                left: '50%',
-                transform: 'translateX(-50%)',
-                width: '0%',
-                height: '2px',
-                bg: '#D4AF37',
-                transition: 'width 0.25s ease',
-              }}
-              _selected={{
-                bg: theme.tabSelectedBg,
-                color: theme.tabSelectedColor,
-                fontWeight: '700',
-                boxShadow: '0 4px 16px rgba(212, 175, 55, 0.35), 0 0 20px rgba(212, 175, 55, 0.15)',
-                border: '1px solid rgba(212, 175, 55, 0.6)',
-                transform: 'translateY(-1px)',
-                _before: {
-                  width: '80%',
-                },
-              }}
-              _hover={{
-                bg: theme.tabHoverBg,
-                border: '1px solid rgba(212, 175, 55, 0.35)',
-                transform: 'translateY(-1px)',
-                _before: {
-                  width: '60%',
-                },
-              }}
-            >
-              <HStack spacing={2}>
-                {tab.icon && <Icon as={tab.icon} boxSize={4} />}
-                <Text>{tab.name}</Text>
-              </HStack>
-            </Tab>
-          ))}
+          {/* 顶部金色光条 */}
+          <Box
+            position="absolute"
+            top={0}
+            left="50%"
+            transform="translateX(-50%)"
+            width="50%"
+            height="1px"
+            background={`linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent)`}
+          />
+
+          {tabs.map((tab, idx) => {
+            const isSelected = idx === currentIndex;
+
+            return (
+              <Tab
+                key={tab.key}
+                color={theme.tabUnselectedColor}
+                borderRadius={DEEP_SPACE.radius}
+                px={6}
+                py={3}
+                fontSize="15px"
+                fontWeight="500"
+                whiteSpace="nowrap"
+                flexShrink={0}
+                border="1px solid transparent"
+                position="relative"
+                letterSpacing="0.03em"
+                transition={DEEP_SPACE.transition}
+                _before={{
+                  content: '""',
+                  position: 'absolute',
+                  bottom: '-1px',
+                  left: '50%',
+                  transform: 'translateX(-50%)',
+                  width: isSelected ? '70%' : '0%',
+                  height: '2px',
+                  bg: '#D4AF37',
+                  borderRadius: 'full',
+                  transition: 'width 0.3s ease',
+                  boxShadow: isSelected ? '0 0 10px rgba(212, 175, 55, 0.5)' : 'none',
+                }}
+                _selected={{
+                  bg: theme.tabSelectedBg,
+                  color: theme.tabSelectedColor,
+                  fontWeight: '700',
+                  boxShadow: DEEP_SPACE.glowGold,
+                  border: `1px solid ${DEEP_SPACE.borderGoldHover}`,
+                  transform: 'translateY(-2px)',
+                }}
+                _hover={{
+                  bg: isSelected ? undefined : theme.tabHoverBg,
+                  border: isSelected ? undefined : `1px solid ${DEEP_SPACE.borderGold}`,
+                  transform: 'translateY(-1px)',
+                }}
+                _active={{
+                  transform: 'translateY(0)',
+                }}
+              >
+                <HStack spacing={2}>
+                  {tab.icon && (
+                    <Icon
+                      as={tab.icon}
+                      boxSize={4}
+                      opacity={isSelected ? 1 : 0.7}
+                      transition="opacity 0.2s"
+                    />
+                  )}
+                  <Text>{tab.name}</Text>
+                </HStack>
+              </Tab>
+            );
+          })}
           {rightElement && (
             <>
               <Spacer />