diff --git a/src/views/Community/components/HeroPanel/components/DetailModal/DetailModal.js b/src/views/Community/components/HeroPanel/components/DetailModal/DetailModal.js
new file mode 100644
index 00000000..fb82f6e5
--- /dev/null
+++ b/src/views/Community/components/HeroPanel/components/DetailModal/DetailModal.js
@@ -0,0 +1,1130 @@
+// HeroPanel - 详情弹窗组件
+// 完整展示涨停分析和事件详情
+import React, { useCallback, useMemo } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { toggleWatchlist } from "@store/slices/stockSlice";
+import { useDetailModalState } from "../../hooks";
+import { Center } from "@chakra-ui/react";
+import {
+  Table,
+  Tabs,
+  Tag,
+  Button,
+  Spin,
+  Typography,
+  message,
+  Modal as AntModal,
+  ConfigProvider,
+  theme,
+} from "antd";
+import {
+  CalendarOutlined,
+  StockOutlined,
+  TagsOutlined,
+  FireOutlined,
+} from "@ant-design/icons";
+import { Calendar } from "lucide-react";
+import { GLASS_BLUR } from "@/constants/glassConfig";
+import { getApiBase } from "@utils/apiConfig";
+import ReactMarkdown from "react-markdown";
+import KLineChartModal from "@components/StockChart/KLineChartModal";
+import { getSixDigitCode, addExchangeSuffix } from "../../utils";
+import {
+  RelatedEventsModal,
+  SectorStocksModal,
+  ZTSectorView,
+  EventsTabView,
+  HotKeywordsCloud,
+  ZTStatsCards,
+} from "../index";
+import {
+  createStockColumns,
+  createSectorColumns,
+  createZtStockColumns,
+  createEventColumns,
+} from "../../columns";
+
+const { TabPane } = Tabs;
+const { Text: AntText } = Typography;
+
+/**
+ * 详情弹窗组件 - 完整展示涨停分析和事件详情
+ */
+const DetailModal = ({
+  isOpen,
+  onClose,
+  selectedDate,
+  ztDetail,
+  events,
+  loading,
+}) => {
+  const dispatch = useDispatch();
+  const reduxWatchlist = useSelector((state) => state.stock.watchlist);
+
+  // 使用状态管理 Hook（整合 17 个状态）
+  const {
+    // UI 状态 + setters
+    ztViewMode,
+    setZtViewMode,
+    selectedSectorFilter,
+    setSelectedSectorFilter,
+    expandedReasons,
+    setExpandedReasons,
+    // 弹窗状态 + setters
+    detailDrawerVisible,
+    setDetailDrawerVisible,
+    selectedContent,
+    setSelectedContent,
+    sectorStocksModalVisible,
+    setSectorStocksModalVisible,
+    selectedSectorInfo,
+    setSelectedSectorInfo,
+    stocksDrawerVisible,
+    setStocksDrawerVisible,
+    selectedEventStocks,
+    setSelectedEventStocks,
+    selectedEventTime,
+    setSelectedEventTime,
+    selectedEventTitle,
+    setSelectedEventTitle,
+    klineModalVisible,
+    setKlineModalVisible,
+    selectedKlineStock,
+    setSelectedKlineStock,
+    relatedEventsModalVisible,
+    setRelatedEventsModalVisible,
+    selectedRelatedEvents,
+    setSelectedRelatedEvents,
+    // 数据状态 + setters
+    stockQuotes,
+    setStockQuotes,
+    stockQuotesLoading,
+    setStockQuotesLoading,
+  } = useDetailModalState();
+
+  // 板块数据处理 - 必须在条件返回之前调用所有hooks
+  const sectorList = useMemo(() => {
+    if (!ztDetail?.sector_data) return [];
+    return Object.entries(ztDetail.sector_data)
+      .filter(([name]) => name !== "其他")
+      .map(([name, data]) => ({
+        name,
+        count: data.count,
+        stocks: data.stock_codes || [],
+        // 新增：关联事件数据（涨停归因）
+        related_events: data.related_events || [],
+      }))
+      .sort((a, b) => b.count - a.count);
+  }, [ztDetail]);
+
+  // 股票详情数据处理 - 支持两种字段名：stocks 和 stock_infos
+  // 按连板天数降序排列（高连板在前）
+  const stockList = useMemo(() => {
+    const stocksData = ztDetail?.stocks || ztDetail?.stock_infos;
+    if (!stocksData) return [];
+
+    // 解析连板天数的辅助函数
+    const parseContinuousDays = (text) => {
+      if (!text || text === "首板") return 1;
+      const match = text.match(/(\d+)/);
+      return match ? parseInt(match[1]) : 1;
+    };
+
+    return stocksData
+      .map((stock) => ({
+        ...stock,
+        key: stock.scode,
+        _continuousDays: parseContinuousDays(stock.continuous_days), // 用于排序
+      }))
+      .sort((a, b) => b._continuousDays - a._continuousDays); // 降序排列
+  }, [ztDetail]);
+
+  // 筛选后的股票列表（按板块筛选）
+  const filteredStockList = useMemo(() => {
+    if (!selectedSectorFilter) return stockList;
+    // 根据选中板块筛选
+    const sectorData = ztDetail?.sector_data?.[selectedSectorFilter];
+    if (!sectorData?.stock_codes) return stockList;
+    const sectorStockCodes = new Set(sectorData.stock_codes);
+    return stockList.filter((stock) => sectorStockCodes.has(stock.scode));
+  }, [stockList, selectedSectorFilter, ztDetail]);
+
+  // 热门关键词
+  const hotKeywords = useMemo(() => {
+    if (!ztDetail?.word_freq_data) return [];
+    return ztDetail.word_freq_data.slice(0, 12);
+  }, [ztDetail]);
+
+  // 涨停统计数据
+  const ztStats = useMemo(() => {
+    if (!stockList.length) return null;
+
+    // 连板分布统计
+    const continuousStats = { 首板: 0, "2连板": 0, "3连板": 0, "4连板+": 0 };
+    // 涨停时间分布统计
+    const timeStats = { 秒板: 0, 早盘: 0, 盘中: 0, 尾盘: 0 };
+    // 公告驱动统计
+    let announcementCount = 0;
+
+    stockList.forEach((stock) => {
+      // 连板统计
+      const days = stock.continuous_days || "首板";
+      if (days === "首板" || days.includes("1")) {
+        continuousStats["首板"]++;
+      } else {
+        const match = days.match(/(\d+)/);
+        const num = match ? parseInt(match[1]) : 1;
+        if (num === 2) continuousStats["2连板"]++;
+        else if (num === 3) continuousStats["3连板"]++;
+        else if (num >= 4) continuousStats["4连板+"]++;
+        else continuousStats["首板"]++;
+      }
+
+      // 时间统计
+      const time = stock.formatted_time || "15:00:00";
+      if (time <= "09:30:00") timeStats["秒板"]++;
+      else if (time <= "10:00:00") timeStats["早盘"]++;
+      else if (time <= "14:00:00") timeStats["盘中"]++;
+      else timeStats["尾盘"]++;
+
+      // 公告驱动
+      if (stock.is_announcement) announcementCount++;
+    });
+
+    return {
+      total: stockList.length,
+      continuousStats,
+      timeStats,
+      announcementCount,
+      announcementRatio:
+        stockList.length > 0
+          ? Math.round((announcementCount / stockList.length) * 100)
+          : 0,
+    };
+  }, [stockList]);
+
+  // 检查股票是否已在自选中 - 必须在条件返回之前
+  const isStockInWatchlist = useCallback(
+    (stockCode) => {
+      const sixDigitCode = getSixDigitCode(stockCode);
+      return reduxWatchlist?.some(
+        (item) => getSixDigitCode(item.stock_code) === sixDigitCode
+      );
+    },
+    [reduxWatchlist]
+  );
+
+  // 显示内容详情
+  const showContentDetail = useCallback(
+    (content, title) => {
+      setSelectedContent({ content, title });
+      setDetailDrawerVisible(true);
+    },
+    [setSelectedContent, setDetailDrawerVisible]
+  );
+
+  // 显示K线图
+  const showKline = useCallback(
+    (stock) => {
+      const code = stock.code;
+      const name = stock.name;
+      const stockCode = addExchangeSuffix(code);
+      setSelectedKlineStock({
+        stock_code: stockCode,
+        stock_name: name,
+      });
+      setKlineModalVisible(true);
+    },
+    [setSelectedKlineStock, setKlineModalVisible]
+  );
+
+  // 添加单只股票到自选
+  const addSingleToWatchlist = useCallback(
+    async (stock) => {
+      const code = stock.code;
+      const name = stock.name;
+      const stockCode = getSixDigitCode(code);
+
+      if (isStockInWatchlist(code)) {
+        message.info(`${name} 已在自选中`);
+        return;
+      }
+
+      try {
+        await dispatch(
+          toggleWatchlist({
+            stockCode,
+            stockName: name,
+            isInWatchlist: false,
+          })
+        ).unwrap();
+        message.success(`已将 ${name}(${stockCode}) 添加到自选`);
+      } catch (error) {
+        console.error("添加自选失败:", error);
+        message.error("添加失败，请重试");
+      }
+    },
+    [dispatch, isStockInWatchlist]
+  );
+
+  // 加载股票行情
+  const loadStockQuotes = useCallback(
+    async (stocks) => {
+      if (!stocks || stocks.length === 0) return;
+      setStockQuotesLoading(true);
+      const quotes = {};
+
+      for (const stock of stocks) {
+        const code = getSixDigitCode(stock.code);
+        try {
+          const response = await fetch(
+            `${getApiBase()}/api/market/trade/${code}?days=1`
+          );
+          if (response.ok) {
+            const data = await response.json();
+            if (data.success && data.data && data.data.length > 0) {
+              const latest = data.data[data.data.length - 1];
+              quotes[stock.code] = {
+                price: latest.close,
+                change: latest.change_amount,
+                changePercent: latest.change_percent,
+              };
+            }
+          }
+        } catch (err) {
+          console.error("加载股票行情失败:", code, err);
+        }
+      }
+
+      setStockQuotes(quotes);
+      setStockQuotesLoading(false);
+    },
+    [setStockQuotes, setStockQuotesLoading]
+  );
+
+  // 显示相关股票
+  const showRelatedStocks = useCallback(
+    (stocks, eventTime, eventTitle) => {
+      if (!stocks || stocks.length === 0) return;
+
+      // 归一化股票数据格式
+      const normalizedStocks = stocks
+        .map((stock) => {
+          if (typeof stock === "object" && !Array.isArray(stock)) {
+            return {
+              code: stock.code || stock.stock_code || "",
+              name: stock.name || stock.stock_name || "",
+              description: stock.description || stock.relation_desc || "",
+              score: stock.score || 0,
+              report: stock.report || null,
+            };
+          }
+          if (Array.isArray(stock)) {
+            return {
+              code: stock[0] || "",
+              name: stock[1] || "",
+              description: stock[2] || "",
+              score: stock[3] || 0,
+              report: null,
+            };
+          }
+          return null;
+        })
+        .filter(Boolean);
+
+      // 按相关度排序
+      const sortedStocks = normalizedStocks.sort(
+        (a, b) => (b.score || 0) - (a.score || 0)
+      );
+
+      setSelectedEventStocks(sortedStocks);
+      setSelectedEventTime(eventTime);
+      setSelectedEventTitle(eventTitle);
+      setStocksDrawerVisible(true);
+      setExpandedReasons({});
+      loadStockQuotes(sortedStocks);
+    },
+    [
+      setSelectedEventStocks,
+      setSelectedEventTime,
+      setSelectedEventTitle,
+      setStocksDrawerVisible,
+      setExpandedReasons,
+      loadStockQuotes,
+    ]
+  );
+
+  // 相关股票表格列定义（和投资日历保持一致）
+  const stockColumns = useMemo(
+    () =>
+      createStockColumns({
+        stockQuotes,
+        expandedReasons,
+        setExpandedReasons,
+        showKline,
+        isStockInWatchlist,
+        addSingleToWatchlist,
+      }),
+    [
+      stockQuotes,
+      expandedReasons,
+      setExpandedReasons,
+      showKline,
+      isStockInWatchlist,
+      addSingleToWatchlist,
+    ]
+  );
+
+  // 涨停板块表格列 - 精致风格设计
+  const sectorColumns = useMemo(
+    () =>
+      createSectorColumns({
+        stockList,
+        setSelectedSectorInfo,
+        setSectorStocksModalVisible,
+        setSelectedRelatedEvents,
+        setRelatedEventsModalVisible,
+      }),
+    [
+      stockList,
+      setSelectedSectorInfo,
+      setSectorStocksModalVisible,
+      setSelectedRelatedEvents,
+      setRelatedEventsModalVisible,
+    ]
+  );
+
+  // 涨停股票详情表格列
+  const ztStockColumns = useMemo(
+    () =>
+      createZtStockColumns({
+        showContentDetail,
+        setSelectedKlineStock,
+        setKlineModalVisible,
+        isStockInWatchlist,
+        addSingleToWatchlist,
+      }),
+    [
+      showContentDetail,
+      setSelectedKlineStock,
+      setKlineModalVisible,
+      isStockInWatchlist,
+      addSingleToWatchlist,
+    ]
+  );
+
+  // 事件表格列
+  const eventColumns = useMemo(
+    () => createEventColumns({ showContentDetail, showRelatedStocks }),
+    [showContentDetail, showRelatedStocks]
+  );
+
+  // 条件返回必须在所有hooks之后
+  if (!selectedDate) return null;
+
+  const dateStr = `${selectedDate.getFullYear()}年${
+    selectedDate.getMonth() + 1
+  }月${selectedDate.getDate()}日`;
+  const isPastDate = selectedDate < new Date(new Date().setHours(0, 0, 0, 0));
+
+  return (
+    <>
+      <ConfigProvider
+        theme={{
+          algorithm: theme.darkAlgorithm,
+          token: { colorBgElevated: "rgba(15,15,30,0.98)" },
+        }}
+      >
+        <AntModal
+          open={isOpen}
+          onCancel={onClose}
+          footer={null}
+          width={1300}
+          centered
+          title={
+            <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
+              <div
+                style={{
+                  padding: "8px",
+                  background: "rgba(255,215,0,0.15)",
+                  borderRadius: "8px",
+                  border: "1px solid rgba(255,215,0,0.3)",
+                }}
+              >
+                <Calendar size={24} color="#FFD700" />
+              </div>
+              <div>
+                <div
+                  style={{
+                    fontSize: "20px",
+                    fontWeight: "bold",
+                    color: "white",
+                  }}
+                >
+                  {dateStr}
+                </div>
+                <div style={{ display: "flex", gap: "8px", marginTop: "4px" }}>
+                  <span
+                    style={{
+                      fontSize: "12px",
+                      padding: "2px 8px",
+                      background: isPastDate
+                        ? "rgba(139,92,246,0.2)"
+                        : "rgba(34,197,94,0.2)",
+                      color: isPastDate ? "#A78BFA" : "#4ADE80",
+                      borderRadius: "4px",
+                    }}
+                  >
+                    {isPastDate ? "历史数据" : "未来事件"}
+                  </span>
+                  {ztDetail && (
+                    <span
+                      style={{
+                        fontSize: "12px",
+                        padding: "2px 8px",
+                        background: "rgba(239,68,68,0.2)",
+                        color: "#F87171",
+                        borderRadius: "4px",
+                      }}
+                    >
+                      涨停 {ztDetail.total_stocks || 0} 家
+                    </span>
+                  )}
+                  {events?.length > 0 && (
+                    <span
+                      style={{
+                        fontSize: "12px",
+                        padding: "2px 8px",
+                        background: "rgba(59,130,246,0.2)",
+                        color: "#60A5FA",
+                        borderRadius: "4px",
+                      }}
+                    >
+                      事件 {events.length} 个
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          }
+          styles={{
+            header: {
+              background: "rgba(25,25,50,0.98)",
+              borderBottom: "1px solid rgba(255,215,0,0.2)",
+              padding: "16px 24px",
+            },
+            body: {
+              background:
+                "linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)",
+              padding: "24px",
+              maxHeight: "80vh",
+              overflowY: "auto",
+            },
+            content: {
+              background:
+                "linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)",
+              borderRadius: "16px",
+              border: "1px solid rgba(255,215,0,0.2)",
+            },
+            mask: {
+              background: "rgba(0,0,0,0.7)",
+              backdropFilter: GLASS_BLUR.sm,
+            },
+          }}
+          className="hero-panel-modal"
+        >
+          {loading ? (
+            <Center h="300px">
+              <Spin size="large" tip="加载中..." />
+            </Center>
+          ) : (
+            <Tabs
+              defaultActiveKey={isPastDate ? "zt" : "event"}
+              size="large"
+              tabBarStyle={{ marginBottom: 24 }}
+            >
+              {/* 涨停分析 Tab */}
+              <TabPane
+                tab={
+                  <span style={{ fontSize: "16px" }}>
+                    <FireOutlined style={{ marginRight: 8 }} />
+                    涨停分析 ({ztDetail?.total_stocks || 0})
+                  </span>
+                }
+                key="zt"
+                disabled={!ztDetail}
+              >
+                {sectorList.length > 0 || stockList.length > 0 ? (
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "20px",
+                    }}
+                  >
+                    {/* 热门关键词 */}
+                    <HotKeywordsCloud keywords={hotKeywords} />
+
+                    {/* 涨停统计卡片 */}
+                    <ZTStatsCards stats={ztStats} />
+
+                    {/* 视图切换按钮 - 更精致的样式 */}
+                    <div
+                      style={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        padding: "0 4px",
+                      }}
+                    >
+                      <div style={{ display: "flex", gap: "12px" }}>
+                        <button
+                          style={{
+                            padding: "8px 16px",
+                            borderRadius: "8px",
+                            background:
+                              ztViewMode === "sector"
+                                ? "linear-gradient(135deg, rgba(255,215,0,0.25) 0%, rgba(255,165,0,0.15) 100%)"
+                                : "rgba(255,255,255,0.05)",
+                            border:
+                              ztViewMode === "sector"
+                                ? "1px solid rgba(255,215,0,0.5)"
+                                : "1px solid rgba(255,255,255,0.1)",
+                            color: ztViewMode === "sector" ? "#FFD700" : "#888",
+                            fontWeight:
+                              ztViewMode === "sector" ? "bold" : "normal",
+                            transition: "all 0.2s",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                            cursor: "pointer",
+                          }}
+                          onClick={() => setZtViewMode("sector")}
+                        >
+                          <TagsOutlined />
+                          <span>按板块 ({sectorList.length})</span>
+                        </button>
+                        <button
+                          style={{
+                            padding: "8px 16px",
+                            borderRadius: "8px",
+                            background:
+                              ztViewMode === "stock"
+                                ? "linear-gradient(135deg, rgba(59,130,246,0.25) 0%, rgba(139,92,246,0.15) 100%)"
+                                : "rgba(255,255,255,0.05)",
+                            border:
+                              ztViewMode === "stock"
+                                ? "1px solid rgba(59,130,246,0.5)"
+                                : "1px solid rgba(255,255,255,0.1)",
+                            color: ztViewMode === "stock" ? "#60A5FA" : "#888",
+                            fontWeight:
+                              ztViewMode === "stock" ? "bold" : "normal",
+                            transition: "all 0.2s",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                            cursor: "pointer",
+                          }}
+                          onClick={() => setZtViewMode("stock")}
+                        >
+                          <StockOutlined />
+                          <span>按个股 ({stockList.length})</span>
+                        </button>
+                      </div>
+                      <div style={{ display: "flex", gap: "8px" }}>
+                        <div
+                          style={{
+                            padding: "4px 12px",
+                            borderRadius: "9999px",
+                            background: "rgba(255,77,79,0.15)",
+                            border: "1px solid rgba(255,77,79,0.3)",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "4px",
+                          }}
+                        >
+                          <FireOutlined
+                            style={{ color: "#ff4d4f", fontSize: "12px" }}
+                          />
+                          <span
+                            style={{
+                              fontSize: "14px",
+                              color: "#ff4d4f",
+                              fontWeight: "bold",
+                            }}
+                          >
+                            {ztDetail?.total_stocks || 0}
+                          </span>
+                          <span
+                            style={{
+                              fontSize: "12px",
+                              color: "rgba(255,255,255,0.6)",
+                            }}
+                          >
+                            只涨停
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* 板块视图 */}
+                    {ztViewMode === "sector" && (
+                      <ZTSectorView
+                        sectorList={sectorList}
+                        columns={sectorColumns}
+                      />
+                    )}
+
+                    {/* 个股视图 */}
+                    {ztViewMode === "stock" && (
+                      <div
+                        style={{
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: "12px",
+                        }}
+                      >
+                        {/* 板块筛选器 */}
+                        <div>
+                          <div
+                            style={{
+                              display: "flex",
+                              gap: "8px",
+                              alignItems: "center",
+                              marginBottom: "8px",
+                            }}
+                          >
+                            <span
+                              style={{
+                                fontSize: "12px",
+                                color: "rgba(255,255,255,0.5)",
+                              }}
+                            >
+                              板块筛选：
+                            </span>
+                            <button
+                              style={{
+                                padding: "4px 12px",
+                                borderRadius: "9999px",
+                                background: !selectedSectorFilter
+                                  ? "rgba(255,215,0,0.2)"
+                                  : "rgba(255,255,255,0.05)",
+                                border: !selectedSectorFilter
+                                  ? "1px solid rgba(255,215,0,0.4)"
+                                  : "1px solid rgba(255,255,255,0.1)",
+                                color: !selectedSectorFilter
+                                  ? "#FFD700"
+                                  : "#888",
+                                fontSize: "12px",
+                                transition: "all 0.2s",
+                                cursor: "pointer",
+                              }}
+                              onClick={() => setSelectedSectorFilter(null)}
+                            >
+                              全部 ({stockList.length})
+                            </button>
+                          </div>
+                          <div
+                            style={{
+                              display: "flex",
+                              gap: "8px",
+                              flexWrap: "wrap",
+                            }}
+                          >
+                            {sectorList.slice(0, 10).map((sector) => (
+                              <button
+                                key={sector.name}
+                                style={{
+                                  padding: "4px 10px",
+                                  borderRadius: "9999px",
+                                  background:
+                                    selectedSectorFilter === sector.name
+                                      ? "rgba(59,130,246,0.2)"
+                                      : "rgba(255,255,255,0.03)",
+                                  border:
+                                    selectedSectorFilter === sector.name
+                                      ? "1px solid rgba(59,130,246,0.4)"
+                                      : "1px solid rgba(255,255,255,0.08)",
+                                  color:
+                                    selectedSectorFilter === sector.name
+                                      ? "#60A5FA"
+                                      : "#888",
+                                  fontSize: "12px",
+                                  transition: "all 0.2s",
+                                  cursor: "pointer",
+                                }}
+                                onClick={() =>
+                                  setSelectedSectorFilter(
+                                    selectedSectorFilter === sector.name
+                                      ? null
+                                      : sector.name
+                                  )
+                                }
+                              >
+                                {sector.name} ({sector.count})
+                              </button>
+                            ))}
+                          </div>
+                        </div>
+
+                        {/* 筛选结果提示 */}
+                        {selectedSectorFilter && (
+                          <div
+                            style={{
+                              display: "flex",
+                              alignItems: "center",
+                              gap: "8px",
+                              padding: "8px 12px",
+                              background: "rgba(59,130,246,0.1)",
+                              borderRadius: "8px",
+                              border: "1px solid rgba(59,130,246,0.2)",
+                            }}
+                          >
+                            <TagsOutlined style={{ color: "#60A5FA" }} />
+                            <span
+                              style={{ fontSize: "14px", color: "#60A5FA" }}
+                            >
+                              当前筛选：<strong>{selectedSectorFilter}</strong>
+                            </span>
+                            <span
+                              style={{
+                                fontSize: "14px",
+                                color: "rgba(255,255,255,0.6)",
+                              }}
+                            >
+                              共 {filteredStockList.length} 只
+                            </span>
+                            <Button
+                              type="link"
+                              size="small"
+                              onClick={() => setSelectedSectorFilter(null)}
+                              style={{ color: "#888", fontSize: "12px" }}
+                            >
+                              清除筛选
+                            </Button>
+                          </div>
+                        )}
+
+                        <div
+                          style={{
+                            borderRadius: "12px",
+                            border: "1px solid rgba(59,130,246,0.15)",
+                            overflow: "hidden",
+                          }}
+                        >
+                          <Table
+                            dataSource={filteredStockList}
+                            columns={ztStockColumns}
+                            rowKey="scode"
+                            size="middle"
+                            pagination={false}
+                            scroll={{
+                              x: 950,
+                              y: selectedSectorFilter ? 320 : 380,
+                            }}
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <div
+                    style={{
+                      height: "250px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                  >
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        gap: "16px",
+                      }}
+                    >
+                      <div
+                        style={{
+                          padding: "16px",
+                          borderRadius: "9999px",
+                          background: "rgba(255,255,255,0.05)",
+                        }}
+                      >
+                        <FireOutlined style={{ fontSize: 48, color: "#444" }} />
+                      </div>
+                      <div
+                        style={{
+                          display: "flex",
+                          flexDirection: "column",
+                          alignItems: "center",
+                          gap: "4px",
+                        }}
+                      >
+                        <AntText style={{ fontSize: 16, color: "#666" }}>
+                          暂无涨停数据
+                        </AntText>
+                        <AntText style={{ fontSize: 13, color: "#444" }}>
+                          该日期没有涨停股票记录
+                        </AntText>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </TabPane>
+
+              {/* 未来事件 Tab */}
+              <TabPane
+                tab={
+                  <span style={{ fontSize: "16px" }}>
+                    <CalendarOutlined style={{ marginRight: 8 }} />
+                    未来事件 ({events?.length || 0})
+                  </span>
+                }
+                key="event"
+                disabled={!events?.length}
+              >
+                <EventsTabView events={events} columns={eventColumns} />
+              </TabPane>
+            </Tabs>
+          )}
+        </AntModal>
+      </ConfigProvider>
+
+      {/* 内容详情弹窗 - 页面居中 */}
+      <ConfigProvider
+        theme={{
+          algorithm: theme.darkAlgorithm,
+          token: {
+            colorBgElevated: "rgba(15,15,30,0.98)",
+            colorBorderSecondary: "rgba(255,215,0,0.2)",
+          },
+        }}
+      >
+        <AntModal
+          title={selectedContent?.title}
+          open={detailDrawerVisible}
+          onCancel={() => setDetailDrawerVisible(false)}
+          footer={null}
+          width={700}
+          centered
+          zIndex={1500}
+          styles={{
+            header: {
+              background: "rgba(25,25,50,0.98)",
+              borderBottom: "1px solid rgba(255,215,0,0.2)",
+              padding: "16px 24px",
+              marginBottom: 0,
+            },
+            body: {
+              background:
+                "linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)",
+              padding: "24px",
+              maxHeight: "70vh",
+              overflowY: "auto",
+            },
+            content: {
+              background:
+                "linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)",
+              borderRadius: "12px",
+              border: "1px solid rgba(255,215,0,0.2)",
+            },
+            mask: {
+              background: "rgba(0,0,0,0.6)",
+            },
+          }}
+        >
+          <div
+            style={{
+              height: "500px",
+              overflowY: "auto",
+            }}
+          >
+            <div
+              className="markdown-content"
+              style={{
+                color: "rgba(255,255,255,0.9)",
+                fontSize: "16px",
+                lineHeight: "1.8",
+              }}
+            >
+              <ReactMarkdown>
+                {typeof selectedContent?.content === "string"
+                  ? selectedContent.content
+                  : selectedContent?.content?.data
+                  ? selectedContent.content.data
+                      .map((item) => item.sentence || "")
+                      .join("\n\n")
+                  : "暂无内容"}
+              </ReactMarkdown>
+              <p
+                style={{
+                  fontSize: "14px",
+                  color: "rgba(255,255,255,0.5)",
+                  marginTop: "24px",
+                  fontStyle: "italic",
+                }}
+              >
+                (AI合成内容)
+              </p>
+            </div>
+          </div>
+        </AntModal>
+      </ConfigProvider>
+
+      {/* 相关股票弹窗 */}
+      <ConfigProvider
+        theme={{
+          algorithm: theme.darkAlgorithm,
+          token: {
+            colorBgElevated: "rgba(15,15,30,0.98)",
+          },
+        }}
+      >
+        <AntModal
+          open={stocksDrawerVisible}
+          onCancel={() => {
+            setStocksDrawerVisible(false);
+            setExpandedReasons({});
+          }}
+          footer={null}
+          width={1100}
+          centered
+          title={
+            <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+              <StockOutlined style={{ color: "#FFD700", fontSize: "20px" }} />
+              <div style={{ display: "flex", flexDirection: "column" }}>
+                <span style={{ fontSize: "18px", color: "white" }}>
+                  相关股票
+                </span>
+                {selectedEventTitle && (
+                  <span
+                    style={{
+                      fontSize: "14px",
+                      color: "rgba(255,255,255,0.6)",
+                      fontWeight: "normal",
+                      maxWidth: "800px",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {selectedEventTitle}
+                  </span>
+                )}
+              </div>
+              <Tag color="blue" style={{ marginLeft: "8px" }}>
+                {selectedEventStocks?.length || 0}只
+              </Tag>
+              {stockQuotesLoading && <Spin size="small" />}
+            </div>
+          }
+          styles={{
+            header: {
+              background: "rgba(25,25,50,0.98)",
+              borderBottom: "1px solid rgba(255,215,0,0.2)",
+              padding: "16px 24px",
+            },
+            body: {
+              background:
+                "linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)",
+              padding: "16px",
+              maxHeight: "70vh",
+              overflowY: "auto",
+            },
+            content: {
+              background:
+                "linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)",
+              border: "1px solid rgba(255,215,0,0.2)",
+              borderRadius: "16px",
+            },
+            mask: {
+              background: "rgba(0,0,0,0.7)",
+              backdropFilter: GLASS_BLUR.sm,
+            },
+          }}
+        >
+          {selectedEventStocks && selectedEventStocks.length > 0 ? (
+            <div className="related-stocks-table-wrapper">
+              <Table
+                dataSource={selectedEventStocks}
+                columns={stockColumns}
+                rowKey={(record) => record.code}
+                size="middle"
+                pagination={false}
+                scroll={{ y: 500 }}
+              />
+            </div>
+          ) : (
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                height: "200px",
+              }}
+            >
+              <span style={{ color: "rgba(255,255,255,0.5)" }}>
+                暂无相关股票
+              </span>
+            </div>
+          )}
+        </AntModal>
+      </ConfigProvider>
+
+      {/* K线图弹窗 */}
+      {selectedKlineStock && (
+        <KLineChartModal
+          isOpen={klineModalVisible}
+          onClose={() => {
+            setKlineModalVisible(false);
+            setSelectedKlineStock(null);
+          }}
+          stock={selectedKlineStock}
+          eventTime={selectedEventTime}
+          size="5xl"
+        />
+      )}
+
+      {/* 板块股票弹窗 */}
+      <SectorStocksModal
+        visible={sectorStocksModalVisible}
+        onClose={() => {
+          setSectorStocksModalVisible(false);
+          setSelectedSectorInfo(null);
+        }}
+        sectorInfo={selectedSectorInfo}
+        onShowKline={(record) => {
+          const code = record.scode;
+          let stockCode = code;
+          if (!code.includes(".")) {
+            if (code.startsWith("6")) stockCode = `${code}.SH`;
+            else if (code.startsWith("0") || code.startsWith("3"))
+              stockCode = `${code}.SZ`;
+          }
+          setSelectedKlineStock({
+            stock_code: stockCode,
+            stock_name: record.sname,
+          });
+          setKlineModalVisible(true);
+        }}
+        onAddToWatchlist={addSingleToWatchlist}
+        isStockInWatchlist={isStockInWatchlist}
+      />
+
+      {/* 关联事件弹窗 - 涨停归因详情 */}
+      <RelatedEventsModal
+        visible={relatedEventsModalVisible}
+        onClose={() => {
+          setRelatedEventsModalVisible(false);
+          setSelectedRelatedEvents({ sectorName: "", events: [] });
+        }}
+        sectorName={selectedRelatedEvents.sectorName}
+        events={selectedRelatedEvents.events}
+        count={selectedRelatedEvents.count}
+      />
+    </>
+  );
+};
+
+export default DetailModal;
diff --git a/src/views/Community/components/HeroPanel/components/DetailModal/EventsTabView.js b/src/views/Community/components/HeroPanel/components/DetailModal/EventsTabView.js
new file mode 100644
index 00000000..cf0a5dc4
--- /dev/null
+++ b/src/views/Community/components/HeroPanel/components/DetailModal/EventsTabView.js
@@ -0,0 +1,51 @@
+// 未来事件视图组件
+// 展示选定日期的未来事件列表
+
+import React, { memo } from "react";
+import { Table, Typography } from "antd";
+import { CalendarOutlined } from "@ant-design/icons";
+
+const { Text: AntText } = Typography;
+
+/**
+ * 未来事件视图
+ * @param {Array} events - 事件列表
+ * @param {Array} columns - 表格列配置
+ */
+const EventsTabView = memo(({ events, columns }) => {
+  // 无数据时的空状态
+  if (!events?.length) {
+    return (
+      <div
+        style={{
+          height: "200px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+          <CalendarOutlined style={{ fontSize: 48, color: "#666" }} />
+          <AntText type="secondary" style={{ fontSize: 16 }}>
+            暂无事件数据
+          </AntText>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Table
+      dataSource={events}
+      columns={columns}
+      rowKey="id"
+      size="small"
+      pagination={false}
+      scroll={{ x: 900, y: 420 }}
+    />
+  );
+});
+
+EventsTabView.displayName = "EventsTabView";
+
+export default EventsTabView;
diff --git a/src/views/Community/components/HeroPanel/components/DetailModal/RelatedEventsModal.js b/src/views/Community/components/HeroPanel/components/DetailModal/RelatedEventsModal.js
new file mode 100644
index 00000000..553e8e32
--- /dev/null
+++ b/src/views/Community/components/HeroPanel/components/DetailModal/RelatedEventsModal.js
@@ -0,0 +1,220 @@
+// HeroPanel - 关联事件弹窗（涨停归因详情）
+// 使用 Ant Design Modal 保持与现有代码风格一致
+import React from "react";
+import { Modal as AntModal, Tag, ConfigProvider, theme } from "antd";
+import { FileText } from "lucide-react";
+import { GLASS_BLUR } from "@/constants/glassConfig";
+
+/**
+ * 获取相关度颜色
+ */
+const getRelevanceColor = (score) => {
+  if (score >= 80) return "#10B981";
+  if (score >= 60) return "#F59E0B";
+  return "#6B7280";
+};
+
+/**
+ * 关联事件弹窗 - 涨停归因详情
+ */
+const RelatedEventsModal = ({
+  visible,
+  onClose,
+  sectorName = "",
+  events = [],
+  count = 0,
+}) => {
+  return (
+    <ConfigProvider
+      theme={{
+        algorithm: theme.darkAlgorithm,
+        token: { colorBgElevated: "rgba(15,15,30,0.98)" },
+      }}
+    >
+      <AntModal
+        open={visible}
+        onCancel={onClose}
+        footer={null}
+        width={700}
+        centered
+        title={
+          <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+            <div
+              style={{
+                padding: "8px",
+                background: "rgba(96,165,250,0.15)",
+                borderRadius: "8px",
+                border: "1px solid rgba(96,165,250,0.3)",
+              }}
+            >
+              <FileText size={18} color="#60A5FA" />
+            </div>
+            <div>
+              <div style={{ fontSize: "18px", fontWeight: "bold", color: "#60A5FA" }}>
+                {sectorName} - 涨停归因
+              </div>
+              <div style={{ display: "flex", gap: "12px", marginTop: "4px" }}>
+                <span style={{ fontSize: "12px", color: "rgba(255,255,255,0.5)" }}>
+                  涨停 <span style={{ color: "#EF4444", fontWeight: "bold" }}>{count}</span> 只
+                </span>
+                <span style={{ fontSize: "12px", color: "rgba(255,255,255,0.5)" }}>
+                  关联事件 <span style={{ color: "#60A5FA", fontWeight: "bold" }}>{events?.length || 0}</span> 条
+                </span>
+              </div>
+            </div>
+          </div>
+        }
+        styles={{
+          header: {
+            background: "rgba(25,25,50,0.98)",
+            borderBottom: "1px solid rgba(96,165,250,0.2)",
+            padding: "16px 24px",
+          },
+          body: {
+            background: "linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)",
+            padding: "16px 24px",
+            maxHeight: "65vh",
+            overflowY: "auto",
+          },
+          content: {
+            background: "linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)",
+            borderRadius: "16px",
+            border: "1px solid rgba(96,165,250,0.3)",
+          },
+          mask: { background: "rgba(0,0,0,0.7)", backdropFilter: GLASS_BLUR.sm },
+        }}
+      >
+        {events?.length > 0 ? (
+          <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+            {events.map((event, idx) => {
+              const relevanceColor = getRelevanceColor(event.relevance_score || 0);
+
+              return (
+                <div
+                  key={event.event_id || idx}
+                  style={{
+                    padding: "16px",
+                    background: "rgba(30,30,50,0.8)",
+                    borderRadius: "12px",
+                    border: "1px solid rgba(255,255,255,0.06)",
+                    cursor: "pointer",
+                    transition: "all 0.2s",
+                  }}
+                  onClick={() => {
+                    window.open(`/community?event_id=${event.event_id}`, "_blank");
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = "rgba(40,40,70,0.9)";
+                    e.currentTarget.style.borderColor = "rgba(96,165,250,0.3)";
+                    e.currentTarget.style.transform = "translateY(-2px)";
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = "rgba(30,30,50,0.8)";
+                    e.currentTarget.style.borderColor = "rgba(255,255,255,0.06)";
+                    e.currentTarget.style.transform = "translateY(0)";
+                  }}
+                >
+                  <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+                    {/* 标题 */}
+                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+                      <div style={{ display: "flex", gap: "8px", flex: 1 }}>
+                        <FileText size={16} color="#60A5FA" style={{ flexShrink: 0 }} />
+                        <span
+                          style={{
+                            fontSize: "14px",
+                            fontWeight: "600",
+                            color: "#E0E0E0",
+                            display: "-webkit-box",
+                            WebkitLineClamp: 2,
+                            WebkitBoxOrient: "vertical",
+                            overflow: "hidden",
+                          }}
+                        >
+                          {event.title}
+                        </span>
+                      </div>
+                      <span
+                        style={{
+                          background: `${relevanceColor}20`,
+                          color: relevanceColor,
+                          fontSize: "12px",
+                          padding: "2px 8px",
+                          borderRadius: "6px",
+                          flexShrink: 0,
+                        }}
+                      >
+                        相关度 {event.relevance_score || 0}
+                      </span>
+                    </div>
+
+                    {/* 相关原因 */}
+                    {event.relevance_reason && (
+                      <span style={{ fontSize: "12px", color: "rgba(255,255,255,0.6)", lineHeight: "1.6" }}>
+                        {event.relevance_reason}
+                      </span>
+                    )}
+
+                    {/* 匹配概念 */}
+                    {event.matched_concepts?.length > 0 && (
+                      <div>
+                        <span style={{ fontSize: "12px", color: "rgba(255,255,255,0.4)", marginBottom: "6px", display: "block" }}>
+                          匹配概念：
+                        </span>
+                        <div style={{ display: "flex", gap: "6px", flexWrap: "wrap" }}>
+                          {event.matched_concepts.slice(0, 6).map((concept, i) => (
+                            <Tag
+                              key={i}
+                              style={{
+                                fontSize: "10px",
+                                margin: "2px",
+                                background: "rgba(139, 92, 246, 0.15)",
+                                border: "none",
+                                color: "#A78BFA",
+                                borderRadius: "4px",
+                                padding: "2px 8px",
+                              }}
+                            >
+                              {concept}
+                            </Tag>
+                          ))}
+                          {event.matched_concepts.length > 6 && (
+                            <Tag
+                              style={{
+                                fontSize: "10px",
+                                margin: "2px",
+                                background: "rgba(255,255,255,0.1)",
+                                border: "none",
+                                color: "#888",
+                                borderRadius: "4px",
+                                padding: "2px 8px",
+                              }}
+                            >
+                              +{event.matched_concepts.length - 6}
+                            </Tag>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div
+            style={{
+              height: "200px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <span style={{ color: "rgba(255,255,255,0.5)" }}>暂无关联事件</span>
+          </div>
+        )}
+      </AntModal>
+    </ConfigProvider>
+  );
+};
+
+export default RelatedEventsModal;
diff --git a/src/views/Community/components/HeroPanel/components/DetailModal/SectorStocksModal.js b/src/views/Community/components/HeroPanel/components/DetailModal/SectorStocksModal.js
new file mode 100644
index 00000000..7a6123d7
--- /dev/null
+++ b/src/views/Community/components/HeroPanel/components/DetailModal/SectorStocksModal.js
@@ -0,0 +1,373 @@
+// HeroPanel - 板块股票弹窗
+// 使用 Ant Design Modal 保持与现有代码风格一致
+import React from "react";
+import { Modal as AntModal, Table, Tag, Button, Typography, ConfigProvider, theme } from "antd";
+import { TagsOutlined, LineChartOutlined, StarFilled, StarOutlined } from "@ant-design/icons";
+import { GLASS_BLUR } from "@/constants/glassConfig";
+
+const { Text: AntText } = Typography;
+
+/**
+ * 获取连板天数样式
+ */
+const getDaysStyle = (days) => {
+  if (days >= 5)
+    return {
+      bg: "linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%)",
+      text: "#fff",
+    };
+  if (days >= 3)
+    return {
+      bg: "linear-gradient(135deg, #fa541c 0%, #ff7a45 100%)",
+      text: "#fff",
+    };
+  if (days >= 2)
+    return {
+      bg: "linear-gradient(135deg, #fa8c16 0%, #ffc53d 100%)",
+      text: "#fff",
+    };
+  return { bg: "rgba(255,255,255,0.1)", text: "#888" };
+};
+
+/**
+ * 获取涨停时间样式
+ */
+const getTimeStyle = (time) => {
+  if (time <= "09:30:00") return { bg: "#ff4d4f", text: "#fff" };
+  if (time <= "09:35:00") return { bg: "#fa541c", text: "#fff" };
+  if (time <= "10:00:00") return { bg: "#fa8c16", text: "#fff" };
+  return { bg: "rgba(255,255,255,0.1)", text: "#888" };
+};
+
+/**
+ * 板块股票弹窗
+ */
+const SectorStocksModal = ({
+  visible,
+  onClose,
+  sectorInfo,
+  onShowKline,
+  onAddToWatchlist,
+  isStockInWatchlist,
+}) => {
+  if (!sectorInfo) return null;
+
+  const { name, count, stocks = [] } = sectorInfo;
+
+  // 连板统计
+  const stats = { 首板: 0, "2连板": 0, "3连板": 0, "4连板+": 0 };
+  stocks.forEach((s) => {
+    const days = s._continuousDays || 1;
+    if (days === 1) stats["首板"]++;
+    else if (days === 2) stats["2连板"]++;
+    else if (days === 3) stats["3连板"]++;
+    else stats["4连板+"]++;
+  });
+
+  // 表格列定义
+  const columns = [
+    {
+      title: "股票",
+      key: "stock",
+      width: 130,
+      render: (_, record) => (
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <a
+            href={`https://valuefrontier.cn/company?scode=${record.scode}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: "#FFD700", fontWeight: "bold", fontSize: "14px" }}
+          >
+            {record.sname}
+          </a>
+          <AntText style={{ color: "#60A5FA", fontSize: "12px" }}>
+            {record.scode}
+          </AntText>
+        </div>
+      ),
+    },
+    {
+      title: "连板",
+      dataIndex: "continuous_days",
+      key: "continuous",
+      width: 90,
+      align: "center",
+      render: (text, record) => {
+        const days = record._continuousDays || 1;
+        const style = getDaysStyle(days);
+        return (
+          <span
+            style={{
+              padding: "4px 12px",
+              borderRadius: "6px",
+              background: style.bg,
+              fontSize: "13px",
+              fontWeight: "bold",
+              color: style.text,
+              display: "inline-block",
+            }}
+          >
+            {text || "首板"}
+          </span>
+        );
+      },
+    },
+    {
+      title: "涨停时间",
+      dataIndex: "formatted_time",
+      key: "time",
+      width: 90,
+      align: "center",
+      render: (time) => {
+        const style = getTimeStyle(time || "15:00:00");
+        return (
+          <span
+            style={{
+              padding: "2px 8px",
+              borderRadius: "6px",
+              background: style.bg,
+              fontSize: "12px",
+              color: style.text,
+            }}
+          >
+            {time?.substring(0, 5) || "-"}
+          </span>
+        );
+      },
+    },
+    {
+      title: "核心板块",
+      dataIndex: "core_sectors",
+      key: "sectors",
+      render: (sectors) => (
+        <div style={{ display: "flex", gap: "4px", flexWrap: "wrap" }}>
+          {(sectors || []).slice(0, 2).map((sector, idx) => (
+            <Tag
+              key={idx}
+              style={{
+                margin: "2px",
+                background: "rgba(255,215,0,0.1)",
+                border: "1px solid rgba(255,215,0,0.2)",
+                borderRadius: "4px",
+                color: "#D4A84B",
+                fontSize: "11px",
+              }}
+            >
+              {sector}
+            </Tag>
+          ))}
+        </div>
+      ),
+    },
+    {
+      title: "K线图",
+      key: "kline",
+      width: 80,
+      align: "center",
+      render: (_, record) => (
+        <Button
+          type="primary"
+          size="small"
+          icon={<LineChartOutlined />}
+          onClick={() => onShowKline(record)}
+          style={{
+            background: "linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%)",
+            border: "none",
+            borderRadius: "6px",
+            fontSize: "12px",
+          }}
+        >
+          查看
+        </Button>
+      ),
+    },
+    {
+      title: "操作",
+      key: "action",
+      width: 90,
+      align: "center",
+      render: (_, record) => {
+        const code = record.scode;
+        const inWatchlist = isStockInWatchlist(code);
+        return (
+          <Button
+            type={inWatchlist ? "primary" : "default"}
+            size="small"
+            icon={inWatchlist ? <StarFilled /> : <StarOutlined />}
+            onClick={() => onAddToWatchlist({ code, name: record.sname })}
+            disabled={inWatchlist}
+            style={
+              inWatchlist
+                ? {
+                    background: "linear-gradient(135deg, #faad14 0%, #fa8c16 100%)",
+                    border: "none",
+                    borderRadius: "6px",
+                    fontSize: "12px",
+                  }
+                : {
+                    background: "rgba(255,255,255,0.1)",
+                    border: "1px solid rgba(255,215,0,0.3)",
+                    borderRadius: "6px",
+                    color: "#FFD700",
+                    fontSize: "12px",
+                  }
+            }
+          >
+            {inWatchlist ? "已添加" : "加自选"}
+          </Button>
+        );
+      },
+    },
+  ];
+
+  return (
+    <ConfigProvider
+      theme={{
+        algorithm: theme.darkAlgorithm,
+        token: { colorBgElevated: "rgba(15,15,30,0.98)" },
+      }}
+    >
+      <AntModal
+        open={visible}
+        onCancel={onClose}
+        footer={null}
+        width={900}
+        centered
+        title={
+          <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+            <div
+              style={{
+                padding: "8px",
+                background: "rgba(255,215,0,0.15)",
+                borderRadius: "8px",
+                border: "1px solid rgba(255,215,0,0.3)",
+              }}
+            >
+              <TagsOutlined style={{ color: "#FFD700", fontSize: "18px" }} />
+            </div>
+            <div>
+              <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                <span style={{ fontSize: "18px", fontWeight: "bold", color: "#FFD700" }}>
+                  {name}
+                </span>
+                <span
+                  style={{
+                    fontSize: "12px",
+                    padding: "2px 8px",
+                    background: "rgba(255,77,79,0.15)",
+                    color: "#ff4d4f",
+                    borderRadius: "12px",
+                  }}
+                >
+                  {count} 只涨停
+                </span>
+              </div>
+              <div style={{ fontSize: "12px", color: "rgba(255,255,255,0.5)" }}>
+                按连板天数降序排列
+              </div>
+            </div>
+          </div>
+        }
+        styles={{
+          header: {
+            background: "rgba(25,25,50,0.98)",
+            borderBottom: "1px solid rgba(255,215,0,0.2)",
+            padding: "16px 24px",
+          },
+          body: {
+            background: "linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)",
+            padding: "16px 24px",
+            maxHeight: "70vh",
+            overflowY: "auto",
+          },
+          content: {
+            background: "linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)",
+            borderRadius: "16px",
+            border: "1px solid rgba(255,215,0,0.2)",
+          },
+          mask: { background: "rgba(0,0,0,0.7)", backdropFilter: GLASS_BLUR.sm },
+        }}
+      >
+        {stocks.length > 0 ? (
+          <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+            {/* 快速统计 */}
+            <div style={{ display: "flex", gap: "16px", flexWrap: "wrap" }}>
+              {Object.entries(stats).map(
+                ([key, value]) =>
+                  value > 0 && (
+                    <span
+                      key={key}
+                      style={{
+                        padding: "4px 12px",
+                        borderRadius: "12px",
+                        fontSize: "14px",
+                        background:
+                          key === "4连板+"
+                            ? "rgba(255,77,79,0.15)"
+                            : key === "3连板"
+                            ? "rgba(250,84,28,0.15)"
+                            : key === "2连板"
+                            ? "rgba(250,140,22,0.15)"
+                            : "rgba(255,255,255,0.05)",
+                        border: `1px solid ${
+                          key === "4连板+"
+                            ? "rgba(255,77,79,0.3)"
+                            : key === "3连板"
+                            ? "rgba(250,84,28,0.3)"
+                            : key === "2连板"
+                            ? "rgba(250,140,22,0.3)"
+                            : "rgba(255,255,255,0.1)"
+                        }`,
+                        color:
+                          key === "4连板+"
+                            ? "#ff4d4f"
+                            : key === "3连板"
+                            ? "#fa541c"
+                            : key === "2连板"
+                            ? "#fa8c16"
+                            : "#888",
+                      }}
+                    >
+                      {key}: <strong>{value}</strong>
+                    </span>
+                  )
+              )}
+            </div>
+
+            {/* 股票列表 */}
+            <div
+              style={{
+                borderRadius: "12px",
+                border: "1px solid rgba(255,215,0,0.15)",
+                overflow: "hidden",
+              }}
+              className="sector-stocks-table-wrapper"
+            >
+              <Table
+                dataSource={stocks}
+                columns={columns}
+                rowKey="scode"
+                size="small"
+                pagination={false}
+                scroll={{ x: 650, y: 450 }}
+              />
+            </div>
+          </div>
+        ) : (
+          <div
+            style={{
+              height: "200px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <span style={{ color: "rgba(255,255,255,0.5)" }}>暂无股票数据</span>
+          </div>
+        )}
+      </AntModal>
+    </ConfigProvider>
+  );
+};
+
+export default SectorStocksModal;
diff --git a/src/views/Community/components/HeroPanel/components/DetailModal/ZTSectorView.js b/src/views/Community/components/HeroPanel/components/DetailModal/ZTSectorView.js
new file mode 100644
index 00000000..aeef4848
--- /dev/null
+++ b/src/views/Community/components/HeroPanel/components/DetailModal/ZTSectorView.js
@@ -0,0 +1,39 @@
+// 涨停板块视图组件
+// 展示按板块分组的涨停数据表格
+
+import React, { memo } from "react";
+import { Table } from "antd";
+
+/**
+ * 涨停板块视图
+ * @param {Array} sectorList - 板块列表数据
+ * @param {Array} columns - 表格列配置
+ */
+const ZTSectorView = memo(({ sectorList, columns }) => {
+  if (!sectorList?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        borderRadius: "12px",
+        border: "1px solid rgba(255,215,0,0.15)",
+        overflow: "hidden",
+      }}
+    >
+      <Table
+        dataSource={sectorList}
+        columns={columns}
+        rowKey="name"
+        size="middle"
+        pagination={false}
+        scroll={{ y: 380 }}
+      />
+    </div>
+  );
+});
+
+ZTSectorView.displayName = "ZTSectorView";
+
+export default ZTSectorView;
diff --git a/src/views/Community/components/HeroPanel/components/DetailModal/ZTStockListView.js b/src/views/Community/components/HeroPanel/components/DetailModal/ZTStockListView.js
new file mode 100644
index 00000000..ad909105
--- /dev/null
+++ b/src/views/Community/components/HeroPanel/components/DetailModal/ZTStockListView.js
@@ -0,0 +1,134 @@
+// 涨停个股视图组件
+// 展示涨停个股列表，支持按板块筛选
+
+import React, { memo } from "react";
+import { Table } from "antd";
+
+/**
+ * 涨停个股视图
+ * @param {Array} stockList - 完整股票列表
+ * @param {Array} filteredStockList - 筛选后的股票列表
+ * @param {Array} sectorList - 板块列表（用于筛选器）
+ * @param {Array} columns - 表格列配置
+ * @param {string|null} selectedSectorFilter - 当前选中的板块筛选
+ * @param {Function} onSectorFilterChange - 筛选变化回调
+ */
+const ZTStockListView = memo(({
+  stockList,
+  filteredStockList,
+  sectorList,
+  columns,
+  selectedSectorFilter,
+  onSectorFilterChange,
+}) => {
+  if (!stockList?.length) {
+    return null;
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+      {/* 板块筛选器 */}
+      <div>
+        <div style={{ display: "flex", gap: "8px", alignItems: "center", marginBottom: "8px" }}>
+          <span style={{ fontSize: "12px", color: "rgba(255,255,255,0.5)" }}>
+            板块筛选：
+          </span>
+          <button
+            style={{
+              padding: "4px 12px",
+              borderRadius: "9999px",
+              background: !selectedSectorFilter ? "rgba(255,215,0,0.2)" : "rgba(255,255,255,0.05)",
+              border: !selectedSectorFilter ? "1px solid rgba(255,215,0,0.4)" : "1px solid rgba(255,255,255,0.1)",
+              color: !selectedSectorFilter ? "#FFD700" : "#888",
+              fontSize: "12px",
+              transition: "all 0.2s",
+              cursor: "pointer",
+            }}
+            onClick={() => onSectorFilterChange(null)}
+          >
+            全部 ({stockList.length})
+          </button>
+        </div>
+        <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+          {sectorList.slice(0, 10).map((sector) => (
+            <button
+              key={sector.name}
+              style={{
+                padding: "4px 10px",
+                borderRadius: "9999px",
+                background: selectedSectorFilter === sector.name ? "rgba(59,130,246,0.2)" : "rgba(255,255,255,0.03)",
+                border: selectedSectorFilter === sector.name ? "1px solid rgba(59,130,246,0.4)" : "1px solid rgba(255,255,255,0.08)",
+                color: selectedSectorFilter === sector.name ? "#60A5FA" : "#888",
+                fontSize: "12px",
+                transition: "all 0.2s",
+                cursor: "pointer",
+              }}
+              onClick={() => onSectorFilterChange(selectedSectorFilter === sector.name ? null : sector.name)}
+            >
+              {sector.name} ({sector.count})
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 筛选结果提示 */}
+      {selectedSectorFilter && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            padding: "8px 12px",
+            background: "rgba(59,130,246,0.1)",
+            borderRadius: "8px",
+            border: "1px solid rgba(59,130,246,0.2)",
+          }}
+        >
+          <span style={{ color: "#60A5FA", fontSize: "13px" }}>
+            {selectedSectorFilter}
+          </span>
+          <span style={{ color: "rgba(255,255,255,0.5)", fontSize: "12px" }}>
+            共 {filteredStockList.length} 只涨停
+          </span>
+          <button
+            style={{
+              marginLeft: "auto",
+              padding: "2px 8px",
+              background: "transparent",
+              border: "1px solid rgba(255,255,255,0.2)",
+              borderRadius: "4px",
+              color: "#888",
+              fontSize: "12px",
+              cursor: "pointer",
+            }}
+            onClick={() => onSectorFilterChange(null)}
+          >
+            清除筛选
+          </button>
+        </div>
+      )}
+
+      {/* 股票表格 */}
+      <div
+        style={{
+          borderRadius: "12px",
+          border: "1px solid rgba(59,130,246,0.15)",
+          overflow: "hidden",
+        }}
+      >
+        <Table
+          dataSource={filteredStockList}
+          columns={columns}
+          rowKey="scode"
+          size="small"
+          pagination={false}
+          scroll={{ y: 320 }}
+        />
+      </div>
+    </div>
+  );
+});
+
+ZTStockListView.displayName = "ZTStockListView";
+
+export default ZTStockListView;
diff --git a/src/views/Community/components/HeroPanel/components/DetailModal/index.js b/src/views/Community/components/HeroPanel/components/DetailModal/index.js
new file mode 100644
index 00000000..307a084f
--- /dev/null
+++ b/src/views/Community/components/HeroPanel/components/DetailModal/index.js
@@ -0,0 +1,7 @@
+// HeroPanel - DetailModal 子组件导出
+export { default as DetailModal } from "./DetailModal";
+export { default as RelatedEventsModal } from "./RelatedEventsModal";
+export { default as SectorStocksModal } from "./SectorStocksModal";
+export { default as ZTSectorView } from "./ZTSectorView";
+export { default as ZTStockListView } from "./ZTStockListView";
+export { default as EventsTabView } from "./EventsTabView";