@funhub/platform 0.2.30 → 0.2.31

package/dist/components/common/skeleton/post-list-item-skeleton.mjs

@@ -1,2 +1,100 @@
 
-"use client";import{Box as e}from"../../ui/box.mjs";import{useId as t}from"react";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{useTranslations as i}from"next-intl";import a from"react-content-loader";function o(o){let{isEditMode:s=!1,uniqueKey:c,className:l=``}=o,u=i(`components.common`),d=t(),f=c||d,p=s?24:0,m=p+142+9,h=Math.max(0,375-m),g=Math.min(h,200),_=Math.min(h,160),v=Math.min(h,96);return n(e,{className:`py-1.5 ${l}`.trim(),children:r(a,{uniqueKey:f,viewBox:`0 0 375 88`,className:`w-full h-22 text-text1`,backgroundColor:`currentColor`,foregroundColor:`currentColor`,backgroundOpacity:.08,foregroundOpacity:.18,preserveAspectRatio:`none`,title:u(`skeleton.loading`),children:[s?n(`rect`,{x:0,y:72/2,rx:4,ry:4,width:16,height:16}):null,n(`rect`,{x:p,y:4,rx:8,ry:8,width:142,height:80}),n(`rect`,{x:m,y:6,rx:4,ry:4,width:g,height:12}),n(`rect`,{x:m,y:24,rx:4,ry:4,width:_,height:12}),n(`rect`,{x:m,y:72,rx:4,ry:4,width:v,height:10})]})})}export{o as PostListItemSkeleton};
+'use client';
+
+import { Box } from "../../ui/box.mjs";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import ContentLoader from "react-content-loader";
+
+//#region components/common/skeleton/post-list-item-skeleton.tsx
+const BASE_WIDTH = 375;
+const BASE_HEIGHT = 88;
+/**
+* 帖子列表项骨架屏，基于 PostListItem 布局。
+*/
+function PostListItemSkeleton(props) {
+	const { isEditMode = false, uniqueKey, className = "" } = props;
+	const t = useTranslations("components.common");
+	const reactId = useId();
+	const contentKey = uniqueKey || reactId;
+	const checkboxSize = 16;
+	const checkboxGap = 8;
+	const imageWidth = 142;
+	const imageHeight = 80;
+	const imageRadius = 8;
+	const contentGap = 9;
+	const contentTop = 6;
+	const titleLineHeight = 12;
+	const titleLineGap = 6;
+	const timeLineHeight = 10;
+	const imageX = isEditMode ? checkboxSize + checkboxGap : 0;
+	const imageY = (BASE_HEIGHT - imageHeight) / 2;
+	const textX = imageX + imageWidth + contentGap;
+	const textMaxWidth = Math.max(0, BASE_WIDTH - textX);
+	const titleLine1Y = contentTop;
+	const titleLine2Y = contentTop + titleLineHeight + titleLineGap;
+	const timeLineY = 72;
+	const titleLine1Width = Math.min(textMaxWidth, 200);
+	const titleLine2Width = Math.min(textMaxWidth, 160);
+	const timeLineWidth = Math.min(textMaxWidth, 96);
+	return /* @__PURE__ */ jsx(Box, {
+		className: `py-1.5 ${className}`.trim(),
+		children: /* @__PURE__ */ jsxs(ContentLoader, {
+			uniqueKey: contentKey,
+			viewBox: `0 0 ${BASE_WIDTH} ${BASE_HEIGHT}`,
+			className: "w-full h-22 text-text1",
+			backgroundColor: "currentColor",
+			foregroundColor: "currentColor",
+			backgroundOpacity: .08,
+			foregroundOpacity: .18,
+			preserveAspectRatio: "none",
+			title: t("skeleton.loading"),
+			children: [
+				isEditMode ? /* @__PURE__ */ jsx("rect", {
+					x: 0,
+					y: (BASE_HEIGHT - checkboxSize) / 2,
+					rx: 4,
+					ry: 4,
+					width: checkboxSize,
+					height: checkboxSize
+				}) : null,
+				/* @__PURE__ */ jsx("rect", {
+					x: imageX,
+					y: imageY,
+					rx: imageRadius,
+					ry: imageRadius,
+					width: imageWidth,
+					height: imageHeight
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: textX,
+					y: titleLine1Y,
+					rx: 4,
+					ry: 4,
+					width: titleLine1Width,
+					height: titleLineHeight
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: textX,
+					y: titleLine2Y,
+					rx: 4,
+					ry: 4,
+					width: titleLine2Width,
+					height: titleLineHeight
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: textX,
+					y: timeLineY,
+					rx: 4,
+					ry: 4,
+					width: timeLineWidth,
+					height: timeLineHeight
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { PostListItemSkeleton };

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

@@ -1,2 +1,147 @@
 
-"use client";import{Box as e}from"../../ui/box.mjs";import{useId as t}from"react";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{useTranslations as i}from"next-intl";import a from"react-content-loader";function o(o){let{isEditMode:s=!1,uniqueKey:c,className:l=``}=o,u=i(`components.common`),d=t(),f=c||d,p=12+(s?24:0),m=p+40+8,h=Math.max(0,375-m-12),g=Math.min(h,160),_=Math.min(h,96);return n(e,{className:l,children:r(a,{uniqueKey:f,viewBox:`0 0 375 240`,className:`w-full h-60 text-text1`,backgroundColor:`currentColor`,foregroundColor:`currentColor`,backgroundOpacity:.08,foregroundOpacity:.18,preserveAspectRatio:`none`,title:u(`skeleton.loading`),children:[s?n(`rect`,{x:12,y:24,rx:4,ry:4,width:16,height:16}):null,n(`rect`,{x:p,y:12,rx:40/2,ry:40/2,width:40,height:40}),n(`rect`,{x:m,y:18,rx:4,ry:4,width:g,height:12}),n(`rect`,{x:m,y:36,rx:4,ry:4,width:_,height:10}),n(`rect`,{x:12,y:64,rx:4,ry:4,width:320,height:12}),n(`rect`,{x:12,y:82,rx:4,ry:4,width:280,height:12}),n(`rect`,{x:12,y:100,rx:4,ry:4,width:220,height:12}),n(`rect`,{x:12,y:124,rx:12,ry:12,width:351,height:84}),Array.from({length:4}).map((e,t)=>n(`rect`,{x:12+t*102.33333333333334,y:220,rx:4,ry:4,width:44,height:10},`action-${t}`))]})})}export{o as UserActivityListItemSkeleton};
+'use client';
+
+import { Box } from "../../ui/box.mjs";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import ContentLoader from "react-content-loader";
+
+//#region components/common/skeleton/user-activity-list-item-skeleton.tsx
+const BASE_WIDTH = 375;
+const BASE_HEIGHT = 240;
+/**
+* 用户动态列表项骨架屏，基于 UserActivityListItem 布局。
+*/
+function UserActivityListItemSkeleton(props) {
+	const { isEditMode = false, uniqueKey, className = "" } = props;
+	const t = useTranslations("components.common");
+	const reactId = useId();
+	const contentKey = uniqueKey || reactId;
+	const padding = 12;
+	const checkboxSize = 16;
+	const checkboxGap = 8;
+	const avatarSize = 40;
+	const headerTop = 12;
+	const headerGap = 8;
+	const textLineHeight = 12;
+	const textLineGap = 6;
+	const timeLineHeight = 10;
+	const contentLineHeight = 12;
+	const contentLineGap = 6;
+	const mediaHeight = 84;
+	const mediaRadius = 12;
+	const actionWidth = 44;
+	const actionHeight = 10;
+	const avatarX = padding + (isEditMode ? checkboxSize + checkboxGap : 0);
+	const avatarY = headerTop;
+	const textX = avatarX + avatarSize + headerGap;
+	const textMaxWidth = Math.max(0, BASE_WIDTH - textX - padding);
+	const nameLineWidth = Math.min(textMaxWidth, 160);
+	const timeLineWidth = Math.min(textMaxWidth, 96);
+	const contentX = padding;
+	const contentMaxWidth = BASE_WIDTH - padding * 2;
+	const actionGap = Math.max(0, (contentMaxWidth - actionWidth * 4) / 3);
+	const contentLine1Width = Math.min(contentMaxWidth, 320);
+	const contentLine2Width = Math.min(contentMaxWidth, 280);
+	const contentLine3Width = Math.min(contentMaxWidth, 220);
+	const nameLineY = headerTop + 6;
+	const timeLineY = nameLineY + textLineHeight + textLineGap;
+	const contentLine1Y = headerTop + avatarSize + 12;
+	const contentLine2Y = contentLine1Y + contentLineHeight + contentLineGap;
+	const contentLine3Y = contentLine2Y + contentLineHeight + contentLineGap;
+	const mediaY = contentLine3Y + contentLineHeight + 12;
+	const mediaWidth = BASE_WIDTH - padding * 2;
+	const actionsY = BASE_HEIGHT - 20;
+	return /* @__PURE__ */ jsx(Box, {
+		className,
+		children: /* @__PURE__ */ jsxs(ContentLoader, {
+			uniqueKey: contentKey,
+			viewBox: `0 0 ${BASE_WIDTH} ${BASE_HEIGHT}`,
+			className: "w-full h-60 text-text1",
+			backgroundColor: "currentColor",
+			foregroundColor: "currentColor",
+			backgroundOpacity: .08,
+			foregroundOpacity: .18,
+			preserveAspectRatio: "none",
+			title: t("skeleton.loading"),
+			children: [
+				isEditMode ? /* @__PURE__ */ jsx("rect", {
+					x: padding,
+					y: headerTop + (avatarSize - checkboxSize) / 2,
+					rx: 4,
+					ry: 4,
+					width: checkboxSize,
+					height: checkboxSize
+				}) : null,
+				/* @__PURE__ */ jsx("rect", {
+					x: avatarX,
+					y: avatarY,
+					rx: avatarSize / 2,
+					ry: avatarSize / 2,
+					width: avatarSize,
+					height: avatarSize
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: textX,
+					y: nameLineY,
+					rx: 4,
+					ry: 4,
+					width: nameLineWidth,
+					height: textLineHeight
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: textX,
+					y: timeLineY,
+					rx: 4,
+					ry: 4,
+					width: timeLineWidth,
+					height: timeLineHeight
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: contentX,
+					y: contentLine1Y,
+					rx: 4,
+					ry: 4,
+					width: contentLine1Width,
+					height: contentLineHeight
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: contentX,
+					y: contentLine2Y,
+					rx: 4,
+					ry: 4,
+					width: contentLine2Width,
+					height: contentLineHeight
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: contentX,
+					y: contentLine3Y,
+					rx: 4,
+					ry: 4,
+					width: contentLine3Width,
+					height: contentLineHeight
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: padding,
+					y: mediaY,
+					rx: mediaRadius,
+					ry: mediaRadius,
+					width: mediaWidth,
+					height: mediaHeight
+				}),
+				Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsx("rect", {
+					x: padding + index * (actionWidth + actionGap),
+					y: actionsY,
+					rx: 4,
+					ry: 4,
+					width: actionWidth,
+					height: actionHeight
+				}, `action-${index}`))
+			]
+		})
+	});
+}
+
+//#endregion
+export { UserActivityListItemSkeleton };

package/dist/components/common/skeleton/video-list-item-skeleton.mjs

@@ -1,2 +1,111 @@
 
-"use client";import{Box as e}from"../../ui/box.mjs";import{useId as t}from"react";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{useTranslations as i}from"next-intl";import a from"react-content-loader";function o(o){let{isEditMode:s=!1,showVideoProgress:c=!1,uniqueKey:l,className:u=``}=o,d=i(`components.common`),f=t(),p=l||f,m=s?24:0,h=m+142+9,g=Math.max(0,375-h),_=Math.min(g,200),v=Math.min(g,160),y=Math.min(g,140),b=Math.min(g,96);return n(e,{className:`py-1.5 ${u}`.trim(),children:r(a,{uniqueKey:p,viewBox:`0 0 375 88`,className:`w-full h-22 text-text1`,backgroundColor:`currentColor`,foregroundColor:`currentColor`,backgroundOpacity:.08,foregroundOpacity:.18,preserveAspectRatio:`none`,title:d(`skeleton.loading`),children:[s?n(`rect`,{x:0,y:72/2,rx:4,ry:4,width:16,height:16}):null,n(`rect`,{x:m,y:4,rx:8,ry:8,width:142,height:80}),n(`rect`,{x:h,y:6,rx:4,ry:4,width:_,height:12}),n(`rect`,{x:h,y:24,rx:4,ry:4,width:v,height:12}),c?n(`rect`,{x:h,y:49,rx:4,ry:4,width:y,height:10}):null,n(`rect`,{x:h,y:72,rx:4,ry:4,width:b,height:10})]})})}export{o as VideoListItemSkeleton};
+'use client';
+
+import { Box } from "../../ui/box.mjs";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import ContentLoader from "react-content-loader";
+
+//#region components/common/skeleton/video-list-item-skeleton.tsx
+const BASE_WIDTH = 375;
+const BASE_HEIGHT = 88;
+/**
+* 视频列表项骨架屏，基于 VideoListItem 布局。
+*/
+function VideoListItemSkeleton(props) {
+	const { isEditMode = false, showVideoProgress = false, uniqueKey, className = "" } = props;
+	const t = useTranslations("components.common");
+	const reactId = useId();
+	const contentKey = uniqueKey || reactId;
+	const checkboxSize = 16;
+	const checkboxGap = 8;
+	const imageWidth = 142;
+	const imageHeight = 80;
+	const imageRadius = 8;
+	const contentGap = 9;
+	const contentTop = 6;
+	const titleLineHeight = 12;
+	const titleLineGap = 6;
+	const progressLineHeight = 10;
+	const timeLineHeight = 10;
+	const imageX = isEditMode ? checkboxSize + checkboxGap : 0;
+	const imageY = (BASE_HEIGHT - imageHeight) / 2;
+	const textX = imageX + imageWidth + contentGap;
+	const textMaxWidth = Math.max(0, BASE_WIDTH - textX);
+	const titleLine1Y = contentTop;
+	const titleLine2Y = contentTop + titleLineHeight + titleLineGap;
+	const progressLineY = 49;
+	const timeLineY = 72;
+	const titleLine1Width = Math.min(textMaxWidth, 200);
+	const titleLine2Width = Math.min(textMaxWidth, 160);
+	const progressLineWidth = Math.min(textMaxWidth, 140);
+	const timeLineWidth = Math.min(textMaxWidth, 96);
+	return /* @__PURE__ */ jsx(Box, {
+		className: `py-1.5 ${className}`.trim(),
+		children: /* @__PURE__ */ jsxs(ContentLoader, {
+			uniqueKey: contentKey,
+			viewBox: `0 0 ${BASE_WIDTH} ${BASE_HEIGHT}`,
+			className: "w-full h-22 text-text1",
+			backgroundColor: "currentColor",
+			foregroundColor: "currentColor",
+			backgroundOpacity: .08,
+			foregroundOpacity: .18,
+			preserveAspectRatio: "none",
+			title: t("skeleton.loading"),
+			children: [
+				isEditMode ? /* @__PURE__ */ jsx("rect", {
+					x: 0,
+					y: (BASE_HEIGHT - checkboxSize) / 2,
+					rx: 4,
+					ry: 4,
+					width: checkboxSize,
+					height: checkboxSize
+				}) : null,
+				/* @__PURE__ */ jsx("rect", {
+					x: imageX,
+					y: imageY,
+					rx: imageRadius,
+					ry: imageRadius,
+					width: imageWidth,
+					height: imageHeight
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: textX,
+					y: titleLine1Y,
+					rx: 4,
+					ry: 4,
+					width: titleLine1Width,
+					height: titleLineHeight
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: textX,
+					y: titleLine2Y,
+					rx: 4,
+					ry: 4,
+					width: titleLine2Width,
+					height: titleLineHeight
+				}),
+				showVideoProgress ? /* @__PURE__ */ jsx("rect", {
+					x: textX,
+					y: progressLineY,
+					rx: 4,
+					ry: 4,
+					width: progressLineWidth,
+					height: progressLineHeight
+				}) : null,
+				/* @__PURE__ */ jsx("rect", {
+					x: textX,
+					y: timeLineY,
+					rx: 4,
+					ry: 4,
+					width: timeLineWidth,
+					height: timeLineHeight
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { VideoListItemSkeleton };

package/dist/components/common/tab-bar/index.mjs

@@ -1,2 +1,151 @@
 
-"use client";import{Box as e}from"../../ui/box.mjs";import{Text as t}from"../../ui/text.mjs";import n from"../../ui/link.mjs";import r from"../../../assets/icons/tabs/follow.mjs";import i from"../../../assets/icons/tabs/follow_active.mjs";import a from"../../../assets/icons/tabs/home.mjs";import o from"../../../assets/icons/tabs/home_active.mjs";import s from"../../../assets/icons/tabs/mine.mjs";import c from"../../../assets/icons/tabs/mine_active.mjs";import l from"../../ui/legacy/badge.mjs";import{useEffect as u,useState as d,useTransition as f}from"react";import{usePathname as p}from"next/navigation";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{useTranslations as g}from"next-intl";function _(e,t){if(t!==`/`)return e.startsWith(t);let n=[`/user`].some(t=>e.startsWith(t)),r=e.startsWith(`/category/`);return!n&&(e===`/`||r)}const v=[`/nav-page`];function y(y){let{className:b}=y,x=p(),S=g(`tabBar`),[C,w]=d(null),[,T]=f(),[E]=d(0),[D,O]=d(!1),k=[{badge:!1,id:1,labelKey:`home`,path:`/`,icon:a,activeIcon:o,width:20,height:20},{badge:!1,id:2,labelKey:`follow`,path:`/user/follow`,icon:r,activeIcon:i,width:20,height:20},{badge:!1,id:5,labelKey:`mine`,path:`/user/mine`,icon:s,activeIcon:c,width:20,height:20}],A=(e,t,n)=>{t!==x&&w(t)};return u(()=>{C&&_(x,C)&&T(()=>{w(null)})},[x,C]),u(()=>{let e=setTimeout(()=>{O(!0)},0);return()=>clearTimeout(e)},[]),x&&v.some(e=>x.includes(e))?null:m(e,{className:`fixed bottom-0 left-0 right-0 z-50 flex flex-col items-center ${b||``}`,style:{background:`rgba(5, 1, 15, 0.90)`,backdropFilter:`blur(4px)`,WebkitBackdropFilter:`blur(4px)`,paddingBottom:`env(safe-area-inset-bottom, 0px)`},children:m(e,{className:`my-[4px] flex h-[56px] w-[358px] items-center justify-between px-[40px]`,style:{background:`rgba(1, 0, 2, 0.80)`,borderRadius:`100px`,backdropFilter:`blur(8px)`,WebkitBackdropFilter:`blur(8px)`,boxShadow:`0 12px 100px rgba(255, 255, 255, 0.20)`},children:k.map(r=>{let i=D&&x?_(C||x||``,r.path):!1,a=i?r.activeIcon:r.icon,o=h(e,{className:`flex flex-col items-center ${i?`gap-[5px]`:`gap-[4px]`}`,children:[r.badge&&E>0?m(l,{dot:!0,children:m(a,{width:20,height:20})}):m(a,{width:20,height:20}),m(t,{className:`whitespace-nowrap text-center text-[12px] leading-[16px] ${i?`text-[#C043E8]`:`text-[#BFBFBF]`}`,children:S(r.labelKey)})]});return i?m(e,{className:`flex items-center justify-center`,children:o},r.id):m(n,{href:r.path,prefetch:!0,className:`flex items-center justify-center`,onClick:e=>{A(e,r.path,r.labelKey)},children:o},r.id)})})})}export{y as TabBar};
+'use client';
+
+import { Box } from "../../ui/box.mjs";
+import { Text } from "../../ui/text.mjs";
+import Link from "../../ui/link.mjs";
+import SvgFollow from "../../../assets/icons/tabs/follow.mjs";
+import SvgFollowActive from "../../../assets/icons/tabs/follow_active.mjs";
+import SvgHome from "../../../assets/icons/tabs/home.mjs";
+import SvgHomeActive from "../../../assets/icons/tabs/home_active.mjs";
+import SvgMine from "../../../assets/icons/tabs/mine.mjs";
+import SvgMineActive from "../../../assets/icons/tabs/mine_active.mjs";
+import Badge from "../../ui/legacy/badge.mjs";
+import { usePathname } from "next/navigation";
+import { useEffect, useState, useTransition } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/common/tab-bar/index.tsx
+function isTabActive(pathname, tabPath) {
+	if (tabPath !== "/") return pathname.startsWith(tabPath);
+	const isOtherTab = ["/user"].some((path) => pathname.startsWith(path));
+	const isCategoryPath = pathname.startsWith("/category/");
+	return !isOtherTab && (pathname === "/" || isCategoryPath);
+}
+const HIDDEN_TABBAR_PATHS = ["/nav-page"];
+/**
+* 底部 TabBar。
+*/
+function TabBar(props) {
+	const { className } = props;
+	const pathname = usePathname();
+	const t = useTranslations("tabBar");
+	const [pendingPath, setPendingPath] = useState(null);
+	const [, startTransition] = useTransition();
+	const [unreadCount] = useState(0);
+	const [isMounted, setIsMounted] = useState(false);
+	const tabs = [
+		{
+			badge: false,
+			id: 1,
+			labelKey: "home",
+			path: "/",
+			icon: SvgHome,
+			activeIcon: SvgHomeActive,
+			width: 20,
+			height: 20
+		},
+		{
+			badge: false,
+			id: 2,
+			labelKey: "follow",
+			path: "/user/follow",
+			icon: SvgFollow,
+			activeIcon: SvgFollowActive,
+			width: 20,
+			height: 20
+		},
+		{
+			badge: false,
+			id: 5,
+			labelKey: "mine",
+			path: "/user/mine",
+			icon: SvgMine,
+			activeIcon: SvgMineActive,
+			width: 20,
+			height: 20
+		}
+	];
+	const handleTabClick = (e, tabPath, _labelKey) => {
+		if (tabPath !== pathname) setPendingPath(tabPath);
+	};
+	useEffect(() => {
+		if (pendingPath && isTabActive(pathname, pendingPath)) startTransition(() => {
+			setPendingPath(null);
+		});
+	}, [pathname, pendingPath]);
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setIsMounted(true);
+		}, 0);
+		return () => clearTimeout(timer);
+	}, []);
+	if (pathname ? HIDDEN_TABBAR_PATHS.some((path) => pathname.includes(path)) : false) return null;
+	return /* @__PURE__ */ jsx(Box, {
+		className: `fixed bottom-0 left-0 right-0 z-50 flex flex-col items-center ${className || ""}`,
+		style: {
+			background: "rgba(5, 1, 15, 0.1)",
+			backdropFilter: "blur(8px)",
+			WebkitBackdropFilter: "blur(8px)"
+		},
+		children: /* @__PURE__ */ jsxs(Box, {
+			className: "relative my-[4px] flex h-[56px] w-[358px] items-center justify-between rounded-[100px] px-[40px]",
+			children: [
+				/* @__PURE__ */ jsx(Box, {
+					className: "pointer-events-none absolute inset-0 rounded-[100px]",
+					style: { background: "linear-gradient(0deg, rgba(6, 3, 21, 0.03) 0%, rgba(6, 3, 21, 0.03) 100%), rgba(255, 255, 255, 0.10)" },
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					className: "pointer-events-none absolute inset-0 rounded-[100px]",
+					style: {
+						background: "linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%)",
+						padding: "1px",
+						WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+						WebkitMaskComposite: "xor",
+						mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+						maskComposite: "exclude"
+					},
+					"aria-hidden": "true"
+				}),
+				tabs.map((tab) => {
+					const isActive = isMounted && pathname ? isTabActive(pendingPath || pathname || "", tab.path) : false;
+					const CurrentIcon = isActive ? tab.activeIcon : tab.icon;
+					const tabContent = /* @__PURE__ */ jsxs(Box, {
+						className: `flex flex-col items-center ${isActive ? "gap-[5px]" : "gap-[4px]"}`,
+						children: [tab.badge && unreadCount > 0 ? /* @__PURE__ */ jsx(Badge, {
+							dot: true,
+							children: /* @__PURE__ */ jsx(CurrentIcon, {
+								width: 20,
+								height: 20
+							})
+						}) : /* @__PURE__ */ jsx(CurrentIcon, {
+							width: 20,
+							height: 20
+						}), /* @__PURE__ */ jsx(Text, {
+							className: `whitespace-nowrap text-center text-[12px] leading-[16px] ${isActive ? "text-[#C043E8]" : "text-white/50"}`,
+							children: t(tab.labelKey)
+						})]
+					});
+					if (isActive) return /* @__PURE__ */ jsx(Box, {
+						className: "flex items-center justify-center",
+						children: tabContent
+					}, tab.id);
+					return /* @__PURE__ */ jsx(Link, {
+						href: tab.path,
+						prefetch: true,
+						className: "flex items-center justify-center",
+						onClick: (e) => {
+							handleTabClick(e, tab.path, tab.labelKey);
+						},
+						children: tabContent
+					}, tab.id);
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { TabBar };

package/dist/components/common/theme-sync/index.mjs

@@ -1,2 +1,23 @@
 
-"use client";import{useEffect as e}from"react";function t(e){if(typeof document>`u`)return;let t=document.cookie.match(RegExp(`(?:^|;\\s*)${e}=([^;]*)`));return t?decodeURIComponent(t[1]):void 0}function n({defaultTheme:n}){return e(()=>{let e=t(`theme`)||n;e&&(document.documentElement.className=e,document.documentElement.dataset.prefersColorScheme=e)},[n]),null}export{n as ThemeSync};
+'use client';
+
+import { useEffect } from "react";
+
+//#region components/common/theme-sync/index.tsx
+function readCookie(name) {
+	if (typeof document === "undefined") return void 0;
+	const match = document.cookie.match(new RegExp(`(?:^|;\\s*)${name}=([^;]*)`));
+	return match ? decodeURIComponent(match[1]) : void 0;
+}
+function ThemeSync({ defaultTheme }) {
+	useEffect(() => {
+		const theme = readCookie("theme") || defaultTheme;
+		if (!theme) return;
+		document.documentElement.className = theme;
+		document.documentElement.dataset.prefersColorScheme = theme;
+	}, [defaultTheme]);
+	return null;
+}
+
+//#endregion
+export { ThemeSync };

package/dist/components/common/top-nav-bar/client.mjs

@@ -1,2 +1,71 @@
 
-"use client";import{getChannelList as e}from"../../biz/utils/helpers/get-channel-list.mjs";import{gContentGetAppChannelBlock as t,gContentGetAppChannels as n}from"../../../service/generated/client.mjs";import{trackAppPageView as r}from"../../../utils/tracking.mjs";import{Box as i}from"../../ui/box.mjs";import{useRequest as a}from"../../../hooks/query/use-query.mjs";import{queryKey as o}from"../../../constants/query-key.mjs";import{matchChannelByPath as s}from"../../pages/home/channel-matcher.mjs";import{TopNavBarFullscreen as c}from"./fullscreen.mjs";import{TopNavBarNormal as l}from"./normal.mjs";import{useEffect as u,useMemo as d}from"react";import{usePathname as f}from"next/navigation";import{jsx as p}from"react/jsx-runtime";function m(e){return e===`/`?[]:e.startsWith(`/category/`)?e.replace(`/category/`,``).split(`/`).map(e=>decodeURIComponent(e)):[]}function h({categoryPath:h,currentChannelId:g}){let _=f()||`/`,{data:v}=a([o.CHANNEL],()=>n()),y=d(()=>e(v?.data),[v?.data]),b=d(()=>typeof window>`u`?h||[]:m(_),[h,_]),x=d(()=>y.length===0?null:s(b,y),[b,y])?.id??g??``;u(()=>{r({page_key:`page_home_top_nav`,page_name:`首页顶部导航栏`})},[]);let{data:S}=a(o.GET_CONTENT_LIST(x),()=>t({channel_id:x}),{enabled:!!x}),C=d(()=>S?.data?.blocks||[],[S?.data?.blocks]),w=d(()=>C.length>0&&C[0].show_style===6,[C]);return p(i,{className:`w-full`,"data-top-nav-root":`true`,children:p(w?c:l,{channelDataList:y,currentChannelId:x})})}export{h as TopNavBar};
+'use client';
+
+import { getChannelList } from "../../biz/utils/helpers/get-channel-list.mjs";
+import { gContentGetAppChannelBlock, gContentGetAppChannels } from "../../../service/generated/client.mjs";
+import { trackAppPageView } from "../../../utils/tracking.mjs";
+import { Box } from "../../ui/box.mjs";
+import { useRequest } from "../../../hooks/query/use-query.mjs";
+import { queryKey } from "../../../constants/query-key.mjs";
+import { matchChannelByPath } from "../../pages/home/channel-matcher.mjs";
+import { TopNavBarFullscreen } from "./fullscreen.mjs";
+import { TopNavBarNormal } from "./normal.mjs";
+import { usePathname } from "next/navigation";
+import { useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region components/common/top-nav-bar/client.tsx
+/**
+* 顶部导航栏客户端组件
+*/
+/**
+* 从路径解析频道路径数组
+* @param pathname - 当前路径，如 '/' 或 '/category/推荐'
+* @returns 频道路径数组，如 [] 或 ['推荐', '视频']
+*/
+function parseCategoryPathFromPathname(pathname) {
+	if (pathname === "/") return [];
+	if (pathname.startsWith("/category/")) return pathname.replace("/category/", "").split("/").map((s) => decodeURIComponent(s));
+	return [];
+}
+/**
+* 顶部导航栏客户端组件
+*/
+function TopNavBar({ categoryPath, currentChannelId: controlledChannelId }) {
+	const pathname = usePathname() || "/";
+	const { data: channelDataRes } = useRequest([queryKey.CHANNEL], () => gContentGetAppChannels());
+	const channelDataList = useMemo(() => getChannelList(channelDataRes?.data), [channelDataRes?.data]);
+	const currentCategoryPath = useMemo(() => {
+		if (typeof window === "undefined") return categoryPath || [];
+		return parseCategoryPathFromPathname(pathname);
+	}, [categoryPath, pathname]);
+	const currentChannelId = useMemo(() => {
+		if (channelDataList.length === 0) return null;
+		return matchChannelByPath(currentCategoryPath, channelDataList);
+	}, [currentCategoryPath, channelDataList])?.id ?? controlledChannelId ?? "";
+	useEffect(() => {
+		trackAppPageView({
+			page_key: "page_home_top_nav",
+			page_name: "首页顶部导航栏"
+		});
+	}, []);
+	const { data: contentListData } = useRequest(queryKey.GET_CONTENT_LIST(currentChannelId), () => gContentGetAppChannelBlock({ channel_id: currentChannelId }), { enabled: !!currentChannelId });
+	const contentBlockList = useMemo(() => contentListData?.data?.blocks || [], [contentListData?.data?.blocks]);
+	const isFirstBlockFullscreenVideo = useMemo(() => {
+		return contentBlockList.length > 0 && contentBlockList[0].show_style === 6;
+	}, [contentBlockList]);
+	return /* @__PURE__ */ jsx(Box, {
+		className: "w-full",
+		"data-top-nav-root": "true",
+		children: isFirstBlockFullscreenVideo ? /* @__PURE__ */ jsx(TopNavBarFullscreen, {
+			channelDataList,
+			currentChannelId
+		}) : /* @__PURE__ */ jsx(TopNavBarNormal, {
+			channelDataList,
+			currentChannelId
+		})
+	});
+}
+
+//#endregion
+export { TopNavBar };

package/dist/components/common/top-nav-bar/fullscreen.mjs

@@ -1,2 +1,28 @@
 
-"use client";import{Box as e}from"../../ui/box.mjs";import t from"../../biz/business/nav-bar/variants/basic-nav-bar/index.mjs";import{memo as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({channelDataList:n,currentChannelId:i})=>r(e,{className:`absolute top-0 left-0 z-10 w-full`,children:r(t,{data:{list:n,currentChannelId:i}})}));export{i as TopNavBarFullscreen};
+'use client';
+
+import { Box } from "../../ui/box.mjs";
+import basic_nav_bar_default from "../../biz/business/nav-bar/variants/basic-nav-bar/index.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region components/common/top-nav-bar/fullscreen.tsx
+/**
+* 全屏模式顶部导航栏组件
+* 只显示导航栏（绝对定位）
+*/
+/**
+* 全屏模式顶部导航栏
+*/
+const TopNavBarFullscreen = memo(({ channelDataList, currentChannelId }) => {
+	return /* @__PURE__ */ jsx(Box, {
+		className: "absolute top-0 left-0 z-10 w-full",
+		children: /* @__PURE__ */ jsx(basic_nav_bar_default, { data: {
+			list: channelDataList,
+			currentChannelId
+		} })
+	});
+});
+
+//#endregion
+export { TopNavBarFullscreen };