Story排版修改

src/pages/story/components/TimelineItemDrawer.tsx

@@ -0,0 +1,139 @@
+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 React, { useEffect } from 'react';
+
+interface Props {
+  storyItem: StoryItem;
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+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 { data: imagesList, run } = useRequest(
+    async (itemId) => {
+      return await queryStoryItemImages(itemId);
+    },
+    {
+      manual: true,
+    },
+  );
+  useEffect(() => {
+    if (open) {
+      console.log(storyItem);
+      run(storyItem.instanceId);
+    }
+  }, [open]);
+  const closeDrawer = () => {
+    setOpen(false);
+  };
+  const handleEditMainItem = (updatedItem: any) => {
+    const mergedEvent = {
+      ...storyItem,
+      ...updatedItem,
+    };
+    setOpenEditMainItemModal(false);
+  };
+  const handleAddSubItem = () => {
+    setOpenAddSubItemModal(false);
+  };
+  return (
+    <div>
+      {/* 主时间点详情抽屉 */}
+      <Drawer
+        width={1000}
+        placement="right"
+        onClose={() => {
+          closeDrawer();
+        }}
+        open={open}
+        title={storyItem.title}
+        footer={
+          <div style={{ textAlign: 'right' }}>
+            <Space>
+              <Button
+                icon={<PlusCircleOutlined />}
+                type="primary"
+                onClick={() => setOpenAddSubItemModal(true)}
+              >
+                添加子时间点
+              </Button>
+              <Button icon={<EditOutlined />} onClick={() => setEditModalVisible(true)}>
+                编辑
+              </Button>
+              <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}
+            />
+          </>
+        )}
+
+        {/* 时刻图库 */}
+        {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}
+                />
+              ))}
+            </div>
+          </>
+        )}
+
+        {/* 添加子时间点模态框 */}
+        <AddTimeLineItemModal
+          visible={openAddSubItemModal}
+          onOk={handleAddSubItem}
+          onCancel={() => setOpenAddSubItemModal(false)}
+          lineId={storyItem.storyInstanceId}
+          storyItemId={storyItem.instanceId}
+        />
+
+        {/* 编辑主时间点模态框 */}
+        <SubTimeLineItemModal
+          visible={openEditMainItemModal}
+          onOk={handleEditMainItem}
+          onCancel={() => setOpenEditMainItemModal(false)}
+          initialValues={storyItem}
+        />
+      </Drawer>
+    </div>
+  );
+};
+
+export default TimelineItemDrawer;