@funhub/platform 0.2.29 → 0.2.31

package/dist/components/biz/business/detail/shared/detail-follow-action.mjs

@@ -1,2 +1,115 @@
 
-"use client";import{cn as e}from"../../../../../utils/cn.mjs";import{useFollowIdsState as t}from"../../../../../store/modules/follow-ids-store.mjs";import{useUserStore as n}from"../../../../../store/modules/user-store.mjs";import{followUser as r,unfollowUser as i}from"../../../../../utils/follow-service.mjs";import{useLoginModalStore as a}from"../../../../../store/modules/login-modal-store.mjs";import o from"../../../../../assets/icons/common/follow_sel.mjs";import s from"../../../../../assets/icons/common/follow_user.mjs";import{UnfollowConfirmDialog as c}from"../../../../common/follow-button/unfollow-confirm-dialog.mjs";import{useEffect as l,useState as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{useTranslations as m}from"next-intl";function h({information:e,onUpdate:o}){let{isLogin:s,userId:m,userInfo:h}=n(),_=m||h?.userId||``,v=e.author,y=e.up_user||v?.user_id||``,b=!!(_&&y&&_===y),[x,S]=u(!!e.is_followed),[C,w]=u(!1),[T,E]=u(!1);l(()=>{S(!!e.is_followed)},[e.id,e.is_followed]);async function D(){if(!s||!_){a.getState().open();return}if(!y){console.warn(`用户信息不完整，无法执行关注操作`);return}E(!0);let e=!x;try{let n;if(n=e?await r({app_id:0,follower_id:_,followee_id:y}):await i({app_id:0,follower_id:_,followee_id:y}),n.success){S(e),o({is_followed:e});let{followIds:n,setFollowIds:r}=t.getState(),i=new Set(n);e?i.add(y):i.delete(y),r(Array.from(i))}else console.error(`关注操作失败:`,n.message)}catch(e){console.error(`关注操作异常:`,e)}finally{E(!1)}}function O(){if(!T){if(!s||!_){a.getState().open();return}if(x){w(!0);return}D()}}function k(){w(!1),D()}function A(){w(!1)}return p(d,{children:[e.up_user&&y&&!b?f(g,{followed:x,loading:T,onToggle:O}):null,f(c,{open:C,onOpenChange:w,onCancel:A,onConfirm:k})]})}function g({followed:t,loading:n=!1,onToggle:r}){let i=m(`components.biz.business.detail`);return f(`button`,{type:`button`,disabled:n,className:e(`flex h-7 items-center rounded-full border border-solid px-3 text-xs font-medium transition-colors`,n&&`opacity-50 cursor-not-allowed`,t?`border-text3 text-text3`:`border-theme5 text-theme5`),onClick:r,children:t?p(d,{children:[f(o,{className:`w-[12px] h-[12px] text-text3 shrink-0`}),f(`span`,{className:`text-text3 text-[12px] leading-[18px] ml-[4px] shrink-0`,children:i(`detailFollowAction.following`)})]}):p(d,{children:[f(s,{className:`block w-[12px] h-[12px] text-theme5 shrink-0`}),f(`span`,{className:`block text-theme5 text-[12px] leading-[18px] ml-[4px] shrink-0`,children:i(`detailFollowAction.follow`)})]})})}export{h as DetailFollowAction};
+'use client';
+
+import { cn } from "../../../../../utils/cn.mjs";
+import { useFollowIdsState } from "../../../../../store/modules/follow-ids-store.mjs";
+import { useUserStore } from "../../../../../store/modules/user-store.mjs";
+import { followUser, unfollowUser } from "../../../../../utils/follow-service.mjs";
+import { useLoginModalStore } from "../../../../../store/modules/login-modal-store.mjs";
+import SvgFollowSel from "../../../../../assets/icons/common/follow_sel.mjs";
+import SvgFollowUser from "../../../../../assets/icons/common/follow_user.mjs";
+import { UnfollowConfirmDialog } from "../../../../common/follow-button/unfollow-confirm-dialog.mjs";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/biz/business/detail/shared/detail-follow-action.tsx
+function DetailFollowAction({ information, onUpdate }) {
+	const { isLogin, userId: storeUserId, userInfo } = useUserStore();
+	const currentUserId = storeUserId || userInfo?.userId || "";
+	const user = information.author;
+	const followeeId = information.up_user || user?.user_id || "";
+	const isSelf = Boolean(currentUserId && followeeId && currentUserId === followeeId);
+	const [followed, setFollowed] = useState(Boolean(information.is_followed));
+	const [confirmOpen, setConfirmOpen] = useState(false);
+	const [loading, setLoading] = useState(false);
+	useEffect(() => {
+		setFollowed(Boolean(information.is_followed));
+	}, [information.id, information.is_followed]);
+	async function applyFollowChange() {
+		if (!isLogin || !currentUserId) {
+			useLoginModalStore.getState().open();
+			return;
+		}
+		if (!followeeId) {
+			console.warn("用户信息不完整，无法执行关注操作");
+			return;
+		}
+		setLoading(true);
+		const next = !followed;
+		try {
+			let result;
+			if (next) result = await followUser({
+				app_id: 0,
+				follower_id: currentUserId,
+				followee_id: followeeId
+			});
+			else result = await unfollowUser({
+				app_id: 0,
+				follower_id: currentUserId,
+				followee_id: followeeId
+			});
+			if (result.success) {
+				setFollowed(next);
+				onUpdate({ is_followed: next });
+				const { followIds: prevIds, setFollowIds } = useFollowIdsState.getState();
+				const nextIds = new Set(prevIds);
+				if (next) nextIds.add(followeeId);
+				else nextIds.delete(followeeId);
+				setFollowIds(Array.from(nextIds));
+			} else console.error("关注操作失败:", result.message);
+		} catch (error) {
+			console.error("关注操作异常:", error);
+		} finally {
+			setLoading(false);
+		}
+	}
+	function handleToggleFollow() {
+		if (loading) return;
+		if (!isLogin || !currentUserId) {
+			useLoginModalStore.getState().open();
+			return;
+		}
+		if (followed) {
+			setConfirmOpen(true);
+			return;
+		}
+		applyFollowChange();
+	}
+	function handleConfirmUnfollow() {
+		setConfirmOpen(false);
+		applyFollowChange();
+	}
+	function handleCancelUnfollow() {
+		setConfirmOpen(false);
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [information.up_user && followeeId && !isSelf ? /* @__PURE__ */ jsx(FollowButton, {
+		followed,
+		loading,
+		onToggle: handleToggleFollow
+	}) : null, /* @__PURE__ */ jsx(UnfollowConfirmDialog, {
+		open: confirmOpen,
+		onOpenChange: setConfirmOpen,
+		onCancel: handleCancelUnfollow,
+		onConfirm: handleConfirmUnfollow
+	})] });
+}
+function FollowButton({ followed, loading = false, onToggle }) {
+	const t = useTranslations("components.biz.business.detail");
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		disabled: loading,
+		className: cn("flex h-7 items-center rounded-full border border-solid px-3 text-xs font-medium transition-colors", loading && "opacity-50 cursor-not-allowed", followed ? "border-text3 text-text3" : "border-theme5 text-theme5"),
+		onClick: onToggle,
+		children: followed ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SvgFollowSel, { className: "w-[12px] h-[12px] text-text3 shrink-0" }), /* @__PURE__ */ jsx("span", {
+			className: "text-text3 text-[12px] leading-[18px] ml-[4px] shrink-0",
+			children: t("detailFollowAction.following")
+		})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SvgFollowUser, { className: "block w-[12px] h-[12px] text-theme5 shrink-0" }), /* @__PURE__ */ jsx("span", {
+			className: "block text-theme5 text-[12px] leading-[18px] ml-[4px] shrink-0",
+			children: t("detailFollowAction.follow")
+		})] })
+	});
+}
+
+//#endregion
+export { DetailFollowAction };

package/dist/components/biz/business/detail/shared/detail-info-tags.mjs

@@ -1,2 +1,34 @@
 
-"use client";import{trackPageClick as e}from"../../../../../utils/tracking.mjs";import{Box as t}from"../../../../ui/box.mjs";import{Text as n}from"../../../../ui/text.mjs";import{jsx as r,jsxs as i}from"react/jsx-runtime";function a({tags:a,className:o=``}){return!a||a.length===0?null:r(t,{className:`flex items-center gap-[6px] overflow-x-auto overflow-y-hidden flex-nowrap [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${o}`,children:a.map((t,a)=>r(`div`,{className:`shrink-0 h-[28px] border-line1 border-[1px] rounded-[6px] px-[6px] flex items-center cursor-pointer`,onClick:n=>{e(`page_video_detail`,`详情页`,n,`detail_tag_click`,{tag_id:t.id,tag_name:t.name})},children:i(n,{className:`text-[14px] text-text1 leading-[20px]`,children:[`#`,t.name]})},`${a}-tag-${t.id}`))})}export{a as DetailInfoTags};
+'use client';
+
+import { trackPageClick } from "../../../../../utils/tracking.mjs";
+import { Box } from "../../../../ui/box.mjs";
+import { Text } from "../../../../ui/text.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region components/biz/business/detail/shared/detail-info-tags.tsx
+/**
+* 详情标签单行横向滚动展示。
+*/
+function DetailInfoTags({ tags, className = "" }) {
+	if (!tags || tags.length === 0) return null;
+	return /* @__PURE__ */ jsx(Box, {
+		className: `flex items-center gap-[6px] overflow-x-auto overflow-y-hidden flex-nowrap [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${className}`,
+		children: tags.map((tag, index) => /* @__PURE__ */ jsx("div", {
+			className: "shrink-0 h-[28px] border-line1 border-[1px] rounded-[6px] px-[6px] flex items-center cursor-pointer",
+			onClick: (e) => {
+				trackPageClick("page_video_detail", "详情页", e, "detail_tag_click", {
+					tag_id: tag.id,
+					tag_name: tag.name
+				});
+			},
+			children: /* @__PURE__ */ jsxs(Text, {
+				className: "text-[14px] text-text1 leading-[20px]",
+				children: ["#", tag.name]
+			})
+		}, `${index}-tag-${tag.id}`))
+	});
+}
+
+//#endregion
+export { DetailInfoTags };

package/dist/components/biz/business/detail/shared/detail-info-title.mjs

@@ -1,2 +1,85 @@
 
-"use client";import{trackPageClick as e}from"../../../../../utils/tracking.mjs";import{Box as t}from"../../../../ui/box.mjs";import n from"../../../../../assets/icons/common/right_arrow.mjs";import{useEffect as r,useMemo as i,useRef as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l({title:l,className:u=``}){let[d,f]=o(!1),[p,m]=o(!1),h=a(null),g=a(null),_=a(null),v=i(()=>l?.trim()??``,[l]);if(r(()=>{f(!1)},[v]),r(()=>{if(d){m(!0);return}if(!v){m(!1);return}let e=g.current,t=_.current;if(!e||!t){m(!1);return}let n=()=>{let n=e.clientWidth||e.getBoundingClientRect().width,r=t.getBoundingClientRect().width;m(r>n+1)};n();let r=new ResizeObserver(n);return r.observe(e),h.current&&r.observe(h.current),()=>{r.disconnect()}},[d,v]),!v)return null;function y(){d||e(`page_video_detail`,`详情页`,null,`detail_title_expand`),f(e=>!e)}return c(t,{ref:h,className:`relative flex items-start min-w-0 overflow-hidden ${u}`,children:[s(`span`,{ref:_,className:`absolute invisible whitespace-nowrap text-[20px] leading-[28px] font-bold`,children:v}),s(`p`,{ref:g,className:`flex-1 min-w-0 text-[20px] leading-[28px] font-bold text-text1 ${d?``:`line-clamp-1`}`,children:v}),p&&s(`button`,{type:`button`,className:`ml-[8px] h-[24px] w-[24px] flex items-center justify-center`,onClick:y,children:s(n,{className:`h-[12px] w-[12px] text-text2 transition-transform ${d?`-rotate-90`:`rotate-90`}`})})]})}export{l as DetailInfoTitle};
+'use client';
+
+import { trackPageClick } from "../../../../../utils/tracking.mjs";
+import { Box } from "../../../../ui/box.mjs";
+import SvgRightArrow from "../../../../../assets/icons/common/right_arrow.mjs";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region components/biz/business/detail/shared/detail-info-title.tsx
+/**
+* 详情标题（支持展开/收起）。
+*/
+function DetailInfoTitle({ title, className = "" }) {
+	const [isExpanded, setIsExpanded] = useState(false);
+	const [isOverflow, setIsOverflow] = useState(false);
+	const containerRef = useRef(null);
+	const titleRef = useRef(null);
+	const measureRef = useRef(null);
+	const resolvedTitle = useMemo(() => title?.trim() ?? "", [title]);
+	useEffect(() => {
+		setIsExpanded(false);
+	}, [resolvedTitle]);
+	useEffect(() => {
+		if (isExpanded) {
+			setIsOverflow(true);
+			return;
+		}
+		if (!resolvedTitle) {
+			setIsOverflow(false);
+			return;
+		}
+		const titleEl = titleRef.current;
+		const measureEl = measureRef.current;
+		if (!titleEl || !measureEl) {
+			setIsOverflow(false);
+			return;
+		}
+		const updateOverflow = () => {
+			const availableWidth = titleEl.clientWidth || titleEl.getBoundingClientRect().width;
+			const neededWidth = measureEl.getBoundingClientRect().width;
+			setIsOverflow(neededWidth > availableWidth + 1);
+		};
+		updateOverflow();
+		const observer = new ResizeObserver(updateOverflow);
+		observer.observe(titleEl);
+		if (containerRef.current) observer.observe(containerRef.current);
+		return () => {
+			observer.disconnect();
+		};
+	}, [isExpanded, resolvedTitle]);
+	if (!resolvedTitle) return null;
+	/**
+	* 切换标题展开状态。
+	*/
+	function handleToggle() {
+		if (!isExpanded) trackPageClick("page_video_detail", "详情页", null, "detail_title_expand");
+		setIsExpanded((prev) => !prev);
+	}
+	return /* @__PURE__ */ jsxs(Box, {
+		ref: containerRef,
+		className: `relative flex items-start min-w-0 overflow-hidden ${className}`,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				ref: measureRef,
+				className: "absolute invisible whitespace-nowrap text-[20px] leading-[28px] font-bold",
+				children: resolvedTitle
+			}),
+			/* @__PURE__ */ jsx("p", {
+				ref: titleRef,
+				className: `flex-1 min-w-0 text-[20px] leading-[28px] font-bold text-text1 ${isExpanded ? "" : "line-clamp-1"}`,
+				children: resolvedTitle
+			}),
+			isOverflow && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "ml-[8px] h-[24px] w-[24px] flex items-center justify-center",
+				onClick: handleToggle,
+				children: /* @__PURE__ */ jsx(SvgRightArrow, { className: `h-[12px] w-[12px] text-text2 transition-transform ${isExpanded ? "-rotate-90" : "rotate-90"}` })
+			})
+		]
+	});
+}
+
+//#endregion
+export { DetailInfoTitle };