feat(WatchSidebar): 面板 UI 优化,添加日均周涨展示
- WatchlistPanel: 添加 hideTitle 支持,新增日均/周涨 Badge 展示 - FollowingEventsPanel: 添加 hideTitle 支持,兼容 related_avg_chg 字段 - FollowingEventsMenu: 使用 FavoriteButton 替代文字按钮 - 统一卡片样式,与关注事件面板保持一致 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
// src/components/Navbars/components/FeatureMenus/FollowingEventsMenu.js
|
||||
// 关注事件下拉菜单组件
|
||||
|
||||
import React, { memo } from 'react';
|
||||
import React, { memo, useState } from 'react';
|
||||
import {
|
||||
Menu,
|
||||
MenuButton,
|
||||
@@ -22,6 +22,7 @@ import { FiCalendar } from 'react-icons/fi';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useFollowingEvents } from '../../../../hooks/useFollowingEvents';
|
||||
import { getEventDetailUrl } from '@/utils/idEncoder';
|
||||
import FavoriteButton from '@/components/FavoriteButton';
|
||||
|
||||
/**
|
||||
* 关注事件下拉菜单组件
|
||||
@@ -30,6 +31,7 @@ import { getEventDetailUrl } from '@/utils/idEncoder';
|
||||
*/
|
||||
const FollowingEventsMenu = memo(() => {
|
||||
const navigate = useNavigate();
|
||||
const [unfollowingId, setUnfollowingId] = useState(null);
|
||||
const {
|
||||
followingEvents,
|
||||
eventsLoading,
|
||||
@@ -40,6 +42,17 @@ const FollowingEventsMenu = memo(() => {
|
||||
handleUnfollowEvent
|
||||
} = useFollowingEvents();
|
||||
|
||||
// 处理取消关注(带 loading 状态)
|
||||
const handleUnfollow = async (eventId) => {
|
||||
if (unfollowingId) return;
|
||||
setUnfollowingId(eventId);
|
||||
try {
|
||||
await handleUnfollowEvent(eventId);
|
||||
} finally {
|
||||
setUnfollowingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const titleColor = useColorModeValue('gray.600', 'gray.300');
|
||||
const loadingTextColor = useColorModeValue('gray.500', 'gray.300');
|
||||
const emptyTextColor = useColorModeValue('gray.500', 'gray.300');
|
||||
@@ -108,27 +121,6 @@ const FollowingEventsMenu = memo(() => {
|
||||
</HStack>
|
||||
</Box>
|
||||
<HStack flexShrink={0} spacing={1}>
|
||||
{/* 热度 */}
|
||||
{typeof ev.hot_score === 'number' && (
|
||||
<Badge
|
||||
colorScheme={
|
||||
ev.hot_score >= 80 ? 'red' :
|
||||
(ev.hot_score >= 60 ? 'orange' : 'gray')
|
||||
}
|
||||
fontSize="xs"
|
||||
>
|
||||
🔥 {ev.hot_score}
|
||||
</Badge>
|
||||
)}
|
||||
{/* 关注数 */}
|
||||
{typeof ev.follower_count === 'number' && ev.follower_count > 0 && (
|
||||
<Badge
|
||||
colorScheme="purple"
|
||||
fontSize="xs"
|
||||
>
|
||||
👥 {ev.follower_count}
|
||||
</Badge>
|
||||
)}
|
||||
{/* 日均涨跌幅 */}
|
||||
{typeof ev.related_avg_chg === 'number' && (
|
||||
<Badge
|
||||
@@ -155,23 +147,21 @@ const FollowingEventsMenu = memo(() => {
|
||||
{ev.related_week_chg.toFixed(2)}%
|
||||
</Badge>
|
||||
)}
|
||||
{/* 取消关注按钮 */}
|
||||
{/* 取消关注按钮 - 使用 FavoriteButton */}
|
||||
<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();
|
||||
handleUnfollowEvent(ev.id);
|
||||
}}
|
||||
>
|
||||
取消
|
||||
<FavoriteButton
|
||||
isFavorite={true}
|
||||
isLoading={unfollowingId === ev.id}
|
||||
onClick={() => handleUnfollow(ev.id)}
|
||||
size="sm"
|
||||
colorScheme="gold"
|
||||
showTooltip={true}
|
||||
/>
|
||||
</Box>
|
||||
</HStack>
|
||||
</HStack>
|
||||
|
||||
Reference in New Issue
Block a user