@funhub/platform 0.2.29 → 0.2.31

package/dist/components/common/list/user-activity-list/user-activity-list-item.mjs

@@ -1,2 +1,470 @@
 
-"use client";import{useRouter as e}from"../../../../utils/use-compatible-router.mjs";import{Image as t}from"../../../ui/image.mjs";import{Avatar as n,AvatarFallback as r,AvatarImage as i}from"../../../ui/avatar.mjs";import{Box as a}from"../../../ui/box.mjs";import{Checkbox as o}from"../../../ui/checkbox.mjs";import{Text as s}from"../../../ui/text.mjs";import{Time as c}from"../../../ui/time.mjs";import{useMediaPreview as l}from"../../media-preview/index.mjs";import{useContentOperate as u}from"../../../../hooks/use-content-operate.mjs";import d from"../../../../assets/icons/detail/video_play.mjs";import{ActivityCommentButton as f,ActivityDeleteButton as p,ActivityDislikeButton as ee,ActivityLikeButton as te,ActivityShareButton as m}from"./user-activity-list-actions.mjs";import{toast as h}from"sonner";import{useEffect as g,useRef as ne,useState as _}from"react";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{useTranslations as b}from"next-intl";const x=[],re={post:2};function S({medias:e=x,className:n=``,onItemClick:r}){let i=b(`components.ui.list.userActivityList`),o=(e||[]).filter(Boolean).slice(0,9);if(!o.length)return null;function s(e){r?.(e)}function c(e,n,o){let{is_video:c,media_url:l,cover_image:u}=e||{},f=!!c,p=f?u||l||``:l||``;return p?y(a,{className:o||`relative w-full h-full`,onClick:e=>{r&&(e.stopPropagation(),e.preventDefault(),s(n))},children:[v(t,{src:p,alt:i(`userActivityListItem.mediaAlt`),fill:!0,className:`object-cover`}),f&&v(a,{className:`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-[rgba(0,0,0,0.5)] rounded-full`,children:v(d,{width:36,height:36})})]},n):null}if(o.length===1){let{is_video:e,media_url:t,cover_image:r}=o[0]||{};return v(a,{className:n,children:v(a,{className:`w-full rounded-xl overflow-hidden`,children:c({is_video:e,media_url:t,cover_image:r,__src:e?r||t||``:t||``},0,`relative w-full aspect-square`)})})}return o.length===2?v(a,{className:n,children:v(a,{className:`w-full flex gap-0.5 rounded-xl overflow-hidden`,children:o.map((e,t)=>v(a,{className:`flex-1 aspect-square relative`,children:c(e,t)},t))})}):o.length===3?v(a,{className:n,children:y(a,{className:`w-full h-89.25 flex gap-0.5 rounded-xl overflow-hidden`,children:[v(a,{className:`w-[56.65%] h-full relative`,children:c(o[0],0)}),v(a,{className:`flex-1 flex flex-col gap-0.5`,children:o.slice(1).map((e,t)=>v(a,{className:`w-full flex-1 relative`,children:c(e,t+1)},t))})]})}):o.length===4?v(a,{className:n,children:v(a,{className:`w-full h-89.25 rounded-xl overflow-hidden grid grid-cols-2 grid-rows-2 gap-0.5`,children:o.map((e,t)=>v(a,{className:`w-full h-full relative`,children:c(e,t)},t))})}):o.length===5?v(a,{className:n,children:y(a,{className:`w-full rounded-xl overflow-hidden flex flex-col gap-0.5`,children:[v(a,{className:`w-full h-49.5 flex gap-0.5`,children:o.slice(0,2).map((e,t)=>v(a,{className:`flex-1 h-full relative`,children:c(e,t)},t))}),v(a,{className:`w-full h-33.5 flex gap-0.5`,children:o.slice(2).map((e,t)=>v(a,{className:`flex-1 h-full relative`,children:c(e,t+2)},t))})]})}):o.length===6?v(a,{className:n,children:y(a,{className:`w-full rounded-xl overflow-hidden flex flex-col gap-0.5`,children:[y(a,{className:`w-full h-67.5 flex gap-0.5`,children:[v(a,{className:`w-67.5 h-full relative`,children:c(o[0],0)}),v(a,{className:`flex-1 grid grid-cols-1 grid-rows-2 gap-0.5`,children:o.slice(1,3).map((e,t)=>v(a,{className:`w-full h-full relative`,children:c(e,t+1)},t))})]}),v(a,{className:`w-full h-33.5 grid grid-cols-3 grid-rows-1 gap-0.5`,children:o.slice(3).map((e,t)=>v(a,{className:`w-full h-full relative`,children:c(e,t+3)},t))})]})}):o.length===7?v(a,{className:n,children:y(a,{className:`w-full rounded-xl overflow-hidden flex gap-0.5`,children:[v(a,{className:`w-76 h-67.5 grid grid-cols-2 grid-rows-2 gap-0.5`,children:o.slice(0,4).map((e,t)=>v(a,{className:`w-full h-full relative`,children:c(e,t)},t))}),v(a,{className:`flex-1   grid grid-cols-1 grid-rows-3 gap-0.5`,children:o.slice(4).map((e,t)=>v(a,{className:`w-full h-full relative`,children:c(e,t+4)},t))})]})}):o.length===8?v(a,{className:n,children:y(a,{className:`w-full rounded-xl overflow-hidden flex flex-col gap-0.5`,children:[v(a,{className:`w-full h-33.5 flex gap-0.5 items-center`,children:o.slice(0,2).map((e,t)=>v(a,{className:`flex-1 h-full relative`,children:c(e,t)},t))}),v(a,{className:`w-full h-67.5 grid grid-cols-3 grid-rows-2 gap-0.5`,children:o.slice(2).map((e,t)=>v(a,{className:`w-full h-full relative`,children:c(e,t+2)},t))})]})}):v(a,{className:n,children:v(a,{className:`w-full h-101.5 rounded-xl overflow-hidden grid grid-cols-3 grid-rows-3 gap-0.5`,children:o.slice(0,9).map((e,t)=>v(a,{className:`w-full h-full relative`,children:c(e,t)},t))})})}function C(t){let d=b(`components.ui.list.userActivityList`),{content_id:x,author:C,rightSlot:w,create_time:T,content:E,medias:D,canEdit:O=!1,isDeleting:ie=!1,isEditMode:ae=!1,isSelected:oe=!1,onToggle:se,interaction:ce,like_count:k=0,is_liked:A=!1,onLikeSuccess:le,dislike_count:j=0,is_dislike:M=!1,is_collected:ue,onDislikeSuccess:N,comment_count:P=0,onDelete:F,onShare:I,onShareSuccess:L,onActionSuccess:R,onCollectChange:z,onItemClick:B}=t,V=ce?.is_collected??ue??!1,[H,U]=_({isLiked:A,likeCount:k,isDisliked:M,dislikeCount:j,isCollected:V}),[W,G]=_(!1),[de,K]=_(!1),q=ne(null),J=D?.filter(Boolean)??[],Y=C?.nickname||C?.nick_name||``,fe=C?.avatar||C?.avatar_url||``;g(()=>{U({isLiked:A,likeCount:k,isDisliked:M,dislikeCount:j,isCollected:V})},[j,M,A,k,V]),g(()=>{G(!1)},[E]),g(()=>()=>{q.current&&=(clearTimeout(q.current),null)},[]);function pe(e){U(t=>({...t,isLiked:e.isLiked,likeCount:e.count,isDisliked:e.isDisliked??t.isDisliked,dislikeCount:e.dislikeCount??t.dislikeCount})),le?.(e)}function me(e){U(t=>({...t,isDisliked:e.isDisliked,dislikeCount:e.count,isLiked:e.isLiked??t.isLiked,likeCount:e.likeCount??t.likeCount})),N?.(e)}let{handleToCollectionOperate:he}=u({id:x||``,isLike:H.isLiked,isDislike:H.isDisliked,isCollect:H.isCollected,likeCnt:H.likeCount,dislikeCnt:H.dislikeCount,contentType:re.post});function X(){q.current&&=(clearTimeout(q.current),null)}function Z(e){U(t=>({...t,isCollected:e})),R?.(),x&&z?.(x,e)}function Q(e){if(!x){h.error(d(`userActivityListItem.collectFailed`));return}if(!de){if(K(!0),X(),!he({currentCollect:e,onUpdate:({isCollect:e})=>{X(),Z(e),K(!1)}})){h.error(d(`userActivityListItem.collectFailed`)),K(!1);return}q.current=setTimeout(()=>{K(!1),q.current=null},300)}}function ge(e){return!!(e&&e.length>180)}function _e(){G(e=>!e)}let $=e(),ve=()=>{B?.(x??``),$.push(`/post/${x}`)},ye=e=>{e.stopPropagation(),e.preventDefault(),$.push(`/profile/${C?.user_id}`)},be=()=>{$.push(`/post/${x}?tab=comment`)},xe=l();function Se(e){let t=J.map(e=>({src:e.media_url,type:e.is_video?`video`:`image`,cover:e.cover_image}));t.length&&xe.open(t,e)}return v(a,{className:`flex items-start gap-2 p-3`,children:y(a,{className:`flex-1 min-w-0`,children:[y(a,{className:`flex items-center gap-2 mb-3`,children:[y(a,{className:`flex items-center gap-2 shrink-0`,children:[ae&&v(o,{checked:oe,onCheckedChange:se}),y(n,{className:`w-10 h-10`,onClick:ye,children:[v(i,{src:fe,alt:Y}),v(r,{})]})]}),y(a,{className:`flex-1 min-w-0`,children:[v(s,{as:`p`,className:`text-sm text-text1 line-clamp-1 font-medium`,children:Y}),v(a,{className:`h-[1em]`,children:v(c,{value:T,className:`text-xs text-text3`,format:`YYYY-MM-DD HH:mm`})})]}),w&&v(a,{className:`shrink-0`,onClick:e=>{e.stopPropagation(),e.preventDefault()},children:w}),O&&v(p,{onClick:F,disabled:ie})]}),y(a,{onClick:ve,children:[y(a,{className:`mb-3`,children:[E&&y(a,{children:[v(s,{className:`text-sm text-text1 leading-5 whitespace-pre-wrap text-ellipsis  ${W?`break-all`:`line-clamp-3`}`,dangerouslySetInnerHTML:{__html:E}}),ge(E)&&v(a,{className:`mt-1 text-xs text-text3`,onClick:e=>{e.stopPropagation(),e.preventDefault(),_e()},children:d(W?`userActivityListItem.collapse`:`userActivityListItem.expand`)})]}),J.length>0&&v(S,{className:`mt-2`,medias:J,onItemClick:Se})]}),y(a,{className:`flex items-center justify-around text-text3 *:min-w-20`,onClick:e=>{e.stopPropagation(),e.preventDefault()},children:[v(te,{contentId:x||``,count:H.likeCount,isLiked:H.isLiked,isDisliked:H.isDisliked,dislikeCount:H.dislikeCount,onLikeSuccess:pe,onSuccess:R}),v(ee,{contentId:x||``,count:H.dislikeCount,isDisliked:H.isDisliked,isLiked:H.isLiked,likeCount:H.likeCount,onDislikeSuccess:me,onSuccess:R}),v(f,{count:P,onClick:be}),v(m,{isCollected:H.isCollected,contentId:x||``,userId:C?.user_id??``,onShareSuccess:L,onClick:I,onCollect:()=>Q(!1),onUncollect:()=>Q(!0)})]})]})]})})}export{C as UserActivityListItem,S as UserActivityMediaGrid};
+'use client';
+
+import { useRouter } from "../../../../utils/use-compatible-router.mjs";
+import { Image } from "../../../ui/image.mjs";
+import { Avatar, AvatarFallback, AvatarImage } from "../../../ui/avatar.mjs";
+import { Box } from "../../../ui/box.mjs";
+import { Checkbox } from "../../../ui/checkbox.mjs";
+import { Text } from "../../../ui/text.mjs";
+import { Time } from "../../../ui/time.mjs";
+import { useMediaPreview } from "../../media-preview/index.mjs";
+import { useContentOperate } from "../../../../hooks/use-content-operate.mjs";
+import SvgVideoPlay from "../../../../assets/icons/detail/video_play.mjs";
+import { ActivityCommentButton, ActivityDeleteButton, ActivityDislikeButton, ActivityLikeButton, ActivityShareButton } from "./user-activity-list-actions.mjs";
+import { toast } from "sonner";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/common/list/user-activity-list/user-activity-list-item.tsx
+const EMPTY_ARRAY = [];
+const TOGGLE_TEXT_LENGTH_THRESHOLD = 180;
+const ContentType = { post: 2 };
+/**
+* 可复用的媒体九宫格（布局与 UserActivityListItem 保持一致）。
+*/
+function UserActivityMediaGrid({ medias = EMPTY_ARRAY, className = "", onItemClick }) {
+	const t = useTranslations("components.ui.list.userActivityList");
+	const images = (medias || []).filter(Boolean).slice(0, 9);
+	if (!images.length) return null;
+	function handleClick(index) {
+		onItemClick?.(index);
+	}
+	function renderItem(image, index, wrapperClassName) {
+		const { is_video, media_url, cover_image } = image || {};
+		const isVideo = Boolean(is_video);
+		const imageSrc = isVideo ? cover_image || media_url || "" : media_url || "";
+		const wrapper = wrapperClassName || "relative w-full h-full";
+		if (!imageSrc) return null;
+		return /* @__PURE__ */ jsxs(Box, {
+			className: wrapper,
+			onClick: (e) => {
+				if (!onItemClick) return;
+				e.stopPropagation();
+				e.preventDefault();
+				handleClick(index);
+			},
+			children: [/* @__PURE__ */ jsx(Image, {
+				src: imageSrc,
+				alt: t("userActivityListItem.mediaAlt"),
+				fill: true,
+				className: "object-cover"
+			}), isVideo && /* @__PURE__ */ jsx(Box, {
+				className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-[rgba(0,0,0,0.5)] rounded-full",
+				children: /* @__PURE__ */ jsx(SvgVideoPlay, {
+					width: 36,
+					height: 36
+				})
+			})]
+		}, index);
+	}
+	if (images.length === 1) {
+		const { is_video, media_url, cover_image } = images[0] || {};
+		return /* @__PURE__ */ jsx(Box, {
+			className,
+			children: /* @__PURE__ */ jsx(Box, {
+				className: "w-full rounded-xl overflow-hidden",
+				children: renderItem({
+					is_video,
+					media_url,
+					cover_image,
+					__src: is_video ? cover_image || media_url || "" : media_url || ""
+				}, 0, "relative w-full aspect-square")
+			})
+		});
+	}
+	if (images.length === 2) return /* @__PURE__ */ jsx(Box, {
+		className,
+		children: /* @__PURE__ */ jsx(Box, {
+			className: "w-full flex gap-0.5 rounded-xl overflow-hidden",
+			children: images.map((image, index) => /* @__PURE__ */ jsx(Box, {
+				className: "flex-1 aspect-square relative",
+				children: renderItem(image, index)
+			}, index))
+		})
+	});
+	if (images.length === 3) return /* @__PURE__ */ jsx(Box, {
+		className,
+		children: /* @__PURE__ */ jsxs(Box, {
+			className: "w-full h-89.25 flex gap-0.5 rounded-xl overflow-hidden",
+			children: [/* @__PURE__ */ jsx(Box, {
+				className: "w-[56.65%] h-full relative",
+				children: renderItem(images[0], 0)
+			}), /* @__PURE__ */ jsx(Box, {
+				className: "flex-1 flex flex-col gap-0.5",
+				children: images.slice(1).map((image, idx) => /* @__PURE__ */ jsx(Box, {
+					className: "w-full flex-1 relative",
+					children: renderItem(image, idx + 1)
+				}, idx))
+			})]
+		})
+	});
+	if (images.length === 4) return /* @__PURE__ */ jsx(Box, {
+		className,
+		children: /* @__PURE__ */ jsx(Box, {
+			className: "w-full h-89.25 rounded-xl overflow-hidden grid grid-cols-2 grid-rows-2 gap-0.5",
+			children: images.map((image, index) => /* @__PURE__ */ jsx(Box, {
+				className: "w-full h-full relative",
+				children: renderItem(image, index)
+			}, index))
+		})
+	});
+	if (images.length === 5) return /* @__PURE__ */ jsx(Box, {
+		className,
+		children: /* @__PURE__ */ jsxs(Box, {
+			className: "w-full rounded-xl overflow-hidden flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx(Box, {
+				className: "w-full h-49.5 flex gap-0.5",
+				children: images.slice(0, 2).map((image, index) => /* @__PURE__ */ jsx(Box, {
+					className: "flex-1 h-full relative",
+					children: renderItem(image, index)
+				}, index))
+			}), /* @__PURE__ */ jsx(Box, {
+				className: "w-full h-33.5 flex gap-0.5",
+				children: images.slice(2).map((image, idx) => /* @__PURE__ */ jsx(Box, {
+					className: "flex-1 h-full relative",
+					children: renderItem(image, idx + 2)
+				}, idx))
+			})]
+		})
+	});
+	if (images.length === 6) return /* @__PURE__ */ jsx(Box, {
+		className,
+		children: /* @__PURE__ */ jsxs(Box, {
+			className: "w-full rounded-xl overflow-hidden flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsxs(Box, {
+				className: "w-full h-67.5 flex gap-0.5",
+				children: [/* @__PURE__ */ jsx(Box, {
+					className: "w-67.5 h-full relative",
+					children: renderItem(images[0], 0)
+				}), /* @__PURE__ */ jsx(Box, {
+					className: "flex-1 grid grid-cols-1 grid-rows-2 gap-0.5",
+					children: images.slice(1, 3).map((image, idx) => /* @__PURE__ */ jsx(Box, {
+						className: "w-full h-full relative",
+						children: renderItem(image, idx + 1)
+					}, idx))
+				})]
+			}), /* @__PURE__ */ jsx(Box, {
+				className: "w-full h-33.5 grid grid-cols-3 grid-rows-1 gap-0.5",
+				children: images.slice(3).map((image, idx) => /* @__PURE__ */ jsx(Box, {
+					className: "w-full h-full relative",
+					children: renderItem(image, idx + 3)
+				}, idx))
+			})]
+		})
+	});
+	if (images.length === 7) return /* @__PURE__ */ jsx(Box, {
+		className,
+		children: /* @__PURE__ */ jsxs(Box, {
+			className: "w-full rounded-xl overflow-hidden flex gap-0.5",
+			children: [/* @__PURE__ */ jsx(Box, {
+				className: "w-76 h-67.5 grid grid-cols-2 grid-rows-2 gap-0.5",
+				children: images.slice(0, 4).map((image, index) => /* @__PURE__ */ jsx(Box, {
+					className: "w-full h-full relative",
+					children: renderItem(image, index)
+				}, index))
+			}), /* @__PURE__ */ jsx(Box, {
+				className: "flex-1   grid grid-cols-1 grid-rows-3 gap-0.5",
+				children: images.slice(4).map((image, idx) => /* @__PURE__ */ jsx(Box, {
+					className: "w-full h-full relative",
+					children: renderItem(image, idx + 4)
+				}, idx))
+			})]
+		})
+	});
+	if (images.length === 8) return /* @__PURE__ */ jsx(Box, {
+		className,
+		children: /* @__PURE__ */ jsxs(Box, {
+			className: "w-full rounded-xl overflow-hidden flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx(Box, {
+				className: "w-full h-33.5 flex gap-0.5 items-center",
+				children: images.slice(0, 2).map((image, index) => /* @__PURE__ */ jsx(Box, {
+					className: "flex-1 h-full relative",
+					children: renderItem(image, index)
+				}, index))
+			}), /* @__PURE__ */ jsx(Box, {
+				className: "w-full h-67.5 grid grid-cols-3 grid-rows-2 gap-0.5",
+				children: images.slice(2).map((image, idx) => /* @__PURE__ */ jsx(Box, {
+					className: "w-full h-full relative",
+					children: renderItem(image, idx + 2)
+				}, idx))
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsx(Box, {
+		className,
+		children: /* @__PURE__ */ jsx(Box, {
+			className: "w-full h-101.5 rounded-xl overflow-hidden grid grid-cols-3 grid-rows-3 gap-0.5",
+			children: images.slice(0, 9).map((image, index) => /* @__PURE__ */ jsx(Box, {
+				className: "w-full h-full relative",
+				children: renderItem(image, index)
+			}, index))
+		})
+	});
+}
+/**
+* 用户动态列表项
+*/
+function UserActivityListItem(props) {
+	const t = useTranslations("components.ui.list.userActivityList");
+	const { content_id, author, rightSlot, create_time, content, medias, canEdit = false, isDeleting = false, isEditMode = false, isSelected = false, onToggle, interaction, like_count = 0, is_liked = false, onLikeSuccess, dislike_count = 0, is_dislike = false, is_collected, onDislikeSuccess, comment_count = 0, onDelete, onShare, onShareSuccess, onActionSuccess, onCollectChange, onItemClick } = props;
+	const resolvedIsCollected = interaction?.is_collected ?? is_collected ?? false;
+	const [interactionState, setInteractionState] = useState({
+		isLiked: is_liked,
+		likeCount: like_count,
+		isDisliked: is_dislike,
+		dislikeCount: dislike_count,
+		isCollected: resolvedIsCollected
+	});
+	const [isExpanded, setIsExpanded] = useState(false);
+	const [isCollectLoading, setIsCollectLoading] = useState(false);
+	const collectTimeoutRef = useRef(null);
+	const gridImages = medias?.filter(Boolean) ?? [];
+	const resolvedAuthorName = author?.nickname || author?.nick_name || "";
+	const resolvedAuthorAvatar = author?.avatar || author?.avatar_url || "";
+	useEffect(() => {
+		setInteractionState({
+			isLiked: is_liked,
+			likeCount: like_count,
+			isDisliked: is_dislike,
+			dislikeCount: dislike_count,
+			isCollected: resolvedIsCollected
+		});
+	}, [
+		dislike_count,
+		is_dislike,
+		is_liked,
+		like_count,
+		resolvedIsCollected
+	]);
+	useEffect(() => {
+		setIsExpanded(false);
+	}, [content]);
+	useEffect(() => {
+		return () => {
+			if (collectTimeoutRef.current) {
+				clearTimeout(collectTimeoutRef.current);
+				collectTimeoutRef.current = null;
+			}
+		};
+	}, []);
+	function handleLikeSuccess(state) {
+		setInteractionState((prev) => ({
+			...prev,
+			isLiked: state.isLiked,
+			likeCount: state.count,
+			isDisliked: state.isDisliked ?? prev.isDisliked,
+			dislikeCount: state.dislikeCount ?? prev.dislikeCount
+		}));
+		onLikeSuccess?.(state);
+	}
+	function handleDislikeSuccess(state) {
+		setInteractionState((prev) => ({
+			...prev,
+			isDisliked: state.isDisliked,
+			dislikeCount: state.count,
+			isLiked: state.isLiked ?? prev.isLiked,
+			likeCount: state.likeCount ?? prev.likeCount
+		}));
+		onDislikeSuccess?.(state);
+	}
+	const { handleToCollectionOperate } = useContentOperate({
+		id: content_id || "",
+		isLike: interactionState.isLiked,
+		isDislike: interactionState.isDisliked,
+		isCollect: interactionState.isCollected,
+		likeCnt: interactionState.likeCount,
+		dislikeCnt: interactionState.dislikeCount,
+		contentType: ContentType.post
+	});
+	/** 清理收藏 loading 的超时引用。 */
+	function clearCollectTimeout() {
+		if (collectTimeoutRef.current) {
+			clearTimeout(collectTimeoutRef.current);
+			collectTimeoutRef.current = null;
+		}
+	}
+	/** 更新收藏状态并通知外部刷新。 */
+	function handleCollectUpdate(isCollect) {
+		setInteractionState((prev) => ({
+			...prev,
+			isCollected: isCollect
+		}));
+		onActionSuccess?.();
+		if (content_id) onCollectChange?.(content_id, isCollect);
+	}
+	/** 处理收藏/取消收藏。 */
+	function handleCollectAction(currentCollect) {
+		if (!content_id) {
+			toast.error(t("userActivityListItem.collectFailed"));
+			return;
+		}
+		if (isCollectLoading) return;
+		setIsCollectLoading(true);
+		clearCollectTimeout();
+		if (!handleToCollectionOperate({
+			currentCollect,
+			onUpdate: ({ isCollect }) => {
+				clearCollectTimeout();
+				handleCollectUpdate(isCollect);
+				setIsCollectLoading(false);
+			}
+		})) {
+			toast.error(t("userActivityListItem.collectFailed"));
+			setIsCollectLoading(false);
+			return;
+		}
+		collectTimeoutRef.current = setTimeout(() => {
+			setIsCollectLoading(false);
+			collectTimeoutRef.current = null;
+		}, 300);
+	}
+	/** 判断是否需要展示展开/收起按钮。 */
+	function shouldShowToggleButton(text) {
+		return Boolean(text && text.length > TOGGLE_TEXT_LENGTH_THRESHOLD);
+	}
+	/** 切换文本展开/收起。 */
+	function handleToggleExpand() {
+		setIsExpanded((prev) => !prev);
+	}
+	const router = useRouter();
+	const handleItemClick = () => {
+		onItemClick?.(content_id ?? "");
+		router.push(`/post/${content_id}`);
+	};
+	const onAuthorClick = (e) => {
+		e.stopPropagation();
+		e.preventDefault();
+		router.push(`/profile/${author?.user_id}`);
+	};
+	const onCommentClick = () => {
+		router.push(`/post/${content_id}?tab=comment`);
+	};
+	const mediaPreview = useMediaPreview();
+	/** 打开媒体预览并定位到点击项。 */
+	function onMediaPreviewClick(index) {
+		const mediaItems = gridImages.map((media) => ({
+			src: media.media_url,
+			type: media.is_video ? "video" : "image",
+			cover: media.cover_image
+		}));
+		if (!mediaItems.length) return;
+		mediaPreview.open(mediaItems, index);
+	}
+	return /* @__PURE__ */ jsx(Box, {
+		className: "flex items-start gap-2 p-3",
+		children: /* @__PURE__ */ jsxs(Box, {
+			className: "flex-1 min-w-0",
+			children: [/* @__PURE__ */ jsxs(Box, {
+				className: "flex items-center gap-2 mb-3",
+				children: [
+					/* @__PURE__ */ jsxs(Box, {
+						className: "flex items-center gap-2 shrink-0",
+						children: [isEditMode && /* @__PURE__ */ jsx(Checkbox, {
+							checked: isSelected,
+							onCheckedChange: onToggle
+						}), /* @__PURE__ */ jsxs(Avatar, {
+							className: "w-10 h-10",
+							onClick: onAuthorClick,
+							children: [/* @__PURE__ */ jsx(AvatarImage, {
+								src: resolvedAuthorAvatar,
+								alt: resolvedAuthorName
+							}), /* @__PURE__ */ jsx(AvatarFallback, {})]
+						})]
+					}),
+					/* @__PURE__ */ jsxs(Box, {
+						className: "flex-1 min-w-0",
+						children: [/* @__PURE__ */ jsx(Text, {
+							as: "p",
+							className: "text-sm text-text1 line-clamp-1 font-medium",
+							children: resolvedAuthorName
+						}), /* @__PURE__ */ jsx(Box, {
+							className: "h-[1em]",
+							children: /* @__PURE__ */ jsx(Time, {
+								value: create_time,
+								className: "text-xs text-text3",
+								format: "YYYY-MM-DD HH:mm"
+							})
+						})]
+					}),
+					rightSlot && /* @__PURE__ */ jsx(Box, {
+						className: "shrink-0",
+						onClick: (e) => {
+							e.stopPropagation();
+							e.preventDefault();
+						},
+						children: rightSlot
+					}),
+					canEdit && /* @__PURE__ */ jsx(ActivityDeleteButton, {
+						onClick: onDelete,
+						disabled: isDeleting
+					})
+				]
+			}), /* @__PURE__ */ jsxs(Box, {
+				onClick: handleItemClick,
+				children: [/* @__PURE__ */ jsxs(Box, {
+					className: "mb-3",
+					children: [content && /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+						className: `text-sm text-text1 leading-5 whitespace-pre-wrap text-ellipsis  ${isExpanded ? "break-all" : "line-clamp-3"}`,
+						dangerouslySetInnerHTML: { __html: content }
+					}), shouldShowToggleButton(content) && /* @__PURE__ */ jsx(Box, {
+						className: "mt-1 text-xs text-text3",
+						onClick: (e) => {
+							e.stopPropagation();
+							e.preventDefault();
+							handleToggleExpand();
+						},
+						children: isExpanded ? t("userActivityListItem.collapse") : t("userActivityListItem.expand")
+					})] }), gridImages.length > 0 && /* @__PURE__ */ jsx(UserActivityMediaGrid, {
+						className: "mt-2",
+						medias: gridImages,
+						onItemClick: onMediaPreviewClick
+					})]
+				}), /* @__PURE__ */ jsxs(Box, {
+					className: "flex items-center justify-around text-text3 *:min-w-20",
+					onClick: (e) => {
+						e.stopPropagation();
+						e.preventDefault();
+					},
+					children: [
+						/* @__PURE__ */ jsx(ActivityLikeButton, {
+							contentId: content_id || "",
+							count: interactionState.likeCount,
+							isLiked: interactionState.isLiked,
+							isDisliked: interactionState.isDisliked,
+							dislikeCount: interactionState.dislikeCount,
+							onLikeSuccess: handleLikeSuccess,
+							onSuccess: onActionSuccess
+						}),
+						/* @__PURE__ */ jsx(ActivityDislikeButton, {
+							contentId: content_id || "",
+							count: interactionState.dislikeCount,
+							isDisliked: interactionState.isDisliked,
+							isLiked: interactionState.isLiked,
+							likeCount: interactionState.likeCount,
+							onDislikeSuccess: handleDislikeSuccess,
+							onSuccess: onActionSuccess
+						}),
+						/* @__PURE__ */ jsx(ActivityCommentButton, {
+							count: comment_count,
+							onClick: onCommentClick
+						}),
+						/* @__PURE__ */ jsx(ActivityShareButton, {
+							isCollected: interactionState.isCollected,
+							contentId: content_id || "",
+							userId: author?.user_id ?? "",
+							onShareSuccess,
+							onClick: onShare,
+							onCollect: () => handleCollectAction(false),
+							onUncollect: () => handleCollectAction(true)
+						})
+					]
+				})]
+			})]
+		})
+	});
+}
+
+//#endregion
+export { UserActivityListItem, UserActivityMediaGrid };

package/dist/components/common/list/user-activity-list/user-activity-list.mjs

@@ -1,2 +1,144 @@
 
-"use client";import{Box as e}from"../../../ui/box.mjs";import{List as t}from"../../../ui/list.mjs";import{Text as n}from"../../../ui/text.mjs";import{normalizeTimeToMilliseconds as r}from"../../../ui/time.mjs";import{UserActivityListItemSkeleton as i}from"../../skeleton/user-activity-list-item-skeleton.mjs";import{UserActivityListItem as a}from"./user-activity-list-item.mjs";import{useEffect as o,useMemo as s,useState as c}from"react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import{useTranslations as f}from"next-intl";function p(e){let t=r(e);if(!t)return!1;let n=new Date(t),i=new Date;return n.getFullYear()===i.getFullYear()&&n.getMonth()===i.getMonth()&&n.getDate()===i.getDate()}function m(e){let t=r(e);if(!t)return!1;let n=new Date(t),i=new Date;return i.setDate(i.getDate()-1),n.getFullYear()===i.getFullYear()&&n.getMonth()===i.getMonth()&&n.getDate()===i.getDate()}function h(r){let h=f(`components.ui.list`),[g,_]=c(!1),{list:v,loading:y,hasMore:b=!1,loadMore:x,showGroupHeaders:S=!0,emptyText:C,canEdit:w=!1,isEditMode:T,selectedIds:E,onToggleSelection:D,onActionSuccess:O,onItemClick:k}=r,A=C??h(`userActivityList.empty`);o(()=>{_(!0)},[]);let j=S&&g,{todayList:M,yesterdayList:N,earlierList:P}=s(()=>{if(!j)return{todayList:[],yesterdayList:[],earlierList:v};let e=[],t=[],n=[];for(let r of v)p(r.create_time)?e.push(r):m(r.create_time)?t.push(r):n.push(r);return{todayList:e,yesterdayList:t,earlierList:n}},[v,j]);return y&&v.length===0?u(e,{className:`bg-bg1`,children:Array.from({length:3}).map((e,t)=>u(i,{isEditMode:T},`user-activity-list-item-skeleton-${t}`))}):u(l,{children:u(t,{loading:y,loadMore:x,hasMore:b,empty:`no-content`,emptyText:A,children:j?d(l,{children:[M.length>0&&d(l,{children:[u(e,{className:`  `,children:u(n,{className:`text-lg  text-text1`,children:h(`userActivityList.today`)})}),M.map(e=>u(a,{...e,canEdit:w,isEditMode:T,isSelected:E?.has(e.content_id??``),onToggle:()=>D?.(e.content_id??``),onActionSuccess:O,is_dislike:e.interaction?.is_dislike||e.is_dislike,is_liked:e.interaction?.is_liked||e.is_liked,is_collected:e.is_collected||e.interaction?.is_collected,onItemClick:k},e.content_id))]}),N.length>0&&d(l,{children:[u(e,{className:`  `,children:u(n,{className:`text-lg  text-text1`,children:h(`userActivityList.yesterday`)})}),N.map(e=>u(a,{...e,canEdit:w,isEditMode:T,isSelected:E?.has(e.content_id??``),onToggle:()=>D?.(e.content_id??``),onActionSuccess:O,is_dislike:e.interaction?.is_dislike||e.is_dislike,is_liked:e.interaction?.is_liked||e.is_liked,is_collected:e.is_collected||e.interaction?.is_collected,onItemClick:k},e.content_id))]}),P.length>0&&d(l,{children:[u(e,{className:`  `,children:u(n,{className:`text-lg  text-text1`,children:h(`userActivityList.earlier`)})}),P.map(e=>u(a,{...e,canEdit:w,isEditMode:T,isSelected:E?.has(e.content_id??``),onToggle:()=>D?.(e.content_id??``),onActionSuccess:O,is_dislike:e.interaction?.is_dislike||e.is_dislike,is_liked:e.interaction?.is_liked||e.is_liked,is_collected:e.is_collected||e.interaction?.is_collected,onItemClick:k},e.content_id))]})]}):v.map(e=>u(a,{...e,canEdit:w,isEditMode:T,isSelected:E?.has(e.content_id??``),onToggle:()=>D?.(e.content_id??``),onActionSuccess:O,is_dislike:e.interaction?.is_dislike||e.is_dislike,is_liked:e.interaction?.is_liked||e.is_liked,is_collected:e.is_collected||e.interaction?.is_collected,onItemClick:k},e.content_id??``))})})}export{h as UserActivityList};
+'use client';
+
+import { Box } from "../../../ui/box.mjs";
+import { List } from "../../../ui/list.mjs";
+import { Text } from "../../../ui/text.mjs";
+import { normalizeTimeToMilliseconds } from "../../../ui/time.mjs";
+import { UserActivityListItemSkeleton } from "../../skeleton/user-activity-list-item-skeleton.mjs";
+import { UserActivityListItem } from "./user-activity-list-item.mjs";
+import { useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/common/list/user-activity-list/user-activity-list.tsx
+const DEFAULT_SKELETON_COUNT = 3;
+/** 判断时间戳是否是今天 */
+function isToday(timestamp) {
+	const milliseconds = normalizeTimeToMilliseconds(timestamp);
+	if (!milliseconds) return false;
+	const date = new Date(milliseconds);
+	const today = /* @__PURE__ */ new Date();
+	return date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate();
+}
+/** 判断时间戳是否是昨天 */
+function isYesterday(timestamp) {
+	const milliseconds = normalizeTimeToMilliseconds(timestamp);
+	if (!milliseconds) return false;
+	const date = new Date(milliseconds);
+	const yesterday = /* @__PURE__ */ new Date();
+	yesterday.setDate(yesterday.getDate() - 1);
+	return date.getFullYear() === yesterday.getFullYear() && date.getMonth() === yesterday.getMonth() && date.getDate() === yesterday.getDate();
+}
+/**
+* 用户动态列表组件。
+*/
+function UserActivityList(props) {
+	const t = useTranslations("components.ui.list");
+	const [isHydrated, setIsHydrated] = useState(false);
+	const { list, loading, hasMore = false, loadMore, showGroupHeaders = true, emptyText, canEdit = false, isEditMode, selectedIds, onToggleSelection, onActionSuccess, onItemClick } = props;
+	const resolvedEmptyText = emptyText ?? t("userActivityList.empty");
+	useEffect(() => {
+		setIsHydrated(true);
+	}, []);
+	const shouldShowGroupHeaders = showGroupHeaders && isHydrated;
+	const { todayList, yesterdayList, earlierList } = useMemo(() => {
+		if (!shouldShowGroupHeaders) return {
+			todayList: [],
+			yesterdayList: [],
+			earlierList: list
+		};
+		const today = [];
+		const yesterday = [];
+		const earlier = [];
+		for (const item of list) if (isToday(item.create_time)) today.push(item);
+		else if (isYesterday(item.create_time)) yesterday.push(item);
+		else earlier.push(item);
+		return {
+			todayList: today,
+			yesterdayList: yesterday,
+			earlierList: earlier
+		};
+	}, [list, shouldShowGroupHeaders]);
+	if (Boolean(loading) && list.length === 0) return /* @__PURE__ */ jsx(Box, {
+		className: "bg-bg1",
+		children: Array.from({ length: DEFAULT_SKELETON_COUNT }).map((_, index) => /* @__PURE__ */ jsx(UserActivityListItemSkeleton, { isEditMode }, `user-activity-list-item-skeleton-${index}`))
+	});
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(List, {
+		loading,
+		loadMore,
+		hasMore,
+		empty: "no-content",
+		emptyText: resolvedEmptyText,
+		children: shouldShowGroupHeaders ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			todayList.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Box, {
+				className: "  ",
+				children: /* @__PURE__ */ jsx(Text, {
+					className: "text-lg  text-text1",
+					children: t("userActivityList.today")
+				})
+			}), todayList.map((item) => /* @__PURE__ */ jsx(UserActivityListItem, {
+				...item,
+				canEdit,
+				isEditMode,
+				isSelected: selectedIds?.has(item.content_id ?? ""),
+				onToggle: () => onToggleSelection?.(item.content_id ?? ""),
+				onActionSuccess,
+				is_dislike: item.interaction?.is_dislike || item.is_dislike,
+				is_liked: item.interaction?.is_liked || item.is_liked,
+				is_collected: item.is_collected || item.interaction?.is_collected,
+				onItemClick
+			}, item.content_id))] }),
+			yesterdayList.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Box, {
+				className: "  ",
+				children: /* @__PURE__ */ jsx(Text, {
+					className: "text-lg  text-text1",
+					children: t("userActivityList.yesterday")
+				})
+			}), yesterdayList.map((item) => /* @__PURE__ */ jsx(UserActivityListItem, {
+				...item,
+				canEdit,
+				isEditMode,
+				isSelected: selectedIds?.has(item.content_id ?? ""),
+				onToggle: () => onToggleSelection?.(item.content_id ?? ""),
+				onActionSuccess,
+				is_dislike: item.interaction?.is_dislike || item.is_dislike,
+				is_liked: item.interaction?.is_liked || item.is_liked,
+				is_collected: item.is_collected || item.interaction?.is_collected,
+				onItemClick
+			}, item.content_id))] }),
+			earlierList.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Box, {
+				className: "  ",
+				children: /* @__PURE__ */ jsx(Text, {
+					className: "text-lg  text-text1",
+					children: t("userActivityList.earlier")
+				})
+			}), earlierList.map((item) => /* @__PURE__ */ jsx(UserActivityListItem, {
+				...item,
+				canEdit,
+				isEditMode,
+				isSelected: selectedIds?.has(item.content_id ?? ""),
+				onToggle: () => onToggleSelection?.(item.content_id ?? ""),
+				onActionSuccess,
+				is_dislike: item.interaction?.is_dislike || item.is_dislike,
+				is_liked: item.interaction?.is_liked || item.is_liked,
+				is_collected: item.is_collected || item.interaction?.is_collected,
+				onItemClick
+			}, item.content_id))] })
+		] }) : list.map((item) => /* @__PURE__ */ jsx(UserActivityListItem, {
+			...item,
+			canEdit,
+			isEditMode,
+			isSelected: selectedIds?.has(item.content_id ?? ""),
+			onToggle: () => onToggleSelection?.(item.content_id ?? ""),
+			onActionSuccess,
+			is_dislike: item.interaction?.is_dislike || item.is_dislike,
+			is_liked: item.interaction?.is_liked || item.is_liked,
+			is_collected: item.is_collected || item.interaction?.is_collected,
+			onItemClick
+		}, item.content_id ?? ""))
+	}) });
+}
+
+//#endregion
+export { UserActivityList };