135 lines
4.4 KiB
JavaScript
135 lines
4.4 KiB
JavaScript
// src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
|
||
// 纵向分栏模式布局组件
|
||
|
||
import React, { useState } from 'react';
|
||
import { Grid, GridItem, IconButton, Tooltip, VStack } from '@chakra-ui/react';
|
||
import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
|
||
import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
|
||
import EventDetailScrollPanel from './EventDetailScrollPanel';
|
||
|
||
/**
|
||
* 纵向分栏模式布局
|
||
* 支持两种展示模式：
|
||
* - detail（默认）：左侧事件列表 1fr | 右侧详情 2fr
|
||
* - list：左侧事件列表 3fr | 右侧详情 150px
|
||
*
|
||
* 左侧使用分页模式（不使用虚拟滚动），右侧支持布局切换
|
||
*
|
||
* @param {Array} events - 当前页的事件列表（分页数据）
|
||
* @param {Object} selectedEvent - 当前选中的事件
|
||
* @param {Function} onEventSelect - 事件选择回调
|
||
* @param {Object} eventFollowStatus - 事件关注状态
|
||
* @param {Function} onToggleFollow - 关注按钮回调
|
||
* @param {Function} getTimelineBoxStyle - 时间线样式获取函数
|
||
* @param {string} borderColor - 边框颜色
|
||
* @param {string} scrollbarTrackBg - 滚动条轨道背景色
|
||
* @param {string} scrollbarThumbBg - 滚动条滑块背景色
|
||
* @param {string} scrollbarThumbHoverBg - 滚动条滑块悬浮背景色
|
||
*/
|
||
const VerticalModeLayout = ({
|
||
events,
|
||
selectedEvent,
|
||
onEventSelect,
|
||
eventFollowStatus,
|
||
onToggleFollow,
|
||
getTimelineBoxStyle,
|
||
borderColor,
|
||
scrollbarTrackBg,
|
||
scrollbarThumbBg,
|
||
scrollbarThumbHoverBg,
|
||
}) => {
|
||
// 布局模式状态：'detail' = 聚焦详情（默认），'list' = 聚焦列表
|
||
const [layoutMode, setLayoutMode] = useState('detail');
|
||
|
||
// 切换布局模式
|
||
const toggleLayoutMode = () => {
|
||
setLayoutMode(prev => prev === 'detail' ? 'list' : 'detail');
|
||
};
|
||
|
||
// 根据模式计算 Grid 的 templateColumns
|
||
const gridTemplateColumns = layoutMode === 'detail' ? '1fr 2fr' : '7fr 300px';
|
||
|
||
return (
|
||
<Grid
|
||
templateColumns={gridTemplateColumns}
|
||
gap={6}
|
||
h="800px"
|
||
position="relative"
|
||
transition="grid-template-columns 0.3s ease-in-out"
|
||
>
|
||
{/* 左侧：事件列表 - 使用分页模式 */}
|
||
<GridItem h="100%">
|
||
<VStack
|
||
spacing={3}
|
||
align="stretch"
|
||
h="100%"
|
||
overflowY="auto"
|
||
p={2}
|
||
sx={{
|
||
'&::-webkit-scrollbar': {
|
||
width: '3px',
|
||
},
|
||
'&::-webkit-scrollbar-track': {
|
||
background: scrollbarTrackBg,
|
||
borderRadius: '10px',
|
||
},
|
||
'&::-webkit-scrollbar-thumb': {
|
||
background: scrollbarThumbBg,
|
||
borderRadius: '10px',
|
||
},
|
||
'&::-webkit-scrollbar-thumb:hover': {
|
||
background: scrollbarThumbHoverBg,
|
||
},
|
||
}}
|
||
>
|
||
{events.map((event) => (
|
||
<HorizontalDynamicNewsEventCard
|
||
key={event.id}
|
||
event={event}
|
||
isSelected={selectedEvent?.id === event.id}
|
||
onEventClick={() => onEventSelect(event)}
|
||
isFollowing={eventFollowStatus[event.id]?.isFollowing}
|
||
followerCount={eventFollowStatus[event.id]?.followerCount}
|
||
onToggleFollow={onToggleFollow}
|
||
timelineStyle={getTimelineBoxStyle()}
|
||
borderColor={borderColor}
|
||
/>
|
||
))}
|
||
</VStack>
|
||
</GridItem>
|
||
|
||
{/* 右侧：事件详情 (66.7%) */}
|
||
<GridItem h="100%" position="relative">
|
||
{/* 布局切换按钮 */}
|
||
<Tooltip
|
||
label={layoutMode === 'detail' ? '展开事件列表' : '展开详情面板'}
|
||
placement="left"
|
||
>
|
||
<IconButton
|
||
position="absolute"
|
||
top={2}
|
||
right={2}
|
||
zIndex={10}
|
||
size="sm"
|
||
icon={layoutMode === 'detail' ? <ViewOffIcon /> : <ViewIcon />}
|
||
onClick={toggleLayoutMode}
|
||
aria-label="切换布局模式"
|
||
colorScheme="blue"
|
||
variant="ghost"
|
||
/>
|
||
</Tooltip>
|
||
|
||
{/* 详情面板 */}
|
||
<EventDetailScrollPanel
|
||
selectedEvent={selectedEvent}
|
||
scrollbarTrackBg={scrollbarTrackBg}
|
||
scrollbarThumbBg={scrollbarThumbBg}
|
||
scrollbarThumbHoverBg={scrollbarThumbHoverBg}
|
||
/>
|
||
</GridItem>
|
||
</Grid>
|
||
);
|
||
};
|
||
|
||
export default VerticalModeLayout;
|