refactor(HeroPanel): 提取 DetailModal 相关组件
- 主弹窗 DetailModal 使用 Hook 管理状态 - ZTSectorView/ZTStockListView 使用 memo 优化 - EventsTabView 添加空状态处理 - RelatedEventsModal 涨停归因详情 - SectorStocksModal 板块股票详情 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
File diff suppressed because it is too large
Load Diff
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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";
|
||||
Reference in New Issue
Block a user