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;