vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(WatchSidebar): 面板 UI 优化，添加日均周涨展示

Browse Source 
- 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:
zdl
2025-12-23 20:09:44 +08:00
parent 073fba5c57
commit 9156da410d
3 changed files with 172 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Navbars/components/FeatureMenus/FollowingEventsMenu.js
View File

@@ -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>

67
src/views/Profile/components/WatchSidebar/components/FollowingEventsPanel.js
View File

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
import { Box, Text, VStack, HStack, Icon, Button, ButtonGroup, Badge } from '@chakra-ui/react';
import { Star, Plus, Users, MessageSquare } from 'lucide-react';
import MyCommentsTab from './MyCommentsTab';
import FavoriteButton from '@/components/FavoriteButton';
const TAB_EVENTS = 'events';
const TAB_COMMENTS = 'comments';
@@ -14,28 +15,31 @@ const FollowingEventsPanel = ({
onCommentClick,
onAddEvent,
onUnfollow,
hideTitle = false,
}) => {
const [activeTab, setActiveTab] = useState(TAB_EVENTS);
return (
<Box>
{/* 标题栏 + Tab 切换 */}
<HStack justify="space-between" mb={2}>
<HStack spacing={1}>
<Icon as={Star} boxSize={3.5} color="rgba(234, 179, 8, 0.9)" />
<Text fontSize="xs" fontWeight="bold" color="rgba(255, 255, 255, 0.9)">
事件动态
</Text>
{/* 标题栏 - 可隐藏 */}
{!hideTitle && (
<HStack justify="space-between" mb={2}>
<HStack spacing={1}>
<Icon as={Star} boxSize={3.5} color="rgba(234, 179, 8, 0.9)" />
<Text fontSize="xs" fontWeight="bold" color="rgba(255, 255, 255, 0.9)">
事件动态
</Text>
</HStack>
<Icon
as={Plus}
boxSize={3.5}
color="rgba(255, 255, 255, 0.5)"
cursor="pointer"
_hover={{ color: 'rgba(212, 175, 55, 0.9)' }}
onClick={onAddEvent}
/>
</HStack>
<Icon
as={Plus}
boxSize={3.5}
color="rgba(255, 255, 255, 0.5)"
cursor="pointer"
_hover={{ color: 'rgba(212, 175, 55, 0.9)' }}
onClick={onAddEvent}
/>
</HStack>
)}
{/* Tab 切换按钮 */}
<ButtonGroup size="xs" isAttached variant="outline" mb={2} w="100%">
@@ -110,8 +114,7 @@ const formatChange = (value) => {
const EventsTabContent = ({ events, onEventClick, onAddEvent, onUnfollow }) => {
const [unfollowingId, setUnfollowingId] = useState(null);
const handleUnfollow = async (e, eventId) => {
e.stopPropagation();
const handleUnfollow = async (eventId) => {
if (unfollowingId) return;
setUnfollowingId(eventId);
try {
@@ -155,8 +158,9 @@ const EventsTabContent = ({ events, onEventClick, onAddEvent, onUnfollow }) => {
>
<VStack spacing={1.5} align="stretch">
{events.map((event) => {
const dailyChg = formatChange(event.daily_avg_chg);
const weeklyChg = formatChange(event.weekly_chg);
// 兼容两种字段名：daily_avg_chg / related_avg_chg, weekly_chg / related_week_chg
const dailyChg = formatChange(event.daily_avg_chg ?? event.related_avg_chg);
const weeklyChg = formatChange(event.weekly_chg ?? event.related_week_chg);
const isUnfollowing = unfollowingId === event.id;
return (
@@ -181,7 +185,7 @@ const EventsTabContent = ({ events, onEventClick, onAddEvent, onUnfollow }) => {
>
{event.title}
</Text>
{/* 底部：日均、周涨、取消 */}
{/* 底部：日均、周涨、取消关注按钮 */}
<HStack justify="space-between" fontSize="10px" flexWrap="wrap" gap={1}>
<HStack spacing={1.5}>
{dailyChg && (
@@ -211,17 +215,16 @@ const EventsTabContent = ({ events, onEventClick, onAddEvent, onUnfollow }) => {
</Badge>
)}
</HStack>
<Text
color="rgba(255, 255, 255, 0.4)"
fontSize="9px"
cursor="pointer"
opacity={0}
_groupHover={{ opacity: 1 }}
_hover={{ color: '#EF4444' }}
onClick={(e) => handleUnfollow(e, event.id)}
>
{isUnfollowing ? '取消中...' : '取消'}
</Text>
<Box onClick={(e) => e.stopPropagation()}>
<FavoriteButton
isFavorite={true}
isLoading={isUnfollowing}
onClick={() => handleUnfollow(event.id)}
size="sm"
colorScheme="gold"
showTooltip={true}
/>
</Box>
</HStack>
</Box>
);

178
src/views/Profile/components/WatchSidebar/components/WatchlistPanel.js
View File

@@ -1,7 +1,21 @@
// 关注股票面板 - 紧凑版
import React, { useState } from 'react';
import { Box, Text, VStack, HStack, Icon, IconButton, Tooltip } from '@chakra-ui/react';
import { BarChart2, Plus, X } from 'lucide-react';
import { Box, Text, VStack, HStack, Icon, Badge } from '@chakra-ui/react';
import { BarChart2, Plus } from 'lucide-react';
import FavoriteButton from '@/components/FavoriteButton';
/**
* 格式化涨跌幅
*/
const formatChange = (value) => {
if (value === undefined || value === null) return null;
const num = Number(value);
const isUp = num > 0;
return {
text: `${isUp ? '+' : ''}${num.toFixed(2)}%`,
color: isUp ? '#EF4444' : num < 0 ? '#22C55E' : 'rgba(255, 255, 255, 0.6)',
};
};
const WatchlistPanel = ({
watchlist = [],
@@ -9,11 +23,11 @@ const WatchlistPanel = ({
onStockClick,
onAddStock,
onUnwatch,
hideTitle = false,
}) => {
const [removingCode, setRemovingCode] = useState(null);
const handleUnwatch = async (e, stockCode) => {
e.stopPropagation();
const handleUnwatch = async (stockCode) => {
if (removingCode) return;
setRemovingCode(stockCode);
try {
@@ -24,26 +38,28 @@ const WatchlistPanel = ({
};
return (
<Box>
{/* 标题 */}
<HStack justify="space-between" mb={2}>
<HStack spacing={1}>
<Icon as={BarChart2} boxSize={3.5} color="rgba(59, 130, 246, 0.9)" />
<Text fontSize="xs" fontWeight="bold" color="rgba(255, 255, 255, 0.9)">
关注股票
</Text>
<Text fontSize="xs" color="rgba(255, 255, 255, 0.5)">
({watchlist.length})
</Text>
{/* 标题 - 可隐藏 */}
{!hideTitle && (
<HStack justify="space-between" mb={2}>
<HStack spacing={1}>
<Icon as={BarChart2} boxSize={3.5} color="rgba(59, 130, 246, 0.9)" />
<Text fontSize="xs" fontWeight="bold" color="rgba(255, 255, 255, 0.9)">
关注股票
</Text>
<Text fontSize="xs" color="rgba(255, 255, 255, 0.5)">
({watchlist.length})
</Text>
</HStack>
<Icon
as={Plus}
boxSize={3.5}
color="rgba(255, 255, 255, 0.5)"
cursor="pointer"
_hover={{ color: 'rgba(212, 175, 55, 0.9)' }}
onClick={onAddStock}
/>
</HStack>
<Icon
as={Plus}
boxSize={3.5}
color="rgba(255, 255, 255, 0.5)"
cursor="pointer"
_hover={{ color: 'rgba(212, 175, 55, 0.9)' }}
onClick={onAddStock}
/>
</HStack>
)}
{/* 股票列表 - 固定高度可滚动 */}
{watchlist.length === 0 ? (
@@ -74,7 +90,7 @@ const WatchlistPanel = ({
},
}}
>
<VStack spacing={1} align="stretch">
<VStack spacing={1.5} align="stretch">
{watchlist.map((stock) => {
const quote = realtimeQuotes[stock.stock_code];
const changePercent = quote?.change_percent ?? stock.change_percent;
@@ -83,58 +99,92 @@ const WatchlistPanel = ({
const isRemoving = removingCode === stock.stock_code;
// 日均涨跌幅和周涨跌幅
const dailyChg = formatChange(quote?.daily_avg_chg ?? stock.daily_avg_chg);
const weeklyChg = formatChange(quote?.weekly_chg ?? stock.weekly_chg);
return (
<HStack
<Box
key={stock.stock_code}
py={1.5}
py={2}
px={2}
justify="space-between"
cursor="pointer"
borderRadius="md"
_hover={{ bg: 'rgba(255, 255, 255, 0.05)' }}
bg="rgba(37, 37, 64, 0.3)"
_hover={{ bg: 'rgba(37, 37, 64, 0.6)' }}
onClick={() => onStockClick?.(stock)}
role="group"
>
<VStack align="start" spacing={0} flex={1} minW={0}>
<Text
fontSize="xs"
fontWeight="medium"
color="rgba(255, 255, 255, 0.9)"
noOfLines={1}
>
{stock.stock_name || stock.stock_code}
</Text>
<Text fontSize="10px" color="rgba(255, 255, 255, 0.4)">
{stock.stock_code}
</Text>
</VStack>
<HStack spacing={1}>
<VStack align="end" spacing={0}>
<Text fontSize="xs" fontWeight="bold" color={changeColor}>
{quote?.current_price?.toFixed(2) || stock.current_price || '--'}
{/* 第一行：股票名称 + 价格/涨跌幅 + 取消关注按钮 */}
<HStack justify="space-between" mb={1.5}>
<VStack align="start" spacing={0} flex={1} minW={0}>
<Text
fontSize="xs"
fontWeight="medium"
color="rgba(255, 255, 255, 0.9)"
noOfLines={1}
>
{stock.stock_name || stock.stock_code}
</Text>
<Text fontSize="10px" color={changeColor}>
{changePercent !== undefined && changePercent !== null
? `${isUp ? '+' : ''}${Number(changePercent).toFixed(2)}%`
: '--'}
<Text fontSize="10px" color="rgba(255, 255, 255, 0.4)">
{stock.stock_code}
</Text>
</VStack>
<Tooltip label="取消关注" placement="top" hasArrow>
<IconButton
icon={<Icon as={X} boxSize={3} />}
size="xs"
variant="ghost"
color="rgba(255, 255, 255, 0.3)"
opacity={0}
_groupHover={{ opacity: 1 }}
_hover={{ color: '#EF4444', bg: 'rgba(239, 68, 68, 0.1)' }}
isLoading={isRemoving}
onClick={(e) => handleUnwatch(e, stock.stock_code)}
aria-label="取消关注"
/>
</Tooltip>
<HStack spacing={1}>
<VStack align="end" spacing={0}>
<Text fontSize="xs" fontWeight="bold" color={changeColor}>
{quote?.current_price?.toFixed(2) || stock.current_price || '--'}
</Text>
<Text fontSize="10px" color={changeColor}>
{changePercent !== undefined && changePercent !== null
? `${isUp ? '+' : ''}${Number(changePercent).toFixed(2)}%`
: '--'}
</Text>
</VStack>
<Box onClick={(e) => e.stopPropagation()}>
<FavoriteButton
isFavorite={true}
isLoading={isRemoving}
onClick={() => handleUnwatch(stock.stock_code)}
size="sm"
colorScheme="gold"
showTooltip={true}
/>
</Box>
</HStack>
</HStack>
</HStack>
{/* 第二行：日均、周涨 Badge */}
{(dailyChg || weeklyChg) && (
<HStack spacing={1.5} fontSize="10px">
{dailyChg && (
<Badge
bg="rgba(255, 255, 255, 0.08)"
color={dailyChg.color}
fontSize="9px"
fontWeight="medium"
px={1.5}
py={0.5}
borderRadius="sm"
>
日均 {dailyChg.text}
</Badge>
)}
{weeklyChg && (
<Badge
bg="rgba(255, 255, 255, 0.08)"
color={weeklyChg.color}
fontSize="9px"
fontWeight="medium"
px={1.5}
py={0.5}
borderRadius="sm"
>
周涨 {weeklyChg.text}
</Badge>
)}
</HStack>
)}
</Box>
);
})}
</VStack>