refactor(MarketOverviewBanner): 提取常量、组件、弹窗到子模块
- constants.js: 涨跌颜色、交易时间判断、格式化函数 - components.js: MarketStatsBarCompact, CircularProgressCard, BannerStatCard - StockTop10Modal.js: TOP10 股票弹窗 - index.js: 模块统一导出 主文件从 ~440 行精简到 ~180 行 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -17,295 +17,31 @@ import {
|
||||
FireOutlined,
|
||||
RiseOutlined,
|
||||
FallOutlined,
|
||||
ThunderboltOutlined,
|
||||
TrophyOutlined,
|
||||
BarChartOutlined,
|
||||
CalendarOutlined,
|
||||
StockOutlined,
|
||||
BarChartOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Modal, Table } from "antd";
|
||||
import { getApiBase } from "@utils/apiConfig";
|
||||
|
||||
// 涨跌颜色常量
|
||||
const UP_COLOR = "#FF4D4F"; // 涨 - 红色
|
||||
const DOWN_COLOR = "#52C41A"; // 跌 - 绿色
|
||||
const FLAT_COLOR = "#888888"; // 平 - 灰色
|
||||
|
||||
/**
|
||||
* 判断是否在交易时间内 (9:30-15:00)
|
||||
*/
|
||||
const isInTradingTime = () => {
|
||||
const now = new Date();
|
||||
const hours = now.getHours();
|
||||
const minutes = now.getMinutes();
|
||||
const time = hours * 60 + minutes;
|
||||
return time >= 570 && time <= 900; // 9:30-15:00
|
||||
};
|
||||
|
||||
// 注入脉冲动画样式
|
||||
if (typeof document !== "undefined") {
|
||||
const styleId = "market-banner-animations";
|
||||
if (!document.getElementById(styleId)) {
|
||||
const styleSheet = document.createElement("style");
|
||||
styleSheet.id = styleId;
|
||||
styleSheet.innerText = `
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.6; transform: scale(1.1); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(styleSheet);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化涨跌幅
|
||||
*/
|
||||
const formatChg = (val) => {
|
||||
if (val === null || val === undefined) return "-";
|
||||
const num = parseFloat(val);
|
||||
if (isNaN(num)) return "-";
|
||||
return (num >= 0 ? "+" : "") + num.toFixed(2) + "%";
|
||||
};
|
||||
|
||||
/**
|
||||
* 沪深实时涨跌条形图组件 - 紧凑版
|
||||
*/
|
||||
const MarketStatsBarCompact = ({ marketStats }) => {
|
||||
if (!marketStats || marketStats.totalCount === 0) return null;
|
||||
|
||||
const {
|
||||
risingCount = 0,
|
||||
flatCount = 0,
|
||||
fallingCount = 0,
|
||||
totalCount = 0,
|
||||
} = marketStats;
|
||||
const risePercent = totalCount > 0 ? (risingCount / totalCount) * 100 : 0;
|
||||
const flatPercent = totalCount > 0 ? (flatCount / totalCount) * 100 : 0;
|
||||
const fallPercent = totalCount > 0 ? (fallingCount / totalCount) * 100 : 0;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* 标题 */}
|
||||
<HStack justify="space-between" mb={2}>
|
||||
<Text fontSize="xs" color="whiteAlpha.700" fontWeight="medium">
|
||||
沪深实时涨跌
|
||||
</Text>
|
||||
<Text fontSize="xs" color="whiteAlpha.500">
|
||||
({totalCount}只)
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
{/* 进度条 */}
|
||||
<Box
|
||||
h="16px"
|
||||
borderRadius="md"
|
||||
overflow="hidden"
|
||||
position="relative"
|
||||
mb={2}
|
||||
>
|
||||
<Flex h="100%">
|
||||
<Box
|
||||
w={`${risePercent}%`}
|
||||
h="100%"
|
||||
bg={UP_COLOR}
|
||||
transition="width 0.5s ease"
|
||||
/>
|
||||
<Box
|
||||
w={`${flatPercent}%`}
|
||||
h="100%"
|
||||
bg={FLAT_COLOR}
|
||||
transition="width 0.5s ease"
|
||||
/>
|
||||
<Box
|
||||
w={`${fallPercent}%`}
|
||||
h="100%"
|
||||
bg={DOWN_COLOR}
|
||||
transition="width 0.5s ease"
|
||||
/>
|
||||
</Flex>
|
||||
</Box>
|
||||
|
||||
{/* 数值标签 */}
|
||||
<Flex justify="space-between">
|
||||
<HStack spacing={1}>
|
||||
<Box w="6px" h="6px" borderRadius="sm" bg={UP_COLOR} />
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={UP_COLOR}
|
||||
fontWeight="bold"
|
||||
fontFamily="monospace"
|
||||
>
|
||||
{risingCount}
|
||||
</Text>
|
||||
<Text fontSize="2xs" color="whiteAlpha.500">
|
||||
涨
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
<HStack spacing={1}>
|
||||
<Box w="6px" h="6px" borderRadius="sm" bg={FLAT_COLOR} />
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={FLAT_COLOR}
|
||||
fontWeight="bold"
|
||||
fontFamily="monospace"
|
||||
>
|
||||
{flatCount}
|
||||
</Text>
|
||||
<Text fontSize="2xs" color="whiteAlpha.500">
|
||||
平
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
<HStack spacing={1}>
|
||||
<Box w="6px" h="6px" borderRadius="sm" bg={DOWN_COLOR} />
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={DOWN_COLOR}
|
||||
fontWeight="bold"
|
||||
fontFamily="monospace"
|
||||
>
|
||||
{fallingCount}
|
||||
</Text>
|
||||
<Text fontSize="2xs" color="whiteAlpha.500">
|
||||
跌
|
||||
</Text>
|
||||
</HStack>
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 环形进度图组件 - 仿图片样式
|
||||
* @param {boolean} noBorder - 是否不显示边框（用于嵌套在其他容器中）
|
||||
*/
|
||||
const CircularProgressCard = ({ label, value, color = "#EC4899", size = 44, highlight = false, noBorder = false }) => {
|
||||
const percentage = parseFloat(value) || 0;
|
||||
const strokeWidth = 3;
|
||||
const radius = (size - strokeWidth) / 2;
|
||||
// 270度圆弧（底部有缺口）
|
||||
const arcLength = (270 / 360) * 2 * Math.PI * radius;
|
||||
const progressLength = (percentage / 100) * arcLength;
|
||||
|
||||
return (
|
||||
<Box
|
||||
bg={noBorder ? "transparent" : "rgba(255,255,255,0.03)"}
|
||||
borderRadius="lg"
|
||||
px={noBorder ? 1 : 2}
|
||||
py={noBorder ? 0 : 1}
|
||||
border={noBorder ? "none" : "1px solid"}
|
||||
borderColor={noBorder ? "transparent" : "rgba(255,255,255,0.06)"}
|
||||
_hover={noBorder ? {} : {
|
||||
borderColor: "rgba(255,255,255,0.12)",
|
||||
bg: "rgba(255,255,255,0.05)",
|
||||
}}
|
||||
transition="all 0.2s"
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
gap={2}
|
||||
>
|
||||
<Text fontSize="xs" color={highlight ? "white" : "whiteAlpha.600"} fontWeight={highlight ? "bold" : "medium"} whiteSpace="nowrap">
|
||||
{label}
|
||||
</Text>
|
||||
<Box position="relative" w={`${size}px`} h={`${size}px`} flexShrink={0}>
|
||||
<svg width={size} height={size} style={{ transform: "rotate(135deg)" }}>
|
||||
{/* 背景圆弧 */}
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
fill="none"
|
||||
stroke="rgba(255,255,255,0.15)"
|
||||
strokeWidth={strokeWidth}
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={`${arcLength} ${2 * Math.PI * radius}`}
|
||||
/>
|
||||
{/* 进度圆弧 */}
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={`${progressLength} ${2 * Math.PI * radius}`}
|
||||
style={{
|
||||
transition: "stroke-dasharray 0.5s ease",
|
||||
filter: `drop-shadow(0 0 4px ${color})`
|
||||
}}
|
||||
/>
|
||||
</svg>
|
||||
{/* 中心数值 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top="50%"
|
||||
left="50%"
|
||||
transform="translate(-50%, -50%)"
|
||||
textAlign="center"
|
||||
>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
fontWeight="bold"
|
||||
color={color}
|
||||
lineHeight="1"
|
||||
textShadow={`0 0 10px ${color}50`}
|
||||
>
|
||||
{percentage.toFixed(1)}%
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 紧凑数据卡片 - 通栏版
|
||||
*/
|
||||
const BannerStatCard = ({ label, value, icon, color = "#7C3AED", highlight = false }) => (
|
||||
<Box
|
||||
bg="rgba(255,255,255,0.03)"
|
||||
borderRadius="lg"
|
||||
px={2}
|
||||
py={1.5}
|
||||
border="1px solid"
|
||||
borderColor="rgba(255,255,255,0.06)"
|
||||
_hover={{
|
||||
borderColor: "rgba(255,255,255,0.12)",
|
||||
bg: "rgba(255,255,255,0.05)",
|
||||
}}
|
||||
transition="all 0.2s"
|
||||
position="relative"
|
||||
overflow="hidden"
|
||||
>
|
||||
<HStack spacing={1.5} mb={0.5}>
|
||||
<Box color={color} fontSize="xs" opacity={0.8}>
|
||||
{icon}
|
||||
</Box>
|
||||
<Text fontSize="2xs" color={highlight ? "white" : "whiteAlpha.600"} fontWeight={highlight ? "bold" : "medium"}>
|
||||
{label}
|
||||
</Text>
|
||||
</HStack>
|
||||
<Text
|
||||
fontSize="md"
|
||||
fontWeight="bold"
|
||||
color={color}
|
||||
lineHeight="1.2"
|
||||
textShadow={`0 0 15px ${color}25`}
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
// 模块化导入
|
||||
import {
|
||||
UP_COLOR,
|
||||
DOWN_COLOR,
|
||||
isInTradingTime,
|
||||
formatChg,
|
||||
} from "./MarketOverviewBanner/constants";
|
||||
import {
|
||||
MarketStatsBarCompact,
|
||||
CircularProgressCard,
|
||||
BannerStatCard,
|
||||
} from "./MarketOverviewBanner/components";
|
||||
import StockTop10Modal from "./MarketOverviewBanner/StockTop10Modal";
|
||||
|
||||
const MarketOverviewBanner = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [stats, setStats] = useState(null);
|
||||
const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split("T")[0]);
|
||||
const [selectedDate, setSelectedDate] = useState(
|
||||
new Date().toISOString().split("T")[0]
|
||||
);
|
||||
const [stockModalVisible, setStockModalVisible] = useState(false);
|
||||
const dateInputRef = useRef(null);
|
||||
|
||||
@@ -337,7 +73,7 @@ const MarketOverviewBanner = () => {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// 日期变化时静默刷新（不显示 loading）
|
||||
// 日期变化时静默刷新
|
||||
useEffect(() => {
|
||||
if (selectedDate) {
|
||||
fetchStats(selectedDate, false);
|
||||
@@ -371,6 +107,7 @@ const MarketOverviewBanner = () => {
|
||||
if (!stats) return null;
|
||||
|
||||
const { summary, marketStats, topStocks = [] } = stats;
|
||||
const today = new Date().toISOString().split("T")[0];
|
||||
|
||||
return (
|
||||
<Box position="relative">
|
||||
@@ -420,9 +157,10 @@ const MarketOverviewBanner = () => {
|
||||
</HStack>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
<HStack spacing={2}>
|
||||
{/* 返回今天按钮 - 当选择的不是今天时显示 */}
|
||||
{selectedDate !== new Date().toISOString().split("T")[0] && (
|
||||
{/* 返回今天按钮 */}
|
||||
{selectedDate !== today && (
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color="white"
|
||||
@@ -438,12 +176,12 @@ const MarketOverviewBanner = () => {
|
||||
borderColor: "rgba(255, 215, 0, 0.6)",
|
||||
}}
|
||||
transition="all 0.2s"
|
||||
onClick={() => setSelectedDate(new Date().toISOString().split("T")[0])}
|
||||
onClick={() => setSelectedDate(today)}
|
||||
>
|
||||
返回今天
|
||||
</Text>
|
||||
)}
|
||||
{/* 日期选择器 - 金色边框 */}
|
||||
{/* 日期选择器 */}
|
||||
<Box
|
||||
as="label"
|
||||
display="flex"
|
||||
@@ -473,7 +211,7 @@ const MarketOverviewBanner = () => {
|
||||
value={selectedDate}
|
||||
onChange={handleDateChange}
|
||||
onClick={handleCalendarClick}
|
||||
max={new Date().toISOString().split("T")[0]}
|
||||
max={today}
|
||||
bg="transparent"
|
||||
border="none"
|
||||
color="#FFD700"
|
||||
@@ -503,7 +241,7 @@ const MarketOverviewBanner = () => {
|
||||
<MarketStatsBarCompact marketStats={marketStats} />
|
||||
</Box>
|
||||
|
||||
{/* 右侧：6个指标卡片 - 1行6列 */}
|
||||
{/* 右侧：6个指标卡片 */}
|
||||
<Grid templateColumns="repeat(6, 1fr)" gap={1.5} flex="1">
|
||||
<CircularProgressCard
|
||||
label="事件胜率"
|
||||
@@ -538,7 +276,7 @@ const MarketOverviewBanner = () => {
|
||||
color="#F59E0B"
|
||||
highlight
|
||||
/>
|
||||
{/* 关联股票 + TOP10标签 - 与 BannerStatCard 样式统一 */}
|
||||
{/* 关联股票卡片 */}
|
||||
<Box
|
||||
bg="rgba(255,255,255,0.03)"
|
||||
borderRadius="lg"
|
||||
@@ -598,126 +336,11 @@ const MarketOverviewBanner = () => {
|
||||
</Flex>
|
||||
|
||||
{/* 股票TOP10弹窗 */}
|
||||
<Modal
|
||||
title={
|
||||
<HStack spacing={2}>
|
||||
<StockOutlined style={{ color: "white" }} />
|
||||
<Text color="white">股票 TOP10</Text>
|
||||
</HStack>
|
||||
}
|
||||
open={stockModalVisible}
|
||||
onCancel={() => setStockModalVisible(false)}
|
||||
footer={null}
|
||||
width={600}
|
||||
closeIcon={<span style={{ color: "white" }}>×</span>}
|
||||
styles={{
|
||||
content: {
|
||||
background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
|
||||
border: "1px solid rgba(236, 72, 153, 0.3)",
|
||||
},
|
||||
header: {
|
||||
background: "transparent",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.1)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<style>
|
||||
{`
|
||||
.stock-top10-table .ant-table {
|
||||
background: transparent !important;
|
||||
}
|
||||
.stock-top10-table .ant-table-thead > tr > th {
|
||||
background: rgba(236, 72, 153, 0.1) !important;
|
||||
color: rgba(255, 255, 255, 0.8) !important;
|
||||
border-bottom: 1px solid rgba(236, 72, 153, 0.2) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
.stock-top10-table .ant-table-tbody > tr > td {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
|
||||
padding: 10px 8px !important;
|
||||
}
|
||||
.stock-top10-table .ant-table-tbody > tr:nth-child(odd) {
|
||||
background: rgba(255, 255, 255, 0.02) !important;
|
||||
}
|
||||
.stock-top10-table .ant-table-tbody > tr:nth-child(even) {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
.stock-top10-table .ant-table-tbody > tr:hover > td {
|
||||
background: rgba(236, 72, 153, 0.15) !important;
|
||||
}
|
||||
.stock-top10-table .ant-table-cell {
|
||||
background: transparent !important;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<Table
|
||||
dataSource={topStocks.slice(0, 10)}
|
||||
rowKey={(record) => record.stockCode || record.stockName}
|
||||
pagination={false}
|
||||
size="small"
|
||||
className="stock-top10-table"
|
||||
columns={[
|
||||
{
|
||||
title: "排名",
|
||||
dataIndex: "rank",
|
||||
key: "rank",
|
||||
width: 60,
|
||||
render: (_, __, index) => (
|
||||
<Text
|
||||
fontWeight="bold"
|
||||
color={
|
||||
index === 0
|
||||
? "#FFD700"
|
||||
: index === 1
|
||||
? "#C0C0C0"
|
||||
: index === 2
|
||||
? "#CD7F32"
|
||||
: "gray.400"
|
||||
}
|
||||
>
|
||||
{index + 1}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "股票代码",
|
||||
dataIndex: "stockCode",
|
||||
key: "stockCode",
|
||||
width: 100,
|
||||
render: (code) => (
|
||||
<Text color="gray.400" fontSize="sm">
|
||||
{code?.split(".")[0] || "-"}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "股票名称",
|
||||
dataIndex: "stockName",
|
||||
key: "stockName",
|
||||
render: (name) => (
|
||||
<Text color="white" fontWeight="medium">
|
||||
{name || "-"}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "最大涨幅",
|
||||
dataIndex: "maxChg",
|
||||
key: "maxChg",
|
||||
width: 100,
|
||||
align: "right",
|
||||
render: (val) => (
|
||||
<Text
|
||||
fontWeight="bold"
|
||||
color={val >= 0 ? UP_COLOR : DOWN_COLOR}
|
||||
>
|
||||
{formatChg(val)}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
]}
|
||||
<StockTop10Modal
|
||||
visible={stockModalVisible}
|
||||
onClose={() => setStockModalVisible(false)}
|
||||
topStocks={topStocks}
|
||||
/>
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
// 股票 TOP10 弹窗组件
|
||||
|
||||
import React from "react";
|
||||
import { Text, HStack } from "@chakra-ui/react";
|
||||
import { StockOutlined } from "@ant-design/icons";
|
||||
import { Modal, Table } from "antd";
|
||||
import { UP_COLOR, DOWN_COLOR, formatChg } from "./constants";
|
||||
|
||||
// 弹窗内表格样式
|
||||
const modalTableStyles = `
|
||||
.stock-top10-table .ant-table {
|
||||
background: transparent !important;
|
||||
}
|
||||
.stock-top10-table .ant-table-thead > tr > th {
|
||||
background: rgba(236, 72, 153, 0.1) !important;
|
||||
color: rgba(255, 255, 255, 0.8) !important;
|
||||
border-bottom: 1px solid rgba(236, 72, 153, 0.2) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
.stock-top10-table .ant-table-tbody > tr > td {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
|
||||
padding: 10px 8px !important;
|
||||
}
|
||||
.stock-top10-table .ant-table-tbody > tr:nth-child(odd) {
|
||||
background: rgba(255, 255, 255, 0.02) !important;
|
||||
}
|
||||
.stock-top10-table .ant-table-tbody > tr:nth-child(even) {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
.stock-top10-table .ant-table-tbody > tr:hover > td {
|
||||
background: rgba(236, 72, 153, 0.15) !important;
|
||||
}
|
||||
.stock-top10-table .ant-table-cell {
|
||||
background: transparent !important;
|
||||
}
|
||||
`;
|
||||
|
||||
// 表格列定义
|
||||
const tableColumns = [
|
||||
{
|
||||
title: "排名",
|
||||
dataIndex: "rank",
|
||||
key: "rank",
|
||||
width: 60,
|
||||
render: (_, __, index) => (
|
||||
<Text
|
||||
fontWeight="bold"
|
||||
color={
|
||||
index === 0
|
||||
? "#FFD700"
|
||||
: index === 1
|
||||
? "#C0C0C0"
|
||||
: index === 2
|
||||
? "#CD7F32"
|
||||
: "gray.400"
|
||||
}
|
||||
>
|
||||
{index + 1}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "股票代码",
|
||||
dataIndex: "stockCode",
|
||||
key: "stockCode",
|
||||
width: 100,
|
||||
render: (code) => (
|
||||
<Text color="gray.400" fontSize="sm">
|
||||
{code?.split(".")[0] || "-"}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "股票名称",
|
||||
dataIndex: "stockName",
|
||||
key: "stockName",
|
||||
render: (name) => (
|
||||
<Text color="white" fontWeight="medium">
|
||||
{name || "-"}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "最大涨幅",
|
||||
dataIndex: "maxChg",
|
||||
key: "maxChg",
|
||||
width: 100,
|
||||
align: "right",
|
||||
render: (val) => (
|
||||
<Text fontWeight="bold" color={val >= 0 ? UP_COLOR : DOWN_COLOR}>
|
||||
{formatChg(val)}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 股票 TOP10 弹窗组件
|
||||
*/
|
||||
const StockTop10Modal = ({ visible, onClose, topStocks = [] }) => {
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<HStack spacing={2}>
|
||||
<StockOutlined style={{ color: "white" }} />
|
||||
<Text color="white">股票 TOP10</Text>
|
||||
</HStack>
|
||||
}
|
||||
open={visible}
|
||||
onCancel={onClose}
|
||||
footer={null}
|
||||
width={600}
|
||||
closeIcon={<span style={{ color: "white" }}>×</span>}
|
||||
styles={{
|
||||
content: {
|
||||
background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
|
||||
border: "1px solid rgba(236, 72, 153, 0.3)",
|
||||
},
|
||||
header: {
|
||||
background: "transparent",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.1)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<style>{modalTableStyles}</style>
|
||||
<Table
|
||||
dataSource={topStocks.slice(0, 10)}
|
||||
rowKey={(record) => record.stockCode || record.stockName}
|
||||
pagination={false}
|
||||
size="small"
|
||||
className="stock-top10-table"
|
||||
columns={tableColumns}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default StockTop10Modal;
|
||||
@@ -0,0 +1,261 @@
|
||||
// MarketOverviewBanner 子组件
|
||||
|
||||
import React from "react";
|
||||
import { Box, Text, HStack, Flex } from "@chakra-ui/react";
|
||||
import { UP_COLOR, DOWN_COLOR, FLAT_COLOR } from "./constants";
|
||||
|
||||
/**
|
||||
* 沪深实时涨跌条形图组件 - 紧凑版
|
||||
*/
|
||||
export const MarketStatsBarCompact = ({ marketStats }) => {
|
||||
if (!marketStats || marketStats.totalCount === 0) return null;
|
||||
|
||||
const {
|
||||
risingCount = 0,
|
||||
flatCount = 0,
|
||||
fallingCount = 0,
|
||||
totalCount = 0,
|
||||
} = marketStats;
|
||||
const risePercent = totalCount > 0 ? (risingCount / totalCount) * 100 : 0;
|
||||
const flatPercent = totalCount > 0 ? (flatCount / totalCount) * 100 : 0;
|
||||
const fallPercent = totalCount > 0 ? (fallingCount / totalCount) * 100 : 0;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<HStack justify="space-between" mb={2}>
|
||||
<Text fontSize="xs" color="whiteAlpha.700" fontWeight="medium">
|
||||
沪深实时涨跌
|
||||
</Text>
|
||||
<Text fontSize="xs" color="whiteAlpha.500">
|
||||
({totalCount}只)
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
<Box
|
||||
h="16px"
|
||||
borderRadius="md"
|
||||
overflow="hidden"
|
||||
position="relative"
|
||||
mb={2}
|
||||
>
|
||||
<Flex h="100%">
|
||||
<Box
|
||||
w={`${risePercent}%`}
|
||||
h="100%"
|
||||
bg={UP_COLOR}
|
||||
transition="width 0.5s ease"
|
||||
/>
|
||||
<Box
|
||||
w={`${flatPercent}%`}
|
||||
h="100%"
|
||||
bg={FLAT_COLOR}
|
||||
transition="width 0.5s ease"
|
||||
/>
|
||||
<Box
|
||||
w={`${fallPercent}%`}
|
||||
h="100%"
|
||||
bg={DOWN_COLOR}
|
||||
transition="width 0.5s ease"
|
||||
/>
|
||||
</Flex>
|
||||
</Box>
|
||||
|
||||
<Flex justify="space-between">
|
||||
<HStack spacing={1}>
|
||||
<Box w="6px" h="6px" borderRadius="sm" bg={UP_COLOR} />
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={UP_COLOR}
|
||||
fontWeight="bold"
|
||||
fontFamily="monospace"
|
||||
>
|
||||
{risingCount}
|
||||
</Text>
|
||||
<Text fontSize="2xs" color="whiteAlpha.500">
|
||||
涨
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
<HStack spacing={1}>
|
||||
<Box w="6px" h="6px" borderRadius="sm" bg={FLAT_COLOR} />
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={FLAT_COLOR}
|
||||
fontWeight="bold"
|
||||
fontFamily="monospace"
|
||||
>
|
||||
{flatCount}
|
||||
</Text>
|
||||
<Text fontSize="2xs" color="whiteAlpha.500">
|
||||
平
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
<HStack spacing={1}>
|
||||
<Box w="6px" h="6px" borderRadius="sm" bg={DOWN_COLOR} />
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={DOWN_COLOR}
|
||||
fontWeight="bold"
|
||||
fontFamily="monospace"
|
||||
>
|
||||
{fallingCount}
|
||||
</Text>
|
||||
<Text fontSize="2xs" color="whiteAlpha.500">
|
||||
跌
|
||||
</Text>
|
||||
</HStack>
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 环形进度图组件
|
||||
*/
|
||||
export const CircularProgressCard = ({
|
||||
label,
|
||||
value,
|
||||
color = "#EC4899",
|
||||
size = 44,
|
||||
highlight = false,
|
||||
noBorder = false,
|
||||
}) => {
|
||||
const percentage = parseFloat(value) || 0;
|
||||
const strokeWidth = 3;
|
||||
const radius = (size - strokeWidth) / 2;
|
||||
const arcLength = (270 / 360) * 2 * Math.PI * radius;
|
||||
const progressLength = (percentage / 100) * arcLength;
|
||||
|
||||
return (
|
||||
<Box
|
||||
bg={noBorder ? "transparent" : "rgba(255,255,255,0.03)"}
|
||||
borderRadius="lg"
|
||||
px={noBorder ? 1 : 2}
|
||||
py={noBorder ? 0 : 1}
|
||||
border={noBorder ? "none" : "1px solid"}
|
||||
borderColor={noBorder ? "transparent" : "rgba(255,255,255,0.06)"}
|
||||
_hover={
|
||||
noBorder
|
||||
? {}
|
||||
: {
|
||||
borderColor: "rgba(255,255,255,0.12)",
|
||||
bg: "rgba(255,255,255,0.05)",
|
||||
}
|
||||
}
|
||||
transition="all 0.2s"
|
||||
display="flex"
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
gap={2}
|
||||
>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={highlight ? "white" : "whiteAlpha.600"}
|
||||
fontWeight={highlight ? "bold" : "medium"}
|
||||
whiteSpace="nowrap"
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
<Box position="relative" w={`${size}px`} h={`${size}px`} flexShrink={0}>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
style={{ transform: "rotate(135deg)" }}
|
||||
>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
fill="none"
|
||||
stroke="rgba(255,255,255,0.15)"
|
||||
strokeWidth={strokeWidth}
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={`${arcLength} ${2 * Math.PI * radius}`}
|
||||
/>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={`${progressLength} ${2 * Math.PI * radius}`}
|
||||
style={{
|
||||
transition: "stroke-dasharray 0.5s ease",
|
||||
filter: `drop-shadow(0 0 4px ${color})`,
|
||||
}}
|
||||
/>
|
||||
</svg>
|
||||
<Box
|
||||
position="absolute"
|
||||
top="50%"
|
||||
left="50%"
|
||||
transform="translate(-50%, -50%)"
|
||||
textAlign="center"
|
||||
>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
fontWeight="bold"
|
||||
color={color}
|
||||
lineHeight="1"
|
||||
textShadow={`0 0 10px ${color}50`}
|
||||
>
|
||||
{percentage.toFixed(1)}%
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 紧凑数据卡片
|
||||
*/
|
||||
export const BannerStatCard = ({
|
||||
label,
|
||||
value,
|
||||
icon,
|
||||
color = "#7C3AED",
|
||||
highlight = false,
|
||||
}) => (
|
||||
<Box
|
||||
bg="rgba(255,255,255,0.03)"
|
||||
borderRadius="lg"
|
||||
px={2}
|
||||
py={1.5}
|
||||
border="1px solid"
|
||||
borderColor="rgba(255,255,255,0.06)"
|
||||
_hover={{
|
||||
borderColor: "rgba(255,255,255,0.12)",
|
||||
bg: "rgba(255,255,255,0.05)",
|
||||
}}
|
||||
transition="all 0.2s"
|
||||
position="relative"
|
||||
overflow="hidden"
|
||||
>
|
||||
<HStack spacing={1.5} mb={0.5}>
|
||||
<Box color={color} fontSize="xs" opacity={0.8}>
|
||||
{icon}
|
||||
</Box>
|
||||
<Text
|
||||
fontSize="2xs"
|
||||
color={highlight ? "white" : "whiteAlpha.600"}
|
||||
fontWeight={highlight ? "bold" : "medium"}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
</HStack>
|
||||
<Text
|
||||
fontSize="md"
|
||||
fontWeight="bold"
|
||||
color={color}
|
||||
lineHeight="1.2"
|
||||
textShadow={`0 0 15px ${color}25`}
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
@@ -0,0 +1,43 @@
|
||||
// MarketOverviewBanner 常量定义
|
||||
|
||||
// 涨跌颜色常量
|
||||
export const UP_COLOR = "#FF4D4F"; // 涨 - 红色
|
||||
export const DOWN_COLOR = "#52C41A"; // 跌 - 绿色
|
||||
export const FLAT_COLOR = "#888888"; // 平 - 灰色
|
||||
|
||||
/**
|
||||
* 判断是否在交易时间内 (9:30-15:00)
|
||||
*/
|
||||
export const isInTradingTime = () => {
|
||||
const now = new Date();
|
||||
const hours = now.getHours();
|
||||
const minutes = now.getMinutes();
|
||||
const time = hours * 60 + minutes;
|
||||
return time >= 570 && time <= 900; // 9:30-15:00
|
||||
};
|
||||
|
||||
/**
|
||||
* 格式化涨跌幅
|
||||
*/
|
||||
export const formatChg = (val) => {
|
||||
if (val === null || val === undefined) return "-";
|
||||
const num = parseFloat(val);
|
||||
if (isNaN(num)) return "-";
|
||||
return (num >= 0 ? "+" : "") + num.toFixed(2) + "%";
|
||||
};
|
||||
|
||||
// 注入脉冲动画样式
|
||||
if (typeof document !== "undefined") {
|
||||
const styleId = "market-banner-animations";
|
||||
if (!document.getElementById(styleId)) {
|
||||
const styleSheet = document.createElement("style");
|
||||
styleSheet.id = styleId;
|
||||
styleSheet.innerText = `
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.6; transform: scale(1.1); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(styleSheet);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
// MarketOverviewBanner 模块导出
|
||||
|
||||
export { UP_COLOR, DOWN_COLOR, FLAT_COLOR, isInTradingTime, formatChg } from "./constants";
|
||||
export { MarketStatsBarCompact, CircularProgressCard, BannerStatCard } from "./components";
|
||||
export { default as StockTop10Modal } from "./StockTop10Modal";
|
||||
Reference in New Issue
Block a user