更新Company页面的UI为FUI风格

src/components/EventDetailPanel/CollapsibleHeader.js

@@ -38,10 +38,10 @@ const CollapsibleHeader = ({
   onModeToggle = null,
   isLocked = false
 }) => {
-  // 使用深色主题颜色
+  // 深色主题 - 标题区块背景稍亮
-  const sectionBg = 'rgba(26, 31, 46, 0.6)';
+  const sectionBg = '#3D4A5C';
-  const hoverBg = 'rgba(33, 38, 51, 0.8)';
+  const hoverBg = '#4A5568';
-  const headingColor = PROFESSIONAL_COLORS.text.primary;
+  const headingColor = '#F7FAFC';
 
   // 获取按钮文案
   const getButtonText = () => {

src/components/EventDetailPanel/CollapsibleSection.js

@@ -36,8 +36,8 @@ const CollapsibleSection = ({
   showModeToggle = false,
   defaultMode = 'detailed'
 }) => {
-  // 使用半透明深色背景
+  // 深色主题 - 折叠区块背景稍亮
-  const sectionBg = 'rgba(21, 25, 34, 0.6)';
+  const sectionBg = '#354259';
 
   // 模式状态：'detailed' | 'simple'
   const [displayMode, setDisplayMode] = useState(defaultMode);

src/components/EventDetailPanel/DynamicNewsDetailPanel.js

@@ -86,10 +86,10 @@ const sectionReducer = (state, action) => {
 const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
   const dispatch = useDispatch();
   const { user } = useAuth();
-  // 使用半透明背景以支持毛玻璃效果
+  // 深色主题 - 与弹窗背景一致
-  const cardBg = 'rgba(26, 31, 46, 0.6)';
+  const cardBg = '#2D3748';
   const borderColor = 'rgba(255, 255, 255, 0.08)';
-  const textColor = PROFESSIONAL_COLORS.text.secondary;
+  const textColor = '#CBD5E0';
 
   // 使用 useWatchlist Hook 管理自选股
   const {

src/views/Community/components/EventDetailModal/EventDetailModal.less

@@ -1,126 +1,66 @@
 // 事件详情抽屉样式（从底部弹出）- 深色毛玻璃风格
+// 整体比背景亮一些，形成层次感
 
-// 深色主题变量
+// 深色主题变量 - 提亮以区分背景
-@glass-bg: rgba(20, 24, 35, 0.95);
+@glass-bg: #2D3748;
-@glass-header-bg: rgba(26, 31, 46, 0.98);
+@glass-header-bg: #3D4A5C;
-@glass-border: rgba(255, 255, 255, 0.1);
+@glass-border: rgba(255, 255, 255, 0.12);
-@glass-text: #E8E9ED;
+@glass-text: #F7FAFC;
-@glass-text-secondary: #A0A4B8;
+@glass-text-secondary: #CBD5E0;
-@glass-card-bg: rgba(26, 31, 46, 0.85);
+@glass-card-bg: #354259;
-@glass-section-bg: rgba(21, 25, 34, 0.7);
+@glass-section-bg: #3D4A5C;
 
+// 深色抽屉样式
 .event-detail-drawer-dark {
-  // 移除白色外边框和阴影
+  // 整个抽屉容器
-  .ant-drawer-content-wrapper {
+  &.ant-drawer {
-    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5) !important;
+    // 内容包装器 - 移除白边
-  }
+    .ant-drawer-content-wrapper {
-
+      box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4) !important;
-  // 内容容器 - 深色毛玻璃效果
+      border: none !important;
-  .ant-drawer-content {
-    background: @glass-bg !important;
-    backdrop-filter: blur(24px) !important;
-    -webkit-backdrop-filter: blur(24px) !important;
-  }
-
-  // 标题样式 - 深色主题
-  .ant-drawer-title {
-    color: @glass-text !important;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 1.4;
-    max-width: calc(100% - 40px);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  // 头部容器
-  .ant-drawer-header {
-    background: @glass-header-bg !important;
-    border-bottom: 1px solid @glass-border !important;
-    backdrop-filter: blur(16px);
-  }
-
-  // 头部标题区域
-  .ant-drawer-header-title {
-    flex-direction: row-reverse; // 关闭按钮在右边
-  }
-
-  // 关闭按钮
-  .ant-drawer-extra {
-    .anticon-close {
-      color: @glass-text;
-      font-size: 18px;
-      transition: all 0.2s ease;
-
-      &:hover {
-        color: #fff;
-        transform: scale(1.1);
-      }
-    }
-  }
-
-  // 内容区域
-  .ant-drawer-body {
-    background: transparent !important;
-    padding: 0 !important;
-
-    // Chakra Card 样式覆盖
-    .chakra-card {
-      background: @glass-card-bg !important;
-      border: 1px solid @glass-border !important;
-      backdrop-filter: blur(8px);
-      border-radius: 12px;
-      box-shadow: none !important;
     }
 
-    // 折叠区块标题样式覆盖 - 相关股票等标题
+    // 内容容器
-    .chakra-heading {
+    .ant-drawer-content {
+      background: @glass-bg !important;
+      border: none !important;
+      border-radius: 16px 16px 0 0 !important;
+    }
+
+    // 头部容器
+    .ant-drawer-header {
+      background: @glass-header-bg !important;
+      border-bottom: 1px solid @glass-border !important;
+      padding: 16px 24px !important;
+      border-radius: 16px 16px 0 0 !important;
+    }
+
+    // 标题样式
+    .ant-drawer-title {
       color: @glass-text !important;
+      font-size: 16px !important;
+      font-weight: 600 !important;
+      line-height: 1.4 !important;
     }
 
-    // 折叠区块背景
+    // 关闭按钮区域
-    [class*="chakra-collapse"] > div,
+    .ant-drawer-extra {
-    .chakra-card > div > div > div {
+      .anticon-close {
-      background: @glass-section-bg !important;
+        color: @glass-text !important;
-    }
+        font-size: 18px;
+        transition: all 0.2s ease;
 
-    // Badge 样式
-    .chakra-badge {
-      background: rgba(59, 130, 246, 0.2) !important;
-      color: #60a5fa !important;
-    }
-
-    // 所有文本默认颜色
-    .chakra-text {
-      color: @glass-text-secondary;
-    }
-
-    // 按钮样式
-    .chakra-button {
-      &[data-variant="ghost"] {
-        color: @glass-text-secondary;
         &:hover {
-          background: rgba(255, 255, 255, 0.06);
+          color: #fff;
-          color: @glass-text;
+          transform: scale(1.1);
         }
       }
     }
 
-    // IconButton 样式
+    // 内容区域
-    .chakra-icon-button {
+    .ant-drawer-body {
-      color: @glass-text-secondary;
+      background: @glass-bg !important;
-      &:hover {
+      padding: 0 !important;
-        background: rgba(255, 255, 255, 0.06);
-        color: @glass-text;
-      }
-    }
-
-    // Ant Design Tag 样式
-    .ant-tag {
-      background: rgba(59, 130, 246, 0.15) !important;
-      border-color: rgba(59, 130, 246, 0.3) !important;
-      color: #60a5fa !important;
     }
   }
 }

src/views/Community/components/EventDetailModal/EventDetailModal.tsx

@@ -15,13 +15,13 @@ interface EventDetailModalProps {
   event: any; // TODO: 后续可替换为具体的 Event 类型
 }
 
-// 深色毛玻璃主题颜色
+// 深色主题颜色 - 比背景亮，形成层次感（使用实色确保覆盖）
 const GLASS_THEME = {
-  bg: 'rgba(20, 24, 35, 0.92)',
+  bg: '#2D3748',
-  headerBg: 'rgba(26, 31, 46, 0.95)',
+  headerBg: '#3D4A5C',
-  borderColor: 'rgba(255, 255, 255, 0.08)',
+  borderColor: 'rgba(255, 255, 255, 0.12)',
-  textColor: '#E8E9ED',
+  textColor: '#F7FAFC',
-  secondaryText: '#A0A4B8',
+  secondaryText: '#CBD5E0',
 };
 
 /**
@@ -55,29 +55,23 @@ const EventDetailModal: React.FC<EventDetailModalProps> = ({
         wrapper: isMobile ? {} : {
           maxWidth: 1400,
           margin: '0 auto',
-          borderRadius: '16px 16px 0 0',
-          overflow: 'hidden',
         },
         mask: {
-          backdropFilter: 'blur(8px)',
+          background: 'rgba(0, 0, 0, 0.5)',
-          background: 'rgba(0, 0, 0, 0.6)',
         },
         content: {
           borderRadius: '16px 16px 0 0',
           background: GLASS_THEME.bg,
-          backdropFilter: 'blur(20px)',
           border: 'none',
-          boxShadow: '0 -8px 32px rgba(0, 0, 0, 0.4)',
         },
         header: {
           background: GLASS_THEME.headerBg,
           borderBottom: `1px solid ${GLASS_THEME.borderColor}`,
-          padding: '16px 24px',
+          borderRadius: '16px 16px 0 0',
-          backdropFilter: 'blur(12px)',
         },
         body: {
           padding: 0,
-          background: 'transparent',
+          background: GLASS_THEME.bg,
         },
       }}
     >