故事详情排版修改
This commit is contained in:
jiangh277
@@ -1,24 +1,24 @@
|
||||
// src/pages/story/components/TimelineItemDrawer.tsx
|
||||
import TimelineImage from '@/components/TimelineImage';
|
||||
import AddTimeLineItemModal from '@/pages/story/components/AddTimeLineItemModal';
|
||||
import SubTimeLineItemModal from '@/pages/story/components/SubTimeLineItemModal';
|
||||
import { StoryItem } from '@/pages/story/data';
|
||||
import { queryStoryItemImages } from '@/pages/story/service';
|
||||
import { EditOutlined, PlusCircleOutlined } from '@ant-design/icons';
|
||||
import { useRequest } from '@umijs/max';
|
||||
import { Button, Drawer, Space } from 'antd';
|
||||
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
|
||||
import { useIntl, useRequest } from '@umijs/max';
|
||||
import { Button, Divider, Drawer, Popconfirm, Space } from 'antd';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
interface Props {
|
||||
storyItem: StoryItem;
|
||||
open: boolean;
|
||||
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
handleDelete: () => void;
|
||||
handOption: (item: StoryItem, option: 'add' | 'edit' | 'addSubItem' | 'editSubItem') => void;
|
||||
}
|
||||
|
||||
const TimelineItemDrawer = (props: Props) => {
|
||||
const { storyItem, open, setOpen } = props;
|
||||
const [editModalVisible, setEditModalVisible] = React.useState(false);
|
||||
const [openAddSubItemModal, setOpenAddSubItemModal] = React.useState(false);
|
||||
const [openEditMainItemModal, setOpenEditMainItemModal] = React.useState(false);
|
||||
const TimelineItemDrawer: React.FC<Props> = (props) => {
|
||||
const { storyItem, open, setOpen, handleDelete, handOption } = props;
|
||||
const intl = useIntl();
|
||||
|
||||
const { data: imagesList, run } = useRequest(
|
||||
async (itemId) => {
|
||||
return await queryStoryItemImages(itemId);
|
||||
@@ -27,107 +27,144 @@ const TimelineItemDrawer = (props: Props) => {
|
||||
manual: true,
|
||||
},
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
run(storyItem.instanceId);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const closeDrawer = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
const handleEditMainItem = (updatedItem: any) => {
|
||||
const mergedEvent = {
|
||||
...storyItem,
|
||||
...updatedItem,
|
||||
};
|
||||
setOpenEditMainItemModal(false);
|
||||
};
|
||||
const handleAddSubItem = () => {
|
||||
setOpenAddSubItemModal(false);
|
||||
|
||||
// 格式化日期显示
|
||||
const formatDate = (dateString: string) => {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* 主时间点详情抽屉 */}
|
||||
<Drawer
|
||||
width={1000}
|
||||
width={800}
|
||||
placement="right"
|
||||
onClose={closeDrawer}
|
||||
open={open}
|
||||
title={storyItem.title}
|
||||
zIndex={1000}
|
||||
title={
|
||||
<div>
|
||||
<h2 style={{ margin: 0 }}>{storyItem.title}</h2>
|
||||
<div style={{ fontSize: '14px', color: '#888', marginTop: '4px' }}>
|
||||
{storyItem.storyItemTime} {storyItem.location ? `于${storyItem.location}` : ''}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
footer={
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<Space>
|
||||
<Button
|
||||
icon={<PlusCircleOutlined />}
|
||||
type="primary"
|
||||
onClick={() => setOpenAddSubItemModal(true)}
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => {
|
||||
return handOption(storyItem, 'edit');
|
||||
}}
|
||||
>
|
||||
添加子时间点
|
||||
</Button>
|
||||
<Button icon={<EditOutlined />} onClick={() => setEditModalVisible(true)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title={intl.formatMessage({ id: 'story.deleteConfirm' })}
|
||||
description={intl.formatMessage({ id: 'story.deleteConfirmDescription' })}
|
||||
onConfirm={(e) => {
|
||||
e?.stopPropagation();
|
||||
handleDelete();
|
||||
}}
|
||||
okText={intl.formatMessage({ id: 'story.yes' })}
|
||||
cancelText={intl.formatMessage({ id: 'story.no' })}
|
||||
>
|
||||
<Button
|
||||
icon={<DeleteOutlined />}
|
||||
danger
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
aria-label={intl.formatMessage({ id: 'story.delete' })}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
<Button onClick={closeDrawer}>关闭</Button>
|
||||
</Space>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<p>
|
||||
<strong>描述：</strong> {storyItem.description}
|
||||
</p>
|
||||
<p>
|
||||
<strong>日期：</strong> {storyItem.storyItemTime}
|
||||
</p>
|
||||
<p>
|
||||
<strong>位置：</strong> {storyItem.location}
|
||||
</p>
|
||||
{/* 封面图 */}
|
||||
{storyItem.coverInstanceId && (
|
||||
<>
|
||||
<p>
|
||||
<strong>封面图：</strong>
|
||||
</p>
|
||||
<TimelineImage
|
||||
title={storyItem.title + 'cover'}
|
||||
imageInstanceId={storyItem.coverInstanceId}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<div style={{ padding: '0 24px' }}>
|
||||
<div style={{ marginBottom: '24px' }}>
|
||||
<h3>描述</h3>
|
||||
<p style={{ fontSize: '16px', lineHeight: '1.6' }}>{storyItem.description}</p>
|
||||
</div>
|
||||
|
||||
{/* 时刻图库 */}
|
||||
{imagesList && imagesList.length > 0 && (
|
||||
<>
|
||||
<p>
|
||||
<strong>时刻图库：</strong>
|
||||
</p>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', marginBottom: '20px' }}>
|
||||
{imagesList.map((imageInstanceId, index) => (
|
||||
<TimelineImage
|
||||
key={imageInstanceId + index}
|
||||
title={imageInstanceId}
|
||||
imageInstanceId={imageInstanceId}
|
||||
/>
|
||||
))}
|
||||
<Divider />
|
||||
|
||||
{/* 时刻图库 */}
|
||||
{imagesList && imagesList.length > 0 && (
|
||||
<div style={{ marginBottom: '24px' }}>
|
||||
<h3>时刻图库</h3>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
|
||||
gap: '16px',
|
||||
marginTop: '16px',
|
||||
}}
|
||||
>
|
||||
{imagesList.map((imageInstanceId, index) => (
|
||||
<div
|
||||
key={imageInstanceId + index}
|
||||
style={{
|
||||
borderRadius: '8px',
|
||||
overflow: 'hidden',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
||||
aspectRatio: '1/1',
|
||||
}}
|
||||
>
|
||||
<TimelineImage
|
||||
title={imageInstanceId}
|
||||
imageInstanceId={imageInstanceId}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
)}
|
||||
<Divider />
|
||||
|
||||
{/* 添加子时间点模态框 */}
|
||||
<AddTimeLineItemModal
|
||||
visible={openAddSubItemModal}
|
||||
onOk={handleAddSubItem}
|
||||
onCancel={() => setOpenAddSubItemModal(false)}
|
||||
lineId={storyItem.storyInstanceId}
|
||||
storyItemId={storyItem.instanceId}
|
||||
/>
|
||||
|
||||
{/* 编辑主时间点模态框 */}
|
||||
<SubTimeLineItemModal
|
||||
visible={openEditMainItemModal}
|
||||
onOk={handleEditMainItem}
|
||||
onCancel={() => setOpenEditMainItemModal(false)}
|
||||
initialValues={storyItem}
|
||||
/>
|
||||
{/* 创建和更新信息 */}
|
||||
<div style={{ marginBottom: '24px' }}>
|
||||
<h3>记录信息</h3>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', marginTop: '16px' }}>
|
||||
<div style={{ flex: '1', minWidth: '200px' }}>
|
||||
<div style={{ color: '#888', marginBottom: '4px' }}>创建时间</div>
|
||||
<div style={{ fontSize: '16px' }}>{formatDate(storyItem.createTime)}</div>
|
||||
</div>
|
||||
<div style={{ flex: '1', minWidth: '200px' }}>
|
||||
<div style={{ color: '#888', marginBottom: '4px' }}>更新时间</div>
|
||||
<div style={{ fontSize: '16px' }}>{formatDate(storyItem.updateTime)}</div>
|
||||
</div>
|
||||
<div style={{ flex: '1', minWidth: '200px' }}>
|
||||
<div style={{ color: '#888', marginBottom: '4px' }}>更新人</div>
|
||||
<div style={{ fontSize: '16px' }}>系统用户</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user