@funhub/platform 0.2.29 → 0.2.31

package/dist/components/biz/business/channel-list/client.mjs

@@ -1,2 +1,158 @@
 
-"use client";import{mergeStyles as e}from"../../utils/styles/helpers.mjs";import{trackAppPageView as t,trackPageClick as n}from"../../../../utils/tracking.mjs";import{Box as r}from"../../../ui/box.mjs";import i from"../../../ui/link.mjs";import{urlPrefix as a}from"../../../../constants/url-prefix.mjs";import{useSticky as o}from"../../../../hooks/use-sticky.mjs";import s from"../../../../assets/icons/channel-list/channel-active-indicator.mjs";import c from"../../../../assets/icons/common/header-menu.mjs";import l,{loadHiddenChannelIdsFromStorage as u}from"./channel-filter-dialog.mjs";import{defaultProps as d}from"./default-props.mjs";import{clsx as f}from"clsx";import{usePathname as p}from"next/navigation";import{useEffect as m,useMemo as h,useState as g}from"react";import{Fragment as _,jsx as v,jsxs as y}from"react/jsx-runtime";import{useTranslations as b}from"next-intl";const x={},S=`h-[44px]`;function C(e,t){let n=`${a.DOMAIN}/`,r=t.indexOf(n),i=r!==-1,o=i?t.slice(r+n.length).split(`/`)[0]:void 0;return e.isDefault?i&&o?`${a.DOMAIN}/${o}`:`/`:i&&o?`${a.DOMAIN}/${o}/${encodeURIComponent(e.name)}`:`${a.CHANNEL}/${encodeURIComponent(e.name)}`}function w(a){let w=b(`components.biz.business.navBar.variants.basicNavBar.runtime`),{mode:T=`renderer`,styles:E,events:D,...O}=a,k=p()??`/`,A=T===`editor`,j=O||x,M={...d,...j},[N,P]=g(!1),{isSticky:F,ref:I}=o(),[L,R]=g(!1),[z,B]=g(M.list),V=h(()=>M.list.find(e=>e.isDefault)?.name??null,[M.list]),H=h(()=>M.currentChannelId??V,[M.currentChannelId,V]);m(()=>{H&&t({page_key:`page_home_channel_${H}`,page_name:`首页频道-${H}`})},[H]),m(()=>{let e=u();B(e?.length?M.list.filter(t=>!e.includes(t.name)):M.list)},[M.list]);let U=e=>{B(e)},W=(e,t)=>{n(`home`,`首页`,null,`channel_tab`,{channel_name:e.name}),D?.onChannelChange?.(e,t)},G=E?e(E,{}):void 0,K=()=>{P(!0),D?.onFilterClick?.()};return m(()=>{let e=()=>{let e=window.scrollY??document.documentElement.scrollTop??0,t=window.innerHeight,n=document.documentElement.scrollHeight;R(e+t>=n-1)};return window.addEventListener(`scroll`,e,{passive:!0}),e(),()=>{window.removeEventListener(`scroll`,e)}},[]),y(_,{children:[F&&v(r,{className:f(`w-full`,S)}),v(r,{as:`nav`,ref:I,className:f(`w-full bg-transparent transition-all duration-200`,A&&`pointer-events-none`,F&&`fixed top-0 left-0 right-0 z-50`),style:G,children:y(r,{className:f(`relative flex w-full items-center py-2 no-vw-x-16`,S,M.modifiable&&`gap-2`),children:[v(r,{className:`[-webkit-overflow-scrolling:touch] [-ms-overflow-style:none] [scrollbar-width:none] flex h-full min-w-0 flex-1 items-center overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:hidden`,children:v(r,{className:`inline-flex h-full min-w-full items-center gap-[23.8px]`,children:z.map((e,t)=>{let n=H===e.name||H===null&&t===0;return v(i,{href:C(e,k),webviewNavMode:`spa`,className:f(`group relative inline-flex h-full shrink-0 cursor-pointer whitespace-nowrap transition-all duration-200`,n?`text-white`:`text-white/70`),onClick:()=>W(e,t),children:n?y(r,{className:`inline-grid grid-cols-1 grid-rows-1 place-items-start h-[24px]`,children:[v(r,{as:`span`,className:`relative z-[1] block h-[24px] text-center text-[20px] font-['PingFang_SC'] font-semibold leading-[24px] text-white transition-all duration-200`,children:e.name}),v(r,{"aria-hidden":`true`,className:`col-start-1 row-start-1 ml-px mt-[15px] h-[11px] w-[39px]`,children:v(s,{className:`block h-full w-full`})})]}):v(r,{className:`inline-flex h-full items-center`,children:v(r,{as:`span`,className:`block h-[24px] text-center text-[16px] font-['PingFang_SC'] font-normal leading-[24px] transition-all duration-200`,children:e.name})})},e.name||`channel-${t}`)})})}),M.modifiable?v(`button`,{type:`button`,"aria-label":w(`moreChannelEntry`),className:`relative flex size-6 shrink-0 items-center justify-center border-0 bg-transparent p-0`,onClick:K,children:v(c,{"aria-hidden":`true`,className:`h-[24px] w-[24px] text-white`})}):null]})}),v(l,{open:N,onOpenChange:P,channels:M.list,currentChannelId:H,onChannelClick:W,onChannelsChange:U})]})}export{w as default};
+'use client';
+
+import { mergeStyles } from "../../utils/styles/helpers.mjs";
+import { trackAppPageView, trackPageClick } from "../../../../utils/tracking.mjs";
+import { Box } from "../../../ui/box.mjs";
+import Link from "../../../ui/link.mjs";
+import { urlPrefix } from "../../../../constants/url-prefix.mjs";
+import { useSticky } from "../../../../hooks/use-sticky.mjs";
+import SvgChannelActiveIndicator from "../../../../assets/icons/channel-list/channel-active-indicator.mjs";
+import SvgHeaderMenu from "../../../../assets/icons/common/header-menu.mjs";
+import ChannelFilterDialog, { loadHiddenChannelIdsFromStorage } from "./channel-filter-dialog.mjs";
+import { defaultProps } from "./default-props.mjs";
+import { clsx as clsx$1 } from "clsx";
+import { usePathname } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/biz/business/channel-list/client.tsx
+/**
+* BasicNavBar 客户端渲染组件
+*/
+const emptyPropsConfig = {};
+const CHANNEL_BAR_HEIGHT_CLASS = "h-[44px]";
+/**
+* 生成频道链接地址
+* - 默认路径 "/"：默认 tab 跳转 "/"，其他 tab 跳转 "/category/分类名"
+* - domain 路径 "/domain/模块名"：默认 tab 跳转 "/domain/模块名"，其他 tab 跳转 "/domain/模块名/分类名"
+*/
+function getChannelHref(item, pathname) {
+	const domainPrefix = `${urlPrefix.DOMAIN}/`;
+	const domainIdx = pathname.indexOf(domainPrefix);
+	const isDomainContext = domainIdx !== -1;
+	const moduleName = isDomainContext ? pathname.slice(domainIdx + domainPrefix.length).split("/")[0] : void 0;
+	if (item.isDefault) return isDomainContext && moduleName ? `${urlPrefix.DOMAIN}/${moduleName}` : "/";
+	if (isDomainContext && moduleName) return `${urlPrefix.DOMAIN}/${moduleName}/${encodeURIComponent(item.name)}`;
+	return `${urlPrefix.CHANNEL}/${encodeURIComponent(item.name)}`;
+}
+function BasicChannelListClient(props) {
+	const t = useTranslations("components.biz.business.navBar.variants.basicNavBar.runtime");
+	const { mode = "renderer", styles, events, ...rest } = props;
+	const pathname = usePathname() ?? "/";
+	const isEditor = mode === "editor";
+	const propsConfig = rest || emptyPropsConfig;
+	const _props = {
+		...defaultProps,
+		...propsConfig
+	};
+	const [isChannelDialogOpen, setIsChannelDialogOpen] = useState(false);
+	const { isSticky, ref: navBarRef } = useSticky();
+	const [_isBottomReached, setIsBottomReached] = useState(false);
+	const [displayChannels, setDisplayChannels] = useState(_props.list);
+	const defaultChannelId = useMemo(() => _props.list.find((item) => item.isDefault)?.name ?? null, [_props.list]);
+	const currentChannelId = useMemo(() => _props.currentChannelId ?? defaultChannelId, [_props.currentChannelId, defaultChannelId]);
+	useEffect(() => {
+		if (!currentChannelId) return;
+		trackAppPageView({
+			page_key: `page_home_channel_${currentChannelId}`,
+			page_name: `首页频道-${currentChannelId}`
+		});
+	}, [currentChannelId]);
+	useEffect(() => {
+		const hiddenChannelIds = loadHiddenChannelIdsFromStorage();
+		setDisplayChannels(hiddenChannelIds?.length ? _props.list.filter((ch) => !hiddenChannelIds.includes(ch.name)) : _props.list);
+	}, [_props.list]);
+	const handleChannelsChange = (myChannels) => {
+		setDisplayChannels(myChannels);
+	};
+	const handleChannelClick = (item, index) => {
+		trackPageClick("home", "首页", null, "channel_tab", { channel_name: item.name });
+		events?.onChannelChange?.(item, index);
+	};
+	const wrapperStyle = styles ? mergeStyles(styles, {}) : void 0;
+	const handleFilterClick = () => {
+		setIsChannelDialogOpen(true);
+		events?.onFilterClick?.();
+	};
+	useEffect(() => {
+		const checkBottomReached = () => {
+			const scrollTop = window.scrollY ?? document.documentElement.scrollTop ?? 0;
+			const clientHeight = window.innerHeight;
+			const scrollHeight = document.documentElement.scrollHeight;
+			setIsBottomReached(scrollTop + clientHeight >= scrollHeight - 1);
+		};
+		window.addEventListener("scroll", checkBottomReached, { passive: true });
+		checkBottomReached();
+		return () => {
+			window.removeEventListener("scroll", checkBottomReached);
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		isSticky && /* @__PURE__ */ jsx(Box, { className: clsx$1("w-full", CHANNEL_BAR_HEIGHT_CLASS) }),
+		/* @__PURE__ */ jsx(Box, {
+			as: "nav",
+			ref: navBarRef,
+			className: clsx$1("w-full bg-transparent transition-all duration-200", isEditor && "pointer-events-none", isSticky && "fixed top-0 left-0 right-0 z-50"),
+			style: wrapperStyle,
+			children: /* @__PURE__ */ jsxs(Box, {
+				className: clsx$1("relative flex w-full items-center py-2 no-vw-x-16", CHANNEL_BAR_HEIGHT_CLASS, _props.modifiable && "gap-2"),
+				children: [/* @__PURE__ */ jsx(Box, {
+					className: "[-webkit-overflow-scrolling:touch] [-ms-overflow-style:none] [scrollbar-width:none] flex h-full min-w-0 flex-1 items-center overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:hidden",
+					children: /* @__PURE__ */ jsx(Box, {
+						className: "inline-flex h-full min-w-full items-center gap-[23.8px]",
+						children: displayChannels.map((item, index) => {
+							const isActive = currentChannelId === item.name || currentChannelId === null && item.isDefault;
+							return /* @__PURE__ */ jsx(Link, {
+								href: getChannelHref(item, pathname),
+								webviewNavMode: "spa",
+								className: clsx$1("group relative inline-flex h-full shrink-0 cursor-pointer whitespace-nowrap transition-all duration-200", isActive ? "text-white" : "text-white/70"),
+								onClick: () => handleChannelClick(item, index),
+								children: isActive ? /* @__PURE__ */ jsxs(Box, {
+									className: "inline-grid grid-cols-1 grid-rows-1 place-items-start h-[24px]",
+									children: [/* @__PURE__ */ jsx(Box, {
+										as: "span",
+										className: "relative z-[1] block h-[24px] text-center text-[20px] font-['PingFang_SC'] font-semibold leading-[24px] text-white transition-all duration-200",
+										children: item.name
+									}), /* @__PURE__ */ jsx(Box, {
+										"aria-hidden": "true",
+										className: "col-start-1 row-start-1 ml-px mt-[15px] h-[11px] w-[39px]",
+										children: /* @__PURE__ */ jsx(SvgChannelActiveIndicator, { className: "block h-full w-full" })
+									})]
+								}) : /* @__PURE__ */ jsx(Box, {
+									className: "inline-flex h-full items-center",
+									children: /* @__PURE__ */ jsx(Box, {
+										as: "span",
+										className: "block h-[24px] text-center text-[16px] font-['PingFang_SC'] font-normal leading-[24px] transition-all duration-200",
+										children: item.name
+									})
+								})
+							}, item.name || `channel-${index}`);
+						})
+					})
+				}), _props.modifiable ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": t("moreChannelEntry"),
+					className: "relative flex size-6 shrink-0 items-center justify-center border-0 bg-transparent p-0",
+					onClick: handleFilterClick,
+					children: /* @__PURE__ */ jsx(SvgHeaderMenu, {
+						"aria-hidden": "true",
+						className: "h-[24px] w-[24px] text-white"
+					})
+				}) : null]
+			})
+		}),
+		/* @__PURE__ */ jsx(ChannelFilterDialog, {
+			open: isChannelDialogOpen,
+			onOpenChange: setIsChannelDialogOpen,
+			channels: _props.list,
+			currentChannelId,
+			onChannelClick: handleChannelClick,
+			onChannelsChange: handleChannelsChange
+		})
+	] });
+}
+
+//#endregion
+export { BasicChannelListClient as default };

package/dist/components/biz/business/channel-list/default-props.mjs

@@ -1,2 +1,14 @@
 
-const e={currentChannelId:null,isFullfeed:!1,modifiable:!0,list:[]};export{e as defaultProps};
+//#region components/biz/business/channel-list/default-props.ts
+/**
+* BasicNavBar 组件默认 Props 配置
+*/
+const defaultProps = {
+	currentChannelId: null,
+	isFullfeed: false,
+	modifiable: true,
+	list: []
+};
+
+//#endregion
+export { defaultProps };

package/dist/components/biz/business/channel-list/material.mjs

@@ -1,2 +1,22 @@
 
-import{defineMaterial as e}from"../../../../utils/schema/material.mjs";import t from"./client.mjs";import{channelListInspectorPropsSchema as n}from"./schema.mjs";const r=e({type:`channel-list`,name:`频道`,icon:`/static/components-thumb/channel_list_editable.png`,category:`内容组件`,serverComponent:t,clientComponent:t,propsSchema:n});export{r as channelListMaterial};
+import { defineMaterial } from "../../../../utils/schema/material.mjs";
+import BasicChannelListClient from "./client.mjs";
+import { channelListInspectorPropsSchema } from "./schema.mjs";
+
+//#region components/biz/business/channel-list/material.ts
+/**
+* BasicBanner 低代码物料注册
+* 参照 packages/platform/components/biz/example/button 的 material 结构
+*/
+const channelListMaterial = defineMaterial({
+	type: "channel-list",
+	name: "频道",
+	icon: "/static/components-thumb/channel_list_editable.png",
+	category: "内容组件",
+	serverComponent: BasicChannelListClient,
+	clientComponent: BasicChannelListClient,
+	propsSchema: channelListInspectorPropsSchema
+});
+
+//#endregion
+export { channelListMaterial };

package/dist/components/biz/business/channel-list/schema.mjs

@@ -1,2 +1,41 @@
 
-import{defineComponentPropsSchema as e,getSchemaDefaultProps as t}from"../../../../utils/schema/schema.mjs";import n from"zod";const r=e(e=>({modifiable:e.boolean(!0,{fieldType:`switch`,label:`自定义频道`}),list:e.array(n.object({name:e.string(void 0,{label:`内容标题`,required:!1}),icon:e.string(void 0,{label:`图标`,required:!1}),isDefault:e.boolean(void 0,{fieldType:`switch`,label:`是否默认频道`,required:!1})}),{required:!1,label:`list`,defaultValue:[{name:`频道名称`,icon:``,isDefault:!0}]})}));t(r);export{r as channelListInspectorPropsSchema};
+import { defineComponentPropsSchema, getSchemaDefaultProps } from "../../../../utils/schema/schema.mjs";
+import z$1 from "zod";
+
+//#region components/biz/business/channel-list/schema.ts
+/**
+* 定义可以被低代码右侧inspector编辑的props
+*/
+const channelListInspectorPropsSchema = defineComponentPropsSchema((t) => ({
+	modifiable: t.boolean(true, {
+		fieldType: "switch",
+		label: "自定义频道"
+	}),
+	list: t.array(z$1.object({
+		name: t.string(void 0, {
+			label: "内容标题",
+			required: false
+		}),
+		icon: t.string(void 0, {
+			label: "图标",
+			required: false
+		}),
+		isDefault: t.boolean(void 0, {
+			fieldType: "switch",
+			label: "是否默认频道",
+			required: false
+		})
+	}), {
+		required: false,
+		label: "list",
+		defaultValue: [{
+			name: "频道名称",
+			icon: "",
+			isDefault: true
+		}]
+	})
+}));
+const channelListInspectorDefaultProps = getSchemaDefaultProps(channelListInspectorPropsSchema);
+
+//#endregion
+export { channelListInspectorPropsSchema };