@funhub/platform 0.1.60 → 0.1.62

package/dist/components/pages/video-detail/video-detail-client.mjs

@@ -1,2 +1,339 @@
 
-"use client";import{getChannelList as e}from"../../biz/utils/helpers/get-channel-list.mjs";import{cn as t}from"../../../utils/cn.mjs";import n from"../../../utils/get-res-url.mjs";import{decryptImageToUint8Array as r}from"../../../utils/decrypt-image-client.mjs";import{gContentGetAppChannels as i,gContentGetVideoDetail as a,pInteractionBrowse as o}from"../../../service/generated/client.mjs";import{uint8ArrayToBase64 as s}from"../../../utils/uint8.mjs";import{EmptyState as c}from"../../ui/empty.mjs";import{useRequest as l}from"../../../hooks/query/use-query.mjs";import{queryKey as u}from"../../../constants/query-key.mjs";import{useKeepAliveEffect as d,useKeepAliveState as f}from"../../common/keep-scroll-position/index.mjs";import{apiCollectClick as p}from"../../../utils/api-collect.mjs";import{batchQueryContentInteractions as m}from"../../../hooks/use-content-operate.mjs";import ee from"../../biz/business/search-bar/variants/detail-search-bar/index.mjs";import{VideoDetailMaterialRuntimeProvider as te}from"../../biz/business/detail/shared/runtime-context-provider.mjs";import{resolveMaterialProps as ne,videoDetailMaterials as re}from"../../biz/business/detail/shared/registry.mjs";import{DetailHero as ie}from"../../biz/business/detail/shared/video-hero.mjs";import{Fragment as h,useCallback as g,useEffect as _,useMemo as v}from"react";import{Fragment as y,jsx as b,jsxs as x}from"react/jsx-runtime";import{useTranslations as ae}from"next-intl";import{useParams as oe,useSearchParams as se}from"next/navigation";const S=[{id:`detail-info`,componentName:`video-detail-info`,props:{}},{id:`detail-actions`,componentName:`video-detail-actions`,props:{}},{id:`detail-recommend`,componentName:`video-detail-recommend`,props:{rows:2}}];function C({detailId:p,initialInformation:C,isWebView:w=!1,materialConfig:T}){let E=ae(`components.pages.videoDetail`),D=oe(),O=se(),k=D.level,A=Array.isArray(k)?k:typeof k==`string`?[k]:[],j=A.findIndex(e=>e===`episode`),ce=j>=0?A[j+1]:A[2],M=Math.max(1,Number(ce)||1),[N,P]=f(`detail-current-series-num-${p}`,M);_(()=>{P(M)},[p,M,P]);let F=Math.max(0,N-1),{data:I}=l(v(()=>[`video-detail`,p],[p]),async()=>p?await a({id:p}):null,{enabled:!!p}),L=v(()=>{let e=I?.data?.video;return!e||typeof e!=`object`?null:{...e,content_type:1,episode_cnt:e.links?.length||0}},[I?.data?.video]),le=C??L??null,[R,z]=f(`detail-information-${p}`,le),B=R?.links?.[F]?.id||``,{data:V,isFetching:H,isFetchedAfterMount:U,isSuccess:W}=l(v(()=>[`detail-interaction`,R?.id,R?.content_type,B,N],[B,N,R?.content_type,R?.id]),async()=>!R?.id||typeof R.content_type!=`number`?null:await m([R.id],1),{enabled:w?!1:!!R?.id,staleTime:0,refetchOnMount:`always`,refetchOnWindowFocus:!1}),G=v(()=>{if(!U||H||!W)return 0;let e=V?.interaction_list?.[0]?.browse_record,t=Number(e?.browse_duration||0);if(!Number.isFinite(t)||t<=0)return 0;let n=String(e?.browse_episode||``).trim();if(!n)return t;let r=Number.parseInt(n,10);return Number.isNaN(r)?0:r===N?t:0},[N,V,U,H,W]),[ue,de]=f(`info-detail-active-tab-${p}`,`video`),[K,q]=f(`info-detail-comment-add-count-${p}`,0),[J,fe]=f(`info-detail-comment-total-${p}`,void 0),Y=g(async e=>{let t=String(p||``).trim();if(!t)return;let n=e.browse_episode||N,r=Date.now(),i=String(e.browse_key||r);try{await o({app_id:0,content_type:1,content_id:t,browse_duration:Number(e.browse_duration||0),browse_episode:String(n),browse_key:i,browse_page_ts:r})}catch(e){console.error(`上报播放进度失败:`,e)}},[N,p]);_(()=>{!R&&L&&z(L),window.video={[p]:R},window.getVideoInfoAsync=async()=>{let e=R?.links?.[F]?.m3u8_url||``,t=e?`${process.env.NEXT_PUBLIC_API_BASE}/api/content/processM3u8?url=${encodeURIComponent(`${n()}/m3f/${e}`)}`:``,i=R?.img_y||R?.img_x||R?.preview_images?.[0]||``,a=``,o=await r(i);return o&&(a=s(o.bytes)),{poster:a,src:t,title:R?.name||``}},window.getVideoBrowseRecordAsync=async()=>{let e=await m([p],1);return e?.interaction_list?.[0]?e.interaction_list[0].browse_record:null},window.reportVideoBrowse=Y},[p,F,R,L,z,Y]),_(()=>{if(!V?.interaction_list?.[0])return;let e=V.interaction_list[0];z(t=>{if(!t)return t;let n=t.static?.like_cnt,r=typeof n==`number`?n:Number(n||0),i=!!e.is_liked&&r===0;return{...t,like:e.is_liked||!1,dislike:e.is_disliked||!1,collect:e.is_collected||!1,static:i?{...t.static||{},like_cnt:1}:t.static}})},[V,z]);let X=g(e=>{z(t=>t&&{...t,...e})},[z]);d(()=>{R?.id&&R.id},[R?.id],`detail-page-report-${p}`),_(()=>{!R||typeof window>`u`||window.sensors?.track?.(`detail_page_view`,{object_id:R.id||p,author_id:R.up_user,object_type:R.content_type,object_category:R.content_type,object_tags:R.tags?.map(e=>e.name),block_id:``,page_source:window.location?.pathname||``})},[p,R]),_(()=>{q(0)},[B,q]),v(()=>(typeof J==`number`?J:0)+K,[K,J]);let pe=g(()=>{},[!1,de]);g(()=>{q(e=>e+1)},[q]),_(()=>{},[!1,pe,R?.id,O]);let Z=g(e=>{if(w){let t=encodeURIComponent(R?.name||``),n=`/webview/${R?.id}/${t}/episode/${e}`;window.location.href=n}else P(e)},[R?.id,R?.name,w,P]),Q=R?.status===`1`,{data:me}=l([u.CHANNEL],()=>i()),he=e(me?.data),ge=v(()=>{if(T!==void 0){let e=new Map(S.map(e=>[e.componentName,e]));return T.map(t=>{let n=e.get(t.componentName);return{...n,...t,props:{...n?.props??{},...t.props??{}}}})}return S},[T]),$=v(()=>({information:R??void 0,currentSeriesNum:N,onEpisodeChange:Z,onUpdateInformation:X,detailId:p,episodeIndex:F,resumeProgressSeconds:G,isShow:!0}),[N,p,F,Z,X,R,G,!0]),_e=g(e=>{if(!R)return null;let t=re[e.componentName];if(!t)return null;let n=t.clientComponent,r=ne(t,e.props);return r.isValid?b(n,{...r.props}):b(`div`,{children:`组件配置错误`})},[R]);return x(`div`,{className:`w-full min-h-screen bg-bg2 text-text1 ${w?``:`pt-11`}`,children:[!w&&b(`div`,{className:`fixed bg-black top-0 left-0 right-0 z-[1000]`,children:b(ee,{data:{list:he}})}),b(`div`,{className:`mx-auto w-full max-w-[840px] pb-6`,children:x(y,{children:[R&&!Q&&b(c,{type:`no-content`,text:E(`videoDetailClient.videoUnavailable`)}),R&&Q&&x(y,{children:[!w&&b(ie,{isVideo:!0,information:R,episodeIndex:F,resumeProgressSeconds:G}),b(`div`,{id:`selectPopupPosition`,className:`w-full`}),!1,x(`div`,{className:t(`w-full`,!1),children:[b(te,{value:$,children:ge.map(e=>b(h,{children:_e(e)},e.id))}),!1]}),!1]}),!R&&b(c,{type:`no-content`,text:E(`videoDetailClient.videoDeleted`)})]})})]})}export{C as default};
+'use client';
+
+import { getChannelList } from "../../biz/utils/helpers/get-channel-list.mjs";
+import { cn } from "../../../utils/cn.mjs";
+import getResUrl from "../../../utils/get-res-url.mjs";
+import { decryptImageToUint8Array } from "../../../utils/decrypt-image-client.mjs";
+import { gContentGetAppChannels, gContentGetVideoDetail, pInteractionBrowse } from "../../../service/generated/client.mjs";
+import { uint8ArrayToBase64 } from "../../../utils/uint8.mjs";
+import { EmptyState } from "../../ui/empty.mjs";
+import { useRequest } from "../../../hooks/query/use-query.mjs";
+import { queryKey } from "../../../constants/query-key.mjs";
+import { useKeepAliveEffect, useKeepAliveState } from "../../common/keep-scroll-position/index.mjs";
+import { apiCollectClick } from "../../../utils/api-collect.mjs";
+import { batchQueryContentInteractions } from "../../../hooks/use-content-operate.mjs";
+import detail_search_bar_default from "../../biz/business/search-bar/variants/detail-search-bar/index.mjs";
+import { VideoDetailMaterialRuntimeProvider } from "../../biz/business/detail/shared/runtime-context-provider.mjs";
+import { resolveMaterialProps, videoDetailMaterials } from "../../biz/business/detail/shared/registry.mjs";
+import { DetailHero } from "../../biz/business/detail/shared/video-hero.mjs";
+import { Fragment, useCallback, useEffect, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import { useParams, useSearchParams } from "next/navigation";
+
+//#region components/pages/video-detail/video-detail-client.tsx
+const DEFAULT_VIDEO_DETAIL_MATERIAL_CONFIG = [
+	{
+		id: "detail-info",
+		componentName: "video-detail-info",
+		props: {}
+	},
+	{
+		id: "detail-actions",
+		componentName: "video-detail-actions",
+		props: {}
+	},
+	{
+		id: "detail-recommend",
+		componentName: "video-detail-recommend",
+		props: { rows: 2 }
+	}
+];
+function VideoDetailClient({ detailId, initialInformation, isWebView = false, materialConfig }) {
+	const t = useTranslations("components.pages.videoDetail");
+	const params = useParams();
+	const searchParams = useSearchParams();
+	const level = params.level;
+	const normalizedLevel = Array.isArray(level) ? level : typeof level === "string" ? [level] : [];
+	const episodeTokenIndex = normalizedLevel.findIndex((item) => item === "episode");
+	const seriesNumText = episodeTokenIndex >= 0 ? normalizedLevel[episodeTokenIndex + 1] : normalizedLevel[2];
+	const routeSeriesNum = Math.max(1, Number(seriesNumText) || 1);
+	const [currentSeriesNum, setCurrentSeriesNum] = useKeepAliveState(`detail-current-series-num-${detailId}`, routeSeriesNum);
+	useEffect(() => {
+		setCurrentSeriesNum(routeSeriesNum);
+	}, [
+		detailId,
+		routeSeriesNum,
+		setCurrentSeriesNum
+	]);
+	const episodeIndex = Math.max(0, currentSeriesNum - 1);
+	const { data: videoDetailRes } = useRequest(useMemo(() => {
+		return ["video-detail", detailId];
+	}, [detailId]), async () => {
+		if (!detailId) return null;
+		return await gContentGetVideoDetail({ id: detailId });
+	}, { enabled: Boolean(detailId) });
+	const resolvedDetailInformation = useMemo(() => {
+		const detail = videoDetailRes?.data?.video;
+		if (!detail || typeof detail !== "object") return null;
+		return {
+			...detail,
+			content_type: 1,
+			episode_cnt: detail.links?.length || 0
+		};
+	}, [videoDetailRes?.data?.video]);
+	const resolvedInitialInformation = initialInformation ?? resolvedDetailInformation ?? null;
+	const [information, setInformation] = useKeepAliveState(`detail-information-${detailId}`, resolvedInitialInformation);
+	const currentEpisodeId = information?.links?.[episodeIndex]?.id || "";
+	const { data: interactionData, isFetching: isInteractionFetching, isFetchedAfterMount: isInteractionFetchedAfterMount, isSuccess: isInteractionSuccess } = useRequest(useMemo(() => {
+		return [
+			"detail-interaction",
+			information?.id,
+			information?.content_type,
+			currentEpisodeId,
+			currentSeriesNum
+		];
+	}, [
+		currentEpisodeId,
+		currentSeriesNum,
+		information?.content_type,
+		information?.id
+	]), async () => {
+		if (!information?.id || typeof information.content_type !== "number") return null;
+		return await batchQueryContentInteractions([information.id], 1);
+	}, {
+		enabled: isWebView ? false : Boolean(information?.id),
+		staleTime: 0,
+		refetchOnMount: "always",
+		refetchOnWindowFocus: false
+	});
+	const resumeProgressSeconds = useMemo(() => {
+		if (!isInteractionFetchedAfterMount || isInteractionFetching || !isInteractionSuccess) return 0;
+		const browseRecord = (interactionData?.interaction_list?.[0])?.browse_record;
+		const browseDuration = Number(browseRecord?.browse_duration || 0);
+		if (!Number.isFinite(browseDuration) || browseDuration <= 0) return 0;
+		const browseEpisodeText = String(browseRecord?.browse_episode || "").trim();
+		if (!browseEpisodeText) return browseDuration;
+		const browseEpisode = Number.parseInt(browseEpisodeText, 10);
+		if (Number.isNaN(browseEpisode)) return 0;
+		return browseEpisode === currentSeriesNum ? browseDuration : 0;
+	}, [
+		currentSeriesNum,
+		interactionData,
+		isInteractionFetchedAfterMount,
+		isInteractionFetching,
+		isInteractionSuccess
+	]);
+	const [activeTab, setActiveTab] = useKeepAliveState(`info-detail-active-tab-${detailId}`, "video");
+	const [commentAddCount, setCommentAddCount] = useKeepAliveState(`info-detail-comment-add-count-${detailId}`, 0);
+	const [commentTotal, setCommentTotal] = useKeepAliveState(`info-detail-comment-total-${detailId}`, void 0);
+	const handleReportVideoBrowse = useCallback(async (payload) => {
+		const resolvedContentId = String(detailId || "").trim();
+		if (!resolvedContentId) return;
+		const resolvedBrowseEpisode = payload.browse_episode || currentSeriesNum;
+		const browsePageTs = Date.now();
+		const browseKey = String(payload.browse_key || browsePageTs);
+		try {
+			await pInteractionBrowse({
+				app_id: 0,
+				content_type: 1,
+				content_id: resolvedContentId,
+				browse_duration: Number(payload.browse_duration || 0),
+				browse_episode: String(resolvedBrowseEpisode),
+				browse_key: browseKey,
+				browse_page_ts: browsePageTs
+			});
+		} catch (error) {
+			console.error("上报播放进度失败:", error);
+		}
+	}, [currentSeriesNum, detailId]);
+	useEffect(() => {
+		if (!information && resolvedDetailInformation) setInformation(resolvedDetailInformation);
+		window.video = { [detailId]: information };
+		window.getVideoInfoAsync = async () => {
+			const m3u8Url = information?.links?.[episodeIndex]?.m3u8_url || "";
+			const src = m3u8Url ? `${process.env.NEXT_PUBLIC_API_BASE}/api/content/processM3u8?url=${encodeURIComponent(`${getResUrl()}/m3f/${m3u8Url}`)}` : "";
+			const posterUrl = information?.img_y || information?.img_x || information?.preview_images?.[0] || "";
+			let posterBase64 = "";
+			const res = await decryptImageToUint8Array(posterUrl);
+			if (res) posterBase64 = uint8ArrayToBase64(res.bytes);
+			return {
+				poster: posterBase64,
+				src,
+				title: information?.name || ""
+			};
+		};
+		window.getVideoBrowseRecordAsync = async () => {
+			const res = await batchQueryContentInteractions([detailId], 1);
+			if (res?.interaction_list?.[0]) return res.interaction_list[0].browse_record;
+			else return null;
+		};
+		window.reportVideoBrowse = handleReportVideoBrowse;
+	}, [
+		detailId,
+		episodeIndex,
+		information,
+		resolvedDetailInformation,
+		setInformation,
+		handleReportVideoBrowse
+	]);
+	useEffect(() => {
+		if (!interactionData?.interaction_list?.[0]) return;
+		const interaction = interactionData.interaction_list[0];
+		setInformation((prev) => {
+			if (!prev) return prev;
+			const rawLikeCnt = prev.static?.like_cnt;
+			const resolvedLikeCnt = typeof rawLikeCnt === "number" ? rawLikeCnt : Number(rawLikeCnt || 0);
+			const shouldFixLikeCnt = Boolean(interaction.is_liked) && resolvedLikeCnt === 0;
+			return {
+				...prev,
+				like: interaction.is_liked || false,
+				dislike: interaction.is_disliked || false,
+				collect: interaction.is_collected || false,
+				static: shouldFixLikeCnt ? {
+					...prev.static || {},
+					like_cnt: 1
+				} : prev.static
+			};
+		});
+	}, [interactionData, setInformation]);
+	const handleUpdateInformation = useCallback((nextData) => {
+		setInformation((prev) => {
+			if (!prev) return prev;
+			return {
+				...prev,
+				...nextData
+			};
+		});
+	}, [setInformation]);
+	useKeepAliveEffect(() => {
+		if (!information?.id) return;
+		/* @__PURE__ */ apiCollectClick({ contentId: information.id });
+	}, [information?.id], `detail-page-report-${detailId}`);
+	useEffect(() => {
+		if (!information || typeof window === "undefined") return;
+		window.sensors?.track?.("detail_page_view", {
+			object_id: information.id || detailId,
+			author_id: information.up_user,
+			object_type: information.content_type,
+			object_category: information.content_type,
+			object_tags: information.tags?.map((item) => item.name),
+			block_id: "",
+			page_source: window.location?.pathname || ""
+		});
+	}, [detailId, information]);
+	useEffect(() => {
+		setCommentAddCount(0);
+	}, [currentEpisodeId, setCommentAddCount]);
+	useMemo(() => {
+		return (typeof commentTotal === "number" ? commentTotal : 0) + commentAddCount;
+	}, [commentAddCount, commentTotal]);
+	const enableDiscussion = false;
+	const showVideoTab = true;
+	const handleNavigateToDiscussion = useCallback(() => {}, [enableDiscussion, setActiveTab]);
+	useCallback(() => {
+		setCommentAddCount((prev) => prev + 1);
+	}, [setCommentAddCount]);
+	useEffect(() => {}, [
+		enableDiscussion,
+		handleNavigateToDiscussion,
+		information?.id,
+		searchParams
+	]);
+	const handleEpisodeChange = useCallback((nextSeriesNum) => {
+		if (isWebView) {
+			const encodedName = encodeURIComponent(information?.name || "");
+			const newPath = `/webview/${information?.id}/${encodedName}/episode/${nextSeriesNum}`;
+			window.location.href = newPath;
+		} else setCurrentSeriesNum(nextSeriesNum);
+	}, [
+		information?.id,
+		information?.name,
+		isWebView,
+		setCurrentSeriesNum
+	]);
+	const isValidStatus = information?.status === "1";
+	const { data: _channelDataRes } = useRequest([queryKey.CHANNEL], () => gContentGetAppChannels());
+	const channelDataList = getChannelList(_channelDataRes?.data);
+	const resolvedMaterialConfig = useMemo(() => {
+		if (materialConfig !== void 0) {
+			const defaultMap = new Map(DEFAULT_VIDEO_DETAIL_MATERIAL_CONFIG.map((item) => [item.componentName, item]));
+			return materialConfig.map((config) => {
+				const fallback = defaultMap.get(config.componentName);
+				return {
+					...fallback,
+					...config,
+					props: {
+						...fallback?.props ?? {},
+						...config.props ?? {}
+					}
+				};
+			});
+		}
+		return DEFAULT_VIDEO_DETAIL_MATERIAL_CONFIG;
+	}, [materialConfig]);
+	const runtimeContext = useMemo(() => {
+		return {
+			information: information ?? void 0,
+			currentSeriesNum,
+			onEpisodeChange: handleEpisodeChange,
+			onUpdateInformation: handleUpdateInformation,
+			detailId,
+			episodeIndex,
+			resumeProgressSeconds,
+			isShow: showVideoTab
+		};
+	}, [
+		currentSeriesNum,
+		detailId,
+		episodeIndex,
+		handleEpisodeChange,
+		handleUpdateInformation,
+		information,
+		resumeProgressSeconds,
+		showVideoTab
+	]);
+	const renderMaterial = useCallback((config) => {
+		if (!information) return null;
+		const material = videoDetailMaterials[config.componentName];
+		if (!material) return null;
+		const Component = material.clientComponent;
+		const resolvedProps = resolveMaterialProps(material, config.props);
+		if (!resolvedProps.isValid) return /* @__PURE__ */ jsx("div", { children: "组件配置错误" });
+		return /* @__PURE__ */ jsx(Component, { ...resolvedProps.props });
+	}, [information]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `w-full min-h-screen bg-bg2 text-text1 ${isWebView ? "" : "pt-11"}`,
+		children: [!isWebView && /* @__PURE__ */ jsx("div", {
+			className: "fixed bg-black top-0 left-0 right-0 z-[1000]",
+			children: /* @__PURE__ */ jsx(detail_search_bar_default, { data: { list: channelDataList } })
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mx-auto w-full max-w-[840px] pb-6",
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				information && !isValidStatus && /* @__PURE__ */ jsx(EmptyState, {
+					type: "no-content",
+					text: t("videoDetailClient.videoUnavailable")
+				}),
+				information && isValidStatus && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					!isWebView && /* @__PURE__ */ jsx(DetailHero, {
+						isVideo: true,
+						information,
+						episodeIndex,
+						resumeProgressSeconds
+					}),
+					/* @__PURE__ */ jsx("div", {
+						id: "selectPopupPosition",
+						className: "w-full"
+					}),
+					enableDiscussion,
+					/* @__PURE__ */ jsxs("div", {
+						className: cn("w-full", false),
+						children: [/* @__PURE__ */ jsx(VideoDetailMaterialRuntimeProvider, {
+							value: runtimeContext,
+							children: resolvedMaterialConfig.map((config) => /* @__PURE__ */ jsx(Fragment, { children: renderMaterial(config) }, config.id))
+						}), enableDiscussion]
+					}),
+					enableDiscussion
+				] }),
+				!information && /* @__PURE__ */ jsx(EmptyState, {
+					type: "no-content",
+					text: t("videoDetailClient.videoDeleted")
+				})
+			] })
+		})]
+	});
+}
+
+//#endregion
+export { VideoDetailClient as default };

package/dist/components/pages/video-list/index.mjs

@@ -1,2 +1,59 @@
 
-import{pContentGetNewstVideoList as e,pContentGetPopularVideoList as t}from"../../../service/generated/client.mjs";import{pContentGetNewstVideoListKey as n,pContentGetPopularVideoListKey as r}from"../../../service/generated/tanstack.mjs";import{HydrationBoundary as i}from"../../../hooks/query/hydration-boundary.mjs";import{getNextVideoListPageParam as a,resolveNextCursor as o}from"./types.mjs";import s from"./video-list-client.mjs";import{jsx as c}from"react/jsx-runtime";async function l({title:l=`列表页`,tags:u=[]}={}){let d={page_size:10,tags:u.length?u:void 0};return c(i,{prefetch:[{type:`infinite`,queryKey:r(d),queryFn:async e=>{let n=(await t({page_size:10,cursor:e||void 0,tags:u.length?u:void 0})).data;return{list:n?.videos??[],nextCursor:o(n)}},initialPageParam:``,getNextPageParam:e=>a(e)},{type:`infinite`,queryKey:n(d),queryFn:async t=>{let n=(await e({page_size:10,cursor:t||void 0,tags:u.length?u:void 0})).data;return{list:n?.videos??[],nextCursor:o(n)}},initialPageParam:``,getNextPageParam:e=>a(e)}],children:c(s,{title:l,tags:u})})}export{l as VideoListPage};
+import { pContentGetNewstVideoList, pContentGetPopularVideoList } from "../../../service/generated/client.mjs";
+import { pContentGetNewstVideoListKey, pContentGetPopularVideoListKey } from "../../../service/generated/tanstack.mjs";
+import { HydrationBoundary } from "../../../hooks/query/hydration-boundary.mjs";
+import { getNextVideoListPageParam, resolveNextCursor } from "./types.mjs";
+import VideoListClient from "./video-list-client.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region components/pages/video-list/index.tsx
+const PAGE_SIZE = 10;
+const INITIAL_CURSOR = "";
+async function VideoListPage({ title = "列表页", tags = [] } = {}) {
+	const baseQuery = {
+		page_size: PAGE_SIZE,
+		tags: tags.length ? tags : void 0
+	};
+	return /* @__PURE__ */ jsx(HydrationBoundary, {
+		prefetch: [{
+			type: "infinite",
+			queryKey: pContentGetPopularVideoListKey(baseQuery),
+			queryFn: async (cursor) => {
+				const d = (await pContentGetPopularVideoList({
+					page_size: PAGE_SIZE,
+					cursor: cursor || void 0,
+					tags: tags.length ? tags : void 0
+				})).data;
+				return {
+					list: d?.videos ?? [],
+					nextCursor: resolveNextCursor(d)
+				};
+			},
+			initialPageParam: INITIAL_CURSOR,
+			getNextPageParam: (last) => getNextVideoListPageParam(last)
+		}, {
+			type: "infinite",
+			queryKey: pContentGetNewstVideoListKey(baseQuery),
+			queryFn: async (cursor) => {
+				const d = (await pContentGetNewstVideoList({
+					page_size: PAGE_SIZE,
+					cursor: cursor || void 0,
+					tags: tags.length ? tags : void 0
+				})).data;
+				return {
+					list: d?.videos ?? [],
+					nextCursor: resolveNextCursor(d)
+				};
+			},
+			initialPageParam: INITIAL_CURSOR,
+			getNextPageParam: (last) => getNextVideoListPageParam(last)
+		}],
+		children: /* @__PURE__ */ jsx(VideoListClient, {
+			title,
+			tags
+		})
+	});
+}
+
+//#endregion
+export { VideoListPage };

package/dist/components/pages/video-list/types.mjs

@@ -1,2 +1,17 @@
 
-function e(e){return e?.cursor??e?.cusor??``}function t(e){return e.nextCursor===``?void 0:e.nextCursor}export{t as getNextVideoListPageParam,e as resolveNextCursor};
+//#region components/pages/video-list/types.ts
+/**
+* 兼容后端历史字段 `cusor` 与新字段 `cursor`，统一得到下一页游标。
+*/
+function resolveNextCursor(data) {
+	return data?.cursor ?? data?.cusor ?? "";
+}
+/**
+* 基于游标判断是否还有下一页。
+*/
+function getNextVideoListPageParam(last) {
+	return last.nextCursor === "" ? void 0 : last.nextCursor;
+}
+
+//#endregion
+export { getNextVideoListPageParam, resolveNextCursor };

package/dist/components/pages/video-list/video-list-client.mjs

@@ -1,2 +1,112 @@
 
-"use client";import{Button as e}from"../../ui/button.mjs";import{pContentGetNewstVideoList as t,pContentGetPopularVideoList as n}from"../../../service/generated/client.mjs";import{pContentGetNewstVideoListKey as r,pContentGetPopularVideoListKey as i}from"../../../service/generated/tanstack.mjs";import{Box as a}from"../../ui/box.mjs";import{InfiniteScroll as o}from"../../ui/infinite-scroll.mjs";import{Text as s}from"../../ui/text.mjs";import{usePaginated as c}from"../../../hooks/query/use-query.mjs";import l from"../../../assets/icons/left_arrow.mjs";import{getNextVideoListPageParam as u,resolveNextCursor as d}from"./types.mjs";import{VideoListItemComponent as f}from"./video-list-item.mjs";import{useMemo as p,useState as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";import _ from"next/link";import{useRouter as v}from"next/navigation";const y=[];function b({title:b=`列表页`,tags:x=y}){let S=v(),[C,w]=m(`hot`),T={page_size:10,tags:x.length?x:void 0},{data:E,fetchNextPage:D,hasNextPage:O}=c({key:C===`hot`?i(T):r(T),queryFn:async e=>{let r={page_size:10,cursor:e||void 0,tags:x.length?x:void 0},i=(C===`hot`?await n(r):await t(r)).data;return{list:i?.videos??[],nextCursor:d(i)}},getNextPageParam:u,initialPageParam:``}),k=p(()=>E?.pages?.flatMap(e=>e.list)??[],[E?.pages]);function A(){S.back()}let j=p(()=>k.map(e=>{let t=e.id??e.mid??``;return h(_,{href:`/video/${t}/${e.name??``}`,children:h(f,{item:e})},t)}),[k]);return g(a,{as:`main`,className:`h-[100dvh] max-h-[100dvh] flex flex-col bg-bg1 overflow-hidden [overscroll-behavior-y:none]`,children:[g(a,{className:`shrink-0 bg-bg1`,children:[g(a,{as:`header`,className:`flex items-center gap-2 px-4 py-3`,children:[h(l,{className:`w-[16px] h-[16px]`,onClick:A}),h(s,{as:`h1`,className:`flex-1 min-w-0 flex justify-center overflow-hidden text-[18px] pr-[16px]`,children:h(s,{className:`block max-w-full truncate`,children:b})})]}),g(a,{as:`nav`,className:`px-4 pb-2 flex gap-2`,children:[h(e,{type:`button`,onClick:()=>w(`hot`),className:`h-[30px] px-[12px] text-[14px] rounded-[50px] ${C===`hot`?`bg-theme5 text-text1`:`bg-transparent text-text2`}`,children:`最热`}),h(e,{type:`button`,onClick:()=>w(`latest`),className:`h-[30px] px-[12px] text-[14px] rounded-[50px] ${C===`latest`?`bg-theme5 text-text1`:`bg-transparent text-text2`}`,children:`最新`})]})]}),h(a,{id:`video-list-scroll-container`,className:`flex-1 min-h-0 overflow-y-auto [overscroll-behavior-y:none]`,children:h(o,{loadMore:()=>D().then(()=>void 0),hasMore:O,rootId:`video-list-scroll-container`,threshold:300,className:``,children:h(a,{className:`grid grid-cols-2 gap-3 p-4`,children:j})})})]})}export{b as default};
+'use client';
+
+import { Button } from "../../ui/button.mjs";
+import { pContentGetNewstVideoList, pContentGetPopularVideoList } from "../../../service/generated/client.mjs";
+import { pContentGetNewstVideoListKey, pContentGetPopularVideoListKey } from "../../../service/generated/tanstack.mjs";
+import { Box } from "../../ui/box.mjs";
+import { InfiniteScroll } from "../../ui/infinite-scroll.mjs";
+import { Text } from "../../ui/text.mjs";
+import { usePaginated } from "../../../hooks/query/use-query.mjs";
+import SvgLeftArrow from "../../../assets/icons/left_arrow.mjs";
+import { getNextVideoListPageParam, resolveNextCursor } from "./types.mjs";
+import { VideoListItemComponent } from "./video-list-item.mjs";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+//#region components/pages/video-list/video-list-client.tsx
+const PAGE_SIZE = 10;
+const DEFAULT_TITLE = "列表页";
+const DEFAULT_TAGS = [];
+const INITIAL_CURSOR = "";
+function VideoListClient({ title = DEFAULT_TITLE, tags = DEFAULT_TAGS }) {
+	const router = useRouter();
+	const [currentTab, setCurrentTab] = useState("hot");
+	const baseQuery = {
+		page_size: PAGE_SIZE,
+		tags: tags.length ? tags : void 0
+	};
+	const { data, fetchNextPage, hasNextPage } = usePaginated({
+		key: currentTab === "hot" ? pContentGetPopularVideoListKey(baseQuery) : pContentGetNewstVideoListKey(baseQuery),
+		queryFn: async (cursor) => {
+			const params = {
+				page_size: PAGE_SIZE,
+				cursor: cursor || void 0,
+				tags: tags.length ? tags : void 0
+			};
+			const d = (currentTab === "hot" ? await pContentGetPopularVideoList(params) : await pContentGetNewstVideoList(params)).data;
+			return {
+				list: d?.videos ?? [],
+				nextCursor: resolveNextCursor(d)
+			};
+		},
+		getNextPageParam: getNextVideoListPageParam,
+		initialPageParam: INITIAL_CURSOR
+	});
+	const allList = useMemo(() => data?.pages?.flatMap((p) => p.list) ?? [], [data?.pages]);
+	function handleBack() {
+		router.back();
+	}
+	const videoGrid = useMemo(() => allList.map((item) => {
+		const itemId = item.id ?? item.mid ?? "";
+		return /* @__PURE__ */ jsx(Link, {
+			href: `/video/${itemId}/${item.name ?? ""}`,
+			children: /* @__PURE__ */ jsx(VideoListItemComponent, { item })
+		}, itemId);
+	}), [allList]);
+	return /* @__PURE__ */ jsxs(Box, {
+		as: "main",
+		className: "h-[100dvh] max-h-[100dvh] flex flex-col bg-bg1 overflow-hidden [overscroll-behavior-y:none]",
+		children: [/* @__PURE__ */ jsxs(Box, {
+			className: "shrink-0 bg-bg1",
+			children: [/* @__PURE__ */ jsxs(Box, {
+				as: "header",
+				className: "flex items-center gap-2 px-4 py-3",
+				children: [/* @__PURE__ */ jsx(SvgLeftArrow, {
+					className: "w-[16px] h-[16px]",
+					onClick: handleBack
+				}), /* @__PURE__ */ jsx(Text, {
+					as: "h1",
+					className: "flex-1 min-w-0 flex justify-center overflow-hidden text-[18px] pr-[16px]",
+					children: /* @__PURE__ */ jsx(Text, {
+						className: "block max-w-full truncate",
+						children: title
+					})
+				})]
+			}), /* @__PURE__ */ jsxs(Box, {
+				as: "nav",
+				className: "px-4 pb-2 flex gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					onClick: () => setCurrentTab("hot"),
+					className: `h-[30px] px-[12px] text-[14px] rounded-[50px] ${currentTab === "hot" ? "bg-theme5 text-text1" : "bg-transparent text-text2"}`,
+					children: "最热"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					onClick: () => setCurrentTab("latest"),
+					className: `h-[30px] px-[12px] text-[14px] rounded-[50px] ${currentTab === "latest" ? "bg-theme5 text-text1" : "bg-transparent text-text2"}`,
+					children: "最新"
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(Box, {
+			id: "video-list-scroll-container",
+			className: "flex-1 min-h-0 overflow-y-auto [overscroll-behavior-y:none]",
+			children: /* @__PURE__ */ jsx(InfiniteScroll, {
+				loadMore: () => fetchNextPage().then(() => void 0),
+				hasMore: hasNextPage,
+				rootId: "video-list-scroll-container",
+				threshold: 300,
+				className: "",
+				children: /* @__PURE__ */ jsx(Box, {
+					className: "grid grid-cols-2 gap-3 p-4",
+					children: videoGrid
+				})
+			})
+		})]
+	});
+}
+
+//#endregion
+export { VideoListClient as default };

package/dist/components/pages/video-list/video-list-item.mjs

@@ -1,2 +1,36 @@
 
-"use client";import{Image as e}from"../../ui/image.mjs";import{Box as t}from"../../ui/box.mjs";import{Text as n}from"../../ui/text.mjs";import{memo as r}from"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=r(({item:r})=>{let o=r.img_x??r.img_y??``,s=r.name??r.id??``;return a(t,{className:`overflow-hidden rounded-[8px] shadow-sm`,children:[o?i(t,{className:`relative w-full aspect-video h-[240px]`,children:i(e,{src:o,alt:s,fill:!0,className:`object-cover`})}):null,i(t,{className:`py-[8px]`,children:i(n,{as:`h3`,className:`line-clamp-1 font-[16px] font-bold text-text1`,children:s})})]})});export{o as VideoListItemComponent};
+'use client';
+
+import { Image } from "../../ui/image.mjs";
+import { Box } from "../../ui/box.mjs";
+import { Text } from "../../ui/text.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region components/pages/video-list/video-list-item.tsx
+const VideoListItemComponent = memo(({ item }) => {
+	const cover = item.img_x ?? item.img_y ?? "";
+	const title = item.name ?? item.id ?? "";
+	return /* @__PURE__ */ jsxs(Box, {
+		className: "overflow-hidden rounded-[8px] shadow-sm",
+		children: [cover ? /* @__PURE__ */ jsx(Box, {
+			className: "relative w-full aspect-video h-[240px]",
+			children: /* @__PURE__ */ jsx(Image, {
+				src: cover,
+				alt: title,
+				fill: true,
+				className: "object-cover"
+			})
+		}) : null, /* @__PURE__ */ jsx(Box, {
+			className: "py-[8px]",
+			children: /* @__PURE__ */ jsx(Text, {
+				as: "h3",
+				className: "line-clamp-1 font-[16px] font-bold text-text1",
+				children: title
+			})
+		})]
+	});
+});
+
+//#endregion
+export { VideoListItemComponent };

package/dist/components/ui/accordion.mjs

@@ -1,2 +1,63 @@
 
-"use client";import{cn as e}from"../../utils/cn.mjs";import{Accordion as t}from"@base-ui/react/accordion";import{ChevronDownIcon as n,ChevronUpIcon as r}from"lucide-react";import{jsx as i,jsxs as a}from"react/jsx-runtime";function o({className:n,...r}){return i(t.Root,{"data-slot":`accordion`,className:e(`flex w-full flex-col`,n),...r})}function s({className:n,...r}){return i(t.Item,{"data-slot":`accordion-item`,className:e(`[&:not(:last-child)]:border-b`,n),...r})}function c({className:o,children:s,...c}){return i(t.Header,{className:`flex`,children:a(t.Trigger,{"data-slot":`accordion-trigger`,className:e(`focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring [&_*[data-slot=accordion-trigger-icon]]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] [&_*[data-slot=accordion-trigger-icon]]:ml-auto [&_*[data-slot=accordion-trigger-icon]]:w-4 [&_*[data-slot=accordion-trigger-icon]]:h-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50`,o),...c,children:[s,i(n,{"data-slot":`accordion-trigger-icon`,className:`pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden`}),i(r,{"data-slot":`accordion-trigger-icon`,className:`pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline`})]})})}function l({className:n,children:r,...a}){return i(t.Panel,{"data-slot":`accordion-content`,className:`data-[open]:animate-accordion-down data-[closed]:animate-accordion-up text-sm overflow-hidden`,...a,children:i(`div`,{className:e(`pt-0 pb-2.5 [&_a]:hover:text-foreground h-[var(--accordion-panel-height)] data-[ending-style]:h-0 data-[starting-style]:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4`,n),children:r})})}export{o as Accordion,l as AccordionContent,s as AccordionItem,c as AccordionTrigger};
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { Accordion } from "@base-ui/react/accordion";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region components/ui/accordion.tsx
+/** UI 组件模块。 */
+/** Accordion 组件。 */
+function Accordion$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Root, {
+		"data-slot": "accordion",
+		className: cn("flex w-full flex-col", className),
+		...props
+	});
+}
+/** AccordionItem 组件。 */
+function AccordionItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Item, {
+		"data-slot": "accordion-item",
+		className: cn("[&:not(:last-child)]:border-b", className),
+		...props
+	});
+}
+/** AccordionTrigger 组件。 */
+function AccordionTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		className: "flex",
+		children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: cn("focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring [&_*[data-slot=accordion-trigger-icon]]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] [&_*[data-slot=accordion-trigger-icon]]:ml-auto [&_*[data-slot=accordion-trigger-icon]]:w-4 [&_*[data-slot=accordion-trigger-icon]]:h-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50", className),
+			...props,
+			children: [
+				children,
+				/* @__PURE__ */ jsx(ChevronDownIcon, {
+					"data-slot": "accordion-trigger-icon",
+					className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+				}),
+				/* @__PURE__ */ jsx(ChevronUpIcon, {
+					"data-slot": "accordion-trigger-icon",
+					className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+				})
+			]
+		})
+	});
+}
+/** AccordionContent 组件。 */
+function AccordionContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Panel, {
+		"data-slot": "accordion-content",
+		className: "data-[open]:animate-accordion-down data-[closed]:animate-accordion-up text-sm overflow-hidden",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("pt-0 pb-2.5 [&_a]:hover:text-foreground h-[var(--accordion-panel-height)] data-[ending-style]:h-0 data-[starting-style]:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4", className),
+			children
+		})
+	});
+}
+
+//#endregion
+export { Accordion$1 as Accordion, AccordionContent, AccordionItem, AccordionTrigger };