From b1d5b217d3ba67c814b44cedaeec01f1d267c26f Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 4 Dec 2025 15:45:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BA=8B=E4=BB=B6=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E5=BC=B9=E7=AA=97=E6=94=B9=E7=94=A8=20Drawer=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BB=8E=E5=BA=95=E9=83=A8=E5=BC=B9=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../components/BytedeskWidget.jsx             |  4 +-
 .../components/EventDetailModal.less          | 38 +++---------------
 .../Community/components/EventDetailModal.tsx | 39 ++++++++++++-------
 3 files changed, 34 insertions(+), 47 deletions(-)

diff --git a/src/bytedesk-integration/components/BytedeskWidget.jsx b/src/bytedesk-integration/components/BytedeskWidget.jsx
index 58127331..af2eddcf 100644
--- a/src/bytedesk-integration/components/BytedeskWidget.jsx
+++ b/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';
diff --git a/src/views/Community/components/EventDetailModal.less b/src/views/Community/components/EventDetailModal.less
index c448bed8..e2378b3f 100644
--- a/src/views/Community/components/EventDetailModal.less
+++ b/src/views/Community/components/EventDetailModal.less
@@ -1,36 +1,8 @@
-.event-detail-modal {
-  top: 20% !important;
-  margin: 0 auto !important;
-  padding-bottom: 0 !important;
-
-  .ant-modal-content {
-    border-radius: 24px !important;
-    background: transparent;
-  }
-
-  // 标题样式 - 深色文字（白色背景）
-  .ant-modal-title {
+// 事件详情抽屉样式（从底部弹出）
+// 注意：大部分样式已在 TSX 的 styles 属性中配置，这里只保留必要的覆盖
+.event-detail-drawer {
+  // 标题样式
+  .ant-drawer-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;
-  }
 }
diff --git a/src/views/Community/components/EventDetailModal.tsx b/src/views/Community/components/EventDetailModal.tsx
index acd94f50..315e6846 100644
--- a/src/views/Community/components/EventDetailModal.tsx
+++ b/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}
-      footer={null}
+      onClose={onClose}
+      placement="bottom"
+      height={isMobile ? 'calc(100vh - 60px)' : 'calc(100vh - 100px)'}
+      width={isMobile ? '100%' : '70vw'}
       title={event?.title || '事件详情'}
-      width='100vw'
-      destroyOnClose
-      className="event-detail-modal"
+      destroyOnHidden
+      rootClassName="event-detail-drawer"
+      closeIcon={null}
+      extra={
+        <CloseOutlined
+          onClick={onClose}
+          style={{ cursor: 'pointer', fontSize: 16, color: '#4A5568' }}
+        />
+      }
       styles={{
-        mask: { background: 'transparent' },
-        content: { borderRadius: 24, padding: 0, maxWidth: 1400, background: 'transparent', margin: '0 auto', maxHeight: '80vh', display: 'flex', flexDirection: 'column' },
-        header: { background: '#FFFFFF', borderBottom: '1px solid #E2E8F0', padding: '16px 24px', borderRadius: '24px 24px 0 0', margin: 0, flexShrink: 0 },
-        body: { padding: 0, overflowY: 'auto', flex: 1 },
+        wrapper: isMobile ? {} : {
+          maxWidth: 1400,
+          margin: '0 auto',
+          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>
   );
 };