refactor(HotSectors): 热门板块从仪表盘移至全局工具栏
- WatchSidebar 展开状态添加热门板块模块 - MarketOverview 移除热门板块,布局从 4 列改为 3 列 - 避免热门板块在页面和工具栏重复显示 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,19 +1,18 @@
|
|||||||
// 市场概况组件 - 顶部横条(与事件中心头部保持一致)
|
// 市场概况组件 - 顶部横条(与事件中心头部保持一致)
|
||||||
// 布局:上证指数 | 深证成指 | 创业板指+涨跌分布 | 热门板块
|
// 布局:上证指数 | 深证成指 | 创业板指+涨跌分布
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Box, SimpleGrid } from '@chakra-ui/react';
|
import { Box, SimpleGrid } from '@chakra-ui/react';
|
||||||
import {
|
import {
|
||||||
IndexKLineCard,
|
IndexKLineCard,
|
||||||
GemIndexCard,
|
GemIndexCard,
|
||||||
HotSectorsRanking,
|
|
||||||
} from './atoms';
|
} from './atoms';
|
||||||
|
|
||||||
const MarketOverview = ({ marketStats = {} }) => {
|
const MarketOverview = ({ marketStats = {} }) => {
|
||||||
return (
|
return (
|
||||||
<Box borderRadius="xl">
|
<Box borderRadius="xl">
|
||||||
{/* 4列网格布局:上证指数 | 深证成指 | 创业板指+涨跌 | 热门板块 */}
|
{/* 3列网格布局:上证指数 | 深证成指 | 创业板指+涨跌 */}
|
||||||
<SimpleGrid
|
<SimpleGrid
|
||||||
columns={{ base: 2, md: 4 }}
|
columns={{ base: 2, md: 3 }}
|
||||||
spacing={3}
|
spacing={3}
|
||||||
>
|
>
|
||||||
{/* 上证指数 - K线卡片 */}
|
{/* 上证指数 - K线卡片 */}
|
||||||
@@ -36,12 +35,6 @@ const MarketOverview = ({ marketStats = {} }) => {
|
|||||||
fallCount={marketStats.fallCount || 2034}
|
fallCount={marketStats.fallCount || 2034}
|
||||||
flatCount={marketStats.flatCount || 312}
|
flatCount={marketStats.flatCount || 312}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 热门板块排行 */}
|
|
||||||
<HotSectorsRanking
|
|
||||||
sectors={marketStats.hotSectors || []}
|
|
||||||
title="热门板块"
|
|
||||||
/>
|
|
||||||
</SimpleGrid>
|
</SimpleGrid>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,8 +1,9 @@
|
|||||||
// 右侧边栏 - 关注股票和关注事件(两个独立模块)
|
// 右侧边栏 - 关注股票、关注事件、热门板块(三个独立模块)
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { VStack } from '@chakra-ui/react';
|
import { VStack } from '@chakra-ui/react';
|
||||||
import GlassCard from '@components/GlassCard';
|
import GlassCard from '@components/GlassCard';
|
||||||
import { WatchlistPanel, FollowingEventsPanel } from './components';
|
import { WatchlistPanel, FollowingEventsPanel } from './components';
|
||||||
|
import HotSectorsRanking from '@views/Profile/components/MarketDashboard/components/atoms/HotSectorsRanking';
|
||||||
|
|
||||||
const WatchSidebar = ({
|
const WatchSidebar = ({
|
||||||
watchlist = [],
|
watchlist = [],
|
||||||
@@ -51,6 +52,16 @@ const WatchSidebar = ({
|
|||||||
onUnfollow={onUnfollow}
|
onUnfollow={onUnfollow}
|
||||||
/>
|
/>
|
||||||
</GlassCard>
|
</GlassCard>
|
||||||
|
|
||||||
|
{/* 热门板块 - 独立模块 */}
|
||||||
|
<GlassCard
|
||||||
|
variant="transparent"
|
||||||
|
rounded="xl"
|
||||||
|
padding="sm"
|
||||||
|
hoverable={false}
|
||||||
|
>
|
||||||
|
<HotSectorsRanking title="热门板块" />
|
||||||
|
</GlassCard>
|
||||||
</VStack>
|
</VStack>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user