pref: ErrorPage 功能增强

ErrorPage 新增功能:
 - 浮动动画效果 (keyframes)
 - 可配置错误原因列表 (reasons prop)
 - 技术详情折叠面板 (techDetails prop)
 - 可选搜索功能 (search prop)
 - 更丰富的导航选项

app.py

@@ -12232,12 +12232,19 @@ def get_market_statistics():
 
             available_dates = [str(row.TRADEDATE) for row in available_dates_result]
 
+            # 格式化日期为 YYYY-MM-DD
+            formatted_trade_date = trade_date.strftime('%Y-%m-%d') if hasattr(trade_date, 'strftime') else str(trade_date).split(' ')[0][:10]
+            formatted_available_dates = [
+                d.strftime('%Y-%m-%d') if hasattr(d, 'strftime') else str(d).split(' ')[0][:10]
+                for d in [row.TRADEDATE for row in available_dates_result]
+            ]
+
             return jsonify({
                 'success': True,
-                'trade_date': str(trade_date),
+                'trade_date': formatted_trade_date,
                 'summary': summary,
                 'details': list(statistics.values()),
-                'available_dates': available_dates
+                'available_dates': formatted_available_dates
             })
 
     except Exception as e:
@@ -12277,19 +12284,30 @@ def get_daily_top_concepts():
             top_concepts = []
 
             for concept in data.get('results', []):
+                # 保持与 /concept-api/search 相同的字段结构
                 top_concepts.append({
                     'concept_id': concept.get('concept_id'),
-                    'concept_name': concept.get('concept'),
+                    'concept': concept.get('concept'),  # 原始字段名
+                    'concept_name': concept.get('concept'),  # 兼容旧字段名
                     'description': concept.get('description'),
-                    'change_percent': concept.get('price_info', {}).get('avg_change_pct', 0),
                     'stock_count': concept.get('stock_count', 0),
-                    'stocks': concept.get('stocks', [])[:5]  # 只返回前5只股票
+                    'score': concept.get('score'),
+                    'match_type': concept.get('match_type'),
+                    'price_info': concept.get('price_info', {}),  # 完整的价格信息
+                    'change_percent': concept.get('price_info', {}).get('avg_change_pct', 0),  # 兼容旧字段
+                    'happened_times': concept.get('happened_times', []),  # 历史触发时间
+                    'stocks': concept.get('stocks', []),  # 返回完整股票列表
+                    'hot_score': concept.get('hot_score')
                 })
 
+            # 格式化日期为 YYYY-MM-DD
+            price_date = data.get('price_date', '')
+            formatted_date = str(price_date).split(' ')[0][:10] if price_date else ''
+
             return jsonify({
                 'success': True,
                 'data': top_concepts,
-                'trade_date': data.get('price_date'),
+                'trade_date': formatted_date,
                 'count': len(top_concepts)
             })
         else:

mcp_server.py

@@ -1999,7 +1999,7 @@ class MCPAgentIntegrated:
             model=self.kimi_model,
             messages=messages,
             temperature=1.0,  # Kimi 推荐
-            max_tokens=8192,  # 足够容纳 reasoning_content
+            max_tokens=128000,  # 足够容纳 reasoning_content
         )
 
         choice = response.choices[0]
@@ -2074,7 +2074,7 @@ class MCPAgentIntegrated:
                 model=self.deepmoney_model,
                 messages=messages,
                 temperature=0.7,
-                max_tokens=8192,
+                max_tokens=32784,
             )
 
             summary = response.choices[0].message.content
@@ -2268,7 +2268,7 @@ class MCPAgentIntegrated:
                 model="kimi-k2-turbo-preview",  # 使用非思考模型，更快
                 messages=messages,
                 temperature=0.7,
-                max_tokens=8192,  # 增加 token 限制以支持图表配置
+                max_tokens=128000,  # 增加 token 限制以支持图表配置
             )
 
             summary = response.choices[0].message.content
@@ -2355,7 +2355,7 @@ class MCPAgentIntegrated:
                 model=self.deepmoney_model,
                 messages=messages,
                 temperature=0.3,
-                max_tokens=4096,
+                max_tokens=32768,
             )
 
             title = response.choices[0].message.content.strip()
@@ -2450,7 +2450,7 @@ class MCPAgentIntegrated:
                     model=planning_model,
                     messages=messages,
                     temperature=1.0,
-                    max_tokens=8192,
+                    max_tokens=32768,
                     stream=True,  # 启用流式输出
                 )
 
@@ -2494,7 +2494,7 @@ class MCPAgentIntegrated:
                             model=self.deepmoney_model,
                             messages=messages,
                             temperature=0.7,
-                            max_tokens=8192,
+                            max_tokens=32768,
                         )
 
                         plan_content = fallback_response.choices[0].message.content
@@ -2690,7 +2690,7 @@ class MCPAgentIntegrated:
                         model="kimi-k2-turbo-preview",
                         messages=messages,
                         temperature=0.7,
-                        max_tokens=8192,
+                        max_tokens=32768,
                         stream=True,  # 启用流式输出
                     )
 
@@ -2724,7 +2724,7 @@ class MCPAgentIntegrated:
                                 model=self.deepmoney_model,
                                 messages=messages,
                                 temperature=0.7,
-                                max_tokens=8192,
+                                max_tokens=32768,
                             )
 
                             final_summary = fallback_response.choices[0].message.content
@@ -3676,7 +3676,7 @@ async def stream_role_response(
                 tool_choice="auto",
                 stream=False,  # 工具调用不使用流式
                 temperature=0.7,
-                max_tokens=8192,  # 增大 token 限制以避免输出被截断
+                max_tokens=32768,  # 增大 token 限制以避免输出被截断
             )
 
             assistant_message = response.choices[0].message

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
     />
     <meta name="theme-color" content="#000000" />
 

src/bytedesk-integration/components/BytedeskWidget.jsx

@@ -75,9 +75,11 @@ const BytedeskWidget = ({
                   const rightVal = parseInt(style.right);
                   const bottomVal = parseInt(style.bottom);
                   if (rightVal >= 0 && rightVal < 100 && bottomVal >= 0 && bottomVal < 100) {
-                    // H5 端设置按钮尺寸为 48x48（只执行一次）
+                    // H5 端设置按钮尺寸为 48x48 并降低 z-index（只执行一次）
                     if (isMobile && !el.dataset.bytedeskStyled) {
                       el.dataset.bytedeskStyled = 'true';
+                      // 降低 z-index，避免遮挡页面内的发布按钮等交互元素
+                      el.style.zIndex = 10;
                       const button = el.querySelector('button');
                       if (button) {
                         button.style.width = '48px';

src/bytedesk-integration/config/bytedesk.config.js

@@ -55,10 +55,17 @@ export const bytedeskConfig = {
     t: '1', // 类型: 1=人工客服, 2=机器人
     sid: 'df_wg_uid', // 工作组ID
   },
+
+  window: window.innerWidth <= 768 ? { 
+    width: window.innerWidth - 1, 
+    height: Math.min(window.innerWidth * 640/380, window.innerHeight - 200)
+  } : { width: 380, height: 640 }
 };
 
 /**
  * 获取Bytedesk配置（根据环境自动切换）
+ * - H5 端：宽度占满，高度根据宽度等比缩放
+ * - PC 端：固定宽高 380x640
  *
  * @returns {Object} Bytedesk配置对象
  */

src/components/ConceptStocksModal/index.tsx

@@ -0,0 +1,239 @@
+import React, { useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  Box,
+  HStack,
+  Text,
+  Icon,
+  Spinner,
+  useColorModeValue,
+  useBreakpointValue,
+} from '@chakra-ui/react';
+import { FaTable } from 'react-icons/fa';
+import marketService from '@services/marketService';
+import { logger } from '@utils/logger';
+
+// 股票信息类型
+interface StockInfo {
+  stock_code: string;
+  stock_name: string;
+  reason?: string;
+  change_pct?: number;
+  [key: string]: unknown;
+}
+
+// 概念信息类型
+export interface ConceptInfo {
+  concept_id?: string;
+  concept_name: string;
+  stock_count?: number;
+  stocks?: StockInfo[];
+  [key: string]: unknown;
+}
+
+// 行情数据类型
+interface MarketData {
+  stock_code: string;
+  close?: number;
+  change_percent?: number;
+  [key: string]: unknown;
+}
+
+interface ConceptStocksModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  concept: ConceptInfo | null;
+}
+
+const ConceptStocksModal: React.FC<ConceptStocksModalProps> = ({
+  isOpen,
+  onClose,
+  concept,
+}) => {
+  const navigate = useNavigate();
+
+  // 状态
+  const [stockMarketData, setStockMarketData] = useState<Record<string, MarketData>>({});
+  const [loadingStockData, setLoadingStockData] = useState(false);
+
+  // 颜色主题
+  const cardBg = useColorModeValue('white', '#1a1a1a');
+  const hoverBg = useColorModeValue('gray.50', '#2a2a2a');
+
+  // 响应式配置 - 添加 fallback 避免首次渲染时返回 undefined 导致弹窗异常
+  const isMobile = useBreakpointValue({ base: true, md: false }, { fallback: 'md' });
+  // H5 使用 xl 而非 full，配合 maxH 限制高度
+  const modalSize = useBreakpointValue({ base: 'xl', md: '4xl' }, { fallback: 'md' });
+  const tableMaxH = useBreakpointValue({ base: '45vh', md: '60vh' }, { fallback: 'md' });
+
+  // 批量获取股票行情数据
+  const fetchStockMarketData = useCallback(async (stocks: StockInfo[]) => {
+    if (!stocks || stocks.length === 0) return;
+
+    setLoadingStockData(true);
+    const newMarketData: Record<string, MarketData> = {};
+
+    try {
+      const batchSize = 5;
+      for (let i = 0; i < stocks.length; i += batchSize) {
+        const batch = stocks.slice(i, i + batchSize);
+        const promises = batch.map(async (stock) => {
+          if (!stock.stock_code) return null;
+          const seccode = stock.stock_code.substring(0, 6);
+          try {
+            const response = await marketService.getTradeData(seccode, 1);
+            if (response.success && response.data?.length > 0) {
+              const latestData = response.data[response.data.length - 1];
+              return { stock_code: stock.stock_code, ...latestData };
+            }
+          } catch (error) {
+            logger.warn('ConceptStocksModal', '获取股票行情失败', { stockCode: seccode });
+          }
+          return null;
+        });
+
+        const results = await Promise.all(promises);
+        results.forEach((result) => {
+          if (result) newMarketData[result.stock_code] = result;
+        });
+      }
+      setStockMarketData(newMarketData);
+    } catch (error) {
+      logger.error('ConceptStocksModal', 'fetchStockMarketData', error);
+    } finally {
+      setLoadingStockData(false);
+    }
+  }, []);
+
+  // 弹窗打开时加载数据
+  React.useEffect(() => {
+    if (isOpen && concept?.stocks) {
+      setStockMarketData({});
+      fetchStockMarketData(concept.stocks);
+    }
+  }, [isOpen, concept, fetchStockMarketData]);
+
+  // 点击股票行
+  const handleStockClick = (stockCode: string) => {
+    navigate(`/company?scode=${stockCode}`);
+    onClose();
+  };
+
+  const stocks = concept?.stocks || [];
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size={modalSize}
+      scrollBehavior="inside"
+      isCentered
+    >
+      <ModalOverlay />
+      <ModalContent bg={cardBg} maxH={isMobile ? '70vh' : undefined}>
+        <ModalHeader bg="purple.500" color="white" borderTopRadius="md">
+          <HStack>
+            <Icon as={FaTable} />
+            <Text>{concept?.concept_name} - 相关个股</Text>
+          </HStack>
+        </ModalHeader>
+        <ModalCloseButton color="white" />
+
+        <ModalBody py={6}>
+          {stocks.length === 0 ? (
+            <Text color="gray.500" textAlign="center">暂无相关股票数据</Text>
+          ) : (
+            <Box>
+              {loadingStockData && (
+                <HStack justify="center" mb={4}>
+                  <Spinner size="sm" color="purple.500" />
+                  <Text fontSize="sm" color="gray.500">正在获取行情数据...</Text>
+                </HStack>
+              )}
+
+              <TableContainer maxH={tableMaxH} overflowY="auto" overflowX="auto">
+                <Table variant="simple" size="sm" minW={isMobile ? '600px' : undefined}>
+                  <Thead position="sticky" top={0} bg={cardBg} zIndex={1}>
+                    <Tr>
+                      <Th whiteSpace="nowrap">股票名称</Th>
+                      <Th whiteSpace="nowrap">股票代码</Th>
+                      <Th isNumeric whiteSpace="nowrap">现价</Th>
+                      <Th isNumeric whiteSpace="nowrap">当日涨跌幅</Th>
+                      <Th whiteSpace="nowrap" minW="200px">板块原因</Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {stocks.map((stock, idx) => {
+                      const marketData = stockMarketData[stock.stock_code];
+                      const changePercent = marketData?.change_percent;
+
+                      return (
+                        <Tr
+                          key={idx}
+                          _hover={{ bg: hoverBg }}
+                          cursor="pointer"
+                          onClick={() => handleStockClick(stock.stock_code)}
+                        >
+                          <Td color="blue.500" fontWeight="medium">
+                            {stock.stock_name}
+                          </Td>
+                          <Td>{stock.stock_code}</Td>
+                          <Td isNumeric>
+                            {loadingStockData ? (
+                              <Spinner size="xs" />
+                            ) : marketData?.close ? (
+                              `¥${marketData.close.toFixed(2)}`
+                            ) : (
+                              '-'
+                            )}
+                          </Td>
+                          <Td
+                            isNumeric
+                            fontWeight="bold"
+                            color={
+                              changePercent && changePercent > 0
+                                ? 'red.500'
+                                : changePercent && changePercent < 0
+                                ? 'green.500'
+                                : 'gray.500'
+                            }
+                          >
+                            {loadingStockData ? (
+                              <Spinner size="xs" />
+                            ) : changePercent !== undefined ? (
+                              `${changePercent > 0 ? '+' : ''}${changePercent.toFixed(2)}%`
+                            ) : (
+                              '-'
+                            )}
+                          </Td>
+                          <Td fontSize="xs" color="gray.600" maxW="300px">
+                            <Text noOfLines={2}>{stock.reason || '-'}</Text>
+                          </Td>
+                        </Tr>
+                      );
+                    })}
+                  </Tbody>
+                </Table>
+              </TableContainer>
+            </Box>
+          )}
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ConceptStocksModal;

src/components/ErrorPage/README.md

@@ -0,0 +1,335 @@
+# ErrorPage 通用错误页面组件
+
+通用错误页面组件，用于显示加载失败、网络错误、404 等异常状态。
+
+**设计风格**：黑色背景 (`#1A202C`) + 金色边框 (`#D4A574`)
+
+## 效果预览
+
+```
+┌─────────────────────────────────────┐
+│           ╭──────────╮              │
+│           │    ⚠️    │  (金色圆形)  │
+│           ╰──────────╯              │
+│                                      │
+│          事件走丢了                   │
+│          ID: ZXY-101                │
+│                                      │
+│  ┌──────────────────────────────┐   │
+│  │ 抱歉，我们找不到您请求的事件... │   │
+│  │                              │   │
+│  │ 🔍 事件ID输入错误             │   │
+│  │    请检查URL中的事件ID是否正确 │   │
+│  │                              │   │
+│  │ 🗑️ 该事件已被删除或下架       │   │
+│  │    该事件可能因过期而被移除    │   │
+│  │                              │   │
+│  │ 🔄 系统暂时无法访问该事件     │   │
+│  │    请稍后重试或联系技术支持    │   │
+│  │                              │   │
+│  │ [查看技术信息 ▼]              │   │
+│  └──────────────────────────────┘   │
+│                                      │
+│       [返回]    [重试]               │
+│                                      │
+│        点击右下角联系客服            │
+└─────────────────────────────────────┘
+```
+
+## 快速开始
+
+### 基础用法
+
+```tsx
+import ErrorPage from '@/components/ErrorPage';
+
+// 最简单的用法 - 使用所有默认配置
+<ErrorPage />
+
+// 自定义标题和描述
+<ErrorPage
+  title="事件走丢了"
+  description="抱歉，我们找不到您请求的事件"
+/>
+```
+
+### 完整配置示例
+
+```tsx
+<ErrorPage
+  // 基础配置
+  title="事件走丢了"
+  subtitle="ID: ZXY-101"
+  description="抱歉，我们找不到您请求的事件，这可能是因为："
+
+  // 错误原因列表
+  reasons={[
+    {
+      icon: '🔍',
+      title: '事件ID输入错误',
+      description: '请检查URL中的事件ID是否正确',
+    },
+    {
+      icon: '🗑️',
+      title: '该事件已被删除或下架',
+      description: '该事件可能因过期或内容调整而被移除',
+    },
+    {
+      icon: '🔄',
+      title: '系统暂时无法访问该事件',
+      description: '请稍后重试或联系技术支持',
+    },
+  ]}
+
+  // 技术详情（可展开）
+  techDetails={{
+    requestUrl: 'http://localhost:3000/event-detail?id=ZXY-101',
+    errorType: '404 - Event Not Found',
+    errorMessage: 'Unexpected token...',
+    timestamp: '2024-01-15 14:30:22',
+    relatedId: '101',
+  }}
+
+  // 操作按钮
+  showBack
+  showRetry
+  onRetry={() => window.location.reload()}
+  showHome
+  homePath="/community"
+
+  // 网络状态检查
+  checkOffline
+
+  // 错误上报
+  onErrorReport={(info) => {
+    analytics.track('error_page_view', info);
+  }}
+/>
+```
+
+## API 参考
+
+### 基础配置
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `title` | `string` | `'加载失败'` | 错误标题 |
+| `subtitle` | `string` | - | 错误副标题（如显示错误 ID） |
+| `description` | `string` | `'我们无法找到您请求的内容，这可能是因为：'` | 错误描述信息 |
+| `detail` | `string` | - | 详细信息值（与 subtitle 二选一） |
+| `detailLabel` | `string` | `'ID'` | 详细信息标签 |
+
+### 错误原因配置
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `reasons` | `ErrorReasonItem[]` | 默认 3 条 | 错误原因列表 |
+
+**ErrorReasonItem 结构：**
+
+```typescript
+interface ErrorReasonItem {
+  icon: string | React.ReactNode;  // 图标（emoji 或组件）
+  title: string;                    // 原因标题
+  description: string;              // 原因描述
+}
+```
+
+**默认错误原因：**
+
+```typescript
+[
+  { icon: '🔍', title: 'ID 可能输入错误', description: '请检查 URL 中的 ID 是否正确' },
+  { icon: '🗑️', title: '内容可能已被删除', description: '该内容可能因过期或调整而被下架' },
+  { icon: '🔄', title: '系统暂时无法访问', description: '请稍后重试或联系技术支持' },
+]
+```
+
+### 技术详情配置
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `techDetails` | `TechDetails` | - | 技术详情（可展开查看） |
+
+**TechDetails 结构：**
+
+```typescript
+interface TechDetails {
+  requestUrl?: string;              // 请求 URL
+  errorType?: string;               // 错误类型
+  errorMessage?: string;            // 错误信息
+  timestamp?: string;               // 时间戳
+  relatedId?: string;               // 相关 ID
+  customFields?: Record<string, string>;  // 自定义字段
+}
+```
+
+### 操作按钮配置
+
+#### 快捷配置
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `showBack` | `boolean` | `false` | 是否显示返回按钮 |
+| `onBack` | `() => void` | `history.back()` | 返回回调 |
+| `showRetry` | `boolean` | `false` | 是否显示重试按钮 |
+| `onRetry` | `() => void` | - | 重试回调 |
+| `showHome` | `boolean` | `false` | 是否显示返回首页按钮 |
+| `homePath` | `string` | `'/'` | 首页路径 |
+
+#### 自定义按钮
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `actions` | `ActionButton[]` | - | 自定义操作按钮列表（覆盖快捷配置） |
+
+**ActionButton 结构：**
+
+```typescript
+interface ActionButton {
+  label: string;                               // 按钮文本
+  icon?: string;                               // 按钮图标（可选）
+  variant?: 'primary' | 'secondary' | 'outline';  // 按钮类型
+  onClick?: () => void;                        // 点击回调
+  href?: string;                               // 跳转链接（与 onClick 二选一）
+}
+```
+
+**示例：**
+
+```tsx
+<ErrorPage
+  actions={[
+    { label: '刷新页面', variant: 'primary', onClick: () => location.reload() },
+    { label: '返回列表', variant: 'outline', href: '/events' },
+  ]}
+/>
+```
+
+### 布局配置
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `fullScreen` | `boolean` | `true` | 是否全屏显示 |
+| `maxWidth` | `string` | `'500px'` | 最大宽度 |
+
+### 功能增强
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `checkOffline` | `boolean` | `true` | 是否检查网络状态并显示离线提示 |
+| `enableBuiltInReport` | `boolean` | `true` | 是否启用内置 PostHog 错误上报 |
+| `onErrorReport` | `(errorInfo: Record<string, unknown>) => void` | - | 自定义错误上报回调（与内置上报同时生效） |
+
+**内置错误上报**：
+
+组件默认会自动上报错误到 PostHog，上报事件名为 `error_page_view`，包含以下数据：
+
+```typescript
+{
+  error_title: string;       // 错误标题
+  error_detail: string;      // 详细信息（如事件ID）
+  error_type: string;        // 错误类型（如 "404 - Event Not Found"）
+  error_message: string;     // 错误信息
+  page_url: string;          // 当前页面 URL
+  referrer: string;          // 来源页面
+  user_agent: string;        // 用户代理
+  event_id: string;          // 相关 ID
+  timestamp: string;         // 时间戳（自动添加）
+}
+```
+
+**禁用内置上报：**
+
+```tsx
+<ErrorPage enableBuiltInReport={false} />
+```
+
+**自定义上报回调示例：**
+
+```tsx
+<ErrorPage
+  onErrorReport={(errorInfo) => {
+    // 自定义上报逻辑（与内置 PostHog 上报同时生效）
+    customAnalytics.track('custom_error_event', errorInfo);
+  }}
+/>
+```
+
+## 场景示例
+
+### 1. 事件详情 404 页面
+
+```tsx
+<ErrorPage
+  title="事件走丢了"
+  subtitle={`ID: ${eventId}`}
+  description="抱歉，我们找不到您请求的事件，这可能是因为："
+  reasons={[
+    { icon: '🔍', title: '事件ID输入错误', description: '请检查URL中的事件ID是否正确' },
+    { icon: '🗑️', title: '该事件已被删除或下架', description: '该事件可能因过期或内容调整而被移除' },
+    { icon: '🔄', title: '系统暂时无法访问该事件', description: '请稍后重试或联系技术支持' },
+  ]}
+  techDetails={{
+    requestUrl: window.location.href,
+    errorType: '404 - Event Not Found',
+    errorMessage: error.message,
+    timestamp: new Date().toISOString(),
+    relatedId: eventId,
+  }}
+  showRetry
+  onRetry={() => window.location.reload()}
+  showBack
+  showHome
+  homePath="/community"
+/>
+```
+
+### 2. 网络错误页面
+
+```tsx
+<ErrorPage
+  title="网络连接失败"
+  description="无法连接到服务器，请检查网络后重试"
+  reasons={[
+    { icon: '📶', title: '网络连接中断', description: '请检查您的网络连接是否正常' },
+    { icon: '🔧', title: '服务器维护中', description: '服务器可能正在进行维护，请稍后重试' },
+  ]}
+  showRetry
+  onRetry={() => window.location.reload()}
+/>
+```
+
+### 3. 简洁模式（无原因列表）
+
+```tsx
+<ErrorPage
+  title="加载失败"
+  description="数据加载失败，请重试"
+  reasons={[]}  // 不显示原因列表
+  fullScreen={false}
+  maxWidth="400px"
+  showRetry
+  onRetry={refetch}
+/>
+```
+
+## 类型导出
+
+组件导出以下 TypeScript 类型，方便外部使用：
+
+```typescript
+import ErrorPage, {
+  ErrorPageProps,
+  ErrorReasonItem,
+  ActionButton,
+  TechDetails,
+} from '@/components/ErrorPage';
+```
+
+## 设计说明
+
+- **配色**：黑色背景 (`#1A202C`) + 金色边框/按钮 (`#D4A574`)
+- **图标**：金色圆形背景 (50px) + 黑色感叹号
+- **布局**：居中卡片式布局，最大宽度 500px
+- **底部提示**："点击右下角联系客服"（纯文本，无链接）

src/components/ErrorPage/index.tsx

@@ -0,0 +1,440 @@
+/**
+ * ErrorPage - 通用错误页面组件
+ * 用于显示加载失败、网络错误、404等异常状态
+ * 设计风格：黑色背景 + 金色边框
+ */
+
+import React from 'react';
+import {
+  Box,
+  Text,
+  Button,
+  VStack,
+  HStack,
+  Collapse,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import { trackEventAsync } from '@/lib/posthog';
+
+// 主题色（保持原来的配色）
+const GOLD_COLOR = '#D4A574';
+const BG_COLOR = '#1A202C';
+
+// 错误原因项配置
+export interface ErrorReasonItem {
+  /** 图标（emoji 或自定义组件） */
+  icon: string | React.ReactNode;
+  /** 原因标题 */
+  title: string;
+  /** 原因描述 */
+  description: string;
+}
+
+// 操作按钮配置
+export interface ActionButton {
+  /** 按钮文本 */
+  label: string;
+  /** 按钮图标（可选，放在文本前） */
+  icon?: string;
+  /** 按钮类型：primary（主要）、secondary（次要）、outline（轮廓） */
+  variant?: 'primary' | 'secondary' | 'outline';
+  /** 点击回调 */
+  onClick?: () => void;
+  /** 跳转链接（与 onClick 二选一） */
+  href?: string;
+}
+
+// 技术详情配置
+export interface TechDetails {
+  /** 请求 URL */
+  requestUrl?: string;
+  /** 错误类型 */
+  errorType?: string;
+  /** 错误信息 */
+  errorMessage?: string;
+  /** 时间戳 */
+  timestamp?: string;
+  /** 相关 ID */
+  relatedId?: string;
+  /** 自定义字段 */
+  customFields?: Record<string, string>;
+}
+
+// 完整的 ErrorPage 配置
+export interface ErrorPageProps {
+  // ===== 基础配置 =====
+  /** 错误标题 */
+  title?: string;
+  /** 错误副标题（如显示错误 ID） */
+  subtitle?: string;
+  /** 错误描述信息 */
+  description?: string;
+
+  // ===== 详细信息 =====
+  /** 详细信息值 */
+  detail?: string;
+  /** 详细信息标签 */
+  detailLabel?: string;
+
+  // ===== 错误原因列表 =====
+  /** 错误原因列表 */
+  reasons?: ErrorReasonItem[];
+
+  // ===== 技术详情 =====
+  /** 技术详情（可展开查看） */
+  techDetails?: TechDetails;
+
+  // ===== 操作按钮 =====
+  /** 自定义操作按钮列表 */
+  actions?: ActionButton[];
+  /** 快捷配置：是否显示重试按钮 */
+  showRetry?: boolean;
+  /** 重试回调 */
+  onRetry?: () => void;
+  /** 快捷配置：是否显示返回按钮 */
+  showBack?: boolean;
+  /** 返回回调 */
+  onBack?: () => void;
+  /** 快捷配置：是否显示返回首页按钮 */
+  showHome?: boolean;
+  /** 首页路径 */
+  homePath?: string;
+
+  // ===== 布局配置 =====
+  /** 是否全屏显示 */
+  fullScreen?: boolean;
+  /** 最大宽度 */
+  maxWidth?: string;
+
+  // ===== 网络状态 =====
+  /** 是否检查网络状态并显示离线提示 */
+  checkOffline?: boolean;
+
+  // ===== 错误上报 =====
+  /** 是否启用内置 PostHog 错误上报（默认 true） */
+  enableBuiltInReport?: boolean;
+  /** 自定义错误上报回调（可选，与内置上报同时生效） */
+  onErrorReport?: (errorInfo: Record<string, unknown>) => void;
+}
+
+// 默认错误原因
+const DEFAULT_REASONS: ErrorReasonItem[] = [
+  {
+    icon: '🔍',
+    title: 'ID 可能输入错误',
+    description: '请检查 URL 中的 ID 是否正确',
+  },
+  {
+    icon: '🗑️',
+    title: '内容可能已被删除',
+    description: '该内容可能因过期或调整而被下架',
+  },
+  {
+    icon: '🔄',
+    title: '系统暂时无法访问',
+    description: '请稍后重试或联系技术支持',
+  },
+];
+
+const ErrorPage: React.FC<ErrorPageProps> = ({
+  title = '加载失败',
+  subtitle,
+  description = '我们无法找到您请求的内容，这可能是因为：',
+  detail,
+  detailLabel = 'ID',
+  reasons = DEFAULT_REASONS,
+  techDetails,
+  actions,
+  showRetry = false,
+  onRetry,
+  showBack = false,
+  onBack,
+  showHome = false,
+  homePath = '/',
+  fullScreen = true,
+  maxWidth = '500px',
+  checkOffline = true,
+  enableBuiltInReport = true,
+  onErrorReport,
+}) => {
+  const navigate = useNavigate();
+  const { isOpen: isTechOpen, onToggle: onTechToggle } = useDisclosure();
+  const [isOffline, setIsOffline] = React.useState(!navigator.onLine);
+
+  // 监听网络状态
+  React.useEffect(() => {
+    if (!checkOffline) return;
+
+    const handleOnline = () => setIsOffline(false);
+    const handleOffline = () => setIsOffline(true);
+
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, [checkOffline]);
+
+  // 错误上报
+  React.useEffect(() => {
+    const errorInfo = {
+      error_title: title,
+      error_detail: detail,
+      error_type: techDetails?.errorType,
+      error_message: techDetails?.errorMessage,
+      page_url: window.location.href,
+      referrer: document.referrer,
+      user_agent: navigator.userAgent,
+      event_id: techDetails?.relatedId,
+    };
+
+    // 内置 PostHog 上报（异步，不阻塞渲染）
+    if (enableBuiltInReport) {
+      trackEventAsync('error_page_view', errorInfo);
+    }
+
+    // 自定义上报回调（保持兼容）
+    if (onErrorReport) {
+      onErrorReport({
+        ...errorInfo,
+        timestamp: new Date().toISOString(),
+        ...techDetails,
+      });
+    }
+  }, [enableBuiltInReport, onErrorReport, title, detail, techDetails]);
+
+  // 构建操作按钮列表
+  const buildActionButtons = (): ActionButton[] => {
+    if (actions) return actions;
+
+    const buttons: ActionButton[] = [];
+
+    if (showBack) {
+      buttons.push({
+        label: '返回',
+        variant: 'outline',
+        onClick: onBack || (() => window.history.back()),
+      });
+    }
+
+    if (showRetry && onRetry) {
+      buttons.push({
+        label: '重试',
+        variant: 'primary',
+        onClick: onRetry,
+      });
+    }
+
+    if (showHome) {
+      buttons.push({
+        label: '返回首页',
+        variant: 'outline',
+        onClick: () => navigate(homePath),
+      });
+    }
+
+    return buttons;
+  };
+
+  // 获取按钮样式（保持原来的金色风格）
+  const getButtonStyle = (variant: ActionButton['variant']) => {
+    switch (variant) {
+      case 'primary':
+        return {
+          bg: GOLD_COLOR,
+          color: BG_COLOR,
+          border: '1px solid',
+          borderColor: GOLD_COLOR,
+          _hover: { bg: '#C49A6C' },
+        };
+      case 'outline':
+      default:
+        return {
+          variant: 'outline' as const,
+          borderColor: GOLD_COLOR,
+          color: GOLD_COLOR,
+          _hover: { bg: GOLD_COLOR, color: 'black' },
+        };
+    }
+  };
+
+  const actionButtons = buildActionButtons();
+  const hasButtons = actionButtons.length > 0;
+
+  return (
+    <Box
+      h={fullScreen ? '100vh' : '60vh'}
+      w="100%"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Box
+        bg={BG_COLOR}
+        border="1px solid"
+        borderColor={GOLD_COLOR}
+        borderRadius="lg"
+        p={8}
+        maxW={maxWidth}
+        w="90%"
+        textAlign="center"
+      >
+        {/* 金色圆形感叹号图标 */}
+        <Box mx="auto" mb={4}>
+          <ExclamationCircleOutlined style={{ fontSize: '40px', color: GOLD_COLOR }} />
+        </Box>
+
+        {/* 金色标题 */}
+        <Text color={GOLD_COLOR} fontSize="lg" fontWeight="medium" mb={2}>
+          {title}
+        </Text>
+
+        {/* 副标题（ID 显示） */}
+        {(subtitle || detail) && (
+          <Text
+            color="gray.400"
+            fontSize="sm"
+            fontFamily="monospace"
+            mb={2}
+          >
+            {subtitle || `${detailLabel}: ${detail}`}
+          </Text>
+        )}
+
+        {/* 离线提示 */}
+        {checkOffline && isOffline && (
+          <Box
+            bg="orange.900"
+            border="1px solid"
+            borderColor="orange.600"
+            borderRadius="md"
+            p={2}
+            mb={4}
+          >
+            <Text color="orange.300" fontSize="sm">
+              当前处于离线状态，请检查网络连接
+            </Text>
+          </Box>
+        )}
+
+        {/* 错误原因列表 */}
+        {reasons.length > 0 && (
+          <Box
+            bg="gray.800"
+            borderRadius="md"
+            p={4}
+            mb={4}
+            textAlign="left"
+          >
+            <Text color="gray.400" fontSize="sm" mb={3}>
+              {description}
+            </Text>
+
+            <VStack spacing={3} align="stretch">
+              {reasons.map((reason, index) => (
+                <HStack key={index} spacing={3} align="flex-start">
+                  <Text fontSize="lg" flexShrink={0}>
+                    {typeof reason.icon === 'string' ? reason.icon : reason.icon}
+                  </Text>
+                  <Box>
+                    <Text fontWeight="500" color="gray.300" fontSize="sm">
+                      {reason.title}
+                    </Text>
+                    <Text fontSize="xs" color="gray.500">
+                      {reason.description}
+                    </Text>
+                  </Box>
+                </HStack>
+              ))}
+            </VStack>
+          </Box>
+        )}
+
+        {/* 技术详情（可展开） */}
+        {techDetails && (
+          <Box mb={4}>
+            <Button
+              variant="ghost"
+              size="sm"
+              color="gray.500"
+              rightIcon={isTechOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+              onClick={onTechToggle}
+              _hover={{ bg: 'transparent', color: 'gray.400' }}
+            >
+              查看技术信息
+            </Button>
+            <Collapse in={isTechOpen}>
+              <Box
+                mt={2}
+                p={3}
+                bg="gray.800"
+                borderRadius="md"
+                fontFamily="monospace"
+                fontSize="xs"
+                color="gray.500"
+                textAlign="left"
+                overflowX="auto"
+              >
+                {techDetails.requestUrl && (
+                  <Text>请求URL: {techDetails.requestUrl}</Text>
+                )}
+                {techDetails.errorType && (
+                  <Text>错误类型: {techDetails.errorType}</Text>
+                )}
+                {techDetails.errorMessage && (
+                  <Text>错误信息: {techDetails.errorMessage}</Text>
+                )}
+                {techDetails.timestamp && (
+                  <Text>时间戳: {techDetails.timestamp}</Text>
+                )}
+                {techDetails.relatedId && (
+                  <Text>相关ID: {techDetails.relatedId}</Text>
+                )}
+                {techDetails.customFields &&
+                  Object.entries(techDetails.customFields).map(([key, value]) => (
+                    <Text key={key}>
+                      {key}: {value}
+                    </Text>
+                  ))}
+              </Box>
+            </Collapse>
+          </Box>
+        )}
+
+        {/* 按钮组 */}
+        {hasButtons && (
+          <HStack justify="center" spacing={3} mt={4}>
+            {actionButtons.map((btn, index) => (
+              <Button
+                key={index}
+                size="sm"
+                px={6}
+                fontWeight="medium"
+                {...getButtonStyle(btn.variant)}
+                onClick={btn.href ? () => navigate(btn.href!) : btn.onClick}
+              >
+                {btn.icon && <Text as="span" mr={2}>{btn.icon}</Text>}
+                {btn.label}
+              </Button>
+            ))}
+          </HStack>
+        )}
+
+        {/* 底部帮助提示 */}
+        <Text fontSize="xs" color="gray.500" mt={6}>
+          点击右下角
+          <Text as="span" color={GOLD_COLOR} fontWeight="medium">
+            联系客服
+          </Text>
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+export default ErrorPage;

src/components/Navbars/HomeNavbar.js

@@ -161,7 +161,7 @@ export default function HomeNavbar() {
                 borderColor={navbarBorder}
                 py={{ base: 2, md: 3 }}
             >
-                <Container maxW="container.xl" px={{ base: 3, md: 4 }}>
+                <Container maxW="container.xl" px={{ base: 3, md: 4 }} style={{ paddingRight: 'max(16px, env(safe-area-inset-right))' }}>
                     <Flex justify="space-between" align="center">
                         {/* Logo - 价小前投研 */}
                         <BrandLogo />

src/components/Navbars/components/FeatureMenus/FollowingEventsMenu.js

@@ -21,6 +21,7 @@ import { ChevronDownIcon } from '@chakra-ui/icons';
 import { FiCalendar } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
 import { useFollowingEvents } from '../../../../hooks/useFollowingEvents';
+import { getEventDetailUrl } from '@/utils/idEncoder';
 
 /**
  * 关注事件下拉菜单组件
@@ -86,7 +87,7 @@ const FollowingEventsMenu = memo(() => {
                                         <MenuItem
                                             key={ev.id}
                                             _hover={{ bg: 'gray.50' }}
-                                            onClick={() => navigate(`/event-detail/${ev.id}`)}
+                                            onClick={() => navigate(getEventDetailUrl(ev.id))}
                                         >
                                             <HStack justify="space-between" w="100%">
                                                 <Box flex={1} minW={0}>

src/components/Navbars/components/Navigation/DesktopNav.js

@@ -61,8 +61,8 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
                     bg={isActive(['/community', '/concepts']) ? 'blue.600' : 'transparent'}
                     color={isActive(['/community', '/concepts']) ? 'white' : 'inherit'}
                     fontWeight={isActive(['/community', '/concepts']) ? 'bold' : 'normal'}
-                    borderLeft={isActive(['/community', '/concepts']) ? '3px solid' : 'none'}
-                    borderColor="white"
+                    border={isActive(['/community', '/concepts']) ? '2px solid' : 'none'}
+                    borderColor={isActive(['/community', '/concepts']) ? 'blue.300' : 'transparent'}
                     borderRadius="md"
                     _hover={{ bg: isActive(['/community', '/concepts']) ? 'blue.700' : 'gray.50' }}
                     onMouseEnter={highFreqMenu.handleMouseEnter}
@@ -128,8 +128,8 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
                     bg={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.600' : 'transparent'}
                     color={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'white' : 'inherit'}
                     fontWeight={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'bold' : 'normal'}
-                    borderLeft={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? '3px solid' : 'none'}
-                    borderColor="white"
+                    border={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? '2px solid' : 'none'}
+                    borderColor={isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.300' : 'transparent'}
                     borderRadius="md"
                     _hover={{ bg: isActive(['/limit-analyse', '/stocks', '/trading-simulation']) ? 'blue.700' : 'gray.50' }}
                     onMouseEnter={marketReviewMenu.handleMouseEnter}
@@ -204,8 +204,8 @@ const DesktopNav = memo(({ isAuthenticated, user }) => {
                     bg={isActive(['/agent-chat', '/value-forum']) ? 'blue.600' : 'transparent'}
                     color={isActive(['/agent-chat', '/value-forum']) ? 'white' : 'inherit'}
                     fontWeight={isActive(['/agent-chat', '/value-forum']) ? 'bold' : 'normal'}
-                    borderLeft={isActive(['/agent-chat', '/value-forum']) ? '3px solid' : 'none'}
-                    borderColor="white"
+                    border={isActive(['/agent-chat', '/value-forum']) ? '2px solid' : 'none'}
+                    borderColor={isActive(['/agent-chat', '/value-forum']) ? 'blue.300' : 'transparent'}
                     borderRadius="md"
                     _hover={{ bg: isActive(['/agent-chat', '/value-forum']) ? 'blue.700' : 'gray.50' }}
                     onMouseEnter={agentCommunityMenu.handleMouseEnter}

src/components/StockChart/KLineChartModal.tsx

@@ -1,17 +1,12 @@
 // src/components/StockChart/KLineChartModal.tsx - K线图弹窗组件
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { createPortal } from 'react-dom';
+import { useSelector } from 'react-redux';
 import * as echarts from 'echarts';
 import dayjs from 'dayjs';
 import { stockService } from '@services/eventService';
-
-/**
- * 股票信息
- */
-interface StockInfo {
-  stock_code: string;
-  stock_name?: string;
-}
+import { selectIsMobile } from '@store/slices/deviceSlice';
+import { StockInfo } from './types';
 
 /**
  * KLineChartModal 组件 Props
@@ -83,6 +78,9 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
   const [earliestDate, setEarliestDate] = useState<string | null>(null);
   const [totalDaysLoaded, setTotalDaysLoaded] = useState(0);
 
+  // H5 响应式适配
+  const isMobile = useSelector(selectIsMobile);
+
   // 调试日志
   console.log('[KLineChartModal] 渲染状态:', {
     isOpen,
@@ -296,16 +294,16 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
       }
     }
 
-    // 图表配置
+    // 图表配置（H5 响应式）
     const option: echarts.EChartsOption = {
       backgroundColor: '#1a1a1a',
       title: {
         text: `${stock?.stock_name || stock?.stock_code} - 日K线`,
         left: 'center',
-        top: 10,
+        top: isMobile ? 5 : 10,
         textStyle: {
           color: '#e0e0e0',
-          fontSize: 18,
+          fontSize: isMobile ? 14 : 18,
           fontWeight: 'bold',
         },
       },
@@ -370,16 +368,16 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
       },
       grid: [
         {
-          left: '5%',
-          right: '5%',
-          top: '12%',
-          height: '60%',
+          left: isMobile ? '12%' : '5%',
+          right: isMobile ? '5%' : '5%',
+          top: isMobile ? '12%' : '12%',
+          height: isMobile ? '55%' : '60%',
         },
         {
-          left: '5%',
-          right: '5%',
-          top: '77%',
-          height: '18%',
+          left: isMobile ? '12%' : '5%',
+          right: isMobile ? '5%' : '5%',
+          top: isMobile ? '72%' : '77%',
+          height: isMobile ? '20%' : '18%',
         },
       ],
       xAxis: [
@@ -394,7 +392,8 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
           },
           axisLabel: {
             color: '#999',
-            interval: Math.floor(dates.length / 8),
+            fontSize: isMobile ? 10 : 12,
+            interval: Math.floor(dates.length / (isMobile ? 4 : 8)),
           },
           splitLine: {
             show: false,
@@ -411,7 +410,8 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
           },
           axisLabel: {
             color: '#999',
-            interval: Math.floor(dates.length / 8),
+            fontSize: isMobile ? 10 : 12,
+            interval: Math.floor(dates.length / (isMobile ? 4 : 8)),
           },
         },
       ],
@@ -419,6 +419,7 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
         {
           scale: true,
           gridIndex: 0,
+          splitNumber: isMobile ? 4 : 5,
           splitLine: {
             show: true,
             lineStyle: {
@@ -432,12 +433,14 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
           },
           axisLabel: {
             color: '#999',
+            fontSize: isMobile ? 10 : 12,
             formatter: (value: number) => value.toFixed(2),
           },
         },
         {
           scale: true,
           gridIndex: 1,
+          splitNumber: isMobile ? 2 : 3,
           splitLine: {
             show: false,
           },
@@ -448,6 +451,7 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
           },
           axisLabel: {
             color: '#999',
+            fontSize: isMobile ? 10 : 12,
             formatter: (value: number) => {
               if (value >= 100000000) {
                 return (value / 100000000).toFixed(1) + '亿';
@@ -545,7 +549,7 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
 
       return () => clearTimeout(retryTimer);
     }
-  }, [data, stock]);
+  }, [data, stock, isMobile]);
 
   // 加载数据
   useEffect(() => {
@@ -600,13 +604,13 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
           top: '50%',
           left: '50%',
           transform: 'translate(-50%, -50%)',
-          width: '90vw',
-          maxWidth: '1400px',
-          maxHeight: '85vh',
+          width: isMobile ? '96vw' : '90vw',
+          maxWidth: isMobile ? 'none' : '1400px',
+          maxHeight: isMobile ? '85vh' : '85vh',
           backgroundColor: '#1a1a1a',
           border: '2px solid #ffd700',
           boxShadow: '0 0 30px rgba(255, 215, 0, 0.5)',
-          borderRadius: '8px',
+          borderRadius: isMobile ? '12px' : '8px',
           zIndex: 10002,
           display: 'flex',
           flexDirection: 'column',
@@ -616,7 +620,7 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
         {/* Header */}
         <div
           style={{
-            padding: '16px 24px',
+            padding: isMobile ? '12px 16px' : '16px 24px',
             borderBottom: '1px solid #404040',
             display: 'flex',
             justifyContent: 'space-between',
@@ -624,18 +628,18 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
           }}
         >
           <div>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-              <span style={{ fontSize: '18px', fontWeight: 'bold', color: '#e0e0e0' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? '8px' : '12px', flexWrap: isMobile ? 'wrap' : 'nowrap' }}>
+              <span style={{ fontSize: isMobile ? '14px' : '18px', fontWeight: 'bold', color: '#e0e0e0' }}>
                 {stock.stock_name || stock.stock_code} ({stock.stock_code})
               </span>
               {data.length > 0 && (
-                <span style={{ fontSize: '12px', color: '#666', fontStyle: 'italic' }}>
+                <span style={{ fontSize: isMobile ? '10px' : '12px', color: '#666', fontStyle: 'italic' }}>
                   共{data.length}个交易日
                   {hasMore ? '（向左滑动加载更多）' : '（已加载全部）'}
                 </span>
               )}
               {loadingMore && (
-                <span style={{ fontSize: '12px', color: '#3182ce', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                <span style={{ fontSize: isMobile ? '10px' : '12px', color: '#3182ce', display: 'flex', alignItems: 'center', gap: '4px' }}>
                   <span style={{
                     width: '12px',
                     height: '12px',
@@ -649,10 +653,10 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
                 </span>
               )}
             </div>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginTop: '4px' }}>
-              <span style={{ fontSize: '14px', color: '#999' }}>日K线图</span>
-              <span style={{ fontSize: '12px', color: '#666' }}>
-                💡 鼠标滚轮缩放 | 拖动查看不同时间段
+            <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? '8px' : '16px', marginTop: '4px' }}>
+              <span style={{ fontSize: isMobile ? '12px' : '14px', color: '#999' }}>日K线图</span>
+              <span style={{ fontSize: isMobile ? '10px' : '12px', color: '#666' }}>
+                💡 {isMobile ? '滚轮缩放 | 拖动查看' : '鼠标滚轮缩放 | 拖动查看不同时间段'}
               </span>
             </div>
           </div>
@@ -675,26 +679,33 @@ const KLineChartModal: React.FC<KLineChartModalProps> = ({
         </div>
 
         {/* Body */}
-        <div style={{ padding: '16px', flex: 1, overflow: 'auto' }}>
+        <div style={{
+          padding: isMobile ? '8px' : '16px',
+          flex: 1,
+          overflow: 'auto',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+        }}>
           {error && (
             <div
               style={{
                 backgroundColor: '#2a1a1a',
                 border: '1px solid #ef5350',
                 borderRadius: '4px',
-                padding: '12px 16px',
-                marginBottom: '16px',
+                padding: isMobile ? '8px 12px' : '12px 16px',
+                marginBottom: isMobile ? '8px' : '16px',
                 display: 'flex',
                 alignItems: 'center',
                 gap: '8px',
               }}
             >
               <span style={{ color: '#ef5350' }}>⚠</span>
-              <span style={{ color: '#e0e0e0' }}>{error}</span>
+              <span style={{ color: '#e0e0e0', fontSize: isMobile ? '12px' : '14px' }}>{error}</span>
             </div>
           )}
 
-          <div style={{ position: 'relative', height: '680px', width: '100%' }}>
+          <div style={{ position: 'relative', height: isMobile ? '450px' : '680px', width: '100%' }}>
             {loading && (
               <div
                 style={{

src/components/StockChart/TimelineChartModal.tsx

@@ -1,5 +1,6 @@
 // src/components/StockChart/TimelineChartModal.tsx - 分时图弹窗组件
 import React, { useEffect, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
 import {
   Modal,
   ModalOverlay,
@@ -19,14 +20,8 @@ import {
 import * as echarts from 'echarts';
 import dayjs from 'dayjs';
 import { klineDataCache, getCacheKey, fetchKlineData } from '@views/Community/components/StockDetailPanel/utils/klineDataCache';
-
-/**
- * 股票信息
- */
-interface StockInfo {
-  stock_code: string;
-  stock_name?: string;
-}
+import { selectIsMobile } from '@store/slices/deviceSlice';
+import { StockInfo } from './types';
 
 /**
  * TimelineChartModal 组件 Props
@@ -68,6 +63,9 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
   const [error, setError] = useState<string | null>(null);
   const [data, setData] = useState<TimelineDataPoint[]>([]);
 
+  // H5 响应式适配
+  const isMobile = useSelector(selectIsMobile);
+
   // 加载分时图数据（优先使用缓存）
   const loadData = async () => {
     if (!stock?.stock_code) return;
@@ -187,16 +185,16 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
       }
     }
 
-    // 图表配置
+    // 图表配置（H5 响应式）
     const option: echarts.EChartsOption = {
       backgroundColor: '#1a1a1a',
       title: {
         text: `${stock?.stock_name || stock?.stock_code} - 分时图`,
         left: 'center',
-        top: 10,
+        top: isMobile ? 5 : 10,
         textStyle: {
           color: '#e0e0e0',
-          fontSize: 18,
+          fontSize: isMobile ? 14 : 18,
           fontWeight: 'bold',
         },
       },
@@ -247,16 +245,16 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
       },
       grid: [
         {
-          left: '5%',
-          right: '5%',
-          top: '15%',
-          height: '55%',
+          left: isMobile ? '12%' : '5%',
+          right: isMobile ? '5%' : '5%',
+          top: isMobile ? '12%' : '15%',
+          height: isMobile ? '58%' : '55%',
         },
         {
-          left: '5%',
-          right: '5%',
-          top: '75%',
-          height: '15%',
+          left: isMobile ? '12%' : '5%',
+          right: isMobile ? '5%' : '5%',
+          top: isMobile ? '75%' : '75%',
+          height: isMobile ? '18%' : '15%',
         },
       ],
       xAxis: [
@@ -271,7 +269,8 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
           },
           axisLabel: {
             color: '#999',
-            interval: Math.floor(times.length / 6),
+            fontSize: isMobile ? 10 : 12,
+            interval: Math.floor(times.length / (isMobile ? 4 : 6)),
           },
           splitLine: {
             show: true,
@@ -291,7 +290,8 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
           },
           axisLabel: {
             color: '#999',
-            interval: Math.floor(times.length / 6),
+            fontSize: isMobile ? 10 : 12,
+            interval: Math.floor(times.length / (isMobile ? 4 : 6)),
           },
         },
       ],
@@ -299,6 +299,7 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
         {
           scale: true,
           gridIndex: 0,
+          splitNumber: isMobile ? 4 : 5,
           splitLine: {
             show: true,
             lineStyle: {
@@ -312,12 +313,14 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
           },
           axisLabel: {
             color: '#999',
+            fontSize: isMobile ? 10 : 12,
             formatter: (value: number) => value.toFixed(2),
           },
         },
         {
           scale: true,
           gridIndex: 1,
+          splitNumber: isMobile ? 2 : 3,
           splitLine: {
             show: false,
           },
@@ -328,6 +331,7 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
           },
           axisLabel: {
             color: '#999',
+            fontSize: isMobile ? 10 : 12,
             formatter: (value: number) => {
               if (value >= 10000) {
                 return (value / 10000).toFixed(1) + '万';
@@ -443,7 +447,7 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
 
       return () => clearTimeout(retryTimer);
     }
-  }, [data, stock]);
+  }, [data, stock, isMobile]);
 
   // 加载数据
   useEffect(() => {
@@ -455,29 +459,30 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
   if (!stock) return null;
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} size={size}>
+    <Modal isOpen={isOpen} onClose={onClose} size={size} isCentered>
       <ModalOverlay bg="blackAlpha.700" />
       <ModalContent
-        maxW="90vw"
+        maxW={isMobile ? '96vw' : '90vw'}
         maxH="85vh"
+        borderRadius={isMobile ? '12px' : '8px'}
         bg="#1a1a1a"
-        borderColor="#404040"
-        borderWidth="1px"
+        border="2px solid #ffd700"
+        boxShadow="0 0 30px rgba(255, 215, 0, 0.5)"
       >
-        <ModalHeader pb={3} borderBottomWidth="1px" borderColor="#404040">
-          <VStack align="flex-start" spacing={1}>
+        <ModalHeader pb={isMobile ? 2 : 3} borderBottomWidth="1px" borderColor="#404040">
+          <VStack align="flex-start" spacing={0}>
             <HStack>
-              <Text fontSize="lg" fontWeight="bold" color="#e0e0e0">
+              <Text fontSize={isMobile ? 'md' : 'lg'} fontWeight="bold" color="#e0e0e0">
                 {stock.stock_name || stock.stock_code} ({stock.stock_code})
               </Text>
             </HStack>
-            <Text fontSize="sm" color="#999">
+            <Text fontSize={isMobile ? 'xs' : 'sm'} color="#999">
               分时走势图
             </Text>
           </VStack>
         </ModalHeader>
         <ModalCloseButton color="#999" _hover={{ color: '#e0e0e0' }} />
-        <ModalBody p={4}>
+        <ModalBody p={isMobile ? 2 : 4}>
           {error && (
             <Alert status="error" bg="#2a1a1a" borderColor="#ef5350" mb={4}>
               <AlertIcon color="#ef5350" />
@@ -485,7 +490,7 @@ const TimelineChartModal: React.FC<TimelineChartModalProps> = ({
             </Alert>
           )}
 
-          <Box position="relative" h="600px" w="100%">
+          <Box position="relative" h={isMobile ? '400px' : '600px'} w="100%">
             {loading && (
               <Flex
                 position="absolute"

src/components/StockChart/types.ts

@@ -0,0 +1,56 @@
+// src/components/StockChart/types.ts
+// 图表弹窗共享类型和常量
+
+/**
+ * 股票信息（两个组件共用）
+ */
+export interface StockInfo {
+  stock_code: string;
+  stock_name?: string;
+}
+
+/**
+ * 图表颜色常量
+ */
+export const CHART_COLORS = {
+  background: '#1a1a1a',
+  border: '#404040',
+  text: '#e0e0e0',
+  textSecondary: '#999',
+  gridLine: '#2a2a2a',
+  up: '#ef5350',        // 涨
+  down: '#26a69a',      // 跌
+  accent: '#ffd700',    // 金色强调
+  avgLine: '#ffa726',   // 均价线
+  priceLine: '#2196f3', // 价格线
+} as const;
+
+/**
+ * Modal 样式常量
+ */
+export const MODAL_STYLES = {
+  border: '2px solid #ffd700',
+  boxShadow: '0 0 30px rgba(255, 215, 0, 0.5)',
+  borderRadius: { mobile: '12px', desktop: '8px' },
+  maxHeight: '85vh',
+  width: { mobile: '96vw', desktop: '90vw' },
+} as const;
+
+/**
+ * Tooltip 样式
+ */
+export const TOOLTIP_STYLES = {
+  backgroundColor: 'rgba(30, 30, 30, 0.95)',
+  borderColor: '#404040',
+  borderWidth: 1,
+  textStyle: { color: '#e0e0e0' },
+} as const;
+
+/**
+ * 轴线样式
+ */
+export const AXIS_STYLES = {
+  lineColor: '#404040',
+  labelColor: '#999',
+  fontSize: { mobile: 10, desktop: 12 },
+} as const;

src/components/TradeDatePicker/index.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import {
+  HStack,
+  Input,
+  Text,
+  Icon,
+  Tooltip,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import { InfoIcon } from '@chakra-ui/icons';
+import { FaCalendarAlt } from 'react-icons/fa';
+
+export interface TradeDatePickerProps {
+  /** 当前选中的日期 */
+  value: Date | null;
+  /** 日期变化回调 */
+  onChange: (date: Date) => void;
+  /** 默认日期（组件初始化时使用） */
+  defaultDate?: Date;
+  /** 最新交易日期（用于显示提示） */
+  latestTradeDate?: Date | null;
+  /** 最小可选日期 */
+  minDate?: Date;
+  /** 最大可选日期，默认今天 */
+  maxDate?: Date;
+  /** 标签文字，默认"交易日期" */
+  label?: string;
+  /** 输入框宽度 */
+  inputWidth?: string | object;
+  /** 是否显示标签图标 */
+  showIcon?: boolean;
+}
+
+/**
+ * 交易日期选择器组件
+ *
+ * 提供日期输入框和最新交易日期提示，供概念中心、个股中心等页面复用。
+ * 快捷按钮（今天、昨天等）由各页面自行实现。
+ */
+const TradeDatePicker: React.FC<TradeDatePickerProps> = ({
+  value,
+  onChange,
+  defaultDate,
+  latestTradeDate,
+  minDate,
+  maxDate,
+  label = '交易日期',
+  inputWidth = { base: '100%', lg: '200px' },
+  showIcon = true,
+}) => {
+  // 颜色主题
+  const labelColor = useColorModeValue('purple.700', 'purple.300');
+  const iconColor = useColorModeValue('purple.500', 'purple.400');
+  const inputBorderColor = useColorModeValue('purple.200', 'purple.600');
+  const tipBg = useColorModeValue('blue.50', 'blue.900');
+  const tipBorderColor = useColorModeValue('blue.200', 'blue.600');
+  const tipTextColor = useColorModeValue('blue.600', 'blue.200');
+  const tipIconColor = useColorModeValue('blue.500', 'blue.300');
+
+  // 使用默认日期初始化（仅在 value 为 null 且有 defaultDate 时）
+  React.useEffect(() => {
+    if (value === null && defaultDate) {
+      onChange(defaultDate);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 处理日期变化
+  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const dateStr = e.target.value;
+    if (dateStr) {
+      const date = new Date(dateStr);
+      onChange(date);
+    }
+  };
+
+  // 格式化日期为 YYYY-MM-DD
+  const formatDateValue = (date: Date | null): string => {
+    if (!date) return '';
+    return date.toISOString().split('T')[0];
+  };
+
+  // 计算日期范围
+  const minDateStr = minDate ? formatDateValue(minDate) : undefined;
+  const maxDateStr = maxDate
+    ? formatDateValue(maxDate)
+    : new Date().toISOString().split('T')[0];
+
+  return (
+    <>
+      {/* 标签 */}
+      <HStack spacing={3}>
+        {showIcon && <Icon as={FaCalendarAlt} color={iconColor} boxSize={5} />}
+        <Text fontWeight="bold" color={labelColor}>
+          {label}：
+        </Text>
+      </HStack>
+
+      {/* 日期输入框 */}
+      <Input
+        type="date"
+        value={formatDateValue(value)}
+        onChange={handleDateChange}
+        min={minDateStr}
+        max={maxDateStr}
+        width={inputWidth}
+        focusBorderColor="purple.500"
+        borderColor={inputBorderColor}
+        borderRadius="lg"
+        fontWeight="medium"
+      />
+
+      {/* 最新交易日期提示 */}
+      {latestTradeDate && (
+        <Tooltip label="数据库中最新的交易日期">
+          <HStack
+            spacing={2}
+            bg={tipBg}
+            px={3}
+            py={1.5}
+            borderRadius="full"
+            border="1px solid"
+            borderColor={tipBorderColor}
+          >
+            <Icon as={InfoIcon} color={tipIconColor} boxSize={3} />
+            <Text fontSize="sm" color={tipTextColor} fontWeight="medium">
+              最新: {latestTradeDate.toLocaleDateString('zh-CN')}
+            </Text>
+          </HStack>
+        </Tooltip>
+      )}
+    </>
+  );
+};
+
+export default TradeDatePicker;

src/contexts/NotificationContext.js

@@ -19,6 +19,7 @@ import { notificationMetricsService } from '../services/notificationMetricsServi
 import { notificationHistoryService } from '../services/notificationHistoryService';
 import { PRIORITY_LEVELS, NOTIFICATION_CONFIG, NOTIFICATION_TYPES } from '../constants/notificationTypes';
 import { usePermissionGuide, GUIDE_TYPES } from '../hooks/usePermissionGuide';
+import { getEventDetailUrl } from '@/utils/idEncoder';
 
 // 连接状态枚举
 const CONNECTION_STATUS = {
@@ -460,7 +461,7 @@ export const NotificationProvider = ({ children }) => {
             timestamp: Date.now(),
             isAIGenerated: event.is_ai_generated || false,
             clickable: true,
-            link: `/event-detail/${event.id}`,
+            link: getEventDetailUrl(event.id),
             autoClose: autoClose,
             extra: {
                 eventId: event.id,

src/hooks/useHomeResponsive.ts

@@ -18,21 +18,21 @@ export const useHomeResponsive = (): ResponsiveConfig => {
   });
 
   const headingSize = useBreakpointValue({
-    base: 'xl',
-    md: '3xl',
-    lg: '4xl'
+    base: 'lg',
+    md: 'xl',
+    lg: '2xl'
   });
 
   const headingLetterSpacing = useBreakpointValue({
-    base: '-1px',
-    md: '-1.5px',
-    lg: '-2px'
+    base: '-0.5px',
+    md: '-1px',
+    lg: '-1.5px'
   });
 
   const heroTextSize = useBreakpointValue({
-    base: 'md',
-    md: 'lg',
-    lg: 'xl'
+    base: 'xs',
+    md: 'sm',
+    lg: 'md'
   });
 
   const containerPx = useBreakpointValue({

src/hooks/useWatchlist.js

@@ -1,16 +1,19 @@
 // src/hooks/useWatchlist.js
-// 自选股管理自定义 Hook
+// 自选股管理自定义 Hook（导航栏专用，与 Redux 状态同步）
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import { useToast } from '@chakra-ui/react';
 import { logger } from '../utils/logger';
 import { getApiBase } from '../utils/apiConfig';
+import { toggleWatchlist as toggleWatchlistAction, loadWatchlist } from '../store/slices/stockSlice';
 
 const WATCHLIST_PAGE_SIZE = 10;
 
 /**
- * 自选股管理 Hook
+ * 自选股管理 Hook（导航栏专用）
  * 提供自选股加载、分页、移除等功能
+ * 监听 Redux 中的 watchlist 变化，自动刷新行情数据
  *
  * @returns {{
  *   watchlistQuotes: Array,
@@ -19,14 +22,39 @@ const WATCHLIST_PAGE_SIZE = 10;
  *   setWatchlistPage: Function,
  *   WATCHLIST_PAGE_SIZE: number,
  *   loadWatchlistQuotes: Function,
- *   handleRemoveFromWatchlist: Function
+ *   followingEvents: Array,
+ *   handleAddToWatchlist: Function,
+ *   handleRemoveFromWatchlist: Function,
+ *   isInWatchlist: Function
  * }}
  */
 export const useWatchlist = () => {
     const toast = useToast();
+    const dispatch = useDispatch();
     const [watchlistQuotes, setWatchlistQuotes] = useState([]);
     const [watchlistLoading, setWatchlistLoading] = useState(false);
     const [watchlistPage, setWatchlistPage] = useState(1);
+    const [followingEvents, setFollowingEvents] = useState([]);
+
+    // 从 Redux 获取自选股列表长度（用于监听变化）
+    // 使用 length 作为依赖，避免数组引用变化导致不必要的重新渲染
+    const reduxWatchlistLength = useSelector(state => state.stock.watchlist?.length || 0);
+
+    // 检查 Redux watchlist 是否已初始化（加载状态）
+    const reduxWatchlistLoading = useSelector(state => state.stock.loading?.watchlist);
+
+    // 用于跟踪上一次的 watchlist 长度
+    const prevWatchlistLengthRef = useRef(-1); // 初始设为 -1，确保第一次变化也能检测到
+
+    // 初始化时加载 Redux watchlist（确保 Redux 状态被初始化）
+    const hasInitializedRef = useRef(false);
+    useEffect(() => {
+        if (!hasInitializedRef.current) {
+            hasInitializedRef.current = true;
+            logger.debug('useWatchlist', '初始化 Redux watchlist');
+            dispatch(loadWatchlist());
+        }
+    }, [dispatch]);
 
     // 加载自选股实时行情
     const loadWatchlistQuotes = useCallback(async () => {
@@ -42,6 +70,7 @@ export const useWatchlist = () => {
                 const data = await resp.json();
                 if (data && data.success && Array.isArray(data.data)) {
                     setWatchlistQuotes(data.data);
+                    logger.debug('useWatchlist', '自选股行情加载成功', { count: data.data.length });
                 } else {
                     setWatchlistQuotes([]);
                 }
@@ -58,35 +87,108 @@ export const useWatchlist = () => {
         }
     }, []);
 
+    // 监听 Redux watchlist 长度变化，自动刷新行情数据
+    useEffect(() => {
+        const currentLength = reduxWatchlistLength;
+        const prevLength = prevWatchlistLengthRef.current;
+
+        // 只有当 watchlist 长度发生变化时才刷新
+        // prevLength = -1 表示初始状态，此时不触发刷新（由菜单打开时触发）
+        if (prevLength !== -1 && currentLength !== prevLength) {
+            logger.debug('useWatchlist', 'Redux watchlist 长度变化，刷新行情', {
+                prevLength,
+                currentLength
+            });
+
+            // 延迟一小段时间再刷新，确保后端数据已更新
+            const timer = setTimeout(() => {
+                logger.debug('useWatchlist', '执行 loadWatchlistQuotes');
+                loadWatchlistQuotes();
+            }, 500);
+
+            prevWatchlistLengthRef.current = currentLength;
+            return () => clearTimeout(timer);
+        }
+
+        // 更新 ref
+        prevWatchlistLengthRef.current = currentLength;
+    }, [reduxWatchlistLength, loadWatchlistQuotes]);
+
+    // 添加到自选股
+    const handleAddToWatchlist = useCallback(async (stockCode, stockName) => {
+        try {
+            const base = getApiBase();
+            const resp = await fetch(base + '/api/account/watchlist', {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ stock_code: stockCode, stock_name: stockName })
+            });
+            const data = await resp.json().catch(() => ({}));
+            if (resp.ok && data.success) {
+                // 刷新自选股列表
+                loadWatchlistQuotes();
+                toast({ title: '已添加至自选股', status: 'success', duration: 1500 });
+                return true;
+            } else {
+                toast({ title: '添加失败', status: 'error', duration: 2000 });
+                return false;
+            }
+        } catch (e) {
+            toast({ title: '网络错误，添加失败', status: 'error', duration: 2000 });
+            return false;
+        }
+    }, [toast, loadWatchlistQuotes]);
+
     // 从自选股移除
     const handleRemoveFromWatchlist = useCallback(async (stockCode) => {
         try {
-            const base = getApiBase();
-            const resp = await fetch(base + `/api/account/watchlist/${stockCode}`, {
-                method: 'DELETE',
-                credentials: 'include'
+            // 找到股票名称
+            const stockItem = watchlistQuotes.find(item => {
+                const normalize6 = (code) => {
+                    const m = String(code || '').match(/(\d{6})/);
+                    return m ? m[1] : String(code || '');
+                };
+                return normalize6(item.stock_code) === normalize6(stockCode);
             });
-            const data = await resp.json().catch(() => ({}));
-            if (resp.ok && data && data.success !== false) {
-                setWatchlistQuotes((prev) => {
-                    const normalize6 = (code) => {
-                        const m = String(code || '').match(/(\d{6})/);
-                        return m ? m[1] : String(code || '');
-                    };
-                    const target = normalize6(stockCode);
-                    const updated = (prev || []).filter((x) => normalize6(x.stock_code) !== target);
-                    const newMaxPage = Math.max(1, Math.ceil((updated.length || 0) / WATCHLIST_PAGE_SIZE));
-                    setWatchlistPage((p) => Math.min(p, newMaxPage));
-                    return updated;
-                });
-                toast({ title: '已从自选股移除', status: 'info', duration: 1500 });
-            } else {
-                toast({ title: '移除失败', status: 'error', duration: 2000 });
-            }
+            const stockName = stockItem?.stock_name || '';
+
+            // 通过 Redux action 移除（会同步更新 Redux 状态）
+            await dispatch(toggleWatchlistAction({
+                stockCode,
+                stockName,
+                isInWatchlist: true  // 表示当前在自选股中，需要移除
+            })).unwrap();
+
+            // 更新本地状态（立即响应 UI）
+            setWatchlistQuotes((prev) => {
+                const normalize6 = (code) => {
+                    const m = String(code || '').match(/(\d{6})/);
+                    return m ? m[1] : String(code || '');
+                };
+                const target = normalize6(stockCode);
+                const updated = (prev || []).filter((x) => normalize6(x.stock_code) !== target);
+                const newMaxPage = Math.max(1, Math.ceil((updated.length || 0) / WATCHLIST_PAGE_SIZE));
+                setWatchlistPage((p) => Math.min(p, newMaxPage));
+                return updated;
+            });
+
+            toast({ title: '已从自选股移除', status: 'info', duration: 1500 });
         } catch (e) {
-            toast({ title: '网络错误，移除失败', status: 'error', duration: 2000 });
+            logger.error('useWatchlist', '移除自选股失败', e);
+            toast({ title: e.message || '移除失败', status: 'error', duration: 2000 });
         }
-    }, [toast]);
+    }, [dispatch, watchlistQuotes, toast]);
+
+    // 判断股票是否在自选股中
+    const isInWatchlist = useCallback((stockCode) => {
+        const normalize6 = (code) => {
+            const m = String(code || '').match(/(\d{6})/);
+            return m ? m[1] : String(code || '');
+        };
+        const target = normalize6(stockCode);
+        return watchlistQuotes.some(item => normalize6(item.stock_code) === target);
+    }, [watchlistQuotes]);
 
     return {
         watchlistQuotes,
@@ -95,6 +197,9 @@ export const useWatchlist = () => {
         setWatchlistPage,
         WATCHLIST_PAGE_SIZE,
         loadWatchlistQuotes,
-        handleRemoveFromWatchlist
+        followingEvents,
+        handleAddToWatchlist,
+        handleRemoveFromWatchlist,
+        isInWatchlist
     };
 };

src/layouts/AppFooter.js

@@ -23,7 +23,13 @@ const AppFooter = () => {
             >
               京公网安备11010802046286号
             </Link>
-            <Text>京ICP备2025107343号-1</Text>
+            <Link
+              href="https://beian.miit.gov.cn/"
+              isExternal
+              _hover={{ color: 'gray.600' }}
+            >
+              京ICP备2025107343号-1
+            </Link>
           </HStack>
         </VStack>
       </Container>

src/layouts/MainLayout.js

@@ -30,12 +30,12 @@ const MemoizedAppFooter = memo(AppFooter);
  */
 export default function MainLayout() {
     return (
-        <Box flex="1" h="100vh" w="100%" position="relative" display="flex" flexDirection="column">
+        <Box flex="1" h="100vh" w="100%" position="relative" display="flex" flexDirection="column" bg="#1A202C">
             {/* 导航栏 - 在所有页面间共享，memo 后不会在路由切换时重新渲染 */}
             <MemoizedHomeNavbar />
 
             {/* 页面内容区域 - flex: 1 占据剩余空间，包含错误边界、懒加载 */}
-            <Box flex="1" pt="60px">
+            <Box flex="1" pt="60px" bg="#1A202C">
                 <ErrorBoundary>
                     <Suspense fallback={<PageLoader message="页面加载中..." />}>
                         <Outlet />

src/mocks/data/account.js

@@ -537,6 +537,31 @@ export const mockFutureEvents = [
 ];
 
 export const mockCalendarEvents = [
+  {
+    id: 408,
+    user_id: 1,
+    title: '2025中医药高质量发展大会将于12月5日至7日举办',
+    date: '2025-12-05',
+    event_date: '2025-12-05',
+    type: 'policy',
+    category: 'industry_event',
+    description: `基于提供的路演记录、新闻动态以及上市公司公告，以下是与"2025中医药高质量发展大会将于12月5日至7日举办"相关的信息整理：
+
+事件背景：
+"2025中医药高质量发展大会"将于12月5日至7日在北京召开，由国家中医药管理局主办，旨在总结十四五期间中医药发展成果，部署下一阶段重点任务。大会主题为"守正创新、传承发展"，将邀请国内外中医药领域专家学者、企业代表共商中医药现代化发展路径。
+
+政策支持：
+1. 国务院办公厅印发《中医药振兴发展重大工程实施方案》，明确到2025年中医药服务体系更加完善
+2. 国家医保局持续推进中成药集采，优质中药企业有望受益于市场集中度提升
+3. 各地出台中医药产业发展支持政策，加大对中药创新药研发的资金支持
+
+行业展望：
+中医药行业正处于政策红利期，创新中药、配方颗粒、中药材种植等细分领域景气度较高。预计大会将释放更多利好政策信号，推动行业高质量发展。`,
+    importance: 5,
+    source: 'future',
+    stocks: ['002424.SZ', '002873.SZ', '600518.SH', '002907.SZ', '600129.SH', '300519.SZ', '300878.SZ', '002275.SZ', '600222.SH'],
+    created_at: '2025-12-01T10:00:00Z'
+  },
   {
     id: 401,
     user_id: 1,

src/mocks/data/kline.js

@@ -61,6 +61,20 @@ export const generateDailyData = (indexCode, days = 30) => {
     return data;
 };
 
+/**
+ * 计算简单移动均价（用于分时图均价线）
+ * @param {Array} data - 已有数据
+ * @param {number} currentPrice - 当前价格
+ * @param {number} period - 均线周期（默认5）
+ * @returns {number} 均价
+ */
+function calculateAvgPrice(data, currentPrice, period = 5) {
+    const recentPrices = data.slice(-period).map(d => d.price || d.close);
+    recentPrices.push(currentPrice);
+    const sum = recentPrices.reduce((acc, p) => acc + p, 0);
+    return parseFloat((sum / recentPrices.length).toFixed(2));
+}
+
 /**
  * 生成时间范围内的数据
  */
@@ -80,6 +94,11 @@ function generateTimeRange(data, startTime, endTime, basePrice, session) {
 
         // ✅ 修复：为分时图添加完整的 OHLC 字段
         const closePrice = parseFloat(price.toFixed(2));
+
+        // 计算均价和涨跌幅
+        const avgPrice = calculateAvgPrice(data, closePrice);
+        const changePercent = parseFloat(((closePrice - basePrice) / basePrice * 100).toFixed(2));
+
         data.push({
             time: formatTime(current),
             timestamp: current.getTime(), // ✅ 新增：毫秒时间戳
@@ -88,6 +107,8 @@ function generateTimeRange(data, startTime, endTime, basePrice, session) {
             low: parseFloat((price * 0.9997).toFixed(2)),   // ✅ 新增：最低价（略低于收盘）
             close: closePrice,            // ✅ 保留：收盘价
             price: closePrice,            // ✅ 保留：兼容字段（供 MiniTimelineChart 使用）
+            avg_price: avgPrice,          // ✅ 新增：均价（供 TimelineChartModal 使用）
+            change_percent: changePercent, // ✅ 新增：涨跌幅（供 TimelineChartModal 使用）
             volume: volume,
             prev_close: basePrice
         });

src/mocks/handlers/account.js

@@ -159,7 +159,7 @@ export const accountHandlers = [
   }),
 
   // 6. 添加自选股
-  http.post('/api/account/watchlist/add', async ({ request }) => {
+  http.post('/api/account/watchlist', async ({ request }) => {
     await delay(NETWORK_DELAY);
 
     const currentUser = getCurrentUser();
@@ -188,6 +188,22 @@ export const accountHandlers = [
 
     mockWatchlist.push(newItem);
 
+    // 同步添加到 mockRealtimeQuotes（导航栏自选股菜单使用此数组）
+    mockRealtimeQuotes.push({
+      stock_code: stock_code,
+      stock_name: stock_name,
+      current_price: null,
+      change_percent: 0,
+      change: 0,
+      volume: 0,
+      turnover: 0,
+      high: 0,
+      low: 0,
+      open: 0,
+      prev_close: 0,
+      update_time: new Date().toTimeString().slice(0, 8)
+    });
+
     return HttpResponse.json({
       success: true,
       message: '添加成功',
@@ -210,9 +226,20 @@ export const accountHandlers = [
     const { id } = params;
     console.log('[Mock] 删除自选股:', id);
 
-    const index = mockWatchlist.findIndex(item => item.id === parseInt(id));
+    // 支持按 stock_code 或 id 匹配删除
+    const index = mockWatchlist.findIndex(item =>
+      item.stock_code === id || item.id === parseInt(id)
+    );
+
     if (index !== -1) {
+      const stockCode = mockWatchlist[index].stock_code;
       mockWatchlist.splice(index, 1);
+
+      // 同步从 mockRealtimeQuotes 移除
+      const quotesIndex = mockRealtimeQuotes.findIndex(item => item.stock_code === stockCode);
+      if (quotesIndex !== -1) {
+        mockRealtimeQuotes.splice(quotesIndex, 1);
+      }
     }
 
     return HttpResponse.json({

src/mocks/handlers/event.js

@@ -255,6 +255,48 @@ export const eventHandlers = [
 
     // ==================== 事件详情相关 ====================
 
+    // 获取事件详情
+    http.get('/api/events/:eventId', async ({ params }) => {
+        await delay(200);
+
+        const { eventId } = params;
+
+        console.log('[Mock] 获取事件详情, eventId:', eventId);
+
+        try {
+            // 返回模拟的事件详情数据
+            return HttpResponse.json({
+                success: true,
+                data: {
+                    id: parseInt(eventId),
+                    title: `测试事件 ${eventId} - 重大政策发布`,
+                    description: '这是一个模拟的事件描述，用于开发测试。该事件涉及重要政策变化，可能对相关板块产生显著影响。建议关注后续发展动态。',
+                    importance: ['S', 'A', 'B', 'C'][Math.floor(Math.random() * 4)],
+                    created_at: new Date().toISOString(),
+                    trading_date: new Date().toISOString().split('T')[0],
+                    event_type: ['政策', '财报', '行业', '宏观'][Math.floor(Math.random() * 4)],
+                    related_avg_chg: parseFloat((Math.random() * 10 - 5).toFixed(2)),
+                    follower_count: Math.floor(Math.random() * 500) + 50,
+                    view_count: Math.floor(Math.random() * 5000) + 100,
+                    is_following: false,
+                    post_count: Math.floor(Math.random() * 50),
+                    expectation_surprise_score: parseFloat((Math.random() * 100).toFixed(1)),
+                },
+                message: '获取成功'
+            });
+        } catch (error) {
+            console.error('[Mock] 获取事件详情失败:', error);
+            return HttpResponse.json(
+                {
+                    success: false,
+                    error: '获取事件详情失败',
+                    data: null
+                },
+                { status: 500 }
+            );
+        }
+    }),
+
     // 获取事件相关股票
     http.get('/api/events/:eventId/stocks', async ({ params }) => {
         await delay(300);

src/mocks/handlers/market.js

@@ -94,7 +94,7 @@ export const marketHandlers = [
             { name: '机器人', desc: '人形机器人产业化加速，特斯拉、小米等巨头入局，产业链迎来发展机遇。' },
         ];
 
-        // 股票池
+        // 股票池（扩展到足够多的股票）
         const stockPool = [
             { stock_code: '600519', stock_name: '贵州茅台' },
             { stock_code: '300750', stock_name: '宁德时代' },
@@ -104,30 +104,102 @@ export const marketHandlers = [
             { stock_code: '300274', stock_name: '阳光电源' },
             { stock_code: '688981', stock_name: '中芯国际' },
             { stock_code: '000725', stock_name: '京东方A' },
+            { stock_code: '600036', stock_name: '招商银行' },
+            { stock_code: '000858', stock_name: '五粮液' },
+            { stock_code: '601166', stock_name: '兴业银行' },
+            { stock_code: '600276', stock_name: '恒瑞医药' },
+            { stock_code: '000333', stock_name: '美的集团' },
+            { stock_code: '600887', stock_name: '伊利股份' },
+            { stock_code: '002415', stock_name: '海康威视' },
+            { stock_code: '601888', stock_name: '中国中免' },
+            { stock_code: '300059', stock_name: '东方财富' },
+            { stock_code: '002475', stock_name: '立讯精密' },
+            { stock_code: '600900', stock_name: '长江电力' },
+            { stock_code: '601398', stock_name: '工商银行' },
+            { stock_code: '600030', stock_name: '中信证券' },
+            { stock_code: '000568', stock_name: '泸州老窖' },
+            { stock_code: '002352', stock_name: '顺丰控股' },
+            { stock_code: '600809', stock_name: '山西汾酒' },
+            { stock_code: '300015', stock_name: '爱尔眼科' },
+            { stock_code: '002142', stock_name: '宁波银行' },
+            { stock_code: '601899', stock_name: '紫金矿业' },
+            { stock_code: '600309', stock_name: '万华化学' },
+            { stock_code: '002304', stock_name: '洋河股份' },
+            { stock_code: '600585', stock_name: '海螺水泥' },
+            { stock_code: '601288', stock_name: '农业银行' },
+            { stock_code: '600050', stock_name: '中国联通' },
+            { stock_code: '000001', stock_name: '平安银行' },
+            { stock_code: '601668', stock_name: '中国建筑' },
+            { stock_code: '600028', stock_name: '中国石化' },
+            { stock_code: '601857', stock_name: '中国石油' },
+            { stock_code: '600000', stock_name: '浦发银行' },
+            { stock_code: '601328', stock_name: '交通银行' },
+            { stock_code: '000002', stock_name: '万科A' },
+            { stock_code: '600104', stock_name: '上汽集团' },
+            { stock_code: '601601', stock_name: '中国太保' },
+            { stock_code: '600016', stock_name: '民生银行' },
+            { stock_code: '601628', stock_name: '中国人寿' },
+            { stock_code: '600031', stock_name: '三一重工' },
+            { stock_code: '002230', stock_name: '科大讯飞' },
+            { stock_code: '300124', stock_name: '汇川技术' },
+            { stock_code: '002049', stock_name: '紫光国微' },
+            { stock_code: '688012', stock_name: '中微公司' },
+            { stock_code: '688008', stock_name: '澜起科技' },
+            { stock_code: '603501', stock_name: '韦尔股份' },
         ];
 
+        // 生成历史触发时间
+        const generateHappenedTimes = (seed) => {
+            const times = [];
+            const count = 3 + (seed % 3); // 3-5个时间点
+            for (let k = 0; k < count; k++) {
+                const daysAgo = 30 + (seed * 7 + k * 11) % 330;
+                const d = new Date();
+                d.setDate(d.getDate() - daysAgo);
+                times.push(d.toISOString().split('T')[0]);
+            }
+            return times.sort().reverse();
+        };
+
+        const matchTypes = ['hybrid_knn', 'keyword', 'semantic'];
+
         // 生成概念数据
         const concepts = [];
         for (let i = 0; i < Math.min(limit, conceptPool.length); i++) {
             const concept = conceptPool[i];
             const changePercent = parseFloat((Math.random() * 8 - 1).toFixed(2)); // -1% ~ 7%
-            const stockCount = Math.floor(Math.random() * 40) + 20; // 20-60只股票
+            const stockCount = Math.floor(Math.random() * 20) + 15; // 15-35只股票
 
-            // 随机选取3-4只相关股票
+            // 生成与 stockCount 一致的股票列表（包含完整字段）
             const relatedStocks = [];
-            const stockIndices = new Set();
-            while (stockIndices.size < Math.min(4, stockPool.length)) {
-                stockIndices.add(Math.floor(Math.random() * stockPool.length));
+            for (let j = 0; j < stockCount; j++) {
+                const idx = (i * 7 + j) % stockPool.length;
+                const stock = stockPool[idx];
+                relatedStocks.push({
+                    stock_code: stock.stock_code,
+                    stock_name: stock.stock_name,
+                    reason: `作为行业龙头企业，${stock.stock_name}在该领域具有核心竞争优势，市场份额领先。`,
+                    change_pct: parseFloat((Math.random() * 15 - 5).toFixed(2)) // -5% ~ +10%
+                });
             }
-            stockIndices.forEach(idx => relatedStocks.push(stockPool[idx]));
 
             concepts.push({
                 concept_id: `CONCEPT_${1001 + i}`,
-                concept_name: concept.name,
-                change_percent: changePercent,
-                stock_count: stockCount,
+                concept: concept.name,  // 原始字段名
+                concept_name: concept.name,  // 兼容字段名
                 description: concept.desc,
-                stocks: relatedStocks
+                stock_count: stockCount,
+                score: parseFloat((Math.random() * 5 + 3).toFixed(2)), // 3-8 分数
+                match_type: matchTypes[i % 3],
+                price_info: {
+                    avg_change_pct: changePercent,
+                    avg_price: parseFloat((Math.random() * 100 + 10).toFixed(2)),
+                    total_market_cap: parseFloat((Math.random() * 1000 + 100).toFixed(2))
+                },
+                change_percent: changePercent,  // 兼容字段
+                happened_times: generateHappenedTimes(i),
+                stocks: relatedStocks,
+                hot_score: Math.floor(Math.random() * 100)
             });
         }
 

src/mocks/handlers/stock.js

@@ -123,6 +123,45 @@ const generateStockList = () => {
 
 // 股票相关的 Handlers
 export const stockHandlers = [
+    // 搜索股票（个股中心页面使用）
+    http.get('/api/stocks/search', async ({ request }) => {
+        await delay(200);
+
+        const url = new URL(request.url);
+        const query = url.searchParams.get('q') || '';
+        const limit = parseInt(url.searchParams.get('limit') || '10');
+
+        console.log('[Mock Stock] 搜索股票:', { query, limit });
+
+        const stocks = generateStockList();
+
+        // 如果没有搜索词，返回空结果
+        if (!query.trim()) {
+            return HttpResponse.json({
+                success: true,
+                data: []
+            });
+        }
+
+        // 过滤匹配的股票
+        const results = stocks.filter(s =>
+            s.code.includes(query) || s.name.includes(query)
+        ).slice(0, limit);
+
+        // 返回格式化数据
+        return HttpResponse.json({
+            success: true,
+            data: results.map(s => ({
+                stock_code: s.code,
+                stock_name: s.name,
+                market: s.code.startsWith('6') ? 'SH' : 'SZ',
+                industry: ['银行', '证券', '保险', '白酒', '医药', '科技', '新能源', '汽车', '地产', '家电'][Math.floor(Math.random() * 10)],
+                change_pct: parseFloat((Math.random() * 10 - 3).toFixed(2)),
+                price: parseFloat((Math.random() * 100 + 5).toFixed(2))
+            }))
+        });
+    }),
+
     // 获取所有股票列表
     http.get('/api/stocklist', async () => {
         await delay(200);
@@ -224,4 +263,129 @@ export const stockHandlers = [
             );
         }
     }),
+
+    // 批量获取股票K线数据
+    http.post('/api/stock/batch-kline', async ({ request }) => {
+        await delay(400);
+
+        try {
+            const body = await request.json();
+            const { codes, type = 'timeline', event_time } = body;
+
+            console.log('[Mock Stock] 批量获取K线数据:', {
+                stockCount: codes?.length,
+                type,
+                eventTime: event_time
+            });
+
+            if (!codes || !Array.isArray(codes) || codes.length === 0) {
+                return HttpResponse.json(
+                    { error: '股票代码列表不能为空' },
+                    { status: 400 }
+                );
+            }
+
+            // 为每只股票生成数据
+            const batchData = {};
+            codes.forEach(stockCode => {
+                let data;
+                if (type === 'timeline') {
+                    data = generateTimelineData('000001.SH');
+                } else if (type === 'daily') {
+                    data = generateDailyData('000001.SH', 60);
+                } else {
+                    data = [];
+                }
+
+                batchData[stockCode] = {
+                    success: true,
+                    data: data,
+                    stock_code: stockCode
+                };
+            });
+
+            return HttpResponse.json({
+                success: true,
+                data: batchData,
+                type: type,
+                message: '批量获取成功'
+            });
+        } catch (error) {
+            console.error('[Mock Stock] 批量获取K线数据失败:', error);
+            return HttpResponse.json(
+                { error: '批量获取K线数据失败' },
+                { status: 500 }
+            );
+        }
+    }),
+
+    // 获取股票报价（批量）
+    http.post('/api/stock/quotes', async ({ request }) => {
+        await delay(200);
+
+        try {
+            const body = await request.json();
+            const { codes, event_time } = body;
+
+            console.log('[Mock Stock] 获取股票报价:', {
+                stockCount: codes?.length,
+                eventTime: event_time
+            });
+
+            if (!codes || !Array.isArray(codes) || codes.length === 0) {
+                return HttpResponse.json(
+                    { success: false, error: '股票代码列表不能为空' },
+                    { status: 400 }
+                );
+            }
+
+            // 生成股票列表用于查找名称
+            const stockList = generateStockList();
+            const stockMap = {};
+            stockList.forEach(s => {
+                stockMap[s.code] = s.name;
+            });
+
+            // 为每只股票生成报价数据
+            const quotesData = {};
+            codes.forEach(stockCode => {
+                // 生成基础价格（10-200之间）
+                const basePrice = parseFloat((Math.random() * 190 + 10).toFixed(2));
+                // 涨跌幅（-10% 到 +10%）
+                const changePercent = parseFloat((Math.random() * 20 - 10).toFixed(2));
+                // 涨跌额
+                const change = parseFloat((basePrice * changePercent / 100).toFixed(2));
+                // 昨收
+                const prevClose = parseFloat((basePrice - change).toFixed(2));
+
+                quotesData[stockCode] = {
+                    code: stockCode,
+                    name: stockMap[stockCode] || `股票${stockCode}`,
+                    price: basePrice,
+                    change: change,
+                    change_percent: changePercent,
+                    prev_close: prevClose,
+                    open: parseFloat((prevClose * (1 + (Math.random() * 0.02 - 0.01))).toFixed(2)),
+                    high: parseFloat((basePrice * (1 + Math.random() * 0.05)).toFixed(2)),
+                    low: parseFloat((basePrice * (1 - Math.random() * 0.05)).toFixed(2)),
+                    volume: Math.floor(Math.random() * 100000000),
+                    amount: parseFloat((Math.random() * 10000000000).toFixed(2)),
+                    market: stockCode.startsWith('6') ? 'SH' : 'SZ',
+                    update_time: new Date().toISOString()
+                };
+            });
+
+            return HttpResponse.json({
+                success: true,
+                data: quotesData,
+                message: '获取成功'
+            });
+        } catch (error) {
+            console.error('[Mock Stock] 获取股票报价失败:', error);
+            return HttpResponse.json(
+                { success: false, error: '获取股票报价失败' },
+                { status: 500 }
+            );
+        }
+    }),
 ];

src/routes/routeConfig.js

@@ -98,7 +98,7 @@ export const routeConfig = [
 
     // ==================== 事件模块 ====================
     {
-        path: 'event-detail/:eventId',
+        path: 'event-detail',
         component: lazyComponents.EventDetail,
         protection: PROTECTION_MODES.REDIRECT,
         layout: 'main',

src/styles/bytedesk-override.css

@@ -21,12 +21,9 @@
 iframe[src*="bytedesk"],
 iframe[src*="/chat/"],
 iframe[src*="/visitor/"] {
-  position: fixed !important;
   z-index: 999999 !important;
-  max-height: 80vh !important;  /* 限制最大高度为视口的80% */
-  max-width: 40vh !important;  /* 限制最大高度为视口的80% */
-  bottom: 10px !important;      /* 确保底部有足够空间 */
-  right: 10px !important;       /* 右侧边距 */
+  width: 100% !important;   /* 填满外层容器 */
+  height: 100% !important;  /* 填满外层容器 */
 }
 
 /* Bytedesk 覆盖层（如果存在） */

src/theme/theme.js

@@ -27,6 +27,18 @@ import { MainPanelComponent } from "./additions/layout/MainPanel";
 import { PanelContentComponent } from "./additions/layout/PanelContent";
 import { PanelContainerComponent } from "./additions/layout/PanelContainer";
 // import { mode } from "@chakra-ui/theme-tools";
+
+// Container 组件样式覆盖 - 移除默认背景色
+const ContainerComponent = {
+  components: {
+    Container: {
+      baseStyle: {
+        bg: "1A202C",
+      },
+    },
+  },
+};
+
 export default extendTheme(
   { breakpoints }, // Breakpoints
   globalStyles,
@@ -37,5 +49,6 @@ export default extendTheme(
   CardComponent, // Card component
   MainPanelComponent, // Main Panel component
   PanelContentComponent, // Panel Content component
-  PanelContainerComponent // Panel Container component
+  PanelContainerComponent, // Panel Container component
+  ContainerComponent // Container 背景透明
 );

src/types/investment.ts

@@ -115,11 +115,11 @@ export interface PlanningContextValue {
   /** 设置加载状态 */
   setLoading: React.Dispatch<React.SetStateAction<boolean>>;
 
-  /** 当前激活的标签页索引 (0: 日历, 1: 计划, 2: 复盘) */
-  activeTab: number;
+  /** 打开新建计划模态框的触发计数器 */
+  openPlanModalTrigger?: number;
 
-  /** 设置激活的标签页 */
-  setActiveTab: React.Dispatch<React.SetStateAction<number>>;
+  /** 打开新建复盘模态框的触发计数器 */
+  openReviewModalTrigger?: number;
 
   /** Chakra UI Toast 实例 */
   toast: {
@@ -145,4 +145,14 @@ export interface PlanningContextValue {
 
   /** 卡片背景色 */
   cardBg: string;
+
+  // 导航方法（可选，用于空状态引导）
+  /** 切换视图模式 */
+  setViewMode?: (mode: 'calendar' | 'list') => void;
+
+  /** 切换列表 Tab */
+  setListTab?: (tab: number) => void;
+
+  /** 关闭弹窗 */
+  closeModal?: () => void;
 }

src/utils/idEncoder.ts

@@ -0,0 +1,55 @@
+/**
+ * ID 加密/解密工具
+ * 用于隐藏 URL 中的真实 ID，防止用户猜测遍历
+ *
+ * 使用 Base64 编码 + 前缀混淆
+ * 例如: 15901 -> "ZXYtMTU5MDE"
+ */
+
+const SECRET_PREFIX = 'ev-';
+
+/**
+ * 加密事件 ID
+ * @param id - 原始 ID
+ * @returns 加密后的字符串
+ */
+export const encodeEventId = (id: number | string): string => {
+  if (id === null || id === undefined) return '';
+  return btoa(SECRET_PREFIX + String(id));
+};
+
+/**
+ * 解密事件 ID
+ * @param encoded - 加密后的字符串
+ * @returns 原始 ID，解密失败返回 null
+ */
+export const decodeEventId = (encoded: string): string | null => {
+  if (!encoded) return null;
+
+  try {
+    const decoded = atob(encoded);
+    if (decoded.startsWith(SECRET_PREFIX)) {
+      return decoded.slice(SECRET_PREFIX.length);
+    }
+    // 兼容：如果是纯数字（旧链接），直接返回
+    if (/^\d+$/.test(encoded)) {
+      return encoded;
+    }
+    return null;
+  } catch {
+    // Base64 解码失败，可能是旧的纯数字链接
+    if (/^\d+$/.test(encoded)) {
+      return encoded;
+    }
+    return null;
+  }
+};
+
+/**
+ * 生成事件详情页 URL
+ * @param eventId - 事件 ID
+ * @returns 完整路径
+ */
+export const getEventDetailUrl = (eventId: number | string): string => {
+  return `/event-detail?id=${encodeEventId(eventId)}`;
+};

src/views/Community/components/CompactSearchBox.js

@@ -93,6 +93,13 @@ const CompactSearchBox = ({
         loadStocks();
     }, []);
 
+    // 预加载行业数据（解决第一次点击无数据问题）
+    useEffect(() => {
+        if (!industryData || industryData.length === 0) {
+            dispatch(fetchIndustryData());
+        }
+    }, [dispatch, industryData]);
+
     // 初始化筛选条件
     const findIndustryPath = useCallback((targetCode, data, currentPath = []) => {
         if (!data || data.length === 0) return null;

src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js

@@ -1,27 +1,24 @@
 // src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js
 // 动态新闻详情面板主组件（组装所有子组件）
 
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useReducer } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
-  Box,
   Card,
   CardBody,
   VStack,
-  HStack,
   Text,
   Spinner,
   Center,
   Wrap,
   WrapItem,
-  useColorModeValue,
-  useToast,
+  Box,
 } from '@chakra-ui/react';
-import { getImportanceConfig } from '../../../../constants/importanceLevels';
-import { eventService } from '../../../../services/eventService';
+import { getImportanceConfig } from '@constants/importanceLevels';
+import { eventService } from '@services/eventService';
 import { useEventStocks } from '../StockDetailPanel/hooks/useEventStocks';
-import { toggleEventFollow, selectEventFollowStatus } from '../../../../store/slices/communityDataSlice';
-import { useAuth } from '../../../../contexts/AuthContext';
+import { toggleEventFollow, selectEventFollowStatus } from '@store/slices/communityDataSlice';
+import { useAuth } from '@contexts/AuthContext';
 import EventHeaderInfo from './EventHeaderInfo';
 import CompactMetaBar from './CompactMetaBar';
 import EventDescriptionSection from './EventDescriptionSection';
@@ -29,12 +26,56 @@ import RelatedConceptsSection from './RelatedConceptsSection';
 import RelatedStocksSection from './RelatedStocksSection';
 import CompactStockItem from './CompactStockItem';
 import CollapsibleSection from './CollapsibleSection';
-import HistoricalEvents from '../../../EventDetail/components/HistoricalEvents';
-import TransmissionChainAnalysis from '../../../EventDetail/components/TransmissionChainAnalysis';
-import SubscriptionBadge from '../../../../components/SubscriptionBadge';
-import SubscriptionUpgradeModal from '../../../../components/SubscriptionUpgradeModal';
-import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme';
-import EventCommentSection from '../../../../components/EventCommentSection';
+import HistoricalEvents from '@views/EventDetail/components/HistoricalEvents';
+import TransmissionChainAnalysis from '@views/EventDetail/components/TransmissionChainAnalysis';
+import SubscriptionBadge from '@components/SubscriptionBadge';
+import SubscriptionUpgradeModal from '@components/SubscriptionUpgradeModal';
+import { PROFESSIONAL_COLORS } from '@constants/professionalTheme';
+import { useWatchlist } from '@hooks/useWatchlist';
+import EventCommentSection from '@components/EventCommentSection';
+
+// 折叠区块状态管理 - 使用 useReducer 整合
+const initialSectionState = {
+  stocks: { isOpen: true, hasLoaded: false, hasLoadedQuotes: false },
+  concepts: { isOpen: false },
+  historical: { isOpen: false, hasLoaded: false },
+  transmission: { isOpen: false, hasLoaded: false }
+};
+
+const sectionReducer = (state, action) => {
+  switch (action.type) {
+    case 'TOGGLE':
+      return {
+        ...state,
+        [action.section]: {
+          ...state[action.section],
+          isOpen: !state[action.section].isOpen
+        }
+      };
+    case 'SET_LOADED':
+      return {
+        ...state,
+        [action.section]: {
+          ...state[action.section],
+          hasLoaded: true
+        }
+      };
+    case 'SET_QUOTES_LOADED':
+      return {
+        ...state,
+        stocks: { ...state.stocks, hasLoadedQuotes: true }
+      };
+    case 'RESET_ALL':
+      return {
+        stocks: { isOpen: true, hasLoaded: false, hasLoadedQuotes: false },
+        concepts: { isOpen: false },
+        historical: { isOpen: false, hasLoaded: false },
+        transmission: { isOpen: false, hasLoaded: false }
+      };
+    default:
+      return state;
+  }
+};
 
 /**
  * 动态新闻详情面板主组件
@@ -48,7 +89,14 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
   const cardBg = PROFESSIONAL_COLORS.background.card;
   const borderColor = PROFESSIONAL_COLORS.border.default;
   const textColor = PROFESSIONAL_COLORS.text.secondary;
-  const toast = useToast();
+
+  // 使用 useWatchlist Hook 管理自选股
+  const {
+    handleAddToWatchlist,
+    handleRemoveFromWatchlist,
+    isInWatchlist,
+    loadWatchlistQuotes
+  } = useWatchlist();
 
   // 获取用户会员等级（修复：字段名从 subscription_tier 改为 subscription_type）
   const userTier = user?.subscription_type || 'free';
@@ -101,11 +149,6 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
       const response = await eventService.getEventDetail(event.id);
       if (response.success) {
         setFullEventDetail(response.data);
-        console.log('%c📊 [浏览量] 事件详情加载成功', 'color: #10B981; font-weight: bold;', {
-          eventId: event.id,
-          viewCount: response.data.view_count,
-          title: response.data.title
-        });
       }
     } catch (error) {
       console.error('[DynamicNewsDetailPanel] loadEventDetail 失败:', error, {
@@ -122,30 +165,8 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
   const canAccessHistorical = hasAccess('pro');
   const canAccessTransmission = hasAccess('max');
 
-  // 子区块折叠状态管理 + 加载追踪
-  // 相关股票默认展开
-  const [isStocksOpen, setIsStocksOpen] = useState(true);
-  const [hasLoadedStocks, setHasLoadedStocks] = useState(false);  // 股票列表是否已加载（获取数量）
-  const [hasLoadedQuotes, setHasLoadedQuotes] = useState(false);  // 行情数据是否已加载
-
-  const [isConceptsOpen, setIsConceptsOpen] = useState(false);
-
-  // 历史事件默认折叠，但预加载数量
-  const [isHistoricalOpen, setIsHistoricalOpen] = useState(false);
-  const [hasLoadedHistorical, setHasLoadedHistorical] = useState(false);
-
-  const [isTransmissionOpen, setIsTransmissionOpen] = useState(false);
-  const [hasLoadedTransmission, setHasLoadedTransmission] = useState(false);
-
-  // 自选股管理（使用 localStorage）
-  const [watchlistSet, setWatchlistSet] = useState(() => {
-    try {
-      const saved = localStorage.getItem('stock_watchlist');
-      return saved ? new Set(JSON.parse(saved)) : new Set();
-    } catch {
-      return new Set();
-    }
-  });
+  // 子区块折叠状态管理 - 使用 useReducer 整合
+  const [sectionState, dispatchSection] = useReducer(sectionReducer, initialSectionState);
 
   // 锁定点击处理 - 弹出升级弹窗
   const handleLockedClick = useCallback((featureName, requiredLevel) => {
@@ -166,87 +187,62 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
   }, []);
 
   // 相关股票 - 展开时加载行情（需要 PRO 权限）
-  // 股票列表在事件切换时预加载（显示数量），行情在展开时才加载
   const handleStocksToggle = useCallback(() => {
-    const newState = !isStocksOpen;
-    setIsStocksOpen(newState);
+    const willOpen = !sectionState.stocks.isOpen;
+    dispatchSection({ type: 'TOGGLE', section: 'stocks' });
 
     // 展开时加载行情数据（如果还没加载过）
-    if (newState && !hasLoadedQuotes && stocks.length > 0) {
-      console.log('%c📈 [相关股票] 首次展开，加载行情数据', 'color: #10B981; font-weight: bold;', {
-        eventId: event?.id,
-        stockCount: stocks.length
-      });
+    if (willOpen && !sectionState.stocks.hasLoadedQuotes && stocks.length > 0) {
       refreshQuotes();
-      setHasLoadedQuotes(true);
+      dispatchSection({ type: 'SET_QUOTES_LOADED' });
     }
-  }, [isStocksOpen, hasLoadedQuotes, stocks.length, refreshQuotes, event?.id]);
+  }, [sectionState.stocks, stocks.length, refreshQuotes]);
 
   // 相关概念 - 展开/收起（无需加载）
   const handleConceptsToggle = useCallback(() => {
-    setIsConceptsOpen(!isConceptsOpen);
-  }, [isConceptsOpen]);
+    dispatchSection({ type: 'TOGGLE', section: 'concepts' });
+  }, []);
 
   // 历史事件对比 - 数据已预加载，只需切换展开状态
   const handleHistoricalToggle = useCallback(() => {
-    const newState = !isHistoricalOpen;
-    setIsHistoricalOpen(newState);
-
-    // 数据已在事件切换时预加载，这里只需展开
-    if (newState) {
-      console.log('%c📜 [历史事件] 展开（数据已预加载）', 'color: #3B82F6; font-weight: bold;', {
-        eventId: event?.id,
-        count: historicalEvents?.length || 0
-      });
-    }
-  }, [isHistoricalOpen, event?.id, historicalEvents?.length]);
+    dispatchSection({ type: 'TOGGLE', section: 'historical' });
+  }, []);
 
   // 传导链分析 - 展开时加载
   const handleTransmissionToggle = useCallback(() => {
-    const newState = !isTransmissionOpen;
-    setIsTransmissionOpen(newState);
+    const willOpen = !sectionState.transmission.isOpen;
+    dispatchSection({ type: 'TOGGLE', section: 'transmission' });
 
-    if (newState && !hasLoadedTransmission) {
-      console.log('%c🔗 [传导链] 首次展开，加载传导链数据', 'color: #8B5CF6; font-weight: bold;', { eventId: event?.id });
+    if (willOpen && !sectionState.transmission.hasLoaded) {
       loadChainAnalysis();
-      setHasLoadedTransmission(true);
+      dispatchSection({ type: 'SET_LOADED', section: 'transmission' });
     }
-  }, [isTransmissionOpen, hasLoadedTransmission, loadChainAnalysis, event?.id]);
+  }, [sectionState.transmission, loadChainAnalysis]);
 
   // 事件切换时重置所有子模块状态
   useEffect(() => {
-    console.log('%c🔄 [事件切换] 重置所有子模块状态', 'color: #F59E0B; font-weight: bold;', { eventId: event?.id });
-
-    // 🎯 加载事件详情（增加浏览量）
+    // 加载事件详情（增加浏览量）
     loadEventDetail();
 
-    // 重置所有加载状态
-    setHasLoadedStocks(false);
-    setHasLoadedQuotes(false);  // 重置行情加载状态
-    setHasLoadedHistorical(false);
-    setHasLoadedTransmission(false);
+    // 加载自选股数据（用于判断股票是否已关注）
+    loadWatchlistQuotes();
+
+    // 重置所有折叠区块状态
+    dispatchSection({ type: 'RESET_ALL' });
 
     // 相关股票默认展开，预加载股票列表和行情数据
-    setIsStocksOpen(true);
     if (canAccessStocks) {
-      console.log('%c📊 [相关股票] 事件切换，预加载股票列表和行情数据', 'color: #10B981; font-weight: bold;', { eventId: event?.id });
       loadStocksData();
-      setHasLoadedStocks(true);
-      // 由于默认展开，直接加载行情数据
-      setHasLoadedQuotes(true);
+      dispatchSection({ type: 'SET_LOADED', section: 'stocks' });
+      dispatchSection({ type: 'SET_QUOTES_LOADED' });
     }
 
     // 历史事件默认折叠，但预加载数据（显示数量吸引点击）
-    setIsHistoricalOpen(false);
     if (canAccessHistorical) {
-      console.log('%c📜 [历史事件] 事件切换，预加载历史事件（获取数量）', 'color: #3B82F6; font-weight: bold;', { eventId: event?.id });
       loadHistoricalData();
-      setHasLoadedHistorical(true);
+      dispatchSection({ type: 'SET_LOADED', section: 'historical' });
     }
-
-    setIsConceptsOpen(false);
-    setIsTransmissionOpen(false);
-  }, [event?.id, canAccessStocks, canAccessHistorical, userTier, loadStocksData, loadHistoricalData, loadEventDetail]);
+  }, [event?.id, canAccessStocks, canAccessHistorical, userTier, loadStocksData, loadHistoricalData, loadEventDetail, loadWatchlistQuotes]);
 
   // 切换关注状态
   const handleToggleFollow = useCallback(async () => {
@@ -254,42 +250,14 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
     dispatch(toggleEventFollow(event.id));
   }, [dispatch, event?.id]);
 
-  // 切换自选股
-  const handleWatchlistToggle = useCallback(async (stockCode, isInWatchlist) => {
-    try {
-      const newWatchlist = new Set(watchlistSet);
-
-      if (isInWatchlist) {
-        newWatchlist.delete(stockCode);
-        toast({
-          title: '已移除自选股',
-          status: 'info',
-          duration: 2000,
-          isClosable: true,
-        });
-      } else {
-        newWatchlist.add(stockCode);
-        toast({
-          title: '已添加至自选股',
-          status: 'success',
-          duration: 2000,
-          isClosable: true,
-        });
-      }
-
-      setWatchlistSet(newWatchlist);
-      localStorage.setItem('stock_watchlist', JSON.stringify(Array.from(newWatchlist)));
-    } catch (error) {
-      console.error('切换自选股失败:', error);
-      toast({
-        title: '操作失败',
-        description: error.message,
-        status: 'error',
-        duration: 3000,
-        isClosable: true,
-      });
+  // 切换自选股（使用 useWatchlist Hook）
+  const handleWatchlistToggle = useCallback(async (stockCode, stockName, currentlyInWatchlist) => {
+    if (currentlyInWatchlist) {
+      await handleRemoveFromWatchlist(stockCode);
+    } else {
+      await handleAddToWatchlist(stockCode, stockName);
     }
-  }, [watchlistSet, toast]);
+  }, [handleAddToWatchlist, handleRemoveFromWatchlist]);
 
   // 空状态
   if (!event) {
@@ -338,15 +306,10 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
           {/* 相关股票（可折叠） - 懒加载 - 需要 PRO 权限 - 支持精简/详细模式 */}
           <CollapsibleSection
             title="相关股票"
-            isOpen={isStocksOpen}
+            isOpen={sectionState.stocks.isOpen}
             onToggle={handleStocksToggle}
             count={stocks?.length || 0}
-            subscriptionBadge={(() => {
-              if (!canAccessStocks) {
-                return <SubscriptionBadge tier="pro" size="sm" />;
-              }
-              return null;
-            })()}
+            subscriptionBadge={!canAccessStocks ? <SubscriptionBadge tier="pro" size="sm" /> : null}
             isLocked={!canAccessStocks}
             onLockedClick={() => handleLockedClick('相关股票', 'pro')}
             showModeToggle={canAccessStocks}
@@ -381,7 +344,7 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
                 stocks={stocks}
                 quotes={quotes}
                 eventTime={event.created_at}
-                watchlistSet={watchlistSet}
+                isInWatchlist={isInWatchlist}
                 onWatchlistToggle={handleWatchlistToggle}
               />
             )}
@@ -392,7 +355,7 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
             eventTitle={event.title}
             effectiveTradingDate={event.trading_date || event.created_at}
             eventTime={event.created_at}
-            isOpen={isConceptsOpen}
+            isOpen={sectionState.concepts.isOpen}
             onToggle={handleConceptsToggle}
             subscriptionBadge={!canAccessConcepts ? <SubscriptionBadge tier="pro" size="sm" /> : null}
             isLocked={!canAccessConcepts}
@@ -402,7 +365,7 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
           {/* 历史事件对比（可折叠） - 懒加载 - 需要 PRO 权限 */}
           <CollapsibleSection
             title="历史事件对比"
-            isOpen={isHistoricalOpen}
+            isOpen={sectionState.historical.isOpen}
             onToggle={handleHistoricalToggle}
             count={historicalEvents?.length || 0}
             subscriptionBadge={!canAccessHistorical ? <SubscriptionBadge tier="pro" size="sm" /> : null}
@@ -425,7 +388,7 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
           {/* 传导链分析（可折叠） - 懒加载 - 需要 MAX 权限 */}
           <CollapsibleSection
             title="传导链分析"
-            isOpen={isTransmissionOpen}
+            isOpen={sectionState.transmission.isOpen}
             onToggle={handleTransmissionToggle}
             subscriptionBadge={!canAccessTransmission ? <SubscriptionBadge tier="max" size="sm" /> : null}
             isLocked={!canAccessTransmission}
@@ -453,7 +416,7 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
           featureName={upgradeModal.featureName}
           currentLevel={userTier}
         />
-      ): null }
+      ) : null}
     </Card>
   );
 };

src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js

@@ -15,14 +15,14 @@ import { logger } from '../../../../utils/logger';
  * @param {Array<Object>} props.stocks - 股票数组
  * @param {Object} props.quotes - 股票行情字典 { [stockCode]: { change: number } }
  * @param {string} props.eventTime - 事件时间
- * @param {Set} props.watchlistSet - 自选股代码集合
+ * @param {Function} props.isInWatchlist - 检查股票是否在自选股中的函数
  * @param {Function} props.onWatchlistToggle - 切换自选股回调
  */
 const RelatedStocksSection = ({
   stocks,
   quotes = {},
   eventTime = null,
-  watchlistSet = new Set(),
+  isInWatchlist = () => false,
   onWatchlistToggle
 }) => {
   // 分时图数据状态：{ [stockCode]: data[] }
@@ -167,7 +167,7 @@ const RelatedStocksSection = ({
           stock={stock}
           quote={quotes[stock.stock_code]}
           eventTime={eventTime}
-          isInWatchlist={watchlistSet.has(stock.stock_code)}
+          isInWatchlist={isInWatchlist(stock.stock_code)}
           onWatchlistToggle={onWatchlistToggle}
           timelineData={timelineDataMap[stock.stock_code]}
           timelineLoading={shouldShowTimelineLoading && !timelineDataMap[stock.stock_code]}

src/views/Community/components/DynamicNewsDetail/StockListItem.js

@@ -74,7 +74,7 @@ const StockListItem = ({
 
   const handleWatchlistClick = (e) => {
     e.stopPropagation();
-    onWatchlistToggle?.(stock.stock_code, isInWatchlist);
+    onWatchlistToggle?.(stock.stock_code, stock.stock_name, isInWatchlist);
   };
 
   // 格式化涨跌幅显示

src/views/Community/components/EventDetailModal.less

@@ -1,36 +1,8 @@
-.event-detail-modal {
-  top: 20% !important;
-  margin: 0 auto !important;
-  padding-bottom: 0 !important;
-
-  .ant-modal-content {
-    border-radius: 24px !important;
-    background: transparent;
-  }
-
-  // 标题样式 - 深色文字（白色背景）
-  .ant-modal-title {
+// 事件详情抽屉样式（从底部弹出）
+// 注意：大部分样式已在 TSX 的 styles 属性中配置，这里只保留必要的覆盖
+.event-detail-drawer {
+  // 标题样式
+  .ant-drawer-title {
     color: #1A202C;
   }
-
-  // 关闭按钮样式 - 深色（白色背景）
-  .ant-modal-close {
-    color: #4A5568;
-
-    &:hover {
-      color: #1A202C;
-    }
-  }
-}
-
-// 自底向上滑入动画
-@keyframes slideUp {
-  from {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
 }

src/views/Community/components/EventDetailModal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { Modal } from 'antd';
+import { Drawer } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
 import { selectIsMobile } from '@store/slices/deviceSlice';
 import DynamicNewsDetailPanel from './DynamicNewsDetail/DynamicNewsDetailPanel';
 import './EventDetailModal.less';
@@ -15,7 +16,7 @@ interface EventDetailModalProps {
 }
 
 /**
- * 事件详情弹窗组件
+ * 事件详情抽屉组件（从底部弹出）
  */
 const EventDetailModal: React.FC<EventDetailModalProps> = ({
   open,
@@ -25,23 +26,35 @@ const EventDetailModal: React.FC<EventDetailModalProps> = ({
   const isMobile = useSelector(selectIsMobile);
 
   return (
-    <Modal
+    <Drawer
       open={open}
-      onCancel={onClose}
-      footer={null}
+      onClose={onClose}
+      placement="bottom"
+      height={isMobile ? 'calc(100vh - 60px)' : 'calc(100vh - 100px)'}
+      width={isMobile ? '100%' : '70vw'}
       title={event?.title || '事件详情'}
-      width='100vw'
-      destroyOnClose
-      className="event-detail-modal"
+      destroyOnHidden
+      rootClassName="event-detail-drawer"
+      closeIcon={null}
+      extra={
+        <CloseOutlined
+          onClick={onClose}
+          style={{ cursor: 'pointer', fontSize: 16, color: '#4A5568' }}
+        />
+      }
       styles={{
-        mask: { background: 'transparent' },
-        content: { borderRadius: 24, padding: 0, maxWidth: 1400, background: 'transparent', margin: '0 auto' },
-        header: { background: '#FFFFFF', borderBottom: '1px solid #E2E8F0', padding: '16px 24px', borderRadius: '24px 24px 0 0', margin: 0 },
-        body: { padding: 0 },
+        wrapper: isMobile ? {} : {
+          maxWidth: 1400,
+          margin: '0 auto',
+          borderRadius: '16px 16px 0 0',
+        },
+        content: { borderRadius: '16px 16px 0 0' },
+        header: { background: '#FFFFFF', borderBottom: '1px solid #E2E8F0', padding: '16px 24px' },
+        body: { padding: 0, background: '#FFFFFF' },
       }}
     >
       {event && <DynamicNewsDetailPanel event={event} showHeader={false} />}
-    </Modal>
+    </Drawer>
   );
 };
 

src/views/Community/components/HotEvents.js

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { Card, Badge, Tag, Empty, Carousel, Tooltip } from 'antd';
 import { ArrowUpOutlined, ArrowDownOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
-import { useDisclosure } from '@chakra-ui/react';
+import { useDisclosure, useBreakpointValue } from '@chakra-ui/react';
 import EventDetailModal from './EventDetailModal';
 import dayjs from 'dayjs';
 import './HotEvents.css';
@@ -31,6 +31,8 @@ const HotEvents = ({ events, onPageChange, onEventClick }) => {
     const [currentSlide, setCurrentSlide] = useState(0);
     const { isOpen: isModalOpen, onOpen: onModalOpen, onClose: onModalClose } = useDisclosure();
     const [modalEvent, setModalEvent] = useState(null);
+    // H5 端不显示 Tooltip（避免触摸触发后无法消除的黑色悬浮框）
+    const isMobile = useBreakpointValue({ base: true, md: false });
 
     const renderPriceChange = (value) => {
         if (value === null || value === undefined) {
@@ -154,21 +156,33 @@ const HotEvents = ({ events, onPageChange, onEventClick }) => {
                             >
                                 {/* Custom layout without Card.Meta */}
                                 <div className="event-header">
-                                    <Tooltip title={event.title}>
+                                    {isMobile ? (
                                         <span className="event-title">
                                             {event.title}
                                         </span>
-                                    </Tooltip>
+                                    ) : (
+                                        <Tooltip title={event.title}>
+                                            <span className="event-title">
+                                                {event.title}
+                                            </span>
+                                        </Tooltip>
+                                    )}
                                     <span className="event-tag">
                                         {renderPriceChange(event.related_avg_chg)}
                                     </span>
                                 </div>
 
-                                <Tooltip title={event.description}>
+                                {isMobile ? (
                                     <div className="event-description">
                                         {event.description}
                                     </div>
-                                </Tooltip>
+                                ) : (
+                                    <Tooltip title={event.description}>
+                                        <div className="event-description">
+                                            {event.description}
+                                        </div>
+                                    </Tooltip>
+                                )}
 
                                 <div className="event-footer">
                                     <span className="creator">{event.creator?.username || 'Anonymous'}</span>

src/views/Community/components/StockDetailPanel/components/StockTable.js

@@ -7,6 +7,18 @@ import MiniTimelineChart from './MiniTimelineChart';
 import { fetchBatchKlineData, klineDataCache, getCacheKey } from '../utils/klineDataCache';
 import { logger } from '../../../../../utils/logger';
 
+/**
+ * 标准化股票代码为6位格式
+ * @param {string} code - 股票代码
+ * @returns {string} 6位标准化代码
+ */
+const normalizeStockCode = (code) => {
+  if (!code) return '';
+  const s = String(code).trim();
+  const m = s.match(/(\d{6})/);
+  return m ? m[1] : s;
+};
+
 /**
  * 股票列表表格组件
  * 显示事件相关股票列表，包括分时图、涨跌幅、自选股操作等
@@ -260,7 +272,9 @@ const StockTable = ({
       width: 150,
       fixed: 'right',
       render: (_, record) => {
-        const isInWatchlist = watchlistSet.has(record.stock_code);
+        // 标准化代码后再比较，确保 600000.SH 和 600000 能匹配
+        const normalizedCode = normalizeStockCode(record.stock_code);
+        const isInWatchlist = watchlistSet.has(normalizedCode);
         return (
           <div style={{ display: 'flex', gap: '4px' }}>
             <Button

src/views/Community/components/StockDetailPanel/hooks/useWatchlist.js

@@ -5,6 +5,27 @@ import { loadWatchlist, toggleWatchlist as toggleWatchlistAction } from '../../.
 import { message } from 'antd';
 import { logger } from '../../../../../utils/logger';
 
+/**
+ * 标准化股票代码为6位格式
+ * 支持: 600000, 600000.SH, 600000.SZ, SH600000 等格式
+ * @param {string} code - 股票代码
+ * @returns {string} 6位标准化代码
+ */
+const normalizeStockCode = (code) => {
+  if (!code) return '';
+  const s = String(code).trim().toUpperCase();
+  // 匹配6位数字（可能带 .SH/.SZ 后缀）
+  const m1 = s.match(/^(\d{6})(?:\.(?:SH|SZ))?$/i);
+  if (m1) return m1[1];
+  // 匹配 SH/SZ 前缀格式
+  const m2 = s.match(/^(?:SH|SZ)(\d{6})$/i);
+  if (m2) return m2[1];
+  // 尝试提取任意6位数字
+  const m3 = s.match(/(\d{6})/);
+  if (m3) return m3[1];
+  return s;
+};
+
 /**
  * 自选股管理 Hook
  * 封装自选股的加载、添加、移除逻辑
@@ -19,9 +40,9 @@ export const useWatchlist = (shouldLoad = true) => {
   const watchlistArray = useSelector(state => state.stock.watchlist, shallowEqual);
   const loading = useSelector(state => state.stock.loading.watchlist);
 
-  // 转换为 Set 方便快速查询
+  // 转换为 Set 方便快速查询（标准化为6位代码）
   const watchlistSet = useMemo(() => {
-    return new Set(watchlistArray);
+    return new Set(watchlistArray.map(normalizeStockCode));
   }, [watchlistArray]);
 
   // 初始化时加载自选股列表（只在 shouldLoad 为 true 时）
@@ -33,32 +54,36 @@ export const useWatchlist = (shouldLoad = true) => {
   }, [dispatch, shouldLoad]);
 
   /**
-   * 检查股票是否在自选股中
-   * @param {string} stockCode - 股票代码
+   * 检查股票是否在自选股中（支持带后缀的代码格式）
+   * @param {string} stockCode - 股票代码（支持 600000, 600000.SH 等格式）
    * @returns {boolean}
    */
   const isInWatchlist = useCallback((stockCode) => {
-    return watchlistSet.has(stockCode);
+    const normalized = normalizeStockCode(stockCode);
+    return watchlistSet.has(normalized);
   }, [watchlistSet]);
 
   /**
    * 切换自选股状态
-   * @param {string} stockCode - 股票代码
+   * @param {string} stockCode - 股票代码（支持带后缀格式，会自动标准化）
    * @param {string} stockName - 股票名称
    * @returns {Promise<boolean>} 操作是否成功
    */
   const toggleWatchlist = useCallback(async (stockCode, stockName) => {
-    const wasInWatchlist = watchlistSet.has(stockCode);
+    const normalized = normalizeStockCode(stockCode);
+    const wasInWatchlist = watchlistSet.has(normalized);
 
     logger.debug('useWatchlist', '切换自选股状态', {
       stockCode,
+      normalized,
       stockName,
       wasInWatchlist
     });
 
     try {
+      // 传递标准化后的6位代码给 Redux action
       await dispatch(toggleWatchlistAction({
-        stockCode,
+        stockCode: normalized,
         stockName,
         isInWatchlist: wasInWatchlist
       })).unwrap();
@@ -68,6 +93,7 @@ export const useWatchlist = (shouldLoad = true) => {
     } catch (error) {
       logger.error('useWatchlist', '切换自选股失败', error, {
         stockCode,
+        normalized,
         stockName
       });
       message.error(error.message || '操作失败，请稍后重试');
@@ -87,16 +113,17 @@ export const useWatchlist = (shouldLoad = true) => {
 
     let successCount = 0;
     const promises = stocks.map(async ({ code, name }) => {
-      if (!watchlistSet.has(code)) {
+      const normalized = normalizeStockCode(code);
+      if (!watchlistSet.has(normalized)) {
         try {
           await dispatch(toggleWatchlistAction({
-            stockCode: code,
+            stockCode: normalized,
             stockName: name,
             isInWatchlist: false
           })).unwrap();
           successCount++;
         } catch (error) {
-          logger.error('useWatchlist', '添加失败', error, { code, name });
+          logger.error('useWatchlist', '添加失败', error, { code, normalized, name });
         }
       }
     });

src/views/Community/hooks/useEventFilters.js

@@ -6,6 +6,7 @@ import { useSearchParams } from 'react-router-dom';
 import { logger } from '../../../utils/logger';
 import { usePostHogTrack } from '../../../hooks/usePostHogRedux';
 import { RETENTION_EVENTS } from '../../../lib/constants';
+import { getEventDetailUrl } from '@/utils/idEncoder';
 
 /**
  * 事件筛选逻辑 Hook
@@ -145,7 +146,7 @@ export const useEventFilters = ({ navigate, onEventClick, eventTimelineRef } = {
     });
 
     if (navigate) {
-      navigate(`/event-detail/${eventId}`);
+      navigate(getEventDetailUrl(eventId));
     }
   }, [navigate, track]);
 

src/views/Community/index.js

@@ -107,28 +107,6 @@ const Community = () => {
     }
   }, [events, loading, pagination, filters]);
 
-  // ⚡ 首次进入页面时滚动到内容区域（考虑导航栏高度）
-  const hasScrolled = useRef(false);
-  useEffect(() => {
-    // 只在第一次挂载时执行滚动
-    if (hasScrolled.current) return;
-
-    // 延迟执行，确保DOM已完全渲染
-    const timer = setTimeout(() => {
-      if (containerRef.current) {
-        hasScrolled.current = true;
-        // 滚动到容器顶部，自动考虑导航栏的高度
-        containerRef.current.scrollIntoView({
-          behavior: 'auto',
-          block: 'start',
-          inline: 'nearest'
-        });
-      }
-    }, 100);
-
-    return () => clearTimeout(timer);
-  }, []); // 空依赖数组，只在组件挂载时执行一次
-
   /**
    * ⚡ 【核心逻辑】注册 Socket 新事件回调 - 当收到新事件时智能刷新列表
    *

src/views/Concept/ConceptTimelineModal.js

@@ -31,6 +31,7 @@ import {
     useDisclosure,
     SimpleGrid,
     Tooltip,
+    useBreakpointValue,
 } from '@chakra-ui/react';
 import {
     ChevronDownIcon,
@@ -111,6 +112,9 @@ const ConceptTimelineModal = ({
     const [selectedNews, setSelectedNews] = useState(null);
     const [isNewsModalOpen, setIsNewsModalOpen] = useState(false);
 
+    // 响应式配置
+    const isMobile = useBreakpointValue({ base: true, md: false }, { fallback: 'md' });
+
     // 辅助函数：格式化日期显示（包含年份）
     const formatDateDisplay = (dateStr) => {
         const date = new Date(dateStr);
@@ -602,37 +606,41 @@ const ConceptTimelineModal = ({
                     onClose={onClose}
                     size="full"
                     scrollBehavior="inside"
+                    isCentered
                 >
                 <ModalOverlay />
-                <ModalContent maxW="1400px" m={4}>
+                <ModalContent maxW="1400px" m={{ base: 0, md: 'auto' }} mx="auto">
                     <ModalHeader
                         bgGradient="linear(135deg, purple.600 0%, purple.500 50%, pink.500 100%)"
                         color="white"
                         position="sticky"
                         top={0}
                         zIndex={10}
-                        py={6}
+                        py={{ base: 3, md: 6 }}
+                        px={{ base: 3, md: 6 }}
                         boxShadow="lg"
                     >
-                        <HStack spacing={4} flexWrap="wrap">
+                        <HStack spacing={{ base: 2, md: 4 }} flexWrap="wrap">
                             <Icon
                                 as={FaChartLine}
-                                boxSize={6}
+                                boxSize={{ base: 4, md: 6 }}
                                 filter="drop-shadow(0 2px 4px rgba(0,0,0,0.2))"
                             />
                             <Text
-                                fontSize="xl"
+                                fontSize={{ base: 'md', md: 'xl' }}
                                 fontWeight="bold"
                                 textShadow="0 2px 4px rgba(0,0,0,0.2)"
+                                noOfLines={1}
+                                maxW={{ base: '120px', md: 'none' }}
                             >
                                 {conceptName} - 历史时间轴
                             </Text>
                             <Badge
                                 colorScheme="yellow"
-                                px={3}
+                                px={{ base: 2, md: 3 }}
                                 py={1}
                                 borderRadius="full"
-                                fontSize="sm"
+                                fontSize={{ base: 'xs', md: 'sm' }}
                                 boxShadow="md"
                             >
                                 最近100天
@@ -640,20 +648,29 @@ const ConceptTimelineModal = ({
                             <Badge
                                 bg="whiteAlpha.300"
                                 color="white"
-                                px={3}
+                                px={{ base: 2, md: 3 }}
                                 py={1}
                                 borderRadius="full"
                                 fontSize="xs"
                                 backdropFilter="blur(10px)"
+                                display={{ base: 'none', sm: 'flex' }}
                             >
                                 🔥 Max版功能
                             </Badge>
                         </HStack>
                     </ModalHeader>
-                    <ModalCloseButton color="white" />
+                    <ModalCloseButton
+                        color="white"
+                        size="lg"
+                        top={{ base: 2, md: 4 }}
+                        right={{ base: 2, md: 4 }}
+                        _hover={{ bg: 'whiteAlpha.300' }}
+                        zIndex={20}
+                    />
 
                     <ModalBody
-                        py={6}
+                        py={{ base: 2, md: 6 }}
+                        px={{ base: 0, md: 6 }}
                         bg="gray.50"
                         css={{
                             '&::-webkit-scrollbar': {
@@ -680,103 +697,116 @@ const ConceptTimelineModal = ({
                                 </VStack>
                             </Center>
                         ) : timelineData.length > 0 ? (
-                            <Box position="relative" maxW="1200px" mx="auto" px={4}>
-                                {/* 图例说明 */}
-                                <Flex justify="center" mb={6} flexWrap="wrap" gap={4}>
+                            <Box position="relative" maxW="1200px" mx="auto" px={{ base: 2, md: 4 }}>
+                                {/* 图例说明 - H5端保持一行 */}
+                                <Flex
+                                    justify="center"
+                                    mb={{ base: 3, md: 6 }}
+                                    flexWrap={{ base: 'nowrap', md: 'wrap' }}
+                                    gap={{ base: 1, md: 4 }}
+                                    overflowX={{ base: 'auto', md: 'visible' }}
+                                    pb={{ base: 2, md: 0 }}
+                                    css={{
+                                        '&::-webkit-scrollbar': { display: 'none' },
+                                        scrollbarWidth: 'none',
+                                    }}
+                                >
                                     <HStack
-                                        spacing={2}
-                                        px={4}
-                                        py={2}
+                                        spacing={{ base: 1, md: 2 }}
+                                        px={{ base: 2, md: 4 }}
+                                        py={{ base: 1, md: 2 }}
                                         bg="purple.50"
                                         borderRadius="lg"
                                         border="1px solid"
                                         borderColor="purple.200"
                                         boxShadow="sm"
-                                        transition="all 0.2s"
-                                        _hover={{ transform: 'translateY(-2px)', boxShadow: 'md' }}
+                                        flexShrink={0}
                                     >
-                                        <Box w={3} h={3} bg="#9F7AEA" borderRadius="full" boxShadow="sm" />
-                                        <Text fontSize="sm" fontWeight="medium" color="gray.700">📰 新闻</Text>
+                                        <Box w={{ base: 2, md: 3 }} h={{ base: 2, md: 3 }} bg="#9F7AEA" borderRadius="full" />
+                                        <Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="medium" color="gray.700" whiteSpace="nowrap">📰 新闻</Text>
                                     </HStack>
                                     <HStack
-                                        spacing={2}
-                                        px={4}
-                                        py={2}
+                                        spacing={{ base: 1, md: 2 }}
+                                        px={{ base: 2, md: 4 }}
+                                        py={{ base: 1, md: 2 }}
                                         bg="purple.50"
                                         borderRadius="lg"
                                         border="1px solid"
                                         borderColor="purple.300"
                                         boxShadow="sm"
-                                        transition="all 0.2s"
-                                        _hover={{ transform: 'translateY(-2px)', boxShadow: 'md' }}
+                                        flexShrink={0}
                                     >
-                                        <Box w={3} h={3} bg="#805AD5" borderRadius="full" boxShadow="sm" />
-                                        <Text fontSize="sm" fontWeight="medium" color="gray.700">📊 研报</Text>
+                                        <Box w={{ base: 2, md: 3 }} h={{ base: 2, md: 3 }} bg="#805AD5" borderRadius="full" />
+                                        <Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="medium" color="gray.700" whiteSpace="nowrap">📊 研报</Text>
                                     </HStack>
                                     <HStack
-                                        spacing={2}
-                                        px={4}
-                                        py={2}
+                                        spacing={{ base: 1, md: 2 }}
+                                        px={{ base: 2, md: 4 }}
+                                        py={{ base: 1, md: 2 }}
                                         bg="red.50"
                                         borderRadius="lg"
                                         border="1px solid"
                                         borderColor="red.200"
                                         boxShadow="sm"
-                                        transition="all 0.2s"
-                                        _hover={{ transform: 'translateY(-2px)', boxShadow: 'md' }}
+                                        flexShrink={0}
                                     >
-                                        <Icon as={FaArrowUp} color="red.500" boxSize={3} />
-                                        <Text fontSize="sm" fontWeight="medium" color="gray.700">上涨</Text>
+                                        <Icon as={FaArrowUp} color="red.500" boxSize={{ base: 2, md: 3 }} />
+                                        <Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="medium" color="gray.700" whiteSpace="nowrap">上涨</Text>
                                     </HStack>
                                     <HStack
-                                        spacing={2}
-                                        px={4}
-                                        py={2}
+                                        spacing={{ base: 1, md: 2 }}
+                                        px={{ base: 2, md: 4 }}
+                                        py={{ base: 1, md: 2 }}
                                         bg="green.50"
                                         borderRadius="lg"
                                         border="1px solid"
                                         borderColor="green.200"
                                         boxShadow="sm"
-                                        transition="all 0.2s"
-                                        _hover={{ transform: 'translateY(-2px)', boxShadow: 'md' }}
+                                        flexShrink={0}
                                     >
-                                        <Icon as={FaArrowDown} color="green.500" boxSize={3} />
-                                        <Text fontSize="sm" fontWeight="medium" color="gray.700">下跌</Text>
+                                        <Icon as={FaArrowDown} color="green.500" boxSize={{ base: 2, md: 3 }} />
+                                        <Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="medium" color="gray.700" whiteSpace="nowrap">下跌</Text>
                                     </HStack>
                                     <HStack
-                                        spacing={2}
-                                        px={4}
-                                        py={2}
+                                        spacing={{ base: 1, md: 2 }}
+                                        px={{ base: 2, md: 4 }}
+                                        py={{ base: 1, md: 2 }}
                                         bg="orange.50"
                                         borderRadius="lg"
                                         border="1px solid"
                                         borderColor="orange.200"
                                         boxShadow="sm"
-                                        transition="all 0.2s"
-                                        _hover={{ transform: 'translateY(-2px)', boxShadow: 'md' }}
+                                        flexShrink={0}
                                     >
-                                        <Text fontSize="sm" fontWeight="bold">🔥</Text>
-                                        <Text fontSize="sm" fontWeight="medium" color="gray.700">涨3%+</Text>
+                                        <Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="bold">🔥</Text>
+                                        <Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="medium" color="gray.700" whiteSpace="nowrap">涨3%+</Text>
                                     </HStack>
                                 </Flex>
 
                                 {/* FullCalendar 日历组件 */}
                                 <Box
-                                    height={{ base: '600px', md: '700px' }}
+                                    height={{ base: '500px', md: '700px' }}
                                     bg="white"
-                                    borderRadius="xl"
-                                    boxShadow="lg"
-                                    p={4}
+                                    borderRadius={{ base: 'none', md: 'xl' }}
+                                    boxShadow={{ base: 'none', md: 'lg' }}
+                                    p={{ base: 1, md: 4 }}
                                     sx={{
                                         // FullCalendar 样式定制
                                         '.fc': {
                                             height: '100%',
                                         },
                                         '.fc-header-toolbar': {
-                                            marginBottom: '1.5rem',
+                                            marginBottom: { base: '0.5rem', md: '1.5rem' },
+                                            padding: { base: '0 4px', md: '0' },
+                                            flexWrap: 'nowrap',
+                                            gap: { base: '4px', md: '8px' },
+                                        },
+                                        '.fc-toolbar-chunk': {
+                                            display: 'flex',
+                                            alignItems: 'center',
                                         },
                                         '.fc-toolbar-title': {
-                                            fontSize: '1.5rem',
+                                            fontSize: { base: '1rem', md: '1.5rem' },
                                             fontWeight: 'bold',
                                             color: 'purple.600',
                                         },
@@ -784,6 +814,8 @@ const ConceptTimelineModal = ({
                                             backgroundColor: '#9F7AEA',
                                             borderColor: '#9F7AEA',
                                             color: 'white',
+                                            padding: { base: '4px 8px', md: '6px 12px' },
+                                            fontSize: { base: '12px', md: '14px' },
                                             '&:hover': {
                                                 backgroundColor: '#805AD5',
                                                 borderColor: '#805AD5',
@@ -806,14 +838,18 @@ const ConceptTimelineModal = ({
                                             },
                                         },
                                         '.fc-daygrid-day-number': {
-                                            padding: '4px',
-                                            fontSize: '0.875rem',
+                                            padding: { base: '2px', md: '4px' },
+                                            fontSize: { base: '0.75rem', md: '0.875rem' },
+                                        },
+                                        '.fc-col-header-cell-cushion': {
+                                            fontSize: { base: '0.75rem', md: '0.875rem' },
+                                            padding: { base: '4px 2px', md: '8px' },
                                         },
                                         '.fc-event': {
                                             cursor: 'pointer',
                                             border: 'none',
-                                            padding: '2px 4px',
-                                            fontSize: '0.75rem',
+                                            padding: { base: '1px 2px', md: '2px 4px' },
+                                            fontSize: { base: '0.65rem', md: '0.75rem' },
                                             fontWeight: 'bold',
                                             borderRadius: '4px',
                                             transition: 'all 0.2s',
@@ -823,7 +859,13 @@ const ConceptTimelineModal = ({
                                             },
                                         },
                                         '.fc-daygrid-event-harness': {
-                                            marginBottom: '2px',
+                                            marginBottom: { base: '1px', md: '2px' },
+                                        },
+                                        // H5 端隐藏事件文字，只显示色块
+                                        '@media (max-width: 768px)': {
+                                            '.fc-event-title': {
+                                                fontSize: '0.6rem',
+                                            },
                                         },
                                     }}
                                 >
@@ -882,32 +924,11 @@ const ConceptTimelineModal = ({
                         )}
 
                         {/* 风险提示 */}
-                        <Box px={6}>
+                        <Box px={{ base: 2, md: 6 }}>
                             <RiskDisclaimer variant="default" />
                         </Box>
                     </ModalBody>
 
-                    <ModalFooter
-                        borderTop="2px solid"
-                        borderColor="purple.100"
-                        bg="gray.50"
-                        py={4}
-                    >
-                        <Button
-                            colorScheme="purple"
-                            size="lg"
-                            px={8}
-                            onClick={onClose}
-                            boxShadow="md"
-                            _hover={{
-                                transform: 'translateY(-2px)',
-                                boxShadow: 'lg',
-                            }}
-                            transition="all 0.2s"
-                        >
-                            关闭
-                        </Button>
-                    </ModalFooter>
                 </ModalContent>
             </Modal>
             )}

src/views/Concept/index.js

@@ -78,6 +78,7 @@ import {
     MenuList,
     MenuItem,
     Collapse,
+    useBreakpointValue,
 } from '@chakra-ui/react';
 import { SearchIcon, ViewIcon, CalendarIcon, ExternalLinkIcon, StarIcon, ChevronDownIcon, InfoIcon, CloseIcon, ChevronRightIcon } from '@chakra-ui/icons';
 import { FaThLarge, FaList, FaTags, FaChartLine, FaRobot, FaTable, FaHistory, FaBrain, FaLightbulb, FaRocket, FaShieldAlt, FaCalendarAlt, FaArrowUp, FaArrowDown, FaNewspaper, FaFileAlt, FaExpand, FaCompress, FaClock, FaLock } from 'react-icons/fa';
@@ -85,6 +86,8 @@ import { BsGraphUp, BsLightningFill } from 'react-icons/bs';
 import { keyframes } from '@emotion/react';
 import ConceptTimelineModal from './ConceptTimelineModal';
 import ConceptStatsPanel from './components/ConceptStatsPanel';
+import ConceptStocksModal from '@components/ConceptStocksModal';
+import TradeDatePicker from '@components/TradeDatePicker';
 // 导航栏已由 MainLayout 提供，无需在此导入
 // 导入订阅权限管理
 import { useSubscription } from '../../hooks/useSubscription';
@@ -527,109 +530,6 @@ const ConceptCenter = () => {
         return `https://valuefrontier.cn/company?scode=${seccode}`;
     };
 
-    // 渲染动态表格列
-    const renderStockTable = () => {
-        if (!selectedConceptStocks || selectedConceptStocks.length === 0) {
-            return <Text>暂无相关股票数据</Text>;
-        }
-
-        const allFields = new Set();
-        selectedConceptStocks.forEach(stock => {
-            Object.keys(stock).forEach(key => allFields.add(key));
-        });
-
-        // 定义固定的列顺序，包含新增的现价和涨跌幅列
-        const orderedFields = ['stock_name', 'stock_code', 'current_price', 'change_percent'];
-        allFields.forEach(field => {
-            if (!orderedFields.includes(field)) {
-                orderedFields.push(field);
-            }
-        });
-
-        return (
-            <Box>
-                {loadingStockData && (
-                    <Box mb={4} textAlign="center">
-                        <HStack justify="center" spacing={2}>
-                            <Spinner size="sm" color="purple.500" />
-                            <Text fontSize="sm" color="gray.600">正在获取行情数据...</Text>
-                        </HStack>
-                    </Box>
-                )}
-                
-                <TableContainer maxH="60vh" overflowY="auto">
-                    <Table variant="simple" size="sm">
-                        <Thead position="sticky" top={0} bg="white" zIndex={1}>
-                            <Tr>
-                                {orderedFields.map(field => (
-                                    <Th key={field}>
-                                        {field === 'stock_name' ? '股票名称' :
-                                            field === 'stock_code' ? '股票代码' :
-                                                field === 'current_price' ? '现价' :
-                                                    field === 'change_percent' ? '当日涨跌幅' : field}
-                                    </Th>
-                                ))}
-                            </Tr>
-                        </Thead>
-                        <Tbody>
-                            {selectedConceptStocks.map((stock, idx) => {
-                                const marketData = stockMarketData[stock.stock_code];
-                                const companyLink = generateCompanyLink(stock.stock_code);
-                                
-                                return (
-                                    <Tr key={idx} _hover={{ bg: 'gray.50' }}>
-                                        {orderedFields.map(field => {
-                                            let cellContent = stock[field] || '-';
-                                            let cellProps = {};
-
-                                            // 处理特殊字段
-                                            if (field === 'current_price') {
-                                                cellContent = marketData ? formatPrice(marketData.close) : (loadingStockData ? <Spinner size="xs" /> : '-');
-                                            } else if (field === 'change_percent') {
-                                                if (marketData) {
-                                                    cellContent = formatStockChangePercent(marketData.change_percent);
-                                                    cellProps.color = `${getStockChangeColor(marketData.change_percent)}.500`;
-                                                    cellProps.fontWeight = 'bold';
-                                                } else {
-                                                    cellContent = loadingStockData ? <Spinner size="xs" /> : '-';
-                                                }
-                                            } else if (field === 'stock_name' || field === 'stock_code') {
-                                                // 添加超链接
-                                                cellContent = (
-                                                    <Text
-                                                        as="a"
-                                                        href={companyLink}
-                                                        target="_blank"
-                                                        rel="noopener noreferrer"
-                                                        color="blue.600"
-                                                        textDecoration="underline"
-                                                        _hover={{
-                                                            color: 'blue.800',
-                                                            textDecoration: 'underline'
-                                                        }}
-                                                        cursor="pointer"
-                                                    >
-                                                        {stock[field] || '-'}
-                                                    </Text>
-                                                );
-                                            }
-
-                                            return (
-                                                <Td key={field} {...cellProps}>
-                                                    {cellContent}
-                                                </Td>
-                                            );
-                                        })}
-                                    </Tr>
-                                );
-                            })}
-                        </Tbody>
-                    </Table>
-                </TableContainer>
-            </Box>
-        );
-    };
-
     // 格式化添加日期显示
     const formatAddedDate = (concept) => {
         // 优先使用 created_at 或 added_date 字段
@@ -672,6 +572,10 @@ const ConceptCenter = () => {
         const changePercent = concept.price_info?.avg_change_pct;
         const changeColor = getChangeColor(changePercent);
         const hasChange = changePercent !== null && changePercent !== undefined;
+        // H5 端使用更紧凑的尺寸
+        const isMobile = useBreakpointValue({ base: true, md: false });
+        const coverHeight = useBreakpointValue({ base: '100px', md: '180px' });
+        const logoSize = useBreakpointValue({ base: '60px', md: '120px' });
 
         // 生成随机涨幅数字背景
         const generateNumbersBackground = () => {
@@ -705,7 +609,7 @@ const ConceptCenter = () => {
                 boxShadow="0 4px 12px rgba(0, 0, 0, 0.1)"
             >
                 {/* 毛玻璃涨幅数字背景 */}
-                <Box position="relative" height="180px" overflow="hidden">
+                <Box position="relative" height={coverHeight} overflow="hidden">
                     {/* 渐变背景层 */}
                     <Box
                         position="absolute"
@@ -757,8 +661,8 @@ const ConceptCenter = () => {
                         top="50%"
                         left="50%"
                         transform="translate(-50%, -50%)"
-                        width="120px"
-                        height="120px"
+                        width={logoSize}
+                        height={logoSize}
                         opacity={0.15}
                     >
                         <Image
@@ -849,11 +753,11 @@ const ConceptCenter = () => {
                     </Badge>
                 </Box>
 
-                <CardBody p={4}>
-                    <VStack align="start" spacing={2}>
+                <CardBody p={{ base: 3, md: 4 }}>
+                    <VStack align="start" spacing={{ base: 1, md: 2 }}>
                         {/* 概念名称 */}
                         <Heading
-                            size="sm"
+                            size={{ base: 'xs', md: 'sm' }}
                             color="gray.800"
                             noOfLines={1}
                             bgGradient="linear(to-r, purple.600, pink.600)"
@@ -863,15 +767,15 @@ const ConceptCenter = () => {
                             {concept.concept}
                         </Heading>
 
-                        {/* 描述信息 */}
-                        <Text color="gray.600" fontSize="xs" noOfLines={2} minH="32px">
+                        {/* 描述信息 - H5端显示1行 */}
+                        <Text color="gray.600" fontSize="xs" noOfLines={isMobile ? 1 : 2} minH={{ base: '16px', md: '32px' }}>
                             {concept.description || '暂无描述信息'}
                         </Text>
 
                         {concept.stocks && concept.stocks.length > 0 && (
                             <Box
                                 width="100%"
-                                p={3}
+                                p={{ base: 2, md: 3 }}
                                 bg="linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%)"
                                 borderRadius="lg"
                                 cursor="pointer"
@@ -886,7 +790,7 @@ const ConceptCenter = () => {
                             >
                                 <Flex align="center" justify="space-between">
                                     <Box flex={1}>
-                                        <HStack spacing={2} mb={2}>
+                                        <HStack spacing={2} mb={{ base: 1, md: 2 }}>
                                             <Icon as={FaChartLine} boxSize={3} color="purple.500" />
                                             <Text fontSize="xs" color="purple.700" fontWeight="bold">
                                                 热门个股
@@ -942,20 +846,20 @@ const ConceptCenter = () => {
                             </Box>
                         )}
 
-                        <Divider borderColor="purple.100" />
+                        <Divider borderColor="purple.100" my={{ base: 1, md: 0 }} />
 
                         <Flex width="100%" justify="space-between" align="center">
                             {formatAddedDate(concept)}
 
                             <Button
-                                size="sm"
+                                size={{ base: 'xs', md: 'sm' }}
                                 leftIcon={<FaHistory />}
                                 bgGradient="linear(to-r, purple.500, pink.500)"
                                 color="white"
                                 variant="solid"
                                 onClick={(e) => handleViewContent(e, concept.concept, concept.concept_id)}
                                 borderRadius="full"
-                                px={4}
+                                px={{ base: 2, md: 4 }}
                                 fontWeight="medium"
                                 boxShadow="0 4px 12px rgba(139, 92, 246, 0.3)"
                                 _hover={{
@@ -1179,23 +1083,23 @@ const ConceptCenter = () => {
                 align={{ base: 'stretch', lg: 'center' }}
                 gap={4}
             >
-                <HStack spacing={3}>
-                    <Icon as={FaCalendarAlt} color="purple.500" boxSize={5} />
-                    <Text fontWeight="bold" color="purple.700">交易日期：</Text>
-                </HStack>
-
-                <Input
-                    type="date"
-                    value={selectedDate ? selectedDate.toISOString().split('T')[0] : ''}
-                    onChange={handleDateChange}
-                    max={new Date().toISOString().split('T')[0]}
-                    width={{ base: '100%', lg: '200px' }}
-                    focusBorderColor="purple.500"
-                    borderColor="purple.200"
-                    borderRadius="lg"
-                    fontWeight="medium"
+                {/* 使用通用日期选择器组件 */}
+                <TradeDatePicker
+                    value={selectedDate}
+                    onChange={(date) => {
+                        const dateStr = date.toISOString().split('T')[0];
+                        const previousDate = selectedDate ? selectedDate.toISOString().split('T')[0] : null;
+                        trackFilterApplied('date', dateStr, previousDate);
+                        setSelectedDate(date);
+                        setCurrentPage(1);
+                        updateUrlParams({ date: dateStr, page: 1 });
+                        fetchConcepts(searchQuery, 1, date, sortBy);
+                    }}
+                    latestTradeDate={latestTradeDate}
+                    label="交易日期"
                 />
 
+                {/* 快捷按钮保留在页面内 */}
                 <ButtonGroup size="sm" variant="outline" flexWrap="wrap">
                     <Button
                         onClick={() => handleQuickDateSelect(0)}
@@ -1246,25 +1150,6 @@ const ConceptCenter = () => {
                         一月前
                     </Button>
                 </ButtonGroup>
-
-                {latestTradeDate && (
-                    <Tooltip label="数据库中最新的交易日期">
-                        <HStack
-                            spacing={2}
-                            bg="blue.50"
-                            px={3}
-                            py={1.5}
-                            borderRadius="full"
-                            border="1px solid"
-                            borderColor="blue.200"
-                        >
-                            <Icon as={InfoIcon} color="blue.500" boxSize={3} />
-                            <Text fontSize="sm" color="blue.600" fontWeight="medium">
-                                最新: {latestTradeDate.toLocaleDateString('zh-CN')}
-                            </Text>
-                        </HStack>
-                    </Tooltip>
-                )}
             </Flex>
         </Box>
     );
@@ -1463,7 +1348,7 @@ const ConceptCenter = () => {
                                             fontSize="md"
                                             transition="all 0.2s"
                                             border="none"
-                                            height="100%"
+                                            alignSelf="stretch"
                                             boxShadow="inset 0 1px 0 rgba(255, 255, 255, 0.2)"
                                         >
                                             搜索
@@ -1598,7 +1483,7 @@ const ConceptCenter = () => {
                         )}
 
                         {loading ? (
-                            <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={6}>
+                            <SimpleGrid columns={{ base: 2, md: 2, lg: 3 }} spacing={{ base: 3, md: 6 }}>
                                 {[...Array(12)].map((_, i) => (
                                     <SkeletonCard key={i} />
                                 ))}
@@ -1606,7 +1491,7 @@ const ConceptCenter = () => {
                         ) : concepts.length > 0 ? (
                             <>
                                 {viewMode === 'grid' ? (
-                                    <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={6} className="concept-grid">
+                                    <SimpleGrid columns={{ base: 2, md: 2, lg: 3 }} spacing={{ base: 3, md: 6 }} className="concept-grid">
                                         {concepts.map((concept, index) => (
                                             <Box key={concept.concept_id} className="concept-item" role="group">
                                                 <ConceptCard concept={concept} position={index} />
@@ -1758,32 +1643,15 @@ const ConceptCenter = () => {
                 </Flex>
             </Container>
 
-            {/* 股票详情Modal */}
-            <Modal
+            {/* 股票详情Modal - 复用通用组件 */}
+            <ConceptStocksModal
                 isOpen={isStockModalOpen}
                 onClose={() => setIsStockModalOpen(false)}
-                size="6xl"
-                scrollBehavior="inside"
-            >
-                <ModalOverlay />
-                <ModalContent>
-                    <ModalHeader bg="purple.500" color="white">
-                        <HStack>
-                            <Icon as={FaTable} />
-                            <Text>{selectedConceptName} - 相关个股</Text>
-                        </HStack>
-                    </ModalHeader>
-                    <ModalCloseButton color="white" />
-                    <ModalBody py={6}>
-                        {renderStockTable()}
-                    </ModalBody>
-                    <ModalFooter>
-                        <Button colorScheme="purple" onClick={() => setIsStockModalOpen(false)}>
-                            关闭
-                        </Button>
-                    </ModalFooter>
-                </ModalContent>
-            </Modal>
+                concept={{
+                    concept_name: selectedConceptName,
+                    stocks: selectedConceptStocks
+                }}
+            />
             {/* 时间轴Modal */}
             <ConceptTimelineModal
                 isOpen={isTimelineModalOpen}

src/views/Dashboard/Center.js

@@ -62,6 +62,7 @@ import {
 } from 'react-icons/fi';
 import MyFutureEvents from './components/MyFutureEvents';
 import InvestmentPlanningCenter from './components/InvestmentPlanningCenter';
+import { getEventDetailUrl } from '@/utils/idEncoder';
 
 export default function CenterDashboard() {
   const { user } = useAuth();
@@ -441,7 +442,7 @@ export default function CenterDashboard() {
                         <VStack align="stretch" spacing={3}>
                           <LinkOverlay
                             as={Link}
-                            to={`/event-detail/${event.id}`}
+                            to={getEventDetailUrl(event.id)}
                           >
                             <Text fontWeight="medium" fontSize="md" noOfLines={2}>
                               {event.title}

src/views/Dashboard/components/CalendarPanel.tsx

@@ -3,44 +3,24 @@
  * 使用 FullCalendar 展示投资计划、复盘等事件
  */
 
-import React, { useState } from 'react';
+import React, { useState, lazy, Suspense } from 'react';
 import {
   Box,
-  Button,
-  Badge,
-  IconButton,
-  Flex,
   Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
-  ModalFooter,
   ModalBody,
   ModalCloseButton,
   useDisclosure,
   VStack,
-  HStack,
   Text,
   Spinner,
   Center,
-  Tooltip,
   Icon,
-  Input,
-  FormControl,
-  FormLabel,
-  Textarea,
-  Select,
-  Tag,
-  TagLabel,
-  TagLeftIcon,
+  Link,
 } from '@chakra-ui/react';
-import {
-  FiPlus,
-  FiEdit2,
-  FiTrash2,
-  FiStar,
-  FiTrendingUp,
-} from 'react-icons/fi';
+import { FiCalendar } from 'react-icons/fi';
 import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
@@ -50,23 +30,14 @@ import dayjs, { Dayjs } from 'dayjs';
 import 'dayjs/locale/zh-cn';
 
 import { usePlanningData } from './PlanningContext';
-import type { InvestmentEvent, EventType } from '@/types';
-import { logger } from '@/utils/logger';
-import { getApiBase } from '@/utils/apiConfig';
+import { EventDetailCard } from './EventDetailCard';
+import type { InvestmentEvent } from '@/types';
+
+// 懒加载投资日历组件
+const InvestmentCalendar = lazy(() => import('@/views/Community/components/InvestmentCalendar'));
 
 dayjs.locale('zh-cn');
 
-/**
- * 新事件表单数据类型
- */
-interface NewEventForm {
-  title: string;
-  description: string;
-  type: EventType;
-  importance: number;
-  stocks: string;
-}
-
 /**
  * FullCalendar 事件类型
  */
@@ -89,26 +60,20 @@ interface CalendarEvent {
 export const CalendarPanel: React.FC = () => {
   const {
     allEvents,
-    loadAllData,
     loading,
-    setActiveTab,
-    toast,
     borderColor,
     secondaryText,
+    setViewMode,
+    setListTab,
   } = usePlanningData();
 
+  // 详情弹窗
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { isOpen: isAddOpen, onOpen: onAddOpen, onClose: onAddClose } = useDisclosure();
+  // 投资日历弹窗
+  const [isInvestmentCalendarOpen, setIsInvestmentCalendarOpen] = useState(false);
 
   const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);
   const [selectedDateEvents, setSelectedDateEvents] = useState<InvestmentEvent[]>([]);
-  const [newEvent, setNewEvent] = useState<NewEventForm>({
-    title: '',
-    description: '',
-    type: 'plan',
-    importance: 3,
-    stocks: '',
-  });
 
   // 转换数据为 FullCalendar 格式
   const calendarEvents: CalendarEvent[] = allEvents.map(event => ({
@@ -150,128 +115,8 @@ export const CalendarPanel: React.FC = () => {
     onOpen();
   };
 
-  // 添加新事件
-  const handleAddEvent = async (): Promise<void> => {
-    try {
-      const base = getApiBase();
-
-      const eventData = {
-        ...newEvent,
-        event_date: (selectedDate ? selectedDate.format('YYYY-MM-DD') : dayjs().format('YYYY-MM-DD')),
-        stocks: newEvent.stocks.split(',').map(s => s.trim()).filter(s => s),
-      };
-
-      const response = await fetch(base + '/api/account/calendar/events', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-        body: JSON.stringify(eventData),
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        if (data.success) {
-          logger.info('CalendarPanel', '添加事件成功', {
-            eventTitle: eventData.title,
-            eventDate: eventData.event_date
-          });
-          toast({
-            title: '添加成功',
-            description: '投资计划已添加',
-            status: 'success',
-            duration: 3000,
-          });
-          onAddClose();
-          loadAllData();
-          setNewEvent({
-            title: '',
-            description: '',
-            type: 'plan',
-            importance: 3,
-            stocks: '',
-          });
-        }
-      }
-    } catch (error) {
-      logger.error('CalendarPanel', 'handleAddEvent', error, {
-        eventTitle: newEvent?.title
-      });
-      toast({
-        title: '添加失败',
-        description: '无法添加投资计划',
-        status: 'error',
-        duration: 3000,
-      });
-    }
-  };
-
-  // 删除事件
-  const handleDeleteEvent = async (eventId: number): Promise<void> => {
-    if (!eventId) {
-      logger.warn('CalendarPanel', '删除事件失败: 缺少事件 ID', { eventId });
-      toast({
-        title: '无法删除',
-        description: '缺少事件 ID',
-        status: 'error',
-        duration: 3000,
-      });
-      return;
-    }
-    try {
-      const base = getApiBase();
-
-      const response = await fetch(base + `/api/account/calendar/events/${eventId}`, {
-        method: 'DELETE',
-        credentials: 'include',
-      });
-
-      if (response.ok) {
-        logger.info('CalendarPanel', '删除事件成功', { eventId });
-        toast({
-          title: '删除成功',
-          status: 'success',
-          duration: 2000,
-        });
-        loadAllData();
-      }
-    } catch (error) {
-      logger.error('CalendarPanel', 'handleDeleteEvent', error, { eventId });
-      toast({
-        title: '删除失败',
-        status: 'error',
-        duration: 3000,
-      });
-    }
-  };
-
-  // 跳转到计划或复盘标签页
-  const handleViewDetails = (event: InvestmentEvent): void => {
-    if (event.type === 'plan') {
-      setActiveTab(1); // 跳转到"我的计划"标签页
-    } else if (event.type === 'review') {
-      setActiveTab(2); // 跳转到"我的复盘"标签页
-    }
-    onClose();
-  };
-
   return (
     <Box>
-      <Flex justify="flex-end" mb={4}>
-        <Button
-          size="sm"
-          colorScheme="purple"
-          leftIcon={<FiPlus />}
-          onClick={() => {
-            if (!selectedDate) setSelectedDate(dayjs());
-            onAddOpen();
-          }}
-        >
-          添加计划
-        </Button>
-      </Flex>
-
       {loading ? (
         <Center h="560px">
           <Spinner size="xl" color="purple.500" />
@@ -314,191 +159,92 @@ export const CalendarPanel: React.FC = () => {
             <ModalBody>
               {selectedDateEvents.length === 0 ? (
                 <Center py={8}>
-                  <VStack>
-                    <Text color={secondaryText}>当天没有事件</Text>
-                    <Button
-                      size="sm"
-                      colorScheme="purple"
-                      leftIcon={<FiPlus />}
-                      onClick={() => {
-                        onClose();
-                        onAddOpen();
-                      }}
-                    >
-                      添加投资计划
-                    </Button>
+                  <VStack spacing={3}>
+                    <Icon as={FiCalendar} boxSize={10} color="gray.300" />
+                    <Text color={secondaryText}>当天暂无事件</Text>
+                    <Text fontSize="sm" color={secondaryText}>
+                      可在
+                      <Link
+                        color="purple.500"
+                        fontWeight="medium"
+                        mx={1}
+                        onClick={() => {
+                          onClose();
+                          setViewMode?.('list');
+                          setListTab?.(0);
+                        }}
+                        cursor="pointer"
+                      >
+                        计划
+                      </Link>
+                      或
+                      <Link
+                        color="green.500"
+                        fontWeight="medium"
+                        mx={1}
+                        onClick={() => {
+                          onClose();
+                          setViewMode?.('list');
+                          setListTab?.(1);
+                        }}
+                        cursor="pointer"
+                      >
+                        复盘
+                      </Link>
+                      添加，或关注
+                      <Link
+                        color="blue.500"
+                        fontWeight="medium"
+                        mx={1}
+                        onClick={() => {
+                          onClose();
+                          setIsInvestmentCalendarOpen(true);
+                        }}
+                        cursor="pointer"
+                      >
+                        投资日历
+                      </Link>
+                      中的未来事件
+                    </Text>
                   </VStack>
                 </Center>
               ) : (
                 <VStack align="stretch" spacing={4}>
                   {selectedDateEvents.map((event, idx) => (
-                    <Box
+                    <EventDetailCard
                       key={idx}
-                      p={4}
-                      borderRadius="md"
-                      border="1px"
+                      event={event}
                       borderColor={borderColor}
-                    >
-                      <Flex justify="space-between" align="start" mb={2}>
-                        <VStack align="start" spacing={1} flex={1}>
-                          <HStack>
-                            <Text fontWeight="bold" fontSize="lg">
-                              {event.title}
-                            </Text>
-                            {event.source === 'future' ? (
-                              <Badge colorScheme="blue" variant="subtle">系统事件</Badge>
-                            ) : event.type === 'plan' ? (
-                              <Badge colorScheme="purple" variant="subtle">我的计划</Badge>
-                            ) : (
-                              <Badge colorScheme="green" variant="subtle">我的复盘</Badge>
-                            )}
-                          </HStack>
-                          {event.importance && (
-                            <HStack spacing={2}>
-                              <Icon as={FiStar} color="yellow.500" />
-                              <Text fontSize="sm" color={secondaryText}>
-                                重要度: {event.importance}/5
-                              </Text>
-                            </HStack>
-                          )}
-                        </VStack>
-                        <HStack>
-                          {!event.source || event.source === 'user' ? (
-                            <>
-                              <Tooltip label="查看详情">
-                                <IconButton
-                                  icon={<FiEdit2 />}
-                                  size="sm"
-                                  variant="ghost"
-                                  colorScheme="blue"
-                                  onClick={() => handleViewDetails(event)}
-                                  aria-label="查看详情"
-                                />
-                              </Tooltip>
-                              <IconButton
-                                icon={<FiTrash2 />}
-                                size="sm"
-                                variant="ghost"
-                                colorScheme="red"
-                                onClick={() => handleDeleteEvent(event.id)}
-                                aria-label="删除事件"
-                              />
-                            </>
-                          ) : null}
-                        </HStack>
-                      </Flex>
-
-                      {event.description && (
-                        <Text fontSize="sm" color={secondaryText} mb={2}>
-                          {event.description}
-                        </Text>
-                      )}
-
-                      {event.stocks && event.stocks.length > 0 && (
-                        <HStack spacing={2} flexWrap="wrap">
-                          <Text fontSize="sm" color={secondaryText}>相关股票:</Text>
-                          {event.stocks.map((stock, i) => (
-                            <Tag key={i} size="sm" colorScheme="blue">
-                              <TagLeftIcon as={FiTrendingUp} />
-                              <TagLabel>{stock}</TagLabel>
-                            </Tag>
-                          ))}
-                        </HStack>
-                      )}
-                    </Box>
+                      secondaryText={secondaryText}
+                    />
                   ))}
                 </VStack>
               )}
             </ModalBody>
-            <ModalFooter>
-              <Button onClick={onClose}>关闭</Button>
-            </ModalFooter>
           </ModalContent>
         </Modal>
       )}
 
-      {/* 添加投资计划 Modal */}
-      {isAddOpen && (
-        <Modal isOpen={isAddOpen} onClose={onAddClose} size="lg" closeOnOverlayClick={false} closeOnEsc={true}>
+      {/* 投资日历 Modal */}
+      {isInvestmentCalendarOpen && (
+        <Modal
+          isOpen={isInvestmentCalendarOpen}
+          onClose={() => setIsInvestmentCalendarOpen(false)}
+          size="6xl"
+        >
           <ModalOverlay />
-          <ModalContent>
-            <ModalHeader>
-              添加投资计划
-            </ModalHeader>
+          <ModalContent maxW="1200px">
+            <ModalHeader>投资日历</ModalHeader>
             <ModalCloseButton />
-            <ModalBody>
-              <VStack spacing={4}>
-                <FormControl isRequired>
-                  <FormLabel>标题</FormLabel>
-                  <Input
-                    value={newEvent.title}
-                    onChange={(e) => setNewEvent({ ...newEvent, title: e.target.value })}
-                    placeholder="例如：关注半导体板块"
-                  />
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>描述</FormLabel>
-                  <Textarea
-                    value={newEvent.description}
-                    onChange={(e) => setNewEvent({ ...newEvent, description: e.target.value })}
-                    placeholder="详细描述您的投资计划..."
-                    rows={3}
-                  />
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>类型</FormLabel>
-                  <Select
-                    value={newEvent.type}
-                    onChange={(e) => setNewEvent({ ...newEvent, type: e.target.value as EventType })}
-                  >
-                    <option value="plan">投资计划</option>
-                    <option value="review">投资复盘</option>
-                    <option value="reminder">提醒事项</option>
-                    <option value="analysis">分析任务</option>
-                  </Select>
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>重要度</FormLabel>
-                  <Select
-                    value={newEvent.importance}
-                    onChange={(e) => setNewEvent({ ...newEvent, importance: parseInt(e.target.value) })}
-                  >
-                    <option value={5}>⭐⭐⭐⭐⭐ 非常重要</option>
-                    <option value={4}>⭐⭐⭐⭐ 重要</option>
-                    <option value={3}>⭐⭐⭐ 一般</option>
-                    <option value={2}>⭐⭐ 次要</option>
-                    <option value={1}>⭐ 不重要</option>
-                  </Select>
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>相关股票（用逗号分隔）</FormLabel>
-                  <Input
-                    value={newEvent.stocks}
-                    onChange={(e) => setNewEvent({ ...newEvent, stocks: e.target.value })}
-                    placeholder="例如：600519,000858,002415"
-                  />
-                </FormControl>
-              </VStack>
+            <ModalBody pb={6}>
+              <Suspense fallback={<Center py={8}><Spinner size="xl" color="blue.500" /></Center>}>
+                <InvestmentCalendar />
+              </Suspense>
             </ModalBody>
-            <ModalFooter>
-              <Button variant="ghost" mr={3} onClick={onAddClose}>
-                取消
-              </Button>
-              <Button
-                colorScheme="purple"
-                onClick={handleAddEvent}
-                isDisabled={!newEvent.title}
-              >
-                添加
-              </Button>
-            </ModalFooter>
           </ModalContent>
         </Modal>
       )}
+
     </Box>
   );
 };

src/views/Dashboard/components/EventDetailCard.tsx

@@ -0,0 +1,145 @@
+/**
+ * EventDetailCard - 事件详情卡片组件
+ * 用于日历视图中展示单个事件的详细信息
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  Box,
+  Badge,
+  Flex,
+  HStack,
+  Text,
+  Tag,
+  TagLabel,
+  TagLeftIcon,
+  Button,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import {
+  FiTrendingUp,
+  FiChevronDown,
+  FiChevronUp,
+} from 'react-icons/fi';
+import type { InvestmentEvent } from '@/types';
+
+/**
+ * EventDetailCard Props
+ */
+export interface EventDetailCardProps {
+  /** 事件数据 */
+  event: InvestmentEvent;
+  /** 边框颜色 */
+  borderColor?: string;
+  /** 次要文字颜色 */
+  secondaryText?: string;
+}
+
+/**
+ * 最大显示行数
+ */
+const MAX_LINES = 3;
+
+/**
+ * EventDetailCard 组件
+ */
+export const EventDetailCard: React.FC<EventDetailCardProps> = ({
+  event,
+  borderColor: borderColorProp,
+  secondaryText: secondaryTextProp,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isOverflow, setIsOverflow] = useState(false);
+  const descriptionRef = useRef<HTMLParagraphElement>(null);
+
+  // 默认颜色
+  const defaultBorderColor = useColorModeValue('gray.200', 'gray.600');
+  const defaultSecondaryText = useColorModeValue('gray.600', 'gray.400');
+
+  const borderColor = borderColorProp || defaultBorderColor;
+  const secondaryText = secondaryTextProp || defaultSecondaryText;
+
+  // 检测内容是否溢出
+  useEffect(() => {
+    const el = descriptionRef.current;
+    if (el) {
+      // 计算行高和最大高度
+      const lineHeight = parseInt(getComputedStyle(el).lineHeight) || 20;
+      const maxHeight = lineHeight * MAX_LINES;
+      setIsOverflow(el.scrollHeight > maxHeight + 5); // 5px 容差
+    }
+  }, [event.description]);
+
+  // 获取事件类型标签
+  const getEventBadge = () => {
+    if (event.source === 'future') {
+      return <Badge colorScheme="blue" variant="subtle">系统事件</Badge>;
+    } else if (event.type === 'plan') {
+      return <Badge colorScheme="purple" variant="subtle">我的计划</Badge>;
+    } else if (event.type === 'review') {
+      return <Badge colorScheme="green" variant="subtle">我的复盘</Badge>;
+    }
+    return null;
+  };
+
+  return (
+    <Box
+      p={4}
+      borderRadius="md"
+      border="1px"
+      borderColor={borderColor}
+    >
+      {/* 标题和标签 */}
+      <Flex justify="space-between" align="start" mb={2}>
+        <HStack flexWrap="wrap" flex={1}>
+          <Text fontWeight="bold" fontSize="lg">
+            {event.title}
+          </Text>
+          {getEventBadge()}
+        </HStack>
+      </Flex>
+
+      {/* 描述内容 - 支持展开/收起 */}
+      {event.description && (
+        <Box mb={2}>
+          <Text
+            ref={descriptionRef}
+            fontSize="sm"
+            color={secondaryText}
+            noOfLines={isExpanded ? undefined : MAX_LINES}
+            whiteSpace="pre-wrap"
+          >
+            {event.description}
+          </Text>
+          {isOverflow && (
+            <Button
+              size="xs"
+              variant="link"
+              colorScheme="blue"
+              mt={1}
+              onClick={() => setIsExpanded(!isExpanded)}
+              rightIcon={isExpanded ? <FiChevronUp /> : <FiChevronDown />}
+            >
+              {isExpanded ? '收起' : '展开'}
+            </Button>
+          )}
+        </Box>
+      )}
+
+      {/* 相关股票 */}
+      {event.stocks && event.stocks.length > 0 && (
+        <HStack spacing={2} flexWrap="wrap">
+          <Text fontSize="sm" color={secondaryText}>相关股票:</Text>
+          {event.stocks.map((stock, i) => (
+            <Tag key={i} size="sm" colorScheme="blue" mb={1}>
+              <TagLeftIcon as={FiTrendingUp} />
+              <TagLabel>{stock}</TagLabel>
+            </Tag>
+          ))}
+        </HStack>
+      )}
+    </Box>
+  );
+};
+
+export default EventDetailCard;

src/views/Dashboard/components/EventFormModal.tsx

@@ -0,0 +1,496 @@
+/**
+ * EventFormModal - 通用事件表单弹窗组件
+ * 用于新建/编辑投资计划、复盘、日历事件等
+ *
+ * 通过 props 配置差异化行为：
+ * - 字段显示控制（日期选择器、类型、状态、重要度、标签等）
+ * - API 端点配置（investment-plans 或 calendar/events）
+ * - 主题颜色和标签文案
+ */
+
+import React, { useState, useEffect } from 'react';
+import {
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  VStack,
+  HStack,
+  Icon,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  FormControl,
+  FormLabel,
+  Textarea,
+  Select,
+  Tag,
+  TagLabel,
+  TagLeftIcon,
+  TagCloseButton,
+} from '@chakra-ui/react';
+import {
+  FiSave,
+  FiCalendar,
+  FiTrendingUp,
+  FiHash,
+} from 'react-icons/fi';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+
+import { usePlanningData } from './PlanningContext';
+import type { InvestmentEvent, EventType, EventStatus } from '@/types';
+import { logger } from '@/utils/logger';
+import { getApiBase } from '@/utils/apiConfig';
+
+dayjs.locale('zh-cn');
+
+/**
+ * 表单数据接口
+ */
+interface FormData {
+  date: string;
+  title: string;
+  content: string;
+  type: EventType;
+  stocks: string[];
+  tags: string[];
+  status: EventStatus;
+  importance: number;
+}
+
+/**
+ * EventFormModal Props
+ */
+export interface EventFormModalProps {
+  /** 弹窗是否打开 */
+  isOpen: boolean;
+  /** 关闭弹窗回调 */
+  onClose: () => void;
+  /** 模式：新建或编辑 */
+  mode: 'create' | 'edit';
+  /** 事件类型（新建时使用） */
+  eventType?: EventType;
+  /** 初始日期（新建时使用，如从日历点击） */
+  initialDate?: string;
+  /** 编辑时的原始事件数据 */
+  editingEvent?: InvestmentEvent | null;
+  /** 保存成功回调 */
+  onSuccess: () => void;
+  /** 主题颜色 */
+  colorScheme?: string;
+  /** 显示标签（如 "计划"、"复盘"、"事件"） */
+  label?: string;
+  /** 是否显示日期选择器 */
+  showDatePicker?: boolean;
+  /** 是否显示类型选择 */
+  showTypeSelect?: boolean;
+  /** 是否显示状态选择 */
+  showStatusSelect?: boolean;
+  /** 是否显示重要度选择 */
+  showImportance?: boolean;
+  /** 是否显示标签输入 */
+  showTags?: boolean;
+  /** 股票输入方式：'tag' 为标签形式，'text' 为逗号分隔文本 */
+  stockInputMode?: 'tag' | 'text';
+  /** API 端点 */
+  apiEndpoint?: 'investment-plans' | 'calendar/events';
+}
+
+/**
+ * EventFormModal 组件
+ */
+export const EventFormModal: React.FC<EventFormModalProps> = ({
+  isOpen,
+  onClose,
+  mode,
+  eventType = 'plan',
+  initialDate,
+  editingEvent,
+  onSuccess,
+  colorScheme = 'purple',
+  label = '事件',
+  showDatePicker = true,
+  showTypeSelect = false,
+  showStatusSelect = true,
+  showImportance = false,
+  showTags = true,
+  stockInputMode = 'tag',
+  apiEndpoint = 'investment-plans',
+}) => {
+  const { toast, secondaryText } = usePlanningData();
+
+  // 表单数据
+  const [formData, setFormData] = useState<FormData>({
+    date: initialDate || dayjs().format('YYYY-MM-DD'),
+    title: '',
+    content: '',
+    type: eventType,
+    stocks: [],
+    tags: [],
+    status: 'active',
+    importance: 3,
+  });
+
+  // 股票和标签输入框
+  const [stockInput, setStockInput] = useState<string>('');
+  const [tagInput, setTagInput] = useState<string>('');
+
+  // 保存中状态
+  const [saving, setSaving] = useState<boolean>(false);
+
+  // 初始化表单数据
+  useEffect(() => {
+    if (mode === 'edit' && editingEvent) {
+      setFormData({
+        date: dayjs(editingEvent.event_date || editingEvent.date).format('YYYY-MM-DD'),
+        title: editingEvent.title,
+        content: editingEvent.description || editingEvent.content || '',
+        type: editingEvent.type || eventType,
+        stocks: editingEvent.stocks || [],
+        tags: editingEvent.tags || [],
+        status: editingEvent.status || 'active',
+        importance: editingEvent.importance || 3,
+      });
+      // 如果是文本模式，将股票数组转为逗号分隔
+      if (stockInputMode === 'text' && editingEvent.stocks) {
+        setStockInput(editingEvent.stocks.join(','));
+      }
+    } else {
+      // 新建模式，重置表单
+      setFormData({
+        date: initialDate || dayjs().format('YYYY-MM-DD'),
+        title: '',
+        content: '',
+        type: eventType,
+        stocks: [],
+        tags: [],
+        status: 'active',
+        importance: 3,
+      });
+      setStockInput('');
+      setTagInput('');
+    }
+  }, [mode, editingEvent, eventType, initialDate, stockInputMode]);
+
+  // 保存数据
+  const handleSave = async (): Promise<void> => {
+    try {
+      setSaving(true);
+      const base = getApiBase();
+
+      // 构建请求数据
+      let requestData: Record<string, unknown> = { ...formData };
+
+      // 如果是文本模式，解析股票输入
+      if (stockInputMode === 'text' && stockInput) {
+        requestData.stocks = stockInput.split(',').map(s => s.trim()).filter(s => s);
+      }
+
+      // 根据 API 端点调整字段名
+      if (apiEndpoint === 'calendar/events') {
+        requestData = {
+          title: formData.title,
+          description: formData.content,
+          type: formData.type,
+          importance: formData.importance,
+          stocks: requestData.stocks,
+          event_date: formData.date,
+        };
+      }
+
+      const url = mode === 'edit' && editingEvent
+        ? `${base}/api/account/${apiEndpoint}/${editingEvent.id}`
+        : `${base}/api/account/${apiEndpoint}`;
+
+      const method = mode === 'edit' ? 'PUT' : 'POST';
+
+      const response = await fetch(url, {
+        method,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+        body: JSON.stringify(requestData),
+      });
+
+      if (response.ok) {
+        logger.info('EventFormModal', `${mode === 'edit' ? '更新' : '创建'}${label}成功`, {
+          itemId: editingEvent?.id,
+          title: formData.title,
+        });
+        toast({
+          title: mode === 'edit' ? '更新成功' : '创建成功',
+          status: 'success',
+          duration: 2000,
+        });
+        onClose();
+        onSuccess();
+      } else {
+        throw new Error('保存失败');
+      }
+    } catch (error) {
+      logger.error('EventFormModal', 'handleSave', error, {
+        itemId: editingEvent?.id,
+        title: formData?.title
+      });
+      toast({
+        title: '保存失败',
+        description: '无法保存数据',
+        status: 'error',
+        duration: 3000,
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 添加股票（Tag 模式）
+  const handleAddStock = (): void => {
+    if (stockInput.trim() && !formData.stocks.includes(stockInput.trim())) {
+      setFormData({
+        ...formData,
+        stocks: [...formData.stocks, stockInput.trim()],
+      });
+      setStockInput('');
+    }
+  };
+
+  // 移除股票（Tag 模式）
+  const handleRemoveStock = (index: number): void => {
+    setFormData({
+      ...formData,
+      stocks: formData.stocks.filter((_, i) => i !== index),
+    });
+  };
+
+  // 添加标签
+  const handleAddTag = (): void => {
+    if (tagInput.trim() && !formData.tags.includes(tagInput.trim())) {
+      setFormData({
+        ...formData,
+        tags: [...formData.tags, tagInput.trim()],
+      });
+      setTagInput('');
+    }
+  };
+
+  // 移除标签
+  const handleRemoveTag = (index: number): void => {
+    setFormData({
+      ...formData,
+      tags: formData.tags.filter((_, i) => i !== index),
+    });
+  };
+
+  // 获取标题 placeholder
+  const getTitlePlaceholder = (): string => {
+    switch (formData.type) {
+      case 'plan':
+        return '例如：布局新能源板块';
+      case 'review':
+        return '例如：本周操作复盘';
+      case 'reminder':
+        return '例如：关注半导体板块';
+      case 'analysis':
+        return '例如：行业分析任务';
+      default:
+        return '请输入标题';
+    }
+  };
+
+  // 获取内容 placeholder
+  const getContentPlaceholder = (): string => {
+    switch (formData.type) {
+      case 'plan':
+        return '详细描述您的投资计划...';
+      case 'review':
+        return '详细记录您的投资复盘...';
+      default:
+        return '详细描述...';
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl" closeOnOverlayClick={false} closeOnEsc={true}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          {mode === 'edit' ? '编辑' : '新建'}投资{label}
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <VStack spacing={4}>
+            {/* 日期选择器 */}
+            {showDatePicker && (
+              <FormControl isRequired>
+                <FormLabel>日期</FormLabel>
+                <InputGroup>
+                  <InputLeftElement pointerEvents="none">
+                    <Icon as={FiCalendar} color={secondaryText} />
+                  </InputLeftElement>
+                  <Input
+                    type="date"
+                    value={formData.date}
+                    onChange={(e) => setFormData({ ...formData, date: e.target.value })}
+                  />
+                </InputGroup>
+              </FormControl>
+            )}
+
+            {/* 标题 */}
+            <FormControl isRequired>
+              <FormLabel>标题</FormLabel>
+              <Input
+                value={formData.title}
+                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+                placeholder={getTitlePlaceholder()}
+              />
+            </FormControl>
+
+            {/* 内容/描述 */}
+            <FormControl>
+              <FormLabel>内容</FormLabel>
+              <Textarea
+                value={formData.content}
+                onChange={(e) => setFormData({ ...formData, content: e.target.value })}
+                placeholder={getContentPlaceholder()}
+                rows={6}
+              />
+            </FormControl>
+
+            {/* 类型选择 */}
+            {showTypeSelect && (
+              <FormControl>
+                <FormLabel>类型</FormLabel>
+                <Select
+                  value={formData.type}
+                  onChange={(e) => setFormData({ ...formData, type: e.target.value as EventType })}
+                >
+                  <option value="plan">投资计划</option>
+                  <option value="review">投资复盘</option>
+                  <option value="reminder">提醒事项</option>
+                  <option value="analysis">分析任务</option>
+                </Select>
+              </FormControl>
+            )}
+
+            {/* 状态选择 */}
+            {showStatusSelect && (
+              <FormControl>
+                <FormLabel>状态</FormLabel>
+                <Select
+                  value={formData.status}
+                  onChange={(e) => setFormData({ ...formData, status: e.target.value as EventStatus })}
+                >
+                  <option value="active">进行中</option>
+                  <option value="completed">已完成</option>
+                  <option value="cancelled">已取消</option>
+                </Select>
+              </FormControl>
+            )}
+
+            {/* 重要度选择 */}
+            {showImportance && (
+              <FormControl>
+                <FormLabel>重要度</FormLabel>
+                <Select
+                  value={formData.importance}
+                  onChange={(e) => setFormData({ ...formData, importance: parseInt(e.target.value) })}
+                >
+                  <option value={5}>⭐⭐⭐⭐⭐ 非常重要</option>
+                  <option value={4}>⭐⭐⭐⭐ 重要</option>
+                  <option value={3}>⭐⭐⭐ 一般</option>
+                  <option value={2}>⭐⭐ 次要</option>
+                  <option value={1}>⭐ 不重要</option>
+                </Select>
+              </FormControl>
+            )}
+
+            {/* 股票输入 - Tag 模式 */}
+            {stockInputMode === 'tag' && (
+              <FormControl>
+                <FormLabel>相关股票</FormLabel>
+                <HStack>
+                  <Input
+                    value={stockInput}
+                    onChange={(e) => setStockInput(e.target.value)}
+                    placeholder="输入股票代码"
+                    onKeyPress={(e) => e.key === 'Enter' && handleAddStock()}
+                  />
+                  <Button onClick={handleAddStock}>添加</Button>
+                </HStack>
+                <HStack mt={2} spacing={2} flexWrap="wrap">
+                  {formData.stocks.map((stock, idx) => (
+                    <Tag key={idx} size="sm" colorScheme="blue">
+                      <TagLeftIcon as={FiTrendingUp} />
+                      <TagLabel>{stock}</TagLabel>
+                      <TagCloseButton onClick={() => handleRemoveStock(idx)} />
+                    </Tag>
+                  ))}
+                </HStack>
+              </FormControl>
+            )}
+
+            {/* 股票输入 - 文本模式 */}
+            {stockInputMode === 'text' && (
+              <FormControl>
+                <FormLabel>相关股票（用逗号分隔）</FormLabel>
+                <Input
+                  value={stockInput}
+                  onChange={(e) => setStockInput(e.target.value)}
+                  placeholder="例如：600519,000858,002415"
+                />
+              </FormControl>
+            )}
+
+            {/* 标签输入 */}
+            {showTags && (
+              <FormControl>
+                <FormLabel>标签</FormLabel>
+                <HStack>
+                  <Input
+                    value={tagInput}
+                    onChange={(e) => setTagInput(e.target.value)}
+                    placeholder="输入标签"
+                    onKeyPress={(e) => e.key === 'Enter' && handleAddTag()}
+                  />
+                  <Button onClick={handleAddTag}>添加</Button>
+                </HStack>
+                <HStack mt={2} spacing={2} flexWrap="wrap">
+                  {formData.tags.map((tag, idx) => (
+                    <Tag key={idx} size="sm" colorScheme={colorScheme}>
+                      <TagLeftIcon as={FiHash} />
+                      <TagLabel>{tag}</TagLabel>
+                      <TagCloseButton onClick={() => handleRemoveTag(idx)} />
+                    </Tag>
+                  ))}
+                </HStack>
+              </FormControl>
+            )}
+          </VStack>
+        </ModalBody>
+        <ModalFooter>
+          <Button variant="ghost" mr={3} onClick={onClose}>
+            取消
+          </Button>
+          <Button
+            colorScheme={colorScheme}
+            onClick={handleSave}
+            isDisabled={!formData.title || (showDatePicker && !formData.date)}
+            isLoading={saving}
+            leftIcon={<FiSave />}
+          >
+            保存
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default EventFormModal;

src/views/Dashboard/components/EventPanel.tsx

@@ -0,0 +1,307 @@
+/**
+ * EventPanel - 通用事件面板组件
+ * 用于显示、编辑和管理投资计划或复盘
+ *
+ * 通过 props 配置差异化行为：
+ * - type: 'plan' | 'review'
+ * - colorScheme: 主题色
+ * - label: 显示文案
+ */
+
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  Box,
+  Badge,
+  IconButton,
+  Flex,
+  Grid,
+  Card,
+  CardBody,
+  VStack,
+  HStack,
+  Text,
+  Spinner,
+  Center,
+  Icon,
+  Tag,
+  TagLabel,
+  TagLeftIcon,
+} from '@chakra-ui/react';
+import {
+  FiEdit2,
+  FiTrash2,
+  FiFileText,
+  FiCalendar,
+  FiTrendingUp,
+  FiHash,
+  FiCheckCircle,
+  FiXCircle,
+  FiAlertCircle,
+} from 'react-icons/fi';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+
+import { usePlanningData } from './PlanningContext';
+import { EventFormModal } from './EventFormModal';
+import type { InvestmentEvent, EventStatus } from '@/types';
+import { logger } from '@/utils/logger';
+import { getApiBase } from '@/utils/apiConfig';
+
+dayjs.locale('zh-cn');
+
+/**
+ * 状态信息接口
+ */
+interface StatusInfo {
+  icon: React.ComponentType;
+  color: string;
+  text: string;
+}
+
+/**
+ * EventPanel Props
+ */
+export interface EventPanelProps {
+  /** 事件类型 */
+  type: 'plan' | 'review';
+  /** 主题颜色 */
+  colorScheme: string;
+  /** 显示标签（如 "计划" 或 "复盘"） */
+  label: string;
+  /** 外部触发打开模态框的计数器 */
+  openModalTrigger?: number;
+}
+
+/**
+ * EventPanel 组件
+ * 通用事件列表面板，显示投资计划或复盘
+ */
+export const EventPanel: React.FC<EventPanelProps> = ({
+  type,
+  colorScheme,
+  label,
+  openModalTrigger,
+}) => {
+  const {
+    allEvents,
+    loadAllData,
+    loading,
+    toast,
+    textColor,
+    secondaryText,
+    cardBg,
+  } = usePlanningData();
+
+  // 弹窗状态
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [editingItem, setEditingItem] = useState<InvestmentEvent | null>(null);
+  const [modalMode, setModalMode] = useState<'create' | 'edit'>('create');
+
+  // 使用 ref 记录上一次的 trigger 值，避免组件挂载时误触发
+  const prevTriggerRef = useRef<number>(openModalTrigger || 0);
+
+  // 筛选事件列表（按类型过滤，排除系统事件）
+  const events = allEvents.filter(event => event.type === type && event.source !== 'future');
+
+  // 监听外部触发打开新建模态框（修复 bug：只在值变化时触发）
+  useEffect(() => {
+    if (openModalTrigger !== undefined && openModalTrigger > prevTriggerRef.current) {
+      // 只有当 trigger 值增加时才打开弹窗
+      handleOpenModal(null);
+    }
+    prevTriggerRef.current = openModalTrigger || 0;
+  }, [openModalTrigger]);
+
+  // 打开编辑/新建模态框
+  const handleOpenModal = (item: InvestmentEvent | null = null): void => {
+    if (item) {
+      setEditingItem(item);
+      setModalMode('edit');
+    } else {
+      setEditingItem(null);
+      setModalMode('create');
+    }
+    setIsModalOpen(true);
+  };
+
+  // 关闭弹窗
+  const handleCloseModal = (): void => {
+    setIsModalOpen(false);
+    setEditingItem(null);
+  };
+
+  // 删除数据
+  const handleDelete = async (id: number): Promise<void> => {
+    if (!window.confirm('确定要删除吗？')) return;
+
+    try {
+      const base = getApiBase();
+
+      const response = await fetch(base + `/api/account/investment-plans/${id}`, {
+        method: 'DELETE',
+        credentials: 'include',
+      });
+
+      if (response.ok) {
+        logger.info('EventPanel', `删除${label}成功`, { itemId: id });
+        toast({
+          title: '删除成功',
+          status: 'success',
+          duration: 2000,
+        });
+        loadAllData();
+      }
+    } catch (error) {
+      logger.error('EventPanel', 'handleDelete', error, { itemId: id });
+      toast({
+        title: '删除失败',
+        status: 'error',
+        duration: 3000,
+      });
+    }
+  };
+
+  // 获取状态信息
+  const getStatusInfo = (status?: EventStatus): StatusInfo => {
+    switch (status) {
+      case 'completed':
+        return { icon: FiCheckCircle, color: 'green', text: '已完成' };
+      case 'cancelled':
+        return { icon: FiXCircle, color: 'red', text: '已取消' };
+      default:
+        return { icon: FiAlertCircle, color: 'blue', text: '进行中' };
+    }
+  };
+
+  // 渲染单个卡片
+  const renderCard = (item: InvestmentEvent): React.ReactElement => {
+    const statusInfo = getStatusInfo(item.status);
+
+    return (
+      <Card
+        key={item.id}
+        bg={cardBg}
+        shadow="sm"
+        _hover={{ shadow: 'md' }}
+        transition="all 0.2s"
+      >
+        <CardBody>
+          <VStack align="stretch" spacing={3}>
+            <Flex justify="space-between" align="start">
+              <VStack align="start" spacing={1} flex={1}>
+                <HStack>
+                  <Icon as={FiFileText} color={`${colorScheme}.500`} />
+                  <Text fontWeight="bold" fontSize="lg">
+                    {item.title}
+                  </Text>
+                </HStack>
+                <HStack spacing={2}>
+                  <Icon as={FiCalendar} boxSize={3} color={secondaryText} />
+                  <Text fontSize="sm" color={secondaryText}>
+                    {dayjs(item.event_date || item.date).format('YYYY年MM月DD日')}
+                  </Text>
+                  <Badge
+                    colorScheme={statusInfo.color}
+                    variant="subtle"
+                  >
+                    {statusInfo.text}
+                  </Badge>
+                </HStack>
+              </VStack>
+              <HStack>
+                <IconButton
+                  icon={<FiEdit2 />}
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => handleOpenModal(item)}
+                  aria-label={`编辑${label}`}
+                />
+                <IconButton
+                  icon={<FiTrash2 />}
+                  size="sm"
+                  variant="ghost"
+                  colorScheme="red"
+                  onClick={() => handleDelete(item.id)}
+                  aria-label={`删除${label}`}
+                />
+              </HStack>
+            </Flex>
+
+            {(item.content || item.description) && (
+              <Text fontSize="sm" color={textColor} noOfLines={3}>
+                {item.content || item.description}
+              </Text>
+            )}
+
+            <HStack spacing={2} flexWrap="wrap">
+              {item.stocks && item.stocks.length > 0 && (
+                <>
+                  {item.stocks.map((stock, idx) => (
+                    <Tag key={idx} size="sm" colorScheme="blue" variant="subtle">
+                      <TagLeftIcon as={FiTrendingUp} />
+                      <TagLabel>{stock}</TagLabel>
+                    </Tag>
+                  ))}
+                </>
+              )}
+              {item.tags && item.tags.length > 0 && (
+                <>
+                  {item.tags.map((tag, idx) => (
+                    <Tag key={idx} size="sm" colorScheme={colorScheme} variant="subtle">
+                      <TagLeftIcon as={FiHash} />
+                      <TagLabel>{tag}</TagLabel>
+                    </Tag>
+                  ))}
+                </>
+              )}
+            </HStack>
+          </VStack>
+        </CardBody>
+      </Card>
+    );
+  };
+
+  return (
+    <Box>
+      <VStack align="stretch" spacing={4}>
+        {loading ? (
+          <Center py={8}>
+            <Spinner size="xl" color={`${colorScheme}.500`} />
+          </Center>
+        ) : events.length === 0 ? (
+          <Center py={{ base: 6, md: 8 }}>
+            <VStack spacing={{ base: 2, md: 3 }}>
+              <Icon as={FiFileText} boxSize={{ base: 8, md: 12 }} color="gray.300" />
+              <Text color={secondaryText} fontSize={{ base: 'sm', md: 'md' }}>暂无投资{label}</Text>
+            </VStack>
+          </Center>
+        ) : (
+          <Grid templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)' }} gap={4}>
+            {events.map(renderCard)}
+          </Grid>
+        )}
+      </VStack>
+
+      {/* 使用通用弹窗组件 */}
+      <EventFormModal
+        isOpen={isModalOpen}
+        onClose={handleCloseModal}
+        mode={modalMode}
+        eventType={type}
+        editingEvent={editingItem}
+        onSuccess={loadAllData}
+        colorScheme={colorScheme}
+        label={label}
+        showDatePicker={true}
+        showTypeSelect={false}
+        showStatusSelect={true}
+        showImportance={false}
+        showTags={true}
+        stockInputMode="tag"
+        apiEndpoint="investment-plans"
+      />
+    </Box>
+  );
+};
+
+export default EventPanel;

src/views/Dashboard/components/InvestmentCalendarChakra.js.bak

@@ -1,493 +0,0 @@
-// src/views/Dashboard/components/InvestmentCalendarChakra.js
-import React, { useState, useEffect, useCallback } from 'react';
-import {
-  Box,
-  Card,
-  CardHeader,
-  CardBody,
-  Heading,
-  VStack,
-  HStack,
-  Text,
-  Button,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
-  ModalCloseButton,
-  useDisclosure,
-  Badge,
-  IconButton,
-  Flex,
-  Grid,
-  useColorModeValue,
-  Divider,
-  Tooltip,
-  Icon,
-  Input,
-  FormControl,
-  FormLabel,
-  Textarea,
-  Select,
-  useToast,
-  Spinner,
-  Center,
-  Tag,
-  TagLabel,
-  TagLeftIcon,
-} from '@chakra-ui/react';
-import {
-  FiCalendar,
-  FiClock,
-  FiStar,
-  FiTrendingUp,
-  FiPlus,
-  FiEdit2,
-  FiTrash2,
-  FiSave,
-  FiX,
-} from 'react-icons/fi';
-import FullCalendar from '@fullcalendar/react';
-import dayGridPlugin from '@fullcalendar/daygrid';
-import interactionPlugin from '@fullcalendar/interaction';
-import moment from 'moment';
-import 'moment/locale/zh-cn';
-import { logger } from '../../../utils/logger';
-import './InvestmentCalendar.css';
-
-moment.locale('zh-cn');
-
-export default function InvestmentCalendarChakra() {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const { isOpen: isAddOpen, onOpen: onAddOpen, onClose: onAddClose } = useDisclosure();
-  const toast = useToast();
-
-  // 颜色主题
-  const bgColor = useColorModeValue('white', 'gray.800');
-  const borderColor = useColorModeValue('gray.200', 'gray.600');
-  const textColor = useColorModeValue('gray.700', 'white');
-  const secondaryText = useColorModeValue('gray.600', 'gray.400');
-
-  const [events, setEvents] = useState([]);
-  const [selectedDate, setSelectedDate] = useState(null);
-  const [selectedDateEvents, setSelectedDateEvents] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [newEvent, setNewEvent] = useState({
-    title: '',
-    description: '',
-    type: 'plan',
-    importance: 3,
-    stocks: '',
-  });
-
-  // 加载事件数据
-  const loadEvents = useCallback(async () => {
-    try {
-      setLoading(true);
-      const base = (process.env.NODE_ENV === 'production' ? '' : process.env.REACT_APP_API_URL || 'http://49.232.185.254:5001');
-
-      // 直接加载用户相关的事件（投资计划 + 关注的未来事件）
-      const userResponse = await fetch(base + '/api/account/calendar/events', {
-        credentials: 'include'
-      });
-
-      if (userResponse.ok) {
-        const userData = await userResponse.json();
-        if (userData.success) {
-          const allEvents = (userData.data || []).map(event => ({
-            ...event,
-            id: `${event.source || 'user'}-${event.id}`,
-            title: event.title,
-            start: event.event_date,
-            date: event.event_date,
-            backgroundColor: event.source === 'future' ? '#3182CE' : '#8B5CF6',
-            borderColor: event.source === 'future' ? '#3182CE' : '#8B5CF6',
-            extendedProps: {
-              ...event,
-              isSystem: event.source === 'future',
-            }
-          }));
-
-          setEvents(allEvents);
-          logger.debug('InvestmentCalendar', '日历事件加载成功', {
-            count: allEvents.length
-          });
-        }
-      }
-    } catch (error) {
-      logger.error('InvestmentCalendar', 'loadEvents', error);
-      // ❌ 移除数据加载失败 toast（非关键操作）
-    } finally {
-      setLoading(false);
-    }
-  }, []); // ✅ 移除 toast 依赖
-
-  useEffect(() => {
-    loadEvents();
-  }, [loadEvents]);
-
-  // 根据重要性获取颜色
-  const getEventColor = (importance) => {
-    if (importance >= 5) return '#E53E3E'; // 红色
-    if (importance >= 4) return '#ED8936'; // 橙色
-    if (importance >= 3) return '#ECC94B'; // 黄色
-    if (importance >= 2) return '#48BB78'; // 绿色
-    return '#3182CE'; // 蓝色
-  };
-
-  // 处理日期点击
-  const handleDateClick = (info) => {
-    const clickedDate = moment(info.date);
-    setSelectedDate(clickedDate);
-    
-    // 筛选当天的事件
-    const dayEvents = events.filter(event => 
-      moment(event.start).isSame(clickedDate, 'day')
-    );
-    setSelectedDateEvents(dayEvents);
-    onOpen();
-  };
-
-  // 处理事件点击
-  const handleEventClick = (info) => {
-    const event = info.event;
-    const clickedDate = moment(event.start);
-    setSelectedDate(clickedDate);
-    setSelectedDateEvents([{
-      title: event.title,
-      start: event.start,
-      extendedProps: {
-        ...event.extendedProps,
-      },
-    }]);
-    onOpen();
-  };
-
-  // 添加新事件
-  const handleAddEvent = async () => {
-    try {
-      const base = (process.env.NODE_ENV === 'production' ? '' : process.env.REACT_APP_API_URL || 'http://49.232.185.254:5001');
-
-      const eventData = {
-        ...newEvent,
-        event_date: (selectedDate ? selectedDate.format('YYYY-MM-DD') : moment().format('YYYY-MM-DD')),
-        stocks: newEvent.stocks.split(',').map(s => s.trim()).filter(s => s),
-      };
-
-      const response = await fetch(base + '/api/account/calendar/events', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-        body: JSON.stringify(eventData),
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        if (data.success) {
-          logger.info('InvestmentCalendar', '添加事件成功', {
-            eventTitle: eventData.title,
-            eventDate: eventData.event_date
-          });
-          toast({
-            title: '添加成功',
-            description: '投资计划已添加',
-            status: 'success',
-            duration: 3000,
-          });
-          onAddClose();
-          loadEvents();
-          setNewEvent({
-            title: '',
-            description: '',
-            type: 'plan',
-            importance: 3,
-            stocks: '',
-          });
-        }
-      }
-    } catch (error) {
-      logger.error('InvestmentCalendar', 'handleAddEvent', error, {
-        eventTitle: newEvent?.title
-      });
-      toast({
-        title: '添加失败',
-        description: '无法添加投资计划',
-        status: 'error',
-        duration: 3000,
-      });
-    }
-  };
-
-  // 删除用户事件
-  const handleDeleteEvent = async (eventId) => {
-    if (!eventId) {
-      logger.warn('InvestmentCalendar', '删除事件失败', '缺少事件 ID', { eventId });
-      toast({
-        title: '无法删除',
-        description: '缺少事件 ID',
-        status: 'error',
-        duration: 3000,
-      });
-      return;
-    }
-    try {
-      const base = (process.env.NODE_ENV === 'production' ? '' : process.env.REACT_APP_API_URL || 'http://49.232.185.254:5001');
-
-      const response = await fetch(base + `/api/account/calendar/events/${eventId}`, {
-        method: 'DELETE',
-        credentials: 'include',
-      });
-
-      if (response.ok) {
-        logger.info('InvestmentCalendar', '删除事件成功', { eventId });
-        toast({
-          title: '删除成功',
-          status: 'success',
-          duration: 2000,
-        });
-        loadEvents();
-      }
-    } catch (error) {
-      logger.error('InvestmentCalendar', 'handleDeleteEvent', error, { eventId });
-      toast({
-        title: '删除失败',
-        status: 'error',
-        duration: 3000,
-      });
-    }
-  };
-
-  return (
-    <Card bg={bgColor} shadow="md">
-      <CardHeader pb={4}>
-        <Flex justify="space-between" align="center">
-          <HStack>
-            <Icon as={FiCalendar} color="orange.500" boxSize={5} />
-            <Heading size="md">投资日历</Heading>
-          </HStack>
-          <Button
-            size="sm"
-            colorScheme="blue"
-            leftIcon={<FiPlus />}
-            onClick={() => { if (!selectedDate) setSelectedDate(moment()); onAddOpen(); }}
-          >
-            添加计划
-          </Button>
-        </Flex>
-      </CardHeader>
-      <CardBody pt={0}>
-        {loading ? (
-          <Center h="560px">
-            <Spinner size="xl" color="blue.500" />
-          </Center>
-        ) : (
-          <Box height={{ base: '500px', md: '600px' }}>
-            <FullCalendar
-              plugins={[dayGridPlugin, interactionPlugin]}
-              initialView="dayGridMonth"
-              locale="zh-cn"
-              headerToolbar={{
-                left: 'prev,next today',
-                center: 'title',
-                right: ''
-              }}
-              events={events}
-              dateClick={handleDateClick}
-              eventClick={handleEventClick}
-              height="100%"
-              dayMaxEvents={3}
-              moreLinkText="更多"
-              buttonText={{
-                today: '今天',
-                month: '月',
-                week: '周'
-              }}
-            />
-          </Box>
-        )}
-      </CardBody>
-
-      {/* 查看事件详情 Modal - 条件渲染 */}
-      {isOpen && (
-        <Modal isOpen={isOpen} onClose={onClose} size="xl" closeOnOverlayClick={false} closeOnEsc={true}>
-          <ModalOverlay />
-          <ModalContent>
-            <ModalHeader>
-              {selectedDate && selectedDate.format('YYYY年MM月DD日')} 的事件
-            </ModalHeader>
-            <ModalCloseButton />
-            <ModalBody>
-              {selectedDateEvents.length === 0 ? (
-                <Center py={8}>
-                  <VStack>
-                    <Text color={secondaryText}>当天没有事件</Text>
-                    <Button
-                      size="sm"
-                      colorScheme="blue"
-                      leftIcon={<FiPlus />}
-                      onClick={() => {
-                        onClose();
-                        onAddOpen();
-                      }}
-                    >
-                      添加投资计划
-                    </Button>
-                  </VStack>
-                </Center>
-              ) : (
-                <VStack align="stretch" spacing={4}>
-                  {selectedDateEvents.map((event, idx) => (
-                    <Box
-                      key={idx}
-                      p={4}
-                      borderRadius="md"
-                      border="1px"
-                      borderColor={borderColor}
-                    >
-                      <Flex justify="space-between" align="start" mb={2}>
-                        <VStack align="start" spacing={1} flex={1}>
-                          <HStack>
-                            <Text fontWeight="bold" fontSize="lg">
-                              {event.title}
-                            </Text>
-                            {event.extendedProps?.isSystem ? (
-                              <Badge colorScheme="blue" variant="subtle">系统事件</Badge>
-                            ) : (
-                              <Badge colorScheme="purple" variant="subtle">我的计划</Badge>
-                            )}
-                          </HStack>
-                          <HStack spacing={2}>
-                            <Icon as={FiStar} color="yellow.500" />
-                            <Text fontSize="sm" color={secondaryText}>
-                              重要度: {event.extendedProps?.importance || 3}/5
-                            </Text>
-                          </HStack>
-                        </VStack>
-                        {!event.extendedProps?.isSystem && (
-                          <IconButton
-                            icon={<FiTrash2 />}
-                            size="sm"
-                            variant="ghost"
-                            colorScheme="red"
-                            onClick={() => handleDeleteEvent(event.extendedProps?.id)}
-                          />
-                        )}
-                      </Flex>
-
-                      {event.extendedProps?.description && (
-                        <Text fontSize="sm" color={secondaryText} mb={2}>
-                          {event.extendedProps.description}
-                        </Text>
-                      )}
-
-                      {event.extendedProps?.stocks && event.extendedProps.stocks.length > 0 && (
-                        <HStack spacing={2} flexWrap="wrap">
-                          <Text fontSize="sm" color={secondaryText}>相关股票:</Text>
-                          {event.extendedProps.stocks.map((stock, i) => (
-                            <Tag key={i} size="sm" colorScheme="blue">
-                              <TagLeftIcon as={FiTrendingUp} />
-                              <TagLabel>{stock}</TagLabel>
-                            </Tag>
-                          ))}
-                        </HStack>
-                      )}
-                    </Box>
-                  ))}
-                </VStack>
-              )}
-            </ModalBody>
-            <ModalFooter>
-              <Button onClick={onClose}>关闭</Button>
-            </ModalFooter>
-          </ModalContent>
-        </Modal>
-      )}
-
-      {/* 添加投资计划 Modal - 条件渲染 */}
-      {isAddOpen && (
-        <Modal isOpen={isAddOpen} onClose={onAddClose} size="lg" closeOnOverlayClick={false} closeOnEsc={true}>
-          <ModalOverlay />
-          <ModalContent>
-            <ModalHeader>
-              添加投资计划
-            </ModalHeader>
-            <ModalCloseButton />
-            <ModalBody>
-              <VStack spacing={4}>
-                <FormControl isRequired>
-                  <FormLabel>标题</FormLabel>
-                  <Input
-                    value={newEvent.title}
-                    onChange={(e) => setNewEvent({ ...newEvent, title: e.target.value })}
-                    placeholder="例如：关注半导体板块"
-                  />
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>描述</FormLabel>
-                  <Textarea
-                    value={newEvent.description}
-                    onChange={(e) => setNewEvent({ ...newEvent, description: e.target.value })}
-                    placeholder="详细描述您的投资计划..."
-                    rows={3}
-                  />
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>类型</FormLabel>
-                  <Select
-                    value={newEvent.type}
-                    onChange={(e) => setNewEvent({ ...newEvent, type: e.target.value })}
-                  >
-                    <option value="plan">投资计划</option>
-                    <option value="reminder">提醒事项</option>
-                    <option value="analysis">分析任务</option>
-                  </Select>
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>重要度</FormLabel>
-                  <Select
-                    value={newEvent.importance}
-                    onChange={(e) => setNewEvent({ ...newEvent, importance: parseInt(e.target.value) })}
-                  >
-                    <option value={5}>⭐⭐⭐⭐⭐ 非常重要</option>
-                    <option value={4}>⭐⭐⭐⭐ 重要</option>
-                    <option value={3}>⭐⭐⭐ 一般</option>
-                    <option value={2}>⭐⭐ 次要</option>
-                    <option value={1}>⭐ 不重要</option>
-                  </Select>
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>相关股票（用逗号分隔）</FormLabel>
-                  <Input
-                    value={newEvent.stocks}
-                    onChange={(e) => setNewEvent({ ...newEvent, stocks: e.target.value })}
-                    placeholder="例如：600519,000858,002415"
-                  />
-                </FormControl>
-              </VStack>
-            </ModalBody>
-            <ModalFooter>
-              <Button variant="ghost" mr={3} onClick={onAddClose}>
-                取消
-              </Button>
-              <Button
-                colorScheme="blue"
-                onClick={handleAddEvent}
-                isDisabled={!newEvent.title}
-              >
-                添加
-              </Button>
-            </ModalFooter>
-          </ModalContent>
-        </Modal>
-      )}
-    </Card>
-  );
-}

src/views/Dashboard/components/InvestmentPlanningCenter.tsx

@@ -3,14 +3,12 @@
  *
  * 性能优化：
  * - 使用 React.lazy() 懒加载子面板，减少初始加载时间
- * - 从 1421 行拆分为 5 个独立模块，提升可维护性
  * - 使用 TypeScript 提供类型安全
  *
  * 组件架构：
- * - InvestmentPlanningCenter (主组件，~200 行)
+ * - InvestmentPlanningCenter (主组件)
  * - CalendarPanel (日历面板，懒加载)
- * - PlansPanel (计划面板，懒加载)
- * - ReviewsPanel (复盘面板，懒加载)
+ * - EventPanel (通用事件面板，用于计划和复盘)
  * - PlanningContext (数据共享层)
  */
 
@@ -33,11 +31,15 @@ import {
   TabPanel,
   Spinner,
   Center,
+  Button,
+  ButtonGroup,
 } from '@chakra-ui/react';
 import {
   FiCalendar,
   FiTarget,
   FiFileText,
+  FiList,
+  FiPlus,
 } from 'react-icons/fi';
 
 import { PlanningDataProvider } from './PlanningContext';
@@ -50,11 +52,8 @@ import './InvestmentCalendar.css';
 const CalendarPanel = lazy(() =>
   import('./CalendarPanel').then(module => ({ default: module.CalendarPanel }))
 );
-const PlansPanel = lazy(() =>
-  import('./PlansPanel').then(module => ({ default: module.PlansPanel }))
-);
-const ReviewsPanel = lazy(() =>
-  import('./ReviewsPanel').then(module => ({ default: module.ReviewsPanel }))
+const EventPanel = lazy(() =>
+  import('./EventPanel').then(module => ({ default: module.EventPanel }))
 );
 
 /**
@@ -82,7 +81,10 @@ const InvestmentPlanningCenter: React.FC = () => {
   // 全局数据状态
   const [allEvents, setAllEvents] = useState<InvestmentEvent[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
-  const [activeTab, setActiveTab] = useState<number>(0);
+  const [viewMode, setViewMode] = useState<'calendar' | 'list'>('list');
+  const [listTab, setListTab] = useState<number>(0); // 0: 我的计划, 1: 我的复盘
+  const [openPlanModalTrigger, setOpenPlanModalTrigger] = useState<number>(0);
+  const [openReviewModalTrigger, setOpenReviewModalTrigger] = useState<number>(0);
 
   /**
    * 加载所有事件数据（日历事件 + 计划 + 复盘）
@@ -124,14 +126,16 @@ const InvestmentPlanningCenter: React.FC = () => {
     loadAllData,
     loading,
     setLoading,
-    activeTab,
-    setActiveTab,
+    openPlanModalTrigger,
+    openReviewModalTrigger,
     toast,
     bgColor,
     borderColor,
     textColor,
     secondaryText,
     cardBg,
+    setViewMode,
+    setListTab,
   };
 
   // 计算各类型事件数量
@@ -141,59 +145,105 @@ const InvestmentPlanningCenter: React.FC = () => {
   return (
     <PlanningDataProvider value={contextValue}>
       <Card bg={bgColor} shadow="md">
-        <CardHeader pb={4}>
-          <Flex justify="space-between" align="center">
-            <HStack>
-              <Icon as={FiTarget} color="purple.500" boxSize={5} />
-              <Heading size="md">投资规划中心</Heading>
+        <CardHeader pb={{ base: 2, md: 4 }} px={{ base: 3, md: 5 }}>
+          <Flex justify="space-between" align="center" wrap="wrap" gap={2}>
+            <HStack spacing={{ base: 1, md: 2 }}>
+              <Icon as={FiTarget} color="purple.500" boxSize={{ base: 4, md: 5 }} />
+              <Heading size={{ base: 'sm', md: 'md' }}>投资规划中心</Heading>
             </HStack>
+            {/* 视图切换按钮组 */}
+            <ButtonGroup size={{ base: 'xs', md: 'sm' }} isAttached variant="outline">
+              <Button
+                leftIcon={<Icon as={FiList} boxSize={{ base: 3, md: 4 }} />}
+                colorScheme={viewMode === 'list' ? 'purple' : 'gray'}
+                variant={viewMode === 'list' ? 'solid' : 'outline'}
+                onClick={() => setViewMode('list')}
+                fontSize={{ base: 'xs', md: 'sm' }}
+              >
+                列表视图
+              </Button>
+              <Button
+                leftIcon={<Icon as={FiCalendar} boxSize={{ base: 3, md: 4 }} />}
+                colorScheme={viewMode === 'calendar' ? 'purple' : 'gray'}
+                variant={viewMode === 'calendar' ? 'solid' : 'outline'}
+                onClick={() => setViewMode('calendar')}
+                fontSize={{ base: 'xs', md: 'sm' }}
+              >
+                日历视图
+              </Button>
+            </ButtonGroup>
           </Flex>
         </CardHeader>
-        <CardBody pt={0}>
-          <Tabs
-            index={activeTab}
-            onChange={setActiveTab}
-            variant="enclosed"
-            colorScheme="purple"
-          >
-            <TabList>
-              <Tab>
-                <Icon as={FiCalendar} mr={2} />
-                日历视图
-              </Tab>
-              <Tab>
-                <Icon as={FiTarget} mr={2} />
-                我的计划 ({planCount})
-              </Tab>
-              <Tab>
-                <Icon as={FiFileText} mr={2} />
-                我的复盘 ({reviewCount})
-              </Tab>
-            </TabList>
+        <CardBody pt={0} px={{ base: 3, md: 5 }}>
+          {viewMode === 'calendar' ? (
+            /* 日历视图 */
+            <Suspense fallback={<PanelLoadingFallback />}>
+              <CalendarPanel />
+            </Suspense>
+          ) : (
+            /* 列表视图：我的计划 / 我的复盘 切换 */
+            <Tabs
+              index={listTab}
+              onChange={setListTab}
+              variant="enclosed"
+              colorScheme="purple"
+              size={{ base: 'sm', md: 'md' }}
+            >
+              <Flex justify="space-between" align="center" mb={{ base: 2, md: 4 }} wrap="wrap" gap={2}>
+                <TabList mb={0} borderBottom="none">
+                  <Tab fontSize={{ base: 'xs', md: 'sm' }} px={{ base: 2, md: 4 }}>
+                    <Icon as={FiTarget} mr={{ base: 1, md: 2 }} boxSize={{ base: 3, md: 4 }} />
+                    我的计划 ({planCount})
+                  </Tab>
+                  <Tab fontSize={{ base: 'xs', md: 'sm' }} px={{ base: 2, md: 4 }}>
+                    <Icon as={FiFileText} mr={{ base: 1, md: 2 }} boxSize={{ base: 3, md: 4 }} />
+                    我的复盘 ({reviewCount})
+                  </Tab>
+                </TabList>
+                <Button
+                  size={{ base: 'xs', md: 'sm' }}
+                  colorScheme="purple"
+                  leftIcon={<Icon as={FiPlus} boxSize={{ base: 3, md: 4 }} />}
+                  fontSize={{ base: 'xs', md: 'sm' }}
+                  onClick={() => {
+                    if (listTab === 0) {
+                      setOpenPlanModalTrigger(prev => prev + 1);
+                    } else {
+                      setOpenReviewModalTrigger(prev => prev + 1);
+                    }
+                  }}
+                >
+                  {listTab === 0 ? '新建计划' : '新建复盘'}
+                </Button>
+              </Flex>
 
-            <TabPanels>
-              {/* 日历视图面板 */}
-              <TabPanel px={0}>
-                <Suspense fallback={<PanelLoadingFallback />}>
-                  <CalendarPanel />
-                </Suspense>
-              </TabPanel>
+              <TabPanels>
+                {/* 计划列表面板 */}
+                <TabPanel px={0}>
+                  <Suspense fallback={<PanelLoadingFallback />}>
+                    <EventPanel
+                      type="plan"
+                      colorScheme="purple"
+                      label="计划"
+                      openModalTrigger={openPlanModalTrigger}
+                    />
+                  </Suspense>
+                </TabPanel>
 
-              {/* 计划列表面板 */}
-              <TabPanel px={0}>
-                <Suspense fallback={<PanelLoadingFallback />}>
-                  <PlansPanel />
-                </Suspense>
-              </TabPanel>
-
-              {/* 复盘列表面板 */}
-              <TabPanel px={0}>
-                <Suspense fallback={<PanelLoadingFallback />}>
-                  <ReviewsPanel />
-                </Suspense>
-              </TabPanel>
-            </TabPanels>
-          </Tabs>
+                {/* 复盘列表面板 */}
+                <TabPanel px={0}>
+                  <Suspense fallback={<PanelLoadingFallback />}>
+                    <EventPanel
+                      type="review"
+                      colorScheme="green"
+                      label="复盘"
+                      openModalTrigger={openReviewModalTrigger}
+                    />
+                  </Suspense>
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          )}
         </CardBody>
       </Card>
     </PlanningDataProvider>

src/views/Dashboard/components/InvestmentPlansAndReviews.js.bak

@@ -1,587 +0,0 @@
-// src/views/Dashboard/components/InvestmentPlansAndReviews.js
-import React, { useState, useEffect, useCallback } from 'react';
-import {
-  Box,
-  Card,
-  CardHeader,
-  CardBody,
-  Heading,
-  VStack,
-  HStack,
-  Text,
-  Button,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
-  ModalCloseButton,
-  useDisclosure,
-  Badge,
-  IconButton,
-  Flex,
-  useColorModeValue,
-  Divider,
-  Icon,
-  Input,
-  FormControl,
-  FormLabel,
-  Textarea,
-  Select,
-  useToast,
-  Spinner,
-  Center,
-  Tag,
-  TagLabel,
-  TagLeftIcon,
-  TagCloseButton,
-  Grid,
-  Tabs,
-  TabList,
-  TabPanels,
-  Tab,
-  TabPanel,
-  InputGroup,
-  InputLeftElement,
-} from '@chakra-ui/react';
-import {
-  FiCalendar,
-  FiClock,
-  FiEdit2,
-  FiTrash2,
-  FiSave,
-  FiPlus,
-  FiFileText,
-  FiTarget,
-  FiTrendingUp,
-  FiHash,
-  FiCheckCircle,
-  FiXCircle,
-  FiAlertCircle,
-} from 'react-icons/fi';
-import moment from 'moment';
-import 'moment/locale/zh-cn';
-import { logger } from '../../../utils/logger';
-
-moment.locale('zh-cn');
-
-export default function InvestmentPlansAndReviews({ type = 'both' }) {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const toast = useToast();
-
-  // 颜色主题
-  const bgColor = useColorModeValue('white', 'gray.800');
-  const borderColor = useColorModeValue('gray.200', 'gray.600');
-  const textColor = useColorModeValue('gray.700', 'white');
-  const secondaryText = useColorModeValue('gray.600', 'gray.400');
-  const cardBg = useColorModeValue('gray.50', 'gray.700');
-
-  const [plans, setPlans] = useState([]);
-  const [reviews, setReviews] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [editingItem, setEditingItem] = useState(null);
-  const [formData, setFormData] = useState({
-    date: moment().format('YYYY-MM-DD'),
-    title: '',
-    content: '',
-    type: 'plan',
-    stocks: [],
-    tags: [],
-    status: 'active',
-  });
-  const [stockInput, setStockInput] = useState('');
-  const [tagInput, setTagInput] = useState('');
-
-  // 加载数据
-  const loadData = useCallback(async () => {
-    try {
-      setLoading(true);
-      const base = (process.env.NODE_ENV === 'production' ? '' : process.env.REACT_APP_API_URL || 'http://49.232.185.254:5001');
-
-      const response = await fetch(base + '/api/account/investment-plans', {
-        credentials: 'include'
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        if (data.success) {
-          const allItems = data.data || [];
-          setPlans(allItems.filter(item => item.type === 'plan'));
-          setReviews(allItems.filter(item => item.type === 'review'));
-          logger.debug('InvestmentPlansAndReviews', '数据加载成功', {
-            plansCount: allItems.filter(item => item.type === 'plan').length,
-            reviewsCount: allItems.filter(item => item.type === 'review').length
-          });
-        }
-      }
-    } catch (error) {
-      logger.error('InvestmentPlansAndReviews', 'loadData', error);
-      // ❌ 移除数据加载失败 toast（非关键操作）
-    } finally {
-      setLoading(false);
-    }
-  }, []); // ✅ 移除 toast 依赖
-
-  useEffect(() => {
-    loadData();
-  }, [loadData]);
-
-  // 打开编辑/新建模态框
-  const handleOpenModal = (item = null, itemType = 'plan') => {
-    if (item) {
-      setEditingItem(item);
-      setFormData({
-        ...item,
-        date: moment(item.date).format('YYYY-MM-DD'),
-      });
-    } else {
-      setEditingItem(null);
-      setFormData({
-        date: moment().format('YYYY-MM-DD'),
-        title: '',
-        content: '',
-        type: itemType,
-        stocks: [],
-        tags: [],
-        status: 'active',
-      });
-    }
-    onOpen();
-  };
-
-  // 保存数据
-  const handleSave = async () => {
-    try {
-      const base = (process.env.NODE_ENV === 'production' ? '' : process.env.REACT_APP_API_URL || 'http://49.232.185.254:5001');
-
-      const url = editingItem
-        ? base + `/api/account/investment-plans/${editingItem.id}`
-        : base + '/api/account/investment-plans';
-
-      const method = editingItem ? 'PUT' : 'POST';
-
-      const response = await fetch(url, {
-        method,
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-        body: JSON.stringify(formData),
-      });
-
-      if (response.ok) {
-        logger.info('InvestmentPlansAndReviews', `${editingItem ? '更新' : '创建'}成功`, {
-          itemId: editingItem?.id,
-          title: formData.title,
-          type: formData.type
-        });
-        toast({
-          title: editingItem ? '更新成功' : '创建成功',
-          status: 'success',
-          duration: 2000,
-        });
-        onClose();
-        loadData();
-      } else {
-        throw new Error('保存失败');
-      }
-    } catch (error) {
-      logger.error('InvestmentPlansAndReviews', 'handleSave', error, {
-        itemId: editingItem?.id,
-        title: formData?.title
-      });
-      toast({
-        title: '保存失败',
-        description: '无法保存数据',
-        status: 'error',
-        duration: 3000,
-      });
-    }
-  };
-
-  // 删除数据
-  const handleDelete = async (id) => {
-    if (!window.confirm('确定要删除吗？')) return;
-
-    try {
-      const base = (process.env.NODE_ENV === 'production' ? '' : process.env.REACT_APP_API_URL || 'http://49.232.185.254:5001');
-
-      const response = await fetch(base + `/api/account/investment-plans/${id}`, {
-        method: 'DELETE',
-        credentials: 'include',
-      });
-
-      if (response.ok) {
-        logger.info('InvestmentPlansAndReviews', '删除成功', { itemId: id });
-        toast({
-          title: '删除成功',
-          status: 'success',
-          duration: 2000,
-        });
-        loadData();
-      }
-    } catch (error) {
-      logger.error('InvestmentPlansAndReviews', 'handleDelete', error, { itemId: id });
-      toast({
-        title: '删除失败',
-        status: 'error',
-        duration: 3000,
-      });
-    }
-  };
-
-  // 添加股票
-  const handleAddStock = () => {
-    if (stockInput.trim() && !formData.stocks.includes(stockInput.trim())) {
-      setFormData({
-        ...formData,
-        stocks: [...formData.stocks, stockInput.trim()],
-      });
-      setStockInput('');
-    }
-  };
-
-  // 添加标签
-  const handleAddTag = () => {
-    if (tagInput.trim() && !formData.tags.includes(tagInput.trim())) {
-      setFormData({
-        ...formData,
-        tags: [...formData.tags, tagInput.trim()],
-      });
-      setTagInput('');
-    }
-  };
-
-  // 获取状态图标和颜色
-  const getStatusInfo = (status) => {
-    switch (status) {
-      case 'completed':
-        return { icon: FiCheckCircle, color: 'green' };
-      case 'cancelled':
-        return { icon: FiXCircle, color: 'red' };
-      default:
-        return { icon: FiAlertCircle, color: 'blue' };
-    }
-  };
-
-  // 渲染单个卡片
-  const renderCard = (item) => {
-    const statusInfo = getStatusInfo(item.status);
-    
-    return (
-      <Card
-        key={item.id}
-        bg={cardBg}
-        shadow="sm"
-        _hover={{ shadow: 'md' }}
-        transition="all 0.2s"
-      >
-        <CardBody>
-          <VStack align="stretch" spacing={3}>
-            <Flex justify="space-between" align="start">
-              <VStack align="start" spacing={1} flex={1}>
-                <HStack>
-                  <Icon as={item.type === 'plan' ? FiTarget : FiFileText} color="blue.500" />
-                  <Text fontWeight="bold" fontSize="lg">
-                    {item.title}
-                  </Text>
-                </HStack>
-                <HStack spacing={2}>
-                  <Icon as={FiCalendar} boxSize={3} color={secondaryText} />
-                  <Text fontSize="sm" color={secondaryText}>
-                    {moment(item.date).format('YYYY年MM月DD日')}
-                  </Text>
-                  <Badge
-                    colorScheme={statusInfo.color}
-                    variant="subtle"
-                    leftIcon={<Icon as={statusInfo.icon} />}
-                  >
-                    {item.status === 'active' ? '进行中' : 
-                     item.status === 'completed' ? '已完成' : '已取消'}
-                  </Badge>
-                </HStack>
-              </VStack>
-              <HStack>
-                <IconButton
-                  icon={<FiEdit2 />}
-                  size="sm"
-                  variant="ghost"
-                  onClick={() => handleOpenModal(item)}
-                />
-                <IconButton
-                  icon={<FiTrash2 />}
-                  size="sm"
-                  variant="ghost"
-                  colorScheme="red"
-                  onClick={() => handleDelete(item.id)}
-                />
-              </HStack>
-            </Flex>
-
-            {item.content && (
-              <Text fontSize="sm" color={textColor} noOfLines={3}>
-                {item.content}
-              </Text>
-            )}
-
-            <HStack spacing={2} flexWrap="wrap">
-              {item.stocks && item.stocks.length > 0 && (
-                <>
-                  {item.stocks.map((stock, idx) => (
-                    <Tag key={idx} size="sm" colorScheme="blue" variant="subtle">
-                      <TagLeftIcon as={FiTrendingUp} />
-                      <TagLabel>{stock}</TagLabel>
-                    </Tag>
-                  ))}
-                </>
-              )}
-              {item.tags && item.tags.length > 0 && (
-                <>
-                  {item.tags.map((tag, idx) => (
-                    <Tag key={idx} size="sm" colorScheme="purple" variant="subtle">
-                      <TagLeftIcon as={FiHash} />
-                      <TagLabel>{tag}</TagLabel>
-                    </Tag>
-                  ))}
-                </>
-              )}
-            </HStack>
-          </VStack>
-        </CardBody>
-      </Card>
-    );
-  };
-
-  return (
-    <Box>
-      <Tabs variant="enclosed" colorScheme="blue" defaultIndex={type === 'review' ? 1 : 0}>
-        <TabList>
-          <Tab>
-            <Icon as={FiTarget} mr={2} />
-            我的计划 ({plans.length})
-          </Tab>
-          <Tab>
-            <Icon as={FiFileText} mr={2} />
-            我的复盘 ({reviews.length})
-          </Tab>
-        </TabList>
-
-        <TabPanels>
-          {/* 计划面板 */}
-          <TabPanel px={0}>
-            <VStack align="stretch" spacing={4}>
-              <Flex justify="flex-end">
-                <Button
-                  size="sm"
-                  colorScheme="blue"
-                  leftIcon={<FiPlus />}
-                  onClick={() => handleOpenModal(null, 'plan')}
-                >
-                  新建计划
-                </Button>
-              </Flex>
-
-              {loading ? (
-                <Center py={8}>
-                  <Spinner size="xl" color="blue.500" />
-                </Center>
-              ) : plans.length === 0 ? (
-                <Center py={8}>
-                  <VStack spacing={3}>
-                    <Icon as={FiTarget} boxSize={12} color="gray.300" />
-                    <Text color={secondaryText}>暂无投资计划</Text>
-                    <Button
-                      size="sm"
-                      colorScheme="blue"
-                      leftIcon={<FiPlus />}
-                      onClick={() => handleOpenModal(null, 'plan')}
-                    >
-                      创建第一个计划
-                    </Button>
-                  </VStack>
-                </Center>
-              ) : (
-                <Grid templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)' }} gap={4}>
-                  {plans.map(renderCard)}
-                </Grid>
-              )}
-            </VStack>
-          </TabPanel>
-
-          {/* 复盘面板 */}
-          <TabPanel px={0}>
-            <VStack align="stretch" spacing={4}>
-              <Flex justify="flex-end">
-                <Button
-                  size="sm"
-                  colorScheme="green"
-                  leftIcon={<FiPlus />}
-                  onClick={() => handleOpenModal(null, 'review')}
-                >
-                  新建复盘
-                </Button>
-              </Flex>
-
-              {loading ? (
-                <Center py={8}>
-                  <Spinner size="xl" color="blue.500" />
-                </Center>
-              ) : reviews.length === 0 ? (
-                <Center py={8}>
-                  <VStack spacing={3}>
-                    <Icon as={FiFileText} boxSize={12} color="gray.300" />
-                    <Text color={secondaryText}>暂无复盘记录</Text>
-                    <Button
-                      size="sm"
-                      colorScheme="green"
-                      leftIcon={<FiPlus />}
-                      onClick={() => handleOpenModal(null, 'review')}
-                    >
-                      创建第一个复盘
-                    </Button>
-                  </VStack>
-                </Center>
-              ) : (
-                <Grid templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)' }} gap={4}>
-                  {reviews.map(renderCard)}
-                </Grid>
-              )}
-            </VStack>
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
-
-      {/* 编辑/新建模态框 - 条件渲染 */}
-      {isOpen && (
-        <Modal isOpen={isOpen} onClose={onClose} size="xl" closeOnOverlayClick={false} closeOnEsc={true}>
-          <ModalOverlay />
-          <ModalContent>
-            <ModalHeader>
-              {editingItem ? '编辑' : '新建'}
-              {formData.type === 'plan' ? '投资计划' : '复盘记录'}
-            </ModalHeader>
-            <ModalCloseButton />
-            <ModalBody>
-              <VStack spacing={4}>
-                <FormControl isRequired>
-                  <FormLabel>日期</FormLabel>
-                  <InputGroup>
-                    <InputLeftElement pointerEvents="none">
-                      <Icon as={FiCalendar} color={secondaryText} />
-                    </InputLeftElement>
-                    <Input
-                      type="date"
-                      value={formData.date}
-                      onChange={(e) => setFormData({ ...formData, date: e.target.value })}
-                    />
-                  </InputGroup>
-                </FormControl>
-
-                <FormControl isRequired>
-                  <FormLabel>标题</FormLabel>
-                  <Input
-                    value={formData.title}
-                    onChange={(e) => setFormData({ ...formData, title: e.target.value })}
-                    placeholder={formData.type === 'plan' ? '例如：布局新能源板块' : '例如：本周交易复盘'}
-                  />
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>内容</FormLabel>
-                  <Textarea
-                    value={formData.content}
-                    onChange={(e) => setFormData({ ...formData, content: e.target.value })}
-                    placeholder={formData.type === 'plan' ?
-                      '详细描述您的投资计划...' :
-                      '记录您的交易心得和经验教训...'}
-                    rows={6}
-                  />
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>相关股票</FormLabel>
-                  <HStack>
-                    <Input
-                      value={stockInput}
-                      onChange={(e) => setStockInput(e.target.value)}
-                      placeholder="输入股票代码"
-                      onKeyPress={(e) => e.key === 'Enter' && handleAddStock()}
-                    />
-                    <Button onClick={handleAddStock}>添加</Button>
-                  </HStack>
-                  <HStack mt={2} spacing={2} flexWrap="wrap">
-                    {formData.stocks.map((stock, idx) => (
-                      <Tag key={idx} size="sm" colorScheme="blue">
-                        <TagLeftIcon as={FiTrendingUp} />
-                        <TagLabel>{stock}</TagLabel>
-                        <TagCloseButton
-                          onClick={() => setFormData({
-                            ...formData,
-                            stocks: formData.stocks.filter((_, i) => i !== idx)
-                          })}
-                        />
-                      </Tag>
-                    ))}
-                  </HStack>
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>标签</FormLabel>
-                  <HStack>
-                    <Input
-                      value={tagInput}
-                      onChange={(e) => setTagInput(e.target.value)}
-                      placeholder="输入标签"
-                      onKeyPress={(e) => e.key === 'Enter' && handleAddTag()}
-                    />
-                    <Button onClick={handleAddTag}>添加</Button>
-                  </HStack>
-                  <HStack mt={2} spacing={2} flexWrap="wrap">
-                    {formData.tags.map((tag, idx) => (
-                      <Tag key={idx} size="sm" colorScheme="purple">
-                        <TagLeftIcon as={FiHash} />
-                        <TagLabel>{tag}</TagLabel>
-                        <TagCloseButton
-                          onClick={() => setFormData({
-                            ...formData,
-                            tags: formData.tags.filter((_, i) => i !== idx)
-                          })}
-                        />
-                      </Tag>
-                    ))}
-                  </HStack>
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>状态</FormLabel>
-                  <Select
-                    value={formData.status}
-                    onChange={(e) => setFormData({ ...formData, status: e.target.value })}
-                  >
-                    <option value="active">进行中</option>
-                    <option value="completed">已完成</option>
-                    <option value="cancelled">已取消</option>
-                  </Select>
-                </FormControl>
-              </VStack>
-            </ModalBody>
-            <ModalFooter>
-              <Button variant="ghost" mr={3} onClick={onClose}>
-                取消
-              </Button>
-              <Button
-                colorScheme="blue"
-                onClick={handleSave}
-                isDisabled={!formData.title || !formData.date}
-                leftIcon={<FiSave />}
-              >
-                保存
-              </Button>
-            </ModalFooter>
-          </ModalContent>
-        </Modal>
-      )}
-    </Box>
-  );
-}

src/views/Dashboard/components/PlansPanel.tsx

@@ -1,506 +0,0 @@
-/**
- * PlansPanel - 投资计划列表面板组件
- * 显示、编辑和管理投资计划
- */
-
-import React, { useState } from 'react';
-import {
-  Box,
-  Button,
-  Badge,
-  IconButton,
-  Flex,
-  Grid,
-  Card,
-  CardBody,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
-  ModalCloseButton,
-  useDisclosure,
-  VStack,
-  HStack,
-  Text,
-  Spinner,
-  Center,
-  Icon,
-  Input,
-  InputGroup,
-  InputLeftElement,
-  FormControl,
-  FormLabel,
-  Textarea,
-  Select,
-  Tag,
-  TagLabel,
-  TagLeftIcon,
-  TagCloseButton,
-} from '@chakra-ui/react';
-import {
-  FiPlus,
-  FiEdit2,
-  FiTrash2,
-  FiSave,
-  FiTarget,
-  FiCalendar,
-  FiTrendingUp,
-  FiHash,
-  FiCheckCircle,
-  FiXCircle,
-  FiAlertCircle,
-} from 'react-icons/fi';
-import dayjs from 'dayjs';
-import 'dayjs/locale/zh-cn';
-
-import { usePlanningData } from './PlanningContext';
-import type { InvestmentEvent, PlanFormData, EventStatus } from '@/types';
-import { logger } from '@/utils/logger';
-import { getApiBase } from '@/utils/apiConfig';
-
-dayjs.locale('zh-cn');
-
-/**
- * 状态信息接口
- */
-interface StatusInfo {
-  icon: React.ComponentType;
-  color: string;
-  text: string;
-}
-
-/**
- * PlansPanel 组件
- * 计划列表面板，显示所有投资计划
- */
-export const PlansPanel: React.FC = () => {
-  const {
-    allEvents,
-    loadAllData,
-    loading,
-    toast,
-    textColor,
-    secondaryText,
-    cardBg,
-    borderColor,
-  } = usePlanningData();
-
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const [editingItem, setEditingItem] = useState<InvestmentEvent | null>(null);
-  const [formData, setFormData] = useState<PlanFormData>({
-    date: dayjs().format('YYYY-MM-DD'),
-    title: '',
-    content: '',
-    type: 'plan',
-    stocks: [],
-    tags: [],
-    status: 'active',
-  });
-  const [stockInput, setStockInput] = useState<string>('');
-  const [tagInput, setTagInput] = useState<string>('');
-
-  // 筛选计划列表（排除系统事件）
-  const plans = allEvents.filter(event => event.type === 'plan' && event.source !== 'future');
-
-  // 打开编辑/新建模态框
-  const handleOpenModal = (item: InvestmentEvent | null = null): void => {
-    if (item) {
-      setEditingItem(item);
-      setFormData({
-        date: dayjs(item.event_date || item.date).format('YYYY-MM-DD'),
-        title: item.title,
-        content: item.description || item.content || '',
-        type: 'plan',
-        stocks: item.stocks || [],
-        tags: item.tags || [],
-        status: item.status || 'active',
-      });
-    } else {
-      setEditingItem(null);
-      setFormData({
-        date: dayjs().format('YYYY-MM-DD'),
-        title: '',
-        content: '',
-        type: 'plan',
-        stocks: [],
-        tags: [],
-        status: 'active',
-      });
-    }
-    onOpen();
-  };
-
-  // 保存数据
-  const handleSave = async (): Promise<void> => {
-    try {
-      const base = getApiBase();
-
-      const url = editingItem
-        ? base + `/api/account/investment-plans/${editingItem.id}`
-        : base + '/api/account/investment-plans';
-
-      const method = editingItem ? 'PUT' : 'POST';
-
-      const response = await fetch(url, {
-        method,
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-        body: JSON.stringify(formData),
-      });
-
-      if (response.ok) {
-        logger.info('PlansPanel', `${editingItem ? '更新' : '创建'}成功`, {
-          itemId: editingItem?.id,
-          title: formData.title,
-        });
-        toast({
-          title: editingItem ? '更新成功' : '创建成功',
-          status: 'success',
-          duration: 2000,
-        });
-        onClose();
-        loadAllData();
-      } else {
-        throw new Error('保存失败');
-      }
-    } catch (error) {
-      logger.error('PlansPanel', 'handleSave', error, {
-        itemId: editingItem?.id,
-        title: formData?.title
-      });
-      toast({
-        title: '保存失败',
-        description: '无法保存数据',
-        status: 'error',
-        duration: 3000,
-      });
-    }
-  };
-
-  // 删除数据
-  const handleDelete = async (id: number): Promise<void> => {
-    if (!window.confirm('确定要删除吗？')) return;
-
-    try {
-      const base = getApiBase();
-
-      const response = await fetch(base + `/api/account/investment-plans/${id}`, {
-        method: 'DELETE',
-        credentials: 'include',
-      });
-
-      if (response.ok) {
-        logger.info('PlansPanel', '删除成功', { itemId: id });
-        toast({
-          title: '删除成功',
-          status: 'success',
-          duration: 2000,
-        });
-        loadAllData();
-      }
-    } catch (error) {
-      logger.error('PlansPanel', 'handleDelete', error, { itemId: id });
-      toast({
-        title: '删除失败',
-        status: 'error',
-        duration: 3000,
-      });
-    }
-  };
-
-  // 添加股票
-  const handleAddStock = (): void => {
-    if (stockInput.trim() && !formData.stocks.includes(stockInput.trim())) {
-      setFormData({
-        ...formData,
-        stocks: [...formData.stocks, stockInput.trim()],
-      });
-      setStockInput('');
-    }
-  };
-
-  // 添加标签
-  const handleAddTag = (): void => {
-    if (tagInput.trim() && !formData.tags.includes(tagInput.trim())) {
-      setFormData({
-        ...formData,
-        tags: [...formData.tags, tagInput.trim()],
-      });
-      setTagInput('');
-    }
-  };
-
-  // 获取状态信息
-  const getStatusInfo = (status?: EventStatus): StatusInfo => {
-    switch (status) {
-      case 'completed':
-        return { icon: FiCheckCircle, color: 'green', text: '已完成' };
-      case 'cancelled':
-        return { icon: FiXCircle, color: 'red', text: '已取消' };
-      default:
-        return { icon: FiAlertCircle, color: 'blue', text: '进行中' };
-    }
-  };
-
-  // 渲染单个卡片
-  const renderCard = (item: InvestmentEvent): React.ReactElement => {
-    const statusInfo = getStatusInfo(item.status);
-
-    return (
-      <Card
-        key={item.id}
-        bg={cardBg}
-        shadow="sm"
-        _hover={{ shadow: 'md' }}
-        transition="all 0.2s"
-      >
-        <CardBody>
-          <VStack align="stretch" spacing={3}>
-            <Flex justify="space-between" align="start">
-              <VStack align="start" spacing={1} flex={1}>
-                <HStack>
-                  <Icon as={FiTarget} color="purple.500" />
-                  <Text fontWeight="bold" fontSize="lg">
-                    {item.title}
-                  </Text>
-                </HStack>
-                <HStack spacing={2}>
-                  <Icon as={FiCalendar} boxSize={3} color={secondaryText} />
-                  <Text fontSize="sm" color={secondaryText}>
-                    {dayjs(item.event_date || item.date).format('YYYY年MM月DD日')}
-                  </Text>
-                  <Badge
-                    colorScheme={statusInfo.color}
-                    variant="subtle"
-                  >
-                    {statusInfo.text}
-                  </Badge>
-                </HStack>
-              </VStack>
-              <HStack>
-                <IconButton
-                  icon={<FiEdit2 />}
-                  size="sm"
-                  variant="ghost"
-                  onClick={() => handleOpenModal(item)}
-                  aria-label="编辑计划"
-                />
-                <IconButton
-                  icon={<FiTrash2 />}
-                  size="sm"
-                  variant="ghost"
-                  colorScheme="red"
-                  onClick={() => handleDelete(item.id)}
-                  aria-label="删除计划"
-                />
-              </HStack>
-            </Flex>
-
-            {(item.content || item.description) && (
-              <Text fontSize="sm" color={textColor} noOfLines={3}>
-                {item.content || item.description}
-              </Text>
-            )}
-
-            <HStack spacing={2} flexWrap="wrap">
-              {item.stocks && item.stocks.length > 0 && (
-                <>
-                  {item.stocks.map((stock, idx) => (
-                    <Tag key={idx} size="sm" colorScheme="blue" variant="subtle">
-                      <TagLeftIcon as={FiTrendingUp} />
-                      <TagLabel>{stock}</TagLabel>
-                    </Tag>
-                  ))}
-                </>
-              )}
-              {item.tags && item.tags.length > 0 && (
-                <>
-                  {item.tags.map((tag, idx) => (
-                    <Tag key={idx} size="sm" colorScheme="purple" variant="subtle">
-                      <TagLeftIcon as={FiHash} />
-                      <TagLabel>{tag}</TagLabel>
-                    </Tag>
-                  ))}
-                </>
-              )}
-            </HStack>
-          </VStack>
-        </CardBody>
-      </Card>
-    );
-  };
-
-  return (
-    <Box>
-      <VStack align="stretch" spacing={4}>
-        <Flex justify="flex-end">
-          <Button
-            size="sm"
-            colorScheme="purple"
-            leftIcon={<FiPlus />}
-            onClick={() => handleOpenModal(null)}
-          >
-            新建计划
-          </Button>
-        </Flex>
-
-        {loading ? (
-          <Center py={8}>
-            <Spinner size="xl" color="purple.500" />
-          </Center>
-        ) : plans.length === 0 ? (
-          <Center py={8}>
-            <VStack spacing={3}>
-              <Icon as={FiTarget} boxSize={12} color="gray.300" />
-              <Text color={secondaryText}>暂无投资计划</Text>
-              <Button
-                size="sm"
-                colorScheme="purple"
-                leftIcon={<FiPlus />}
-                onClick={() => handleOpenModal(null)}
-              >
-                创建第一个计划
-              </Button>
-            </VStack>
-          </Center>
-        ) : (
-          <Grid templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)' }} gap={4}>
-            {plans.map(renderCard)}
-          </Grid>
-        )}
-      </VStack>
-
-      {/* 编辑/新建模态框 */}
-      {isOpen && (
-        <Modal isOpen={isOpen} onClose={onClose} size="xl" closeOnOverlayClick={false} closeOnEsc={true}>
-          <ModalOverlay />
-          <ModalContent>
-            <ModalHeader>
-              {editingItem ? '编辑' : '新建'}投资计划
-            </ModalHeader>
-            <ModalCloseButton />
-            <ModalBody>
-              <VStack spacing={4}>
-                <FormControl isRequired>
-                  <FormLabel>日期</FormLabel>
-                  <InputGroup>
-                    <InputLeftElement pointerEvents="none">
-                      <Icon as={FiCalendar} color={secondaryText} />
-                    </InputLeftElement>
-                    <Input
-                      type="date"
-                      value={formData.date}
-                      onChange={(e) => setFormData({ ...formData, date: e.target.value })}
-                    />
-                  </InputGroup>
-                </FormControl>
-
-                <FormControl isRequired>
-                  <FormLabel>标题</FormLabel>
-                  <Input
-                    value={formData.title}
-                    onChange={(e) => setFormData({ ...formData, title: e.target.value })}
-                    placeholder="例如：布局新能源板块"
-                  />
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>内容</FormLabel>
-                  <Textarea
-                    value={formData.content}
-                    onChange={(e) => setFormData({ ...formData, content: e.target.value })}
-                    placeholder="详细描述您的投资计划..."
-                    rows={6}
-                  />
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>相关股票</FormLabel>
-                  <HStack>
-                    <Input
-                      value={stockInput}
-                      onChange={(e) => setStockInput(e.target.value)}
-                      placeholder="输入股票代码"
-                      onKeyPress={(e) => e.key === 'Enter' && handleAddStock()}
-                    />
-                    <Button onClick={handleAddStock}>添加</Button>
-                  </HStack>
-                  <HStack mt={2} spacing={2} flexWrap="wrap">
-                    {(formData.stocks || []).map((stock, idx) => (
-                      <Tag key={idx} size="sm" colorScheme="blue">
-                        <TagLeftIcon as={FiTrendingUp} />
-                        <TagLabel>{stock}</TagLabel>
-                        <TagCloseButton
-                          onClick={() => setFormData({
-                            ...formData,
-                            stocks: formData.stocks.filter((_, i) => i !== idx)
-                          })}
-                        />
-                      </Tag>
-                    ))}
-                  </HStack>
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>标签</FormLabel>
-                  <HStack>
-                    <Input
-                      value={tagInput}
-                      onChange={(e) => setTagInput(e.target.value)}
-                      placeholder="输入标签"
-                      onKeyPress={(e) => e.key === 'Enter' && handleAddTag()}
-                    />
-                    <Button onClick={handleAddTag}>添加</Button>
-                  </HStack>
-                  <HStack mt={2} spacing={2} flexWrap="wrap">
-                    {(formData.tags || []).map((tag, idx) => (
-                      <Tag key={idx} size="sm" colorScheme="purple">
-                        <TagLeftIcon as={FiHash} />
-                        <TagLabel>{tag}</TagLabel>
-                        <TagCloseButton
-                          onClick={() => setFormData({
-                            ...formData,
-                            tags: formData.tags.filter((_, i) => i !== idx)
-                          })}
-                        />
-                      </Tag>
-                    ))}
-                  </HStack>
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>状态</FormLabel>
-                  <Select
-                    value={formData.status}
-                    onChange={(e) => setFormData({ ...formData, status: e.target.value as EventStatus })}
-                  >
-                    <option value="active">进行中</option>
-                    <option value="completed">已完成</option>
-                    <option value="cancelled">已取消</option>
-                  </Select>
-                </FormControl>
-              </VStack>
-            </ModalBody>
-            <ModalFooter>
-              <Button variant="ghost" mr={3} onClick={onClose}>
-                取消
-              </Button>
-              <Button
-                colorScheme="purple"
-                onClick={handleSave}
-                isDisabled={!formData.title || !formData.date}
-                leftIcon={<FiSave />}
-              >
-                保存
-              </Button>
-            </ModalFooter>
-          </ModalContent>
-        </Modal>
-      )}
-    </Box>
-  );
-};

src/views/Dashboard/components/ReviewsPanel.tsx

@@ -1,506 +0,0 @@
-/**
- * ReviewsPanel - 投资复盘列表面板组件
- * 显示、编辑和管理投资复盘
- */
-
-import React, { useState } from 'react';
-import {
-  Box,
-  Button,
-  Badge,
-  IconButton,
-  Flex,
-  Grid,
-  Card,
-  CardBody,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
-  ModalCloseButton,
-  useDisclosure,
-  VStack,
-  HStack,
-  Text,
-  Spinner,
-  Center,
-  Icon,
-  Input,
-  InputGroup,
-  InputLeftElement,
-  FormControl,
-  FormLabel,
-  Textarea,
-  Select,
-  Tag,
-  TagLabel,
-  TagLeftIcon,
-  TagCloseButton,
-} from '@chakra-ui/react';
-import {
-  FiPlus,
-  FiEdit2,
-  FiTrash2,
-  FiSave,
-  FiFileText,
-  FiCalendar,
-  FiTrendingUp,
-  FiHash,
-  FiCheckCircle,
-  FiXCircle,
-  FiAlertCircle,
-} from 'react-icons/fi';
-import dayjs from 'dayjs';
-import 'dayjs/locale/zh-cn';
-
-import { usePlanningData } from './PlanningContext';
-import type { InvestmentEvent, PlanFormData, EventStatus } from '@/types';
-import { logger } from '@/utils/logger';
-import { getApiBase } from '@/utils/apiConfig';
-
-dayjs.locale('zh-cn');
-
-/**
- * 状态信息接口
- */
-interface StatusInfo {
-  icon: React.ComponentType;
-  color: string;
-  text: string;
-}
-
-/**
- * ReviewsPanel 组件
- * 复盘列表面板，显示所有投资复盘
- */
-export const ReviewsPanel: React.FC = () => {
-  const {
-    allEvents,
-    loadAllData,
-    loading,
-    toast,
-    textColor,
-    secondaryText,
-    cardBg,
-    borderColor,
-  } = usePlanningData();
-
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const [editingItem, setEditingItem] = useState<InvestmentEvent | null>(null);
-  const [formData, setFormData] = useState<PlanFormData>({
-    date: dayjs().format('YYYY-MM-DD'),
-    title: '',
-    content: '',
-    type: 'review',
-    stocks: [],
-    tags: [],
-    status: 'active',
-  });
-  const [stockInput, setStockInput] = useState<string>('');
-  const [tagInput, setTagInput] = useState<string>('');
-
-  // 筛选复盘列表（排除系统事件）
-  const reviews = allEvents.filter(event => event.type === 'review' && event.source !== 'future');
-
-  // 打开编辑/新建模态框
-  const handleOpenModal = (item: InvestmentEvent | null = null): void => {
-    if (item) {
-      setEditingItem(item);
-      setFormData({
-        date: dayjs(item.event_date || item.date).format('YYYY-MM-DD'),
-        title: item.title,
-        content: item.description || item.content || '',
-        type: 'review',
-        stocks: item.stocks || [],
-        tags: item.tags || [],
-        status: item.status || 'active',
-      });
-    } else {
-      setEditingItem(null);
-      setFormData({
-        date: dayjs().format('YYYY-MM-DD'),
-        title: '',
-        content: '',
-        type: 'review',
-        stocks: [],
-        tags: [],
-        status: 'active',
-      });
-    }
-    onOpen();
-  };
-
-  // 保存数据
-  const handleSave = async (): Promise<void> => {
-    try {
-      const base = getApiBase();
-
-      const url = editingItem
-        ? base + `/api/account/investment-plans/${editingItem.id}`
-        : base + '/api/account/investment-plans';
-
-      const method = editingItem ? 'PUT' : 'POST';
-
-      const response = await fetch(url, {
-        method,
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-        body: JSON.stringify(formData),
-      });
-
-      if (response.ok) {
-        logger.info('ReviewsPanel', `${editingItem ? '更新' : '创建'}成功`, {
-          itemId: editingItem?.id,
-          title: formData.title,
-        });
-        toast({
-          title: editingItem ? '更新成功' : '创建成功',
-          status: 'success',
-          duration: 2000,
-        });
-        onClose();
-        loadAllData();
-      } else {
-        throw new Error('保存失败');
-      }
-    } catch (error) {
-      logger.error('ReviewsPanel', 'handleSave', error, {
-        itemId: editingItem?.id,
-        title: formData?.title
-      });
-      toast({
-        title: '保存失败',
-        description: '无法保存数据',
-        status: 'error',
-        duration: 3000,
-      });
-    }
-  };
-
-  // 删除数据
-  const handleDelete = async (id: number): Promise<void> => {
-    if (!window.confirm('确定要删除吗？')) return;
-
-    try {
-      const base = getApiBase();
-
-      const response = await fetch(base + `/api/account/investment-plans/${id}`, {
-        method: 'DELETE',
-        credentials: 'include',
-      });
-
-      if (response.ok) {
-        logger.info('ReviewsPanel', '删除成功', { itemId: id });
-        toast({
-          title: '删除成功',
-          status: 'success',
-          duration: 2000,
-        });
-        loadAllData();
-      }
-    } catch (error) {
-      logger.error('ReviewsPanel', 'handleDelete', error, { itemId: id });
-      toast({
-        title: '删除失败',
-        status: 'error',
-        duration: 3000,
-      });
-    }
-  };
-
-  // 添加股票
-  const handleAddStock = (): void => {
-    if (stockInput.trim() && !formData.stocks.includes(stockInput.trim())) {
-      setFormData({
-        ...formData,
-        stocks: [...formData.stocks, stockInput.trim()],
-      });
-      setStockInput('');
-    }
-  };
-
-  // 添加标签
-  const handleAddTag = (): void => {
-    if (tagInput.trim() && !formData.tags.includes(tagInput.trim())) {
-      setFormData({
-        ...formData,
-        tags: [...formData.tags, tagInput.trim()],
-      });
-      setTagInput('');
-    }
-  };
-
-  // 获取状态信息
-  const getStatusInfo = (status?: EventStatus): StatusInfo => {
-    switch (status) {
-      case 'completed':
-        return { icon: FiCheckCircle, color: 'green', text: '已完成' };
-      case 'cancelled':
-        return { icon: FiXCircle, color: 'red', text: '已取消' };
-      default:
-        return { icon: FiAlertCircle, color: 'blue', text: '进行中' };
-    }
-  };
-
-  // 渲染单个卡片
-  const renderCard = (item: InvestmentEvent): React.ReactElement => {
-    const statusInfo = getStatusInfo(item.status);
-
-    return (
-      <Card
-        key={item.id}
-        bg={cardBg}
-        shadow="sm"
-        _hover={{ shadow: 'md' }}
-        transition="all 0.2s"
-      >
-        <CardBody>
-          <VStack align="stretch" spacing={3}>
-            <Flex justify="space-between" align="start">
-              <VStack align="start" spacing={1} flex={1}>
-                <HStack>
-                  <Icon as={FiFileText} color="green.500" />
-                  <Text fontWeight="bold" fontSize="lg">
-                    {item.title}
-                  </Text>
-                </HStack>
-                <HStack spacing={2}>
-                  <Icon as={FiCalendar} boxSize={3} color={secondaryText} />
-                  <Text fontSize="sm" color={secondaryText}>
-                    {dayjs(item.event_date || item.date).format('YYYY年MM月DD日')}
-                  </Text>
-                  <Badge
-                    colorScheme={statusInfo.color}
-                    variant="subtle"
-                  >
-                    {statusInfo.text}
-                  </Badge>
-                </HStack>
-              </VStack>
-              <HStack>
-                <IconButton
-                  icon={<FiEdit2 />}
-                  size="sm"
-                  variant="ghost"
-                  onClick={() => handleOpenModal(item)}
-                  aria-label="编辑复盘"
-                />
-                <IconButton
-                  icon={<FiTrash2 />}
-                  size="sm"
-                  variant="ghost"
-                  colorScheme="red"
-                  onClick={() => handleDelete(item.id)}
-                  aria-label="删除复盘"
-                />
-              </HStack>
-            </Flex>
-
-            {(item.content || item.description) && (
-              <Text fontSize="sm" color={textColor} noOfLines={3}>
-                {item.content || item.description}
-              </Text>
-            )}
-
-            <HStack spacing={2} flexWrap="wrap">
-              {item.stocks && item.stocks.length > 0 && (
-                <>
-                  {item.stocks.map((stock, idx) => (
-                    <Tag key={idx} size="sm" colorScheme="blue" variant="subtle">
-                      <TagLeftIcon as={FiTrendingUp} />
-                      <TagLabel>{stock}</TagLabel>
-                    </Tag>
-                  ))}
-                </>
-              )}
-              {item.tags && item.tags.length > 0 && (
-                <>
-                  {item.tags.map((tag, idx) => (
-                    <Tag key={idx} size="sm" colorScheme="green" variant="subtle">
-                      <TagLeftIcon as={FiHash} />
-                      <TagLabel>{tag}</TagLabel>
-                    </Tag>
-                  ))}
-                </>
-              )}
-            </HStack>
-          </VStack>
-        </CardBody>
-      </Card>
-    );
-  };
-
-  return (
-    <Box>
-      <VStack align="stretch" spacing={4}>
-        <Flex justify="flex-end">
-          <Button
-            size="sm"
-            colorScheme="green"
-            leftIcon={<FiPlus />}
-            onClick={() => handleOpenModal(null)}
-          >
-            新建复盘
-          </Button>
-        </Flex>
-
-        {loading ? (
-          <Center py={8}>
-            <Spinner size="xl" color="green.500" />
-          </Center>
-        ) : reviews.length === 0 ? (
-          <Center py={8}>
-            <VStack spacing={3}>
-              <Icon as={FiFileText} boxSize={12} color="gray.300" />
-              <Text color={secondaryText}>暂无投资复盘</Text>
-              <Button
-                size="sm"
-                colorScheme="green"
-                leftIcon={<FiPlus />}
-                onClick={() => handleOpenModal(null)}
-              >
-                创建第一个复盘
-              </Button>
-            </VStack>
-          </Center>
-        ) : (
-          <Grid templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)' }} gap={4}>
-            {reviews.map(renderCard)}
-          </Grid>
-        )}
-      </VStack>
-
-      {/* 编辑/新建模态框 */}
-      {isOpen && (
-        <Modal isOpen={isOpen} onClose={onClose} size="xl" closeOnOverlayClick={false} closeOnEsc={true}>
-          <ModalOverlay />
-          <ModalContent>
-            <ModalHeader>
-              {editingItem ? '编辑' : '新建'}投资复盘
-            </ModalHeader>
-            <ModalCloseButton />
-            <ModalBody>
-              <VStack spacing={4}>
-                <FormControl isRequired>
-                  <FormLabel>日期</FormLabel>
-                  <InputGroup>
-                    <InputLeftElement pointerEvents="none">
-                      <Icon as={FiCalendar} color={secondaryText} />
-                    </InputLeftElement>
-                    <Input
-                      type="date"
-                      value={formData.date}
-                      onChange={(e) => setFormData({ ...formData, date: e.target.value })}
-                    />
-                  </InputGroup>
-                </FormControl>
-
-                <FormControl isRequired>
-                  <FormLabel>标题</FormLabel>
-                  <Input
-                    value={formData.title}
-                    onChange={(e) => setFormData({ ...formData, title: e.target.value })}
-                    placeholder="例如：本周操作复盘"
-                  />
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>内容</FormLabel>
-                  <Textarea
-                    value={formData.content}
-                    onChange={(e) => setFormData({ ...formData, content: e.target.value })}
-                    placeholder="详细记录您的投资复盘..."
-                    rows={6}
-                  />
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>相关股票</FormLabel>
-                  <HStack>
-                    <Input
-                      value={stockInput}
-                      onChange={(e) => setStockInput(e.target.value)}
-                      placeholder="输入股票代码"
-                      onKeyPress={(e) => e.key === 'Enter' && handleAddStock()}
-                    />
-                    <Button onClick={handleAddStock}>添加</Button>
-                  </HStack>
-                  <HStack mt={2} spacing={2} flexWrap="wrap">
-                    {(formData.stocks || []).map((stock, idx) => (
-                      <Tag key={idx} size="sm" colorScheme="blue">
-                        <TagLeftIcon as={FiTrendingUp} />
-                        <TagLabel>{stock}</TagLabel>
-                        <TagCloseButton
-                          onClick={() => setFormData({
-                            ...formData,
-                            stocks: formData.stocks.filter((_, i) => i !== idx)
-                          })}
-                        />
-                      </Tag>
-                    ))}
-                  </HStack>
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>标签</FormLabel>
-                  <HStack>
-                    <Input
-                      value={tagInput}
-                      onChange={(e) => setTagInput(e.target.value)}
-                      placeholder="输入标签"
-                      onKeyPress={(e) => e.key === 'Enter' && handleAddTag()}
-                    />
-                    <Button onClick={handleAddTag}>添加</Button>
-                  </HStack>
-                  <HStack mt={2} spacing={2} flexWrap="wrap">
-                    {(formData.tags || []).map((tag, idx) => (
-                      <Tag key={idx} size="sm" colorScheme="green">
-                        <TagLeftIcon as={FiHash} />
-                        <TagLabel>{tag}</TagLabel>
-                        <TagCloseButton
-                          onClick={() => setFormData({
-                            ...formData,
-                            tags: formData.tags.filter((_, i) => i !== idx)
-                          })}
-                        />
-                      </Tag>
-                    ))}
-                  </HStack>
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>状态</FormLabel>
-                  <Select
-                    value={formData.status}
-                    onChange={(e) => setFormData({ ...formData, status: e.target.value as EventStatus })}
-                  >
-                    <option value="active">进行中</option>
-                    <option value="completed">已完成</option>
-                    <option value="cancelled">已取消</option>
-                  </Select>
-                </FormControl>
-              </VStack>
-            </ModalBody>
-            <ModalFooter>
-              <Button variant="ghost" mr={3} onClick={onClose}>
-                取消
-              </Button>
-              <Button
-                colorScheme="green"
-                onClick={handleSave}
-                isDisabled={!formData.title || !formData.date}
-                leftIcon={<FiSave />}
-              >
-                保存
-              </Button>
-            </ModalFooter>
-          </ModalContent>
-        </Modal>
-      )}
-    </Box>
-  );
-};

src/views/Home/HomePage.tsx

@@ -91,7 +91,7 @@ const HomePage: React.FC = () => {
 
         <Container maxW="7xl" position="relative" zIndex={30} px={containerPx}>
           <VStack
-            spacing={{ base: 8, md: 12, lg: 16 }}
+            spacing={{ base: 5, md: 8, lg: 10 }}
             align="stretch"
             minH={heroHeight}
             justify="center"
@@ -104,8 +104,8 @@ const HomePage: React.FC = () => {
             />
 
             {/* 核心功能面板 */}
-            <Box pb={{ base: 8, md: 12 }}>
-              <VStack spacing={{ base: 6, md: 8 }}>
+            <Box pb={{ base: 5, md: 8 }}>
+              <VStack spacing={{ base: 4, md: 5 }}>
                 {/* 特色功能卡片 - 新闻中心 */}
                 <FeaturedFeatureCard
                   feature={featuredFeature}
@@ -115,7 +115,7 @@ const HomePage: React.FC = () => {
                 {/* 其他功能卡片 */}
                 <SimpleGrid
                   columns={{ base: 1, md: 2, lg: 3 }}
-                  spacing={{ base: 4, md: 5, lg: 6 }}
+                  spacing={{ base: 2, md: 3, lg: 4 }}
                   w="100%"
                 >
                   {regularFeatures.map((feature) => (

src/views/Home/components/FeatureCard.tsx

@@ -34,51 +34,51 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
       backdropFilter="blur(10px)"
       border="1px solid"
       borderColor="whiteAlpha.200"
-      borderRadius={{ base: 'xl', md: '2xl' }}
+      borderRadius={{ base: 'lg', md: 'xl' }}
       transition="all 0.3s ease"
       _hover={{
         bg: 'whiteAlpha.200',
         borderColor: `${feature.color}.400`,
-        transform: 'translateY(-4px)',
-        shadow: '2xl'
+        transform: 'translateY(-3px)',
+        shadow: 'xl'
       }}
       _active={{
         bg: 'whiteAlpha.200',
         borderColor: `${feature.color}.400`,
-        transform: 'translateY(-2px)'
+        transform: 'translateY(-1px)'
       }}
       onClick={() => onClick(feature)}
-      minH={{ base: 'auto', md: '180px' }}
+      minH={{ base: 'auto', md: '120px' }}
       cursor="pointer"
     >
-      <CardBody p={{ base: 5, md: 6 }}>
-        <VStack spacing={{ base: 3, md: 4 }} align="start" h="100%">
+      <CardBody p={{ base: 3, md: 4 }}>
+        <VStack spacing={{ base: 2, md: 2.5 }} align="start" h="100%">
           <HStack>
             <Box
-              p={{ base: 2, md: 3 }}
-              borderRadius="lg"
+              p={{ base: 1.5, md: 2 }}
+              borderRadius="md"
               bg={`${feature.color}.50`}
               border="1px solid"
               borderColor={`${feature.color}.200`}
             >
-              <Text fontSize={{ base: 'xl', md: '2xl' }}>{feature.icon}</Text>
+              <Text fontSize={{ base: 'md', md: 'lg' }}>{feature.icon}</Text>
             </Box>
             <Badge
               colorScheme={feature.color}
               variant="solid"
-              fontSize={{ base: 'xs', md: 'sm' }}
+              fontSize={{ base: '2xs', md: 'xs' }}
             >
               {feature.badge}
             </Badge>
           </HStack>
 
-          <VStack align="start" spacing={{ base: 1, md: 2 }} flex={1}>
-            <Heading size={{ base: 'md', md: 'lg' }} color="white">
+          <VStack align="start" spacing={{ base: 0.5, md: 1 }} flex={1}>
+            <Heading size={{ base: 'sm', md: 'md' }} color="white">
               {feature.title}
             </Heading>
             <Text
               color="whiteAlpha.800"
-              fontSize={{ base: 'xs', md: 'sm' }}
+              fontSize={{ base: '2xs', md: 'xs' }}
               lineHeight="tall"
             >
               {feature.description}
@@ -87,11 +87,11 @@ export const FeatureCard: React.FC<FeatureCardProps> = ({
 
           <Button
             colorScheme={feature.color}
-            size={{ base: 'md', md: 'sm' }}
+            size={{ base: 'sm', md: 'xs' }}
             variant="outline"
             alignSelf="flex-end"
             w={{ base: '100%', md: 'auto' }}
-            minH="44px"
+            minH="32px"
             onClick={(e) => {
               e.stopPropagation();
               onClick(feature);

src/views/Home/components/FeaturedFeatureCard.tsx

@@ -34,7 +34,7 @@ export const FeaturedFeatureCard: React.FC<FeaturedFeatureCardProps> = ({
       bg="transparent"
       border="2px solid"
       borderColor="yellow.400"
-      borderRadius={{ base: '2xl', md: '3xl' }}
+      borderRadius={{ base: 'xl', md: '2xl' }}
       overflow="hidden"
       position="relative"
       shadow="2xl"
@@ -50,35 +50,35 @@ export const FeaturedFeatureCard: React.FC<FeaturedFeatureCardProps> = ({
         zIndex: 0
       }}
     >
-      <CardBody p={{ base: 6, md: 8 }} position="relative" zIndex={1}>
+      <CardBody p={{ base: 4, md: 5 }} position="relative" zIndex={1}>
         <Flex
           direction={{ base: 'column', md: 'row' }}
           align={{ base: 'stretch', md: 'center' }}
           justify={{ base: 'flex-start', md: 'space-between' }}
-          gap={{ base: 4, md: 6 }}
+          gap={{ base: 3, md: 4 }}
         >
-          <Flex align="center" gap={{ base: 4, md: 6 }} flex={1}>
+          <Flex align="center" gap={{ base: 3, md: 4 }} flex={1}>
             <Box
-              p={{ base: 3, md: 4 }}
-              borderRadius={{ base: 'lg', md: 'xl' }}
+              p={{ base: 2, md: 2.5 }}
+              borderRadius={{ base: 'md', md: 'lg' }}
               bg="yellow.400"
               color="black"
             >
-              <Text fontSize={{ base: '2xl', md: '3xl' }}>{feature.icon}</Text>
+              <Text fontSize={{ base: 'xl', md: '2xl' }}>{feature.icon}</Text>
             </Box>
-            <VStack align="start" spacing={{ base: 1, md: 2 }} flex={1}>
+            <VStack align="start" spacing={{ base: 0.5, md: 1 }} flex={1}>
               <HStack>
-                <Heading size={{ base: 'lg', md: 'xl' }} color="white">
+                <Heading size={{ base: 'md', md: 'lg' }} color="white">
                   {feature.title}
                 </Heading>
-                <Badge colorScheme="yellow" variant="solid" fontSize={{ base: 'xs', md: 'sm' }}>
+                <Badge colorScheme="yellow" variant="solid" fontSize={{ base: '2xs', md: 'xs' }}>
                   {feature.badge}
                 </Badge>
               </HStack>
               <Text
                 color="whiteAlpha.800"
-                fontSize={{ base: 'md', md: 'lg' }}
-                maxW={{ md: 'md' }}
+                fontSize={{ base: 'xs', md: 'sm' }}
+                maxW={{ md: 'sm' }}
                 lineHeight="tall"
               >
                 {feature.description}
@@ -87,12 +87,12 @@ export const FeaturedFeatureCard: React.FC<FeaturedFeatureCardProps> = ({
           </Flex>
           <Button
             colorScheme="yellow"
-            size={{ base: 'md', md: 'lg' }}
+            size={{ base: 'sm', md: 'md' }}
             borderRadius="full"
             fontWeight="bold"
             w={{ base: '100%', md: 'auto' }}
             onClick={() => onClick(feature)}
-            minH="44px"
+            minH="36px"
             flexShrink={0}
           >
             进入功能 →

src/views/Home/components/HeroHeader.tsx

@@ -21,9 +21,9 @@ export const HeroHeader: React.FC<HeroHeaderProps> = ({
 }) => {
   return (
     <VStack
-      spacing={{ base: 4, md: 5, lg: 6 }}
+      spacing={{ base: 2, md: 3, lg: 4 }}
       textAlign="center"
-      pt={{ base: 4, md: 6, lg: 8 }}
+      pt={{ base: 2, md: 4, lg: 5 }}
     >
       <Heading
         size={headingSize}
@@ -37,9 +37,9 @@ export const HeroHeader: React.FC<HeroHeaderProps> = ({
       <Text
         fontSize={heroTextSize}
         color="whiteAlpha.800"
-        maxW={{ base: '100%', md: '2xl', lg: '3xl' }}
+        maxW={{ base: '100%', md: 'xl', lg: '2xl' }}
         lineHeight="tall"
-        px={{ base: 4, md: 0 }}
+        px={{ base: 2, md: 0 }}
       >
         专业投资研究工具,助您把握市场机遇
       </Text>

src/views/StockOverview/index.js

@@ -27,7 +27,6 @@ import {
   Spacer,
   Icon,
   useColorModeValue,
-  useColorMode,
   useToast,
   Spinner,
   Center,
@@ -49,24 +48,26 @@ import {
   TagLabel,
   Skeleton,
   SkeletonText,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
 } from '@chakra-ui/react';
-import { SearchIcon, CloseIcon, ArrowForwardIcon, TrendingUpIcon, InfoIcon, ChevronRightIcon, MoonIcon, SunIcon, CalendarIcon } from '@chakra-ui/icons';
+import { SearchIcon, CloseIcon, ArrowForwardIcon, TrendingUpIcon, InfoIcon, ChevronRightIcon, CalendarIcon } from '@chakra-ui/icons';
 import { FaChartLine, FaFire, FaRocket, FaBrain, FaCalendarAlt, FaChevronRight, FaArrowUp, FaArrowDown, FaChartBar } from 'react-icons/fa';
+import ConceptStocksModal from '@components/ConceptStocksModal';
+import TradeDatePicker from '@components/TradeDatePicker';
 import { BsGraphUp, BsLightningFill } from 'react-icons/bs';
 import * as echarts from 'echarts';
 import { logger } from '../../utils/logger';
+import tradingDays from '../../data/tradingDays.json';
 import { useStockOverviewEvents } from './hooks/useStockOverviewEvents';
+
+// 交易日 Set，用于快速查找
+const tradingDaysSet = new Set(tradingDays);
 // Navigation bar now provided by MainLayout
 // import HomeNavbar from '../../components/Navbars/HomeNavbar';
 
 const StockOverview = () => {
   const navigate = useNavigate();
   const toast = useToast();
-  const { colorMode, toggleColorMode } = useColorMode();
+  const colorMode = 'light'; // 固定为 light 模式
   const heatmapRef = useRef(null);
   const heatmapChart = useRef(null);
 
@@ -96,7 +97,10 @@ const StockOverview = () => {
   const [selectedDate, setSelectedDate] = useState(null);
   const [marketStats, setMarketStats] = useState(null);
   const [availableDates, setAvailableDates] = useState([]);
-  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+
+  // 个股列表弹窗状态
+  const [isStockModalOpen, setIsStockModalOpen] = useState(false);
+  const [selectedConcept, setSelectedConcept] = useState(null);
 
   // 专业的颜色主题
   const bgColor = useColorModeValue('white', '#0a0a0a');
@@ -110,6 +114,13 @@ const StockOverview = () => {
   const accentColor = useColorModeValue('purple.600', goldColor);
   const heroBg = useColorModeValue('linear(to-br, purple.600, pink.500)', 'linear(to-br, #0a0a0a, #1a1a1a)');
 
+  // 打开个股列表弹窗
+  const handleViewStocks = useCallback((e, concept) => {
+    e.stopPropagation();
+    setSelectedConcept(concept);
+    setIsStockModalOpen(true);
+  }, []);
+
   // 防抖搜索
   const debounceSearch = useCallback(
     (() => {
@@ -173,7 +184,27 @@ const StockOverview = () => {
 
       if (data.success) {
         setTopConcepts(data.data);
-        if (!selectedDate) setSelectedDate(data.trade_date);
+        // 使用概念接口的日期作为统一数据源（数据最新）
+        setSelectedDate(new Date(data.trade_date));
+        // 基于交易日历生成可选日期列表
+        if (data.trade_date && tradingDays.length > 0) {
+          // 找到当前日期或最近的交易日
+          let targetDate = data.trade_date;
+          if (!tradingDaysSet.has(data.trade_date)) {
+            for (let i = tradingDays.length - 1; i >= 0; i--) {
+              if (tradingDays[i] <= data.trade_date) {
+                targetDate = tradingDays[i];
+                break;
+              }
+            }
+          }
+          const idx = tradingDays.indexOf(targetDate);
+          if (idx !== -1) {
+            const startIdx = Math.max(0, idx - 19);
+            const dates = tradingDays.slice(startIdx, idx + 1).reverse();
+            setAvailableDates(dates);
+          }
+        }
         logger.debug('StockOverview', '热门概念加载成功', {
           count: data.data?.length || 0,
           date: data.trade_date
@@ -204,7 +235,7 @@ const StockOverview = () => {
             falling_count: data.statistics.falling_count
           }));
         }
-        if (!selectedDate) setSelectedDate(data.trade_date);
+        // 日期由 fetchTopConcepts 统一设置，这里不再设置
         logger.debug('StockOverview', '热力图数据加载成功', {
           count: data.data?.length || 0,
           date: data.trade_date
@@ -235,11 +266,9 @@ const StockOverview = () => {
           date: data.trade_date
         };
         setMarketStats(newStats);
-        setAvailableDates(data.available_dates || []);
-        if (!selectedDate) setSelectedDate(data.trade_date);
+        // 日期和可选日期列表由 fetchTopConcepts 统一设置，这里不再设置
         logger.debug('StockOverview', '市场统计数据加载成功', {
-          date: data.trade_date,
-          availableDatesCount: data.available_dates?.length || 0
+          date: data.trade_date
         });
 
         // 🎯 追踪市场统计数据查看
@@ -484,20 +513,6 @@ const StockOverview = () => {
     window.open(htmlPath, '_blank');
   };
 
-  // 处理日期选择
-  const handleDateChange = (date) => {
-    const previousDate = selectedDate;
-
-    // 🎯 追踪日期变化
-    trackDateChanged(date, previousDate);
-
-    setSelectedDate(date);
-    setIsCalendarOpen(false);
-    // 重新获取数据
-    fetchHeatmapData(date);
-    fetchMarketStats(date);
-    fetchTopConcepts(date);
-  };
 
   // 格式化涨跌幅
   const formatChangePercent = (value) => {
@@ -586,25 +601,6 @@ const StockOverview = () => {
           filter="blur(40px)"
         />
         
-        {/* 日夜模式切换按钮 */}
-        <Box position="absolute" top={4} right={4}>
-          <IconButton
-            aria-label="Toggle color mode"
-            icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
-            onClick={toggleColorMode}
-            size="lg"
-            bg={colorMode === 'dark' ? '#1a1a1a' : 'white'}
-            color={colorMode === 'dark' ? goldColor : 'purple.600'}
-            border="2px solid"
-            borderColor={colorMode === 'dark' ? goldColor : 'purple.200'}
-            _hover={{
-              bg: colorMode === 'dark' ? '#2a2a2a' : 'purple.50',
-              transform: 'scale(1.1)'
-            }}
-            transition="all 0.3s"
-          />
-        </Box>
-        
         <Container maxW="container.xl" position="relative">
           <VStack spacing={8} align="center">
             <VStack spacing={4} textAlign="center" maxW="3xl">
@@ -819,60 +815,27 @@ const StockOverview = () => {
       <Container maxW="container.xl" py={10}>
         {/* 日期选择器 */}
         <Box mb={6}>
-          <Popover isOpen={isCalendarOpen} onClose={() => setIsCalendarOpen(false)}>
-            <PopoverTrigger>
-              <Button
-                leftIcon={<CalendarIcon />}
-                onClick={() => setIsCalendarOpen(!isCalendarOpen)}
-                variant="outline"
-                size="md"
-                colorScheme={colorMode === 'dark' ? 'yellow' : 'purple'}
-                bg={colorMode === 'dark' ? '#1a1a1a' : 'white'}
-                border="2px solid"
-                borderColor={colorMode === 'dark' ? goldColor : 'purple.300'}
-                _hover={{
-                  bg: colorMode === 'dark' ? '#2a2a2a' : 'purple.50'
-                }}
-              >
-                {selectedDate ? 
-                  `交易日期: ${selectedDate}` : 
-                  '选择交易日期'
-                }
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent bg={cardBg} borderColor={borderColor} boxShadow="xl">
-              <PopoverBody p={4}>
-                <VStack align="start" spacing={3}>
-                  <Text fontWeight="bold" color={textColor}>选择交易日期</Text>
-                  <Divider />
-                  {availableDates.length > 0 ? (
-                    <VStack align="stretch" maxH="300px" overflowY="auto" spacing={1} w="100%">
-                      {availableDates.map((date) => (
-                        <Button
-                          key={date}
-                          size="sm"
-                          variant={selectedDate === date ? 'solid' : 'ghost'}
-                          colorScheme={selectedDate === date ? (colorMode === 'dark' ? 'yellow' : 'purple') : 'gray'}
-                          onClick={() => handleDateChange(date)}
-                          justifyContent="start"
-                          w="100%"
-                        >
-                          {date}
-                        </Button>
-                      ))}
-                    </VStack>
-                  ) : (
-                    <Text fontSize="sm" color={subTextColor}>
-                      暂无可用日期
-                    </Text>
-                  )}
-                </VStack>
-              </PopoverBody>
-            </PopoverContent>
-          </Popover>
+          <Flex align="center" gap={4} flexWrap="wrap">
+            <TradeDatePicker
+              value={selectedDate}
+              onChange={(date) => {
+                const dateStr = date.toISOString().split('T')[0];
+                const previousDateStr = selectedDate ? selectedDate.toISOString().split('T')[0] : null;
+                trackDateChanged(dateStr, previousDateStr);
+                setSelectedDate(date);
+                fetchHeatmapData(dateStr);
+                fetchMarketStats(dateStr);
+                fetchTopConcepts(dateStr);
+              }}
+              latestTradeDate={null}
+              minDate={tradingDays.length > 0 ? new Date(tradingDays[0]) : undefined}
+              maxDate={tradingDays.length > 0 ? new Date(tradingDays[tradingDays.length - 1]) : undefined}
+              label="交易日期"
+            />
+          </Flex>
           {selectedDate && (
             <Text fontSize="sm" color={subTextColor} mt={2}>
-              当前显示 {selectedDate} 的市场数据
+              当前显示 {selectedDate.toISOString().split('T')[0]} 的市场数据
             </Text>
           )}
         </Box>
@@ -974,31 +937,33 @@ const StockOverview = () => {
 
                         <Divider />
 
-                        <Box w="100%">
+                        <Box
+                          w="100%"
+                          cursor="pointer"
+                          onClick={(e) => handleViewStocks(e, concept)}
+                          _hover={{ bg: hoverBg }}
+                          p={2}
+                          borderRadius="md"
+                          transition="background 0.2s"
+                        >
                           <Text fontSize="xs" color="gray.500" mb={2}>
                             包含 {concept.stock_count} 只个股
                           </Text>
-                          
+
                           {concept.stocks && concept.stocks.length > 0 && (
-                            <Flex flexWrap="wrap" gap={2}>
+                            <Flex
+                              flexWrap="nowrap"
+                              gap={2}
+                              overflow="hidden"
+                              maxH="24px"
+                            >
                               {concept.stocks.map((stock, idx) => (
                                 <Tag
                                   key={idx}
                                   size="sm"
                                   colorScheme="purple"
                                   variant="subtle"
-                                  cursor="pointer"
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-
-                                    // 🎯 追踪概念下的股票标签点击
-                                    trackConceptStockClicked({
-                                      code: stock.stock_code,
-                                      name: stock.stock_name
-                                    }, concept.concept_name);
-
-                                    navigate(`/company?scode=${stock.stock_code}`);
-                                  }}
+                                  flexShrink={0}
                                 >
                                   <TagLabel>{stock.stock_name}</TagLabel>
                                 </Tag>
@@ -1098,7 +1063,14 @@ const StockOverview = () => {
           </Card>
         </Box>
         </Container>
-        
+
+        {/* 个股列表弹窗 */}
+        <ConceptStocksModal
+          isOpen={isStockModalOpen}
+          onClose={() => setIsStockModalOpen(false)}
+          concept={selectedConcept}
+        />
+
       </Box>
     );
   };