From 20cb83b792fb139877c9c77a2213c85530db233a Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 30 Oct 2025 18:14:10 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20FeatureMenus=20?=
 =?UTF-8?q?=E4=B8=AD=E7=9A=84=E6=8C=89=E9=92=AE=E5=B5=8C=E5=A5=97=E8=AD=A6?=
 =?UTF-8?q?=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复 React DOM 嵌套警告：<button> 不能作为 <button> 的后代

**问题描述**
- MenuItem 组件渲染为 <button> 元素
- 在 MenuItem 内使用 Button 组件会导致 button-in-button 嵌套警告

**修复内容**
1. FollowingEventsMenu.js (lines 134-150)
   - 将"取消"按钮从 Button 组件改为 Box 组件
   - 使用 Box + 样式模拟按钮外观和交互

2. WatchlistMenu.js (lines 116-132)
   - 同样将"取消"按钮改为 Box 组件
   - 保持一致的样式和交互行为

**技术方案**
- Box as="span" 渲染为行内元素
- 通过 cursor="pointer" + _hover 实现按钮交互
- 通过 color + borderRadius 实现按钮视觉效果

**测试**
- ✅ 控制台无 DOM 嵌套警告
- ✅ 点击"取消"功能正常
- ✅ 悬停效果正常显示
---
 .../FeatureMenus/FollowingEventsMenu.js           | 15 ++++++++++-----
 .../components/FeatureMenus/WatchlistMenu.js      | 15 ++++++++++-----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/Navbars/components/FeatureMenus/FollowingEventsMenu.js b/src/components/Navbars/components/FeatureMenus/FollowingEventsMenu.js
index 4c0024ab..2ec63fda 100644
--- a/src/components/Navbars/components/FeatureMenus/FollowingEventsMenu.js
+++ b/src/components/Navbars/components/FeatureMenus/FollowingEventsMenu.js
@@ -131,10 +131,15 @@ const FollowingEventsMenu = memo(() => {
                                                             {ev.related_week_chg.toFixed(2)}%
                                                         </Badge>
                                                     )}
-                                                    <Button
-                                                        size="xs"
-                                                        variant="ghost"
-                                                        colorScheme="red"
+                                                    <Box
+                                                        as="span"
+                                                        fontSize="xs"
+                                                        color="red.500"
+                                                        cursor="pointer"
+                                                        px={2}
+                                                        py={1}
+                                                        borderRadius="md"
+                                                        _hover={{ bg: 'red.50' }}
                                                         onClick={(e) => {
                                                             e.preventDefault();
                                                             e.stopPropagation();
@@ -142,7 +147,7 @@ const FollowingEventsMenu = memo(() => {
                                                         }}
                                                     >
                                                         取消
-                                                    </Button>
+                                                    </Box>
                                                 </HStack>
                                             </HStack>
                                         </MenuItem>
diff --git a/src/components/Navbars/components/FeatureMenus/WatchlistMenu.js b/src/components/Navbars/components/FeatureMenus/WatchlistMenu.js
index c9072b64..d20fbb06 100644
--- a/src/components/Navbars/components/FeatureMenus/WatchlistMenu.js
+++ b/src/components/Navbars/components/FeatureMenus/WatchlistMenu.js
@@ -113,10 +113,15 @@ const WatchlistMenu = memo(() => {
                                                             item.current_price.toFixed(2) :
                                                             (item.current_price || '-')}
                                                     </Text>
-                                                    <Button
-                                                        size="xs"
-                                                        variant="ghost"
-                                                        colorScheme="red"
+                                                    <Box
+                                                        as="span"
+                                                        fontSize="xs"
+                                                        color="red.500"
+                                                        cursor="pointer"
+                                                        px={2}
+                                                        py={1}
+                                                        borderRadius="md"
+                                                        _hover={{ bg: 'red.50' }}
                                                         onClick={(e) => {
                                                             e.preventDefault();
                                                             e.stopPropagation();
@@ -124,7 +129,7 @@ const WatchlistMenu = memo(() => {
                                                         }}
                                                     >
                                                         取消
-                                                    </Button>
+                                                    </Box>
                                                 </HStack>
                                             </HStack>
                                         </MenuItem>