refactor: 事件详情弹窗改用 Drawer 组件从底部弹出

- EventDetailModal: Modal 替换为 Drawer，placement="bottom"
- 使用 destroyOnHidden 替代已弃用的 destroyOnClose
- 关闭按钮改用 CloseOutlined 图标，移到右上角
- 简化 Less 文件，删除与 TSX styles 属性重复的配置
- BytedeskWidget: H5 端降低 z-index，避免遮挡发布按钮

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/bytedesk-integration/components/BytedeskWidget.jsx

@@ -75,9 +75,11 @@ const BytedeskWidget = ({
                   const rightVal = parseInt(style.right);
                   const bottomVal = parseInt(style.bottom);
                   if (rightVal >= 0 && rightVal < 100 && bottomVal >= 0 && bottomVal < 100) {
-                    // H5 端设置按钮尺寸为 48x48（只执行一次）
+                    // H5 端设置按钮尺寸为 48x48 并降低 z-index（只执行一次）
                     if (isMobile && !el.dataset.bytedeskStyled) {
                       el.dataset.bytedeskStyled = 'true';
+                      // 降低 z-index，避免遮挡页面内的发布按钮等交互元素
+                      el.style.zIndex = 10;
                       const button = el.querySelector('button');
                       if (button) {
                         button.style.width = '48px';

src/views/Community/components/EventDetailModal.less

@@ -1,36 +1,8 @@
-.event-detail-modal {
+// 事件详情抽屉样式（从底部弹出）
-  top: 20% !important;
+// 注意：大部分样式已在 TSX 的 styles 属性中配置，这里只保留必要的覆盖
-  margin: 0 auto !important;
+.event-detail-drawer {
-  padding-bottom: 0 !important;
+  // 标题样式
-
+  .ant-drawer-title {
-  .ant-modal-content {
-    border-radius: 24px !important;
-    background: transparent;
-  }
-
-  // 标题样式 - 深色文字（白色背景）
-  .ant-modal-title {
-    color: #1A202C;
-  }
-
-  // 关闭按钮样式 - 深色（白色背景）
-  .ant-modal-close {
-    color: #4A5568;
-
-    &:hover {
     color: #1A202C;
   }
 }
-}
-
-// 自底向上滑入动画
-@keyframes slideUp {
-  from {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}

src/views/Community/components/EventDetailModal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { Modal } from 'antd';
+import { Drawer } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
 import { selectIsMobile } from '@store/slices/deviceSlice';
 import DynamicNewsDetailPanel from './DynamicNewsDetail/DynamicNewsDetailPanel';
 import './EventDetailModal.less';
@@ -15,7 +16,7 @@ interface EventDetailModalProps {
 }
 
 /**
- * 事件详情弹窗组件
+ * 事件详情抽屉组件（从底部弹出）
  */
 const EventDetailModal: React.FC<EventDetailModalProps> = ({
   open,
@@ -25,23 +26,35 @@ const EventDetailModal: React.FC<EventDetailModalProps> = ({
   const isMobile = useSelector(selectIsMobile);
 
   return (
-    <Modal
+    <Drawer
       open={open}
-      onCancel={onClose}
+      onClose={onClose}
-      footer={null}
+      placement="bottom"
+      height={isMobile ? 'calc(100vh - 60px)' : 'calc(100vh - 100px)'}
+      width={isMobile ? '100%' : '70vw'}
       title={event?.title || '事件详情'}
-      width='100vw'
+      destroyOnHidden
-      destroyOnClose
+      rootClassName="event-detail-drawer"
-      className="event-detail-modal"
+      closeIcon={null}
+      extra={
+        <CloseOutlined
+          onClick={onClose}
+          style={{ cursor: 'pointer', fontSize: 16, color: '#4A5568' }}
+        />
+      }
       styles={{
-        mask: { background: 'transparent' },
+        wrapper: isMobile ? {} : {
-        content: { borderRadius: 24, padding: 0, maxWidth: 1400, background: 'transparent', margin: '0 auto', maxHeight: '80vh', display: 'flex', flexDirection: 'column' },
+          maxWidth: 1400,
-        header: { background: '#FFFFFF', borderBottom: '1px solid #E2E8F0', padding: '16px 24px', borderRadius: '24px 24px 0 0', margin: 0, flexShrink: 0 },
+          margin: '0 auto',
-        body: { padding: 0, overflowY: 'auto', flex: 1 },
+          borderRadius: '16px 16px 0 0',
+        },
+        content: { borderRadius: '16px 16px 0 0' },
+        header: { background: '#FFFFFF', borderBottom: '1px solid #E2E8F0', padding: '16px 24px' },
+        body: { padding: 0, background: '#FFFFFF' },
       }}
     >
       {event && <DynamicNewsDetailPanel event={event} showHeader={false} />}
-    </Modal>
+    </Drawer>
   );
 };