From c639b418f0196f2500d6db211f3b617b72d79e70 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Mon, 22 Dec 2025 16:51:27 +0800
Subject: [PATCH] =?UTF-8?q?refactor(Center):=20=E9=87=8D=E6=9E=84=E4=B8=AA?=
 =?UTF-8?q?=E4=BA=BA=E4=B8=AD=E5=BF=83=E4=B8=BA=E5=B7=A6=E5=8F=B3=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 左侧自适应：投资仪表盘、规划中心、论坛
- 右侧固定200px：关注股票、关注事件
- 使用 THEME 黑金配色
- 宽度与导航栏保持一致

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/views/Dashboard/Center.js | 384 +++++-----------------------------
 1 file changed, 58 insertions(+), 326 deletions(-)

diff --git a/src/views/Dashboard/Center.js b/src/views/Dashboard/Center.js
index 11386c2f..4e855d82 100644
--- a/src/views/Dashboard/Center.js
+++ b/src/views/Dashboard/Center.js
@@ -61,9 +61,13 @@ import {
   FiAlertCircle,
   FiUsers,
 } from 'react-icons/fi';
-import MyFutureEvents from './components/MyFutureEvents';
 import InvestmentPlanningCenter from './components/InvestmentPlanningCenter';
 import { getEventDetailUrl } from '@/utils/idEncoder';
+import MarketDashboard from '@views/Profile/components/MarketDashboard';
+import StrategyCenter from '@views/Profile/components/StrategyCenter';
+import ForumCenter from '@views/Profile/components/ForumCenter';
+import WatchSidebar from '@views/Profile/components/WatchSidebar';
+import { THEME } from '@views/Profile/components/MarketDashboard/constants';
 
 export default function CenterDashboard() {
   const { user } = useAuth();
@@ -273,335 +277,63 @@ export default function CenterDashboard() {
   }
 
   return (
-    <Box bg={sectionBg} minH="100vh" overflowX="hidden">
-      <Box px={{ base: 3, md: 8 }} py={{ base: 4, md: 6 }} maxW="1400px" mx="auto">
-        {/* 主要内容区域 */}
-        <Grid templateColumns={{ base: '1fr', lg: 'repeat(3, 1fr)' }} gap={6} mb={8}>
-          {/* 左列：自选股票 */}
-          <VStack spacing={6} align="stretch" minW={0}>
-            <Card bg={cardBg} shadow="md" maxW="100%" height={{ base: 'auto', md: '600px' }} minH={{ base: '300px', md: '600px' }} display="flex" flexDirection="column">
-              <CardHeader pb={{ base: 2, md: 4 }}>
-                <Flex justify="space-between" align="center">
-                  <HStack>
-                    <Icon as={FiBarChart2} color="blue.500" boxSize={{ base: 4, md: 5 }} />
-                    <Heading size={{ base: 'sm', md: 'md' }}>自选股票</Heading>
-                    <Badge colorScheme="blue" variant="subtle">
-                      {watchlist.length}
-                    </Badge>
-                    {quotesLoading && <Spinner size="sm" color="blue.500" />}
-                  </HStack>
-                  <IconButton
-                    icon={<FiPlus />}
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => navigate('/stocks')}
-                    aria-label="添加自选股"
-                  />
-                </Flex>
-              </CardHeader>
-              <CardBody pt={0} flex="1" overflowY="auto">
-                {watchlist.length === 0 ? (
-                  <Center py={8}>
-                    <VStack spacing={3}>
-                      <Icon as={FiBarChart2} boxSize={12} color="gray.300" />
-                      <Text color={secondaryText} fontSize="sm">
-                        暂无自选股
-                      </Text>
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        colorScheme="blue"
-                        onClick={() => navigate('/stocks')}
-                      >
-                        添加自选股
-                      </Button>
-                    </VStack>
-                  </Center>
-                ) : (
-                  <VStack align="stretch" spacing={2}>
-                    {watchlist.slice(0, 10).map((stock) => (
-                      <LinkBox
-                        key={stock.stock_code}
-                        p={3}
-                        borderRadius="md"
-                        _hover={{ bg: hoverBg }}
-                        transition="all 0.2s"
-                        cursor="pointer"
-                      >
-                        <HStack justify="space-between">
-                          <VStack align="start" spacing={0}>
-                            <LinkOverlay
-                              as={Link}
-                              to={`/company/${stock.stock_code}`}
-                            >
-                              <Text fontWeight="medium" fontSize="sm">
-                                {stock.stock_name || stock.stock_code}
-                              </Text>
-                            </LinkOverlay>
-                            <HStack spacing={2}>
-                              <Badge variant="subtle" fontSize="xs">
-                                {stock.stock_code}
-                              </Badge>
-                              {realtimeQuotes[stock.stock_code] ? (
-                                <Badge
-                                  colorScheme={realtimeQuotes[stock.stock_code].change_percent > 0 ? 'red' : 'green'}
-                                  fontSize="xs"
-                                >
-                                  {realtimeQuotes[stock.stock_code].change_percent > 0 ? '+' : ''}
-                                  {realtimeQuotes[stock.stock_code].change_percent.toFixed(2)}%
-                                </Badge>
-                              ) : stock.change_percent ? (
-                                <Badge
-                                  colorScheme={stock.change_percent > 0 ? 'red' : 'green'}
-                                  fontSize="xs"
-                                >
-                                  {stock.change_percent > 0 ? '+' : ''}
-                                  {stock.change_percent}%
-                                </Badge>
-                              ) : null}
-                            </HStack>
-                          </VStack>
-                          <VStack align="end" spacing={0}>
-                            <Text fontWeight="bold" fontSize="sm">
-                              {realtimeQuotes[stock.stock_code]?.current_price?.toFixed(2) || stock.current_price || '--'}
-                            </Text>
-                            <Text fontSize="xs" color={secondaryText}>
-                              {realtimeQuotes[stock.stock_code]?.update_time || stock.industry || '未分类'}
-                            </Text>
-                          </VStack>
-                        </HStack>
-                      </LinkBox>
-                    ))}
-                    {watchlist.length > 10 && (
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => navigate('/stocks')}
-                      >
-                        查看全部 ({watchlist.length})
-                      </Button>
-                    )}
-                  </VStack>
-                )}
-              </CardBody>
-            </Card>
-          </VStack>
+    <Box bg={THEME.bg.primary} minH="100vh" overflowX="hidden">
+      <Box px={{ base: 3, md: 4 }} py={{ base: 4, md: 6 }} maxW="container.xl" mx="auto">
+        {/* 左右布局：左侧自适应，右侧固定200px */}
+        <Flex gap={4}>
+          {/* 左侧主内容区 */}
+          <Box flex={1} minW={0}>
+            {/* 市场概览仪表盘 */}
+            <Box mb={4}>
+              <MarketDashboard />
+            </Box>
 
-          {/* 中列：关注事件 */}
-          <VStack spacing={6} align="stretch" minW={0}>
-            {/* 关注事件 */}
-            <Card bg={cardBg} shadow="md" maxW="100%" height={{ base: 'auto', md: '600px' }} minH={{ base: '300px', md: '600px' }} display="flex" flexDirection="column">
-              <CardHeader pb={{ base: 2, md: 4 }}>
-                <Flex justify="space-between" align="center">
-                  <HStack>
-                    <Icon as={FiStar} color="yellow.500" boxSize={{ base: 4, md: 5 }} />
-                    <Heading size={{ base: 'sm', md: 'md' }}>关注事件</Heading>
-                    <Badge colorScheme="yellow" variant="subtle">
-                      {followingEvents.length}
-                    </Badge>
-                  </HStack>
-                  <IconButton
-                    icon={<FiPlus />}
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => navigate('/community')}
-                    aria-label="添加关注事件"
-                  />
-                </Flex>
-              </CardHeader>
-              <CardBody pt={0} flex="1" overflowY="auto">
-                {followingEvents.length === 0 ? (
-                  <Center py={8}>
-                    <VStack spacing={3}>
-                      <Icon as={FiActivity} boxSize={12} color="gray.300" />
-                      <Text color={secondaryText} fontSize="sm">
-                        暂无关注事件
-                      </Text>
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        colorScheme="blue"
-                        onClick={() => navigate('/community')}
-                      >
-                        探索事件
-                      </Button>
-                    </VStack>
-                  </Center>
-                ) : (
-                  <VStack align="stretch" spacing={3}>
-                    {followingEvents.slice(0, 5).map((event) => (
-                      <LinkBox
-                        key={event.id}
-                        p={4}
-                        borderRadius="lg"
-                        border="1px"
-                        borderColor={borderColor}
-                        _hover={{ shadow: 'md', transform: 'translateY(-2px)' }}
-                        transition="all 0.2s"
-                      >
-                        <VStack align="stretch" spacing={3}>
-                          <LinkOverlay
-                            as={Link}
-                            to={getEventDetailUrl(event.id)}
-                          >
-                            <Text fontWeight="medium" fontSize="md" noOfLines={2}>
-                              {event.title}
-                            </Text>
-                          </LinkOverlay>
+            {/* 投资规划中心 */}
+            <Box mb={4}>
+              <StrategyCenter />
+            </Box>
 
-                          {/* 事件标签 */}
-                          {event.tags && event.tags.length > 0 && (
-                            <Wrap>
-                              {event.tags.slice(0, 3).map((tag, idx) => (
-                                <WrapItem key={idx}>
-                                  <Tag size="sm" variant="subtle" colorScheme="blue">
-                                    <TagLabel>{tag}</TagLabel>
-                                  </Tag>
-                                </WrapItem>
-                              ))}
-                            </Wrap>
-                          )}
+            {/* 价值论坛 / 互动中心 */}
+            <Box mb={4}>
+              <ForumCenter />
+            </Box>
 
-                          {/* 事件统计 */}
-                          <HStack spacing={4} fontSize="sm" color={secondaryText}>
-                            {event.related_avg_chg !== undefined && event.related_avg_chg !== null && (
-                              <Badge
-                                colorScheme={event.related_avg_chg > 0 ? 'red' : 'green'}
-                                variant="subtle"
-                              >
-                                平均超额 {event.related_avg_chg > 0 ? '+' : ''}{Number(event.related_avg_chg).toFixed(2)}%
-                              </Badge>
-                            )}
-                            <HStack spacing={1}>
-                              <Icon as={FiUsers} />
-                              <Text>{event.follower_count || 0} 关注</Text>
-                            </HStack>
-                          </HStack>
+            {/* 投资规划中心（整合了日历、计划、复盘） */}
+            <Box>
+              <InvestmentPlanningCenter />
+            </Box>
+          </Box>
 
-                          {/* 事件信息 */}
-                          <Flex justify="space-between" align="center">
-                            <HStack spacing={2} fontSize="xs" color={secondaryText}>
-                              <Avatar
-                                size="xs"
-                                name={event.creator?.username || '系统'}
-                                src={event.creator?.avatar_url}
-                              />
-                              <Text>{event.creator?.username || '系统'}</Text>
-                              <Text>·</Text>
-                              <Text>{formatDate(event.created_at)}</Text>
-                            </HStack>
-                            {event.exceed_expectation_score && (
-                              <Badge
-                                colorScheme={event.exceed_expectation_score > 70 ? 'red' : 'orange'}
-                                variant="solid"
-                                fontSize="xs"
-                              >
-                                超预期 {event.exceed_expectation_score}
-                              </Badge>
-                            )}
-                          </Flex>
-                        </VStack>
-                      </LinkBox>
-                    ))}
-                    {followingEvents.length > 5 && (
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => navigate('/community')}
-                      >
-                        查看全部 ({followingEvents.length})
-                      </Button>
-                    )}
-                  </VStack>
-                )}
-              </CardBody>
-            </Card>
-
-          </VStack>
-
-          {/* 右列：我的评论 */}
-          <VStack spacing={6} align="stretch" minW={0}>
-            {/* 我的评论 */}
-            <Card bg={cardBg} shadow="md" maxW="100%" height={{ base: 'auto', md: '600px' }} minH={{ base: '300px', md: '600px' }} display="flex" flexDirection="column">
-              <CardHeader pb={{ base: 2, md: 4 }}>
-                <Flex justify="space-between" align="center">
-                  <HStack>
-                    <Icon as={FiMessageSquare} color="purple.500" boxSize={{ base: 4, md: 5 }} />
-                    <Heading size={{ base: 'sm', md: 'md' }}>我的评论</Heading>
-                    <Badge colorScheme="purple" variant="subtle">
-                      {eventComments.length}
-                    </Badge>
-                  </HStack>
-                </Flex>
-              </CardHeader>
-              <CardBody pt={0} flex="1" overflowY="auto">
-                {eventComments.length === 0 ? (
-                  <Center py={8}>
-                    <VStack spacing={3}>
-                      <Icon as={FiMessageSquare} boxSize={12} color="gray.300" />
-                      <Text color={secondaryText} fontSize="sm">
-                        暂无评论记录
-                      </Text>
-                      <Text color={secondaryText} fontSize="xs" textAlign="center">
-                        参与事件讨论，分享您的观点
-                      </Text>
-                    </VStack>
-                  </Center>
-                ) : (
-                  <VStack align="stretch" spacing={3}>
-                    {eventComments.slice(0, 5).map((comment) => (
-                      <Box
-                        key={comment.id}
-                        p={3}
-                        borderRadius="md"
-                        border="1px"
-                        borderColor={borderColor}
-                        _hover={{ bg: hoverBg }}
-                        transition="all 0.2s"
-                      >
-                        <VStack align="stretch" spacing={2}>
-                          <Text fontSize="sm" noOfLines={3}>
-                            {comment.content}
-                          </Text>
-                          <HStack justify="space-between" fontSize="xs" color={secondaryText} spacing={2}>
-                            <HStack flexShrink={0}>
-                              <Icon as={FiClock} />
-                              <Text>{formatDate(comment.created_at)}</Text>
-                            </HStack>
-                            {comment.event_title && (
-                              <Tooltip label={comment.event_title}>
-                                <Badge
-                                  variant="subtle"
-                                  fontSize="xs"
-                                  maxW={{ base: '120px', md: '180px' }}
-                                  overflow="hidden"
-                                  textOverflow="ellipsis"
-                                  whiteSpace="nowrap"
-                                >
-                                  {comment.event_title}
-                                </Badge>
-                              </Tooltip>
-                            )}
-                          </HStack>
-                        </VStack>
-                      </Box>
-                    ))}
-                    {eventComments.length > 5 && (
-                      <Text fontSize="sm" color={secondaryText} textAlign="center">
-                        共 {eventComments.length} 条评论
-                      </Text>
-                    )}
-                  </VStack>
-                )}
-              </CardBody>
-            </Card>
-          </VStack>
-        </Grid>
-
-        {/* 投资规划中心（整合了日历、计划、复盘） */}
-        <Box>
-          <InvestmentPlanningCenter />
-        </Box>
+          {/* 右侧固定宽度侧边栏 */}
+          <Box
+            w={{ base: '100%', md: '200px' }}
+            flexShrink={0}
+            display={{ base: 'none', md: 'block' }}
+            position="sticky"
+            top="80px"
+            alignSelf="flex-start"
+            maxH="calc(100vh - 100px)"
+            overflowY="auto"
+            css={{
+              '&::-webkit-scrollbar': { width: '4px' },
+              '&::-webkit-scrollbar-track': { background: 'transparent' },
+              '&::-webkit-scrollbar-thumb': {
+                background: 'rgba(212, 175, 55, 0.3)',
+                borderRadius: '2px',
+              },
+            }}
+          >
+            <WatchSidebar
+              watchlist={watchlist}
+              realtimeQuotes={realtimeQuotes}
+              followingEvents={followingEvents}
+              onStockClick={(stock) => navigate(`/company/${stock.stock_code}`)}
+              onEventClick={(event) => navigate(getEventDetailUrl(event.id))}
+              onAddStock={() => navigate('/stocks')}
+              onAddEvent={() => navigate('/community')}
+            />
+          </Box>
+        </Flex>
       </Box>
     </Box>
   );