更新Company页面的UI为FUI风格

app.py

@@ -351,6 +351,7 @@ def generate_events_cache_key(args_dict):
     params_str = json.dumps(filtered_params, sort_keys=True)
     params_hash = hashlib.md5(params_str.encode()).hexdigest()
 
+
     return f"{EVENTS_CACHE_PREFIX}{params_hash}"
 
 

src/views/Community/components/DynamicNews/DynamicNewsCard.js

@@ -16,12 +16,6 @@ import {
   Badge,
   Center,
   Spinner,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalCloseButton,
   useColorModeValue,
   useToast,
   useDisclosure,
@@ -34,7 +28,7 @@ import { useNotification } from '@contexts/NotificationContext';
 import EventScrollList from './EventScrollList';
 import ModeToggleButtons from './ModeToggleButtons';
 import PaginationControl from './PaginationControl';
-import DynamicNewsDetailPanel from '@components/EventDetailPanel';
+import EventDetailModal from '../EventDetailModal';
 import CompactSearchBox from '../SearchFilters/CompactSearchBox';
 import {
   fetchDynamicNews,
@@ -692,21 +686,12 @@ const [currentMode, setCurrentMode] = useState('vertical');
         </Box>
       </CardBody>
 
-      {/* 四排模式详情弹窗 - 未打开时不渲染 */}
+      {/* 四排/主线模式详情弹窗 - 深色风格 */}
-      {isModalOpen && (
+      <EventDetailModal
-        <Modal isOpen={isModalOpen} onClose={onModalClose} size="full" scrollBehavior="inside">
+        open={isModalOpen}
-          <ModalOverlay />
+        onClose={onModalClose}
-          <ModalContent maxW="1600px" mx="auto" my={8}>
+        event={modalEvent}
-            <ModalHeader>
+      />
-              {modalEvent?.title || '事件详情'}
-            </ModalHeader>
-            <ModalCloseButton />
-            <ModalBody pb={6}>
-              {modalEvent && <DynamicNewsDetailPanel event={modalEvent} />}
-            </ModalBody>
-          </ModalContent>
-        </Modal>
-      )}
     </Card>
   );
 });

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

@@ -7,13 +7,11 @@
 @glass-border: rgba(255, 255, 255, 0.12);
 @glass-text: #F7FAFC;
 @glass-text-secondary: #CBD5E0;
-@glass-card-bg: #354259;
-@glass-section-bg: #3D4A5C;
 
-// 深色抽屉样式
+// 使用 :global 确保样式全局生效
-.event-detail-drawer-dark {
+:global {
-  // 整个抽屉容器
+  // 深色抽屉样式
-  &.ant-drawer {
+  .event-detail-drawer-dark {
     // 内容包装器 - 移除白边
     .ant-drawer-content-wrapper {
       box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4) !important;
@@ -64,10 +62,3 @@
     }
   }
 }
-
-// 原有基础样式保留（非深色模式）
-.event-detail-drawer:not(.event-detail-drawer-dark) {
-  .ant-drawer-title {
-    color: #1A202C;
-  }
-}

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

@@ -1,10 +1,9 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { Drawer } from 'antd';
+import { Drawer, ConfigProvider, theme } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
 import { selectIsMobile } from '@store/slices/deviceSlice';
 import DynamicNewsDetailPanel from '@components/EventDetailPanel';
-import './EventDetailModal.less';
 
 interface EventDetailModalProps {
   /** 是否打开弹窗 */
@@ -15,17 +14,16 @@ interface EventDetailModalProps {
   event: any; // TODO: 后续可替换为具体的 Event 类型
 }
 
-// 深色主题颜色 - 比背景亮，形成层次感（使用实色确保覆盖）
+// 深色主题颜色 - 比背景亮，形成层次感
-const GLASS_THEME = {
+const THEME = {
   bg: '#2D3748',
   headerBg: '#3D4A5C',
   borderColor: 'rgba(255, 255, 255, 0.12)',
   textColor: '#F7FAFC',
-  secondaryText: '#CBD5E0',
 };
 
 /**
- * 事件详情抽屉组件（从底部弹出）- 深色毛玻璃风格
+ * 事件详情抽屉组件（从底部弹出）- 深色风格
  */
 const EventDetailModal: React.FC<EventDetailModalProps> = ({
   open,
@@ -35,48 +33,62 @@ const EventDetailModal: React.FC<EventDetailModalProps> = ({
   const isMobile = useSelector(selectIsMobile);
 
   return (
-    <Drawer
+    <ConfigProvider
-      open={open}
+      theme={{
-      onClose={onClose}
+        algorithm: theme.darkAlgorithm,
-      placement="bottom"
+        token: {
-      height={isMobile ? 'calc(100vh - 60px)' : 'calc(100vh - 100px)'}
+          colorBgElevated: THEME.bg,
-      width={isMobile ? '100%' : '70vw'}
+          colorBgContainer: THEME.bg,
-      title={event?.title || '事件详情'}
+          colorText: THEME.textColor,
-      destroyOnHidden
+          colorTextHeading: THEME.textColor,
-      rootClassName="event-detail-drawer event-detail-drawer-dark"
+          colorIcon: THEME.textColor,
-      closeIcon={null}
+          colorBorderSecondary: THEME.borderColor,
-      extra={
-        <CloseOutlined
-          onClick={onClose}
-          style={{ cursor: 'pointer', fontSize: 18, color: GLASS_THEME.textColor }}
-        />
-      }
-      styles={{
-        wrapper: isMobile ? {} : {
-          maxWidth: 1400,
-          margin: '0 auto',
         },
-        mask: {
+        components: {
-          background: 'rgba(0, 0, 0, 0.5)',
+          Drawer: {
-        },
+            colorBgElevated: THEME.bg,
-        content: {
+            colorText: THEME.textColor,
-          borderRadius: '16px 16px 0 0',
+            colorIcon: THEME.textColor,
-          background: GLASS_THEME.bg,
+            colorIconHover: '#FFFFFF',
-          border: 'none',
+          },
-        },
-        header: {
-          background: GLASS_THEME.headerBg,
-          borderBottom: `1px solid ${GLASS_THEME.borderColor}`,
-          borderRadius: '16px 16px 0 0',
-        },
-        body: {
-          padding: 0,
-          background: GLASS_THEME.bg,
         },
       }}
     >
-      {event && <DynamicNewsDetailPanel event={event} showHeader={false} />}
+      <Drawer
-    </Drawer>
+        open={open}
+        onClose={onClose}
+        placement="bottom"
+        height={isMobile ? 'calc(100vh - 60px)' : 'calc(100vh - 100px)'}
+        width={isMobile ? '100%' : '70vw'}
+        title={event?.title || '事件详情'}
+        destroyOnHidden
+        closeIcon={<CloseOutlined />}
+        styles={{
+          wrapper: isMobile ? {} : {
+            maxWidth: 1400,
+            margin: '0 auto',
+          },
+          mask: {
+            background: 'rgba(0, 0, 0, 0.5)',
+          },
+          content: {
+            borderRadius: '16px 16px 0 0',
+            background: THEME.bg,
+          },
+          header: {
+            background: THEME.headerBg,
+            borderBottom: `1px solid ${THEME.borderColor}`,
+            borderRadius: '16px 16px 0 0',
+          },
+          body: {
+            padding: 0,
+            background: THEME.bg,
+          },
+        }}
+      >
+        {event && <DynamicNewsDetailPanel event={event} showHeader={false} />}
+      </Drawer>
+    </ConfigProvider>
   );
 };