community增加事件详情

src/views/Community/components/HeroPanel.js

@@ -55,7 +55,7 @@ import dayjs from 'dayjs';
 const { TabPane } = Tabs;
 const { Text: AntText } = Typography;
 
-// 定义动画
+// 定义动画和深色主题样式
 const animations = `
   @keyframes pulse {
     0%, 100% { opacity: 1; transform: scale(1); }
@@ -65,6 +65,110 @@ const animations = `
     0% { background-position: -200% 0; }
     100% { background-position: 200% 0; }
   }
+
+  /* Ant Design 深色主题覆盖 - 弹窗专用 */
+  .hero-panel-modal .ant-tabs {
+    color: rgba(255, 255, 255, 0.85);
+  }
+  .hero-panel-modal .ant-tabs-nav::before {
+    border-color: rgba(255, 215, 0, 0.2) !important;
+  }
+  .hero-panel-modal .ant-tabs-tab {
+    color: rgba(255, 255, 255, 0.65) !important;
+    font-size: 15px !important;
+  }
+  .hero-panel-modal .ant-tabs-tab:hover {
+    color: #FFD700 !important;
+  }
+  .hero-panel-modal .ant-tabs-tab-active .ant-tabs-tab-btn {
+    color: #FFD700 !important;
+  }
+  .hero-panel-modal .ant-tabs-ink-bar {
+    background: linear-gradient(90deg, #FFD700, #FFA500) !important;
+  }
+
+  /* 表格深色主题 */
+  .hero-panel-modal .ant-table {
+    background: transparent !important;
+    color: rgba(255, 255, 255, 0.85) !important;
+  }
+  .hero-panel-modal .ant-table-thead > tr > th {
+    background: rgba(255, 215, 0, 0.1) !important;
+    color: #FFD700 !important;
+    border-bottom: 1px solid rgba(255, 215, 0, 0.2) !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+  }
+  .hero-panel-modal .ant-table-tbody > tr > td {
+    background: transparent !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
+    color: rgba(255, 255, 255, 0.85) !important;
+    font-size: 14px !important;
+  }
+  .hero-panel-modal .ant-table-tbody > tr:hover > td {
+    background: rgba(255, 215, 0, 0.08) !important;
+  }
+  .hero-panel-modal .ant-table-tbody > tr.ant-table-row:hover > td {
+    background: rgba(255, 215, 0, 0.1) !important;
+  }
+  .hero-panel-modal .ant-table-cell-row-hover {
+    background: rgba(255, 215, 0, 0.08) !important;
+  }
+  .hero-panel-modal .ant-table-placeholder {
+    background: transparent !important;
+  }
+  .hero-panel-modal .ant-empty-description {
+    color: rgba(255, 255, 255, 0.45) !important;
+  }
+
+  /* 滚动条样式 */
+  .hero-panel-modal .ant-table-body::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .hero-panel-modal .ant-table-body::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 3px;
+  }
+  .hero-panel-modal .ant-table-body::-webkit-scrollbar-thumb {
+    background: rgba(255, 215, 0, 0.3);
+    border-radius: 3px;
+  }
+  .hero-panel-modal .ant-table-body::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 215, 0, 0.5);
+  }
+
+  /* Tag 样式优化 */
+  .hero-panel-modal .ant-tag {
+    border-radius: 4px !important;
+  }
+
+  /* Button link 样式 */
+  .hero-panel-modal .ant-btn-link {
+    color: #FFD700 !important;
+  }
+  .hero-panel-modal .ant-btn-link:hover {
+    color: #FFA500 !important;
+  }
+  .hero-panel-modal .ant-btn-link:disabled {
+    color: rgba(255, 255, 255, 0.25) !important;
+  }
+
+  /* Typography 样式 */
+  .hero-panel-modal .ant-typography {
+    color: rgba(255, 255, 255, 0.85) !important;
+  }
+  .hero-panel-modal .ant-typography-secondary {
+    color: rgba(255, 255, 255, 0.45) !important;
+  }
+
+  /* Spin 加载样式 */
+  .hero-panel-modal .ant-spin-text {
+    color: #FFD700 !important;
+  }
+  .hero-panel-modal .ant-spin-dot-item {
+    background-color: #FFD700 !important;
+  }
 `;
 
 // 注入样式
@@ -561,7 +665,7 @@ const DetailModal = ({ isOpen, onClose, selectedDate, ztDetail, events, loading
           </ModalHeader>
           <ModalCloseButton color="whiteAlpha.600" _hover={{ color: 'white' }} size="lg" />
 
-          <ModalBody py={6} px={6}>
+          <ModalBody py={6} px={6} className="hero-panel-modal">
             {loading ? (
               <Center h="300px">
                 <Spin size="large" tip="加载中..." />