+
- {!isLoaded && }
+ {!isLoaded && }
);
};
diff --git a/src/components/index.ts b/src/components/index.ts
index 9bbae05..3d6d0d7 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,30 +1,11 @@
-/**
- * 这个文件作为组件的目录
- * 目的是统一管理对外输出的组件，方便分类
- */
-/**
- * 布局组件
- */
import Footer from './Footer';
import { Question, SelectLang } from './RightContent';
import { AvatarDropdown, AvatarName } from './RightContent/AvatarDropdown';
export { Footer, Question, SelectLang, AvatarDropdown, AvatarName };
export { default as ClientOnly } from './ClientOnly';
-
-// 导出Hooks
export { default as useFetchImageUrl } from './Hooks/useFetchImageUrl';
export { default as useWebSocket } from './Hooks/useWebSocket';
export { default as useFetchHighResImageUrl } from './Hooks/useFetchHighResImageUrl';
export { default as useAuthImageUrls } from './Hooks/useAuthImageUrls';
-
-// 导出同步状态组件
-export {
- SyncStatusIndicator,
- ConflictResolver,
- OfflineIndicator,
- SyncStatusManager,
-} from './SyncStatus';
-
-// 导出评论组件
-export { Comments, CommentList, CommentItem, CommentInput } from './Comments';
\ No newline at end of file
+export { Comments, CommentList, CommentItem, CommentInput } from './Comments';
diff --git a/src/hooks/useNotifications.ts b/src/hooks/useNotifications.ts
index ee77cb6..026646b 100644
--- a/src/hooks/useNotifications.ts
+++ b/src/hooks/useNotifications.ts
@@ -1,93 +1,96 @@
-
-import { useEffect, useState, useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
import { useModel, request } from '@umijs/max';
import { notification as antdNotification } from 'antd';
import { Notification, NotificationType } from '@/types';
import { AUTH_API, USER_API } from '@/services/config/apiUrls';
-export const useNotifications = () => {
- const { initialState } = useModel('@@initialState');
- const { stompClient } = useModel('stomp');
- const [notifications, setNotifications] = useState([]);
- const [unreadCount, setUnreadCount] = useState(0);
-
- const fetchUnreadNotifications = useCallback(async () => {
- if (!initialState?.currentUser) return;
- try {
- const res = await request(`${AUTH_API.INFO}/message/unread`);
- setNotifications(res);
- setUnreadCount(res.length);
- } catch (error) {
- console.error('Failed to fetch unread notifications', error);
- }
- }, [initialState?.currentUser]);
-
- useEffect(() => {
- fetchUnreadNotifications();
- }, [fetchUnreadNotifications]);
-
- useEffect(() => {
- if (initialState?.currentUser && stompClient?.connected) {
- const subscription = stompClient.subscribe(
- '/user/queue/notification',
- (message) => {
- try {
- const newNotification: Notification = JSON.parse(message.body);
- setNotifications((prev) => [newNotification, ...prev]);
- setUnreadCount((prev) => prev + 1);
-
- antdNotification.open({
- message: getNotificationTitle(newNotification.type),
- description: newNotification.content,
- });
- } catch (error) {
- console.error('Failed to parse notification', error);
- }
- }
- );
-
- return () => {
- subscription.unsubscribe();
- };
- }
- }, [initialState?.currentUser, stompClient]);
-
- const markAsRead = useCallback(async (ids: number[]) => {
- try {
- await request(USER_API.NOTIFICATIONS_READ, {
- method: 'POST',
- data: ids,
- });
- setNotifications((prev) =>
- prev.map((n) => (ids.includes(n.id) ? { ...n, read: true } : n))
- );
- setUnreadCount((prev) => prev - ids.length);
- } catch (error) {
- console.error('Failed to mark notifications as read', error);
- }
- }, []);
-
- const getNotificationTitle = (type: NotificationType): string => {
- switch (type) {
- case NotificationType.FRIEND_REQUEST:
- return '好友请求';
- case NotificationType.FRIEND_ACCEPTED:
- return '好友请求已接受';
- case NotificationType.NEW_COMMENT:
- return '有新的评论';
- case NotificationType.NEW_LIKE:
- return '有新的点赞';
- case NotificationType.SYSTEM:
- return '系统通知';
- default:
- return '通知';
- }
- };
-
- return {
- notifications,
- unreadCount,
- markAsRead,
- fetchUnreadNotifications,
- };
+const getNotificationTitle = (type: NotificationType): string => {
+ switch (type) {
+ case NotificationType.FRIEND_REQUEST:
+ return '��������';
+ case NotificationType.FRIEND_ACCEPTED:
+ return '����������ͨ��';
+ case NotificationType.NEW_COMMENT:
+ return '������';
+ case NotificationType.NEW_REACTION:
+ return '�»���';
+ case NotificationType.NEW_LIKE:
+ return '�µ���';
+ case NotificationType.SYSTEM:
+ return 'ϵͳ֪ͨ';
+ default:
+ return '֪ͨ';
+ }
+};
+
+export const useNotifications = () => {
+ const { initialState } = useModel('@@initialState');
+ const { stompClient } = useModel('stomp');
+ const [notifications, setNotifications] = useState([]);
+ const [unreadCount, setUnreadCount] = useState(0);
+
+ const fetchUnreadNotifications = useCallback(async () => {
+ if (!initialState?.currentUser) {
+ setNotifications([]);
+ setUnreadCount(0);
+ return;
+ }
+
+ try {
+ const res = await request(`${AUTH_API.INFO}/message/unread`);
+ setNotifications(res);
+ setUnreadCount(res.filter((item) => !item.read).length);
+ } catch (error) {
+ console.error('Failed to fetch unread notifications', error);
+ }
+ }, [initialState?.currentUser]);
+
+ useEffect(() => {
+ fetchUnreadNotifications();
+ }, [fetchUnreadNotifications]);
+
+ useEffect(() => {
+ if (!initialState?.currentUser || !stompClient?.connected) {
+ return undefined;
+ }
+
+ const subscription = stompClient.subscribe('/user/queue/notification', (message) => {
+ try {
+ const newNotification: Notification = JSON.parse(message.body);
+ setNotifications((prev) => [newNotification, ...prev]);
+ setUnreadCount((prev) => prev + (newNotification.read ? 0 : 1));
+
+ antdNotification.open({
+ message: getNotificationTitle(newNotification.type),
+ description: newNotification.content,
+ });
+ } catch (error) {
+ console.error('Failed to parse notification', error);
+ }
+ });
+
+ return () => {
+ subscription.unsubscribe();
+ };
+ }, [initialState?.currentUser, stompClient]);
+
+ const markAsRead = useCallback(async (ids: number[]) => {
+ try {
+ await request(USER_API.NOTIFICATIONS_READ, {
+ method: 'POST',
+ data: ids,
+ });
+ setNotifications((prev) => prev.map((item) => (ids.includes(item.id) ? { ...item, read: true } : item)));
+ setUnreadCount((prev) => Math.max(0, prev - ids.length));
+ } catch (error) {
+ console.error('Failed to mark notifications as read', error);
+ }
+ }, []);
+
+ return {
+ notifications,
+ unreadCount,
+ markAsRead,
+ fetchUnreadNotifications,
+ };
};
diff --git a/src/models/albums.ts b/src/models/albums.ts
index 57b5228..fa844c3 100644
--- a/src/models/albums.ts
+++ b/src/models/albums.ts
@@ -23,6 +23,8 @@ export default function useAlbumsModel(): {
addPhotosToAlbum: (albumId: string, photoIds: string[]) => Promise;
removePhotosFromAlbum: (albumId: string, photoIds: string[]) => Promise;
reorderPhotos: (albumId: string, photoIds: string[]) => Promise;
+ setAlbumCover: (albumId: string, coverPhotoId: string) => Promise;
+ clearCurrentAlbum: () => void;
} {
const [albums, setAlbums] = useState([]);
const [currentAlbum, setCurrentAlbum] = useState(null);
@@ -133,7 +135,7 @@ export default function useAlbumsModel(): {
}
if (!syncState.isOnline) {
- message.info('删除操作已保存，将在联网后同步');
+ message.info('ɾѱ棬ͬ');
}
} catch (error) {
message.error('删除相册失败');
@@ -298,7 +300,7 @@ export default function useAlbumsModel(): {
);
if (!syncState.isOnline) {
- message.info('封面已设置，将在联网后同步');
+ message.info('ãͬ');
}
} catch (error) {
message.error('设置封面失败');
@@ -331,3 +333,5 @@ export default function useAlbumsModel(): {
clearCurrentAlbum,
};
}
+
+
diff --git a/src/models/theme.ts b/src/models/theme.ts
index a26888d..a11b879 100644
--- a/src/models/theme.ts
+++ b/src/models/theme.ts
@@ -97,6 +97,8 @@ export default function useThemeModel() {
mediaQuery.addEventListener('change', handleChange);
return () => mediaQuery.removeEventListener('change', handleChange);
}
+
+ return undefined;
}, [currentTheme]);
/**
@@ -201,3 +203,4 @@ export default function useThemeModel() {
fetchThemePreferences,
};
}
+
diff --git a/src/pages/account/center/components/Applications/index.tsx b/src/pages/account/center/components/Applications/index.tsx
index 57bb2f7..946f0bd 100644
--- a/src/pages/account/center/components/Applications/index.tsx
+++ b/src/pages/account/center/components/Applications/index.tsx
@@ -6,11 +6,13 @@ import {
} from '@ant-design/icons';
import { useRequest } from '@umijs/max';
import { Avatar, Card, Dropdown, List, Tooltip } from 'antd';
+import type { MenuProps } from 'antd';
import numeral from 'numeral';
import React from 'react';
import type { ListItemDataType } from '../../data.d';
import { queryFakeList } from '../../service';
import useStyles from './index.style';
+
export function formatWan(val: number) {
const v = val * 1;
if (!v || Number.isNaN(v)) return '';
@@ -28,16 +30,27 @@ export function formatWan(val: number) {
marginLeft: 2,
}}
>
- 万
+
);
}
return result;
}
+
+const moreItems: MenuProps['items'] = [
+ {
+ key: '1',
+ label: '1st menu item',
+ },
+ {
+ key: '2',
+ label: '2nd menu item',
+ },
+];
+
const Applications: React.FC = () => {
const { styles: stylesApplications } = useStyles();
- // 获取tab列表数据
const { data: listData } = useRequest(() => {
return queryFakeList({
count: 30,
@@ -50,15 +63,16 @@ const Applications: React.FC = () => {
}> = ({ activeUser, newUser }) => (
);
+
return (
rowKey="id"
@@ -81,28 +95,16 @@ const Applications: React.FC = () => {
paddingBottom: 20,
}}
actions={[
-
+
,
-
+
,
-
+
,
-
+
,
]}
@@ -120,4 +122,5 @@ const Applications: React.FC = () => {
/>
);
};
+
export default Applications;
diff --git a/src/pages/account/center/components/AvatarList/index.tsx b/src/pages/account/center/components/AvatarList/index.tsx
index 6981770..6813b0b 100644
--- a/src/pages/account/center/components/AvatarList/index.tsx
+++ b/src/pages/account/center/components/AvatarList/index.tsx
@@ -2,7 +2,9 @@ import { Avatar, Tooltip } from 'antd';
import classNames from 'classnames';
import React from 'react';
import useStyles from './index.style';
-export declare type SizeType = number | 'small' | 'default' | 'large';
+
+export type SizeType = number | 'small' | 'default' | 'large';
+
export type AvatarItemProps = {
tips: React.ReactNode;
src: string;
@@ -10,6 +12,7 @@ export type AvatarItemProps = {
style?: React.CSSProperties;
onClick?: () => void;
};
+
export type AvatarListProps = {
Item?: React.ReactElement;
size?: SizeType;
@@ -18,15 +21,21 @@ export type AvatarListProps = {
style?: React.CSSProperties;
children: React.ReactElement | React.ReactElement[];
};
-const Item: React.FC = ({ src, size, tips, onClick = () => {} }) => {
- const { styles } = useStyles();
- const avatarSizeToClassName = (size?: SizeType | 'mini') =>
+
+const useAvatarSizeToClassName = (styles: ReturnType['styles']) => {
+ return (size?: SizeType | 'mini') =>
classNames(styles.avatarItem, {
[styles.avatarItemLarge]: size === 'large',
[styles.avatarItemSmall]: size === 'small',
[styles.avatarItemMini]: size === 'mini',
});
+};
+
+const Item: React.FC = ({ src, size, tips, onClick = () => {} }) => {
+ const { styles } = useStyles();
+ const avatarSizeToClassName = useAvatarSizeToClassName(styles);
const cls = avatarSizeToClassName(size);
+
return (
{tips ? (
@@ -45,10 +54,12 @@ const Item: React.FC = ({ src, size, tips, onClick = () => {} }
);
};
+
const AvatarList: React.FC & {
Item: typeof Item;
} = ({ children, size, maxLength = 5, excessItemsStyle, ...other }) => {
const { styles } = useStyles();
+ const avatarSizeToClassName = useAvatarSizeToClassName(styles);
const numOfChildren = React.Children.count(children);
const numToShow = maxLength >= numOfChildren ? numOfChildren : maxLength;
const childrenArray = React.Children.toArray(children) as React.ReactElement[];
@@ -57,6 +68,7 @@ const AvatarList: React.FC & {
size,
}),
);
+
if (numToShow < numOfChildren) {
const cls = avatarSizeToClassName(size);
childrenWithProps.push(
@@ -65,11 +77,13 @@ const AvatarList: React.FC & {
,
);
}
+
return (
();
+ const hashMatches = `${item.title || ''} ${item.description || ''}`.match(/#([\w\u4e00-\u9fa5-]+)/g);
+ hashMatches?.forEach((tag) => tags.add(tag.replace('#', '')));
+
+ if (text.includes('\u65c5\u884c') || text.includes('trip') || text.includes('\u51fa\u6e38')) tags.add('Travel');
+ if (text.includes('\u5bb6') || text.includes('family') || text.includes('\u7236\u6bcd') || text.includes('\u5b69\u5b50')) tags.add('Family');
+ if (text.includes('\u670b\u53cb') || text.includes('\u805a\u4f1a') || text.includes('party')) tags.add('Friends');
+ if (text.includes('\u751f\u65e5') || text.includes('\u8282\u65e5') || text.includes('\u65b0\u5e74')) tags.add('Celebration');
+ if (text.includes('\u5de5\u4f5c') || text.includes('\u9879\u76ee')) tags.add('Work');
+ if (item.videoUrl) tags.add('Video');
+ if (tags.size === 0) tags.add('Everyday');
+
+ return Array.from(tags);
+};
+
+const formatItemTime = (value: StoryItem['storyItemTime']) => {
+ if (!value) return 'Pending date';
+
+ if (Array.isArray(value)) {
+ const [year, month, day, hour = 0, minute = 0] = value;
+ const minuteLabel = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
+ return `${year}.${String(month).padStart(2, '0')}.${String(day).padStart(2, '0')} ${minuteLabel}`;
+ }
+
+ const parsed = new Date(value);
+ if (Number.isNaN(parsed.getTime())) return String(value);
+
+ return new Intl.DateTimeFormat('zh-CN', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ }).format(parsed);
+};
+
+const getSortValue = (value: StoryItem['storyItemTime'] | StoryType['storyTime']) => {
+ if (!value) return 0;
+
+ if (Array.isArray(value)) {
+ const [year, month, day, hour = 0, minute = 0, second = 0] = value;
+ return new Date(year, month - 1, day, hour, minute, second).getTime();
+ }
+
+ const parsed = new Date(value);
+ return Number.isNaN(parsed.getTime()) ? 0 : parsed.getTime();
+};
+
+const getPreviewMedia = (item: StoryItem) => {
+ if (item.coverInstanceId) return { coverInstanceId: item.coverInstanceId };
+
+ const imageInstanceId = item.images?.[0] || item.relatedImageInstanceIds?.[0] || item.thumbnailInstanceId;
+ if (imageInstanceId) return { coverInstanceId: imageInstanceId };
+
+ const coverSrc = item.coverImage || item.thumbnailUrl;
+ if (coverSrc) return { coverSrc };
+
+ return {};
+};
+
+const buildLocalArchiveSummary = async (): Promise => {
+ const stories = normalizeStories(await queryTimelineList({ count: 16 }));
+ const itemResponses = await Promise.all(
+ stories.slice(0, 12).map(async (story) => {
+ if (!story.instanceId) return { story, items: [] as StoryItem[] };
+ const response = await queryStoryItem({
+ storyInstanceId: story.instanceId,
+ current: 1,
+ pageSize: 80,
+ });
+ return { story, items: normalizeItems(response) };
+ }),
+ );
+
+ const locationMap = new Map();
+ const tagMap = new Map();
+ const moments: TimelineArchiveMoment[] = [];
+
+ itemResponses.forEach(({ story, items }) => {
+ items.forEach((item, index) => {
+ const preview = getPreviewMedia(item);
+ const tags = inferTags(item);
+ const sortValue = getSortValue(item.storyItemTime) || getSortValue(story.storyTime);
+ const moment: TimelineArchiveMoment = {
+ key: item.instanceId || `${story.instanceId || 'story'}-${index}`,
+ storyInstanceId: story.instanceId,
+ storyShareId: story.shareId,
+ storyTitle: story.title || 'Untitled story',
+ storyTime: typeof story.storyTime === 'string' ? story.storyTime : undefined,
+ itemInstanceId: item.instanceId,
+ itemTitle: item.title || 'Untitled moment',
+ itemDescription:
+ item.description || item.content || 'Add one clear sentence here and this memory becomes much easier to revisit.',
+ itemTime: formatItemTime(item.storyItemTime),
+ location: item.location,
+ tags,
+ coverInstanceId: preview.coverInstanceId,
+ coverSrc: preview.coverSrc,
+ mediaCount: Math.max(item.images?.length || 0, item.videoUrl ? 1 : 0),
+ hasVideo: Boolean(item.videoUrl),
+ sortValue,
+ };
+
+ moments.push(moment);
+
+ if (item.location) {
+ const current = locationMap.get(item.location) || {
+ key: item.location,
+ title: item.location,
+ count: 0,
+ subtitle: story.title || 'Untitled story',
+ storyInstanceId: story.instanceId,
+ storyShareId: story.shareId,
+ coverInstanceId: preview.coverInstanceId,
+ coverSrc: preview.coverSrc,
+ sampleMomentTitle: moment.itemTitle,
+ };
+ current.count += 1;
+ current.subtitle = current.subtitle || story.title || 'Untitled story';
+ current.sampleMomentTitle = current.sampleMomentTitle || moment.itemTitle;
+ current.coverInstanceId = current.coverInstanceId || preview.coverInstanceId;
+ current.coverSrc = current.coverSrc || preview.coverSrc;
+ current.storyShareId = current.storyShareId || story.shareId;
+ locationMap.set(item.location, current);
+ }
+
+ tags.forEach((tag) => {
+ const current = tagMap.get(tag) || {
+ key: tag,
+ title: tag,
+ count: 0,
+ subtitle: story.title || 'Untitled story',
+ storyInstanceId: story.instanceId,
+ storyShareId: story.shareId,
+ coverInstanceId: preview.coverInstanceId,
+ coverSrc: preview.coverSrc,
+ sampleMomentTitle: moment.itemTitle,
+ };
+ current.count += 1;
+ current.subtitle = current.subtitle || story.title || 'Untitled story';
+ current.sampleMomentTitle = current.sampleMomentTitle || moment.itemTitle;
+ current.coverInstanceId = current.coverInstanceId || preview.coverInstanceId;
+ current.coverSrc = current.coverSrc || preview.coverSrc;
+ current.storyShareId = current.storyShareId || story.shareId;
+ tagMap.set(tag, current);
+ });
+ });
+ });
+
+ return {
+ source: 'local',
+ storiesIndexed: stories.length,
+ locations: Array.from(locationMap.values()).sort((a, b) => b.count - a.count).slice(0, 8),
+ tags: Array.from(tagMap.values()).sort((a, b) => b.count - a.count).slice(0, 12),
+ moments: moments.sort((a, b) => b.sortValue - a.sortValue),
+ shareableStories: stories.filter((story) => Boolean(story.shareId)).length,
+ videoMoments: moments.filter((moment) => moment.hasVideo).length,
+ };
+};
+
+const ArchivePage: React.FC = () => {
+ const [searchParams] = useSearchParams();
+ const summaryRequest = useRequest(async (): Promise => {
+ try {
+ const response = await queryTimelineArchiveSummary(8, 12);
+ const summary = normalizeArchiveSummary(response);
+ if (summary) {
+ return {
+ ...summary,
+ source: 'backend',
+ };
+ }
+ } catch (error) {
+ console.warn('Failed to load archive summary from backend, falling back to local inference.', error);
+ }
+
+ return buildLocalArchiveSummary();
+ });
+
+ const data = summaryRequest.data as ArchivePageSummary | undefined;
+ const { loading } = summaryRequest;
+
+ const requestedType = searchParams.get('type') === 'tag' ? 'tag' : 'location';
+ const requestedValue = searchParams.get('value') || '';
+
+ const selection = useMemo(() => {
+ if (!data) {
+ return {
+ activeType: 'location' as ArchiveBucketType,
+ activeCollection: [] as TimelineArchiveBucket[],
+ activeBucket: undefined as TimelineArchiveBucket | undefined,
+ };
+ }
+
+ const fallbackType: ArchiveBucketType = data.locations.length > 0 ? 'location' : 'tag';
+ const requestedCollection = requestedType === 'location' ? data.locations : data.tags;
+ const activeType: ArchiveBucketType = requestedCollection.length > 0 ? requestedType : fallbackType;
+ const activeCollection = activeType === 'location' ? data.locations : data.tags;
+ const activeBucket = activeCollection.find((item) => item.key === requestedValue) || activeCollection[0];
+
+ return {
+ activeType,
+ activeCollection,
+ activeBucket,
+ };
+ }, [data, requestedType, requestedValue]);
+
+ useEffect(() => {
+ if (!data || !selection.activeBucket) return;
+
+ if (selection.activeType !== requestedType || selection.activeBucket.key !== requestedValue) {
+ history.replace(
+ `/archive?type=${selection.activeType}&value=${encodeURIComponent(selection.activeBucket.key)}`,
+ );
+ }
+ }, [data, requestedType, requestedValue, selection]);
+
+ const exploreRequest = useRequest(
+ async () => {
+ if (!data || data.source === 'local' || !selection.activeBucket) return undefined;
+ const response = await queryTimelineArchiveExplore({
+ type: selection.activeType,
+ value: selection.activeBucket.key,
+ limit: 12,
+ });
+ return normalizeArchiveExplore(response);
+ },
+ {
+ refreshDeps: [data?.source, selection.activeType, selection.activeBucket?.key],
+ },
+ );
+ const exploreData = exploreRequest.data as TimelineArchiveExplore | undefined;
+
+ if (loading || !data) {
+ return (
+ = ({
key={item.instanceId}
item={item}
index={index}
- viewMode={viewMode}
+ viewMode={viewMode === 'large' ? 'large' : 'small'}
batchMode={batchMode}
isSelected={selectedRowKeys.includes(item.instanceId)}
imageSize={imageSize}
@@ -103,3 +103,4 @@ const GridView: FC = ({
};
export default GridView;
+
diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx
index 725a923..f9d5b1b 100644
--- a/src/pages/gallery/index.tsx
+++ b/src/pages/gallery/index.tsx
@@ -1,4 +1,4 @@
-// src/pages/gallery/index.tsx
+// src/pages/gallery/index.tsx
import { ImageItem } from '@/pages/gallery/typings';
import {
deleteImage,
@@ -204,6 +204,7 @@ const Gallery: FC = () => {
const uploadUrlRes = await getUploadUrl(fileName);
if (uploadUrlRes.code !== 200) throw new Error('获取上传链接失败');
const uploadUrl = uploadUrlRes.data;
+ if (!uploadUrl) throw new Error('Missing upload URL');
// 2. 上传视频到 MinIO
await fetch(uploadUrl, {
@@ -247,14 +248,16 @@ const Gallery: FC = () => {
const thumbName = `thumb-${Date.now()}.jpg`;
const thumbUrlRes = await getUploadUrl(thumbName);
if (thumbUrlRes.code === 200) {
- await fetch(thumbUrlRes.data, { method: 'PUT', body: thumbnailBlob });
+ const thumbUploadUrl = thumbUrlRes.data;
+ if (!thumbUploadUrl) throw new Error('Missing thumbnail upload URL');
+ await fetch(thumbUploadUrl, { method: 'PUT', body: thumbnailBlob });
const thumbMetaRes = await saveFileMetadata({
imageName: thumbName,
objectKey: thumbName,
size: thumbnailBlob.size,
contentType: 'image/jpeg',
});
- if (thumbMetaRes.code === 200) {
+ if (thumbMetaRes.code === 200 && thumbMetaRes.data) {
thumbnailInstanceId = thumbMetaRes.data;
}
}
@@ -599,3 +602,5 @@ const Gallery: FC = () => {
};
export default Gallery;
+
+
diff --git a/src/pages/home/index.less b/src/pages/home/index.less
new file mode 100644
index 0000000..05a9408
--- /dev/null
+++ b/src/pages/home/index.less
@@ -0,0 +1,495 @@
+.timeline-home {
+ --timeline-home-bg: #f4efe7;
+ --timeline-home-panel: rgba(255, 250, 244, 0.84);
+ --timeline-home-border: rgba(27, 35, 54, 0.09);
+ --timeline-home-ink: #182033;
+ --timeline-home-muted: #5f6b7f;
+ --timeline-home-accent: #ef6f45;
+ --timeline-home-accent-deep: #cf542c;
+ --timeline-home-cool: #1f4d7a;
+ background:
+ radial-gradient(circle at top left, rgba(239, 111, 69, 0.12), transparent 28%),
+ radial-gradient(circle at 85% 20%, rgba(31, 77, 122, 0.14), transparent 24%),
+ linear-gradient(180deg, #fbf7f1 0%, #f3ede3 100%);
+ min-height: calc(100vh - 104px);
+ padding: 8px 0 32px;
+}
+
+.timeline-home__panel {
+ backdrop-filter: blur(18px);
+ background: var(--timeline-home-panel);
+ border: 1px solid var(--timeline-home-border);
+ border-radius: 28px;
+ box-shadow: 0 30px 80px rgba(24, 32, 51, 0.1);
+}
+
+.timeline-home__hero {
+ display: grid;
+ gap: 24px;
+ grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
+ overflow: hidden;
+ padding: 32px;
+ position: relative;
+}
+
+.timeline-home__glow {
+ border-radius: 999px;
+ filter: blur(12px);
+ position: absolute;
+}
+
+.timeline-home__glow--left {
+ background: rgba(239, 111, 69, 0.22);
+ height: 220px;
+ left: -44px;
+ top: -40px;
+ width: 220px;
+}
+
+.timeline-home__glow--right {
+ background: rgba(31, 77, 122, 0.18);
+ height: 180px;
+ right: -24px;
+ top: 24px;
+ width: 180px;
+}
+
+.timeline-home__hero-copy,
+.timeline-home__hero-side {
+ position: relative;
+ z-index: 1;
+}
+
+.timeline-home__pill,
+.timeline-home__story-topline .ant-tag,
+.timeline-home__media-tag {
+ background: rgba(24, 32, 51, 0.08);
+ border-radius: 999px;
+ color: var(--timeline-home-ink);
+ font-size: 12px;
+ margin: 0;
+ padding: 6px 10px;
+}
+
+.timeline-home__hero-copy h1,
+.timeline-home__section-head h2 {
+ color: var(--timeline-home-ink);
+ font-family: Georgia, "Times New Roman", "Songti SC", serif;
+ letter-spacing: -0.03em;
+ margin: 0;
+}
+
+.timeline-home__hero-copy h1 {
+ font-size: clamp(32px, 5vw, 56px);
+ line-height: 1.02;
+ margin-top: 18px;
+ max-width: 9ch;
+}
+
+.timeline-home__hero-copy p,
+.timeline-home__story-card p,
+.timeline-home__spotlight-copy p {
+ color: var(--timeline-home-muted);
+ line-height: 1.75;
+}
+
+.timeline-home__hero-copy p {
+ font-size: 16px;
+ margin: 16px 0 0;
+ max-width: 62ch;
+}
+
+.timeline-home__hero-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-top: 28px;
+}
+
+.timeline-home__hero-actions .ant-btn-primary {
+ background: linear-gradient(135deg, var(--timeline-home-accent), var(--timeline-home-accent-deep));
+ border: none;
+ box-shadow: 0 14px 28px rgba(239, 111, 69, 0.28);
+}
+
+.timeline-home__hero-side {
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(250, 242, 232, 0.9));
+ border: 1px solid rgba(255, 255, 255, 0.7);
+ border-radius: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ padding: 22px;
+}
+
+.timeline-home__profile {
+ align-items: center;
+ display: flex;
+ gap: 14px;
+}
+
+.timeline-home__profile strong {
+ color: var(--timeline-home-ink);
+ display: block;
+ font-size: 18px;
+ margin-top: 4px;
+}
+
+.timeline-home__eyebrow {
+ color: rgba(24, 32, 51, 0.62);
+ display: block;
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+}
+
+.timeline-home__metrics {
+ display: grid;
+ gap: 12px;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.timeline-home__metric-card {
+ background: rgba(255, 255, 255, 0.72);
+ border: 1px solid rgba(24, 32, 51, 0.08);
+ border-radius: 20px;
+ min-height: 112px;
+ padding: 18px;
+}
+
+.timeline-home__metric-card span,
+.timeline-home__story-meta span,
+.timeline-home__media-copy span {
+ color: var(--timeline-home-muted);
+}
+
+.timeline-home__metric-card strong {
+ color: var(--timeline-home-ink);
+ display: block;
+ font-size: clamp(28px, 4vw, 38px);
+ letter-spacing: -0.04em;
+ margin-top: 12px;
+}
+
+.timeline-home__section {
+ margin-top: 24px;
+}
+
+.timeline-home__section-head {
+ align-items: flex-end;
+ display: flex;
+ gap: 16px;
+ justify-content: space-between;
+ margin-bottom: 16px;
+}
+
+.timeline-home__section-head--stacked {
+ align-items: flex-start;
+}
+
+.timeline-home__section-head h2 {
+ font-size: clamp(24px, 3vw, 34px);
+ line-height: 1.1;
+ margin-top: 6px;
+}
+
+.timeline-home__story-grid {
+ display: grid;
+ gap: 16px;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.timeline-home__story-card,
+.timeline-home__media-card,
+.timeline-home__spotlight-card {
+ appearance: none;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+ text-align: left;
+ width: 100%;
+}
+
+.timeline-home__story-card {
+ background: rgba(255, 255, 255, 0.72);
+ border: 1px solid rgba(24, 32, 51, 0.08);
+ border-radius: 24px;
+ box-shadow: 0 16px 30px rgba(24, 32, 51, 0.06);
+ min-height: 240px;
+ padding: 22px;
+ transition:
+ transform 180ms ease,
+ box-shadow 180ms ease,
+ border-color 180ms ease;
+}
+
+.timeline-home__story-card:hover,
+.timeline-home__media-card:hover,
+.timeline-home__spotlight-card:hover {
+ box-shadow: 0 22px 44px rgba(24, 32, 51, 0.12);
+ transform: translateY(-4px);
+}
+
+.timeline-home__story-topline,
+.timeline-home__story-meta {
+ align-items: center;
+ display: flex;
+ gap: 10px;
+ justify-content: space-between;
+}
+
+.timeline-home__story-topline {
+ margin-bottom: 18px;
+}
+
+.timeline-home__story-topline span:last-child {
+ color: var(--timeline-home-muted);
+ font-size: 13px;
+}
+
+.timeline-home__story-card h3 {
+ color: var(--timeline-home-ink);
+ font-size: 22px;
+ line-height: 1.2;
+ margin: 0;
+}
+
+.timeline-home__story-card p {
+ font-size: 14px;
+ margin: 14px 0 20px;
+ min-height: 72px;
+}
+
+.timeline-home__story-meta {
+ border-top: 1px solid rgba(24, 32, 51, 0.08);
+ font-size: 13px;
+ gap: 12px;
+ padding-top: 14px;
+}
+
+.timeline-home__story-meta span {
+ align-items: center;
+ display: inline-flex;
+ gap: 6px;
+}
+
+.timeline-home__overview {
+ display: grid;
+ gap: 24px;
+ grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
+ margin-top: 24px;
+}
+
+.timeline-home__media-panel,
+.timeline-home__spotlight {
+ padding: 24px;
+}
+
+.timeline-home__media-grid {
+ display: grid;
+ gap: 14px;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.timeline-home__media-card {
+ border-radius: 22px;
+ min-height: 204px;
+ overflow: hidden;
+ position: relative;
+}
+
+.timeline-home__media-card img {
+ display: block;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 240ms ease;
+ width: 100%;
+}
+
+.timeline-home__media-card:hover img {
+ transform: scale(1.03);
+}
+
+.timeline-home__media-overlay {
+ background: linear-gradient(180deg, rgba(12, 17, 28, 0.04), rgba(12, 17, 28, 0.82));
+ inset: 0;
+ position: absolute;
+}
+
+.timeline-home__media-copy {
+ bottom: 14px;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ left: 14px;
+ position: absolute;
+ right: 14px;
+ z-index: 1;
+}
+
+.timeline-home__media-copy strong {
+ color: #fffaf4;
+ font-size: 16px;
+}
+
+.timeline-home__media-copy span {
+ color: rgba(255, 250, 244, 0.78);
+ font-size: 13px;
+}
+
+.timeline-home__media-icon {
+ color: #fff6ef;
+ font-size: 26px;
+ position: absolute;
+ right: 14px;
+ top: 14px;
+ z-index: 1;
+}
+
+.timeline-home__media-skeleton {
+ align-items: center;
+ display: flex !important;
+ height: 100%;
+ justify-content: center;
+ width: 100%;
+}
+
+.timeline-home__spotlight-list {
+ display: grid;
+ gap: 14px;
+}
+
+.timeline-home__spotlight-card {
+ align-items: center;
+ background: rgba(255, 255, 255, 0.62);
+ border: 1px solid rgba(24, 32, 51, 0.08);
+ border-radius: 22px;
+ display: grid;
+ gap: 14px;
+ grid-template-columns: auto minmax(0, 1fr) auto;
+ padding: 18px;
+}
+
+.timeline-home__spotlight-icon {
+ align-items: center;
+ background: linear-gradient(135deg, rgba(239, 111, 69, 0.18), rgba(31, 77, 122, 0.18));
+ border-radius: 18px;
+ color: var(--timeline-home-cool);
+ display: inline-flex;
+ font-size: 20px;
+ height: 48px;
+ justify-content: center;
+ width: 48px;
+}
+
+.timeline-home__spotlight-copy strong {
+ color: var(--timeline-home-ink);
+ display: block;
+ font-size: 18px;
+}
+
+.timeline-home__spotlight-copy p {
+ font-size: 14px;
+ margin: 8px 0 0;
+}
+
+.timeline-home__spotlight-action {
+ align-items: center;
+ color: var(--timeline-home-cool);
+ display: inline-flex;
+ font-size: 13px;
+ gap: 6px;
+ white-space: nowrap;
+}
+
+.timeline-home__empty {
+ align-items: center;
+ background: rgba(255, 255, 255, 0.56);
+ border: 1px dashed rgba(24, 32, 51, 0.16);
+ border-radius: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+ justify-content: center;
+ min-height: 260px;
+ padding: 24px;
+}
+
+.timeline-home__empty--soft {
+ min-height: 360px;
+}
+
+.timeline-home__reveal {
+ animation: timeline-home-rise 560ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+@keyframes timeline-home-rise {
+ from {
+ opacity: 0;
+ transform: translate3d(0, 18px, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@media (max-width: 1280px) {
+ .timeline-home__story-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .timeline-home__overview {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 900px) {
+ .timeline-home__hero {
+ grid-template-columns: 1fr;
+ padding: 24px;
+ }
+
+ .timeline-home__media-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+
+@media (max-width: 640px) {
+ .timeline-home {
+ padding-bottom: 24px;
+ }
+
+ .timeline-home__hero,
+ .timeline-home__media-panel,
+ .timeline-home__spotlight {
+ border-radius: 24px;
+ padding: 20px;
+ }
+
+ .timeline-home__metrics,
+ .timeline-home__story-grid,
+ .timeline-home__media-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .timeline-home__section-head,
+ .timeline-home__spotlight-card {
+ grid-template-columns: 1fr;
+ }
+
+ .timeline-home__section-head {
+ align-items: flex-start;
+ }
+
+ .timeline-home__story-card p {
+ min-height: 0;
+ }
+
+ .timeline-home__spotlight-card {
+ justify-items: flex-start;
+ }
+}
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
new file mode 100644
index 0000000..32b0a16
--- /dev/null
+++ b/src/pages/home/index.tsx
@@ -0,0 +1,378 @@
+import type { ImageItem } from '@/pages/gallery/typings';
+import type { StoryType } from '@/pages/story/data.d';
+import { queryCurrent } from '@/pages/account/center/service';
+import { queryTimelineList } from '@/pages/story/service';
+import { getImagesList } from '@/services/file/api';
+import { getAuthization } from '@/utils/userUtils';
+import {
+ ArrowRightOutlined,
+ CalendarOutlined,
+ CameraOutlined,
+ ClusterOutlined,
+ PlayCircleFilled,
+ ThunderboltOutlined,
+} from '@ant-design/icons';
+import { history, useRequest } from '@umijs/max';
+import { Avatar, Button, Empty, Skeleton, Tag } from 'antd';
+import React from 'react';
+import './index.less';
+
+type HomeSnapshot = {
+ mediaList: ImageItem[];
+ mediaTotal: number;
+ stories: StoryType[];
+ totalMoments: number;
+ user: {
+ avatar?: string;
+ nickname?: React.ReactNode;
+ unreadCount?: number;
+ };
+};
+
+const spotlightCards = [
+ {
+ action: '打开故事',
+ description: '把照片、视频和文字组织成真正有起伏的生活叙事。',
+ icon: (response: any, fallback: T): T => {
+ if (response?.data !== undefined) {
+ return response.data as T;
+ }
+
+ if (response !== undefined) {
+ return response as T;
+ }
+
+ return fallback;
+};
+
+const getGreeting = () => {
+ const hour = new Date().getHours();
+
+ if (hour < 6) {
+ return '夜深了';
+ }
+
+ if (hour < 11) {
+ return '早上好';
+ }
+
+ if (hour < 14) {
+ return '中午好';
+ }
+
+ if (hour < 18) {
+ return '下午好';
+ }
+
+ return '晚上好';
+};
+
+const formatDateLabel = (value?: string) => {
+ if (!value) {
+ return '等待新的记录';
+ }
+
+ const date = new Date(value);
+
+ if (Number.isNaN(date.getTime())) {
+ return value;
+ }
+
+ return new Intl.DateTimeFormat('zh-CN', {
+ day: 'numeric',
+ month: 'short',
+ }).format(date);
+};
+
+const buildMediaUrl = (item: ImageItem) => {
+ const auth = encodeURIComponent(getAuthization());
+ const previewId = item.thumbnailInstanceId || item.instanceId;
+
+ return `/api/file/image-low-res/${previewId}?Authorization=${auth}`;
+};
+
+const Home: React.FC = () => {
+ const homeRequest = useRequest(async () => {
+ const [userResult, storyResult, mediaResult] = await Promise.allSettled([
+ queryCurrent(),
+ queryTimelineList({ count: 6 }),
+ getImagesList({ current: 1, pageSize: 8 }),
+ ]);
+
+ const user = unwrapPayload(
+ userResult.status === 'fulfilled' ? userResult.value : undefined,
+ {},
+ );
+
+ const storyPayload = unwrapPayload(
+ storyResult.status === 'fulfilled' ? storyResult.value : undefined,
+ [],
+ );
+ const stories = Array.isArray(storyPayload) ? storyPayload.slice(0, 4) : [];
+
+ const mediaPayload = unwrapPayload<{ list?: ImageItem[]; total?: number }>(
+ mediaResult.status === 'fulfilled' ? mediaResult.value : undefined,
+ {},
+ );
+ const mediaList = Array.isArray(mediaPayload?.list) ? mediaPayload.list.slice(0, 6) : [];
+ const totalMoments = stories.reduce((sum, story) => sum + Number(story.itemCount || 0), 0);
+
+ return {
+ mediaList,
+ mediaTotal: Number(mediaPayload?.total || mediaList.length),
+ stories,
+ totalMoments,
+ user: {
+ avatar: user?.avatar,
+ nickname: user?.nickname || user?.name || '你',
+ unreadCount: Number(user?.unreadCount || 0),
+ },
+ } satisfies HomeSnapshot;
+ });
+ const data = (homeRequest.data as HomeSnapshot | undefined) ?? emptySnapshot;
+ const { loading, refresh } = homeRequest;
+
+ return (
+ => {
+ const stories = normalizeStories(await queryTimelineList({ count: 50 }));
+ const currentYear = new Date().getFullYear();
+ const inYear = stories.filter((story) => {
+ const date = getStoryDate(story);
+ return !date || date.getFullYear() === currentYear;
+ });
+
+ let report: YearlyReportResponse | undefined;
+ try {
+ report = normalizeYearlyReport(await queryTimelineYearlyReport(currentYear));
+ } catch (error) {
+ report = undefined;
+ }
+
+ const monthlyCounts = report?.monthlyBreakdown?.length
+ ? report.monthlyBreakdown.map((item, index) => ({
+ label: item.month || buildMonthLabel(index + 1),
+ count: Number(item.count || 0),
+ }))
+ : buildFallbackMonthlyCounts(inYear, currentYear);
+
+ const busiestMonth =
+ monthlyCounts.find((item) => item.label === report?.mostActiveMonth) ||
+ monthlyCounts.reduce(
+ (best, item) => (item.count > best.count ? item : best),
+ monthlyCounts[0] || { label: buildMonthLabel(1), count: 0 },
+ );
+
+ const featuredStory = [...inYear].sort(
+ (a, b) => Number(b.itemCount || 0) - Number(a.itemCount || 0),
+ )[0];
+
+ return {
+ year: report?.year || currentYear,
+ stories: inYear,
+ totalStories: inYear.length,
+ totalMoments:
+ typeof report?.totalMoments === 'number'
+ ? report.totalMoments
+ : inYear.reduce((sum, story) => sum + Number(story.itemCount || 0), 0),
+ sharedStories: inYear.filter((story) => Boolean(story.shareId)).length,
+ busiestMonth,
+ monthlyCounts,
+ featuredStory,
+ topLocation: report?.topLocation,
+ topTag: report?.topTag,
+ };
+ });
+
+ const data = reviewRequest.data as ReviewSummary | undefined;
+ const { loading, refresh } = reviewRequest;
+
+ if (loading || !data) {
+ return (
+ = ({ data, actions, embedded = false }) => {
+ const { styles } = useStyles();
+ const heroVideoSrc = resolveVideoSrc(data.hero?.videoInstanceId);
+
+ const showcaseCard = (
+ {showcaseCard} ;
+};
+
+export default StoryShowcase;
\ No newline at end of file
diff --git a/src/pages/share/[shareId].tsx b/src/pages/share/[shareId].tsx
index d8f9bb5..8c19b12 100644
--- a/src/pages/share/[shareId].tsx
+++ b/src/pages/share/[shareId].tsx
@@ -1,91 +1,141 @@
-import { PageContainer } from '@ant-design/pro-components';
-import { useParams, useServerData, history } from '@umijs/max';
+import { ArrowLeftOutlined, CopyOutlined, HomeOutlined } from '@ant-design/icons';
+import { history, request, useParams, useRequest } from '@umijs/max';
+import { Button, Result, Skeleton, message } from 'antd';
import React from 'react';
import { Helmet } from 'react-helmet';
-import { Card, Typography, Avatar, Result, Button } from 'antd';
-import TimelineImage from '@/components/TimelineImage';
-import ReactPlayer from 'react-player';
+import StoryShowcase from './StoryShowcase';
+import { normalizePublicShowcase } from './showcase-utils';
import useStyles from './style.style';
-const { Title, Paragraph } = Typography;
+interface PublicStoryItem {
+ instanceId?: string;
+ storyItemTime?: string | number[];
+ title?: string;
+ description?: string;
+ content?: string;
+ createTime?: string;
+ authorAvatar?: string;
+ authorName?: string;
+ ownerName?: string;
+ video?: string;
+ videoUrl?: string;
+ thumbnailUrl?: string;
+ thumbnailInstanceId?: string;
+ images?: string[];
+ relatedImageInstanceIds?: string[];
+ location?: string;
+ coverInstanceId?: string;
+ shareTitle?: string;
+ shareDescription?: string;
+ shareQuote?: string;
+ heroMomentId?: string;
+ featuredMomentIds?: string[];
+ featuredMoments?: PublicStoryItem[];
+}
+
+const fetchShareStory = async (shareId: string) => {
+ const candidates = [
+ `/api/story/item/public/story/item/${shareId}`,
+ `/story/item/public/story/item/${shareId}`,
+ `/api/public/story/${shareId}`,
+ ];
+
+ for (const url of candidates) {
+ try {
+ const response = await request<{ data?: PublicStoryItem } | PublicStoryItem>(url, {
+ method: 'GET',
+ skipErrorHandler: true,
+ });
+ if (!response) continue;
+ if ('data' in response) return response.data;
+ return response;
+ } catch (error) {
+ console.warn('Failed to fetch public share story from', url, error);
+ }
+ }
+
+ return undefined;
+};
const SharePage: React.FC = () => {
const { styles } = useStyles();
- const params = useParams();
- const { shareId } = params;
- const serverData = useServerData();
- const storyItem = serverData?.storyItem;
+ const { shareId } = useParams<{ shareId: string }>();
+ const shareRequest = useRequest(
+ async () => {
+ if (!shareId) return undefined;
+ return fetchShareStory(shareId);
+ },
+ {
+ refreshDeps: [shareId],
+ },
+ );
- const handleOpenInApp = () => {
- // TODO: Implement deep linking logic here
- // Example: window.location.href = `timeline://story/${shareId}`;
- console.log('Attempting to open in app...');
- };
+ const storyItem = shareRequest.data as PublicStoryItem | undefined;
+ const { loading } = shareRequest;
- if (!storyItem) {
+ if (loading) {
+ return (
+ history.push('/')}>Back Home}
+ title="Share is not available"
+ subTitle="This public link may be invalid, or the backend public endpoint is not open yet."
+ extra={
+
+ }
/>
);
}
+ const showcase = normalizePublicShowcase(storyItem, shareId);
+ const pageUrl = typeof window !== 'undefined' ? window.location.href : `/share/${shareId}`;
+
return (
-
+ <>
- {storyItem.title}
-
-
-
- {/* */}
+ {showcase.title}
+
+
+
- 在 App 中打开}
- >
-
- {storyItem.title}
-
- {storyItem.description}
- {storyItem.video && (
-
-
+ history.push('/story')}>
+ Return to stories
+
+ }
+ />
+ );
+ }
+
+ const draft = loadShareDraft(storyId);
+ const showcase = buildPreviewShowcase(payload.story, payload.items, draft);
+ const previewUrl = typeof window !== 'undefined' ? window.location.href : `/share/preview/${storyId}`;
+ const publicUrl = payload.story.shareId ? `/share/${payload.story.shareId}` : undefined;
+ const studioUrl = `/share/studio/${storyId}`;
+
+ return (
+ <>
+
+ {`${showcase.title} - Share Preview`}
+
+
+ ;
+
+const readDraftMap = (): DraftMap => {
+ if (typeof window === 'undefined') return {};
+
+ try {
+ const raw = window.localStorage.getItem(STORAGE_KEY);
+ if (!raw) return {};
+ const parsed = JSON.parse(raw) as DraftMap;
+ return parsed && typeof parsed === 'object' ? parsed : {};
+ } catch {
+ return {};
+ }
+};
+
+const writeDraftMap = (draftMap: DraftMap) => {
+ if (typeof window === 'undefined') return;
+
+ try {
+ window.localStorage.setItem(STORAGE_KEY, JSON.stringify(draftMap));
+ } catch {
+ // Ignore storage failures and keep the editor usable.
+ }
+};
+
+export const loadShareDraft = (storyId: string): ShareDraft | undefined => {
+ if (!storyId) return undefined;
+ const draftMap = readDraftMap();
+ return draftMap[storyId];
+};
+
+export const saveShareDraft = (draft: ShareDraft) => {
+ if (!draft.storyId) return;
+ const draftMap = readDraftMap();
+ draftMap[draft.storyId] = {
+ ...draft,
+ updatedAt: draft.updatedAt || new Date().toISOString(),
+ };
+ writeDraftMap(draftMap);
+};
+
+export const clearShareDraft = (storyId: string) => {
+ if (!storyId) return;
+ const draftMap = readDraftMap();
+ delete draftMap[storyId];
+ writeDraftMap(draftMap);
+};
diff --git a/src/pages/share/showcase-utils.ts b/src/pages/share/showcase-utils.ts
new file mode 100644
index 0000000..cfd39dc
--- /dev/null
+++ b/src/pages/share/showcase-utils.ts
@@ -0,0 +1,333 @@
+import type { ReactNode } from 'react';
+import type { StoryItem, StoryType } from '@/pages/story/data.d';
+import type { ShareDraft } from './shareDraft';
+
+export type ShareAction = {
+ key: string;
+ label: string;
+ primary?: boolean;
+ icon?: ReactNode;
+ onClick: () => void;
+};
+
+export type ShareStat = {
+ label: string;
+ value: number | string;
+};
+
+export type ShareMedia = {
+ key: string;
+ title?: string;
+ imageInstanceId?: string;
+ src?: string;
+ videoInstanceId?: string;
+ thumbnailInstanceId?: string;
+};
+
+export type ShareMoment = {
+ key: string;
+ title: string;
+ description: string;
+ timeLabel: string;
+ location?: string;
+ storyTitle?: string;
+ mediaCount: number;
+ cover?: ShareMedia;
+ tags?: string[];
+};
+
+export type StoryShowcaseData = {
+ badge: string;
+ title: string;
+ description: string;
+ authorName: string;
+ authorAvatar?: string;
+ timeLabel?: string;
+ locationLabel?: string;
+ hero: ShareMedia | undefined;
+ quote?: string;
+ stats: ShareStat[];
+ gallery: ShareMedia[];
+ moments: ShareMoment[];
+ footnote?: string;
+};
+
+type PublicStoryItem = {
+ instanceId?: string;
+ storyItemTime?: string | number[];
+ title?: string;
+ description?: string;
+ content?: string;
+ createTime?: string;
+ authorAvatar?: string;
+ authorName?: string;
+ ownerName?: string;
+ video?: string;
+ videoUrl?: string;
+ thumbnailUrl?: string;
+ thumbnailInstanceId?: string;
+ images?: string[];
+ relatedImageInstanceIds?: string[];
+ location?: string;
+ coverInstanceId?: string;
+ shareTitle?: string;
+ shareDescription?: string;
+ shareQuote?: string;
+ heroMomentId?: string;
+ featuredMomentIds?: string[];
+ featuredMoments?: PublicStoryItem[];
+};
+
+const pad = (value: number) => String(value).padStart(2, '0');
+
+export const formatStoryTime = (value?: string | number[]) => {
+ if (!value) return 'Pending date';
+
+ if (Array.isArray(value)) {
+ const [year, month, day, hour = 0, minute = 0] = value;
+ return `${year}.${pad(month)}.${pad(day)} ${pad(hour)}:${pad(minute)}`;
+ }
+
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return String(value);
+
+ return new Intl.DateTimeFormat('zh-CN', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ }).format(date);
+};
+
+const getSortValue = (value?: string | number[]) => {
+ if (!value) return 0;
+
+ if (Array.isArray(value)) {
+ const [year, month, day, hour = 0, minute = 0, second = 0] = value;
+ return new Date(year, month - 1, day, hour, minute, second).getTime();
+ }
+
+ const date = new Date(value);
+ return Number.isNaN(date.getTime()) ? 0 : date.getTime();
+};
+
+const pickHeroFromItem = (item?: Partial | PublicStoryItem): ShareMedia | undefined => {
+ if (!item) return undefined;
+
+ const publicVideo = 'video' in item ? item.video : undefined;
+ const videoInstanceId = item.videoUrl || publicVideo;
+ const thumbnailInstanceId = item.thumbnailInstanceId || item.thumbnailUrl;
+ if (videoInstanceId) {
+ return {
+ key: `video-${videoInstanceId}`,
+ title: item.title,
+ videoInstanceId,
+ thumbnailInstanceId,
+ };
+ }
+
+ const imageInstanceId =
+ item.coverInstanceId ||
+ item.images?.[0] ||
+ item.relatedImageInstanceIds?.[0] ||
+ item.thumbnailInstanceId;
+
+ if (imageInstanceId) {
+ return {
+ key: `image-${imageInstanceId}`,
+ title: item.title,
+ imageInstanceId,
+ };
+ }
+
+ if (item.thumbnailUrl) {
+ return {
+ key: `thumb-${item.thumbnailUrl}`,
+ title: item.title,
+ src: item.thumbnailUrl,
+ };
+ }
+
+ return undefined;
+};
+
+const collectGalleryImages = (items: Array) => {
+ const seen = new Set();
+ const gallery: ShareMedia[] = [];
+
+ items.forEach((item) => {
+ const sources = [
+ item.coverInstanceId,
+ ...(item.images || []),
+ ...(item.relatedImageInstanceIds || []),
+ ].filter(Boolean) as string[];
+
+ sources.forEach((imageId) => {
+ if (seen.has(imageId) || gallery.length >= 12) return;
+ seen.add(imageId);
+ gallery.push({
+ key: `gallery-${imageId}`,
+ title: item.title,
+ imageInstanceId: imageId,
+ });
+ });
+ });
+
+ return gallery;
+};
+
+const buildLocationLabel = (items: Array<{ location?: string }>, fallback?: string) => {
+ const locations = Array.from(new Set(items.map((item) => item.location).filter(Boolean))) as string[];
+ if (locations.length === 0) return fallback;
+ if (locations.length === 1) return locations[0];
+ return `${locations[0]} +${locations.length - 1} more places`;
+};
+
+const orderPreviewItems = (items: StoryItem[], draft?: ShareDraft) => {
+ const sortedItems = [...items].sort(
+ (left, right) => getSortValue(right.storyItemTime) - getSortValue(left.storyItemTime),
+ );
+
+ if (!draft?.heroMomentId) return sortedItems;
+
+ const heroIndex = sortedItems.findIndex((item) => item.instanceId === draft.heroMomentId);
+ if (heroIndex === -1) return sortedItems;
+
+ const [heroItem] = sortedItems.splice(heroIndex, 1);
+ sortedItems.unshift(heroItem);
+ return sortedItems;
+};
+
+const selectFeaturedItems = (orderedItems: StoryItem[], draft?: ShareDraft) => {
+ const featuredIds = (draft?.featuredMomentIds || []).filter(Boolean);
+ if (featuredIds.length === 0) return orderedItems.slice(0, 6);
+
+ const byId = new Map(orderedItems.map((item) => [item.instanceId, item]));
+ const selected = featuredIds
+ .map((id) => byId.get(id))
+ .filter((item): item is StoryItem => Boolean(item));
+
+ return selected.length > 0 ? selected.slice(0, 6) : orderedItems.slice(0, 6);
+};
+
+export const buildPreviewShowcase = (
+ story: StoryType,
+ items: StoryItem[],
+ draft?: ShareDraft,
+): StoryShowcaseData => {
+ const orderedItems = orderPreviewItems(items, draft);
+ const featuredItems = selectFeaturedItems(orderedItems, draft);
+ const heroSource = orderedItems.find((item) => pickHeroFromItem(item)) || orderedItems[0];
+ const hero = pickHeroFromItem(heroSource);
+ const gallery = collectGalleryImages(orderedItems);
+ const distinctLocations = Array.from(
+ new Set(orderedItems.map((item) => item.location).filter(Boolean)),
+ ) as string[];
+ const draftTitle = draft?.title?.trim();
+ const draftDescription = draft?.description?.trim();
+ const draftQuote = draft?.quote?.trim();
+ const quote =
+ draftQuote ||
+ story.description ||
+ heroSource?.description ||
+ heroSource?.content ||
+ 'Shape one strong story page and the whole product starts to feel more shareable.';
+
+ return {
+ badge: story.shareId ? 'Share Preview' : 'Story Preview',
+ title: draftTitle || story.title || 'Untitled story',
+ description:
+ draftDescription ||
+ story.description ||
+ 'This preview is generated from the current story content, so you can refine presentation before relying on a public endpoint.',
+ authorName: story.ownerName || 'Timeline user',
+ timeLabel: formatStoryTime(story.storyTime || story.updateTime || story.createTime),
+ locationLabel: buildLocationLabel(orderedItems),
+ hero,
+ quote,
+ stats: [
+ { label: 'Moments', value: orderedItems.length || Number(story.itemCount || 0) },
+ { label: 'Featured', value: featuredItems.length },
+ { label: 'Places', value: distinctLocations.length },
+ { label: 'Share state', value: story.shareId ? 'Public' : 'Preview' },
+ ],
+ gallery,
+ moments: featuredItems.map((item, index) => ({
+ key: item.instanceId || `${story.instanceId || 'story'}-${index}`,
+ title: item.title || 'Untitled moment',
+ description:
+ item.description || item.content || 'Add one line of context and this moment becomes much easier to revisit.',
+ timeLabel: formatStoryTime(item.storyItemTime),
+ location: item.location,
+ storyTitle: story.title,
+ mediaCount: Math.max(
+ item.images?.length || 0,
+ item.relatedImageInstanceIds?.length || 0,
+ item.videoUrl ? 1 : 0,
+ ),
+ cover: pickHeroFromItem(item),
+ })),
+ footnote: draft?.updatedAt
+ ? `Edited in Share Studio on ${new Date(draft.updatedAt).toLocaleString('zh-CN')}`
+ : story.shareId
+ ? 'This is a preview layer for a story that already has a public share id.'
+ : 'Public sharing is not required to keep improving how the story will look when shared.',
+ };
+};
+
+export const normalizePublicShowcase = (
+ storyItem: PublicStoryItem,
+ shareId: string,
+): StoryShowcaseData => {
+ const featuredMoments = storyItem.featuredMoments?.length
+ ? storyItem.featuredMoments
+ : [storyItem];
+ const hero = pickHeroFromItem(storyItem);
+ const gallery = collectGalleryImages([storyItem, ...featuredMoments]);
+ const description =
+ storyItem.shareDescription ||
+ storyItem.description ||
+ storyItem.content ||
+ 'A public story page from Timeline.';
+ const quote = storyItem.shareQuote || storyItem.shareDescription || storyItem.description || storyItem.content;
+ const locationLabel = buildLocationLabel(featuredMoments, storyItem.location);
+
+ return {
+ badge: 'Public Share',
+ title: storyItem.shareTitle || storyItem.title || 'Memory share',
+ description,
+ authorName: storyItem.authorName || storyItem.ownerName || 'Timeline user',
+ authorAvatar: storyItem.authorAvatar,
+ timeLabel: formatStoryTime(storyItem.storyItemTime || storyItem.createTime),
+ locationLabel,
+ hero,
+ quote,
+ stats: [
+ { label: 'Images', value: gallery.length },
+ { label: 'Video clips', value: storyItem.videoUrl || storyItem.video ? 1 : 0 },
+ { label: 'Featured', value: featuredMoments.length },
+ { label: 'Share id', value: shareId.slice(0, 8) },
+ ],
+ gallery,
+ moments: featuredMoments.map((moment, index) => {
+ const momentGallery = collectGalleryImages([moment]);
+ return {
+ key: moment.instanceId || `${shareId}-${index}`,
+ title: moment.title || 'Shared moment',
+ description:
+ moment.description ||
+ moment.content ||
+ 'This moment is part of the curated public story.',
+ timeLabel: formatStoryTime(moment.storyItemTime || moment.createTime),
+ location: moment.location,
+ mediaCount: Math.max(momentGallery.length, moment.videoUrl || moment.video ? 1 : 0),
+ cover: pickHeroFromItem(moment),
+ };
+ }),
+ footnote:
+ featuredMoments.length > 1
+ ? 'This public page now includes a curated sequence of featured moments.'
+ : 'This page is designed for external viewing and simple forwarding.',
+ };
+};
diff --git a/src/pages/share/studio/[storyId].tsx b/src/pages/share/studio/[storyId].tsx
new file mode 100644
index 0000000..3148a51
--- /dev/null
+++ b/src/pages/share/studio/[storyId].tsx
@@ -0,0 +1,585 @@
+import TimelineImage from '@/components/TimelineImage';
+import {
+ ArrowLeftOutlined,
+ CopyOutlined,
+ DeleteOutlined,
+ EyeOutlined,
+ PlayCircleOutlined,
+ SaveOutlined,
+ ShareAltOutlined,
+} from '@ant-design/icons';
+import { PageContainer } from '@ant-design/pro-components';
+import { history, useParams, useRequest } from '@umijs/max';
+import { Alert, Button, Empty, Input, Skeleton, Space, Tag, Typography, message } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import type { StoryItem, StoryType } from '@/pages/story/data.d';
+import {
+ publishStoryShare,
+ queryStoryDetail,
+ queryStoryItem,
+ queryStoryShareConfig,
+ type StoryShareConfig,
+ unpublishStoryShare,
+} from '@/pages/story/service';
+import StoryShowcase from '../StoryShowcase';
+import { buildPreviewShowcase, formatStoryTime } from '../showcase-utils';
+import { clearShareDraft, loadShareDraft, saveShareDraft, type ShareDraft } from '../shareDraft';
+import useStyles from '../style.style';
+
+const { TextArea } = Input;
+const { Paragraph, Title } = Typography;
+
+type StoryItemsResponse = {
+ data?: {
+ list?: StoryItem[];
+ };
+ list?: StoryItem[];
+};
+
+type StoryDetailResponse = {
+ data?: StoryType;
+} & StoryType;
+
+type ShareConfigResponse = {
+ data?: StoryShareConfig;
+};
+
+type DraftFormState = {
+ title: string;
+ description: string;
+ quote: string;
+ heroMomentId?: string;
+ featuredMomentIds: string[];
+};
+
+const normalizeItems = (response: StoryItemsResponse | undefined) => {
+ if (Array.isArray(response?.data?.list)) return response.data.list;
+ if (Array.isArray(response?.list)) return response.list;
+ return [] as StoryItem[];
+};
+
+const normalizeStory = (response: StoryDetailResponse | undefined) => {
+ if (!response) return undefined;
+ if (response.data) return response.data;
+ return response as StoryType;
+};
+
+const normalizeShareConfig = (response: { data?: StoryShareConfig } | StoryShareConfig | undefined) => {
+ if (!response) return undefined;
+ if ('data' in response) return response.data;
+ return response;
+};
+
+const getMomentPreview = (item: StoryItem) => {
+ const imageInstanceId =
+ item.coverInstanceId || item.images?.[0] || item.relatedImageInstanceIds?.[0] || item.thumbnailInstanceId;
+ const src = item.coverImage || item.thumbnailUrl;
+ return { imageInstanceId, src, hasVideo: Boolean(item.videoUrl) };
+};
+
+const hasPreviewMedia = (item: StoryItem) => {
+ const preview = getMomentPreview(item);
+ return Boolean(preview.imageInstanceId || preview.src || item.videoUrl);
+};
+
+const getDefaultFeaturedMomentIds = (items: StoryItem[], heroMomentId?: string) => {
+ const result: string[] = [];
+ const candidates = [...items.filter((item) => Boolean(item.instanceId))];
+
+ if (heroMomentId) {
+ result.push(heroMomentId);
+ }
+
+ candidates.forEach((item) => {
+ if (!item.instanceId || result.includes(item.instanceId) || result.length >= 6) return;
+ result.push(item.instanceId);
+ });
+
+ return result;
+};
+
+const buildInitialDraft = (
+ storyId: string,
+ story: StoryType,
+ items: StoryItem[],
+ shareConfig?: StoryShareConfig,
+) => {
+ const saved = loadShareDraft(storyId);
+ const configFeaturedMomentIds = shareConfig?.featuredMomentIds?.filter(Boolean) || [];
+ const defaultHero = shareConfig?.heroMomentId || items.find(hasPreviewMedia)?.instanceId;
+ const featuredMomentIds =
+ saved?.featuredMomentIds?.filter(Boolean) ||
+ (configFeaturedMomentIds.length > 0 ? configFeaturedMomentIds : undefined) ||
+ getDefaultFeaturedMomentIds(items, saved?.heroMomentId || defaultHero);
+
+ return {
+ title: saved?.title || shareConfig?.title || story.title || '',
+ description: saved?.description || shareConfig?.description || story.description || '',
+ quote: saved?.quote || shareConfig?.quote || story.description || '',
+ heroMomentId: saved?.heroMomentId || shareConfig?.heroMomentId || defaultHero,
+ featuredMomentIds,
+ } satisfies DraftFormState;
+};
+
+const ShareStudioPage: React.FC = () => {
+ const { styles } = useStyles();
+ const { storyId } = useParams<{ storyId: string }>();
+ const [draft, setDraft] = useState({
+ title: '',
+ description: '',
+ quote: '',
+ heroMomentId: undefined,
+ featuredMomentIds: [],
+ });
+ const [activeShareId, setActiveShareId] = useState();
+ const [persistedShareConfig, setPersistedShareConfig] = useState();
+ const [publishing, setPublishing] = useState(false);
+ const [unpublishing, setUnpublishing] = useState(false);
+
+ const studioRequest = useRequest(
+ async () => {
+ if (!storyId) return undefined;
+ const [storyResponse, itemsResponse, shareConfigResponse] = await Promise.all([
+ queryStoryDetail(storyId),
+ queryStoryItem({ storyInstanceId: storyId, current: 1, pageSize: 80 }),
+ queryStoryShareConfig(storyId).catch(() => undefined),
+ ]);
+ return {
+ story: normalizeStory(storyResponse as StoryDetailResponse),
+ items: normalizeItems(itemsResponse as StoryItemsResponse),
+ shareConfig: normalizeShareConfig(shareConfigResponse as ShareConfigResponse | StoryShareConfig | undefined),
+ };
+ },
+ {
+ refreshDeps: [storyId],
+ },
+ );
+
+ const payload = studioRequest.data as
+ | { story?: StoryType; items: StoryItem[]; shareConfig?: StoryShareConfig }
+ | undefined;
+ const { loading } = studioRequest;
+
+ useEffect(() => {
+ if (!storyId || !payload?.story) return;
+ setPersistedShareConfig(payload.shareConfig);
+ setDraft(buildInitialDraft(storyId, payload.story, payload.items, payload.shareConfig));
+ setActiveShareId(payload.story.shareId);
+ }, [payload, storyId]);
+
+ const showcaseDraft = useMemo(() => {
+ if (!storyId || !payload?.story) return undefined;
+ return {
+ storyId,
+ title: draft.title,
+ description: draft.description,
+ quote: draft.quote,
+ heroMomentId: draft.heroMomentId,
+ featuredMomentIds: draft.featuredMomentIds,
+ updatedAt: loadShareDraft(storyId)?.updatedAt,
+ };
+ }, [draft, payload, storyId]);
+
+ const story = payload?.story;
+
+ if (loading) {
+ return (
+ history.push(`/timeline/${storyId}`)}
+ >
+
-
活跃用户
+Ծû
{activeUser}
-
新增用户
+û
{newUser}
-
);
};
+
AvatarList.Item = Item;
export default AvatarList;
diff --git a/src/pages/archive/index.less b/src/pages/archive/index.less
new file mode 100644
index 0000000..e99d9fb
--- /dev/null
+++ b/src/pages/archive/index.less
@@ -0,0 +1,363 @@
+.smart-archive {
+ --archive-bg: #eef4f7;
+ --archive-panel: rgba(250, 253, 255, 0.92);
+ --archive-border: rgba(25, 42, 64, 0.08);
+ --archive-ink: #172338;
+ --archive-muted: #677488;
+ --archive-accent: #1f6aa5;
+ background:
+ radial-gradient(circle at top right, rgba(31, 106, 165, 0.16), transparent 26%),
+ linear-gradient(180deg, #f7fbfd 0%, #eaf1f5 100%);
+ min-height: calc(100vh - 104px);
+ padding: 24px 0 40px;
+}
+
+.smart-archive__shell {
+ margin: 0 auto;
+ max-width: 1180px;
+ padding: 0 16px;
+}
+
+.smart-archive__hero,
+.smart-archive__panel,
+.smart-archive__footer-panel {
+ backdrop-filter: blur(14px);
+ background: var(--archive-panel);
+ border: 1px solid var(--archive-border);
+ border-radius: 28px;
+ box-shadow: 0 24px 60px rgba(23, 35, 56, 0.08);
+}
+
+.smart-archive__hero {
+ padding: 32px;
+}
+
+.smart-archive__pill,
+.smart-archive__result-tag,
+.smart-archive__moment-meta .ant-tag {
+ background: rgba(23, 35, 56, 0.08);
+ border-radius: 999px;
+ color: var(--archive-ink);
+ padding: 6px 12px;
+}
+
+.smart-archive__hero h1,
+.smart-archive__panel h2,
+.smart-archive__moment-card h3 {
+ color: var(--archive-ink);
+ font-family: Georgia, 'Times New Roman', 'Songti SC', serif;
+ letter-spacing: -0.03em;
+ margin: 0;
+}
+
+.smart-archive__hero h1 {
+ font-size: clamp(34px, 5vw, 56px);
+ line-height: 1.05;
+ margin-top: 18px;
+ max-width: 13ch;
+}
+
+.smart-archive__hero p,
+.smart-archive__detail-summary p,
+.smart-archive__card p,
+.smart-archive__moment-card p,
+.smart-archive__footer-panel p {
+ color: var(--archive-muted);
+ line-height: 1.8;
+}
+
+.smart-archive__hero p {
+ font-size: 16px;
+ margin: 16px 0 0;
+ max-width: 72ch;
+}
+
+.smart-archive__hero-metrics {
+ display: grid;
+ gap: 14px;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ margin-top: 24px;
+}
+
+.smart-archive__hero-metrics article {
+ background: rgba(255, 255, 255, 0.72);
+ border-radius: 20px;
+ min-height: 108px;
+ padding: 18px;
+}
+
+.smart-archive__hero-metrics span,
+.smart-archive__detail-summary span,
+.smart-archive__card span,
+.smart-archive__moment-foot span,
+.smart-archive__mode-btn strong {
+ color: var(--archive-muted);
+}
+
+.smart-archive__hero-metrics strong {
+ color: var(--archive-ink);
+ display: block;
+ font-size: clamp(28px, 4vw, 42px);
+ margin-top: 12px;
+}
+
+.smart-archive__actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-top: 24px;
+}
+
+.smart-archive__actions .ant-btn-primary,
+.smart-archive__moment-actions .ant-btn-primary {
+ background: linear-gradient(135deg, var(--archive-accent), #124d7c);
+ border: none;
+}
+
+.smart-archive__explorer {
+ display: grid;
+ gap: 20px;
+ grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
+ margin-top: 20px;
+}
+
+.smart-archive__panel {
+ padding: 24px;
+}
+
+.smart-archive__panel-head {
+ align-items: center;
+ color: var(--archive-accent);
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 18px;
+}
+
+.smart-archive__panel-head--detail {
+ align-items: flex-start;
+}
+
+.smart-archive__eyebrow {
+ color: rgba(23, 35, 56, 0.58);
+ display: block;
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+}
+
+.smart-archive__panel-head h2 {
+ font-size: 30px;
+ margin-top: 6px;
+}
+
+.smart-archive__mode-toggle {
+ display: grid;
+ gap: 12px;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ margin-bottom: 18px;
+}
+
+.smart-archive__mode-btn,
+.smart-archive__card {
+ appearance: none;
+ background: rgba(255, 255, 255, 0.78);
+ border: 1px solid rgba(23, 35, 56, 0.08);
+ border-radius: 20px;
+ cursor: pointer;
+ text-align: left;
+ transition:
+ border-color 180ms ease,
+ transform 180ms ease,
+ box-shadow 180ms ease;
+}
+
+.smart-archive__mode-btn:hover,
+.smart-archive__card:hover {
+ border-color: rgba(31, 106, 165, 0.28);
+ box-shadow: 0 18px 32px rgba(23, 35, 56, 0.08);
+ transform: translateY(-1px);
+}
+
+.smart-archive__mode-btn.is-active,
+.smart-archive__card.is-active {
+ background: linear-gradient(145deg, rgba(31, 106, 165, 0.14), rgba(255, 255, 255, 0.9));
+ border-color: rgba(31, 106, 165, 0.32);
+}
+
+.smart-archive__mode-btn {
+ align-items: center;
+ color: var(--archive-ink);
+ display: flex;
+ gap: 10px;
+ justify-content: space-between;
+ padding: 14px 16px;
+}
+
+.smart-archive__card-list {
+ display: grid;
+ gap: 14px;
+}
+
+.smart-archive__card {
+ align-items: center;
+ display: grid;
+ gap: 16px;
+ grid-template-columns: minmax(0, 1fr) auto;
+ padding: 18px;
+}
+
+.smart-archive__card-copy strong,
+.smart-archive__footer-panel strong,
+.smart-archive__detail-summary strong,
+.smart-archive__moment-card h3,
+.smart-archive__moment-actions .ant-btn {
+ color: var(--archive-ink);
+}
+
+.smart-archive__card svg {
+ color: rgba(23, 35, 56, 0.4);
+}
+
+.smart-archive__detail-summary {
+ align-items: end;
+ display: flex;
+ gap: 16px;
+ justify-content: space-between;
+ margin-bottom: 20px;
+}
+
+.smart-archive__detail-summary p {
+ margin: 0;
+}
+
+.smart-archive__moment-list {
+ display: grid;
+ gap: 16px;
+}
+
+.smart-archive__moment-card {
+ background: rgba(255, 255, 255, 0.78);
+ border: 1px solid rgba(23, 35, 56, 0.08);
+ border-radius: 24px;
+ display: grid;
+ gap: 18px;
+ grid-template-columns: 180px minmax(0, 1fr);
+ overflow: hidden;
+ padding: 16px;
+}
+
+.smart-archive__moment-media {
+ min-height: 160px;
+ position: relative;
+}
+
+.smart-archive__moment-image,
+.smart-archive__moment-image :global(.imageContainer),
+.smart-archive__moment-image :global(.image) {
+ border-radius: 18px;
+ height: 100%;
+ width: 100%;
+}
+
+.smart-archive__moment-placeholder {
+ align-items: center;
+ background: linear-gradient(135deg, rgba(31, 106, 165, 0.18), rgba(17, 35, 57, 0.1));
+ border-radius: 18px;
+ color: var(--archive-ink);
+ display: flex;
+ font-family: Georgia, 'Times New Roman', 'Songti SC', serif;
+ font-size: 42px;
+ height: 100%;
+ justify-content: center;
+ width: 100%;
+}
+
+.smart-archive__moment-badge {
+ align-items: center;
+ background: rgba(23, 35, 56, 0.78);
+ border-radius: 999px;
+ color: #fff;
+ display: inline-flex;
+ gap: 6px;
+ left: 12px;
+ padding: 6px 10px;
+ position: absolute;
+ top: 12px;
+}
+
+.smart-archive__moment-copy {
+ display: flex;
+ flex-direction: column;
+}
+
+.smart-archive__moment-meta,
+.smart-archive__moment-foot,
+.smart-archive__moment-actions,
+.smart-archive__footer-panel {
+ align-items: center;
+ display: flex;
+ gap: 12px;
+}
+
+.smart-archive__moment-meta,
+.smart-archive__moment-foot {
+ flex-wrap: wrap;
+}
+
+.smart-archive__moment-meta span,
+.smart-archive__moment-foot span {
+ color: var(--archive-muted);
+}
+
+.smart-archive__moment-card h3 {
+ font-size: 28px;
+ margin-top: 12px;
+}
+
+.smart-archive__moment-card p {
+ flex: 1;
+ margin: 10px 0 0;
+}
+
+.smart-archive__moment-foot {
+ border-top: 1px solid rgba(23, 35, 56, 0.08);
+ margin-top: 18px;
+ padding-top: 14px;
+}
+
+.smart-archive__moment-actions {
+ flex-wrap: wrap;
+ margin-top: 16px;
+}
+
+.smart-archive__footer-panel {
+ gap: 18px;
+ margin-top: 20px;
+ padding: 22px 24px;
+}
+
+.smart-archive__footer-panel svg {
+ color: var(--archive-accent);
+ font-size: 28px;
+}
+
+@media (max-width: 960px) {
+ .smart-archive__hero-metrics,
+ .smart-archive__explorer,
+ .smart-archive__mode-toggle,
+ .smart-archive__moment-card {
+ grid-template-columns: 1fr;
+ }
+
+ .smart-archive__detail-summary,
+ .smart-archive__moment-actions,
+ .smart-archive__footer-panel {
+ align-items: flex-start;
+ flex-direction: column;
+ }
+
+ .smart-archive__moment-media {
+ min-height: 220px;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/archive/index.tsx b/src/pages/archive/index.tsx
new file mode 100644
index 0000000..0e19d08
--- /dev/null
+++ b/src/pages/archive/index.tsx
@@ -0,0 +1,564 @@
+import TimelineImage from '@/components/TimelineImage';
+import {
+ ArrowRightOutlined,
+ CompassOutlined,
+ EnvironmentOutlined,
+ PlayCircleOutlined,
+ ShareAltOutlined,
+ TagsOutlined,
+} from '@ant-design/icons';
+import { history, useRequest, useSearchParams } from '@umijs/max';
+import { Button, Empty, Skeleton, Tag } from 'antd';
+import React, { useEffect, useMemo } from 'react';
+import type { StoryItem, StoryType } from '@/pages/story/data.d';
+import {
+ queryStoryItem,
+ queryTimelineArchiveExplore,
+ queryTimelineArchiveSummary,
+ queryTimelineList,
+ type TimelineArchiveBucket,
+ type TimelineArchiveExplore,
+ type TimelineArchiveMoment,
+ type TimelineArchiveSummary,
+} from '@/pages/story/service';
+import './index.less';
+
+type ArchiveBucketType = 'location' | 'tag';
+
+type ArchivePageSummary = TimelineArchiveSummary & {
+ source: 'backend' | 'local';
+ moments?: TimelineArchiveMoment[];
+};
+
+type StoryItemsResponse = {
+ data?: {
+ list?: StoryItem[];
+ };
+ list?: StoryItem[];
+};
+
+const normalizeStories = (response: unknown): StoryType[] => {
+ if (Array.isArray((response as { data?: StoryType[] } | undefined)?.data)) {
+ return (response as { data: StoryType[] }).data;
+ }
+ if (Array.isArray(response)) return response as StoryType[];
+ return [];
+};
+
+const normalizeItems = (response: unknown): StoryItem[] => {
+ const dataList = (response as { data?: { list?: StoryItem[] } } | undefined)?.data?.list;
+ if (Array.isArray(dataList)) return dataList;
+
+ const list = (response as { list?: StoryItem[] } | undefined)?.list;
+ if (Array.isArray(list)) return list;
+
+ return [];
+};
+
+const normalizeArchiveSummary = (response: unknown): TimelineArchiveSummary | undefined => {
+ const data = (response as { data?: TimelineArchiveSummary } | undefined)?.data;
+ if (data && Array.isArray(data.locations) && Array.isArray(data.tags)) {
+ return data;
+ }
+
+ const direct = response as TimelineArchiveSummary | undefined;
+ if (direct && Array.isArray(direct.locations) && Array.isArray(direct.tags)) {
+ return direct;
+ }
+
+ return undefined;
+};
+
+const normalizeArchiveExplore = (response: unknown): TimelineArchiveExplore | undefined => {
+ const data = (response as { data?: TimelineArchiveExplore } | undefined)?.data;
+ if (data && Array.isArray(data.moments)) {
+ return data;
+ }
+
+ const direct = response as TimelineArchiveExplore | undefined;
+ if (direct && Array.isArray(direct.moments)) {
+ return direct;
+ }
+
+ return undefined;
+};
+
+const inferTags = (item: StoryItem): string[] => {
+ const text = `${item.title || ''} ${item.description || ''} ${item.content || ''}`.toLowerCase();
+ const tags = new Set- {childrenWithProps}
- {childrenWithProps}
+
+ );
+ }
+
+ const { activeType, activeCollection, activeBucket } = selection;
+ const matchedMoments =
+ data.source === 'local'
+ ? (data.moments || [])
+ .filter((moment) =>
+ activeBucket
+ ? activeType === 'location'
+ ? moment.location === activeBucket.key
+ : moment.tags.includes(activeBucket.key)
+ : false,
+ )
+ .slice(0, 12)
+ : exploreData?.moments || [];
+
+ const activateBucket = (type: ArchiveBucketType, key: string) => {
+ history.push(`/archive?type=${type}&value=${encodeURIComponent(key)}`);
+ };
+
+ return (
+
+
+
+
+ );
+};
+
+export default ArchivePage;
diff --git a/src/pages/gallery/components/GridView.tsx b/src/pages/gallery/components/GridView.tsx
index 346335d..69c557a 100644
--- a/src/pages/gallery/components/GridView.tsx
+++ b/src/pages/gallery/components/GridView.tsx
@@ -82,7 +82,7 @@ const GridView: FC
+
+
+ Smart Archive
+
+
+
+
+
+
+
+
+
+ Let the system organize memory by place and theme, so browsing feels like exploration.
++ We group moments by place hints, text cues, and media features. Instead of just seeing a top + list, you can now drill into real story moments and preview how those memories may be shared. +
+
+
+ Stories indexed
+ {data.storiesIndexed}
+
+
+ Place clusters
+ {data.locations.length}
+
+
+ Theme tags
+ {data.tags.length}
+
+
+ Video moments
+ {data.videoMoments}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Navigator
+
+ Start with a place or theme
+
+
+
+
+
+
+ {activeCollection.map((item) => (
+
+ ))}
+
+
+
+
+
+ {matchedMoments.length} matched moments
+
+ )}
+
+
+ {activeBucket ? (
+ <>
+
+
+ {activeType === 'location' ? 'Location Explorer' : 'Tag Explorer'}
+
+
+ {activeBucket && (
+ {activeBucket?.title || 'Waiting for archive data'}
+
+
+
+ {data.source === 'backend' && exploreRequest.loading ? (
+ + This cluster currently surfaces {matchedMoments.length} moments from + {data.storiesIndexed} indexed stories. {data.shareableStories} + {` `}stories are already close to public-share quality. +
+ {activeBucket.subtitle} +
+ {matchedMoments.map((moment) => {
+ const previewPath = moment.storyInstanceId
+ ? `/share/preview/${moment.storyInstanceId}`
+ : '/story';
+ const sharePath = moment.storyShareId ? `/share/${moment.storyShareId}` : previewPath;
+
+ return (
+
+
+ );
+ })}
+
+ ) : (
+
+ {moment.coverInstanceId || moment.coverSrc ? (
+
+
+
+ {moment.storyTitle.slice(0, 1)}
+
+ )}
+ {moment.hasVideo && (
+
+
+
+
+ {moment.storyTitle}
+ {moment.location && {moment.location}}
+
+ {moment.itemTitle}
+{moment.itemDescription}
+
+ {moment.itemTime}
+ {moment.mediaCount} media items
+
+
+
+
+
+
+ {data.shareableStories} stories are already close to being worth sharing outside the app
+
+ + Add stronger cover moments and clearer descriptions, then shape the share page. That is where + this product starts to feel memorable instead of merely functional. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Home;
+
+
+
diff --git a/src/pages/review/index.less b/src/pages/review/index.less
new file mode 100644
index 0000000..3b49ef1
--- /dev/null
+++ b/src/pages/review/index.less
@@ -0,0 +1,230 @@
+.yearly-review {
+ --review-bg: #f8f1e8;
+ --review-panel: rgba(255, 250, 245, 0.92);
+ --review-border: rgba(37, 45, 63, 0.08);
+ --review-ink: #1d2433;
+ --review-muted: #687284;
+ --review-accent: #d85f38;
+ --review-cool: #1f4d7a;
+ background:
+ radial-gradient(circle at top left, rgba(216, 95, 56, 0.16), transparent 28%),
+ linear-gradient(180deg, #fdf8f1 0%, #f3ece2 100%);
+ min-height: calc(100vh - 104px);
+ padding: 24px 0 40px;
+}
+
+.yearly-review__shell {
+ margin: 0 auto;
+ max-width: 1180px;
+ padding: 0 16px;
+}
+
+.yearly-review__hero,
+.yearly-review__stats,
+.yearly-review__panel {
+ backdrop-filter: blur(14px);
+ background: var(--review-panel);
+ border: 1px solid var(--review-border);
+ border-radius: 28px;
+ box-shadow: 0 24px 60px rgba(29, 36, 51, 0.1);
+}
+
+.yearly-review__hero {
+ padding: 32px;
+}
+
+.yearly-review__pill {
+ background: rgba(29, 36, 51, 0.08);
+ border-radius: 999px;
+ color: var(--review-ink);
+ padding: 6px 12px;
+}
+
+.yearly-review__hero h1,
+.yearly-review__panel h2,
+.yearly-review__feature-card h3 {
+ color: var(--review-ink);
+ font-family: Georgia, 'Times New Roman', 'Songti SC', serif;
+ letter-spacing: -0.03em;
+ margin: 0;
+}
+
+.yearly-review__hero h1 {
+ font-size: clamp(34px, 5vw, 58px);
+ line-height: 1.04;
+ margin-top: 18px;
+ max-width: 12ch;
+}
+
+.yearly-review__hero p,
+.yearly-review__feature-card p,
+.yearly-review__feature-tip {
+ color: var(--review-muted);
+ font-size: 16px;
+ line-height: 1.8;
+}
+
+.yearly-review__hero p {
+ margin: 16px 0 0;
+ max-width: 72ch;
+}
+
+.yearly-review__actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-top: 24px;
+}
+
+.yearly-review__actions .ant-btn-primary,
+.yearly-review__feature-actions .ant-btn-primary {
+ background: linear-gradient(135deg, var(--review-accent), #b94b28);
+ border: none;
+}
+
+.yearly-review__stats {
+ display: grid;
+ gap: 16px;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ margin-top: 20px;
+ padding: 18px;
+}
+
+.yearly-review__stats article {
+ background: rgba(255, 255, 255, 0.7);
+ border-radius: 20px;
+ min-height: 120px;
+ padding: 18px;
+}
+
+.yearly-review__stats span,
+.yearly-review__bar-row span,
+.yearly-review__feature-foot span,
+.yearly-review__feature-meta span {
+ color: var(--review-muted);
+}
+
+.yearly-review__stats strong {
+ color: var(--review-ink);
+ display: block;
+ font-size: clamp(28px, 4vw, 42px);
+ margin-top: 14px;
+}
+
+.yearly-review__content {
+ display: grid;
+ gap: 20px;
+ grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
+ margin-top: 20px;
+}
+
+.yearly-review__panel {
+ padding: 24px;
+}
+
+.yearly-review__panel-head {
+ align-items: center;
+ color: var(--review-cool);
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 20px;
+}
+
+.yearly-review__eyebrow {
+ color: rgba(29, 36, 51, 0.58);
+ display: block;
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+}
+
+.yearly-review__panel-head h2 {
+ font-size: 30px;
+ margin-top: 6px;
+}
+
+.yearly-review__bars {
+ display: grid;
+ gap: 14px;
+}
+
+.yearly-review__bar-row {
+ align-items: center;
+ display: grid;
+ gap: 12px;
+ grid-template-columns: 64px minmax(0, 1fr) 44px;
+}
+
+.yearly-review__bar-track {
+ background: rgba(29, 36, 51, 0.08);
+ border-radius: 999px;
+ height: 12px;
+ overflow: hidden;
+}
+
+.yearly-review__bar-fill {
+ background: linear-gradient(90deg, var(--review-accent), var(--review-cool));
+ border-radius: inherit;
+ height: 100%;
+}
+
+.yearly-review__feature-card {
+ background: linear-gradient(160deg, rgba(216, 95, 56, 0.16), rgba(31, 77, 122, 0.16));
+ border: 1px solid rgba(29, 36, 51, 0.08);
+ border-radius: 24px;
+ padding: 22px;
+ width: 100%;
+}
+
+.yearly-review__feature-meta,
+.yearly-review__feature-foot,
+.yearly-review__feature-actions {
+ align-items: center;
+ display: flex;
+ gap: 12px;
+ justify-content: space-between;
+}
+
+.yearly-review__feature-card h3 {
+ font-size: 30px;
+ margin: 18px 0 10px;
+}
+
+.yearly-review__feature-foot {
+ border-top: 1px solid rgba(29, 36, 51, 0.1);
+ margin-top: 18px;
+ padding-top: 14px;
+}
+
+.yearly-review__feature-foot strong,
+.yearly-review__bar-row strong,
+.yearly-review__feature-tip strong {
+ color: var(--review-ink);
+}
+
+.yearly-review__feature-tip {
+ background: rgba(255, 255, 255, 0.5);
+ border-radius: 18px;
+ margin-top: 16px;
+ padding: 14px 16px;
+}
+
+.yearly-review__feature-actions {
+ flex-wrap: wrap;
+ margin-top: 18px;
+}
+
+@media (max-width: 960px) {
+ .yearly-review__stats,
+ .yearly-review__content {
+ grid-template-columns: 1fr;
+ }
+
+ .yearly-review__feature-meta,
+ .yearly-review__feature-foot,
+ .yearly-review__feature-actions {
+ align-items: flex-start;
+ flex-direction: column;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/review/index.tsx b/src/pages/review/index.tsx
new file mode 100644
index 0000000..4cdced0
--- /dev/null
+++ b/src/pages/review/index.tsx
@@ -0,0 +1,274 @@
+import { CalendarOutlined, CompassOutlined, ShareAltOutlined } from '@ant-design/icons';
+import { history, useRequest } from '@umijs/max';
+import { Button, Empty, Skeleton, Tag } from 'antd';
+import React from 'react';
+import type { StoryType } from '@/pages/story/data.d';
+import { queryTimelineList, queryTimelineYearlyReport } from '@/pages/story/service';
+import './index.less';
+
+type ReviewSummary = {
+ year: number;
+ stories: StoryType[];
+ totalStories: number;
+ totalMoments: number;
+ sharedStories: number;
+ busiestMonth: { label: string; count: number };
+ monthlyCounts: Array<{ label: string; count: number }>;
+ featuredStory?: StoryType;
+ topLocation?: string;
+ topTag?: string;
+};
+
+type YearlyReportResponse = {
+ year?: number;
+ totalMoments?: number;
+ totalMedia?: number;
+ mostActiveMonth?: string;
+ mostActiveDay?: string;
+ topLocation?: string;
+ topTag?: string;
+ monthlyBreakdown?: Array<{ month?: string; count?: number }>;
+};
+
+const buildMonthLabel = (month: number) => `M${month}`;
+
+const normalizeStories = (response: unknown): StoryType[] => {
+ if (Array.isArray((response as { data?: StoryType[] } | undefined)?.data)) {
+ return (response as { data: StoryType[] }).data;
+ }
+ if (Array.isArray(response)) return response as StoryType[];
+ return [];
+};
+
+const normalizeYearlyReport = (response: unknown): YearlyReportResponse | undefined => {
+ if ((response as { data?: YearlyReportResponse } | undefined)?.data) {
+ return (response as { data: YearlyReportResponse }).data;
+ }
+ if (response && typeof response === 'object') {
+ return response as YearlyReportResponse;
+ }
+ return undefined;
+};
+
+const getStoryDate = (story: StoryType) => {
+ const source = story.storyTime || story.updateTime || story.createTime;
+ if (!source) return undefined;
+ const date = new Date(source);
+ return Number.isNaN(date.getTime()) ? undefined : date;
+};
+
+const buildFallbackMonthlyCounts = (stories: StoryType[], year: number) => {
+ const monthlyCounts = Array.from({ length: 12 }, (_, index) => ({
+ label: buildMonthLabel(index + 1),
+ count: 0,
+ }));
+
+ stories.forEach((story) => {
+ const date = getStoryDate(story);
+ if (!date || date.getFullYear() !== year) return;
+ monthlyCounts[date.getMonth()].count += Number(story.itemCount || 0) || 1;
+ });
+
+ return monthlyCounts;
+};
+
+const YearlyReviewPage: React.FC = () => {
+ const reviewRequest = useRequest(async (): Promise
+
+ 个人影像记忆仓
+
+
+
+ + {getGreeting()}，{data.user.nickname} +
++ 把照片、视频与故事串成会呼吸的时间线。现在你的项目已经具备内容管理基础， + 但更需要一个能让人愿意反复回来浏览的入口。 +
+
+
+
+
+
+
+
+
+ {String(data.user.nickname || '你').slice(0, 1)}
+
+
+
+
+ 今日入口
+ 让内容先讲故事，再展示功能
+
+
+
+
+ 故事线
+ {data.stories.length}
+
+
+ 内容时刻
+ {data.totalMoments}
+
+
+ 媒体文件
+ {data.mediaTotal}
+
+
+ 待处理提醒
+ {data.user.unreadCount}
+
+
+
+
+ {loading ? (
+
+ Recent Stories
+
+
+ 最近值得继续打磨的故事
+
+ {Array.from({ length: 4 }).map((_, index) => (
+
+ ) : data.stories.length > 0 ? (
+
+
+ ))}
+
+ {data.stories.map((story, index) => (
+
+ ))}
+
+ ) : (
+
+
+ )}
+
+
+
+
+
+
+ {loading ? (
+
+ Recent Media
+
+
+ 最近上传
+
+ {Array.from({ length: 6 }).map((_, index) => (
+
+ ) : data.mediaList.length > 0 ? (
+
+
+ ))}
+
+ {data.mediaList.map((item, index) => {
+ const isVideo = Boolean(item.duration || item.thumbnailInstanceId);
+
+ return (
+
+ );
+ })}
+
+ ) : (
+
+
+ )}
+
+
+
+
+
+
+ Spotlight
+
+
+ 把功能改造成体验
+
+ {spotlightCards.map((item, index) => (
+
+ ))}
+
+
+
+ );
+ }
+
+ const maxCount = Math.max(...data.monthlyCounts.map((item) => item.count), 1);
+ const featuredStoryId = data.featuredStory?.instanceId;
+ const featuredSharePath = data.featuredStory?.shareId
+ ? `/share/${data.featuredStory.shareId}`
+ : featuredStoryId
+ ? `/share/preview/${featuredStoryId}`
+ : '/story';
+
+ return (
+
+
+
+
+ );
+};
+
+export default YearlyReviewPage;
\ No newline at end of file
diff --git a/src/pages/share/StoryShowcase.tsx b/src/pages/share/StoryShowcase.tsx
new file mode 100644
index 0000000..fd0a0e6
--- /dev/null
+++ b/src/pages/share/StoryShowcase.tsx
@@ -0,0 +1,243 @@
+import TimelineImage from '@/components/TimelineImage';
+import {
+ CalendarOutlined,
+ CameraOutlined,
+ EnvironmentOutlined,
+ PlayCircleOutlined,
+ ShareAltOutlined,
+} from '@ant-design/icons';
+import { PageContainer } from '@ant-design/pro-components';
+import { Avatar, Button, Card, Empty, Tag, Typography } from 'antd';
+import React from 'react';
+import ReactPlayer from 'react-player';
+import useStyles from './style.style';
+import type { ShareAction, StoryShowcaseData } from './showcase-utils';
+
+const { Paragraph, Text, Title } = Typography;
+
+type StoryShowcaseProps = {
+ data: StoryShowcaseData;
+ actions: ShareAction[];
+ embedded?: boolean;
+};
+
+const resolveVideoSrc = (videoInstanceId?: string) => {
+ if (!videoInstanceId) return undefined;
+ if (videoInstanceId.startsWith('http://') || videoInstanceId.startsWith('https://')) {
+ return videoInstanceId;
+ }
+ return `/api/file/download/${videoInstanceId}`;
+};
+
+const StoryShowcase: React.FC
+
+
+ {data.year} Review
+
+
+
+
+
+ Stories
+ {data.totalStories}
+
+
+ Moments
+ {data.totalMoments}
+
+
+ Busiest month
+ {data.busiestMonth.label}
+
+
+ Share-ready
+ {data.sharedStories}
+
+
+
+
+
+
+ Turn a year of photos, videos, and stories into a shareable memory review.
++ You captured {data.totalStories} storylines and {data.totalMoments} moments this year. + {` `} + {data.sharedStories} of them are already close to public-share quality. + {data.topLocation && data.topLocation !== '-' ? ` Top place: ${data.topLocation}.` : ''} + {data.topTag && data.topTag !== '-' ? ` Signature theme: ${data.topTag}.` : ''} +
+
+
+
+
+
+
+
+
+
+
+
+ Monthly Pulse
+
+ Activity by month
+
+ {data.monthlyCounts.map((item) => (
+
+
+ {item.label}
+
+ ))}
+
+
+
+ {item.count}
+
+
+
+
+ {data.featuredStory ? (
+
+ Featured Story
+
+ The story that deserves the cover
+
+
+ ) : (
+
+ {data.featuredStory.ownerName || 'My story'}
+ {data.featuredStory.shareId ? (
+
+
+ {data.featuredStory.title || 'Untitled story'}
++ {data.featuredStory.description || + 'This is the densest storyline of the year and the best candidate for a polished cover story.'} +
+
+ {data.featuredStory.storyTime || 'Add a story date to complete the narrative'}
+ {Number(data.featuredStory.itemCount || 0)} moments
+
+
+ Polish one representative story first. A single strong share experience will do more for product appeal than ten average pages.
+ {data.topLocation && data.topLocation !== '-' ? ` ${data.topLocation} is emerging as the strongest memory anchor this year.` : ''}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {data.gallery.length > 0 && (
+
+
+ )}
+
+ {data.footnote && (
+
+
+ );
+
+ if (embedded) {
+ return
+
+
+
+
+ {data.badge}
+
+
+ {data.title}
+
+ {data.description}
+
+
+ {actions.length > 0 && (
+
+
+
+
+ {data.authorName?.slice(0, 1)}
+
+
+ {data.timeLabel && (
+
+
+ {data.authorName}
+ A personal visual story from Timeline
+
+
+ {actions.map((action) => (
+
+ ))}
+
+ )}
+
+ {heroVideoSrc ? (
+
+
+
+
+ ) : data.hero?.imageInstanceId || data.hero?.src ? (
+ {data.title.slice(0, 1)}
+ )}
+
+
+
+ {data.stats.map((item) => (
+
+ {item.label}
+ {item.value}
+
+ ))}
+
+
+ {data.quote && (
+
+ Story Note
+
+ )}
+ {data.quote}
+
+
+
+ {data.moments.length > 0 ? (
+
+ Featured Moments
+
+ {data.moments.length} selected moments
+ Moments worth slowing down for
+
+ {data.moments.map((moment) => {
+ const momentVideo = resolveVideoSrc(moment.cover?.videoInstanceId);
+ return (
+
+
+ );
+ })}
+
+ ) : (
+
+ {momentVideo ? (
+
+
+
+ ) : moment.cover?.imageInstanceId || moment.cover?.src ? (
+ {moment.title.slice(0, 1)}
+ )}
+ {moment.cover?.videoInstanceId && (
+
+
+
+
+ {moment.storyTitle && {moment.storyTitle} }
+ {moment.location && {moment.location}}
+
+ {moment.title}
+{moment.description}
+
+
+
+
+
+
+ Gallery
+
+ {data.gallery.length} frames
+ Visual gallery
+
+ {data.gallery.map((image) => (
+
+
+ {data.footnote}
+
+ )}
+ {showcaseCard}
;
+ }
+
+ return
+
+ );
+ }
+
+ if (!shareId || !storyItem) {
return (
-
- )}
- {storyItem.images?.map((image: string) => (
-
+
+ );
+ }
+
+ if (!storyId || !payload?.story) {
+ return (
+
+
+ );
+ }
+
+ if (!storyId || !story) {
+ return (
+
+
+ );
+ }
+
+ const shareReady = Boolean(activeShareId);
+ const storyWithShareState = {
+ ...story,
+ shareId: activeShareId,
+ };
+ const showcase = buildPreviewShowcase(storyWithShareState, payload.items, showcaseDraft);
+ const publicUrl = activeShareId ? `/share/${activeShareId}` : undefined;
+ const previewUrl = `/share/preview/${storyId}`;
+ const coverCandidates = payload.items.filter(hasPreviewMedia).slice(0, 18);
+ const spotlightCandidates = payload.items.filter((item) => Boolean(item.instanceId)).slice(0, 18);
+
+ const copyLink = async (relativeUrl: string, successMessage: string) => {
+ const fullUrl = `${window.location.origin}${relativeUrl}`;
+
+ if (navigator?.clipboard?.writeText) {
+ await navigator.clipboard.writeText(fullUrl);
+ message.success(successMessage);
+ return;
+ }
+
+ message.info(fullUrl);
+ };
+
+ const saveDraft = () => {
+ const nextDraft: ShareDraft = {
+ storyId,
+ title: draft.title.trim(),
+ description: draft.description.trim(),
+ quote: draft.quote.trim(),
+ heroMomentId: draft.heroMomentId,
+ featuredMomentIds: draft.featuredMomentIds,
+ updatedAt: new Date().toISOString(),
+ };
+ saveShareDraft(nextDraft);
+ message.success('Share draft saved');
+ };
+
+ const persistDraft = () => {
+ const nextDraft: ShareDraft = {
+ storyId,
+ title: draft.title.trim(),
+ description: draft.description.trim(),
+ quote: draft.quote.trim(),
+ heroMomentId: draft.heroMomentId,
+ featuredMomentIds: draft.featuredMomentIds,
+ updatedAt: new Date().toISOString(),
+ };
+ saveShareDraft(nextDraft);
+ return nextDraft;
+ };
+
+ const resetDraft = () => {
+ clearShareDraft(storyId);
+ setDraft(buildInitialDraft(storyId, story, payload.items, persistedShareConfig));
+ message.success('Share draft reset');
+ };
+
+ const toggleFeaturedMoment = (momentId?: string) => {
+ if (!momentId) return;
+
+ if (draft.featuredMomentIds.includes(momentId)) {
+ setDraft((current) => ({
+ ...current,
+ featuredMomentIds: current.featuredMomentIds.filter((id) => id !== momentId),
+ }));
+ return;
+ }
+
+ if (draft.featuredMomentIds.length >= 6) {
+ message.info('Pick up to 6 spotlight moments.');
+ return;
+ }
+
+ setDraft((current) => ({
+ ...current,
+ featuredMomentIds: [...current.featuredMomentIds, momentId],
+ }));
+ };
+
+ const handlePublish = async () => {
+ if (!draft.heroMomentId) {
+ message.warning('Choose a hero moment before publishing.');
+ return;
+ }
+
+ setPublishing(true);
+ try {
+ const nextDraft = persistDraft();
+ const response = await publishStoryShare({
+ storyId,
+ heroMomentId: draft.heroMomentId,
+ title: nextDraft.title,
+ description: nextDraft.description,
+ quote: nextDraft.quote,
+ featuredMomentIds: nextDraft.featuredMomentIds,
+ });
+ const nextShareId = response?.data?.shareId;
+ if (!nextShareId) {
+ throw new Error('Missing share id');
+ }
+ setActiveShareId(nextShareId);
+ setPersistedShareConfig({
+ shareId: nextShareId,
+ storyId,
+ heroMomentId: draft.heroMomentId,
+ title: nextDraft.title,
+ description: nextDraft.description,
+ quote: nextDraft.quote,
+ featuredMomentIds: nextDraft.featuredMomentIds || [],
+ published: true,
+ updatedAt: new Date().toISOString(),
+ });
+ message.success(shareReady ? 'Public share updated.' : 'Public share is now live.');
+ } catch (error) {
+ console.error('Failed to publish story share', error);
+ message.error('Failed to publish this story right now.');
+ } finally {
+ setPublishing(false);
+ }
+ };
+
+ const handleUnpublish = async () => {
+ setUnpublishing(true);
+ try {
+ await unpublishStoryShare(storyId);
+ setActiveShareId(undefined);
+ setPersistedShareConfig((current) =>
+ current
+ ? {
+ ...current,
+ heroMomentId: draft.heroMomentId,
+ title: draft.title.trim(),
+ description: draft.description.trim(),
+ quote: draft.quote.trim(),
+ featuredMomentIds: draft.featuredMomentIds,
+ published: false,
+ updatedAt: new Date().toISOString(),
+ }
+ : undefined,
+ );
+ message.success('Public share has been turned off.');
+ } catch (error) {
+ console.error('Failed to unpublish story share', error);
+ message.error('Failed to turn off the public share.');
+ } finally {
+ setUnpublishing(false);
+ }
+ };
+
+ return (
+
+
+
+ 0 ? 'success' : 'warning'}
+ showIcon
+ />
+
+
+
+ } onClick={() => history.push(`/timeline/${storyId}`)}>
+ Back to timeline
+
+ } onClick={saveDraft}>
+ Save draft
+
+
+
+
+
+
+ Share workflow
+
+ Tune the story before sharing
+
+ Public endpoints can come later. What matters now is shaping a clean cover, a clear hook, and a page that feels intentional.
+
+
+
+
+
+