@funhub/platform 0.1.10

package/dist/components/base/tabs.d.ts

@@ -0,0 +1,52 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+/**
+ * Tab 项的属性
+ */
+export interface TabProps {
+    title: ReactNode;
+    /** Tab 的唯一标识 */
+    key: string;
+}
+/**
+ * Tabs 组件的属性
+ */
+export interface TabsProps {
+    stretch?: boolean;
+    className?: string;
+    /** Tab 子组件，可以是单个或多个 Tab */
+    children: ReactElement<TabProps> | ReactElement<TabProps>[];
+    /** 当前激活的 Tab 的 key（受控模式） */
+    activeKey?: string;
+    /** 默认激活的 Tab 的 key（非受控模式） */
+    defaultActiveKey?: string;
+    /** Tab 切换时的回调函数 */
+    onChange?: (key: string) => void;
+    /** 自定义样式，支持 CSS 变量 */
+    style?: CSSProperties & {
+        /** 激活状态下划线的颜色 */
+        '--active-line-color'?: string;
+        /** 激活状态下划线的高度 */
+        '--active-line-height'?: string;
+        /** 激活状态标题的颜色 */
+        '--active-title-color'?: string;
+        /** 激活状态标题的字体大小 */
+        '--active-title-font-size'?: string;
+        /** 非激活状态标题的字体大小 */
+        '--title-font-size'?: string;
+        /** Tab 的内边距 */
+        '--tab-padding'?: string;
+        /** Tabs 容器的边框颜色 */
+        '--tabs-border-color'?: string;
+    };
+    /** 根容器的自定义类名 */
+    /** 应用到每个 Tab 的自定义类名 */
+    tabClassName?: string;
+    /** 应用到激活状态 Tab 的自定义类名 */
+    tabActiveClassName?: string;
+}
+declare function Tab(_: TabProps): null;
+declare function Tabs({ children, activeKey, defaultActiveKey, onChange, style, stretch, className, tabClassName, tabActiveClassName, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Tabs {
+    var Tab: typeof import("./tabs").Tab;
+}
+export { Tab, Tabs };

package/dist/components/base/tabs.mjs

@@ -0,0 +1,122 @@
+"use client";
+import { jsxs as $, jsx as l } from "react/jsx-runtime";
+import { clsx as f } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs";
+import { useState as b, useRef as z, useMemo as H, useCallback as K, useLayoutEffect as M, useEffect as X } from "react";
+function _(i) {
+  return null;
+}
+function q({
+  children: i,
+  activeKey: u,
+  defaultActiveKey: y,
+  onChange: T,
+  style: e = {},
+  stretch: d = !0,
+  className: w = "",
+  tabClassName: C = "",
+  tabActiveClassName: g = ""
+}) {
+  const [k, A] = b(y || ""), [v, R] = b({ left: 0, width: 0 }), [n, I] = b(!1), p = z([]), m = z(null), o = u !== void 0 ? u : k, x = H(() => Array.isArray(i) ? i : [i], [i]), a = K(() => {
+    const t = x.findIndex((r) => r.key === o);
+    if (t !== -1 && p.current[t] && m.current) {
+      const r = p.current[t], c = m.current.getBoundingClientRect(), s = r.getBoundingClientRect(), P = {
+        left: s.left - c.left + s.width / 2,
+        width: 48
+        // w-12 = 48px
+      };
+      R(P);
+    }
+  }, [o, x]);
+  M(() => {
+    if (!n) {
+      a();
+      const t = setTimeout(() => {
+        I(!0);
+      }, 0);
+      return () => clearTimeout(t);
+    }
+  }, [n, a]), X(() => {
+    n && a();
+  }, [o, n, a]);
+  const S = (t) => {
+    t !== o && (u === void 0 && A(t), T?.(t));
+  }, j = e["--active-line-color"] || "var(--color-text1)", B = e["--active-line-height"] || "1px", L = e["--active-title-color"] || "var(--color-text1)", N = e["--active-title-font-size"] || "18px", E = e["--title-font-size"] || "18px", F = e["--tab-padding"] || "10px";
+  return /* @__PURE__ */ $(
+    "div",
+    {
+      className: f("relative", w),
+      style: {
+        ...e,
+        "--active-title-font-size": N,
+        "--title-font-size": E,
+        "--tab-padding": F
+      },
+      children: [
+        /* @__PURE__ */ l(
+          "div",
+          {
+            ref: m,
+            className: f("flex gap-5", {
+              "justify-around": d,
+              "justify-start": !d
+            }),
+            style: { borderColor: e["--tabs-border-color"] || void 0 },
+            children: x.map((t, r) => {
+              const { title: h } = t.props, c = t.key === o;
+              return /* @__PURE__ */ l(
+                "div",
+                {
+                  ref: (s) => {
+                    p.current[r] = s;
+                  },
+                  onClick: () => {
+                    t.key && S(t.key);
+                  },
+                  className: f(
+                    "relative flex whitespace-nowrap font-medium items-center justify-center cursor-pointer transition-colors",
+                    "[font-size:var(--title-font-size)] p-(--tab-padding)",
+                    {
+                      "flex-1 text-center": d,
+                      "[font-size:var(--active-title-font-size)]": c,
+                      [g]: c && g
+                    },
+                    C
+                  ),
+                  children: /* @__PURE__ */ l(
+                    "span",
+                    {
+                      style: {
+                        color: c ? L : "var(--color-text2, #666)"
+                      },
+                      children: h
+                    }
+                  )
+                },
+                t.key
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: f("absolute bottom-0 rounded-full", {
+              "transition-all duration-300 ease-in-out": n
+            }),
+            style: {
+              backgroundColor: j,
+              height: B,
+              width: `${v.width}px`,
+              transform: `translateX(${v.left - v.width / 2}px)`
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+q.Tab = _;
+export {
+  _ as Tab,
+  q as Tabs
+};

package/dist/components/base/tag-tabs.d.ts

@@ -0,0 +1,48 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+/**
+ * TagTab 项的属性
+ */
+export interface TagTabProps {
+    /** TagTab 显示的标题内容 */
+    title: ReactNode;
+    /** TagTab 的唯一标识 */
+    key: string;
+}
+/**
+ * TagTabs 组件的属性
+ */
+export interface TagTabsProps {
+    /** TagTab 子组件，可以是单个或多个 TagTab */
+    children: ReactElement<TagTabProps> | ReactElement<TagTabProps>[];
+    /** 当前激活的 TagTab 的 key（受控模式） */
+    activeKey?: string;
+    /** 默认激活的 TagTab 的 key（非受控模式） */
+    defaultActiveKey?: string;
+    /** TagTab 切换时的回调函数 */
+    onChange?: (key: string) => void;
+    /** 自定义样式，支持 CSS 变量 */
+    style?: CSSProperties & {
+        /** 激活状态的背景颜色 */
+        '--tab-active-bg-color'?: string;
+        /** 激活状态的文字颜色 */
+        '--tab-active-text-color'?: string;
+        /** 标题的字体大小 */
+        '--title-font-size'?: string;
+        /** TagTab 的内边距 */
+        '--tab-padding'?: string;
+    };
+    /** 是否拉伸 TagTab 以填充容器宽度 */
+    stretch?: boolean;
+    /** 根容器的自定义类名 */
+    className?: string;
+    /** 应用到每个 TagTab 的自定义类名 */
+    tabClassName?: string;
+    /** 应用到激活状态 TagTab 的自定义类名 */
+    tabActiveClassName?: string;
+}
+declare function TagTab(_: TagTabProps): null;
+declare function TagTabs({ children, activeKey, defaultActiveKey, onChange, style, stretch, className, tabClassName, tabActiveClassName, }: TagTabsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TagTabs {
+    var Tab: typeof TagTab;
+}
+export { TagTab, TagTabs };

package/dist/components/base/tag-tabs.mjs

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { clsx as c } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs";
+import { useState as z, useMemo as j } from "react";
+function C(e) {
+  return null;
+}
+function w({
+  children: e,
+  activeKey: r,
+  defaultActiveKey: f,
+  onChange: u,
+  style: o = {},
+  stretch: n = !1,
+  className: d = "",
+  tabClassName: p = "",
+  tabActiveClassName: s = ""
+}) {
+  const [v, m] = z(f || ""), l = r !== void 0 ? r : v, x = j(() => Array.isArray(e) ? e : [e], [e]), b = (t) => {
+    t !== l && (r === void 0 && m(t), u?.(t));
+  }, g = o["--tab-active-bg-color"] || "var(--color-theme5)", A = o["--tab-active-text-color"] || "var(--color-text1)", T = o["--title-font-size"] || "14px", y = o["--tab-padding"] || "4px 8px";
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: c("relative", d),
+      style: {
+        ...o,
+        "--title-font-size": T,
+        "--tab-padding": y
+      },
+      children: /* @__PURE__ */ a(
+        "div",
+        {
+          className: c("flex gap-2", {
+            "justify-around": n,
+            "justify-start": !n
+          }),
+          children: x.map((t) => {
+            const { title: k } = t.props, i = t.key === l;
+            return /* @__PURE__ */ a(
+              "div",
+              {
+                onClick: () => {
+                  t.key && b(t.key);
+                },
+                className: c(
+                  "relative flex whitespace-nowrap font-medium items-center justify-center cursor-pointer transition-all rounded",
+                  "[font-size:var(--title-font-size)] p-(--tab-padding)",
+                  {
+                    "flex-1 text-center": n,
+                    [s]: i && s
+                  },
+                  p
+                ),
+                style: {
+                  backgroundColor: i ? g : "transparent",
+                  color: i ? A : "var(--color-text1, #666)"
+                },
+                children: k
+              },
+              t.key
+            );
+          })
+        }
+      )
+    }
+  );
+}
+w.Tab = C;
+export {
+  C as TagTab,
+  w as TagTabs
+};

package/dist/components/base/tag.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+type TagSize = 'small' | 'medium' | 'large';
+type TagType = 'default' | 'outline' | 'filled';
+interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'className'> {
+    /**
+     * 标签内容
+     */
+    children: React.ReactNode;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 标签尺寸
+     * @default "medium"
+     */
+    size?: TagSize;
+    /**
+     * 标签样式类型
+     * @default "default"
+     */
+    type?: TagType;
+    /**
+     * 是否可关闭
+     * @default false
+     */
+    closable?: boolean;
+    /**
+     * 关闭回调
+     */
+    onClose?: () => void;
+    /**
+     * 自定义颜色
+     */
+    color?: string;
+}
+declare function Tag({ children, className, size, type, closable, onClose, color, ...rest }: TagProps): import("react/jsx-runtime").JSX.Element;
+export default Tag;

package/dist/components/base/tag.mjs

@@ -0,0 +1,48 @@
+"use client";
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
+import u from "../../assets/icons/close.svg.mjs";
+import x from "./box.mjs";
+import p from "./button.mjs";
+import y from "./text.mjs";
+const h = {
+  small: "px-2 py-0.5 text-xs",
+  medium: "px-3 py-1 text-sm",
+  large: "px-4 py-1.5 text-base"
+}, C = {
+  default: "bg-gray-100 text-gray-700 border border-gray-200",
+  outline: "bg-transparent text-gray-700 border border-gray-300",
+  filled: "bg-gray-800 text-white border border-gray-800"
+};
+function w({
+  children: o,
+  className: s = "",
+  size: a = "medium",
+  type: e = "default",
+  closable: i = !1,
+  onClose: l,
+  color: t,
+  ...n
+}) {
+  const d = "inline-flex items-center gap-1.5 rounded-md font-medium transition-colors", m = h[a], c = C[e], f = `${d} ${m} ${c} ${s}`.trim();
+  return /* @__PURE__ */ b(x, { className: f, style: t ? {
+    backgroundColor: e === "filled" ? t : "transparent",
+    borderColor: e === "outline" || e === "default" ? t : void 0,
+    color: e === "filled" ? "#fff" : t
+  } : void 0, ...n, children: [
+    /* @__PURE__ */ r(y, { as: "span", children: o }),
+    i && /* @__PURE__ */ r(
+      p,
+      {
+        onClick: (g) => {
+          g.stopPropagation(), l?.();
+        },
+        className: "ml-1 -mr-1 p-0! min-w-0 h-auto shrink-0 flex items-center justify-center rounded hover:bg-black/10 active:bg-black/20 transition-colors",
+        "aria-label": "关闭标签",
+        children: /* @__PURE__ */ r(u, { width: 10, height: 10 })
+      }
+    )
+  ] });
+}
+export {
+  w as default
+};

package/dist/components/base/text.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+type TextAs = 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'strong' | 'em' | 'small';
+interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className'> {
+    /**
+     * 子元素内容
+     */
+    children?: React.ReactNode;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 渲染的 HTML 标签类型
+     * @default "span"
+     */
+    as?: TextAs;
+    /**
+     * label 标签的 htmlFor 属性
+     */
+    htmlFor?: string;
+}
+declare function Text({ children, className, as, htmlFor, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;
+export default Text;

package/dist/components/base/text.mjs

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+function i({ children: e, className: o = "", as: s = "span", htmlFor: n, ...t }) {
+  const c = o.trim(), a = s, p = n && s === "label" ? { ...t, htmlFor: n } : t;
+  return /* @__PURE__ */ l(a, { className: c, ...p, children: e });
+}
+export {
+  i as default
+};

package/dist/components/biz/basics/header-nav/client.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    title?: string;
+    className?: string;
+    leftChild?: React.ReactNode;
+    centerChild?: React.ReactNode;
+    rightChild?: React.ReactNode;
+    leftIconCss?: string;
+    onBack?: () => void;
+}
+export declare function HeaderNav({ title, leftChild, centerChild, className, rightChild, leftIconCss, onBack, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/biz/basics/header-nav/client.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+function d({
+  title: s,
+  leftChild: l,
+  centerChild: r,
+  className: n,
+  rightChild: t,
+  leftIconCss: o,
+  onBack: a
+}) {
+  const c = () => {
+    a?.();
+  };
+  return /* @__PURE__ */ e("nav", { className: "app-top-nav h-12  w-px", children: /* @__PURE__ */ i(
+    "div",
+    {
+      className: `w-screen h-12 bg-bg1 flex items-center justify-center fixed top-0 left-0 right-0 z-50 border-b border-(--color-text1)/5 ${n}`,
+      style: {
+        willChange: "transform",
+        transform: "translateZ(0)"
+      },
+      children: [
+        /* @__PURE__ */ e("div", { className: "absolute z-1 h-full left-0 top-0", children: l || /* @__PURE__ */ e(
+          "div",
+          {
+            onClick: c,
+            className: "cursor-pointer h-full w-12 flex items-center justify-center"
+          }
+        ) }),
+        r || /* @__PURE__ */ e("p", { className: "text-text1 text-[18px]", children: s }),
+        t && /* @__PURE__ */ e("div", { className: "absolute h-full right-0 top-0 flex items-center justify-center", children: t })
+      ]
+    }
+  ) });
+}
+export {
+  d as HeaderNav
+};

package/dist/components/biz/basics/header-nav/index.d.ts

@@ -0,0 +1 @@
+export * from './client';

package/dist/components/biz/basics/index.d.ts

@@ -0,0 +1,6 @@
+export * from './header-nav';
+/**
+ * 基础组件导出
+ */
+export * from './logo';
+export * from './search';

package/dist/components/biz/basics/logo/index.d.ts

@@ -0,0 +1,2 @@
+import { default as BasicLogo, BasicLogoDefaultData, BasicLogoSchema } from './variants/basic-logo';
+export { BasicLogo, BasicLogoDefaultData, BasicLogoSchema };

package/dist/components/biz/basics/logo/variants/basic-logo/client.d.ts

@@ -0,0 +1,3 @@
+import { BaseComponentProps } from '../../../../utils';
+import { ChannelType } from '../../../../../../types/temp';
+export default function BasicLogoClient({ props: propsConfig, styles, events, data: channels, }: BaseComponentProps<ChannelType[]>): import("react/jsx-runtime").JSX.Element;

package/dist/components/biz/basics/logo/variants/basic-logo/client.mjs

@@ -0,0 +1,127 @@
+"use client";
+import { jsxs as T, jsx as t } from "react/jsx-runtime";
+import { clsx as P } from "../../../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs";
+import V from "../../../../../../_virtual/link.mjs";
+import { useState as m, useRef as y, useEffect as H } from "react";
+import p from "../../../../../base/box.mjs";
+import { disablePageScroll as M, enablePageScroll as w, pxToVw as i } from "../../../../../base/helper/index.mjs";
+import B from "../../../../../base/image.mjs";
+import R from "../../../../../base/text.mjs";
+import O from "../../../../../base/button.mjs";
+import "../../../../../base/card.mjs";
+import "../../../../../base/list.mjs";
+import { Mask as $ } from "../../../../../base/mask.mjs";
+import { Popover as j } from "../../../../../base/popover.mjs";
+import "@tanstack/react-query";
+import "../../../../../base/skeleton.mjs";
+import "../../../../../base/tabs.mjs";
+import "../../../../../base/tag-tabs.mjs";
+import { mergeStyles as D } from "../../../../utils/styles.mjs";
+import { CHANNEL_LINK_PREFIX as W } from "../../../../../../config/url-prefix.mjs";
+import { defaultData as Y } from "./default-data.mjs";
+const F = "w-full leading-[58px] px-[20px] text-[16px] text-text2 border-t border-solid border-line1 transition-all duration-150 block", K = "text-[20px]! text-theme5! font-bold!", U = { overscrollBehavior: "contain" }, X = 150;
+function q(o, n) {
+  return n === 0 ? "/" : `${W}/${encodeURIComponent(o.cn_name)}`;
+}
+function z(o, n) {
+  return P(
+    F,
+    o === 0 && "border-t-0",
+    n && K
+  );
+}
+function G(o) {
+  o.stopPropagation();
+}
+function ge({
+  props: o = {},
+  styles: n,
+  events: c,
+  data: f = []
+}) {
+  const d = { ...Y, ...o }, {
+    logoSrc: h,
+    logoAlt: u,
+    logoWidth: C,
+    logoHeight: g,
+    popoverPlacement: x,
+    popoverWidth: v,
+    maxHeight: S,
+    itemHeight: E,
+    currentChannelId: N
+  } = d, [l, a] = m(!1), b = y(null), [k, I] = m(
+    N ?? null
+  ), s = (e) => {
+    b.current?.contains(e.target) || a(!1);
+  }, _ = (e, r) => {
+    I(e.id), c?.onChannelChange?.(e, r), setTimeout(() => {
+      a(!1);
+    }, X);
+  };
+  H(() => {
+    if (l)
+      return document.addEventListener("click", s, !1), M(), () => {
+        document.removeEventListener("click", s, !1), w();
+      };
+  }, [l]);
+  const L = n ? D(n, {}) : {}, A = {
+    width: i(v),
+    maxHeight: i(S),
+    ...U
+  };
+  return /* @__PURE__ */ T(p, { style: L, className: "leading-0", children: [
+    /* @__PURE__ */ t($, { visible: l, onMaskClick: () => a(!1) }),
+    /* @__PURE__ */ t(
+      j,
+      {
+        placement: x,
+        visible: l,
+        content: /* @__PURE__ */ t(
+          p,
+          {
+            as: "nav",
+            className: "overflow-y-auto overscroll-contain",
+            style: A,
+            onTouchMove: G,
+            children: f.map((e, r) => /* @__PURE__ */ t(
+              V,
+              {
+                href: q(e, r),
+                className: z(
+                  r,
+                  k === e.id
+                ),
+                style: { height: i(E) },
+                onClick: () => _(e, r),
+                children: e.cn_name
+              },
+              e.id || `channel-${r}`
+            ))
+          }
+        ),
+        children: /* @__PURE__ */ t(R, { as: "h1", children: /* @__PURE__ */ t(
+          O,
+          {
+            onClick: () => {
+              a((e) => !e), c?.onClick?.();
+            },
+            className: "m-0! p-0!",
+            children: /* @__PURE__ */ t(
+              B,
+              {
+                src: h,
+                alt: u,
+                width: C,
+                height: g,
+                className: "block"
+              }
+            )
+          }
+        ) })
+      }
+    )
+  ] });
+}
+export {
+  ge as default
+};

package/dist/components/biz/basics/logo/variants/basic-logo/default-data.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Logo 组件默认数据
+ */
+export declare const defaultData: {
+    logoSrc: string;
+    logoAlt: string;
+    logoWidth: number;
+    logoHeight: number;
+    sourceType: number;
+    popoverPlacement: "bottom-start";
+    popoverWidth: number;
+    maxHeight: number;
+    itemHeight: number;
+    visible: boolean;
+    currentChannelId: string | null;
+};

package/dist/components/biz/basics/logo/variants/basic-logo/default-data.mjs

@@ -0,0 +1,16 @@
+const o = {
+  logoSrc: "/favicon.png",
+  logoAlt: "logo",
+  logoWidth: 38,
+  logoHeight: 38,
+  sourceType: 99,
+  popoverPlacement: "bottom-start",
+  popoverWidth: 130,
+  maxHeight: 356,
+  itemHeight: 58,
+  visible: !1,
+  currentChannelId: null
+};
+export {
+  o as defaultData
+};

package/dist/components/biz/basics/logo/variants/basic-logo/index.d.ts

@@ -0,0 +1,6 @@
+import { BaseComponentProps } from '../../../../utils';
+import { ChannelType } from '../../../../../../types/temp';
+import { defaultData } from './default-data';
+import { schema } from './schema';
+export default function BasicLogo(props: BaseComponentProps<ChannelType[]>): Promise<import("react/jsx-runtime").JSX.Element>;
+export { defaultData as BasicLogoDefaultData, schema as BasicLogoSchema };

package/dist/components/biz/basics/logo/variants/basic-logo/index.mjs

@@ -0,0 +1,10 @@
+import { jsx as a } from "react/jsx-runtime";
+import r from "./client.mjs";
+import { schema as m } from "./schema.mjs";
+async function c(o) {
+  return /* @__PURE__ */ a(r, { ...o });
+}
+export {
+  m as BasicLogoSchema,
+  c as default
+};

package/dist/components/biz/basics/logo/variants/basic-logo/schema.d.ts

@@ -0,0 +1,2 @@
+import { ComponentSchema } from '../../../../utils';
+export declare const schema: ComponentSchema;