115 lines
3.6 KiB
JavaScript
115 lines
3.6 KiB
JavaScript
// src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
|
||
// 纵向分栏模式布局组件
|
||
|
||
import React, { useState } from 'react';
|
||
import { Box, IconButton, Tooltip, VStack, Flex } from '@chakra-ui/react';
|
||
import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
|
||
import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
|
||
import EventDetailScrollPanel from './EventDetailScrollPanel';
|
||
|
||
/**
|
||
* 纵向分栏模式布局
|
||
* 支持两种展示模式：
|
||
* - detail（默认）：左侧事件列表 1fr | 右侧详情 2fr
|
||
* - list：左侧事件列表 7fr | 右侧详情 300px
|
||
*
|
||
* @param {string} display - CSS display 属性（用于显示/隐藏组件）
|
||
* @param {Array} events - 当前页的事件列表（分页数据）
|
||
* @param {Object} selectedEvent - 当前选中的事件
|
||
* @param {Function} onEventSelect - 事件选择回调
|
||
* @param {Object} eventFollowStatus - 事件关注状态
|
||
* @param {Function} onToggleFollow - 关注按钮回调
|
||
* @param {Function} getTimelineBoxStyle - 时间线样式获取函数
|
||
* @param {string} borderColor - 边框颜色
|
||
*/
|
||
const VerticalModeLayout = ({
|
||
display = 'flex',
|
||
events,
|
||
selectedEvent,
|
||
onEventSelect,
|
||
eventFollowStatus,
|
||
onToggleFollow,
|
||
getTimelineBoxStyle,
|
||
borderColor,
|
||
}) => {
|
||
// 布局模式状态：'detail' = 聚焦详情（默认），'list' = 聚焦列表
|
||
const [layoutMode, setLayoutMode] = useState('list');
|
||
|
||
// 切换布局模式
|
||
const toggleLayoutMode = () => {
|
||
setLayoutMode(prev => prev === 'detail' ? 'list' : 'detail');
|
||
};
|
||
|
||
// 根据模式计算 flex 比例
|
||
const leftFlex = layoutMode === 'detail' ? '4' : '6';
|
||
const rightFlex = layoutMode === 'detail' ? '6' : '4';
|
||
|
||
return (
|
||
<Flex
|
||
display={display}
|
||
gap={6}
|
||
position="relative"
|
||
transition="all 0.3s ease-in-out"
|
||
>
|
||
{/* 左侧：事件列表 - 使用分页模式 */}
|
||
<Box flex={leftFlex} minWidth={0}>
|
||
{/* 事件列表 */}
|
||
<VStack
|
||
spacing={2}
|
||
align="stretch"
|
||
p={2}
|
||
>
|
||
{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}
|
||
indicatorSize={layoutMode === 'detail' ? 'default' : 'comfortable'}
|
||
/>
|
||
))}
|
||
</VStack>
|
||
</Box>
|
||
|
||
{/* 右侧：事件详情 */}
|
||
<Box
|
||
flex={rightFlex}
|
||
minHeight={0}
|
||
position="relative"
|
||
overflow="hidden"
|
||
>
|
||
{/* 布局切换按钮 */}
|
||
<Tooltip
|
||
label={layoutMode === 'detail' ? '展开事件列表' : '展开详情面板'}
|
||
placement="left"
|
||
>
|
||
<IconButton
|
||
position="absolute"
|
||
top={2}
|
||
right={2}
|
||
zIndex={9999}
|
||
size="md"
|
||
icon={layoutMode === 'detail' ? <ViewOffIcon /> : <ViewIcon />}
|
||
onClick={toggleLayoutMode}
|
||
aria-label="切换布局模式"
|
||
colorScheme="blue"
|
||
variant="solid"
|
||
/>
|
||
</Tooltip>
|
||
|
||
{/* 详情面板 */}
|
||
<EventDetailScrollPanel
|
||
selectedEvent={selectedEvent}
|
||
/>
|
||
</Box>
|
||
</Flex>
|
||
);
|
||
};
|
||
|
||
export default VerticalModeLayout;
|