refactor(HeroPanel): 提取 hooks/constants/utils/styles 基础模块
- hooks/useDetailModalState: 整合弹窗 17 个状态为单一 Hook - constants: 主题色配置、热度级别常量、日期常量 - utils: 交易时间判断、热度颜色、日期/股票代码格式化 - styles/animations.css: 深色主题覆盖、动画、滚动条样式 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
68
src/views/Community/components/HeroPanel/constants/index.js
Normal file
68
src/views/Community/components/HeroPanel/constants/index.js
Normal file
@@ -0,0 +1,68 @@
|
||||
// HeroPanel 常量配置
|
||||
|
||||
// 主题色配置
|
||||
export const goldColors = {
|
||||
primary: "#D4AF37",
|
||||
light: "#F4D03F",
|
||||
dark: "#B8860B",
|
||||
glow: "rgba(212, 175, 55, 0.4)",
|
||||
};
|
||||
|
||||
export const textColors = {
|
||||
primary: "#ffffff",
|
||||
secondary: "rgba(255, 255, 255, 0.85)",
|
||||
muted: "rgba(255, 255, 255, 0.5)",
|
||||
};
|
||||
|
||||
// 热度级别配置
|
||||
export const HEAT_LEVELS = [
|
||||
{
|
||||
key: "high",
|
||||
threshold: 80,
|
||||
colors: {
|
||||
bg: "rgba(147, 51, 234, 0.55)",
|
||||
text: "#d8b4fe",
|
||||
border: "rgba(147, 51, 234, 0.65)",
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "medium",
|
||||
threshold: 60,
|
||||
colors: {
|
||||
bg: "rgba(239, 68, 68, 0.50)",
|
||||
text: "#fca5a5",
|
||||
border: "rgba(239, 68, 68, 0.60)",
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "low",
|
||||
threshold: 40,
|
||||
colors: {
|
||||
bg: "rgba(251, 146, 60, 0.45)",
|
||||
text: "#fed7aa",
|
||||
border: "rgba(251, 146, 60, 0.55)",
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "cold",
|
||||
threshold: 0,
|
||||
colors: {
|
||||
bg: "rgba(59, 130, 246, 0.35)",
|
||||
text: "#93c5fd",
|
||||
border: "rgba(59, 130, 246, 0.45)",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const DEFAULT_HEAT_COLORS = {
|
||||
bg: "rgba(60, 60, 70, 0.12)",
|
||||
text: textColors.muted,
|
||||
border: "transparent",
|
||||
};
|
||||
|
||||
// 日期常量
|
||||
export const WEEK_DAYS = ["日", "一", "二", "三", "四", "五", "六"];
|
||||
export const MONTH_NAMES = [
|
||||
"1月", "2月", "3月", "4月", "5月", "6月",
|
||||
"7月", "8月", "9月", "10月", "11月", "12月",
|
||||
];
|
||||
2
src/views/Community/components/HeroPanel/hooks/index.js
Normal file
2
src/views/Community/components/HeroPanel/hooks/index.js
Normal file
@@ -0,0 +1,2 @@
|
||||
// HeroPanel Hooks 导出
|
||||
export { useDetailModalState } from "./useDetailModalState";
|
||||
@@ -0,0 +1,197 @@
|
||||
// HeroPanel - DetailModal 状态管理 Hook
|
||||
// 整合 DetailModal 组件的所有状态，使主组件更简洁
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
|
||||
/**
|
||||
* DetailModal 状态管理 Hook
|
||||
* 将 17 个 useState 整合为一个自定义 hook
|
||||
*/
|
||||
export const useDetailModalState = () => {
|
||||
// ========== UI 状态 ==========
|
||||
// 视图模式：板块视图 | 个股视图
|
||||
const [ztViewMode, setZtViewMode] = useState("sector"); // 'sector' | 'stock'
|
||||
// 板块筛选（个股视图时使用）
|
||||
const [selectedSectorFilter, setSelectedSectorFilter] = useState(null);
|
||||
// 展开的涨停原因
|
||||
const [expandedReasons, setExpandedReasons] = useState({});
|
||||
|
||||
// ========== 弹窗/抽屉状态 ==========
|
||||
// 内容详情抽屉
|
||||
const [detailDrawerVisible, setDetailDrawerVisible] = useState(false);
|
||||
const [selectedContent, setSelectedContent] = useState(null);
|
||||
// 板块股票弹窗
|
||||
const [sectorStocksModalVisible, setSectorStocksModalVisible] = useState(false);
|
||||
const [selectedSectorInfo, setSelectedSectorInfo] = useState(null);
|
||||
// 事件关联股票抽屉
|
||||
const [stocksDrawerVisible, setStocksDrawerVisible] = useState(false);
|
||||
const [selectedEventStocks, setSelectedEventStocks] = useState([]);
|
||||
const [selectedEventTime, setSelectedEventTime] = useState(null);
|
||||
const [selectedEventTitle, setSelectedEventTitle] = useState("");
|
||||
// K线弹窗
|
||||
const [klineModalVisible, setKlineModalVisible] = useState(false);
|
||||
const [selectedKlineStock, setSelectedKlineStock] = useState(null);
|
||||
// 关联事件弹窗
|
||||
const [relatedEventsModalVisible, setRelatedEventsModalVisible] = useState(false);
|
||||
const [selectedRelatedEvents, setSelectedRelatedEvents] = useState({
|
||||
sectorName: "",
|
||||
events: [],
|
||||
});
|
||||
|
||||
// ========== 数据加载状态 ==========
|
||||
const [stockQuotes, setStockQuotes] = useState({});
|
||||
const [stockQuotesLoading, setStockQuotesLoading] = useState(false);
|
||||
|
||||
// ========== 操作方法 ==========
|
||||
|
||||
// 打开内容详情
|
||||
const openContentDetail = useCallback((content) => {
|
||||
setSelectedContent(content);
|
||||
setDetailDrawerVisible(true);
|
||||
}, []);
|
||||
|
||||
// 关闭内容详情
|
||||
const closeContentDetail = useCallback(() => {
|
||||
setDetailDrawerVisible(false);
|
||||
setSelectedContent(null);
|
||||
}, []);
|
||||
|
||||
// 打开板块股票弹窗
|
||||
const openSectorStocks = useCallback((sectorInfo) => {
|
||||
setSelectedSectorInfo(sectorInfo);
|
||||
setSectorStocksModalVisible(true);
|
||||
}, []);
|
||||
|
||||
// 关闭板块股票弹窗
|
||||
const closeSectorStocks = useCallback(() => {
|
||||
setSectorStocksModalVisible(false);
|
||||
setSelectedSectorInfo(null);
|
||||
}, []);
|
||||
|
||||
// 打开事件关联股票
|
||||
const openEventStocks = useCallback((stocks, time, title) => {
|
||||
setSelectedEventStocks(stocks);
|
||||
setSelectedEventTime(time);
|
||||
setSelectedEventTitle(title);
|
||||
setStocksDrawerVisible(true);
|
||||
}, []);
|
||||
|
||||
// 关闭事件关联股票
|
||||
const closeEventStocks = useCallback(() => {
|
||||
setStocksDrawerVisible(false);
|
||||
setSelectedEventStocks([]);
|
||||
setSelectedEventTime(null);
|
||||
setSelectedEventTitle("");
|
||||
}, []);
|
||||
|
||||
// 打开 K 线弹窗
|
||||
const openKlineModal = useCallback((stock) => {
|
||||
setSelectedKlineStock(stock);
|
||||
setKlineModalVisible(true);
|
||||
}, []);
|
||||
|
||||
// 关闭 K 线弹窗
|
||||
const closeKlineModal = useCallback(() => {
|
||||
setKlineModalVisible(false);
|
||||
setSelectedKlineStock(null);
|
||||
}, []);
|
||||
|
||||
// 打开关联事件弹窗
|
||||
const openRelatedEvents = useCallback((sectorName, events) => {
|
||||
setSelectedRelatedEvents({ sectorName, events });
|
||||
setRelatedEventsModalVisible(true);
|
||||
}, []);
|
||||
|
||||
// 关闭关联事件弹窗
|
||||
const closeRelatedEvents = useCallback(() => {
|
||||
setRelatedEventsModalVisible(false);
|
||||
setSelectedRelatedEvents({ sectorName: "", events: [] });
|
||||
}, []);
|
||||
|
||||
// 切换展开原因
|
||||
const toggleExpandedReason = useCallback((stockCode) => {
|
||||
setExpandedReasons((prev) => ({
|
||||
...prev,
|
||||
[stockCode]: !prev[stockCode],
|
||||
}));
|
||||
}, []);
|
||||
|
||||
// 重置所有状态（用于关闭弹窗时）
|
||||
const resetAllState = useCallback(() => {
|
||||
setZtViewMode("sector");
|
||||
setSelectedSectorFilter(null);
|
||||
setExpandedReasons({});
|
||||
setDetailDrawerVisible(false);
|
||||
setSelectedContent(null);
|
||||
setSectorStocksModalVisible(false);
|
||||
setSelectedSectorInfo(null);
|
||||
setStocksDrawerVisible(false);
|
||||
setSelectedEventStocks([]);
|
||||
setSelectedEventTime(null);
|
||||
setSelectedEventTitle("");
|
||||
setKlineModalVisible(false);
|
||||
setSelectedKlineStock(null);
|
||||
setRelatedEventsModalVisible(false);
|
||||
setSelectedRelatedEvents({ sectorName: "", events: [] });
|
||||
setStockQuotes({});
|
||||
setStockQuotesLoading(false);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
// 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,
|
||||
|
||||
// 操作方法（高级封装）
|
||||
openContentDetail,
|
||||
closeContentDetail,
|
||||
openSectorStocks,
|
||||
closeSectorStocks,
|
||||
openEventStocks,
|
||||
closeEventStocks,
|
||||
openKlineModal,
|
||||
closeKlineModal,
|
||||
openRelatedEvents,
|
||||
closeRelatedEvents,
|
||||
toggleExpandedReason,
|
||||
resetAllState,
|
||||
};
|
||||
};
|
||||
|
||||
export default useDetailModalState;
|
||||
159
src/views/Community/components/HeroPanel/styles/animations.css
Normal file
159
src/views/Community/components/HeroPanel/styles/animations.css
Normal file
@@ -0,0 +1,159 @@
|
||||
/* HeroPanel 动画和深色主题样式 */
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.6; transform: scale(1.1); }
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
/* Ant Design 深色主题覆盖 - 弹窗专用 */
|
||||
.hero-panel-modal .ant-tabs {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-tabs-nav::before {
|
||||
border-color: rgba(255, 215, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-tabs-tab {
|
||||
color: rgba(255, 255, 255, 0.65) !important;
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-tabs-tab:hover {
|
||||
color: #FFD700 !important;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-tabs-tab-active .ant-tabs-tab-btn {
|
||||
color: #FFD700 !important;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-tabs-ink-bar {
|
||||
background: linear-gradient(90deg, #FFD700, #FFA500) !important;
|
||||
}
|
||||
|
||||
/* 表格深色主题 */
|
||||
.hero-panel-modal .ant-table {
|
||||
background: transparent !important;
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-table-thead > tr > th {
|
||||
background: rgba(255, 215, 0, 0.1) !important;
|
||||
color: #FFD700 !important;
|
||||
border-bottom: 1px solid rgba(255, 215, 0, 0.2) !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-table-tbody > tr > td {
|
||||
background: transparent !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-table-tbody > tr:hover > td {
|
||||
background: rgba(255, 215, 0, 0.08) !important;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-table-tbody > tr.ant-table-row:hover > td {
|
||||
background: rgba(255, 215, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-table-cell-row-hover {
|
||||
background: rgba(255, 215, 0, 0.08) !important;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-table-placeholder {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-empty-description {
|
||||
color: rgba(255, 255, 255, 0.45) !important;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
.hero-panel-modal .ant-table-body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-table-body::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-table-body::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 215, 0, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-table-body::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
/* 板块股票表格滚动 - 针对 Ant Design 5.x */
|
||||
.sector-stocks-table-wrapper {
|
||||
max-height: 450px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sector-stocks-table-wrapper .ant-table-wrapper,
|
||||
.sector-stocks-table-wrapper .ant-table,
|
||||
.sector-stocks-table-wrapper .ant-table-container {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.sector-stocks-table-wrapper .ant-table-body {
|
||||
max-height: 380px !important;
|
||||
overflow-y: auto !important;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 215, 0, 0.4) rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* 相关股票表格滚动 */
|
||||
.related-stocks-table-wrapper .ant-table-body {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 215, 0, 0.4) rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Tag 样式优化 */
|
||||
.hero-panel-modal .ant-tag {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
/* Button link 样式 */
|
||||
.hero-panel-modal .ant-btn-link {
|
||||
color: #FFD700 !important;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-btn-link:hover {
|
||||
color: #FFA500 !important;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-btn-link:disabled {
|
||||
color: rgba(255, 255, 255, 0.25) !important;
|
||||
}
|
||||
|
||||
/* Typography 样式 */
|
||||
.hero-panel-modal .ant-typography {
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-typography-secondary {
|
||||
color: rgba(255, 255, 255, 0.45) !important;
|
||||
}
|
||||
|
||||
/* Spin 加载样式 */
|
||||
.hero-panel-modal .ant-spin-text {
|
||||
color: #FFD700 !important;
|
||||
}
|
||||
|
||||
.hero-panel-modal .ant-spin-dot-item {
|
||||
background-color: #FFD700 !important;
|
||||
}
|
||||
84
src/views/Community/components/HeroPanel/utils/index.js
Normal file
84
src/views/Community/components/HeroPanel/utils/index.js
Normal file
@@ -0,0 +1,84 @@
|
||||
// HeroPanel 工具函数
|
||||
|
||||
import { HEAT_LEVELS, DEFAULT_HEAT_COLORS } from '../constants';
|
||||
|
||||
/**
|
||||
* 判断当前是否在交易时间内 (9:30-15:00)
|
||||
*/
|
||||
export const isInTradingTime = () => {
|
||||
const now = new Date();
|
||||
const timeInMinutes = now.getHours() * 60 + now.getMinutes();
|
||||
return timeInMinutes >= 570 && timeInMinutes <= 900;
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据涨停数获取热度颜色
|
||||
*/
|
||||
export const getHeatColor = (count) => {
|
||||
if (!count) return DEFAULT_HEAT_COLORS;
|
||||
const level = HEAT_LEVELS.find((l) => count >= l.threshold);
|
||||
return level?.colors || DEFAULT_HEAT_COLORS;
|
||||
};
|
||||
|
||||
/**
|
||||
* 日期格式化为 YYYYMMDD
|
||||
*/
|
||||
export const formatDateStr = (date) => {
|
||||
if (!date) return "";
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
return `${year}${month}${day}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取六位股票代码（去掉后缀）
|
||||
*/
|
||||
export const getSixDigitCode = (code) => {
|
||||
if (!code) return code;
|
||||
return code.split(".")[0];
|
||||
};
|
||||
|
||||
/**
|
||||
* 添加交易所后缀
|
||||
*/
|
||||
export const addExchangeSuffix = (code) => {
|
||||
const sixDigitCode = getSixDigitCode(code);
|
||||
if (code.includes(".")) return code;
|
||||
if (sixDigitCode.startsWith("6")) {
|
||||
return `${sixDigitCode}.SH`;
|
||||
} else if (sixDigitCode.startsWith("0") || sixDigitCode.startsWith("3")) {
|
||||
return `${sixDigitCode}.SZ`;
|
||||
}
|
||||
return sixDigitCode;
|
||||
};
|
||||
|
||||
/**
|
||||
* 解析连板天数
|
||||
*/
|
||||
export const parseContinuousDays = (text) => {
|
||||
if (!text || text === "首板") return 1;
|
||||
const match = text.match(/(\d+)/);
|
||||
return match ? parseInt(match[1]) : 1;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取涨停时间样式
|
||||
*/
|
||||
export const getTimeStyle = (time) => {
|
||||
if (time <= "09:30:00") return { bg: "#ff4d4f", text: "#fff", label: "秒板" };
|
||||
if (time <= "09:35:00") return { bg: "#fa541c", text: "#fff", label: "早板" };
|
||||
if (time <= "10:00:00") return { bg: "#fa8c16", text: "#fff", label: "盘初" };
|
||||
if (time <= "11:00:00") return { bg: "#52c41a", text: "#fff", label: "盘中" };
|
||||
return { bg: "rgba(255,255,255,0.1)", text: "#888", label: "尾盘" };
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取连板天数样式
|
||||
*/
|
||||
export 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" };
|
||||
};
|
||||
Reference in New Issue
Block a user