fix: 修复 FeatureMenus 中的按钮嵌套警告

修复 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 嵌套警告
-  点击"取消"功能正常
-  悬停效果正常显示
This commit is contained in:
zdl
2025-10-30 18:14:10 +08:00
parent fc63cc6e8d
commit 20cb83b792
2 changed files with 20 additions and 10 deletions

View File

@@ -131,10 +131,15 @@ const FollowingEventsMenu = memo(() => {
{ev.related_week_chg.toFixed(2)}% {ev.related_week_chg.toFixed(2)}%
</Badge> </Badge>
)} )}
<Button <Box
size="xs" as="span"
variant="ghost" fontSize="xs"
colorScheme="red" color="red.500"
cursor="pointer"
px={2}
py={1}
borderRadius="md"
_hover={{ bg: 'red.50' }}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@@ -142,7 +147,7 @@ const FollowingEventsMenu = memo(() => {
}} }}
> >
取消 取消
</Button> </Box>
</HStack> </HStack>
</HStack> </HStack>
</MenuItem> </MenuItem>

View File

@@ -113,10 +113,15 @@ const WatchlistMenu = memo(() => {
item.current_price.toFixed(2) : item.current_price.toFixed(2) :
(item.current_price || '-')} (item.current_price || '-')}
</Text> </Text>
<Button <Box
size="xs" as="span"
variant="ghost" fontSize="xs"
colorScheme="red" color="red.500"
cursor="pointer"
px={2}
py={1}
borderRadius="md"
_hover={{ bg: 'red.50' }}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@@ -124,7 +129,7 @@ const WatchlistMenu = memo(() => {
}} }}
> >
取消 取消
</Button> </Box>
</HStack> </HStack>
</HStack> </HStack>
</MenuItem> </MenuItem>