From 712090accb141ee0e256e61f49978de0b8be84e1 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Mon, 22 Dec 2025 16:51:16 +0800 Subject: [PATCH] =?UTF-8?q?feat(WatchSidebar):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E5=8F=B3=E4=BE=A7=E8=BE=B9=E6=A0=8F=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 关注股票面板（独立模块） - 关注事件面板（独立模块） - 固定200px宽度，粘性定位 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../components/FollowingEventsPanel.js | 110 +++++++++++++++++ .../WatchSidebar/components/WatchlistPanel.js | 114 ++++++++++++++++++ .../WatchSidebar/components/index.js | 3 + .../Profile/components/WatchSidebar/index.js | 50 ++++++++ 4 files changed, 277 insertions(+) create mode 100644 src/views/Profile/components/WatchSidebar/components/FollowingEventsPanel.js create mode 100644 src/views/Profile/components/WatchSidebar/components/WatchlistPanel.js create mode 100644 src/views/Profile/components/WatchSidebar/components/index.js create mode 100644 src/views/Profile/components/WatchSidebar/index.js diff --git a/src/views/Profile/components/WatchSidebar/components/FollowingEventsPanel.js b/src/views/Profile/components/WatchSidebar/components/FollowingEventsPanel.js new file mode 100644 index 00000000..5964a677 --- /dev/null +++ b/src/views/Profile/components/WatchSidebar/components/FollowingEventsPanel.js @@ -0,0 +1,110 @@ +// 关注事件面板 - 紧凑版 +import React from 'react'; +import { Box, Text, VStack, HStack, Icon } from '@chakra-ui/react'; +import { Star, Plus, Users } from 'lucide-react'; + +const FollowingEventsPanel = ({ + events = [], + onEventClick, + onAddEvent, +}) => { + return ( + + {/* 标题 */} + + + + + 关注事件 + + + ({events.length}) + + + + + + {/* 事件列表 */} + + {events.length === 0 ? ( + + + + 关注事件 + + + ) : ( + events.slice(0, 6).map((event) => { + const avgChg = event.related_avg_chg; + const isUp = avgChg > 0; + const changeColor = isUp ? '#EF4444' : avgChg < 0 ? '#22C55E' : 'rgba(255, 255, 255, 0.6)'; + + return ( + onEventClick?.(event)} + > + + {event.title} + + + + + {event.follower_count || 0} + + {avgChg !== undefined && avgChg !== null && ( + + {isUp ? '+' : ''}{Number(avgChg).toFixed(2)}% + + )} + + + ); + }) + )} + {events.length > 6 && ( + + 查看全部 ({events.length}) + + )} + + + ); +}; + +export default FollowingEventsPanel; diff --git a/src/views/Profile/components/WatchSidebar/components/WatchlistPanel.js b/src/views/Profile/components/WatchSidebar/components/WatchlistPanel.js new file mode 100644 index 00000000..8f252d71 --- /dev/null +++ b/src/views/Profile/components/WatchSidebar/components/WatchlistPanel.js @@ -0,0 +1,114 @@ +// 关注股票面板 - 紧凑版 +import React from 'react'; +import { Box, Text, VStack, HStack, Icon } from '@chakra-ui/react'; +import { BarChart2, Plus } from 'lucide-react'; + +const WatchlistPanel = ({ + watchlist = [], + realtimeQuotes = {}, + onStockClick, + onAddStock, +}) => { + return ( + + {/* 标题 */} + + + + + 关注股票 + + + ({watchlist.length}) + + + + + + {/* 股票列表 */} + + {watchlist.length === 0 ? ( + + + + 添加自选股 + + + ) : ( + watchlist.slice(0, 8).map((stock) => { + const quote = realtimeQuotes[stock.stock_code]; + const changePercent = quote?.change_percent ?? stock.change_percent; + const isUp = changePercent > 0; + const changeColor = isUp ? '#EF4444' : changePercent < 0 ? '#22C55E' : 'rgba(255, 255, 255, 0.6)'; + + return ( + onStockClick?.(stock)} + > + + + {stock.stock_name || stock.stock_code} + + + {stock.stock_code} + + + + + {quote?.current_price?.toFixed(2) || stock.current_price || '--'} + + + {changePercent !== undefined && changePercent !== null + ? `${isUp ? '+' : ''}${Number(changePercent).toFixed(2)}%` + : '--'} + + + + ); + }) + )} + {watchlist.length > 8 && ( + + 查看全部 ({watchlist.length}) + + )} + + + ); +}; + +export default WatchlistPanel; diff --git a/src/views/Profile/components/WatchSidebar/components/index.js b/src/views/Profile/components/WatchSidebar/components/index.js new file mode 100644 index 00000000..b0bc052f --- /dev/null +++ b/src/views/Profile/components/WatchSidebar/components/index.js @@ -0,0 +1,3 @@ +// 侧边栏子组件导出 +export { default as WatchlistPanel } from './WatchlistPanel'; +export { default as FollowingEventsPanel } from './FollowingEventsPanel'; diff --git a/src/views/Profile/components/WatchSidebar/index.js b/src/views/Profile/components/WatchSidebar/index.js new file mode 100644 index 00000000..422c8071 --- /dev/null +++ b/src/views/Profile/components/WatchSidebar/index.js @@ -0,0 +1,50 @@ +// 右侧边栏 - 关注股票和关注事件（两个独立模块） +import React from 'react'; +import { VStack } from '@chakra-ui/react'; +import GlassCard from '@components/GlassCard'; +import { WatchlistPanel, FollowingEventsPanel } from './components'; + +const WatchSidebar = ({ + watchlist = [], + realtimeQuotes = {}, + followingEvents = [], + onStockClick, + onEventClick, + onAddStock, + onAddEvent, +}) => { + return ( + + {/* 关注股票 - 独立模块 */} + + + + + {/* 关注事件 - 独立模块 */} + + + + + ); +}; + +export default WatchSidebar;