Story排版修改

src/pages/story/detail.tsx

@@ -0,0 +1,129 @@
+import AddTimeLineItemModal from '@/pages/story/components/AddTimeLineItemModal';
+import TimelineItem from '@/pages/story/components/TimelineItem/TimelineItem';
+import { StoryItem } from '@/pages/story/data';
+import { countStoryItem, queryStoryDetail, queryStoryItem } from '@/pages/story/service';
+import { PageContainer } from '@ant-design/pro-components';
+import { history, useIntl, useRequest } from '@umijs/max';
+import { FloatButton, Spin, Timeline } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router';
+import './index.css';
+import useStyles from './style.style';
+
+interface TimelineItemProps {
+  children: React.ReactNode; // 修正：使用 ReactNode 更通用
+  // label: string
+}
+
+const Index = () => {
+  const { id: lineId } = useParams<{ id: string }>();
+  const { styles } = useStyles();
+  const intl = useIntl();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [items, setItems] = useState<TimelineItemProps[]>([]);
+
+  const [loading, setLoading] = useState(false);
+  const [hasMoreNew, setHasMoreNew] = useState(true);
+  const [hasMoreOld, setHasMoreOld] = useState(true);
+  const [openAddItemModal, setOpenAddItemModal] = useState(false);
+  const [currentItem, setCurrentItem] = useState<StoryItem>();
+  const [currentOption, setCurrentOption] = useState<'add' | 'edit' | 'addSubItem' | 'editSubItem'>();
+
+  const { data: storyItemList, run } = useRequest(
+    () => {
+      return queryStoryItem(lineId ?? '');
+    },
+    {
+      manual: true,
+    },
+  );
+  const {
+    data: detail,
+    run: queryDetail,
+    loading: queryDetailLoading,
+  } = useRequest(() => {
+    return queryStoryDetail(lineId ?? '');
+  });
+  const { data: count, run: queryCount } = useRequest(() => {
+    return countStoryItem(lineId ?? '');
+  });
+  // 初始化加载数据
+  useEffect(() => {
+    run();
+  }, [lineId]);
+  useEffect(() => {
+    if (!storyItemList?.length) return;
+    console.log(storyItemList);
+    let timelineItems = storyItemList; //handleStoryItemList(storyItemList);
+    // 转换为 Timeline 组件需要的格式
+    const formattedItems = timelineItems.map((item: StoryItem) => ({
+      children: (
+        <TimelineItem
+          item={item}
+          handleOption={(item: StoryItem, option: 'add' | 'edit' | 'addSubItem' | 'editSubItem') => {
+            setCurrentItem(item);
+            setCurrentOption(option)
+            setOpenAddItemModal(true);
+          }}
+          refresh={() => {
+            run();
+            queryCount();
+            queryDetail();
+          }}
+        />
+      ),
+    }));
+
+    setItems(formattedItems);
+  }, [storyItemList]);
+
+  return (
+    <PageContainer
+      onBack={() => history.push('/story')}
+      title={queryDetailLoading ? '加载中' : `${detail?.title} ${count ? `共${count}个时刻` : ``}`}
+    >
+      <div className="timeline" ref={containerRef}>
+        {!hasMoreOld && <div style={{ textAlign: 'center', color: '#999' }}>没有更老的内容</div>}
+        {loading && <Spin style={{ display: 'block', margin: '20px auto' }} />}
+        <Timeline items={items} mode={'left'} />
+        {loading && <Spin style={{ display: 'block', margin: '20px auto' }} />}
+        {!hasMoreNew && <div style={{ textAlign: 'center', color: '#999' }}>没有更新的内容</div>}
+      </div>
+      <FloatButton onClick={() => {
+        setCurrentOption('add');
+        setCurrentItem({
+          coverInstanceId: "",
+          createTime: "",
+          description: "",
+          id: 0,
+          images: [],
+          instanceId: "",
+          isRoot: 0,
+          location: "",
+          masterItemId: "",
+          storyInstanceId: "",
+          storyItemTime: "",
+          subItems: [],
+          title: "",
+          updateTime: ""
+        });
+        setOpenAddItemModal(true);
+      }} />
+      <AddTimeLineItemModal
+        visible={openAddItemModal}
+        initialValues={currentItem}
+        option={currentOption}
+        onCancel={() => {
+          setOpenAddItemModal(false);
+        }}
+        onOk={() => {
+          setOpenAddItemModal(false);
+          run();
+        }}
+        storyId={lineId}
+      />
+    </PageContainer>
+  );
+};
+
+export default Index;