feat: 添加分享功能支持及代码重构

refactor: 重构类型定义和组件结构

fix: 修复通知和权限判断逻辑

style: 优化样式和布局

docs: 更新类型注释和文档

chore: 清理无用代码和文件

perf: 优化图片和视频加载性能

test: 添加分享功能测试用例

build: 更新依赖和构建配置

ci: 调整CI配置和脚本

src/pages/story/detail.tsx

@@ -1,95 +1,223 @@
-// src/pages/story/detail.tsx
 import { useIsMobile } from '@/hooks/useIsMobile';
 import AddTimeLineItemModal from '@/pages/story/components/AddTimeLineItemModal';
 import SortableTimelineGrid from '@/pages/story/components/SortableTimelineGrid';
 import TimelineItemDrawer from '@/pages/story/components/TimelineItemDrawer';
-import { StoryItem, StoryItemTimeQueryParams } from '@/pages/story/data';
+import type { StoryItem, StoryItemTimeQueryParams, StoryType } from '@/pages/story/data';
 import { queryStoryDetail, queryStoryItem, removeStoryItem } from '@/pages/story/service';
 import { judgePermission } from '@/pages/story/utils/utils';
-import { MoreOutlined, PlusOutlined, SyncOutlined, TeamOutlined } from '@ant-design/icons';
+import {
+  EyeOutlined,
+  MoreOutlined,
+  PlusOutlined,
+  ShareAltOutlined,
+  SyncOutlined,
+  TeamOutlined,
+  VerticalAlignTopOutlined,
+} from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { history, useParams, useRequest } from '@umijs/max';
-import { Button, Dropdown, Empty, FloatButton, MenuProps, message, Space, Spin } from 'antd';
+import { Button, Dropdown, Empty, FloatButton, message, Space, Spin, Tag } from 'antd';
+import type { MenuProps } from 'antd';
 import { PullToRefresh } from 'antd-mobile';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import './detail.css';
 import CollaboratorModal from './components/CollaboratorModal';
 
+type QueryParams = StoryItemTimeQueryParams & { current?: number; pageSize?: number };
+type LoadDirection = 'init' | 'older' | 'newer' | 'refresh';
+
+const normalizeStoryDetailResponse = (response: any): StoryType | undefined => {
+  if (!response) return undefined;
+  if (response?.data) return response.data as StoryType;
+  return response as StoryType;
+};
+
+const normalizeStoryItemsResponse = (response: any): StoryItem[] => {
+  if (Array.isArray(response?.list)) return response.list as StoryItem[];
+  if (Array.isArray(response?.data?.list)) return response.data.list as StoryItem[];
+  if (Array.isArray(response?.data)) return response.data as StoryItem[];
+  return [];
+};
+
+const normalizeTimeParam = (value: StoryItem['storyItemTime'] | undefined): string | undefined => {
+  if (!value) return undefined;
+
+  if (Array.isArray(value)) {
+    const [year, month, day, hour = 0, minute = 0, second = 0] = value;
+    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(value);
+};
+
+const getTimeValue = (time: StoryItem['storyItemTime'] | undefined): number => {
+  if (!time) return 0;
+
+  if (Array.isArray(time)) {
+    const [year, month, day, hour = 0, minute = 0, second = 0] = time;
+    return new Date(year, month - 1, day, hour, minute, second).getTime();
+  }
+
+  return new Date(String(time)).getTime();
+};
+
+const getDateKey = (time: StoryItem['storyItemTime'] | undefined): { label: string; sortValue: number } => {
+  if (Array.isArray(time)) {
+    const [year, month, day] = time;
+    return {
+      label: `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
+      sortValue: new Date(year, month - 1, day).getTime(),
+    };
+  }
+
+  if (time) {
+    const datePart = String(time).split(' ')[0];
+    return {
+      label: datePart,
+      sortValue: new Date(datePart).getTime(),
+    };
+  }
+
+  return {
+    label: 'Undated',
+    sortValue: 0,
+  };
+};
+
+const groupItemsByDate = (items: StoryItem[]) => {
+  const groups: Record<string, { dateKey: string; items: StoryItem[]; sortValue: number }> = {};
+
+  items.forEach((item) => {
+    const { label, sortValue } = getDateKey(item.storyItemTime);
+
+    if (!groups[label]) {
+      groups[label] = { dateKey: label, items: [], sortValue };
+    }
+
+    groups[label].items.push(item);
+  });
+
+  Object.values(groups).forEach((group) => {
+    group.items.sort((a, b) => getTimeValue(a.storyItemTime) - getTimeValue(b.storyItemTime));
+  });
+
+  return groups;
+};
+
+const mergeGroupOrder = (items: StoryItem[], dateKey: string, newItems: StoryItem[]) => {
+  const groups = groupItemsByDate(items);
+
+  if (!groups[dateKey]) {
+    return items;
+  }
+
+  groups[dateKey].items = newItems;
+
+  return Object.values(groups)
+    .sort((a, b) => b.sortValue - a.sortValue)
+    .flatMap((group) => group.items);
+};
+
 const Index = () => {
   const isMobile = useIsMobile();
   const { id: lineId } = useParams<{ id: string }>();
   const containerRef = useRef<HTMLDivElement>(null);
   const [items, setItems] = useState<StoryItem[]>([]);
   const [loading, setLoading] = useState(false);
-  const [hasMoreOld, setHasMoreOld] = useState(true); // 是否有更老的数据
-  const [hasMoreNew, setHasMoreNew] = useState(true); // 是否有更新的数据
+  const [hasMoreOld, setHasMoreOld] = useState(true);
+  const [hasMoreNew, setHasMoreNew] = useState(true);
   const [openAddItemModal, setOpenAddItemModal] = useState(false);
   const [currentItem, setCurrentItem] = useState<StoryItem>();
-  const [currentOption, setCurrentOption] = useState<
-    'add' | 'edit' | 'addSubItem' | 'editSubItem'
-  >();
+  const [currentOption, setCurrentOption] = useState<'add' | 'edit' | 'addSubItem' | 'editSubItem'>();
   const [openDetailDrawer, setOpenDetailDrawer] = useState(false);
   const [openCollaboratorModal, setOpenCollaboratorModal] = useState(false);
   const [detailItem, setDetailItem] = useState<StoryItem>();
   const [pagination, setPagination] = useState({ current: 1, pageSize: 30 });
-  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',
-  );
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [showScrollTop, setShowScrollTop] = useState(false);
+  const [currentTimeArr, setCurrentTimeArr] = useState<
+    [StoryItem['storyItemTime'] | undefined, StoryItem['storyItemTime'] | undefined]
+  >([undefined, undefined]);
+  const [loadDirection, setLoadDirection] = useState<LoadDirection>('init');
   const hasShownNoMoreOldRef = useRef(false);
   const hasShownNoMoreNewRef = useRef(false);
 
-  type QueryParams = StoryItemTimeQueryParams & { current?: number; pageSize?: number };
-
   const { data: response, run } = useRequest(
-    (params?: QueryParams) => {
-      return queryStoryItem({ storyInstanceId: lineId, pageSize: pagination.pageSize, ...params });
-    },
-    {
-      manual: true,
-    },
+    (params?: QueryParams) =>
+      queryStoryItem({ storyInstanceId: lineId, pageSize: pagination.pageSize, ...params }),
+    { manual: true },
   );
 
-  const {
-    data: detail,
-    run: queryDetail,
-    loading: queryDetailLoading,
-  } = useRequest(() => {
-    return queryStoryDetail(lineId ?? '');
-  });
+  const { data: detailResponse, run: queryDetail, loading: queryDetailLoading } = useRequest(
+    () => queryStoryDetail(lineId ?? ''),
+  );
+
+  const detail = normalizeStoryDetailResponse(detailResponse);
+  const storyId = lineId || detail?.instanceId;
+  const canEdit = judgePermission(detail?.permissionType ?? null, 'edit');
+  const canManageCollaborators = judgePermission(detail?.permissionType ?? null, 'auth');
+
+  const refreshStory = useCallback(() => {
+    setItems([]);
+    setPagination({ current: 1, pageSize: 30 });
+    setLoadDirection('refresh');
+    setLoading(true);
+    setIsRefreshing(false);
+    setHasMoreOld(true);
+    setHasMoreNew(true);
+    hasShownNoMoreOldRef.current = false;
+    hasShownNoMoreNewRef.current = false;
+    void run({ current: 1 });
+    void queryDetail();
+  }, [queryDetail, run]);
+
+  const openSharePreview = useCallback(() => {
+    if (!storyId) {
+      message.warning('This story is not ready for preview yet.');
+      return;
+    }
+
+    history.push(`/share/preview/${storyId}`);
+  }, [storyId]);
+
+  const openShareStudio = useCallback(() => {
+    if (!storyId) {
+      message.warning('This story is not ready for Share Studio yet.');
+      return;
+    }
+
+    history.push(`/share/studio/${storyId}`);
+  }, [storyId]);
 
-  // 初始化加载数据
   useEffect(() => {
+    setItems([]);
     setHasMoreOld(true);
     setHasMoreNew(true);
     setLoadDirection('init');
     setLoading(true);
-    queryDetail();
-    run();
-  }, [lineId]);
-  // 处理响应数据
+    setIsRefreshing(false);
+    hasShownNoMoreOldRef.current = false;
+    hasShownNoMoreNewRef.current = false;
+    void queryDetail();
+    void run();
+  }, [lineId, queryDetail, run]);
+
   useEffect(() => {
     if (!response) return;
-    // 兼容 response.list 和 response.data.list
-    // @ts-ignore
-    const fetched = response.list || response.data?.list || [];
-    const pageSize = pagination.pageSize;
-    const noMore = !(fetched.length === pageSize);
 
-    // 若无新数据则避免触发列表重绘，只更新加载状态
+    const fetched = normalizeStoryItemsResponse(response);
+    const pageSize = pagination.pageSize;
+    const noMore = fetched.length < pageSize;
+
     if (!fetched.length) {
       if (loadDirection === 'older') {
         setHasMoreOld(false);
       } else if (loadDirection === 'newer') {
         setHasMoreNew(false);
-      } else if (loadDirection === 'init' || loadDirection === 'refresh') {
+      } else {
         setItems([]);
       }
+
       setLoading(false);
       setIsRefreshing(false);
       setLoadDirection('init');
@@ -103,9 +231,10 @@ const Index = () => {
         return next;
       });
       setHasMoreOld(!noMore);
+
       if (noMore && !hasShownNoMoreOldRef.current) {
         hasShownNoMoreOldRef.current = true;
-        message.info('没有更多历史内容了');
+        message.info('No older moments left.');
       }
     } else if (loadDirection === 'newer') {
       setItems((prev) => {
@@ -114,38 +243,38 @@ const Index = () => {
         return next;
       });
       setHasMoreNew(!noMore);
+
       if (noMore && !hasShownNoMoreNewRef.current) {
         hasShownNoMoreNewRef.current = true;
-        message.info('没有更多更新内容了');
+        message.info('No newer moments found.');
       }
-    } else if (loadDirection === 'refresh' || loadDirection === 'init') {
+    } else {
       setItems(fetched);
-      if (fetched.length > 0) {
-        setCurrentTimeArr([fetched[0]?.storyItemTime, fetched[fetched.length - 1]?.storyItemTime]);
-      }
+      setCurrentTimeArr([fetched[0]?.storyItemTime, fetched[fetched.length - 1]?.storyItemTime]);
       setHasMoreOld(!noMore);
+      setHasMoreNew(true);
     }
 
     setLoading(false);
     setIsRefreshing(false);
     setLoadDirection('init');
-  }, [response, loadDirection, pagination.pageSize]);
+  }, [loadDirection, pagination.pageSize, response]);
 
-  // 滚动到底部加载更老的数据
   const loadOlder = useCallback(() => {
     if (loading || !hasMoreOld) {
       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]);
+    void run({ current: nextPage, beforeTime: normalizeTimeParam(beforeTime) });
+  }, [currentTimeArr, hasMoreOld, items, loading, pagination.current, run]);
 
-  // 滚动到顶部加载更新的数据
   const loadNewer = useCallback(() => {
     if (loading || !hasMoreNew || isRefreshing) {
       return;
@@ -153,25 +282,22 @@ const Index = () => {
 
     const afterTime = items[0]?.storyItemTime || currentTimeArr[0];
     if (!afterTime) return;
+
     setPagination((prev) => ({ ...prev, current: 1 }));
     setLoadDirection('newer');
     setIsRefreshing(true);
     setLoading(true);
-    run({ afterTime: afterTime });
-  }, [loading, hasMoreNew, isRefreshing, items, currentTimeArr, run]);
+    void run({ current: 1, afterTime: normalizeTimeParam(afterTime) });
+  }, [currentTimeArr, hasMoreNew, isRefreshing, items, loading, run]);
 
-  // 监听滚动事件
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
 
     const handleScroll = () => {
       const { scrollTop, scrollHeight, clientHeight } = container;
-
-      // 显示回到顶部按钮
       setShowScrollTop(scrollTop > 300);
 
-      // 接近底部时加载更多
       if (scrollHeight - scrollTop - clientHeight < 200) {
         loadOlder();
       }
@@ -181,8 +307,7 @@ const Index = () => {
     return () => container.removeEventListener('scroll', handleScroll);
   }, [loadOlder]);
 
-  // 手动刷新最新数据
-  const handleRefresh = () => {
+  const handleRefresh = useCallback(() => {
     if (isRefreshing) return;
 
     setIsRefreshing(true);
@@ -190,88 +315,48 @@ const Index = () => {
     setPagination((prev) => ({ ...prev, current: 1 }));
     hasShownNoMoreOldRef.current = false;
     hasShownNoMoreNewRef.current = false;
-    run({ current: 1 });
-  };
+    setLoading(true);
+    void run({ current: 1 });
+    void queryDetail();
+  }, [isRefreshing, queryDetail, run]);
 
-  // 回到顶部
   const scrollToTop = () => {
-    if (containerRef.current) {
-      containerRef.current.scrollTo({ top: 0, behavior: 'smooth' });
-    }
+    containerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
-  // 按日期分组items，并在每个组内按时间排序
-  const groupItemsByDate = (items: StoryItem[]) => {
-    const groups: { [key: string]: { dateKey: string; items: StoryItem[]; sortValue: number } } =
-      {};
+  const groupedItems = useMemo(() => groupItemsByDate(items), [items]);
 
-    items.forEach((item) => {
-      let dateKey = '';
-      let sortValue = 0;
+  const summaryDescription =
+    detail?.description ||
+    'Build the timeline, curate a cover, and turn the story into a polished public page from Share Studio.';
 
-      if (Array.isArray(item.storyItemTime)) {
-        const [year, month, day] = item.storyItemTime;
-        dateKey = `${year}年${month}月${day}日`;
-        sortValue = new Date(year, month - 1, day).getTime();
-      } else if (item.storyItemTime) {
-        const dateStr = String(item.storyItemTime);
-        const datePart = dateStr.split(' ')[0];
-        dateKey = datePart;
-        sortValue = new Date(datePart).getTime();
-      }
-
-      if (!groups[dateKey]) {
-        groups[dateKey] = { dateKey, items: [], sortValue };
-      }
-      groups[dateKey].items.push(item);
-    });
-
-    // 对每个日期组内的项目按时间排序（从早到晚）
-    Object.keys(groups).forEach((dateKey) => {
-      groups[dateKey].items.sort((a, b) => {
-        const timeA = getTimeValue(a.storyItemTime);
-        const timeB = getTimeValue(b.storyItemTime);
-        return timeA - timeB;
-      });
-    });
-
-    return groups;
-  };
-
-  // 将时间转换为可比较的数值
-  const getTimeValue = (time: string | number[] | undefined): number => {
-    if (!time) return 0;
-
-    if (Array.isArray(time)) {
-      const [year, month, day, hour = 0, minute = 0, second = 0] = time;
-      return new Date(year, month - 1, day, hour, minute, second).getTime();
-    }
-
-    return new Date(String(time)).getTime();
-  };
-
-  const groupedItems = groupItemsByDate(items);
-
-  const getExtraContent = () => {
+  const extraContent = (() => {
     if (isMobile) {
       const menuItems: MenuProps['items'] = [
+        {
+          key: 'preview',
+          label: 'Preview',
+          icon: <EyeOutlined />,
+          onClick: openSharePreview,
+        },
+        {
+          key: 'studio',
+          label: 'Share Studio',
+          icon: <ShareAltOutlined />,
+          onClick: openShareStudio,
+        },
         {
           key: 'refresh',
-          label: '刷新',
+          label: 'Refresh',
           icon: <SyncOutlined />,
-          onClick: () => {
-            setItems([]);
-            setPagination({ current: 1, pageSize: 30 });
-            setLoadDirection('refresh');
-            run({ current: 1 });
-          },
+          onClick: handleRefresh,
         },
       ];
 
-      if (judgePermission(detail?.permissionType ?? null, 'auth')) {
+      if (canManageCollaborators) {
         menuItems.unshift({
           key: 'collaborators',
-          label: '协作成员',
+          label: 'Collaborators',
           icon: <TeamOutlined />,
           onClick: () => setOpenCollaboratorModal(true),
         });
@@ -285,36 +370,80 @@ const Index = () => {
     }
 
     return (
-      <Space>
-        {judgePermission(detail?.permissionType ?? null, 'auth') && (
+      <Space wrap>
+        <Button icon={<EyeOutlined />} onClick={openSharePreview}>
+          Preview
+        </Button>
+        <Button icon={<ShareAltOutlined />} onClick={openShareStudio}>
+          Share Studio
+        </Button>
+        {canManageCollaborators && (
           <Button icon={<TeamOutlined />} onClick={() => setOpenCollaboratorModal(true)}>
-            协作成员
+            Collaborators
           </Button>
         )}
-        <Button
-          icon={<SyncOutlined />}
-          onClick={() => {
-            setItems([]);
-            setPagination({ current: 1, pageSize: 30 });
-            setLoadDirection('refresh');
-            run({ current: 1 });
-          }}
-          loading={isRefreshing}
-        >
-          刷新
+        <Button icon={<SyncOutlined />} onClick={handleRefresh} loading={isRefreshing}>
+          Refresh
         </Button>
       </Space>
     );
-  };
+  })();
 
   return (
     <PageContainer
       onBack={() => history.push('/story')}
-      title={
-        queryDetailLoading ? '加载中' : `${detail?.title} ${`共${detail?.itemCount ?? 0}个时刻`}`
-      }
-      extra={getExtraContent()}
+      title={queryDetailLoading ? 'Loading story...' : detail?.title || 'Story timeline'}
+      extra={extraContent}
     >
+      {detail && (
+        <div
+          style={{
+            marginBottom: 20,
+            padding: isMobile ? 20 : 24,
+            borderRadius: 24,
+            border: '1px solid rgba(24, 144, 255, 0.12)',
+            background: 'linear-gradient(140deg, rgba(24,144,255,0.10), rgba(19,194,194,0.08))',
+          }}
+        >
+          <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
+            <div style={{ flex: '1 1 320px', minWidth: 0 }}>
+              <Tag bordered={false} color="processing">
+                Story canvas
+              </Tag>
+              <h2 style={{ margin: '12px 0 8px', fontSize: isMobile ? 24 : 30 }}>
+                {detail.title || 'Untitled story'}
+              </h2>
+              <p style={{ margin: 0, color: '#5f6b7f', lineHeight: 1.75 }}>{summaryDescription}</p>
+              <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginTop: 16, color: '#5f6b7f' }}>
+                <span>{detail.storyTime || 'No story time set'}</span>
+                <span>{Number(detail.itemCount || 0)} moments</span>
+                <span>{detail.updateTime || 'No recent update'}</span>
+              </div>
+            </div>
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'flex-start' }}>
+              <Button type="primary" icon={<ShareAltOutlined />} onClick={openShareStudio}>
+                Open Studio
+              </Button>
+              <Button icon={<EyeOutlined />} onClick={openSharePreview}>
+                Preview
+              </Button>
+              {canEdit && (
+                <Button
+                  icon={<PlusOutlined />}
+                  onClick={() => {
+                    setCurrentOption('add');
+                    setCurrentItem(undefined);
+                    setOpenAddItemModal(true);
+                  }}
+                >
+                  Add Moment
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
       <div
         className="timeline"
         ref={containerRef}
@@ -322,18 +451,24 @@ const Index = () => {
           height: 'calc(100vh - 200px)',
           overflow: 'auto',
           position: 'relative',
-          padding: '0 8px', // 减少内边距
+          padding: '0 8px',
         }}
       >
         {items.length > 0 ? (
-          <PullToRefresh onRefresh={loadNewer} disabled={!isMobile}>
+          <PullToRefresh
+            onRefresh={async () => {
+              loadNewer();
+            }}
+            disabled={!isMobile}
+          >
             {hasMoreNew && !isMobile && (
               <div style={{ textAlign: 'center', padding: '12px 0' }}>
                 <Button onClick={loadNewer} loading={isRefreshing}>
-                  加载新内容
+                  Load Newer Moments
                 </Button>
               </div>
             )}
+
             {Object.values(groupedItems)
               .sort((a, b) => b.sortValue - a.sortValue)
               .map(({ dateKey, items: dateItems, sortValue }) => (
@@ -343,61 +478,37 @@ const Index = () => {
                     items={dateItems}
                     dateKey={dateKey}
                     sortValue={sortValue}
-                    handleOption={(
-                      item: StoryItem,
-                      option: 'add' | 'edit' | 'addSubItem' | 'editSubItem',
-                    ) => {
+                    handleOption={(item, option) => {
                       setCurrentItem(item);
                       setCurrentOption(option);
                       setOpenAddItemModal(true);
                     }}
-                    onOpenDetail={(item: StoryItem) => {
+                    onOpenDetail={(item) => {
                       setDetailItem(item);
                       setOpenDetailDrawer(true);
                     }}
-                    disableEdit={!judgePermission(detail?.permissionType ?? null, 'edit')}
-                    refresh={() => {
-                      setPagination((prev) => ({ ...prev, current: 1 }));
-                      hasShownNoMoreOldRef.current = false;
-                      hasShownNoMoreNewRef.current = false;
-                      setLoadDirection('refresh');
-                      run({ current: 1 });
-                      queryDetail();
-                    }}
+                    disableEdit={!canEdit}
+                    refresh={refreshStory}
                     onOrderChange={(changedDateKey, newItems) => {
-                      setItems((prev) => {
-                        const updated = [...prev];
-                        const startIdx = updated.findIndex(
-                          (item) => item.storyItemTime === newItems[0]?.storyItemTime
-                        );
-                        if (startIdx !== -1) {
-                          updated.splice(startIdx, newItems.length, ...newItems);
-                        }
-                        return updated;
-                      });
+                      setItems((prev) => mergeGroupOrder(prev, changedDateKey, newItems));
                     }}
                   />
                 </div>
               ))}
-            {loading && <div className="load-indicator">加载中...</div>}
-            {!loading && !hasMoreOld && <div className="no-more-data">已加载全部历史数据</div>}
 
-            {/* 回到顶部按钮 */}
+            {loading && <div className="load-indicator">Loading moments...</div>}
+            {!loading && !hasMoreOld && <div className="no-more-data">All historical moments are loaded.</div>}
+
             {showScrollTop && (
               <div
                 style={{
                   position: 'fixed',
-                  bottom: 80,
                   right: 24,
+                  bottom: 88,
                   zIndex: 10,
                 }}
               >
-                <Button
-                  type="primary"
-                  shape="circle"
-                  icon={<SyncOutlined />}
-                  onClick={scrollToTop}
-                />
+                <Button type="primary" shape="circle" icon={<VerticalAlignTopOutlined />} onClick={scrollToTop} />
               </div>
             )}
           </PullToRefresh>
@@ -415,52 +526,37 @@ const Index = () => {
             {loading ? (
               <>
                 <Spin size="large" />
-                <div
-                  style={{
-                    marginTop: 16,
-                    fontSize: '16px',
-                    color: '#666',
-                  }}
-                >
-                  正在加载时间线数据...
-                </div>
+                <div style={{ marginTop: 16, fontSize: 16, color: '#666' }}>Loading timeline data...</div>
               </>
             ) : (
               <>
                 <Empty
-                  description="暂无时间线数据"
+                  description="No moments yet"
                   image={Empty.PRESENTED_IMAGE_SIMPLE}
-                  imageStyle={{
-                    height: 60,
-                  }}
+                  imageStyle={{ height: 60 }}
                 >
-                  <div
-                    style={{
-                      fontSize: '16px',
-                      color: '#999',
-                      marginBottom: '16px',
-                    }}
-                  >
-                    还没有添加任何时刻
+                  <div style={{ fontSize: 16, color: '#999', marginBottom: 16 }}>
+                    Start with a first memory, then curate it in Share Studio.
                   </div>
                 </Empty>
                 <Button
                   type="primary"
                   size="large"
-                  disabled={!judgePermission(detail?.permissionType ?? null, 'edit')}
+                  disabled={!canEdit}
                   onClick={() => {
                     setCurrentOption('add');
                     setCurrentItem(undefined);
                     setOpenAddItemModal(true);
                   }}
                 >
-                  添加第一个时刻
+                  Add First Moment
                 </Button>
               </>
             )}
           </div>
         )}
       </div>
+
       <FloatButton
         onClick={() => {
           setCurrentOption('add');
@@ -468,60 +564,47 @@ const Index = () => {
           setOpenAddItemModal(true);
         }}
         icon={<PlusOutlined />}
-        disabled={!judgePermission(detail?.permissionType ?? null, 'edit')}
+        disabled={!canEdit}
         type="primary"
-        style={{
-          right: 24,
-          bottom: 24,
-        }}
+        style={{ right: 24, bottom: 24 }}
       />
 
       <AddTimeLineItemModal
         visible={openAddItemModal}
         initialValues={currentItem}
         option={currentOption || 'add'}
-        onCancel={() => {
-          setOpenAddItemModal(false);
-        }}
+        onCancel={() => setOpenAddItemModal(false)}
         onOk={() => {
           setOpenAddItemModal(false);
-          // 添加新项后刷新数据
-          setPagination((prev) => ({ ...prev, current: 1 }));
-          setLoadDirection('refresh');
-          run({ current: 1 });
-          queryDetail();
+          refreshStory();
         }}
         storyId={lineId}
       />
 
-      {/* 详情抽屉 - 在外层管理，不影响网格布局 */}
       {detailItem && (
         <TimelineItemDrawer
           storyItem={detailItem}
           open={openDetailDrawer}
           setOpen={setOpenDetailDrawer}
           handleDelete={async () => {
-            // 这里需要实现删除逻辑
             try {
               if (!detailItem.instanceId) return;
-              const response = await removeStoryItem(detailItem.instanceId);
-              if (response.code === 200) {
-                message.success('删除成功');
+
+              const removeResponse = await removeStoryItem(detailItem.instanceId);
+              if (removeResponse.code === 200) {
+                message.success('Moment deleted.');
                 setOpenDetailDrawer(false);
-                // 刷新数据
-                setPagination((prev) => ({ ...prev, current: 1 }));
-                setLoadDirection('refresh');
-                run({ current: 1 });
-                queryDetail();
-              } else {
-                message.error('删除失败');
+                refreshStory();
+                return;
               }
+
+              message.error('Delete failed.');
             } catch (error) {
-              message.error('删除失败');
+              message.error('Delete failed.');
             }
           }}
-          disableEdit={!judgePermission(detail?.permissionType ?? null, 'edit')}
-          handOption={(item: StoryItem, option: 'add' | 'edit' | 'addSubItem' | 'editSubItem') => {
+          disableEdit={!canEdit}
+          handOption={(item, option) => {
             setCurrentItem(item);
             setCurrentOption(option);
             setOpenDetailDrawer(false);
@@ -529,6 +612,7 @@ const Index = () => {
           }}
         />
       )}
+
       <CollaboratorModal
         visible={openCollaboratorModal}
         onCancel={() => setOpenCollaboratorModal(false)}