@funhub/platform 0.1.53 → 0.1.54

package/dist/components/pages/search/search-result/search-video-info.mjs

@@ -1,2 +1,302 @@
 
-"use client";import{gContentGetRecommendVideoList as e}from"../../../../service/generated/client.mjs";import{Image as t}from"../../../ui/image.mjs";import{Box as n}from"../../../ui/box.mjs";import{EmptyState as r}from"../../../ui/empty.mjs";import{usePaginated as i,useRefetchQuery as a,useUpdateRequest as o}from"../../../../hooks/query/use-query.mjs";import{getPostDetailPagePath as s}from"../../../../utils/tools.mjs";import{apiCollectCustom as c}from"../../../../utils/api-collect.mjs";import{UserActivityList as l}from"../../../common/list/user-activity-list/user-activity-list.mjs";import{VideoListItemSkeleton as u}from"../../../common/skeleton/video-list-item-skeleton.mjs";import{useCardDecoration as d}from"../../../../hooks/use-card-decoration.mjs";import f from"../../../ui/rate.mjs";import{mapRecommendContentToUserActivityItem as p}from"../search-utils.mjs";import{memo as m,useCallback as h,useMemo as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{useTranslations as y}from"next-intl";import b from"next/link";const x=m(()=>_(n,{className:`w-full px-[12px] pt-[12px]`,children:Array.from({length:3}).map((e,t)=>_(u,{},`search-video-skeleton-${t}`))}));x.displayName=`SearchVideoListSkeleton`;const S=m(({item:e})=>{let{getCalculationScore:r}=d();return v(b,{className:`w-full flex items-center justify-between mb-[12px] pb-[12px] border-b border-line1 cursor-pointer px-[12px]`,href:s({id:e.video_id,contentType:0}),onClick:()=>{e.video_id},children:[_(n,{className:`w-[76px] h-[102px] shrink-0 rounded-[8px] overflow-hidden relative bg-bg2`,children:_(t,{src:e.img_y||e.img_x||``,fill:!0,objectFit:`cover`,alt:e.name||``})}),v(n,{className:`flex-1 min-w-0 flex flex-col ml-[12px]`,children:[_(`span`,{className:`leading-[26px] text-text1 text-[18px] font-bold max-w-[200px] line-clamp-1 mb-[4px]`,children:e.name||``}),v(n,{className:`flex items-center`,style:{transform:`scale(0.6)`,transformOrigin:`left center`},children:[_(f,{allowHalf:!0,value:r({score:String(e.score??0)})}),_(`span`,{className:`ml-[8px] text-[24px] text-[#F59E0B] font-bold leading-[24px]`,children:e.score?(Number(e.score)/10).toFixed(1):0})]}),v(n,{className:`w-full mt-[4px] flex items-center shrink-0 pr-[12px]`,children:[_(n,{className:`w-fit h-[20px] leading-[20px] px-[6px] text-text3 text-[12px] bg-line1 rounded-[4px] shrink-0 mr-[10px]`,children:e.group_name}),_(`span`,{className:`text-text2 text-[14px] leading-[22px] flex-1 min-w-0 line-clamp-1`,children:e.description})]})]})]})});S.displayName=`VideoItem`;const C=m(({list:e})=>_(n,{className:`w-full px-[12px] pt-[12px]`,children:e.map((e,t)=>_(S,{item:e},String(e.video_id??t)))}));C.displayName=`VideoList`;const w=m(({list:e,onUpdate:t,onActionSuccess:n})=>{let r=h(n=>{let r=e.findIndex(e=>e.content_id===n.content_id);if(r!==-1){let i=[...e];i[r]=n,t(i)}},[e,t]);return _(l,{list:g(()=>e.map(e=>({...p(e),onLikeSuccess(t){r({...e,like_count:String(t.count),dislike_count:t.dislikeCount===void 0?e.dislike_count:String(t.dislikeCount),interaction:{...e.interaction,is_liked:t.isLiked,is_dislike:t.isDisliked??e.interaction?.is_dislike}})},onDislikeSuccess(t){r({...e,like_count:t.likeCount===void 0?e.like_count:String(t.likeCount),dislike_count:String(t.count),interaction:{...e.interaction,is_dislike:t.isDisliked,is_liked:t.isLiked??e.interaction?.is_liked}})}})),[r,e]),showGroupHeaders:!1,onActionSuccess:n})});w.displayName=`InfoList`;const T=m(({searchType:t,inputVal:s})=>{let c=y(`components.pages.search.searchResult`),u=h(async n=>await e({data_type:2,extra_params:JSON.stringify({type:t===`video`?3:2,keywords:s}),page:n||1,page_size:20}),[s,20,t]),d=g(()=>[`searchByKeyForVideoInfo`,s,t===`video`?3:2],[s,t]),f=i({key:d,initialPageParam:1,async queryFn(e){let n=await u(e);return(t===`video`?n?.data?.videos:n?.data?.contents)??{has_more:!1,total:0,list:[]}},getNextPageParam(e,t){if(e.has_more)return t.length+1}}),m=g(()=>{let e=f.data?.pages??[],t=[];for(let n of e){let e=n.list??[];t.push(...e)}return t},[f.data?.pages]),v=g(()=>m,[m,t]),b=o(),S=a(),w=h(e=>{b(d,t=>{if(!t)return t;let n=t.pages.map(t=>({...t,list:(t.list??[]).map(t=>t.content_id===e.content_id?e:t)}));return{...t,pages:n}})},[d,b]),T=h(()=>{S(d)},[d,S]),E=h(e=>({...p(e),onLikeSuccess(t){w({...e,like_count:String(t.count),dislike_count:t.dislikeCount===void 0?e.dislike_count:String(t.dislikeCount),interaction:{...e.interaction,is_liked:t.isLiked,is_dislike:t.isDisliked??e.interaction?.is_dislike}})},onDislikeSuccess(t){w({...e,like_count:t.likeCount===void 0?e.like_count:String(t.likeCount),dislike_count:String(t.count),interaction:{...e.interaction,is_dislike:t.isDisliked,is_liked:t.isLiked??e.interaction?.is_liked}})}}),[w]),D=g(()=>v.map(E),[E,v]),O=f.isPending||f.isFetching,k=t===`video`&&O&&v.length===0;return _(n,{className:`w-full`,children:t===`video`?k?_(x,{}):v.length>0?_(C,{list:v}):_(r,{type:`no-content`,text:c(`searchVideoInfo.noRelevantContent`),className:`mt-[12px]`}):_(l,{list:D,loading:O,hasMore:f.hasNextPage??!1,loadMore:async e=>{if(e!==!1)try{f&&await f.fetchNextPage()}catch(e){console.error(`获取内容列表失败`,e)}},showGroupHeaders:!1,emptyText:c(`searchVideoInfo.noRelevantContent`),onActionSuccess:T})})});T.displayName=`SearchInfoOrVideoList`;export{C as VideoList,T as default};
+'use client';
+
+import { gContentGetRecommendVideoList } from "../../../../service/generated/client.mjs";
+import { Image } from "../../../ui/image.mjs";
+import { Box } from "../../../ui/box.mjs";
+import { EmptyState } from "../../../ui/empty.mjs";
+import { usePaginated, useRefetchQuery, useUpdateRequest } from "../../../../hooks/query/use-query.mjs";
+import { getPostDetailPagePath } from "../../../../utils/tools.mjs";
+import { apiCollectCustom } from "../../../../utils/api-collect.mjs";
+import { UserActivityList } from "../../../common/list/user-activity-list/user-activity-list.mjs";
+import { VideoListItemSkeleton } from "../../../common/skeleton/video-list-item-skeleton.mjs";
+import { useCardDecoration } from "../../../../hooks/use-card-decoration.mjs";
+import Rate from "../../../ui/rate.mjs";
+import { mapRecommendContentToUserActivityItem } from "../search-utils.mjs";
+import { memo, useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+
+//#region components/pages/search/search-result/search-video-info.tsx
+const DEFAULT_VIDEO_SKELETON_COUNT = 3;
+/**
+* 视频列表首屏骨架。
+*/
+const SearchVideoListSkeleton = memo(() => {
+	return /* @__PURE__ */ jsx(Box, {
+		className: "w-full px-[12px] pt-[12px]",
+		children: Array.from({ length: DEFAULT_VIDEO_SKELETON_COUNT }).map((_, index) => /* @__PURE__ */ jsx(VideoListItemSkeleton, {}, `search-video-skeleton-${index}`))
+	});
+});
+SearchVideoListSkeleton.displayName = "SearchVideoListSkeleton";
+/**
+* 视频项组件。
+*/
+const VideoItem = memo(({ item }) => {
+	const { getCalculationScore } = useCardDecoration();
+	return /* @__PURE__ */ jsxs(Link, {
+		className: "w-full flex items-center justify-between mb-[12px] pb-[12px] border-b border-line1 cursor-pointer px-[12px]",
+		href: getPostDetailPagePath({
+			id: item.video_id,
+			contentType: 0
+		}),
+		onClick: () => {
+			/* @__PURE__ */ apiCollectCustom({
+				contentId: item.video_id,
+				custom: "hot_search"
+			});
+		},
+		children: [/* @__PURE__ */ jsx(Box, {
+			className: "w-[76px] h-[102px] shrink-0 rounded-[8px] overflow-hidden relative bg-bg2",
+			children: /* @__PURE__ */ jsx(Image, {
+				src: item.img_y || item.img_x || "",
+				fill: true,
+				objectFit: "cover",
+				alt: item.name || ""
+			})
+		}), /* @__PURE__ */ jsxs(Box, {
+			className: "flex-1 min-w-0 flex flex-col ml-[12px]",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "leading-[26px] text-text1 text-[18px] font-bold max-w-[200px] line-clamp-1 mb-[4px]",
+					children: item.name || ""
+				}),
+				/* @__PURE__ */ jsxs(Box, {
+					className: "flex items-center",
+					style: {
+						transform: "scale(0.6)",
+						transformOrigin: "left center"
+					},
+					children: [/* @__PURE__ */ jsx(Rate, {
+						allowHalf: true,
+						value: getCalculationScore({ score: String(item.score ?? 0) })
+					}), /* @__PURE__ */ jsx("span", {
+						className: "ml-[8px] text-[24px] text-[#F59E0B] font-bold leading-[24px]",
+						children: item.score ? (Number(item.score) / 10).toFixed(1) : 0
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Box, {
+					className: "w-full mt-[4px] flex items-center shrink-0 pr-[12px]",
+					children: [/* @__PURE__ */ jsx(Box, {
+						className: "w-fit h-[20px] leading-[20px] px-[6px] text-text3 text-[12px] bg-line1 rounded-[4px] shrink-0 mr-[10px]",
+						children: item.group_name
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-text2 text-[14px] leading-[22px] flex-1 min-w-0 line-clamp-1",
+						children: item.description
+					})]
+				})
+			]
+		})]
+	});
+});
+VideoItem.displayName = "VideoItem";
+/**
+* 视频列表（保留用于其他地方使用）。
+*/
+const VideoList = memo(({ list }) => {
+	return /* @__PURE__ */ jsx(Box, {
+		className: "w-full px-[12px] pt-[12px]",
+		children: list.map((item, index) => /* @__PURE__ */ jsx(VideoItem, { item }, String(item.video_id ?? index)))
+	});
+});
+VideoList.displayName = "VideoList";
+/**
+* 帖子列表（保留用于其他地方使用）。
+*/
+const InfoList = memo(({ list, onUpdate, onActionSuccess }) => {
+	/**
+	* 同步更新列表内的指定项。
+	*/
+	const handleItemUpdate = useCallback((updateItem) => {
+		const index = list.findIndex((item) => item.content_id === updateItem.content_id);
+		if (index !== -1) {
+			const newList = [...list];
+			newList[index] = updateItem;
+			onUpdate(newList);
+		}
+	}, [list, onUpdate]);
+	return /* @__PURE__ */ jsx(UserActivityList, {
+		list: useMemo(() => {
+			return list.map((item) => {
+				return {
+					...mapRecommendContentToUserActivityItem(item),
+					onLikeSuccess(newState) {
+						handleItemUpdate({
+							...item,
+							like_count: String(newState.count),
+							dislike_count: newState.dislikeCount !== void 0 ? String(newState.dislikeCount) : item.dislike_count,
+							interaction: {
+								...item.interaction,
+								is_liked: newState.isLiked,
+								is_dislike: newState.isDisliked ?? item.interaction?.is_dislike
+							}
+						});
+					},
+					onDislikeSuccess(newState) {
+						handleItemUpdate({
+							...item,
+							like_count: newState.likeCount !== void 0 ? String(newState.likeCount) : item.like_count,
+							dislike_count: String(newState.count),
+							interaction: {
+								...item.interaction,
+								is_dislike: newState.isDisliked,
+								is_liked: newState.isLiked ?? item.interaction?.is_liked
+							}
+						});
+					}
+				};
+			});
+		}, [handleItemUpdate, list]),
+		showGroupHeaders: false,
+		onActionSuccess
+	});
+});
+InfoList.displayName = "InfoList";
+/**
+* 搜索帖子和视频列表。
+*/
+const SearchInfoOrVideoList = memo(({ searchType, inputVal }) => {
+	const t = useTranslations("components.pages.search.searchResult");
+	const pageSize = 20;
+	const fetchSearchData = useCallback(async (page) => {
+		return await gContentGetRecommendVideoList({
+			data_type: 2,
+			extra_params: JSON.stringify({
+				type: searchType === "video" ? 3 : 2,
+				keywords: inputVal
+			}),
+			page: page || 1,
+			page_size: pageSize
+		});
+	}, [
+		inputVal,
+		pageSize,
+		searchType
+	]);
+	const queryKey = useMemo(() => {
+		return [
+			"searchByKeyForVideoInfo",
+			inputVal,
+			searchType === "video" ? 3 : 2
+		];
+	}, [inputVal, searchType]);
+	const pageData = usePaginated({
+		key: queryKey,
+		initialPageParam: 1,
+		async queryFn(pageParam) {
+			const result = await fetchSearchData(pageParam);
+			return (searchType === "video" ? result?.data?.videos : result?.data?.contents) ?? {
+				has_more: false,
+				total: 0,
+				list: []
+			};
+		},
+		getNextPageParam(lastPage, allPages) {
+			if (!lastPage.has_more) return;
+			return allPages.length + 1;
+		}
+	});
+	const rawList = useMemo(() => {
+		const pages = pageData.data?.pages ?? [];
+		const results = [];
+		for (const page of pages) {
+			const list = page.list ?? [];
+			results.push(...list);
+		}
+		return results;
+	}, [pageData.data?.pages]);
+	const contentList = useMemo(() => {
+		if (searchType === "video") return rawList;
+		return rawList;
+	}, [rawList, searchType]);
+	const updateSearchCache = useUpdateRequest();
+	const refetchSearchData = useRefetchQuery();
+	/**
+	* 同步搜索列表内的帖子更新。
+	*/
+	const handleItemUpdate = useCallback((updateItem) => {
+		updateSearchCache(queryKey, (prev) => {
+			if (!prev) return prev;
+			const pages = prev.pages.map((page) => ({
+				...page,
+				list: (page.list ?? []).map((item) => item.content_id === updateItem.content_id ? updateItem : item)
+			}));
+			return {
+				...prev,
+				pages
+			};
+		});
+	}, [queryKey, updateSearchCache]);
+	/**
+	* 点赞/点踩成功后，重新拉取当前搜索结果列表，保证状态与服务端一致。
+	*/
+	const handleActionSuccess = useCallback(() => {
+		refetchSearchData(queryKey);
+	}, [queryKey, refetchSearchData]);
+	/**
+	* 构建用户动态列表项并注入交互回调。
+	*/
+	const buildActivityItem = useCallback((item) => {
+		return {
+			...mapRecommendContentToUserActivityItem(item),
+			onLikeSuccess(newState) {
+				handleItemUpdate({
+					...item,
+					like_count: String(newState.count),
+					dislike_count: newState.dislikeCount !== void 0 ? String(newState.dislikeCount) : item.dislike_count,
+					interaction: {
+						...item.interaction,
+						is_liked: newState.isLiked,
+						is_dislike: newState.isDisliked ?? item.interaction?.is_dislike
+					}
+				});
+			},
+			onDislikeSuccess(newState) {
+				handleItemUpdate({
+					...item,
+					like_count: newState.likeCount !== void 0 ? String(newState.likeCount) : item.like_count,
+					dislike_count: String(newState.count),
+					interaction: {
+						...item.interaction,
+						is_dislike: newState.isDisliked,
+						is_liked: newState.isLiked ?? item.interaction?.is_liked
+					}
+				});
+			}
+		};
+	}, [handleItemUpdate]);
+	const activityList = useMemo(() => {
+		return contentList.map(buildActivityItem);
+	}, [buildActivityItem, contentList]);
+	const isSearching = pageData.isPending || pageData.isFetching;
+	const shouldShowVideoSkeleton = searchType === "video" && isSearching && contentList.length === 0;
+	const loadMore = async (isRetry) => {
+		if (isRetry === false) return;
+		try {
+			if (pageData) await pageData.fetchNextPage();
+		} catch (error) {
+			console.error("获取内容列表失败", error);
+		}
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		className: "w-full",
+		children: searchType === "video" ? shouldShowVideoSkeleton ? /* @__PURE__ */ jsx(SearchVideoListSkeleton, {}) : contentList.length > 0 ? /* @__PURE__ */ jsx(VideoList, { list: contentList }) : /* @__PURE__ */ jsx(EmptyState, {
+			type: "no-content",
+			text: t("searchVideoInfo.noRelevantContent"),
+			className: "mt-[12px]"
+		}) : /* @__PURE__ */ jsx(UserActivityList, {
+			list: activityList,
+			loading: isSearching,
+			hasMore: pageData.hasNextPage ?? false,
+			loadMore,
+			showGroupHeaders: false,
+			emptyText: t("searchVideoInfo.noRelevantContent"),
+			onActionSuccess: handleActionSuccess
+		})
+	});
+});
+SearchInfoOrVideoList.displayName = "SearchInfoOrVideoList";
+
+//#endregion
+export { VideoList, SearchInfoOrVideoList as default };

package/dist/components/pages/search/search-utils.mjs

@@ -1,2 +1,49 @@
 
-function e(e){let t=e.author,n=(Array.isArray(e.medias)?e.medias:[]).map(t=>{let n=t?.media_url??``,r=!!t?.is_video,i=t?.cover_image||e.cover_image||(r?``:n);return{...t,media_url:n,is_video:r,cover_image:i}}).filter(e=>!!(e?.media_url||e?.cover_image)),r=(Array.isArray(e.images)?e.images:[]).map(e=>typeof e==`string`?e:e&&typeof e==`object`&&(e.url||e.image_url||e.media_url)||``).filter(e=>!!e).map(e=>({media_url:e,is_video:!1,cover_image:``})),i=n.length?n:r;return{type:Number(e.type??1),content_id:e.content_id??``,author:{avatar:t?.avatar_url??t?.avatar??``,nick_name:t?.nickname??t?.username??``,user_id:t?.user_id??e.user_id??``},create_time:Number(e.create_time??0),content:e.content??``,medias:i,like_count:Number(e.like_count??0),dislike_count:Number(e.dislike_count??0),comment_count:Number(e.comment_count??0),is_liked:e.interaction?.is_liked??!1,is_dislike:e.interaction?.is_dislike??!1}}export{e as mapRecommendContentToUserActivityItem};
+//#region components/pages/search/search-utils.ts
+/**
+* 将推荐帖子数据转换为 UserActivityListItemProps。
+*/
+function mapRecommendContentToUserActivityItem(item) {
+	const author = item.author;
+	const normalizedMedias = (Array.isArray(item.medias) ? item.medias : []).map((media) => {
+		const mediaUrl = media?.media_url ?? "";
+		const isVideo = Boolean(media?.is_video);
+		const coverImage = media?.cover_image || item.cover_image || (isVideo ? "" : mediaUrl);
+		return {
+			...media,
+			media_url: mediaUrl,
+			is_video: isVideo,
+			cover_image: coverImage
+		};
+	}).filter((media) => Boolean(media?.media_url || media?.cover_image));
+	const fallbackMedias = (Array.isArray(item.images) ? item.images : []).map((img) => {
+		if (typeof img === "string") return img;
+		if (img && typeof img === "object") return img.url || img.image_url || img.media_url || "";
+		return "";
+	}).filter((url) => Boolean(url)).map((url) => ({
+		media_url: url,
+		is_video: false,
+		cover_image: ""
+	}));
+	const resolvedMedias = normalizedMedias.length ? normalizedMedias : fallbackMedias;
+	return {
+		type: Number(item.type ?? 1),
+		content_id: item.content_id ?? "",
+		author: {
+			avatar: author?.avatar_url ?? author?.avatar ?? "",
+			nick_name: author?.nickname ?? author?.username ?? "",
+			user_id: author?.user_id ?? item.user_id ?? ""
+		},
+		create_time: Number(item.create_time ?? 0),
+		content: item.content ?? "",
+		medias: resolvedMedias,
+		like_count: Number(item.like_count ?? 0),
+		dislike_count: Number(item.dislike_count ?? 0),
+		comment_count: Number(item.comment_count ?? 0),
+		is_liked: item.interaction?.is_liked ?? false,
+		is_dislike: item.interaction?.is_dislike ?? false
+	};
+}
+
+//#endregion
+export { mapRecommendContentToUserActivityItem };

package/dist/components/pages/search/style.module.mjs

@@ -1,115 +1,15 @@
 
-import e from"../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.mjs";var t=`.style-module_searchInput__5zpUG {
-	position: relative;
-	z-index: 1;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	font-size: 3.255814vw;
-	color: var(--color-text1) !important;
-	font-weight: 400;
-	padding-left: 8.372093vw;
-	line-height: 4.651163vw;
-	padding-top: 1.395349vw;
-	padding-bottom: 1.395349vw;
-}
-.style-module_searchInput__5zpUG .adm-input-element {
-	font-size: 14px;
-	color: var(--color-text1) !important;
-	font-weight: normal;
-	padding-left: 36px;
-	line-height: 20px;
-	padding-top: 6px;
-	padding-bottom: 6px;
-}
-.style-module_searchInput__5zpUG .adm-input-element::placeholder {
-	color: var(--color-text3) !important;
-}
-.style-module_searchInput__5zpUG .adm-input-clear {
-	margin-right: 6px;
-}
-.style-module_customSearchHistory__sDuK0 {
-	display: flex;
-	flex-direction: column-reverse;
-	align-items: flex-end;
-	margin-bottom: 24px;
-	position: relative;
-}
-.style-module_customSearchHistory__sDuK0::before {
-	content: '搜索历史';
-	position: absolute;
-	line-height: 24px;
-	top: 8px;
-	left: 12px;
-	font-size: 16px;
-	font-weight: bold;
-	color: var(--color-text1);
-}
-.style-module_customSearchHistory__sDuK0 > div {
-	padding: 0 12px;
-	height: 24px;
-	display: flex;
-	align-items: center;
-	margin: 0 !important;
-}
-.style-module_customSearchHistory__sDuK0 > div > span {
-	display: none;
-}
-.style-module_customSearchHistory__sDuK0 > div > svg {
-	display: block;
-	width: 16px;
-	height: 16px;
-	color: var(--color-text3);
-}
-.style-module_customSearchHistory__sDuK0 > ul {
-	margin-top: 12px;
-	display: flex;
-	gap: 12px;
-	flex-wrap: wrap;
-	padding: 0 12px;
-}
+import styleInject from "../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.mjs";
 
-.style-module_customSearchHistory__sDuK0 > ul > li {
-	width: auto;
-	padding: 0 12px;
-	height: 30px;
-	border-radius: 4px;
-	background-color: var(--color-bg2);
-	min-width: 40px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-.style-module_customSearchHistory__sDuK0 > ul > li > svg {
-	display: none;
-}
-.style-module_customSearchHistory__sDuK0 > ul > li > div:nth-of-type(1) {
-	width: 100%;
-	line-height: 30px;
-	font-size: 14px;
-	max-width: 124px;
-	text-align: center;
-}
-.style-module_customSearchHistory__sDuK0 > ul > li > div:nth-of-type(2) {
-	display: none;
-}
-.style-module_hotInfoTitle__fVniI * {
-	color: var(--color-text1) !important;
-	font-size: 16px !important;
-	font-family: inherit !important;
-	font-weight: normal !important;
-}
-.style-module_hotInfoTitle__fVniI .mention {
-	color: #1fa7ff !important;
-}
-.style-module_gScrollBoxX__CRiTV {
-	overflow: hidden;
-	overflow-x: auto;
-	scroll-behavior: smooth;
-	will-change: scroll-position;
-	scrollbar-width: none;
-	-ms-overflow-style: none;
-}
-.style-module_gScrollBoxX__CRiTV::-webkit-scrollbar {
-	display: none; /* Chrome, Safari and Opera */
-}`,n={searchInput:`style-module_searchInput__5zpUG`,customSearchHistory:`style-module_customSearchHistory__sDuK0`,hotInfoTitle:`style-module_hotInfoTitle__fVniI`,gScrollBoxX:`style-module_gScrollBoxX__CRiTV`};e(t);export{n as default};
+//#region components/pages/search/style.module.css
+var css_248z = ".style-module_searchInput__5zpUG {\n	position: relative;\n	z-index: 1;\n	height: 100%;\n	display: flex;\n	align-items: center;\n	font-size: 3.255814vw;\n	color: var(--color-text1) !important;\n	font-weight: 400;\n	padding-left: 8.372093vw;\n	line-height: 4.651163vw;\n	padding-top: 1.395349vw;\n	padding-bottom: 1.395349vw;\n}\n.style-module_searchInput__5zpUG .adm-input-element {\n	font-size: 14px;\n	color: var(--color-text1) !important;\n	font-weight: normal;\n	padding-left: 36px;\n	line-height: 20px;\n	padding-top: 6px;\n	padding-bottom: 6px;\n}\n.style-module_searchInput__5zpUG .adm-input-element::placeholder {\n	color: var(--color-text3) !important;\n}\n.style-module_searchInput__5zpUG .adm-input-clear {\n	margin-right: 6px;\n}\n.style-module_customSearchHistory__sDuK0 {\n	display: flex;\n	flex-direction: column-reverse;\n	align-items: flex-end;\n	margin-bottom: 24px;\n	position: relative;\n}\n.style-module_customSearchHistory__sDuK0::before {\n	content: '搜索历史';\n	position: absolute;\n	line-height: 24px;\n	top: 8px;\n	left: 12px;\n	font-size: 16px;\n	font-weight: bold;\n	color: var(--color-text1);\n}\n.style-module_customSearchHistory__sDuK0 > div {\n	padding: 0 12px;\n	height: 24px;\n	display: flex;\n	align-items: center;\n	margin: 0 !important;\n}\n.style-module_customSearchHistory__sDuK0 > div > span {\n	display: none;\n}\n.style-module_customSearchHistory__sDuK0 > div > svg {\n	display: block;\n	width: 16px;\n	height: 16px;\n	color: var(--color-text3);\n}\n.style-module_customSearchHistory__sDuK0 > ul {\n	margin-top: 12px;\n	display: flex;\n	gap: 12px;\n	flex-wrap: wrap;\n	padding: 0 12px;\n}\n\n.style-module_customSearchHistory__sDuK0 > ul > li {\n	width: auto;\n	padding: 0 12px;\n	height: 30px;\n	border-radius: 4px;\n	background-color: var(--color-bg2);\n	min-width: 40px;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n}\n.style-module_customSearchHistory__sDuK0 > ul > li > svg {\n	display: none;\n}\n.style-module_customSearchHistory__sDuK0 > ul > li > div:nth-of-type(1) {\n	width: 100%;\n	line-height: 30px;\n	font-size: 14px;\n	max-width: 124px;\n	text-align: center;\n}\n.style-module_customSearchHistory__sDuK0 > ul > li > div:nth-of-type(2) {\n	display: none;\n}\n.style-module_hotInfoTitle__fVniI * {\n	color: var(--color-text1) !important;\n	font-size: 16px !important;\n	font-family: inherit !important;\n	font-weight: normal !important;\n}\n.style-module_hotInfoTitle__fVniI .mention {\n	color: #1fa7ff !important;\n}\n.style-module_gScrollBoxX__CRiTV {\n	overflow: hidden;\n	overflow-x: auto;\n	scroll-behavior: smooth;\n	will-change: scroll-position;\n	scrollbar-width: none;\n	-ms-overflow-style: none;\n}\n.style-module_gScrollBoxX__CRiTV::-webkit-scrollbar {\n	display: none; /* Chrome, Safari and Opera */\n}";
+var style_module_default = {
+	"searchInput": "style-module_searchInput__5zpUG",
+	"customSearchHistory": "style-module_customSearchHistory__sDuK0",
+	"hotInfoTitle": "style-module_hotInfoTitle__fVniI",
+	"gScrollBoxX": "style-module_gScrollBoxX__CRiTV"
+};
+styleInject(css_248z);
+
+//#endregion
+export { style_module_default as default };

package/dist/components/pages/search/top-header.mjs

@@ -1,2 +1,90 @@
 
-"use client";import{Input as e}from"../../ui/input.mjs";import{useKeepAliveEffect as t,useKeepAliveState as n}from"../../common/keep-scroll-position/index.mjs";import{isPCEnv as r}from"../../../utils/tools.mjs";import{HeaderNav as i}from"../../common/header-nav/client.mjs";import a from"../../../assets/icons/search.mjs";import o from"../../../assets/icons/clear.mjs";import s from"./style.module.mjs";import{memo as c,useCallback as l}from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{useTranslations as f}from"next-intl";import{useSearchParams as p}from"next/navigation";const m=c(({setSearchInputVal:c,initInputVal:m,initInputVersion:h,addSearchHistory:g})=>{let _=f(`components.pages.search`),[v,y]=n(`search-input-val`,``),b=p().get(`q`),x=e=>{let t=e.target.value;y(t)},S=l(e=>{c(e),g(e)},[g,c]);return t(()=>{m&&(y(m),S(m))},[m,h],`search-init-input-effect`),t(()=>{b&&(y(b),S(b))},[b],`search-url-params-effect`),u(i,{className:`h-[55px]`,rightChild:u(`div`,{className:`cursor-pointer w-[52px] flex items-center justify-center`,onClick:()=>{v&&S(v)},children:u(`span`,{className:`text-[16px] text-text1`,children:_(`topHeader.search`)})}),centerChild:d(`header`,{className:`w-[calc(100%-52px-48px)] ml-[-15px] h-[35px] rounded-[20px] flex items-center justify-center relative overflow-hidden border-line1 border-[1px]`,children:[u(`div`,{className:`absolute left-0 top-0 w-full h-full bg-bg2 opacity-50`}),u(a,{className:`w-[16px] h-[16px] text-text3 absolute left-[12px] top-[9px] z-[1]`}),u(e,{placeholder:_(`topHeader.placeholder`),maxLength:20,value:v,className:s.searchInput,onChange:x,onKeyDown:e=>{if(e.key===`Enter`){if(e.preventDefault(),!v)return;S(v)}}}),v&&u(o,{className:`w-[15px] h-[15px] text-text3 z-10 absolute right-[12px]`,onClick:()=>{r()||(y(``),c(``))}})]})})});export{m as default};
+'use client';
+
+import { Input } from "../../ui/input.mjs";
+import { useKeepAliveEffect, useKeepAliveState } from "../../common/keep-scroll-position/index.mjs";
+import { isPCEnv } from "../../../utils/tools.mjs";
+import { HeaderNav } from "../../common/header-nav/client.mjs";
+import SvgSearch from "../../../assets/icons/search.mjs";
+import SvgClear from "../../../assets/icons/clear.mjs";
+import style_module_default from "./style.module.mjs";
+import { memo, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import { useSearchParams } from "next/navigation";
+
+//#region components/pages/search/top-header.tsx
+/**
+* 搜索页顶部输入栏。
+*/
+const SearchTopHeader = memo(({ setSearchInputVal, initInputVal, initInputVersion, addSearchHistory }) => {
+	const t = useTranslations("components.pages.search");
+	const [inputVal, setInputVal] = useKeepAliveState("search-input-val", "");
+	const urlKeyword = useSearchParams().get("q");
+	const handleInputChange = (e) => {
+		const value = e.target.value;
+		setInputVal(value);
+	};
+	const handleSearchValue = useCallback((value) => {
+		setSearchInputVal(value);
+		addSearchHistory(value);
+	}, [addSearchHistory, setSearchInputVal]);
+	useKeepAliveEffect(() => {
+		if (initInputVal) {
+			setInputVal(initInputVal);
+			handleSearchValue(initInputVal);
+		}
+	}, [initInputVal, initInputVersion], "search-init-input-effect");
+	useKeepAliveEffect(() => {
+		if (urlKeyword) {
+			setInputVal(urlKeyword);
+			handleSearchValue(urlKeyword);
+		}
+	}, [urlKeyword], "search-url-params-effect");
+	return /* @__PURE__ */ jsx(HeaderNav, {
+		className: "h-[55px]",
+		rightChild: /* @__PURE__ */ jsx("div", {
+			className: "cursor-pointer w-[52px] flex items-center justify-center",
+			onClick: () => {
+				if (!inputVal) return;
+				handleSearchValue(inputVal);
+			},
+			children: /* @__PURE__ */ jsx("span", {
+				className: "text-[16px] text-text1",
+				children: t("topHeader.search")
+			})
+		}),
+		centerChild: /* @__PURE__ */ jsxs("header", {
+			className: "w-[calc(100%-52px-48px)] ml-[-15px] h-[35px] rounded-[20px] flex items-center justify-center relative overflow-hidden border-line1 border-[1px]",
+			children: [
+				/* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 w-full h-full bg-bg2 opacity-50" }),
+				/* @__PURE__ */ jsx(SvgSearch, { className: "w-[16px] h-[16px] text-text3 absolute left-[12px] top-[9px] z-[1]" }),
+				/* @__PURE__ */ jsx(Input, {
+					placeholder: t("topHeader.placeholder"),
+					maxLength: 20,
+					value: inputVal,
+					className: style_module_default.searchInput,
+					onChange: handleInputChange,
+					onKeyDown: (e) => {
+						if (e.key === "Enter") {
+							e.preventDefault();
+							if (!inputVal) return;
+							handleSearchValue(inputVal);
+						}
+					}
+				}),
+				inputVal && /* @__PURE__ */ jsx(SvgClear, {
+					className: "w-[15px] h-[15px] text-text3 z-10 absolute right-[12px]",
+					onClick: () => {
+						if (isPCEnv()) return;
+						setInputVal("");
+						setSearchInputVal("");
+					}
+				})
+			]
+		})
+	});
+});
+
+//#endregion
+export { SearchTopHeader as default };