feat(MarketDashboard): 新增投资仪表盘组件
- 指数卡片组件（带迷你面积图） - 成交额柱状图、涨跌分布图组件 - 热门板块排行组件 - 毛玻璃背景，黑金配色 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -0,0 +1,50 @@
|
||||
// 市场概览仪表盘主组件 - 投资仪表盘
|
||||
import React from 'react';
|
||||
import { Box, Text, HStack, Icon } from '@chakra-ui/react';
|
||||
import { TrendingUp } from 'lucide-react';
|
||||
import GlassCard from '@components/GlassCard';
|
||||
import { MarketOverview } from './components';
|
||||
import { MOCK_INDICES, MOCK_MARKET_STATS } from './constants';
|
||||
|
||||
const MarketDashboard = ({
|
||||
indices = MOCK_INDICES,
|
||||
marketStats = MOCK_MARKET_STATS,
|
||||
}) => {
|
||||
return (
|
||||
<GlassCard
|
||||
variant="transparent"
|
||||
rounded="2xl"
|
||||
padding="md"
|
||||
hoverable={false}
|
||||
cornerDecor
|
||||
>
|
||||
{/* 标题栏 */}
|
||||
<HStack mb={4} spacing={2}>
|
||||
<Icon
|
||||
as={TrendingUp}
|
||||
boxSize={5}
|
||||
color="rgba(212, 175, 55, 0.9)"
|
||||
/>
|
||||
<Text
|
||||
fontSize="lg"
|
||||
fontWeight="bold"
|
||||
color="rgba(255, 255, 255, 0.95)"
|
||||
letterSpacing="wide"
|
||||
>
|
||||
投资仪表盘
|
||||
</Text>
|
||||
<Box
|
||||
h="1px"
|
||||
flex={1}
|
||||
bgGradient="linear(to-r, rgba(212, 175, 55, 0.4), transparent)"
|
||||
ml={2}
|
||||
/>
|
||||
</HStack>
|
||||
|
||||
{/* 市场概况：指数卡片 + 成交额 + 涨跌分布 + 热门板块 */}
|
||||
<MarketOverview indices={indices} marketStats={marketStats} />
|
||||
</GlassCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarketDashboard;
|
||||
@@ -0,0 +1,45 @@
|
||||
// 热点概念组件
|
||||
import React from 'react';
|
||||
import { Box, Text, VStack, SimpleGrid, HStack, Icon } from '@chakra-ui/react';
|
||||
import { Flame } from 'lucide-react';
|
||||
import { ConceptItem } from './atoms';
|
||||
import { THEME } from '../constants';
|
||||
|
||||
const HotConcepts = ({ concepts = [], onConceptClick }) => {
|
||||
return (
|
||||
<Box
|
||||
borderRadius="xl"
|
||||
p={4}
|
||||
h="100%"
|
||||
>
|
||||
<VStack align="stretch" spacing={3}>
|
||||
{/* 标题 */}
|
||||
<HStack spacing={2}>
|
||||
<Icon as={Flame} boxSize={4} color={THEME.status.up} />
|
||||
<Text
|
||||
fontSize="sm"
|
||||
fontWeight="bold"
|
||||
color="rgba(255, 255, 255, 0.9)"
|
||||
>
|
||||
热点概念
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
{/* 概念列表 */}
|
||||
<SimpleGrid columns={{ base: 1, sm: 2 }} spacing={2}>
|
||||
{concepts.map((concept) => (
|
||||
<ConceptItem
|
||||
key={concept.id}
|
||||
name={concept.name}
|
||||
change={concept.change}
|
||||
trend={concept.trend}
|
||||
onClick={() => onConceptClick?.(concept)}
|
||||
/>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default HotConcepts;
|
||||
@@ -0,0 +1,81 @@
|
||||
// 市场概况组件 - 顶部横条（匹配设计图布局）
|
||||
import React from 'react';
|
||||
import { Box, SimpleGrid } from '@chakra-ui/react';
|
||||
import {
|
||||
IndexChartCard,
|
||||
TurnoverChart,
|
||||
RiseFallChart,
|
||||
HotSectorsRanking,
|
||||
} from './atoms';
|
||||
|
||||
const MarketOverview = ({ indices = [], marketStats = {} }) => {
|
||||
// 默认指数数据（带图表数据）
|
||||
const defaultIndices = [
|
||||
{
|
||||
code: 'sh000001',
|
||||
name: '上证指数',
|
||||
value: 3391.88,
|
||||
change: 1.23,
|
||||
chartData: [3350, 3360, 3355, 3370, 3365, 3380, 3375, 3390, 3385, 3392],
|
||||
},
|
||||
{
|
||||
code: 'sz399001',
|
||||
name: '深证成指',
|
||||
value: 10728.54,
|
||||
change: 0.86,
|
||||
chartData: [10650, 10680, 10660, 10700, 10690, 10720, 10710, 10730, 10720, 10728],
|
||||
},
|
||||
{
|
||||
code: 'sz399006',
|
||||
name: '创业板指',
|
||||
value: 2156.32,
|
||||
change: -0.45,
|
||||
chartData: [2180, 2175, 2170, 2165, 2168, 2160, 2165, 2158, 2160, 2156],
|
||||
},
|
||||
];
|
||||
|
||||
const displayIndices = indices.length > 0 ? indices : defaultIndices;
|
||||
|
||||
return (
|
||||
<Box borderRadius="xl">
|
||||
{/* 6列网格布局：3个指数卡片 + 成交额 + 涨跌分布 + 热门板块 */}
|
||||
<SimpleGrid
|
||||
columns={{ base: 2, md: 3, lg: 6 }}
|
||||
spacing={3}
|
||||
>
|
||||
{/* 指数卡片（带迷你图表） */}
|
||||
{displayIndices.map((index) => (
|
||||
<IndexChartCard
|
||||
key={index.code}
|
||||
name={index.name}
|
||||
value={index.value}
|
||||
change={index.change}
|
||||
chartData={index.chartData || []}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* 成交额柱状图 */}
|
||||
<TurnoverChart
|
||||
data={marketStats.turnoverData || []}
|
||||
title="成交额"
|
||||
/>
|
||||
|
||||
{/* 涨跌分布图 */}
|
||||
<RiseFallChart
|
||||
riseCount={marketStats.riseCount || 2156}
|
||||
fallCount={marketStats.fallCount || 2034}
|
||||
flatCount={marketStats.flatCount || 312}
|
||||
title="涨跌分布"
|
||||
/>
|
||||
|
||||
{/* 热门板块排行 */}
|
||||
<HotSectorsRanking
|
||||
sectors={marketStats.hotSectors || []}
|
||||
title="热门板块"
|
||||
/>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarketOverview;
|
||||
@@ -0,0 +1,34 @@
|
||||
// AI平台能力统计组件 - 底部横条
|
||||
import React from 'react';
|
||||
import { Box, HStack, Divider } from '@chakra-ui/react';
|
||||
import { StatItem } from './atoms';
|
||||
import { THEME } from '../constants';
|
||||
|
||||
const PlatformStats = ({ stats = [] }) => {
|
||||
return (
|
||||
<Box
|
||||
borderRadius="xl"
|
||||
py={4}
|
||||
px={6}
|
||||
>
|
||||
<HStack justify="space-around" divider={
|
||||
<Divider
|
||||
orientation="vertical"
|
||||
h="40px"
|
||||
borderColor="rgba(212, 175, 55, 0.2)"
|
||||
/>
|
||||
}>
|
||||
{stats.map((stat, index) => (
|
||||
<StatItem
|
||||
key={index}
|
||||
icon={stat.icon}
|
||||
value={stat.value}
|
||||
label={stat.label}
|
||||
/>
|
||||
))}
|
||||
</HStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlatformStats;
|
||||
@@ -0,0 +1,179 @@
|
||||
// 交易日历组件
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Text,
|
||||
VStack,
|
||||
HStack,
|
||||
Grid,
|
||||
GridItem,
|
||||
IconButton,
|
||||
} from '@chakra-ui/react';
|
||||
import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react';
|
||||
import { DayCell } from './atoms';
|
||||
import { THEME, WEEKDAY_LABELS } from '../constants';
|
||||
|
||||
const TradingCalendar = ({ tradingDays = [] }) => {
|
||||
const [currentDate, setCurrentDate] = useState(new Date());
|
||||
|
||||
const calendarData = useMemo(() => {
|
||||
const year = currentDate.getFullYear();
|
||||
const month = currentDate.getMonth();
|
||||
|
||||
// 当月第一天
|
||||
const firstDay = new Date(year, month, 1);
|
||||
// 当月最后一天
|
||||
const lastDay = new Date(year, month + 1, 0);
|
||||
// 第一天是星期几
|
||||
const startWeekday = firstDay.getDay();
|
||||
// 当月天数
|
||||
const daysInMonth = lastDay.getDate();
|
||||
|
||||
// 上月最后几天
|
||||
const prevMonthLastDay = new Date(year, month, 0).getDate();
|
||||
|
||||
const days = [];
|
||||
|
||||
// 填充上月日期
|
||||
for (let i = startWeekday - 1; i >= 0; i--) {
|
||||
days.push({
|
||||
day: prevMonthLastDay - i,
|
||||
isCurrentMonth: false,
|
||||
isWeekend: false,
|
||||
isTrading: false,
|
||||
});
|
||||
}
|
||||
|
||||
// 填充当月日期
|
||||
const today = new Date();
|
||||
for (let day = 1; day <= daysInMonth; day++) {
|
||||
const date = new Date(year, month, day);
|
||||
const weekday = date.getDay();
|
||||
const isWeekend = weekday === 0 || weekday === 6;
|
||||
const isToday =
|
||||
day === today.getDate() &&
|
||||
month === today.getMonth() &&
|
||||
year === today.getFullYear();
|
||||
|
||||
// 检查是否为交易日（简化逻辑：非周末即交易日）
|
||||
// 实际应用中应该从 tradingDays 数组判断
|
||||
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||
const isTrading = tradingDays.length > 0
|
||||
? tradingDays.includes(dateStr)
|
||||
: !isWeekend;
|
||||
|
||||
days.push({
|
||||
day,
|
||||
isCurrentMonth: true,
|
||||
isWeekend,
|
||||
isTrading,
|
||||
isToday,
|
||||
});
|
||||
}
|
||||
|
||||
// 填充下月日期（补满 6 行 * 7 天 = 42 格）
|
||||
const remaining = 42 - days.length;
|
||||
for (let day = 1; day <= remaining; day++) {
|
||||
days.push({
|
||||
day,
|
||||
isCurrentMonth: false,
|
||||
isWeekend: false,
|
||||
isTrading: false,
|
||||
});
|
||||
}
|
||||
|
||||
return days;
|
||||
}, [currentDate, tradingDays]);
|
||||
|
||||
const handlePrevMonth = () => {
|
||||
setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
|
||||
};
|
||||
|
||||
const handleNextMonth = () => {
|
||||
setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
|
||||
};
|
||||
|
||||
const monthText = `${currentDate.getFullYear()}年${currentDate.getMonth() + 1}月`;
|
||||
|
||||
return (
|
||||
<Box
|
||||
borderRadius="xl"
|
||||
p={4}
|
||||
h="100%"
|
||||
>
|
||||
<VStack align="stretch" spacing={3}>
|
||||
{/* 日历头部 */}
|
||||
<HStack justify="space-between">
|
||||
<HStack spacing={2}>
|
||||
<Calendar size={16} color={THEME.text.gold} />
|
||||
<Text fontSize="sm" fontWeight="bold" color="rgba(255, 255, 255, 0.9)">
|
||||
交易日历
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack spacing={1}>
|
||||
<IconButton
|
||||
icon={<ChevronLeft size={16} />}
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
color="rgba(255, 255, 255, 0.6)"
|
||||
onClick={handlePrevMonth}
|
||||
aria-label="上月"
|
||||
_hover={{ bg: 'rgba(212, 175, 55, 0.15)' }}
|
||||
/>
|
||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.9)" minW="70px" textAlign="center">
|
||||
{monthText}
|
||||
</Text>
|
||||
<IconButton
|
||||
icon={<ChevronRight size={16} />}
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
color="rgba(255, 255, 255, 0.6)"
|
||||
onClick={handleNextMonth}
|
||||
aria-label="下月"
|
||||
_hover={{ bg: 'rgba(212, 175, 55, 0.15)' }}
|
||||
/>
|
||||
</HStack>
|
||||
</HStack>
|
||||
|
||||
{/* 星期标题 */}
|
||||
<Grid templateColumns="repeat(7, 1fr)" gap={0}>
|
||||
{WEEKDAY_LABELS.map((label, index) => (
|
||||
<GridItem key={label}>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color="rgba(255, 255, 255, 0.5)"
|
||||
textAlign="center"
|
||||
py={1}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
</GridItem>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* 日期网格 */}
|
||||
<Grid templateColumns="repeat(7, 1fr)" gap={0}>
|
||||
{calendarData.map((dayData, index) => (
|
||||
<GridItem
|
||||
key={index}
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
py={0.5}
|
||||
>
|
||||
<DayCell
|
||||
day={dayData.day}
|
||||
isTrading={dayData.isTrading}
|
||||
isToday={dayData.isToday || false}
|
||||
isWeekend={dayData.isWeekend}
|
||||
isCurrentMonth={dayData.isCurrentMonth}
|
||||
/>
|
||||
</GridItem>
|
||||
))}
|
||||
</Grid>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default TradingCalendar;
|
||||
@@ -0,0 +1,57 @@
|
||||
// 概念项组件
|
||||
import React from 'react';
|
||||
import { Box, Text, HStack } from '@chakra-ui/react';
|
||||
import { THEME } from '../../constants';
|
||||
import MiniTrendLine from './MiniTrendLine';
|
||||
|
||||
const ConceptItem = ({ name, change, trend = [], onClick }) => {
|
||||
const isUp = change >= 0;
|
||||
const changeColor = isUp ? THEME.status.up : THEME.status.down;
|
||||
const changeText = isUp ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`;
|
||||
|
||||
return (
|
||||
<Box
|
||||
bg="rgba(26, 26, 46, 0.5)"
|
||||
borderRadius="md"
|
||||
px={3}
|
||||
py={2}
|
||||
cursor={onClick ? 'pointer' : 'default'}
|
||||
transition="all 0.2s"
|
||||
border="1px solid"
|
||||
borderColor="rgba(212, 175, 55, 0.1)"
|
||||
backdropFilter="blur(8px)"
|
||||
_hover={{
|
||||
bg: 'rgba(37, 37, 64, 0.6)',
|
||||
borderColor: 'rgba(212, 175, 55, 0.25)',
|
||||
}}
|
||||
onClick={onClick}
|
||||
>
|
||||
<HStack justify="space-between">
|
||||
<Text fontSize="sm" color="rgba(255, 255, 255, 0.9)" fontWeight="medium">
|
||||
{name}
|
||||
</Text>
|
||||
<HStack spacing={2}>
|
||||
{trend.length > 0 && (
|
||||
<MiniTrendLine
|
||||
data={trend}
|
||||
color={isUp ? 'red' : 'green'}
|
||||
width={36}
|
||||
height={16}
|
||||
/>
|
||||
)}
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color={changeColor}
|
||||
fontWeight="medium"
|
||||
minW="55px"
|
||||
textAlign="right"
|
||||
>
|
||||
{changeText}
|
||||
</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConceptItem;
|
||||
@@ -0,0 +1,87 @@
|
||||
// 日期单元格组件
|
||||
import React from 'react';
|
||||
import { Box, Text } from '@chakra-ui/react';
|
||||
import { THEME } from '../../constants';
|
||||
|
||||
const DayCell = ({
|
||||
day,
|
||||
isTrading = true,
|
||||
isToday = false,
|
||||
isWeekend = false,
|
||||
isCurrentMonth = true,
|
||||
}) => {
|
||||
// 今天的样式（金色背景）
|
||||
if (isToday) {
|
||||
return (
|
||||
<Box
|
||||
w="28px"
|
||||
h="28px"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
borderRadius="full"
|
||||
bg={THEME.text.gold}
|
||||
boxShadow="0 0 8px rgba(212, 175, 55, 0.5)"
|
||||
>
|
||||
<Text fontSize="xs" color="#000" fontWeight="bold">
|
||||
{day}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// 非当月日期
|
||||
if (!isCurrentMonth) {
|
||||
return (
|
||||
<Box
|
||||
w="28px"
|
||||
h="28px"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Text fontSize="xs" color="rgba(139, 149, 165, 0.3)">
|
||||
{day}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// 周末（非交易日）
|
||||
if (isWeekend || !isTrading) {
|
||||
return (
|
||||
<Box
|
||||
w="28px"
|
||||
h="28px"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.3)">
|
||||
{day}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// 普通交易日
|
||||
return (
|
||||
<Box
|
||||
w="28px"
|
||||
h="28px"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
borderRadius="md"
|
||||
cursor="pointer"
|
||||
transition="all 0.15s"
|
||||
_hover={{ bg: 'rgba(212, 175, 55, 0.15)' }}
|
||||
>
|
||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.8)">
|
||||
{day}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default DayCell;
|
||||
@@ -0,0 +1,78 @@
|
||||
// 热门板块排行组件
|
||||
import React from 'react';
|
||||
import { Box, Text, VStack, HStack } from '@chakra-ui/react';
|
||||
import MiniTrendLine from './MiniTrendLine';
|
||||
|
||||
const HotSectorsRanking = ({ sectors = [], title = '热门板块排行' }) => {
|
||||
// 默认数据
|
||||
const defaultSectors = [
|
||||
{ rank: 1, name: '人工智能', change: 3.2, trend: [100, 102, 101, 104, 103, 106] },
|
||||
{ rank: 2, name: '新能源车', change: 1.8, trend: [100, 99, 101, 102, 101, 103] },
|
||||
{ rank: 3, name: '生物医药', change: 1.3, trend: [100, 101, 100, 102, 101, 102] },
|
||||
{ rank: 4, name: '消费科技', change: 1.2, trend: [100, 100, 101, 100, 102, 102] },
|
||||
{ rank: 5, name: '其他', change: 0.4, trend: [100, 100, 100, 101, 100, 101] },
|
||||
];
|
||||
|
||||
const data = sectors.length > 0 ? sectors : defaultSectors;
|
||||
|
||||
return (
|
||||
<Box
|
||||
bg="rgba(26, 26, 46, 0.7)"
|
||||
borderRadius="lg"
|
||||
p={3}
|
||||
minW="180px"
|
||||
border="1px solid"
|
||||
borderColor="rgba(212, 175, 55, 0.15)"
|
||||
backdropFilter="blur(8px)"
|
||||
>
|
||||
<VStack align="stretch" spacing={2}>
|
||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.6)" fontWeight="medium">
|
||||
{title}
|
||||
</Text>
|
||||
|
||||
{/* 排行列表 */}
|
||||
<VStack spacing={1.5} align="stretch">
|
||||
{data.map((sector, index) => (
|
||||
<HStack key={index} justify="space-between" fontSize="xs">
|
||||
{/* 排名 */}
|
||||
<HStack spacing={2} flex={1}>
|
||||
<Text
|
||||
color={index < 3 ? 'rgba(212, 175, 55, 0.9)' : 'rgba(255, 255, 255, 0.5)'}
|
||||
fontWeight={index < 3 ? 'bold' : 'normal'}
|
||||
w="16px"
|
||||
>
|
||||
{sector.rank}
|
||||
</Text>
|
||||
<Text color="rgba(255, 255, 255, 0.85)" noOfLines={1}>
|
||||
{sector.name}
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
{/* 趋势线 */}
|
||||
<Box w="40px">
|
||||
<MiniTrendLine
|
||||
data={sector.trend}
|
||||
color={sector.change >= 0 ? 'red' : 'green'}
|
||||
width={40}
|
||||
height={14}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* 涨跌幅 */}
|
||||
<Text
|
||||
color={sector.change >= 0 ? '#EF4444' : '#22C55E'}
|
||||
fontWeight="medium"
|
||||
w="50px"
|
||||
textAlign="right"
|
||||
>
|
||||
{sector.change >= 0 ? '+' : ''}{sector.change.toFixed(1)}%
|
||||
</Text>
|
||||
</HStack>
|
||||
))}
|
||||
</VStack>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default HotSectorsRanking;
|
||||
@@ -0,0 +1,55 @@
|
||||
// 指数卡片组件
|
||||
import React from 'react';
|
||||
import { Box, Text, HStack, VStack } from '@chakra-ui/react';
|
||||
import { THEME } from '../../constants';
|
||||
import MiniTrendLine from './MiniTrendLine';
|
||||
|
||||
const IndexCard = ({ name, value, change, trend = [] }) => {
|
||||
const isUp = change >= 0;
|
||||
const changeColor = isUp ? THEME.status.up : THEME.status.down;
|
||||
const changeText = isUp ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`;
|
||||
|
||||
return (
|
||||
<Box
|
||||
bg="rgba(26, 26, 46, 0.6)"
|
||||
borderRadius="lg"
|
||||
p={3}
|
||||
minW="120px"
|
||||
transition="all 0.2s"
|
||||
border="1px solid"
|
||||
borderColor="rgba(212, 175, 55, 0.15)"
|
||||
backdropFilter="blur(8px)"
|
||||
_hover={{
|
||||
bg: 'rgba(37, 37, 64, 0.7)',
|
||||
borderColor: 'rgba(212, 175, 55, 0.3)',
|
||||
boxShadow: '0 0 12px rgba(212, 175, 55, 0.2)'
|
||||
}}
|
||||
>
|
||||
<VStack align="flex-start" spacing={1}>
|
||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.6)">
|
||||
{name}
|
||||
</Text>
|
||||
<HStack justify="space-between" w="100%" align="flex-end">
|
||||
<VStack align="flex-start" spacing={0}>
|
||||
<Text fontSize="lg" fontWeight="bold" color="rgba(255, 255, 255, 0.95)">
|
||||
{value.toLocaleString()}
|
||||
</Text>
|
||||
<Text fontSize="xs" color={changeColor} fontWeight="medium">
|
||||
{changeText}
|
||||
</Text>
|
||||
</VStack>
|
||||
{trend.length > 0 && (
|
||||
<MiniTrendLine
|
||||
data={trend}
|
||||
color={isUp ? 'red' : 'green'}
|
||||
width={40}
|
||||
height={20}
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default IndexCard;
|
||||
@@ -0,0 +1,96 @@
|
||||
// 指数图表卡片 - 带迷你K线图
|
||||
import React, { useMemo } from 'react';
|
||||
import { Box, Text, VStack, HStack } from '@chakra-ui/react';
|
||||
|
||||
const IndexChartCard = ({ name, value, change, chartData = [] }) => {
|
||||
const isUp = change >= 0;
|
||||
const changeColor = isUp ? '#EF4444' : '#22C55E';
|
||||
const changeText = isUp ? `+${change.toFixed(2)}%` : `${change.toFixed(2)}%`;
|
||||
|
||||
// 生成迷你图表路径
|
||||
const chartPath = useMemo(() => {
|
||||
if (!chartData || chartData.length < 2) return '';
|
||||
|
||||
const width = 120;
|
||||
const height = 40;
|
||||
const padding = 4;
|
||||
|
||||
const min = Math.min(...chartData);
|
||||
const max = Math.max(...chartData);
|
||||
const range = max - min || 1;
|
||||
|
||||
const points = chartData.map((val, i) => {
|
||||
const x = padding + (i / (chartData.length - 1)) * (width - padding * 2);
|
||||
const y = height - padding - ((val - min) / range) * (height - padding * 2);
|
||||
return `${x},${y}`;
|
||||
});
|
||||
|
||||
return `M ${points.join(' L ')}`;
|
||||
}, [chartData]);
|
||||
|
||||
// 生成填充区域
|
||||
const areaPath = useMemo(() => {
|
||||
if (!chartPath) return '';
|
||||
const width = 120;
|
||||
const height = 40;
|
||||
return `${chartPath} L ${width - 4},${height - 4} L 4,${height - 4} Z`;
|
||||
}, [chartPath]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
bg="rgba(26, 26, 46, 0.7)"
|
||||
borderRadius="lg"
|
||||
p={3}
|
||||
minW="160px"
|
||||
border="1px solid"
|
||||
borderColor="rgba(212, 175, 55, 0.15)"
|
||||
backdropFilter="blur(8px)"
|
||||
transition="all 0.2s"
|
||||
_hover={{
|
||||
borderColor: 'rgba(212, 175, 55, 0.3)',
|
||||
boxShadow: '0 0 12px rgba(212, 175, 55, 0.15)'
|
||||
}}
|
||||
>
|
||||
<VStack align="stretch" spacing={2}>
|
||||
{/* 标题 */}
|
||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.6)" fontWeight="medium">
|
||||
{name}
|
||||
</Text>
|
||||
|
||||
{/* 数值和涨跌幅 */}
|
||||
<HStack justify="space-between" align="baseline">
|
||||
<Text fontSize="lg" fontWeight="bold" color={changeColor}>
|
||||
{typeof value === 'number' ? value.toLocaleString(undefined, { minimumFractionDigits: 2 }) : value}
|
||||
</Text>
|
||||
<Text fontSize="sm" color={changeColor} fontWeight="medium">
|
||||
{changeText}
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
{/* 迷你图表 */}
|
||||
{chartData.length > 0 && (
|
||||
<Box h="40px" w="100%">
|
||||
<svg width="100%" height="40" viewBox="0 0 120 40" preserveAspectRatio="none">
|
||||
{/* 填充区域 */}
|
||||
<path
|
||||
d={areaPath}
|
||||
fill={isUp ? 'rgba(239, 68, 68, 0.1)' : 'rgba(34, 197, 94, 0.1)'}
|
||||
/>
|
||||
{/* 线条 */}
|
||||
<path
|
||||
d={chartPath}
|
||||
fill="none"
|
||||
stroke={changeColor}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</Box>
|
||||
)}
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default IndexChartCard;
|
||||
@@ -0,0 +1,50 @@
|
||||
// 迷你趋势线组件 - 基于 SVG
|
||||
import React, { useMemo } from 'react';
|
||||
import { Box } from '@chakra-ui/react';
|
||||
import { THEME } from '../../constants';
|
||||
|
||||
const MiniTrendLine = ({
|
||||
data = [],
|
||||
color = 'green',
|
||||
width = 60,
|
||||
height = 24,
|
||||
}) => {
|
||||
const pathD = useMemo(() => {
|
||||
if (!data || data.length < 2) return '';
|
||||
|
||||
const min = Math.min(...data);
|
||||
const max = Math.max(...data);
|
||||
const range = max - min || 1;
|
||||
|
||||
const points = data.map((value, index) => {
|
||||
const x = (index / (data.length - 1)) * width;
|
||||
const y = height - ((value - min) / range) * height * 0.8 - height * 0.1;
|
||||
return `${x},${y}`;
|
||||
});
|
||||
|
||||
return `M ${points.join(' L ')}`;
|
||||
}, [data, width, height]);
|
||||
|
||||
const strokeColor = color === 'red' ? THEME.status.up : THEME.status.down;
|
||||
|
||||
if (!data || data.length < 2) {
|
||||
return <Box w={`${width}px`} h={`${height}px`} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box w={`${width}px`} h={`${height}px`}>
|
||||
<svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
|
||||
<path
|
||||
d={pathD}
|
||||
fill="none"
|
||||
stroke={strokeColor}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default MiniTrendLine;
|
||||
@@ -0,0 +1,92 @@
|
||||
// 涨跌分布图组件
|
||||
import React from 'react';
|
||||
import { Box, Text, VStack, HStack } from '@chakra-ui/react';
|
||||
|
||||
const RiseFallChart = ({
|
||||
riseCount = 2156,
|
||||
fallCount = 2034,
|
||||
flatCount = 312,
|
||||
title = '涨跌分布'
|
||||
}) => {
|
||||
const total = riseCount + fallCount + flatCount;
|
||||
const risePercent = ((riseCount / total) * 100).toFixed(1);
|
||||
const fallPercent = ((fallCount / total) * 100).toFixed(1);
|
||||
const flatPercent = ((flatCount / total) * 100).toFixed(1);
|
||||
|
||||
// 分布数据 - 模拟不同涨跌幅区间
|
||||
const distribution = [
|
||||
{ range: '>7%', rise: 86, fall: 12, label: '涨停' },
|
||||
{ range: '3-7%', rise: 420, fall: 180 },
|
||||
{ range: '0-3%', rise: 1650, fall: 0 },
|
||||
{ range: '-3-0%', rise: 0, fall: 1542 },
|
||||
{ range: '-7--3%', rise: 0, fall: 280 },
|
||||
{ range: '<-7%', rise: 0, fall: 20, label: '跌停' },
|
||||
];
|
||||
|
||||
const maxCount = Math.max(...distribution.map(d => Math.max(d.rise, d.fall)));
|
||||
|
||||
return (
|
||||
<Box
|
||||
bg="rgba(26, 26, 46, 0.7)"
|
||||
borderRadius="lg"
|
||||
p={3}
|
||||
minW="160px"
|
||||
border="1px solid"
|
||||
borderColor="rgba(212, 175, 55, 0.15)"
|
||||
backdropFilter="blur(8px)"
|
||||
>
|
||||
<VStack align="stretch" spacing={2}>
|
||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.6)" fontWeight="medium">
|
||||
{title}
|
||||
</Text>
|
||||
|
||||
{/* 水平柱状图 */}
|
||||
<VStack spacing={1} align="stretch">
|
||||
{distribution.map((item, index) => (
|
||||
<HStack key={index} spacing={1} h="12px">
|
||||
{/* 涨（红色，向右） */}
|
||||
<Box flex={1} display="flex" justifyContent="flex-end">
|
||||
{item.rise > 0 && (
|
||||
<Box
|
||||
h="10px"
|
||||
w={`${(item.rise / maxCount) * 100}%`}
|
||||
bg="linear-gradient(90deg, rgba(239, 68, 68, 0.4) 0%, #EF4444 100%)"
|
||||
borderRadius="sm"
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
{/* 中心线 */}
|
||||
<Box w="1px" h="10px" bg="rgba(255, 255, 255, 0.2)" />
|
||||
{/* 跌（绿色，向左显示但实际向右） */}
|
||||
<Box flex={1}>
|
||||
{item.fall > 0 && (
|
||||
<Box
|
||||
h="10px"
|
||||
w={`${(item.fall / maxCount) * 100}%`}
|
||||
bg="linear-gradient(90deg, #22C55E 0%, rgba(34, 197, 94, 0.4) 100%)"
|
||||
borderRadius="sm"
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</HStack>
|
||||
))}
|
||||
</VStack>
|
||||
|
||||
{/* 统计数字 */}
|
||||
<HStack justify="space-between" fontSize="xs">
|
||||
<Text color="#EF4444" fontWeight="medium">
|
||||
涨 {riseCount}
|
||||
</Text>
|
||||
<Text color="rgba(255, 255, 255, 0.5)">
|
||||
平 {flatCount}
|
||||
</Text>
|
||||
<Text color="#22C55E" fontWeight="medium">
|
||||
跌 {fallCount}
|
||||
</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default RiseFallChart;
|
||||
@@ -0,0 +1,44 @@
|
||||
// 统计卡片组件（涨停/跌停/成交额）
|
||||
import React from 'react';
|
||||
import { Box, Text, VStack } from '@chakra-ui/react';
|
||||
import { THEME } from '../../constants';
|
||||
|
||||
const StatCard = ({ label, value, subLabel, valueColor }) => {
|
||||
return (
|
||||
<Box
|
||||
bg="rgba(26, 26, 46, 0.6)"
|
||||
borderRadius="lg"
|
||||
p={3}
|
||||
minW="80px"
|
||||
textAlign="center"
|
||||
transition="all 0.2s"
|
||||
border="1px solid"
|
||||
borderColor="rgba(212, 175, 55, 0.15)"
|
||||
backdropFilter="blur(8px)"
|
||||
_hover={{
|
||||
bg: 'rgba(37, 37, 64, 0.7)',
|
||||
borderColor: 'rgba(212, 175, 55, 0.3)',
|
||||
}}
|
||||
>
|
||||
<VStack spacing={0}>
|
||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.6)">
|
||||
{label}
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="xl"
|
||||
fontWeight="bold"
|
||||
color={valueColor || 'rgba(255, 255, 255, 0.95)'}
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
{subLabel && (
|
||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.5)">
|
||||
{subLabel}
|
||||
</Text>
|
||||
)}
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatCard;
|
||||
@@ -0,0 +1,47 @@
|
||||
// AI平台能力统计项组件
|
||||
import React from 'react';
|
||||
import { Box, Text, VStack, Icon } from '@chakra-ui/react';
|
||||
import {
|
||||
Building2,
|
||||
BarChart3,
|
||||
Calendar,
|
||||
Bot,
|
||||
TrendingUp,
|
||||
Database,
|
||||
} from 'lucide-react';
|
||||
import { THEME } from '../../constants';
|
||||
|
||||
// 图标映射
|
||||
const iconMap = {
|
||||
building: Building2,
|
||||
chart: BarChart3,
|
||||
calendar: Calendar,
|
||||
robot: Bot,
|
||||
trending: TrendingUp,
|
||||
database: Database,
|
||||
};
|
||||
|
||||
const StatItem = ({ icon, value, label }) => {
|
||||
const IconComponent = iconMap[icon] || Database;
|
||||
|
||||
return (
|
||||
<Box textAlign="center" px={4}>
|
||||
<VStack spacing={1}>
|
||||
<Icon
|
||||
as={IconComponent}
|
||||
boxSize={5}
|
||||
color={THEME.text.gold}
|
||||
mb={1}
|
||||
/>
|
||||
<Text fontSize="lg" fontWeight="bold" color="rgba(255, 255, 255, 0.95)">
|
||||
{value}
|
||||
</Text>
|
||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.6)">
|
||||
{label}
|
||||
</Text>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatItem;
|
||||
@@ -0,0 +1,56 @@
|
||||
// 成交额柱状图组件
|
||||
import React from 'react';
|
||||
import { Box, Text, VStack, HStack } from '@chakra-ui/react';
|
||||
|
||||
const TurnoverChart = ({ data = [], title = '成交额' }) => {
|
||||
// 默认数据
|
||||
const chartData = data.length > 0 ? data : [
|
||||
{ time: '10:30', value: 0.85 },
|
||||
{ time: '11:00', value: 0.92 },
|
||||
{ time: '11:15', value: 0.78 },
|
||||
{ time: '13:00', value: 1.05 },
|
||||
{ time: '13:30', value: 1.12 },
|
||||
{ time: '14:00', value: 0.95 },
|
||||
];
|
||||
|
||||
const maxValue = Math.max(...chartData.map(d => d.value));
|
||||
|
||||
return (
|
||||
<Box
|
||||
bg="rgba(26, 26, 46, 0.7)"
|
||||
borderRadius="lg"
|
||||
p={3}
|
||||
minW="140px"
|
||||
border="1px solid"
|
||||
borderColor="rgba(212, 175, 55, 0.15)"
|
||||
backdropFilter="blur(8px)"
|
||||
>
|
||||
<VStack align="stretch" spacing={2}>
|
||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.6)" fontWeight="medium">
|
||||
{title}
|
||||
</Text>
|
||||
|
||||
{/* 柱状图 */}
|
||||
<HStack spacing={1} align="flex-end" h="50px">
|
||||
{chartData.map((item, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
flex={1}
|
||||
h={`${(item.value / maxValue) * 100}%`}
|
||||
bg="linear-gradient(180deg, rgba(212, 175, 55, 0.8) 0%, rgba(212, 175, 55, 0.4) 100%)"
|
||||
borderRadius="sm"
|
||||
minH="4px"
|
||||
/>
|
||||
))}
|
||||
</HStack>
|
||||
|
||||
{/* 当前值 */}
|
||||
<Text fontSize="sm" fontWeight="bold" color="rgba(212, 175, 55, 0.9)">
|
||||
1.25亿
|
||||
</Text>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default TurnoverChart;
|
||||
@@ -0,0 +1,11 @@
|
||||
// 原子组件导出
|
||||
export { default as MiniTrendLine } from './MiniTrendLine';
|
||||
export { default as IndexCard } from './IndexCard';
|
||||
export { default as StatCard } from './StatCard';
|
||||
export { default as ConceptItem } from './ConceptItem';
|
||||
export { default as DayCell } from './DayCell';
|
||||
export { default as StatItem } from './StatItem';
|
||||
export { default as IndexChartCard } from './IndexChartCard';
|
||||
export { default as TurnoverChart } from './TurnoverChart';
|
||||
export { default as RiseFallChart } from './RiseFallChart';
|
||||
export { default as HotSectorsRanking } from './HotSectorsRanking';
|
||||
@@ -0,0 +1,6 @@
|
||||
// 组件导出
|
||||
export { default as MarketOverview } from './MarketOverview';
|
||||
export { default as HotConcepts } from './HotConcepts';
|
||||
export { default as TradingCalendar } from './TradingCalendar';
|
||||
export { default as PlatformStats } from './PlatformStats';
|
||||
export * from './atoms';
|
||||
108
src/views/Profile/components/MarketDashboard/constants.ts
Normal file
108
src/views/Profile/components/MarketDashboard/constants.ts
Normal file
@@ -0,0 +1,108 @@
|
||||
// MarketDashboard 常量定义
|
||||
|
||||
// 黑金主题配色
|
||||
export const THEME = {
|
||||
bg: {
|
||||
primary: '#0A0A0A', // 纯黑背景
|
||||
card: '#141414', // 卡片背景
|
||||
cardHover: '#1A1A1A', // 卡片悬停
|
||||
gradient: 'linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%)',
|
||||
},
|
||||
text: {
|
||||
primary: '#FFFFFF', // 主文字（白色）
|
||||
secondary: '#8B8B8B', // 次要文字（灰色）
|
||||
accent: '#D4AF37', // 强调色（金色）
|
||||
gold: '#D4AF37', // 金色
|
||||
goldLight: '#F0D78C', // 浅金色
|
||||
},
|
||||
status: {
|
||||
up: '#EF4444', // 上涨（红色）
|
||||
down: '#22C55E', // 下跌（绿色）
|
||||
},
|
||||
border: 'rgba(212, 175, 55, 0.2)', // 金色边框
|
||||
borderGold: 'rgba(212, 175, 55, 0.4)',
|
||||
shadow: '0 4px 20px rgba(212, 175, 55, 0.1)',
|
||||
};
|
||||
|
||||
// 模拟数据（后续替换为真实 API）
|
||||
export const MOCK_INDICES: Array<{
|
||||
name: string;
|
||||
code: string;
|
||||
value: number;
|
||||
change: number;
|
||||
chartData: number[];
|
||||
}> = [
|
||||
{
|
||||
name: '上证指数',
|
||||
code: '000001.SH',
|
||||
value: 3391.88,
|
||||
change: 0.52,
|
||||
chartData: [3350, 3360, 3355, 3370, 3365, 3380, 3375, 3390, 3385, 3392],
|
||||
},
|
||||
{
|
||||
name: '深证成指',
|
||||
code: '399001.SZ',
|
||||
value: 10723.49,
|
||||
change: 0.68,
|
||||
chartData: [10650, 10680, 10660, 10700, 10690, 10720, 10710, 10730, 10720, 10723],
|
||||
},
|
||||
{
|
||||
name: '创业板指',
|
||||
code: '399006.SZ',
|
||||
value: 2156.78,
|
||||
change: 1.23,
|
||||
chartData: [2130, 2140, 2135, 2150, 2145, 2155, 2150, 2160, 2155, 2157],
|
||||
},
|
||||
];
|
||||
|
||||
export const MOCK_MARKET_STATS = {
|
||||
limitUp: 86,
|
||||
limitDown: 12,
|
||||
turnover: '1.2万亿',
|
||||
riseCount: 2156,
|
||||
fallCount: 2034,
|
||||
flatCount: 312,
|
||||
turnoverData: [
|
||||
{ time: '10:30', value: 0.85 },
|
||||
{ time: '11:00', value: 0.92 },
|
||||
{ time: '11:15', value: 0.78 },
|
||||
{ time: '13:00', value: 1.05 },
|
||||
{ time: '13:30', value: 1.12 },
|
||||
{ time: '14:00', value: 0.95 },
|
||||
],
|
||||
hotSectors: [
|
||||
{ rank: 1, name: '人工智能', change: 3.2, trend: [100, 102, 101, 104, 103, 106] },
|
||||
{ rank: 2, name: '新能源车', change: 1.8, trend: [100, 99, 101, 102, 101, 103] },
|
||||
{ rank: 3, name: '生物医药', change: 1.3, trend: [100, 101, 100, 102, 101, 102] },
|
||||
{ rank: 4, name: '消费科技', change: 1.2, trend: [100, 100, 101, 100, 102, 102] },
|
||||
{ rank: 5, name: '半导体', change: 0.9, trend: [100, 100, 100, 101, 100, 101] },
|
||||
],
|
||||
};
|
||||
|
||||
export const MOCK_HOT_CONCEPTS: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
change: number;
|
||||
trend: number[];
|
||||
}> = [
|
||||
{ id: '1', name: '人工智能', change: 3.25, trend: [100, 102, 101, 103, 105, 108] },
|
||||
{ id: '2', name: '芯片概念', change: 2.87, trend: [100, 99, 101, 102, 104, 106] },
|
||||
{ id: '3', name: '新能源车', change: 2.15, trend: [100, 101, 100, 102, 103, 105] },
|
||||
{ id: '4', name: '光伏', change: 1.92, trend: [100, 99, 100, 101, 102, 104] },
|
||||
{ id: '5', name: '医药生物', change: 1.56, trend: [100, 100, 101, 101, 102, 103] },
|
||||
{ id: '6', name: '消费电子', change: 1.33, trend: [100, 101, 100, 101, 102, 103] },
|
||||
];
|
||||
|
||||
export const MOCK_PLATFORM_STATS: Array<{
|
||||
icon: string;
|
||||
value: string;
|
||||
label: string;
|
||||
}> = [
|
||||
{ icon: 'building', value: '4300+', label: '上市公司' },
|
||||
{ icon: 'chart', value: '500+', label: '概念板块' },
|
||||
{ icon: 'calendar', value: '10年+', label: '历史数据' },
|
||||
{ icon: 'robot', value: '24/7', label: 'AI分析' },
|
||||
];
|
||||
|
||||
// 星期标题
|
||||
export const WEEKDAY_LABELS = ['日', '一', '二', '三', '四', '五', '六'];
|
||||
3
src/views/Profile/components/MarketDashboard/index.js
Normal file
3
src/views/Profile/components/MarketDashboard/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
// MarketDashboard 组件导出
|
||||
export { default } from './MarketDashboard';
|
||||
export { default as MarketDashboard } from './MarketDashboard';
|
||||
88
src/views/Profile/components/MarketDashboard/types.ts
Normal file
88
src/views/Profile/components/MarketDashboard/types.ts
Normal file
@@ -0,0 +1,88 @@
|
||||
// MarketDashboard 类型定义
|
||||
|
||||
// 迷你趋势线
|
||||
export interface MiniTrendLineProps {
|
||||
data: number[];
|
||||
color?: 'green' | 'red';
|
||||
width?: number;
|
||||
height?: number;
|
||||
}
|
||||
|
||||
// 指数卡片
|
||||
export interface IndexCardProps {
|
||||
name: string;
|
||||
value: number;
|
||||
change: number;
|
||||
trend?: number[];
|
||||
}
|
||||
|
||||
// 统计卡片（涨停/成交额）
|
||||
export interface StatCardProps {
|
||||
label: string;
|
||||
value: string | number;
|
||||
subLabel?: string;
|
||||
icon?: React.ReactNode;
|
||||
}
|
||||
|
||||
// 概念项
|
||||
export interface ConceptItemProps {
|
||||
name: string;
|
||||
change: number;
|
||||
trend?: number[];
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
// 日期单元格
|
||||
export interface DayCellProps {
|
||||
day: number;
|
||||
isTrading: boolean;
|
||||
isToday: boolean;
|
||||
isWeekend: boolean;
|
||||
isCurrentMonth?: boolean;
|
||||
}
|
||||
|
||||
// 统计项（AI平台能力）
|
||||
export interface StatItemProps {
|
||||
icon: React.ReactNode;
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
// 指数数据
|
||||
export interface IndexData {
|
||||
name: string;
|
||||
code: string;
|
||||
value: number;
|
||||
change: number;
|
||||
trend: number[];
|
||||
}
|
||||
|
||||
// 概念数据
|
||||
export interface ConceptData {
|
||||
id: string;
|
||||
name: string;
|
||||
change: number;
|
||||
trend: number[];
|
||||
}
|
||||
|
||||
// 市场统计数据
|
||||
export interface MarketStats {
|
||||
limitUp: number;
|
||||
limitDown: number;
|
||||
turnover: string;
|
||||
}
|
||||
|
||||
// 平台能力数据
|
||||
export interface PlatformStat {
|
||||
icon: string;
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
// 完整仪表盘数据
|
||||
export interface MarketDashboardData {
|
||||
indices: IndexData[];
|
||||
marketStats: MarketStats;
|
||||
hotConcepts: ConceptData[];
|
||||
platformStats: PlatformStat[];
|
||||
}
|
||||
Reference in New Issue
Block a user