chore: 清理废弃的组件和样式文件
This commit is contained in:
zdl
@@ -1,40 +0,0 @@
|
|||||||
/*!
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
* Argon Dashboard Chakra PRO - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
|
||||||
|
|
||||||
* Designed and Coded by Simmmple & Creative Tim
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import FullCalendar from '@fullcalendar/react'; // must go before plugins
|
|
||||||
import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin!
|
|
||||||
import interactionPlugin from '@fullcalendar/interaction'; // needed for dayClick
|
|
||||||
|
|
||||||
function EventCalendar(props) {
|
|
||||||
const { calendarData, initialDate } = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FullCalendar
|
|
||||||
plugins={[dayGridPlugin, interactionPlugin]}
|
|
||||||
headerToolbar={false}
|
|
||||||
initialView='dayGridMonth'
|
|
||||||
initialDate={initialDate}
|
|
||||||
contentHeight='600'
|
|
||||||
events={calendarData}
|
|
||||||
editable={true}
|
|
||||||
height='100%'
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default EventCalendar;
|
|
||||||
@@ -1,236 +0,0 @@
|
|||||||
// src/views/Center/components/InvestmentCalendar.less
|
|
||||||
// 黑金主题日历样式
|
|
||||||
|
|
||||||
// ==================== 颜色变量 ====================
|
|
||||||
// 黑金主题主色
|
|
||||||
@gold-400: #D4AF37;
|
|
||||||
@gold-500: #B8960C;
|
|
||||||
@gold-gradient: linear-gradient(135deg, #D4AF37 0%, #F5E6A3 100%);
|
|
||||||
|
|
||||||
// 背景色
|
|
||||||
@bg-deep: #0A0A14;
|
|
||||||
@bg-primary: #0F0F1A;
|
|
||||||
@bg-elevated: #1A1A2E;
|
|
||||||
@bg-surface: #252540;
|
|
||||||
|
|
||||||
// 边框色
|
|
||||||
@line-subtle: rgba(212, 175, 55, 0.1);
|
|
||||||
@line-default: rgba(212, 175, 55, 0.2);
|
|
||||||
@line-emphasis: rgba(212, 175, 55, 0.4);
|
|
||||||
|
|
||||||
// 文字色
|
|
||||||
@text-primary: rgba(255, 255, 255, 0.95);
|
|
||||||
@text-secondary: rgba(255, 255, 255, 0.6);
|
|
||||||
@text-muted: rgba(255, 255, 255, 0.4);
|
|
||||||
|
|
||||||
// 今天高亮背景
|
|
||||||
@today-bg: rgba(212, 175, 55, 0.1);
|
|
||||||
|
|
||||||
// ==================== FullCalendar CSS Variables 覆盖 ====================
|
|
||||||
// FullCalendar v6 使用 CSS-in-JS，必须通过 CSS Variables 覆盖默认样式
|
|
||||||
.fc {
|
|
||||||
// 按钮颜色
|
|
||||||
--fc-button-text-color: @bg-deep;
|
|
||||||
--fc-button-bg-color: @gold-400;
|
|
||||||
--fc-button-border-color: @gold-400;
|
|
||||||
--fc-button-hover-bg-color: @gold-500;
|
|
||||||
--fc-button-hover-border-color: @gold-500;
|
|
||||||
--fc-button-active-bg-color: @gold-500;
|
|
||||||
--fc-button-active-border-color: @gold-500;
|
|
||||||
|
|
||||||
// 今天高亮
|
|
||||||
--fc-today-bg-color: @today-bg;
|
|
||||||
|
|
||||||
// 边框和背景
|
|
||||||
--fc-border-color: @line-default;
|
|
||||||
--fc-page-bg-color: transparent;
|
|
||||||
--fc-neutral-bg-color: rgba(212, 175, 55, 0.05);
|
|
||||||
|
|
||||||
// 事件颜色（可选）
|
|
||||||
--fc-event-bg-color: @gold-400;
|
|
||||||
--fc-event-border-color: @gold-400;
|
|
||||||
--fc-event-text-color: @bg-deep;
|
|
||||||
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 工具栏布局
|
|
||||||
.fc .fc-toolbar.fc-header-toolbar {
|
|
||||||
justify-content: flex-start !important;
|
|
||||||
gap: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc .fc-toolbar-chunk:first-child {
|
|
||||||
display: flex !important;
|
|
||||||
gap: 4px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 标题金色渐变
|
|
||||||
.fc .fc-toolbar-title {
|
|
||||||
background: @gold-gradient;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 表格边框
|
|
||||||
.fc-theme-standard {
|
|
||||||
td, th {
|
|
||||||
border-color: @line-default;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 导航按钮样式
|
|
||||||
.fc .fc-toolbar .fc-button-group .fc-button,
|
|
||||||
.fc .fc-button-primary {
|
|
||||||
background-color: @gold-400 !important;
|
|
||||||
border-color: @gold-400 !important;
|
|
||||||
color: @bg-deep !important;
|
|
||||||
font-weight: 600 !important;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: @gold-500 !important;
|
|
||||||
border-color: @gold-500 !important;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:disabled):active,
|
|
||||||
&:not(:disabled).fc-button-active {
|
|
||||||
background-color: @gold-500 !important;
|
|
||||||
border-color: @gold-500 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 今天按钮样式
|
|
||||||
.fc .fc-toolbar .fc-today-button {
|
|
||||||
background-color: @gold-400 !important;
|
|
||||||
border-color: @gold-400 !important;
|
|
||||||
color: @bg-deep !important;
|
|
||||||
font-weight: 600 !important;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: @gold-500 !important;
|
|
||||||
border-color: @gold-500 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 选中状态（disabled 表示当前视图包含今天）
|
|
||||||
&:disabled {
|
|
||||||
background-color: @gold-500 !important;
|
|
||||||
border-color: @gold-500 !important;
|
|
||||||
opacity: 1 !important;
|
|
||||||
color: @bg-deep !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 星期头（周日、周一等）
|
|
||||||
.fc-col-header-cell-cushion {
|
|
||||||
color: @gold-400 !important;
|
|
||||||
font-weight: 600 !important;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 日期数字（1日、2日等）- 增强可见性
|
|
||||||
.fc-daygrid-day-number {
|
|
||||||
color: rgba(255, 255, 255, 0.9) !important;
|
|
||||||
font-weight: 600 !important;
|
|
||||||
font-size: 14px !important;
|
|
||||||
padding: 4px 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 当前月份的日期更亮
|
|
||||||
.fc-day.fc-day-future .fc-daygrid-day-number,
|
|
||||||
.fc-day.fc-day-past .fc-daygrid-day-number {
|
|
||||||
color: rgba(255, 255, 255, 0.85) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 非当前月份的日期（灰色）
|
|
||||||
.fc-day-other .fc-daygrid-day-number {
|
|
||||||
color: rgba(255, 255, 255, 0.35) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 今天高亮
|
|
||||||
.fc-daygrid-day.fc-day-today {
|
|
||||||
background-color: @today-bg !important;
|
|
||||||
border: 2px solid @gold-400 !important;
|
|
||||||
|
|
||||||
.fc-daygrid-day-number {
|
|
||||||
color: @gold-400 !important;
|
|
||||||
font-weight: 700 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 事件样式
|
|
||||||
.fc-event {
|
|
||||||
border: none;
|
|
||||||
padding: 2px 6px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.02);
|
|
||||||
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc-daygrid-event-dot {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc-daygrid-day-events {
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更多事件链接
|
|
||||||
.fc-daygrid-more-link {
|
|
||||||
color: @gold-400;
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: @gold-500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 弹出层样式
|
|
||||||
.fc-popover {
|
|
||||||
background: @bg-elevated;
|
|
||||||
border: 1px solid @line-default;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
||||||
|
|
||||||
.fc-popover-header {
|
|
||||||
background: rgba(212, 175, 55, 0.1);
|
|
||||||
color: @gold-400;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc-popover-body {
|
|
||||||
background: @bg-elevated;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 暗色模式支持 ====================
|
|
||||||
// 由于整体设计已是暗色，这里主要是对比度微调
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.fc-theme-standard {
|
|
||||||
td, th {
|
|
||||||
border-color: @line-default;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc-daygrid-day-number {
|
|
||||||
color: @text-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc-daygrid-day.fc-day-today {
|
|
||||||
background-color: @today-bg !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc-col-header-cell-cushion,
|
|
||||||
.fc-daygrid-day-number {
|
|
||||||
color: @text-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,767 +0,0 @@
|
|||||||
/*!
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
* Argon Dashboard Chakra PRO - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
|
||||||
|
|
||||||
* Designed and Coded by Simmmple & Creative Tim
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Chakra imports
|
|
||||||
import {
|
|
||||||
Badge,
|
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
Flex,
|
|
||||||
Grid,
|
|
||||||
Icon,
|
|
||||||
Progress,
|
|
||||||
Spacer,
|
|
||||||
Stack,
|
|
||||||
Stat,
|
|
||||||
StatHelpText,
|
|
||||||
StatLabel,
|
|
||||||
StatNumber,
|
|
||||||
Switch,
|
|
||||||
Text,
|
|
||||||
useColorMode,
|
|
||||||
useColorModeValue,
|
|
||||||
} from '@chakra-ui/react';
|
|
||||||
// Assets
|
|
||||||
import BackgroundCard1 from 'assets/img/BackgroundCard1.png';
|
|
||||||
import BgMusicCard from 'assets/img/BgMusicCard.png';
|
|
||||||
import BgMusicCardDark from 'assets/img/bgMusicCardDark.png';
|
|
||||||
import {
|
|
||||||
ClockIcon,
|
|
||||||
DocumentIcon,
|
|
||||||
RocketIcon,
|
|
||||||
SettingsIcon,
|
|
||||||
WalletIcon,
|
|
||||||
} from 'components/Icons/Icons';
|
|
||||||
import { AiFillBackward, AiFillForward } from 'react-icons/ai';
|
|
||||||
import { BsBatteryCharging, BsMusicNoteBeamed } from 'react-icons/bs';
|
|
||||||
// Custom components
|
|
||||||
import EventCalendar from 'components/Calendars/EventCalendar';
|
|
||||||
import Card from 'components/Card/Card';
|
|
||||||
import CardHeader from 'components/Card/CardHeader';
|
|
||||||
import LineChart from 'components/Charts/LineChart';
|
|
||||||
import IconBox from 'components/Icons/IconBox';
|
|
||||||
import { HSeparator } from 'components/Separator/Separator';
|
|
||||||
import TimelineRow from 'components/Tables/TimelineRow';
|
|
||||||
import React, { useState } from 'react';
|
|
||||||
import {
|
|
||||||
FaCheckCircle,
|
|
||||||
FaLightbulb,
|
|
||||||
FaPaypal,
|
|
||||||
FaPlay,
|
|
||||||
FaRegLightbulb,
|
|
||||||
FaShare,
|
|
||||||
FaUser,
|
|
||||||
FaWallet,
|
|
||||||
} from 'react-icons/fa';
|
|
||||||
import { RiArrowDropRightLine, RiMastercardFill } from 'react-icons/ri';
|
|
||||||
import { calendarDataWidgets } from 'variables/calendar';
|
|
||||||
import {
|
|
||||||
lineChartDataWidgets1,
|
|
||||||
lineChartDataWidgets2,
|
|
||||||
lineChartDataWidgets3,
|
|
||||||
lineChartOptionsWidgets1,
|
|
||||||
lineChartOptionsWidgets2,
|
|
||||||
lineChartOptionsWidgets3,
|
|
||||||
} from 'variables/charts';
|
|
||||||
import { timelineData } from 'variables/general';
|
|
||||||
|
|
||||||
function Widgets() {
|
|
||||||
const [toggleSwitch, setToggleSwitch] = useState(false);
|
|
||||||
const { colorMode } = useColorMode();
|
|
||||||
|
|
||||||
const textColor = useColorModeValue('gray.700', 'white');
|
|
||||||
const iconBlue = useColorModeValue('blue.500', 'white');
|
|
||||||
const secondaryIconBlue = useColorModeValue('gray.100', 'blue.500');
|
|
||||||
const iconBoxInside = useColorModeValue('white', 'blue.500');
|
|
||||||
const bgCard = useColorModeValue(
|
|
||||||
'linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)',
|
|
||||||
'navy.800'
|
|
||||||
);
|
|
||||||
const iconBoxColor = useColorModeValue(
|
|
||||||
'linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)',
|
|
||||||
'blue.500'
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Flex direction='column' pt={{ sm: '125px', lg: '75px' }}>
|
|
||||||
<Grid
|
|
||||||
templateColumns={{ sm: '1fr', md: '1fr 1fr', lg: '1fr 1fr 2fr' }}
|
|
||||||
templateRows='1fr'
|
|
||||||
gap='24px'
|
|
||||||
mb='24px'
|
|
||||||
>
|
|
||||||
<Stack direction='column' spacing='24px'>
|
|
||||||
<Card bg={bgCard}>
|
|
||||||
<Flex justify='space-between' w='100%' align='center'>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text fontSize='sm' color='#fff' fontWeight='normal' mb='2px'>
|
|
||||||
Battery Health
|
|
||||||
</Text>
|
|
||||||
<Text fontSize='lg' color='#fff' fontWeight='bold'>
|
|
||||||
99%
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<IconBox h={'45px'} w={'45px'} bg={iconBoxInside}>
|
|
||||||
<Icon
|
|
||||||
as={BsBatteryCharging}
|
|
||||||
h={'24px'}
|
|
||||||
w={'24px'}
|
|
||||||
color={iconBlue}
|
|
||||||
/>
|
|
||||||
</IconBox>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
<Card bg={bgCard}>
|
|
||||||
<Flex justify='space-between' w='100%' align='center'>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text fontSize='sm' color='#fff' fontWeight='normal' mb='2px'>
|
|
||||||
Music Volume
|
|
||||||
</Text>
|
|
||||||
<Text fontSize='lg' color='#fff' fontWeight='bold'>
|
|
||||||
15/100
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<IconBox h={'45px'} w={'45px'} bg={iconBoxInside}>
|
|
||||||
<Icon
|
|
||||||
as={BsMusicNoteBeamed}
|
|
||||||
h={'24px'}
|
|
||||||
w={'24px'}
|
|
||||||
color={iconBlue}
|
|
||||||
/>
|
|
||||||
</IconBox>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
</Stack>
|
|
||||||
<Card px='0px' maxH='230px' pb='0px'>
|
|
||||||
<CardHeader px='22px'>
|
|
||||||
<Stat me='auto'>
|
|
||||||
<StatLabel fontSize='xs' color='gray.400' fontWeight='normal'>
|
|
||||||
Income
|
|
||||||
</StatLabel>
|
|
||||||
<Flex>
|
|
||||||
<StatNumber fontSize='lg' color={textColor}>
|
|
||||||
$130,912
|
|
||||||
</StatNumber>
|
|
||||||
<StatHelpText
|
|
||||||
alignSelf='flex-end'
|
|
||||||
justifySelf='flex-end'
|
|
||||||
m='0px'
|
|
||||||
ps='4px'
|
|
||||||
color='green.400'
|
|
||||||
fontWeight='bold'
|
|
||||||
fontSize='sm'
|
|
||||||
>
|
|
||||||
+90%
|
|
||||||
</StatHelpText>
|
|
||||||
</Flex>
|
|
||||||
</Stat>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<Box w='100%'>
|
|
||||||
<LineChart
|
|
||||||
chartData={lineChartDataWidgets1}
|
|
||||||
chartOptions={lineChartOptionsWidgets1}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Card>
|
|
||||||
<Card
|
|
||||||
px='0px'
|
|
||||||
maxH='230px'
|
|
||||||
pb='0px'
|
|
||||||
gridColumn={{ md: '1 / 3', lg: 'auto' }}
|
|
||||||
>
|
|
||||||
<CardHeader px='22px'>
|
|
||||||
<Flex justify='space-between' w='100%'>
|
|
||||||
<Flex align='center'>
|
|
||||||
<IconBox h={'45px'} w={'45px'} bg='blue.500' me='16px'>
|
|
||||||
<Icon
|
|
||||||
as={FaCheckCircle}
|
|
||||||
h={'24px'}
|
|
||||||
w={'24px'}
|
|
||||||
color='white'
|
|
||||||
/>
|
|
||||||
</IconBox>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color='gray.400' fontSize='xs' fontWeight='normal'>
|
|
||||||
Tasks
|
|
||||||
</Text>
|
|
||||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
|
||||||
480
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
<Flex direction='column' minW='125px' alignSelf='flex-end'>
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='xs'>
|
|
||||||
60%
|
|
||||||
</Text>
|
|
||||||
<Progress
|
|
||||||
colorScheme='blue'
|
|
||||||
borderRadius='15px'
|
|
||||||
h='6px'
|
|
||||||
value={60}
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<Box w='100%'>
|
|
||||||
<LineChart
|
|
||||||
chartData={lineChartDataWidgets2}
|
|
||||||
chartOptions={lineChartOptionsWidgets2}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
<Grid
|
|
||||||
templateColumns={{
|
|
||||||
sm: '1fr',
|
|
||||||
md: 'repeat(2, 1fr)',
|
|
||||||
lg: 'repeat(3, 1fr)',
|
|
||||||
}}
|
|
||||||
gap='24px'
|
|
||||||
mb='24px'
|
|
||||||
>
|
|
||||||
<Card>
|
|
||||||
<CardHeader mb='16px'>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color={textColor} fontSize='lg' fontWeight='bold' mb='4px'>
|
|
||||||
Upcoming events
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.400' fontSize='sm' fontWeight='bold'>
|
|
||||||
Joined
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Flex align='center' mb='22px'>
|
|
||||||
<IconBox h={'45px'} w={'45px'} bg={secondaryIconBlue} me='16px'>
|
|
||||||
<Icon as={WalletIcon} h={'24px'} w={'24px'} color={iconBlue} />
|
|
||||||
</IconBox>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color={textColor} fontSize='sm' fontWeight='bold'>
|
|
||||||
Cyber Week
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
|
||||||
27 March 2020, at 12:30 PM
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
<Flex align='center'>
|
|
||||||
<IconBox h={'45px'} w={'45px'} bg={secondaryIconBlue} me='16px'>
|
|
||||||
<Icon as={ClockIcon} h={'24px'} w={'24px'} color={iconBlue} />
|
|
||||||
</IconBox>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color={textColor} fontSize='sm' fontWeight='bold'>
|
|
||||||
Meeting with Marry
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
|
||||||
24 March 2020, at 10:00 PM
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
<Stack direction={{ sm: 'column', md: 'row' }} spacing='24px'>
|
|
||||||
<Card p='16px' display='flex' align='center' justify='center'>
|
|
||||||
<Flex direction='column' align='center' w='100%' py='14px'>
|
|
||||||
<IconBox h={'60px'} w={'60px'} bg='blue.500'>
|
|
||||||
<Icon h={'24px'} w={'24px'} color='white' as={FaWallet} />
|
|
||||||
</IconBox>
|
|
||||||
<Flex
|
|
||||||
direction='column'
|
|
||||||
m='14px'
|
|
||||||
justify='center'
|
|
||||||
textAlign='center'
|
|
||||||
align='center'
|
|
||||||
w='100%'
|
|
||||||
>
|
|
||||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
|
||||||
Salary
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
mb='24px'
|
|
||||||
fontSize='xs'
|
|
||||||
color='gray.400'
|
|
||||||
fontWeight='semibold'
|
|
||||||
>
|
|
||||||
Belong Interactive
|
|
||||||
</Text>
|
|
||||||
<HSeparator />
|
|
||||||
</Flex>
|
|
||||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
|
||||||
+$2000
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
<Card p='16px' display='flex' align='center' justify='center'>
|
|
||||||
<Flex
|
|
||||||
direction='column'
|
|
||||||
align='center'
|
|
||||||
justify='center'
|
|
||||||
w='100%'
|
|
||||||
py='14px'
|
|
||||||
>
|
|
||||||
<IconBox h={'60px'} w={'60px'} bg='blue.500'>
|
|
||||||
<Icon h={'24px'} w={'24px'} color='white' as={FaPaypal} />
|
|
||||||
</IconBox>
|
|
||||||
<Flex
|
|
||||||
direction='column'
|
|
||||||
m='14px'
|
|
||||||
justify='center'
|
|
||||||
textAlign='center'
|
|
||||||
align='center'
|
|
||||||
w='100%'
|
|
||||||
>
|
|
||||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
|
||||||
Paypal
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
mb='24px'
|
|
||||||
fontSize='xs'
|
|
||||||
color='gray.400'
|
|
||||||
fontWeight='semibold'
|
|
||||||
>
|
|
||||||
Freelance Payment
|
|
||||||
</Text>
|
|
||||||
<HSeparator />
|
|
||||||
</Flex>
|
|
||||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
|
||||||
$455.00
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
</Stack>
|
|
||||||
<Card
|
|
||||||
backgroundImage={
|
|
||||||
colorMode === 'light'
|
|
||||||
? BackgroundCard1
|
|
||||||
: 'linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)'
|
|
||||||
}
|
|
||||||
backgroundRepeat='no-repeat'
|
|
||||||
background='cover'
|
|
||||||
bgPosition='10%'
|
|
||||||
p='16px'
|
|
||||||
h={{ sm: '220px', xl: '100%' }}
|
|
||||||
gridColumn={{ md: '1 / 3', lg: 'auto' }}
|
|
||||||
>
|
|
||||||
<Flex
|
|
||||||
direction='column'
|
|
||||||
color='white'
|
|
||||||
h='100%'
|
|
||||||
p='0px 10px 20px 10px'
|
|
||||||
w='100%'
|
|
||||||
>
|
|
||||||
<Flex justify='space-between' align='center'>
|
|
||||||
<Text fontWeight='bold'>Argon x Chakra UI</Text>
|
|
||||||
<Icon as={RiMastercardFill} w='48px' h='auto' color='gray.400' />
|
|
||||||
</Flex>
|
|
||||||
<Spacer />
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Box>
|
|
||||||
<Text fontSize='xl' letterSpacing='2px' fontWeight='bold'>
|
|
||||||
7812 2139 0823 XXXX
|
|
||||||
</Text>
|
|
||||||
</Box>
|
|
||||||
<Flex mt='14px'>
|
|
||||||
<Flex direction='column' me='34px'>
|
|
||||||
<Text fontSize='xs'>VALID THRU</Text>
|
|
||||||
<Text fontSize='xs' fontWeight='bold'>
|
|
||||||
05/24
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text fontSize='xs'>CVV</Text>
|
|
||||||
<Text fontSize='xs' fontWeight='bold'>
|
|
||||||
09X
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
<Grid
|
|
||||||
templateColumns={{
|
|
||||||
sm: '1fr',
|
|
||||||
md: '1fr 1fr',
|
|
||||||
lg: '1.5fr 1fr 1.2fr 1fr 1fr',
|
|
||||||
}}
|
|
||||||
gap='24px'
|
|
||||||
mb='24px'
|
|
||||||
>
|
|
||||||
<Card>
|
|
||||||
<CardHeader mb='24px'>
|
|
||||||
<Flex justify='space-between' w='100%' align='center'>
|
|
||||||
<Text color={textColor} fontWeight='bold' fontSize='lg'>
|
|
||||||
Full Body
|
|
||||||
</Text>
|
|
||||||
<Badge
|
|
||||||
bg={colorMode === 'light' ? 'red.100' : 'red.500'}
|
|
||||||
color={colorMode === 'light' ? 'red.500' : 'white'}
|
|
||||||
w='85px'
|
|
||||||
py='6px'
|
|
||||||
borderRadius='12px'
|
|
||||||
textAlign='center'
|
|
||||||
>
|
|
||||||
MODERATE
|
|
||||||
</Badge>
|
|
||||||
</Flex>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<Text color='gray.400' fontWeight='normal' fontSize='sm'>
|
|
||||||
What matters is the people who are sparked by it. And the people who
|
|
||||||
are liked.
|
|
||||||
</Text>
|
|
||||||
</Card>
|
|
||||||
<Card>
|
|
||||||
<CardHeader mb='22px'>
|
|
||||||
<Flex justify='space-between' align='center' w='100%'>
|
|
||||||
<Text fontSize='xs' color='gray.400' fontWeight='bold'>
|
|
||||||
{toggleSwitch ? 'ON' : 'OFF'}
|
|
||||||
</Text>
|
|
||||||
<Switch
|
|
||||||
colorScheme='blue'
|
|
||||||
onChange={() => setToggleSwitch(!toggleSwitch)}
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Icon
|
|
||||||
as={toggleSwitch ? FaLightbulb : FaRegLightbulb}
|
|
||||||
w='52px'
|
|
||||||
h='52px'
|
|
||||||
color='gray.400'
|
|
||||||
mb='16px'
|
|
||||||
/>
|
|
||||||
<Text color={textColor} fontWeight='bold'>
|
|
||||||
Lights
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
<Card px='0px' pb='0px' gridColumn={{ md: '1 / 3', lg: 'auto' }}>
|
|
||||||
<CardHeader px='22px'>
|
|
||||||
<Stat me='auto'>
|
|
||||||
<StatLabel fontSize='xs' color='gray.400' fontWeight='normal'>
|
|
||||||
Calories
|
|
||||||
</StatLabel>
|
|
||||||
<Flex>
|
|
||||||
<StatNumber fontSize='lg' color={textColor}>
|
|
||||||
187
|
|
||||||
</StatNumber>
|
|
||||||
<StatHelpText
|
|
||||||
alignSelf='flex-end'
|
|
||||||
justifySelf='flex-end'
|
|
||||||
m='0px'
|
|
||||||
ps='4px'
|
|
||||||
color='green.400'
|
|
||||||
fontWeight='bold'
|
|
||||||
fontSize='sm'
|
|
||||||
>
|
|
||||||
+5%
|
|
||||||
</StatHelpText>
|
|
||||||
</Flex>
|
|
||||||
</Stat>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<Box w='100%' maxH='100px'>
|
|
||||||
<LineChart
|
|
||||||
chartData={lineChartDataWidgets3}
|
|
||||||
chartOptions={lineChartOptionsWidgets3}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Card>
|
|
||||||
<Card>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<IconBox h={'45px'} w={'45px'} bg='blue.500' mb='24px'>
|
|
||||||
<Icon as={FaShare} h={'24px'} w={'24px'} color='white' />
|
|
||||||
</IconBox>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color={textColor} fontSize='2xl' fontWeight='bold'>
|
|
||||||
754
|
|
||||||
<Text as='span' color='gray.400' fontSize='sm' ms='2px'>
|
|
||||||
m
|
|
||||||
</Text>
|
|
||||||
</Text>
|
|
||||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
|
||||||
New York City
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
<Card>
|
|
||||||
<CardHeader mb='42px'>
|
|
||||||
<Text color='gray.400' fontSize='xs' fontWeight='normal'>
|
|
||||||
STEPS
|
|
||||||
</Text>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<Stat>
|
|
||||||
<StatNumber
|
|
||||||
color={textColor}
|
|
||||||
fontWeight='bold'
|
|
||||||
fontSize='2xl'
|
|
||||||
mb='6px'
|
|
||||||
>
|
|
||||||
11.4K
|
|
||||||
</StatNumber>
|
|
||||||
<StatHelpText
|
|
||||||
bg='green.100'
|
|
||||||
color='green'
|
|
||||||
w='fit-content'
|
|
||||||
borderRadius='12px'
|
|
||||||
fontSize='10px'
|
|
||||||
p='6px 12px'
|
|
||||||
>
|
|
||||||
+4.3%
|
|
||||||
</StatHelpText>
|
|
||||||
</Stat>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
<Grid templateColumns={{ sm: '1fr', lg: '1fr .5fr .7fr' }} gap='24px'>
|
|
||||||
<Card minH='550px'>
|
|
||||||
<CardHeader mb='6px'>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text color={textColor} fontSize='lg' fontWeight='bold' mb='6px'>
|
|
||||||
Calendar
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
|
||||||
Wednesday, 2022
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</CardHeader>
|
|
||||||
<Box position='relative' display='block' height='100%'>
|
|
||||||
<EventCalendar
|
|
||||||
initialDate='2022-10-01'
|
|
||||||
calendarData={calendarDataWidgets}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Card>
|
|
||||||
<Stack direction='column' spacing='24px'>
|
|
||||||
<Card>
|
|
||||||
<Text fontSize='lg' text={textColor} fontWeight='bold'>
|
|
||||||
Categories
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<Stack direction='column' spacing='24px' w='100%' pt='28px'>
|
|
||||||
<Flex align='center' w='100%'>
|
|
||||||
<Flex align='center'>
|
|
||||||
<IconBox h={'40px'} w={'40px'} bg={iconBoxColor} me='18px'>
|
|
||||||
<RocketIcon h={'20px'} w={'20px'} color='white' />
|
|
||||||
</IconBox>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text fontSize='sm' fontWeight='bold' color={textColor}>
|
|
||||||
Devices
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.400' fontSize='xs'>
|
|
||||||
250 in stock,{' '}
|
|
||||||
<Text as='span' fontWeight='bold'>
|
|
||||||
346+ sold
|
|
||||||
</Text>
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
<Spacer />
|
|
||||||
<Button variant='no-effects' px='0px'>
|
|
||||||
<Icon
|
|
||||||
as={RiArrowDropRightLine}
|
|
||||||
color='gray.400'
|
|
||||||
w='30px'
|
|
||||||
h='30px'
|
|
||||||
cursor='pointer'
|
|
||||||
transition='all .25s ease'
|
|
||||||
_hover={{ transform: 'translateX(25%)' }}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
|
||||||
<Flex align='center' w='100%'>
|
|
||||||
<Flex align='center'>
|
|
||||||
<IconBox h={'40px'} w={'40px'} bg={iconBoxColor} me='18px'>
|
|
||||||
<SettingsIcon h={'20px'} w={'20px'} color='white' />
|
|
||||||
</IconBox>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text fontSize='sm' fontWeight='bold' color={textColor}>
|
|
||||||
Tickets
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.400' fontSize='xs'>
|
|
||||||
123 closed,{' '}
|
|
||||||
<Text as='span' fontWeight='bold'>
|
|
||||||
15 open
|
|
||||||
</Text>
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
<Spacer />
|
|
||||||
<Button variant='no-effects' px='0px'>
|
|
||||||
<Icon
|
|
||||||
as={RiArrowDropRightLine}
|
|
||||||
color='gray.400'
|
|
||||||
w='30px'
|
|
||||||
h='30px'
|
|
||||||
cursor='pointer'
|
|
||||||
transition='all .25s ease'
|
|
||||||
_hover={{ transform: 'translateX(25%)' }}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
|
||||||
<Flex align='center' w='100%'>
|
|
||||||
<Flex align='center'>
|
|
||||||
<IconBox h={'40px'} w={'40px'} bg={iconBoxColor} me='18px'>
|
|
||||||
<DocumentIcon h={'20px'} w={'20px'} color='white' />
|
|
||||||
</IconBox>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text fontSize='sm' fontWeight='bold' color={textColor}>
|
|
||||||
Error logs
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.400' fontSize='xs'>
|
|
||||||
1 is active,{' '}
|
|
||||||
<Text as='span' fontWeight='bold'>
|
|
||||||
40 closed
|
|
||||||
</Text>
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
<Spacer />
|
|
||||||
<Button variant='no-effects' px='0px'>
|
|
||||||
<Icon
|
|
||||||
as={RiArrowDropRightLine}
|
|
||||||
color='gray.400'
|
|
||||||
w='30px'
|
|
||||||
h='30px'
|
|
||||||
cursor='pointer'
|
|
||||||
transition='all .25s ease'
|
|
||||||
_hover={{ transform: 'translateX(25%)' }}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
|
||||||
<Flex align='center' w='100%'>
|
|
||||||
<Flex align='center'>
|
|
||||||
<IconBox h={'40px'} w={'40px'} bg={iconBoxColor} me='18px'>
|
|
||||||
<Icon as={FaUser} h={'20px'} w={'20px'} color='white' />
|
|
||||||
</IconBox>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text fontSize='sm' fontWeight='bold' color={textColor}>
|
|
||||||
Happy Users
|
|
||||||
</Text>
|
|
||||||
<Text color='gray.400' fontSize='xs'>
|
|
||||||
<Text as='span' fontWeight='bold'>
|
|
||||||
+430
|
|
||||||
</Text>
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
<Spacer />
|
|
||||||
<Button variant='no-effects' px='0px'>
|
|
||||||
<Icon
|
|
||||||
as={RiArrowDropRightLine}
|
|
||||||
color='gray.400'
|
|
||||||
w='30px'
|
|
||||||
h='30px'
|
|
||||||
cursor='pointer'
|
|
||||||
transition='all .25s ease'
|
|
||||||
_hover={{ transform: 'translateX(25%)' }}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
|
||||||
</Stack>
|
|
||||||
</Card>
|
|
||||||
<Card
|
|
||||||
bgImage={colorMode === 'light' ? BgMusicCard : BgMusicCardDark}
|
|
||||||
bgRepeat='no-repeat'
|
|
||||||
>
|
|
||||||
<Flex direction='column' w='100%' mb='60px'>
|
|
||||||
<Text color='#fff' fontWeight='bold' fontSize='lg'>
|
|
||||||
Some Kind of Blues
|
|
||||||
</Text>
|
|
||||||
<Text color='#fff' fontWeight='normal' fontSize='sm'>
|
|
||||||
Deftones
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Stack direction='row' spacing='18px'>
|
|
||||||
<Button
|
|
||||||
variant='outline'
|
|
||||||
colorScheme='whiteAlpha'
|
|
||||||
borderRadius='50px'
|
|
||||||
w='45px'
|
|
||||||
h='45px'
|
|
||||||
>
|
|
||||||
<Icon as={AiFillBackward} color='#fff' w='26px' h='26px' />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant='outline'
|
|
||||||
colorScheme='whiteAlpha'
|
|
||||||
borderRadius='50px'
|
|
||||||
w='45px'
|
|
||||||
h='45px'
|
|
||||||
>
|
|
||||||
<Icon as={FaPlay} color='#fff' w='18px' h='18px' />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant='outline'
|
|
||||||
colorScheme='whiteAlpha'
|
|
||||||
borderRadius='50px'
|
|
||||||
w='45px'
|
|
||||||
h='45px'
|
|
||||||
>
|
|
||||||
<Icon as={AiFillForward} color='#fff' w='26px' h='26px' />
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</Card>
|
|
||||||
</Stack>
|
|
||||||
<Card pb='0px'>
|
|
||||||
<CardHeader mb='34px'>
|
|
||||||
<Flex direction='column'>
|
|
||||||
<Text
|
|
||||||
fontSize='lg'
|
|
||||||
color={textColor}
|
|
||||||
fontWeight='bold'
|
|
||||||
pb='.5rem'
|
|
||||||
>
|
|
||||||
Orders overview
|
|
||||||
</Text>
|
|
||||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
|
||||||
<Text fontWeight='bold' as='span' color='green.500'>
|
|
||||||
+30%
|
|
||||||
</Text>{' '}
|
|
||||||
this month.
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</CardHeader>
|
|
||||||
<Flex direction='column' ms='8px' position='relative'>
|
|
||||||
{timelineData.map((row, index, arr) => {
|
|
||||||
return (
|
|
||||||
<TimelineRow
|
|
||||||
logo={row.logo}
|
|
||||||
title={row.title}
|
|
||||||
date={row.date}
|
|
||||||
color={row.color}
|
|
||||||
index={index}
|
|
||||||
arrLength={arr.length}
|
|
||||||
key={index}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Flex>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Widgets;
|
|
||||||
@@ -1,160 +0,0 @@
|
|||||||
// 市场概况卡片 - 紧凑版（上证/深证/总市值/成交额）
|
|
||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import { Box, Text, VStack, HStack, SimpleGrid } from '@chakra-ui/react';
|
|
||||||
import { THEME } from '../../constants';
|
|
||||||
import { getApiBase } from '@/utils/apiConfig';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 格式化大数字（万亿/亿）
|
|
||||||
*/
|
|
||||||
const formatLargeNumber = (num) => {
|
|
||||||
if (!num && num !== 0) return '--';
|
|
||||||
const trillion = 1000000000000; // 万亿
|
|
||||||
const billion = 100000000; // 亿
|
|
||||||
|
|
||||||
if (num >= trillion) {
|
|
||||||
return `${(num / trillion).toFixed(1)}万亿`;
|
|
||||||
} else if (num >= billion) {
|
|
||||||
return `${(num / billion).toFixed(1)}亿`;
|
|
||||||
}
|
|
||||||
return num.toLocaleString();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 单个指数/统计项
|
|
||||||
*/
|
|
||||||
const SummaryItem = ({ label, value, change, changeAmount, subValue, isIndex = true }) => {
|
|
||||||
const isUp = change > 0;
|
|
||||||
const isFlat = change === 0;
|
|
||||||
const changeColor = isFlat
|
|
||||||
? 'rgba(255, 255, 255, 0.6)'
|
|
||||||
: isUp ? THEME.status.up : THEME.status.down;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<VStack align="flex-start" spacing={0.5} py={2}>
|
|
||||||
{/* 标签 */}
|
|
||||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.5)">
|
|
||||||
{label}
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
{/* 主数值 */}
|
|
||||||
<Text
|
|
||||||
fontSize="lg"
|
|
||||||
fontWeight="bold"
|
|
||||||
color="rgba(255, 255, 255, 0.95)"
|
|
||||||
lineHeight="1.2"
|
|
||||||
>
|
|
||||||
{typeof value === 'number' ? value.toFixed(2) : value}
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
{/* 涨跌信息（仅指数显示） */}
|
|
||||||
{isIndex && change !== undefined ? (
|
|
||||||
<Text fontSize="xs" color={changeColor}>
|
|
||||||
{changeAmount !== undefined && (
|
|
||||||
<Text as="span" mr={1}>
|
|
||||||
{isUp ? '+' : ''}{typeof changeAmount === 'number' ? changeAmount.toFixed(2) : changeAmount}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
{isUp ? '+' : ''}{change.toFixed(2)}%
|
|
||||||
</Text>
|
|
||||||
) : (
|
|
||||||
// 非指数项显示副标签
|
|
||||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.4)">
|
|
||||||
{subValue || label}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</VStack>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 市场概况卡片
|
|
||||||
*/
|
|
||||||
const MarketSummaryCard = () => {
|
|
||||||
const [marketData, setMarketData] = useState({
|
|
||||||
shanghai: { value: 3391.88, change: 0.52, changeAmount: 17.55 },
|
|
||||||
shenzhen: { value: 10723.49, change: 0.68, changeAmount: 72.38 },
|
|
||||||
totalMarketCap: 105.6 * 1000000000000, // 105.6万亿
|
|
||||||
turnover: 1.0 * 1000000000000, // 1.0万亿
|
|
||||||
});
|
|
||||||
|
|
||||||
// 获取实时数据
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchMarketData = async () => {
|
|
||||||
try {
|
|
||||||
const base = getApiBase();
|
|
||||||
const response = await fetch(`${base}/api/market/summary`, {
|
|
||||||
credentials: 'include',
|
|
||||||
});
|
|
||||||
if (response.ok) {
|
|
||||||
const data = await response.json();
|
|
||||||
if (data.success && data.data) {
|
|
||||||
setMarketData(prev => ({
|
|
||||||
...prev,
|
|
||||||
...data.data,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
// 使用默认数据
|
|
||||||
console.debug('Using default market data');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchMarketData();
|
|
||||||
// 每分钟更新一次
|
|
||||||
const interval = setInterval(fetchMarketData, 60000);
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
bg="rgba(26, 26, 46, 0.6)"
|
|
||||||
borderRadius="lg"
|
|
||||||
px={3}
|
|
||||||
py={2}
|
|
||||||
border="1px solid"
|
|
||||||
borderColor="rgba(212, 175, 55, 0.15)"
|
|
||||||
backdropFilter="blur(8px)"
|
|
||||||
minW="200px"
|
|
||||||
>
|
|
||||||
<SimpleGrid columns={2} spacing={0}>
|
|
||||||
{/* 上证 */}
|
|
||||||
<SummaryItem
|
|
||||||
label="上证"
|
|
||||||
value={marketData.shanghai.value}
|
|
||||||
change={marketData.shanghai.change}
|
|
||||||
changeAmount={marketData.shanghai.changeAmount}
|
|
||||||
isIndex={true}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 深证 */}
|
|
||||||
<SummaryItem
|
|
||||||
label="深证"
|
|
||||||
value={marketData.shenzhen.value}
|
|
||||||
change={marketData.shenzhen.change}
|
|
||||||
changeAmount={marketData.shenzhen.changeAmount}
|
|
||||||
isIndex={true}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 总市值 */}
|
|
||||||
<SummaryItem
|
|
||||||
label="总市值"
|
|
||||||
value={formatLargeNumber(marketData.totalMarketCap)}
|
|
||||||
subValue={formatLargeNumber(marketData.totalMarketCap)}
|
|
||||||
isIndex={false}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 成交额 */}
|
|
||||||
<SummaryItem
|
|
||||||
label="成交额"
|
|
||||||
value={formatLargeNumber(marketData.turnover)}
|
|
||||||
subValue="成交万亿"
|
|
||||||
isIndex={false}
|
|
||||||
/>
|
|
||||||
</SimpleGrid>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MarketSummaryCard;
|
|
||||||
@@ -8,10 +8,7 @@ export { default as StatItem } from './StatItem';
|
|||||||
export { default as RiseFallChart } from './RiseFallChart';
|
export { default as RiseFallChart } from './RiseFallChart';
|
||||||
export { default as HotSectorsRanking } from './HotSectorsRanking';
|
export { default as HotSectorsRanking } from './HotSectorsRanking';
|
||||||
|
|
||||||
// 新增：K线指数卡片和涨跌分布进度条
|
// K线指数卡片和涨跌分布进度条
|
||||||
export { default as IndexKLineCard } from './IndexKLineCard';
|
export { default as IndexKLineCard } from './IndexKLineCard';
|
||||||
export { default as RiseFallProgressBar } from './RiseFallProgressBar';
|
export { default as RiseFallProgressBar } from './RiseFallProgressBar';
|
||||||
export { default as GemIndexCard } from './GemIndexCard';
|
export { default as GemIndexCard } from './GemIndexCard';
|
||||||
|
|
||||||
// 市场概况卡片（上证/深证/总市值/成交额）
|
|
||||||
export { default as MarketSummaryCard } from './MarketSummaryCard';
|
|
||||||
|
|||||||
Reference in New Issue
Block a user