@funhub/platform 0.2.14 → 0.2.16

package/dist/components/biz/business/comment/comment-item.mjs

@@ -1,2 +1,191 @@
 
-"use client";import{cn as e}from"../../../../utils/cn.mjs";import{Avatar as t,AvatarImage as n}from"../../../ui/avatar.mjs";import r from"../../../common/interaction-animations.module.mjs";import i from"../../../../assets/icons/common/right_arrow.mjs";import{useInteractionAnimation as a}from"../../../../hooks/use-interaction-animation.mjs";import o from"../../../../assets/icons/detail/give_like.mjs";import s from"../../../../assets/icons/detail/give_like_sel.mjs";import c from"../../../../assets/icons/common/god_comment.mjs";import l from"../../../../assets/icons/detail/un_like.mjs";import u from"../../../../assets/icons/detail/un_like_sel.mjs";import{CommentMedia as d}from"./comment-media.mjs";import{CommentRichText as f}from"./comment-rich-text.mjs";import{TimeDisplay as p}from"./time-display.mjs";import{memo as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";import{useTranslations as _}from"next-intl";import v from"next/link";function y(e){let t=Number(e)||0;return t>=1e4?`${(t/1e4).toFixed(1)}w`:t>=1e3?`${(t/1e3).toFixed(1)}k`:String(t)}const b=m(({comment:m,isHighlight:b,onReply:x,onViewReplies:S,onReplyAction:C,onLike:w,onDislike:T,onRequireLogin:E,variant:D=`dark`,rightSlot:O,showReplyButton:k=!0,isLogin:A=!0})=>{let j=_(`components.biz.business.comment`),M=D===`light`,N=m.status===`0`,P=a();function F(){E?.()}function I(){if(!A){F();return}P.trigger(r.likeShakeAnimation),w?.(m)}function L(){if(!A){F();return}T?.(m)}function R(){if(!A){F();return}if(!x){F();return}x(m)}function z(){if(!A){F();return}S?.(m)}function B(){if(!A){F();return}if(C){C(m);return}if(+m.reply_cnt==0){R();return}z()}function V(){return m.reply_cnt===`0`?j(`commentItem.reply`):j(`commentItem.replyCount`,{count:m.reply_cnt})}return g(`div`,{className:e(`flex flex-col p-[16px] relative`,M?`text-text1`:`text-white`),children:[b&&h(c,{className:`w-[70px] h-[70px] absolute top-0 right-[80px]`}),g(`div`,{className:`flex flex-row justify-between relative z-[2]`,children:[g(v,{className:`flex flex-row items-center`,href:`/profile/${m.user_id}`,children:[h(t,{children:h(n,{src:m.avatar,alt:m.user_name})}),g(`div`,{className:`ml-[12px] flex flex-col min-w-0`,children:[h(`span`,{className:e(`text-[14px] leading-[14px] max-w-[180px] text-ellipsis overflow-hidden whitespace-nowrap`,M?`text-text2`:`text-white/80`),children:m.user_name}),h(`span`,{className:e(`mt-[8px] text-[12px] leading-[12px]`,M?`text-text3`:`text-white/50`),children:h(p,{timestamp:m.created_at})})]})]}),N?h(`div`,{className:`px-[8px] py-[4px] bg-text3/10 rounded-[12px]`,children:h(`span`,{className:e(`text-[12px] leading-[12px]`,M?`text-text3`:`text-white/60`),children:j(`commentItem.contentInReview`)})}):O||g(`div`,{className:`flex flex-row items-center`,children:[g(`button`,{type:`button`,className:`px-[4px] flex flex-col items-center`,onClick:I,children:[m.like_flag===`1`?h(s,{className:e(`w-[14px] h-[14px]`,P.animationClass)}):h(o,{className:e(`w-[14px] h-[14px]`,M?`text-text3`:`text-white/70`,P.animationClass)}),h(`span`,{className:e(`mt-[4px] text-[12px] leading-[12px]`,M?`text-text3`:`text-white/70`),children:m.like_cnt===`0`?j(`commentItem.like`):y(m.like_cnt)})]}),g(`button`,{type:`button`,className:`ml-[12px] px-[4px] flex flex-col items-center`,onClick:L,children:[m.like_flag===`2`?h(u,{className:`w-[14px] h-[14px]`}):h(l,{className:e(`w-[14px] h-[14px]`,M?`text-text3`:`text-white/70`)}),h(`span`,{className:e(`mt-[4px] text-[12px] leading-[12px]`,M?`text-text3`:`text-white/70`),children:m.dislike_cnt===`0`?j(`commentItem.dislike`):y(m.dislike_cnt)})]})]})]}),g(`div`,{className:`mt-[4px] pl-[50px] flex flex-col`,children:[m.text&&h(f,{className:e(`text-[14px] leading-[22px] break-all`,M?`text-text1`:`text-white/90`),text:m.text,atUsers:m.at_users}),h(d,{list:m.nine_grid_content_info,disabled:N,hasText:!!m.text,playerId:m.id}),k&&g(`button`,{type:`button`,className:e(`mt-[4px] w-[fit-content] h-[30px] px-[12px] text-[14px] leading-[22px] flex flex-row items-center rounded-[15px]`,M?`text-text1 bg-bg2`:`text-white bg-white/10`),onClick:B,children:[h(`span`,{children:V()}),m.reply_cnt!==`0`&&h(i,{className:`w-[10px] h-[10px] ml-[2px]`})]})]})]})});export{b as CommentItem};
+'use client';
+
+import { cn } from "../../../../utils/cn.mjs";
+import { Avatar, AvatarImage } from "../../../ui/avatar.mjs";
+import interaction_animations_module_default from "../../../common/interaction-animations.module.mjs";
+import SvgRightArrow from "../../../../assets/icons/common/right_arrow.mjs";
+import { useInteractionAnimation } from "../../../../hooks/use-interaction-animation.mjs";
+import SvgGiveLike from "../../../../assets/icons/detail/give_like.mjs";
+import SvgGiveLikeSel from "../../../../assets/icons/detail/give_like_sel.mjs";
+import SvgGodComment from "../../../../assets/icons/common/god_comment.mjs";
+import SvgUnLike from "../../../../assets/icons/detail/un_like.mjs";
+import SvgUnLikeSel from "../../../../assets/icons/detail/un_like_sel.mjs";
+import { CommentMedia } from "./comment-media.mjs";
+import { CommentRichText } from "./comment-rich-text.mjs";
+import { TimeDisplay } from "./time-display.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+
+//#region components/biz/business/comment/comment-item.tsx
+/**
+* 将数量转换为紧凑格式展示。
+*/
+function formatCount(value) {
+	const num = Number(value) || 0;
+	if (num >= 1e4) return `${(num / 1e4).toFixed(1)}w`;
+	if (num >= 1e3) return `${(num / 1e3).toFixed(1)}k`;
+	return String(num);
+}
+/**
+* 评论项：头像在左，内容与操作按钮在右侧展示。
+*/
+const CommentItem = memo(({ comment, isHighlight, onReply, onViewReplies, onReplyAction, onLike, onDislike, onRequireLogin, variant = "dark", rightSlot, showReplyButton = true, isLogin = true }) => {
+	const t = useTranslations("components.biz.business.comment");
+	const isLight = variant === "light";
+	const isUnderReview = comment.status === "0";
+	const likeAnimation = useInteractionAnimation();
+	/**
+	* 触发登录提示（当缺少回复处理时兜底）。
+	*/
+	function handleRequireLogin() {
+		onRequireLogin?.();
+	}
+	/**
+	* 点赞评论。
+	*/
+	function handleLikeClick() {
+		if (!isLogin) {
+			handleRequireLogin();
+			return;
+		}
+		likeAnimation.trigger(interaction_animations_module_default.likeShakeAnimation);
+		onLike?.(comment);
+	}
+	/**
+	* 点踩评论。
+	*/
+	function handleDislikeClick() {
+		if (!isLogin) {
+			handleRequireLogin();
+			return;
+		}
+		onDislike?.(comment);
+	}
+	/**
+	* 回复评论。
+	*/
+	function handleReplyClick() {
+		if (!isLogin) {
+			handleRequireLogin();
+			return;
+		}
+		if (!onReply) {
+			handleRequireLogin();
+			return;
+		}
+		onReply(comment);
+	}
+	/**
+	* 查看回复列表。
+	*/
+	function handleViewRepliesClick() {
+		if (!isLogin) {
+			handleRequireLogin();
+			return;
+		}
+		onViewReplies?.(comment);
+	}
+	/**
+	* 点击回复按钮：无回复则进入回复态，有回复则查看回复列表。
+	*/
+	function handleReplyAction() {
+		if (!isLogin) {
+			handleRequireLogin();
+			return;
+		}
+		if (onReplyAction) {
+			onReplyAction(comment);
+			return;
+		}
+		if (+comment.reply_cnt === 0) {
+			handleReplyClick();
+			return;
+		}
+		handleViewRepliesClick();
+	}
+	/**
+	* 格式化回复按钮文案。
+	*/
+	function getReplyLabel() {
+		return comment.reply_cnt === "0" ? t("commentItem.reply") : t("commentItem.replyCount", { count: comment.reply_cnt });
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col p-[16px] relative", isLight ? "text-text1" : "text-white"),
+		children: [
+			isHighlight && /* @__PURE__ */ jsx(SvgGodComment, { className: "w-[70px] h-[70px] absolute top-0 right-[80px]" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-row justify-between relative z-[2]",
+				children: [/* @__PURE__ */ jsxs(Link, {
+					className: "flex flex-row items-center",
+					href: `/profile/${comment.user_id}`,
+					children: [/* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarImage, {
+						src: comment.avatar,
+						alt: comment.user_name
+					}) }), /* @__PURE__ */ jsxs("div", {
+						className: "ml-[12px] flex flex-col min-w-0",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("text-[14px] leading-[14px] max-w-[180px] text-ellipsis overflow-hidden whitespace-nowrap", isLight ? "text-text2" : "text-white/80"),
+							children: comment.user_name
+						}), /* @__PURE__ */ jsx("span", {
+							className: cn("mt-[8px] text-[12px] leading-[12px]", isLight ? "text-text3" : "text-white/50"),
+							children: /* @__PURE__ */ jsx(TimeDisplay, { timestamp: comment.created_at })
+						})]
+					})]
+				}), isUnderReview ? /* @__PURE__ */ jsx("div", {
+					className: "px-[8px] py-[4px] bg-text3/10 rounded-[12px]",
+					children: /* @__PURE__ */ jsx("span", {
+						className: cn("text-[12px] leading-[12px]", isLight ? "text-text3" : "text-white/60"),
+						children: t("commentItem.contentInReview")
+					})
+				}) : rightSlot || /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-row items-center",
+					children: [/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "px-[4px] flex flex-col items-center",
+						onClick: handleLikeClick,
+						children: [comment.like_flag === "1" ? /* @__PURE__ */ jsx(SvgGiveLikeSel, { className: cn("w-[14px] h-[14px]", likeAnimation.animationClass) }) : /* @__PURE__ */ jsx(SvgGiveLike, { className: cn("w-[14px] h-[14px]", isLight ? "text-text3" : "text-white/70", likeAnimation.animationClass) }), /* @__PURE__ */ jsx("span", {
+							className: cn("mt-[4px] text-[12px] leading-[12px]", isLight ? "text-text3" : "text-white/70"),
+							children: comment.like_cnt === "0" ? t("commentItem.like") : formatCount(comment.like_cnt)
+						})]
+					}), /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "ml-[12px] px-[4px] flex flex-col items-center",
+						onClick: handleDislikeClick,
+						children: [comment.like_flag === "2" ? /* @__PURE__ */ jsx(SvgUnLikeSel, { className: "w-[14px] h-[14px]" }) : /* @__PURE__ */ jsx(SvgUnLike, { className: cn("w-[14px] h-[14px]", isLight ? "text-text3" : "text-white/70") }), /* @__PURE__ */ jsx("span", {
+							className: cn("mt-[4px] text-[12px] leading-[12px]", isLight ? "text-text3" : "text-white/70"),
+							children: comment.dislike_cnt === "0" ? t("commentItem.dislike") : formatCount(comment.dislike_cnt)
+						})]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-[4px] pl-[50px] flex flex-col",
+				children: [
+					comment.text && /* @__PURE__ */ jsx(CommentRichText, {
+						className: cn("text-[14px] leading-[22px] break-all", isLight ? "text-text1" : "text-white/90"),
+						text: comment.text,
+						atUsers: comment.at_users
+					}),
+					/* @__PURE__ */ jsx(CommentMedia, {
+						list: comment.nine_grid_content_info,
+						disabled: isUnderReview,
+						hasText: Boolean(comment.text),
+						playerId: comment.id
+					}),
+					showReplyButton && /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: cn("mt-[4px] w-[fit-content] h-[30px] px-[12px] text-[14px] leading-[22px] flex flex-row items-center rounded-[15px]", isLight ? "text-text1 bg-bg2" : "text-white bg-white/10"),
+						onClick: handleReplyAction,
+						children: [/* @__PURE__ */ jsx("span", { children: getReplyLabel() }), comment.reply_cnt !== "0" && /* @__PURE__ */ jsx(SvgRightArrow, { className: "w-[10px] h-[10px] ml-[2px]" })]
+					})
+				]
+			})
+		]
+	});
+});
+
+//#endregion
+export { CommentItem };