更新Company页面的UI为FUI风格

src/views/Company/theme/components/FUIElements.tsx

@@ -0,0 +1,381 @@
+/**
+ * FUI Elements - 科幻风格 UI 元素集合
+ *
+ * 包含：
+ * - GlowText: 发光文字
+ * - DataBadge: 数据标签
+ * - StatusIndicator: 状态指示器
+ * - Divider: 分隔线
+ * - ProgressBar: 进度条
+ */
+
+import React, { memo } from 'react';
+import { Box, Text, HStack, BoxProps, TextProps } from '@chakra-ui/react';
+import { FUI_COLORS, FUI_GLOW, FUI_ANIMATION } from '../fui';
+
+// ============================================
+// GlowText - 发光文字
+// ============================================
+
+export interface GlowTextProps extends Omit<TextProps, 'css'> {
+  children: React.ReactNode;
+  /** 发光颜色 */
+  glowColor?: 'gold' | 'white' | 'positive' | 'negative';
+  /** 发光强度 */
+  intensity?: 'low' | 'medium' | 'high';
+}
+
+const GLOW_COLORS = {
+  gold: FUI_COLORS.gold[400],
+  white: '#FFFFFF',
+  positive: FUI_COLORS.status.positive,
+  negative: FUI_COLORS.status.negative,
+};
+
+const INTENSITY_MAP = {
+  low: 0.3,
+  medium: 0.5,
+  high: 0.8,
+};
+
+export const GlowText: React.FC<GlowTextProps> = memo(({
+  children,
+  glowColor = 'gold',
+  intensity = 'medium',
+  ...props
+}) => {
+  const color = GLOW_COLORS[glowColor];
+  const alpha = INTENSITY_MAP[intensity];
+
+  return (
+    <Text
+      color={color}
+      textShadow={`0 0 ${10 * alpha}px rgba(${glowColor === 'gold' ? '212, 175, 55' : '255, 255, 255'}, ${alpha})`}
+      transition={`all ${FUI_ANIMATION.duration.normal} ${FUI_ANIMATION.easing.smooth}`}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+});
+
+GlowText.displayName = 'GlowText';
+
+// ============================================
+// DataBadge - 数据标签
+// ============================================
+
+export interface DataBadgeProps extends Omit<BoxProps, 'css'> {
+  children: React.ReactNode;
+  /** 标签类型 */
+  variant?: 'default' | 'success' | 'danger' | 'warning' | 'info';
+  /** 尺寸 */
+  size?: 'sm' | 'md' | 'lg';
+  /** 是否脉冲动画 */
+  pulse?: boolean;
+}
+
+const BADGE_VARIANTS = {
+  default: {
+    bg: 'rgba(212, 175, 55, 0.15)',
+    borderColor: 'rgba(212, 175, 55, 0.3)',
+    color: FUI_COLORS.gold[400],
+  },
+  success: {
+    bg: 'rgba(34, 197, 94, 0.15)',
+    borderColor: 'rgba(34, 197, 94, 0.3)',
+    color: FUI_COLORS.status.negative,
+  },
+  danger: {
+    bg: 'rgba(239, 68, 68, 0.15)',
+    borderColor: 'rgba(239, 68, 68, 0.3)',
+    color: FUI_COLORS.status.positive,
+  },
+  warning: {
+    bg: 'rgba(245, 158, 11, 0.15)',
+    borderColor: 'rgba(245, 158, 11, 0.3)',
+    color: FUI_COLORS.status.warning,
+  },
+  info: {
+    bg: 'rgba(59, 130, 246, 0.15)',
+    borderColor: 'rgba(59, 130, 246, 0.3)',
+    color: FUI_COLORS.status.info,
+  },
+};
+
+const BADGE_SIZES = {
+  sm: { px: 2, py: 0.5, fontSize: '10px' },
+  md: { px: 3, py: 1, fontSize: '12px' },
+  lg: { px: 4, py: 1.5, fontSize: '14px' },
+};
+
+export const DataBadge: React.FC<DataBadgeProps> = memo(({
+  children,
+  variant = 'default',
+  size = 'md',
+  pulse = false,
+  ...props
+}) => {
+  const variantStyle = BADGE_VARIANTS[variant];
+  const sizeStyle = BADGE_SIZES[size];
+
+  return (
+    <Box
+      display="inline-flex"
+      alignItems="center"
+      bg={variantStyle.bg}
+      border="1px solid"
+      borderColor={variantStyle.borderColor}
+      borderRadius="full"
+      color={variantStyle.color}
+      fontWeight="medium"
+      letterSpacing="0.5px"
+      transition={`all ${FUI_ANIMATION.duration.fast} ${FUI_ANIMATION.easing.default}`}
+      sx={pulse ? { animation: 'glowPulse 2s ease-in-out infinite' } : undefined}
+      {...sizeStyle}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+});
+
+DataBadge.displayName = 'DataBadge';
+
+// ============================================
+// StatusIndicator - 状态指示器（带脉冲点）
+// ============================================
+
+export interface StatusIndicatorProps extends Omit<BoxProps, 'css'> {
+  /** 状态 */
+  status: 'active' | 'inactive' | 'warning' | 'error';
+  /** 标签文字 */
+  label?: string;
+  /** 是否显示脉冲动画 */
+  pulse?: boolean;
+}
+
+const STATUS_COLORS = {
+  active: FUI_COLORS.gold[400],
+  inactive: FUI_COLORS.text.muted,
+  warning: FUI_COLORS.status.warning,
+  error: FUI_COLORS.status.positive,
+};
+
+export const StatusIndicator: React.FC<StatusIndicatorProps> = memo(({
+  status,
+  label,
+  pulse = true,
+  ...props
+}) => {
+  const color = STATUS_COLORS[status];
+
+  return (
+    <HStack spacing={2} {...props}>
+      <Box position="relative">
+        {/* 脉冲光环 */}
+        {pulse && status === 'active' && (
+          <Box
+            position="absolute"
+            top="50%"
+            left="50%"
+            transform="translate(-50%, -50%)"
+            w="12px"
+            h="12px"
+            borderRadius="full"
+            bg={color}
+            opacity={0.3}
+            sx={{
+              animation: 'pulse 2s ease-in-out infinite',
+              '@keyframes pulse': {
+                '0%, 100%': { transform: 'translate(-50%, -50%) scale(1)', opacity: 0.3 },
+                '50%': { transform: 'translate(-50%, -50%) scale(1.5)', opacity: 0 },
+              },
+            }}
+          />
+        )}
+        {/* 核心点 */}
+        <Box
+          w="8px"
+          h="8px"
+          borderRadius="full"
+          bg={color}
+          boxShadow={`0 0 8px ${color}`}
+        />
+      </Box>
+      {label && (
+        <Text fontSize="sm" color={FUI_COLORS.text.secondary}>
+          {label}
+        </Text>
+      )}
+    </HStack>
+  );
+});
+
+StatusIndicator.displayName = 'StatusIndicator';
+
+// ============================================
+// FUIDivider - FUI 风格分隔线
+// ============================================
+
+export interface FUIDividerProps extends Omit<BoxProps, 'css'> {
+  /** 方向 */
+  orientation?: 'horizontal' | 'vertical';
+  /** 是否发光 */
+  glowing?: boolean;
+  /** 中间文字 */
+  label?: string;
+}
+
+export const FUIDivider: React.FC<FUIDividerProps> = memo(({
+  orientation = 'horizontal',
+  glowing = false,
+  label,
+  ...props
+}) => {
+  if (orientation === 'vertical') {
+    return (
+      <Box
+        w="1px"
+        h="100%"
+        bg={FUI_COLORS.line.default}
+        boxShadow={glowing ? FUI_GLOW.gold.sm : undefined}
+        {...props}
+      />
+    );
+  }
+
+  if (label) {
+    return (
+      <HStack spacing={3} w="100%" {...props}>
+        <Box
+          flex={1}
+          h="1px"
+          bg={`linear-gradient(90deg, transparent, ${FUI_COLORS.line.emphasis})`}
+        />
+        <Text
+          fontSize="xs"
+          color={FUI_COLORS.gold[400]}
+          textTransform="uppercase"
+          letterSpacing="wider"
+          fontWeight="medium"
+        >
+          {label}
+        </Text>
+        <Box
+          flex={1}
+          h="1px"
+          bg={`linear-gradient(90deg, ${FUI_COLORS.line.emphasis}, transparent)`}
+        />
+      </HStack>
+    );
+  }
+
+  return (
+    <Box
+      w="100%"
+      h="1px"
+      bg={`linear-gradient(90deg, transparent 0%, ${FUI_COLORS.line.emphasis} 50%, transparent 100%)`}
+      boxShadow={glowing ? FUI_GLOW.gold.sm : undefined}
+      {...props}
+    />
+  );
+});
+
+FUIDivider.displayName = 'FUIDivider';
+
+// ============================================
+// FUIProgressBar - FUI 风格进度条
+// ============================================
+
+export interface FUIProgressBarProps extends Omit<BoxProps, 'css'> {
+  /** 进度值 (0-100) */
+  value: number;
+  /** 颜色主题 */
+  colorScheme?: 'gold' | 'positive' | 'negative' | 'gradient';
+  /** 是否显示发光效果 */
+  glowing?: boolean;
+  /** 高度 */
+  size?: 'sm' | 'md' | 'lg';
+  /** 是否显示数值 */
+  showValue?: boolean;
+}
+
+const PROGRESS_COLORS = {
+  gold: FUI_COLORS.gold[400],
+  positive: FUI_COLORS.status.positive,
+  negative: FUI_COLORS.status.negative,
+  gradient: `linear-gradient(90deg, ${FUI_COLORS.gold[500]}, ${FUI_COLORS.gold[300]})`,
+};
+
+const PROGRESS_SIZES = {
+  sm: '4px',
+  md: '6px',
+  lg: '8px',
+};
+
+export const FUIProgressBar: React.FC<FUIProgressBarProps> = memo(({
+  value,
+  colorScheme = 'gold',
+  glowing = false,
+  size = 'md',
+  showValue = false,
+  ...props
+}) => {
+  const clampedValue = Math.min(100, Math.max(0, value));
+  const color = PROGRESS_COLORS[colorScheme];
+  const isGradient = colorScheme === 'gradient';
+
+  return (
+    <HStack spacing={2} w="100%" {...props}>
+      <Box flex={1}>
+        <Box
+          position="relative"
+          w="100%"
+          h={PROGRESS_SIZES[size]}
+          bg={FUI_COLORS.bg.primary}
+          borderRadius="full"
+          overflow="hidden"
+        >
+          <Box
+            position="absolute"
+            top={0}
+            left={0}
+            h="100%"
+            w={`${clampedValue}%`}
+            bg={isGradient ? color : color}
+            background={isGradient ? color : undefined}
+            borderRadius="full"
+            transition={`width ${FUI_ANIMATION.duration.normal} ${FUI_ANIMATION.easing.smooth}`}
+            boxShadow={glowing ? `0 0 10px ${isGradient ? FUI_COLORS.gold[400] : color}` : undefined}
+          />
+        </Box>
+      </Box>
+      {showValue && (
+        <Text
+          fontSize="xs"
+          fontWeight="bold"
+          color={FUI_COLORS.gold[400]}
+          minW="40px"
+          textAlign="right"
+        >
+          {clampedValue.toFixed(0)}%
+        </Text>
+      )}
+    </HStack>
+  );
+});
+
+FUIProgressBar.displayName = 'FUIProgressBar';
+
+// ============================================
+// 统一导出
+// ============================================
+
+export default {
+  GlowText,
+  DataBadge,
+  StatusIndicator,
+  FUIDivider,
+  FUIProgressBar,
+};

src/views/Company/theme/components/GlassCard.tsx

@@ -0,0 +1,207 @@
+/**
+ * GlassCard - Glassmorphism 风格卡片组件
+ *
+ * 设计特点：
+ * - 毛玻璃背景效果
+ * - 精细边框发光
+ * - 悬停动画
+ * - 可选角落装饰（FUI 风格）
+ */
+
+import React, { memo, forwardRef } from 'react';
+import { Box, BoxProps } from '@chakra-ui/react';
+import { FUI_COLORS, FUI_GLASS, FUI_GLOW, FUI_ANIMATION } from '../fui';
+
+// ============================================
+// 类型定义
+// ============================================
+
+export interface GlassCardProps extends Omit<BoxProps, 'css'> {
+  children: React.ReactNode;
+  /** 变体样式 */
+  variant?: 'default' | 'elevated' | 'outlined' | 'subtle';
+  /** 是否启用悬停效果 */
+  hoverable?: boolean;
+  /** 是否启用发光效果 */
+  glowing?: boolean;
+  /** 是否显示角落装饰 */
+  cornerDecor?: boolean;
+  /** 是否显示扫描线效果 */
+  scanline?: boolean;
+  /** 边框圆角 */
+  rounded?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** 内边距预设 */
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+// ============================================
+// 样式配置
+// ============================================
+
+const VARIANTS = {
+  default: {
+    bg: `linear-gradient(135deg, ${FUI_COLORS.bg.elevated} 0%, ${FUI_COLORS.bg.primary} 100%)`,
+    border: FUI_GLASS.border.default,
+    backdropFilter: FUI_GLASS.blur.md,
+  },
+  elevated: {
+    bg: `linear-gradient(145deg, ${FUI_COLORS.bg.surface} 0%, ${FUI_COLORS.bg.elevated} 100%)`,
+    border: FUI_GLASS.border.emphasis,
+    backdropFilter: FUI_GLASS.blur.lg,
+  },
+  outlined: {
+    bg: 'transparent',
+    border: FUI_GLASS.border.emphasis,
+    backdropFilter: 'none',
+  },
+  subtle: {
+    bg: FUI_GLASS.bg.gold,
+    border: FUI_GLASS.border.subtle,
+    backdropFilter: FUI_GLASS.blur.sm,
+  },
+};
+
+const ROUNDED_MAP = {
+  sm: '8px',
+  md: '12px',
+  lg: '16px',
+  xl: '20px',
+  '2xl': '24px',
+};
+
+const PADDING_MAP = {
+  none: 0,
+  sm: 3,
+  md: 4,
+  lg: 6,
+};
+
+// ============================================
+// 角落装饰组件
+// ============================================
+
+const CornerDecor: React.FC<{ position: 'tl' | 'tr' | 'bl' | 'br' }> = memo(({ position }) => {
+  const baseStyle = {
+    position: 'absolute' as const,
+    width: '12px',
+    height: '12px',
+    borderColor: FUI_COLORS.gold[400],
+    borderStyle: 'solid',
+    borderWidth: 0,
+    opacity: 0.6,
+  };
+
+  const positions = {
+    tl: { top: '8px', left: '8px', borderTopWidth: '2px', borderLeftWidth: '2px' },
+    tr: { top: '8px', right: '8px', borderTopWidth: '2px', borderRightWidth: '2px' },
+    bl: { bottom: '8px', left: '8px', borderBottomWidth: '2px', borderLeftWidth: '2px' },
+    br: { bottom: '8px', right: '8px', borderBottomWidth: '2px', borderRightWidth: '2px' },
+  };
+
+  return <Box sx={{ ...baseStyle, ...positions[position] }} />;
+});
+
+CornerDecor.displayName = 'CornerDecor';
+
+// ============================================
+// 扫描线覆盖层
+// ============================================
+
+const ScanlineOverlay: React.FC = memo(() => (
+  <Box
+    position="absolute"
+    top={0}
+    left={0}
+    right={0}
+    bottom={0}
+    pointerEvents="none"
+    opacity={0.3}
+    sx={{
+      background: `repeating-linear-gradient(
+        0deg,
+        transparent,
+        transparent 2px,
+        rgba(212, 175, 55, 0.02) 2px,
+        rgba(212, 175, 55, 0.02) 4px
+      )`,
+    }}
+  />
+));
+
+ScanlineOverlay.displayName = 'ScanlineOverlay';
+
+// ============================================
+// 主组件
+// ============================================
+
+const GlassCard = forwardRef<HTMLDivElement, GlassCardProps>(
+  (
+    {
+      children,
+      variant = 'default',
+      hoverable = true,
+      glowing = false,
+      cornerDecor = false,
+      scanline = false,
+      rounded = 'lg',
+      padding = 'md',
+      ...props
+    },
+    ref
+  ) => {
+    const variantStyle = VARIANTS[variant];
+
+    return (
+      <Box
+        ref={ref}
+        position="relative"
+        bg={variantStyle.bg}
+        border={variantStyle.border}
+        borderRadius={ROUNDED_MAP[rounded]}
+        backdropFilter={variantStyle.backdropFilter}
+        p={PADDING_MAP[padding]}
+        transition={`all ${FUI_ANIMATION.duration.normal} ${FUI_ANIMATION.easing.smooth}`}
+        overflow="hidden"
+        _hover={
+          hoverable
+            ? {
+                borderColor: FUI_COLORS.line.emphasis,
+                boxShadow: glowing ? FUI_GLOW.gold.md : FUI_GLOW.gold.sm,
+                transform: 'translateY(-2px)',
+              }
+            : undefined
+        }
+        sx={{
+          // 发光效果
+          ...(glowing && {
+            boxShadow: FUI_GLOW.gold.sm,
+            animation: 'glowPulse 3s ease-in-out infinite',
+          }),
+        }}
+        {...props}
+      >
+        {/* 扫描线效果 */}
+        {scanline && <ScanlineOverlay />}
+
+        {/* 角落装饰 */}
+        {cornerDecor && (
+          <>
+            <CornerDecor position="tl" />
+            <CornerDecor position="tr" />
+            <CornerDecor position="bl" />
+            <CornerDecor position="br" />
+          </>
+        )}
+
+        {/* 内容 */}
+        <Box position="relative" zIndex={1}>
+          {children}
+        </Box>
+      </Box>
+    );
+  }
+);
+
+GlassCard.displayName = 'GlassCard';
+
+export default memo(GlassCard);

src/views/Company/theme/components/index.ts

@@ -0,0 +1,21 @@
+/**
+ * FUI 主题组件统一导出
+ */
+
+export { default as GlassCard } from './GlassCard';
+export type { GlassCardProps } from './GlassCard';
+
+export {
+  GlowText,
+  DataBadge,
+  StatusIndicator,
+  FUIDivider,
+  FUIProgressBar,
+} from './FUIElements';
+export type {
+  GlowTextProps,
+  DataBadgeProps,
+  StatusIndicatorProps,
+  FUIDividerProps,
+  FUIProgressBarProps,
+} from './FUIElements';

src/views/Company/theme/fui-animations.css

@@ -0,0 +1,141 @@
+/**
+ * FUI 主题动画样式
+ *
+ * 在 Company 模块的入口文件中引入此文件：
+ * import './theme/fui-animations.css';
+ */
+
+/* 发光脉冲动画 */
+@keyframes glowPulse {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 30px rgba(212, 175, 55, 0.5), 0 0 60px rgba(212, 175, 55, 0.2);
+  }
+}
+
+/* 淡入动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* 向上滑入动画 */
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 扫描线动画 */
+@keyframes scanline {
+  0% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
+/* 闪烁动画 */
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* 边框发光动画 */
+@keyframes borderGlow {
+  0%, 100% {
+    border-color: rgba(212, 175, 55, 0.2);
+  }
+  50% {
+    border-color: rgba(212, 175, 55, 0.5);
+  }
+}
+
+/* 脉冲动画 */
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+
+/* 数据流动动画 */
+@keyframes dataFlow {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* 旋转发光动画 */
+@keyframes rotateGlow {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* 文字发光动画 */
+@keyframes textGlow {
+  0%, 100% {
+    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
+  }
+  50% {
+    text-shadow: 0 0 20px rgba(212, 175, 55, 0.6), 0 0 30px rgba(212, 175, 55, 0.4);
+  }
+}
+
+/* 浮动动画 */
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+/* 呼吸动画 */
+@keyframes breathe {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}

src/views/Company/theme/fui.ts

@@ -0,0 +1,336 @@
+/**
+ * FUI (Fantasy User Interface) 科幻主题配置
+ *
+ * 设计灵感：
+ * - Ash Thorp: 精细线条、数据可视化、霓虹发光
+ * - Linear.app: 极简、精致微交互、清晰层次
+ * - James Turrell: 柔和光影渐变、沉浸式氛围
+ * - HeroUI: 现代组件风格
+ */
+
+// ============================================
+// 核心色彩系统
+// ============================================
+
+export const FUI_COLORS = {
+  // 主色调 - 金色系（保持黑金风格）
+  gold: {
+    50: '#FDF8E8',
+    100: '#F8EDCB',
+    200: '#F0D78C',
+    300: '#E8C14D',
+    400: '#D4AF37', // 主金色
+    500: '#B8960C',
+    600: '#8B7209',
+    700: '#5E4D06',
+    800: '#312803',
+    900: '#1A1500',
+  },
+
+  // 环境光色 - James Turrell 光影
+  ambient: {
+    cyan: 'rgba(0, 255, 255, 0.15)',
+    magenta: 'rgba(255, 0, 255, 0.1)',
+    warm: 'rgba(255, 200, 100, 0.08)',
+    cool: 'rgba(100, 200, 255, 0.08)',
+  },
+
+  // 背景层次
+  bg: {
+    deep: '#0A0A14',      // 最深层
+    primary: '#0F0F1A',   // 主背景
+    elevated: '#1A1A2E',  // 抬升层
+    surface: '#252540',   // 表面层
+    overlay: 'rgba(26, 26, 46, 0.95)', // 覆盖层
+  },
+
+  // 边框 & 线条
+  line: {
+    subtle: 'rgba(212, 175, 55, 0.1)',
+    default: 'rgba(212, 175, 55, 0.2)',
+    emphasis: 'rgba(212, 175, 55, 0.4)',
+    glow: 'rgba(212, 175, 55, 0.6)',
+  },
+
+  // 文字
+  text: {
+    primary: 'rgba(255, 255, 255, 0.95)',
+    secondary: 'rgba(255, 255, 255, 0.7)',
+    muted: 'rgba(255, 255, 255, 0.5)',
+    dim: 'rgba(255, 255, 255, 0.3)',
+  },
+
+  // 状态色
+  status: {
+    positive: '#EF4444',  // 涨 - 红
+    negative: '#22C55E',  // 跌 - 绿
+    warning: '#F59E0B',
+    info: '#3B82F6',
+  },
+} as const;
+
+// ============================================
+// 发光效果（Glow Effects）
+// ============================================
+
+export const FUI_GLOW = {
+  // 金色发光
+  gold: {
+    sm: '0 0 8px rgba(212, 175, 55, 0.3)',
+    md: '0 0 16px rgba(212, 175, 55, 0.4)',
+    lg: '0 0 32px rgba(212, 175, 55, 0.5)',
+    pulse: '0 0 20px rgba(212, 175, 55, 0.6), 0 0 40px rgba(212, 175, 55, 0.3)',
+  },
+
+  // 环境光发光 (Turrell style)
+  ambient: {
+    warm: '0 0 60px rgba(255, 200, 100, 0.15)',
+    cool: '0 0 60px rgba(100, 200, 255, 0.1)',
+    mixed: '0 0 80px rgba(212, 175, 55, 0.1), 0 0 120px rgba(100, 200, 255, 0.05)',
+  },
+
+  // 文字发光
+  text: {
+    gold: '0 0 10px rgba(212, 175, 55, 0.5)',
+    white: '0 0 10px rgba(255, 255, 255, 0.3)',
+  },
+} as const;
+
+// ============================================
+// Glassmorphism 配置
+// ============================================
+
+export const FUI_GLASS = {
+  // 背景模糊
+  blur: {
+    sm: 'blur(8px)',
+    md: 'blur(16px)',
+    lg: 'blur(24px)',
+    xl: 'blur(40px)',
+  },
+
+  // 玻璃背景
+  bg: {
+    light: 'rgba(255, 255, 255, 0.03)',
+    medium: 'rgba(255, 255, 255, 0.05)',
+    dark: 'rgba(0, 0, 0, 0.2)',
+    gold: 'rgba(212, 175, 55, 0.05)',
+  },
+
+  // 边框
+  border: {
+    subtle: '1px solid rgba(255, 255, 255, 0.05)',
+    default: '1px solid rgba(212, 175, 55, 0.15)',
+    emphasis: '1px solid rgba(212, 175, 55, 0.3)',
+  },
+} as const;
+
+// ============================================
+// 动画配置
+// ============================================
+
+export const FUI_ANIMATION = {
+  // 过渡时间
+  duration: {
+    instant: '0.1s',
+    fast: '0.2s',
+    normal: '0.3s',
+    slow: '0.5s',
+    slower: '0.8s',
+  },
+
+  // 缓动函数
+  easing: {
+    default: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    smooth: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+    bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+    expo: 'cubic-bezier(0.16, 1, 0.3, 1)',
+  },
+
+  // 预设动画
+  presets: {
+    fadeIn: 'fadeIn 0.3s ease-out',
+    slideUp: 'slideUp 0.3s ease-out',
+    glow: 'glowPulse 2s ease-in-out infinite',
+    scanline: 'scanline 3s linear infinite',
+    shimmer: 'shimmer 2s linear infinite',
+  },
+} as const;
+
+// ============================================
+// CSS Keyframes（需要在全局样式中注入）
+// ============================================
+
+export const FUI_KEYFRAMES = `
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes glowPulse {
+    0%, 100% {
+      box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
+    }
+    50% {
+      box-shadow: 0 0 30px rgba(212, 175, 55, 0.5), 0 0 60px rgba(212, 175, 55, 0.2);
+    }
+  }
+
+  @keyframes scanline {
+    0% {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+    10% { opacity: 1; }
+    90% { opacity: 1; }
+    100% {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
+
+  @keyframes borderGlow {
+    0%, 100% {
+      border-color: rgba(212, 175, 55, 0.2);
+    }
+    50% {
+      border-color: rgba(212, 175, 55, 0.5);
+    }
+  }
+`;
+
+// ============================================
+// 组件样式预设
+// ============================================
+
+export const FUI_STYLES = {
+  // Glassmorphism 卡片
+  glassCard: {
+    base: {
+      background: `linear-gradient(135deg, ${FUI_COLORS.bg.elevated} 0%, ${FUI_COLORS.bg.primary} 100%)`,
+      backdropFilter: FUI_GLASS.blur.md,
+      border: FUI_GLASS.border.default,
+      borderRadius: '16px',
+      transition: `all ${FUI_ANIMATION.duration.normal} ${FUI_ANIMATION.easing.smooth}`,
+    },
+    hover: {
+      borderColor: FUI_COLORS.line.emphasis,
+      boxShadow: FUI_GLOW.gold.md,
+      transform: 'translateY(-2px)',
+    },
+  },
+
+  // FUI 面板（带角落装饰）
+  fuiPanel: {
+    base: {
+      position: 'relative' as const,
+      background: FUI_COLORS.bg.elevated,
+      border: FUI_GLASS.border.default,
+      borderRadius: '12px',
+      overflow: 'hidden',
+    },
+    cornerDecor: {
+      position: 'absolute' as const,
+      width: '20px',
+      height: '20px',
+      borderColor: FUI_COLORS.gold[400],
+      borderStyle: 'solid',
+    },
+  },
+
+  // 扫描线效果
+  scanlineOverlay: {
+    position: 'absolute' as const,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none' as const,
+    background: `repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 2px,
+      rgba(212, 175, 55, 0.03) 2px,
+      rgba(212, 175, 55, 0.03) 4px
+    )`,
+    opacity: 0.5,
+  },
+
+  // 数据标签
+  dataTag: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '4px 12px',
+    background: 'rgba(212, 175, 55, 0.1)',
+    border: '1px solid rgba(212, 175, 55, 0.3)',
+    borderRadius: '20px',
+    fontSize: '12px',
+    fontWeight: 500,
+    color: FUI_COLORS.gold[400],
+    letterSpacing: '0.5px',
+  },
+
+  // 发光按钮
+  glowButton: {
+    base: {
+      background: `linear-gradient(135deg, ${FUI_COLORS.gold[500]} 0%, ${FUI_COLORS.gold[400]} 100%)`,
+      color: FUI_COLORS.bg.deep,
+      fontWeight: 'bold',
+      borderRadius: '8px',
+      transition: `all ${FUI_ANIMATION.duration.fast} ${FUI_ANIMATION.easing.default}`,
+    },
+    hover: {
+      boxShadow: FUI_GLOW.gold.md,
+      transform: 'translateY(-1px)',
+    },
+  },
+
+  // 输入框
+  input: {
+    base: {
+      background: FUI_COLORS.bg.primary,
+      border: FUI_GLASS.border.default,
+      borderRadius: '8px',
+      color: FUI_COLORS.text.primary,
+      transition: `all ${FUI_ANIMATION.duration.fast} ${FUI_ANIMATION.easing.default}`,
+    },
+    focus: {
+      borderColor: FUI_COLORS.gold[400],
+      boxShadow: FUI_GLOW.gold.sm,
+    },
+  },
+} as const;
+
+// ============================================
+// 导出完整主题对象
+// ============================================
+
+export const FUI_THEME = {
+  colors: FUI_COLORS,
+  glow: FUI_GLOW,
+  glass: FUI_GLASS,
+  animation: FUI_ANIMATION,
+  styles: FUI_STYLES,
+} as const;
+
+export default FUI_THEME;

src/views/Company/theme/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Company 页面 FUI 主题统一导出
+ */
+
+// 主题配置
+export { default as FUI_THEME } from './fui';
+export {
+  FUI_COLORS,
+  FUI_GLOW,
+  FUI_GLASS,
+  FUI_ANIMATION,
+  FUI_KEYFRAMES,
+  FUI_STYLES,
+} from './fui';
+
+// 主题组件
+export * from './components';