timeline-frontend/src/pages/story/detail.tsx

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();
        setOpenAddItemModal(true);
      }} />
      <AddTimeLineItemModal
        visible={openAddItemModal}
        initialValues={currentItem}
        option={currentOption}
        onCancel={() => {
          setOpenAddItemModal(false);
        }}
        onOk={() => {
          setOpenAddItemModal(false);
          run();
        }}
        storyId={lineId}
      />
    </PageContainer>
  );
};

export default Index;