增加用户中心、用户注册登录

src/pages/story/detail.tsx

@@ -1,22 +1,39 @@
 // 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 { StoryItem, StoryItemTimeQueryParams } from '@/pages/story/data';
 import { queryStoryDetail, queryStoryItem } from '@/pages/story/service';
+import { PlusOutlined, SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { history, useRequest } from '@umijs/max';
-import { FloatButton, Spin, Empty, Button } from 'antd';
+import { Button, Empty, FloatButton, message, Spin } from 'antd';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { VariableSizeList as List } from 'react-window';
-import { SyncOutlined } from '@ant-design/icons';
 import './index.css';
 
+// 格式化时间数组为易读格式
+const formatTimeArray = (time: string | number[] | undefined): string => {
+  if (!time) return '';
+  
+  // 如果是数组格式 [2025, 12, 23, 8, 55, 39]
+  if (Array.isArray(time)) {
+    const [year, month, day, hour, minute, second] = time;
+    return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')} ${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:${String(second).padStart(2, '0')}`;
+  }
+  
+  // 如果已经是字符串格式，直接返回
+  return String(time);
+};
+
 const Index = () => {
   const { id: lineId } = useParams<{ id: string }>();
   const containerRef = useRef<HTMLDivElement>(null);
   const listRef = useRef<any>(null);
+  const outerRef = useRef<HTMLDivElement>(null);
+  const topSentinelRef = useRef<HTMLDivElement>(null);
+  const bottomSentinelRef = useRef<HTMLDivElement>(null);
   const [items, setItems] = useState<StoryItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [hasMoreOld, setHasMoreOld] = useState(true); // 是否有更老的数据
@@ -33,10 +50,23 @@ const Index = () => {
   const measuredItemsRef = useRef<Set<string>>(new Set());
   const [isRefreshing, setIsRefreshing] = useState(false); // 是否正在刷新最新数据
   const [showScrollTop, setShowScrollTop] = useState(false); // 是否显示回到顶部按钮
+  const [currentTimeArr, setCurrentTimeArr] = useState<[string | undefined, string | undefined]>([
+    undefined,
+    undefined,
+  ]);
+  const [loadDirection, setLoadDirection] = useState<'init' | 'older' | 'newer' | 'refresh'>(
+    'init',
+  );
+// 添加在其他 useRef 之后
+  const hasShownNoMoreOldRef = useRef(false);
+  const hasShownNoMoreNewRef = useRef(false);
+  const topLoadingRef = useRef(false); // 防止顶部循环加载
+
+  type QueryParams = StoryItemTimeQueryParams & { current?: number; pageSize?: number };
 
   const { data: response, run } = useRequest(
-    () => {
-      return queryStoryItem({ storyInstanceId: lineId, ...pagination });
+    (params?: QueryParams) => {
+      return queryStoryItem({ storyInstanceId: lineId, pageSize: pagination.pageSize, ...params });
     },
     {
       manual: true,
@@ -53,100 +83,100 @@ const Index = () => {
 
   // 初始化加载数据
   useEffect(() => {
-    setItems([]);
-    setPagination({ current: 1, pageSize: 10 });
     setHasMoreOld(true);
     setHasMoreNew(true);
     // 重置高度缓存
     setItemSizes({});
     measuredItemsRef.current = new Set();
-    run();
+    setLoadDirection('init');
+    setLoading(true);
+    run({ current: 1 });
   }, [lineId]);
-
   // 处理响应数据
   useEffect(() => {
     if (!response) return;
+    const fetched = response.list || [];
+    const pageSize = pagination.pageSize;
+    const noMore = !(fetched.length === pageSize);
 
-    if (pagination.current === 1) {
-      // 首页数据
-      setItems(response.list || []);
-    } else if (pagination.current > 1) {
-      // 追加更老的数据
-      setItems(prev => [...prev, ...(response.list || [])]);
-    } else if (pagination.current < 1) {
-      // 在前面插入更新的数据
-      setItems(prev => [...(response.list || []), ...prev]);
-      // 保持滚动位置
-      setTimeout(() => {
-        if (listRef.current && response.list) {
-          listRef.current.scrollToItem(response.list.length, 'start');
-        }
-      }, 0);
+    // 若无新数据则避免触发列表重绘，只更新加载状态
+    if (!fetched.length) {
+      if (loadDirection === 'older') {
+        setHasMoreOld(false);
+      } else if (loadDirection === 'newer') {
+        setHasMoreNew(false);
+        topLoadingRef.current = false;
+      }
+      setLoading(false);
+      setIsRefreshing(false);
+      setLoadDirection('init');
+      return;
     }
 
-    // 检查是否还有更多数据
-    if (pagination.current >= 1) {
-      // 检查是否有更老的数据
-      setHasMoreOld(response.list && response.list.length === pagination.pageSize);
-    } else if (pagination.current < 1) {
-      // 检查是否有更新的数据
-      setHasMoreNew(response.list && response.list.length === pagination.pageSize);
+    if (loadDirection === 'older') {
+      setItems((prev) => {
+        const next = [...prev, ...fetched];
+        setCurrentTimeArr([next[0]?.storyItemTime, next[next.length - 1]?.storyItemTime]);
+        return next;
+      });
+      setHasMoreOld(!noMore);
+      if (noMore && !hasShownNoMoreOldRef.current) {
+        hasShownNoMoreOldRef.current = true;
+        message.info('没有更多历史内容了');
+      }
+    } else if (loadDirection === 'newer') {
+      setItems((prev) => {
+        const next = [...fetched, ...prev];
+        setCurrentTimeArr([next[0]?.storyItemTime, next[next.length - 1]?.storyItemTime]);
+        if (listRef.current && fetched.length) {
+          requestAnimationFrame(() => listRef.current?.scrollToItem(fetched.length + 1, 'start'));
+        }
+        return next;
+      });
+      setHasMoreNew(!noMore);
+      if (noMore && !hasShownNoMoreNewRef.current) {
+        hasShownNoMoreNewRef.current = true;
+        message.info('没有更多更新内容了');
+      }
+      topLoadingRef.current = false;
+    } else if (loadDirection === 'refresh') {
+      topLoadingRef.current = false;
+    } else {
+      setItems(fetched);
+      setCurrentTimeArr([fetched[0]?.storyItemTime, fetched[fetched.length - 1]?.storyItemTime]);
+      setHasMoreOld(!noMore);
+      setHasMoreNew(true);
     }
 
     setLoading(false);
     setIsRefreshing(false);
-  }, [response, pagination]);
-
-  // 滚动到底部加载更老的数据
-  const loadOlder = useCallback(() => {
-    if (loading || !hasMoreOld || pagination.current < 1) return;
-
-    setLoading(true);
-    setPagination(prev => ({
-      ...prev,
-      current: prev.current + 1
-    }));
-  }, [loading, hasMoreOld, pagination]);
-
-  // 滚动到顶部加载更新的数据
-  const loadNewer = useCallback(() => {
-    if (loading || !hasMoreNew || pagination.current > 1 || isRefreshing) return;
-
-    setIsRefreshing(true);
-    setPagination(prev => ({
-      ...prev,
-      current: prev.current - 1
-    }));
-  }, [loading, hasMoreNew, pagination, isRefreshing]);
-
-  // 当分页变化时重新请求数据
-  useEffect(() => {
-    if (pagination.current !== 1) {
-      run();
-    }
-  }, [pagination, run]);
+    setLoadDirection('init');
+  }, [response, loadDirection, pagination.pageSize]);
 
   // 获取item高度的函数
-  const getItemSize = useCallback((index: number) => {
+  const getItemSize = useCallback(
+    (index: number) => {
     const item = items[index];
-    if (!item) return 300; // 默认高度
+    if (!item) return 400; // 默认高度
+    const key = String(item.id ?? item.instanceId);
 
-    // 如果已经测量过该item的高度，则使用缓存的值
-    if (itemSizes[item.id]) {
-      return itemSizes[item.id];
+    if (itemSizes[key]) {
+      return itemSizes[key];
     }
 
-    // 返回默认高度
-    return 300;
-  }, [items, itemSizes]);
+    return 400;
+    },
+    [items, itemSizes, loadDirection, loading],
+  );
 
   // 当item尺寸发生变化时调用
-  const onItemResize = useCallback((itemId: string, height: number) => {
+  const onItemResize = useCallback(
+    (itemId: string, height: number) => {
     // 只有当高度发生变化时才更新
     if (itemSizes[itemId] !== height) {
-      setItemSizes(prev => ({
+        setItemSizes((prev) => ({
         ...prev,
-        [itemId]: height
+          [itemId]: height,
       }));
 
       // 通知List组件重新计算尺寸
@@ -154,47 +184,85 @@ const Index = () => {
         listRef.current.resetAfterIndex(0);
       }
     }
-  }, [itemSizes]);
+    },
+    [itemSizes],
+  );
+  // 滚动到底部加载更老的数据
+  const loadOlder = useCallback(() => {
+    if (loading || !hasMoreOld) {
+      if (!hasMoreOld && !loading) {
+        message.info('没有更多历史内容了');
+      }
+      return;
+    }
+    const beforeTime = items[items.length - 1]?.storyItemTime || currentTimeArr[1];
+    if (!beforeTime) return;
+    const nextPage = pagination.current + 1;
+    setPagination((prev) => ({ ...prev, current: nextPage }));
+    setLoadDirection('older');
+    setLoading(true);
+    run({ current: nextPage });
+  }, [loading, hasMoreOld, items, currentTimeArr, pagination.current, run]);
+
+// 滚动到顶部加载更新的数据
+  const loadNewer = useCallback(() => {
+    if (loading || !hasMoreNew || isRefreshing || topLoadingRef.current) {
+      if (!hasMoreNew && !loading && !isRefreshing) {
+        message.info('没有更多更新内容了');
+      }
+      return;
+    }
+
+    const afterTime = items[0]?.storyItemTime || currentTimeArr[0];
+    if (!afterTime) return;
+    setPagination((prev) => ({ ...prev, current: 1 }));
+    setLoadDirection('newer');
+    setIsRefreshing(true);
+    setLoading(true);
+    topLoadingRef.current = true;
+    run({ current: 1 });
+  }, [loading, hasMoreNew, isRefreshing, items, currentTimeArr, run]);
 
   // 渲染单个时间线项的函数
   const renderTimelineItem = useCallback(
     ({ index, style }: { index: number; style: React.CSSProperties }) => {
-      // 显示加载指示器的条件
-      const showOlderLoading = index === items.length && hasMoreOld && pagination.current >= 1;
-      const showNewerLoading = index === 0 && hasMoreNew && pagination.current < 1 && isRefreshing;
-
-      if (showOlderLoading || showNewerLoading) {
-        return (
-          <div style={style}>
-            <div style={{ textAlign: 'center', padding: '20px' }}>
-              <Spin />
-              <div style={{ marginTop: 8 }}>
-                {showNewerLoading ? '正在加载更新的内容...' : '正在加载更多内容...'}
-              </div>
-            </div>
-          </div>
-        );
-      }
-
       const item = items[index];
       if (!item) return null;
+      const key = String(item.id ?? item.instanceId);
 
       return (
         <div style={style}>
           <div
             ref={(el) => {
               // 当元素被渲染时测量其实际高度
-              if (el && !measuredItemsRef.current.has(item.id)) {
-                measuredItemsRef.current.add(item.id);
+              if (el && !measuredItemsRef.current.has(key)) {
+                measuredItemsRef.current.add(key);
                 // 使用requestAnimationFrame确保DOM已经渲染完成
                 requestAnimationFrame(() => {
                   if (el) {
                     const height = el.getBoundingClientRect().height;
-                    onItemResize(item.id, height);
+                    onItemResize(key, height);
                   }
                 });
               }
             }}
+            style={{
+              margin: '12px 0',
+              padding: '16px',
+              backgroundColor: '#fff',
+              borderRadius: '8px',
+              boxShadow: '0 1px 4px rgba(0,0,0,0.05)',
+              border: '1px solid #f0f0f0',
+              transition: 'all 0.2s ease-in-out',
+            }}
+            onMouseEnter={(e) => {
+              (e.currentTarget as HTMLDivElement).style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
+              (e.currentTarget as HTMLDivElement).style.transform = 'translateY(-2px)';
+            }}
+            onMouseLeave={(e) => {
+              (e.currentTarget as HTMLDivElement).style.boxShadow = '0 1px 4px rgba(0,0,0,0.05)';
+              (e.currentTarget as HTMLDivElement).style.transform = 'translateY(0)';
+            }}
           >
             <TimelineItem
               item={item}
@@ -208,10 +276,13 @@ const Index = () => {
               }}
               refresh={() => {
                 // 刷新当前页数据
-                setPagination(prev => ({ ...prev, current: 1 }));
+                setPagination((prev) => ({ ...prev, current: 1 }));
                 // 重置高度测量
                 measuredItemsRef.current = new Set();
-                run();
+                hasShownNoMoreOldRef.current = false;
+                hasShownNoMoreNewRef.current = false;
+                setLoadDirection('refresh');
+                run({ current: 1 });
                 queryDetail();
               }}
             />
@@ -219,34 +290,61 @@ const Index = () => {
         </div>
       );
     },
-    [items, hasMoreOld, hasMoreNew, pagination, isRefreshing, onItemResize, run, queryDetail],
+    [items, hasMoreOld, loadDirection, loading, onItemResize, run, queryDetail],
   );
 
-  // 处理滚动事件
-  const handleItemsRendered = useCallback(({ visibleStartIndex, visibleStopIndex }) => {
-    // 当可视区域接近列表顶部时加载更新的数据
-    if (visibleStartIndex <= 3 && hasMoreNew && !isRefreshing && pagination.current >= 1) {
-      loadNewer();
-    }
+  // 使用 IntersectionObserver 监听顶部/底部哨兵实现无限滚动
+  useEffect(() => {
+    const root = outerRef.current;
+    const topEl = topSentinelRef.current;
+    const bottomEl = bottomSentinelRef.current;
+    if (!root || !topEl || !bottomEl) return;
 
-    // 当可视区域接近列表底部时加载更老的数据
-    if (visibleStopIndex >= items.length - 3 && hasMoreOld && !loading && pagination.current >= 1) {
-      loadOlder();
-    }
+    const topObserver = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          loadNewer();
+        }
+      },
+      { root, rootMargin: '120px 0px 0px 0px', threshold: 0 },
+    );
 
-    // 控制回到顶部按钮的显示
-    setShowScrollTop(visibleStartIndex > 5);
-  }, [hasMoreNew, hasMoreOld, isRefreshing, loading, items.length, pagination, loadNewer, loadOlder]);
+    const bottomObserver = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          loadOlder();
+        }
+      },
+      { root, rootMargin: '0px 0px 120px 0px', threshold: 0 },
+    );
+
+    topObserver.observe(topEl);
+    bottomObserver.observe(bottomEl);
+
+    // 仅用于显示"回到顶部"按钮
+    const handleScroll = () => {
+      const { scrollTop } = root;
+      setShowScrollTop(scrollTop > 200);
+    };
+    root.addEventListener('scroll', handleScroll);
+
+    return () => {
+      topObserver.disconnect();
+      bottomObserver.disconnect();
+      root.removeEventListener('scroll', handleScroll);
+    };
+  }, [loadNewer, loadOlder]);
 
   // 手动刷新最新数据
   const handleRefresh = () => {
     if (isRefreshing) return;
 
     setIsRefreshing(true);
-    setPagination(prev => ({
-      ...prev,
-      current: 0 // 使用0作为刷新标识
-    }));
+    setLoadDirection('refresh');
+    setPagination((prev) => ({ ...prev, current: 1 }));
+    hasShownNoMoreOldRef.current = false;
+    hasShownNoMoreNewRef.current = false;
+    run({ current: 1 });
   };
 
   // 回到顶部
@@ -256,34 +354,6 @@ const Index = () => {
     }
   };
 
-  // 监听滚动事件，动态显示/隐藏提示信息
-  useEffect(() => {
-    const handleScroll = () => {
-      if (containerRef.current) {
-        const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
-
-        // 判断是否在顶部
-        const isTop = scrollTop === 0;
-        // 判断是否在底部
-        const isBottom = scrollTop + clientHeight >= scrollHeight;
-
-        setHasMoreNew(isTop && hasMoreNew); // 更新顶部提示的显示状态
-        setHasMoreOld(isBottom && hasMoreOld); // 更新底部提示的显示状态
-      }
-    };
-
-    const timelineContainer = containerRef.current;
-    if (timelineContainer) {
-      timelineContainer.addEventListener('scroll', handleScroll);
-    }
-
-    return () => {
-      if (timelineContainer) {
-        timelineContainer.removeEventListener('scroll', handleScroll);
-      }
-    };
-  }, [hasMoreNew, hasMoreOld]);
-
   return (
     <PageContainer
       onBack={() => history.push('/story')}
@@ -293,7 +363,12 @@ const Index = () => {
       extra={
         <Button
           icon={<SyncOutlined />}
-          onClick={handleRefresh}
+          onClick={() => {
+            setItems([]);
+            setPagination({ current: 1, pageSize: 10 });
+            setLoadDirection('refresh');
+            run({ current: 1 });
+          }}
           loading={isRefreshing}
         >
           刷新
@@ -306,68 +381,50 @@ const Index = () => {
         style={{
           height: 'calc(100vh - 200px)',
           overflow: 'hidden',
-          position: 'relative'
+          position: 'relative',
+          padding: '0 16px', // 添加一些内边距
         }}
       >
         {items.length > 0 ? (
           <>
-            {/* 顶部提示信息 */}
-            {!hasMoreNew && pagination.current <= 1 && (
-              <div style={{
-                textAlign: 'center',
-                padding: '12px',
-                color: '#999',
-                fontSize: '14px',
-                position: 'sticky',
-                top: 0,
-                backgroundColor: '#fff',
-                zIndex: 10,
-                borderBottom: '1px solid #f0f0f0'
-              }}>
-                已加载全部更新内容
-              </div>
-            )}
-
             <AutoSizer>
               {({ height, width }) => (
+                <>
                 <List
                   ref={listRef}
-                  height={height - (hasMoreNew && pagination.current <= 1 ? 40 : 0) - (hasMoreOld && pagination.current >= 1 ? 40 : 0)}
-                  itemCount={items.length + (hasMoreOld && pagination.current >= 1 ? 1 : 0) + (hasMoreNew && pagination.current < 1 && isRefreshing ? 1 : 0)}
+                    outerRef={outerRef}
+                    height={height}
+                    itemCount={items.length}
                   itemSize={getItemSize}
                   width={width}
-                  onItemsRendered={handleItemsRendered}
+                    innerElementType={React.forwardRef<
+                      HTMLDivElement,
+                      React.HTMLAttributes<HTMLDivElement>
+                    >((props, ref) => (
+                      <div ref={ref} {...props}>
+                        <div ref={topSentinelRef} style={{ height: 1 }} />
+                        {props.children}
+                        <div ref={bottomSentinelRef} style={{ height: 1 }} />
+                      </div>
+                    ))}
                 >
                   {renderTimelineItem}
                 </List>
+                  <div className="load-indicator">{loading && '加载中...'}</div>
+                  <div className="no-more-data">{!loading && '已加载全部历史数据'}</div>
+                </>
               )}
             </AutoSizer>
-
-            {/* 底部提示信息 */}
-            {!hasMoreOld && pagination.current >= 1 && (
-              <div style={{
-                textAlign: 'center',
-                padding: '12px',
-                color: '#999',
-                fontSize: '14px',
-                position: 'sticky',
-                bottom: 0,
-                backgroundColor: '#fff',
-                zIndex: 10,
-                borderTop: '1px solid #f0f0f0'
-              }}>
-                已加载全部历史内容
-              </div>
-            )}
-
             {/* 回到顶部按钮 */}
             {showScrollTop && (
-              <div style={{
+              <div
+                style={{
                 position: 'absolute',
                 bottom: 20,
                 right: 20,
-                zIndex: 10
-              }}>
+                zIndex: 10,
+                }}
+              >
                 <Button
                   type="primary"
                   shape="circle"
@@ -378,64 +435,93 @@ const Index = () => {
             )}
           </>
         ) : (
-          <div style={{
+          <div
+            style={{
             display: 'flex',
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
             height: '100%',
-            textAlign: 'center'
-          }}>
+              textAlign: 'center',
+            }}
+          >
             {loading ? (
               <>
                 <Spin size="large" />
-                <div style={{ marginTop: 16 }}>正在加载时间线数据...</div>
-              </>
-            ) : (
-              <>
-                <Empty
-                  description="暂无时间线数据"
-                  image={Empty.PRESENTED_IMAGE_SIMPLE}
-                />
-                <Button
-                  type="primary"
-                  style={{ marginTop: 16 }}
-                  onClick={() => {
-                    setCurrentOption('add');
-                    setCurrentItem();
-                    setOpenAddItemModal(true);
+                <div
+                  style={{
+                  marginTop: 16,
+                  fontSize: '16px',
+                    color: '#666',
                   }}
                 >
-                  添加第一个时刻
-                </Button>
+                  正在加载时间线数据...
+                </div>
               </>
+            ) : (
+                <>
+                  <Empty
+                    description="暂无时间线数据"
+                    image={Empty.PRESENTED_IMAGE_SIMPLE}
+                    imageStyle={{
+                      height: 60,
+                    }}
+                  >
+                  <div
+                    style={{
+                      fontSize: '16px',
+                      color: '#999',
+                      marginBottom: '16px',
+                    }}
+                  >
+                      还没有添加任何时刻
+                    </div>
+                  </Empty>
+                  <Button
+                    type="primary"
+                    size="large"
+                    onClick={() => {
+                      setCurrentOption('add');
+                      setCurrentItem(undefined);
+                      setOpenAddItemModal(true);
+                    }}
+                  >
+                    添加第一个时刻
+                  </Button>
+                </>
             )}
           </div>
         )}
       </div>
-
       <FloatButton
         onClick={() => {
           setCurrentOption('add');
-          setCurrentItem();
+          setCurrentItem(undefined);
           setOpenAddItemModal(true);
         }}
+        icon={<PlusOutlined />}
+        type="primary"
+        style={{
+          right: 24,
+          bottom: 24,
+        }}
       />
 
       <AddTimeLineItemModal
         visible={openAddItemModal}
         initialValues={currentItem}
-        option={currentOption}
+        option={currentOption || 'add'}
         onCancel={() => {
           setOpenAddItemModal(false);
         }}
         onOk={() => {
           setOpenAddItemModal(false);
           // 添加新项后刷新数据
-          setPagination(prev => ({ ...prev, current: 1 }));
+          setPagination((prev) => ({ ...prev, current: 1 }));
           // 重置高度测量
           measuredItemsRef.current = new Set();
-          run();
+          setLoadDirection('refresh');
+          run({ current: 1 });
           queryDetail();
         }}
         storyId={lineId}
@@ -444,4 +530,4 @@ const Index = () => {
   );
 };
 
-export default Index;
+export default Index;