@funhub/platform 0.1.10

package/dist/components/base/list.mjs

@@ -0,0 +1,196 @@
+"use client";
+import { jsx as e, jsxs as l, Fragment as _ } from "react/jsx-runtime";
+import W, { useRef as d, useEffect as y, useCallback as K, Children as C } from "react";
+import { pxToVw as T } from "./helper/index.mjs";
+import V from "./image.mjs";
+import D from "./infinite-scroll.mjs";
+const z = ({ size: r = 32 }) => /* @__PURE__ */ e(
+  "div",
+  {
+    className: "inline-block animate-spin rounded-full border-2 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]",
+    style: { width: r, height: r },
+    role: "status",
+    children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Loading..." })
+  }
+), B = () => /* @__PURE__ */ l("span", { className: "inline-flex gap-1 ml-1", children: [
+  /* @__PURE__ */ e("span", { className: "w-1 h-1 bg-current rounded-full animate-pulse", style: { animationDelay: "0s" } }),
+  /* @__PURE__ */ e("span", { className: "w-1 h-1 bg-current rounded-full animate-pulse", style: { animationDelay: "0.2s" } }),
+  /* @__PURE__ */ e("span", { className: "w-1 h-1 bg-current rounded-full animate-pulse", style: { animationDelay: "0.4s" } })
+] }), F = ({
+  index: r,
+  onIntersect: n,
+  resetKey: i,
+  rootMargin: c = "0px",
+  threshold: a = 0.1,
+  children: o
+}) => {
+  const s = d(null);
+  return y(() => {
+    const m = s.current;
+    if (!m)
+      return;
+    const u = new IntersectionObserver(
+      (f) => {
+        f[0]?.isIntersecting && (n(r), u.disconnect());
+      },
+      {
+        rootMargin: c,
+        threshold: a
+      }
+    );
+    return u.observe(m), () => u.disconnect();
+  }, [r, n, i, c, a]), /* @__PURE__ */ e("div", { ref: s, children: o });
+};
+function O({
+  title: r,
+  children: n,
+  description: i,
+  prefix: c,
+  extra: a,
+  arrow: o = !1,
+  onClick: s,
+  clickable: m = !1,
+  className: u = "",
+  style: f,
+  disabled: h = !1
+}) {
+  const N = m || !!s, x = (v) => {
+    h || s?.(v);
+  };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: `
+        flex items-center px-4 py-1.5 
+        ${N && !h ? "active:bg-gray-100 cursor-pointer" : ""}
+        ${h ? "opacity-50 cursor-not-allowed" : ""}
+        border-b border-gray-100 last:border-b-0
+        ${u}
+      `.trim().replace(/\s+/g, " "),
+      style: f,
+      onClick: x,
+      children: [
+        c && /* @__PURE__ */ e("div", { className: "flex items-center mr-3 shrink-0", children: c }),
+        /* @__PURE__ */ l("div", { className: "flex-1 min-w-0", children: [
+          r && /* @__PURE__ */ e("div", { className: "text-base text-text1 leading-5.5", children: r }),
+          (n || i) && /* @__PURE__ */ e("div", { className: "text-sm text-text2 leading-4.5 mt-0.5", children: n || i })
+        ] }),
+        a && /* @__PURE__ */ e("div", { className: "flex items-center ml-3 shrink-0 text-text3", children: a }),
+        o && /* @__PURE__ */ e("div", { className: "flex items-center ml-2 shrink-0 text-text4 opacity-60", children: o === !0 ? /* @__PURE__ */ e(
+          "svg",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ e(
+              "path",
+              {
+                d: "M6 4L10 8L6 12",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        ) : o })
+      ]
+    }
+  );
+}
+function q({
+  children: r,
+  loadMore: n,
+  hasMore: i,
+  empty: c,
+  emptyText: a,
+  emptySlot: o,
+  onItemRender: s,
+  intersectionRootMargin: m,
+  intersectionThreshold: u,
+  loading: f,
+  columns: h = 1,
+  gridGap: N = 12,
+  style: x,
+  className: v = ""
+}) {
+  const w = d(s), b = d(/* @__PURE__ */ new Set()), p = d(0), I = d(0), k = d(!1);
+  y(() => {
+    w.current = s;
+  }, [s]);
+  const E = K((t) => {
+    if (!b.current.has(t) && (b.current.add(t), t === p.current))
+      for (w.current?.(t), p.current = t + 1; b.current.has(p.current); )
+        w.current?.(p.current), p.current++;
+  }, []), g = C.count(r), L = d(g);
+  y(() => {
+    const t = L.current;
+    g !== t && (b.current.clear(), I.current++, g <= t && (p.current = 0), L.current = g);
+  }, [g]);
+  const R = C.count(r) > 0;
+  y(() => {
+    k.current || (k.current = !0, g === 0 && i && !f && n?.(!1));
+  }, []);
+  let S = 0;
+  const $ = C.map(r, (t) => {
+    if (W.isValidElement(t)) {
+      const j = S++;
+      return /* @__PURE__ */ e(
+        F,
+        {
+          index: j,
+          onIntersect: E,
+          resetKey: I.current,
+          rootMargin: m,
+          threshold: u,
+          children: t
+        },
+        t.key || j
+      );
+    }
+    return t;
+  });
+  return R ? h > 1 ? /* @__PURE__ */ l(_, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: `grid bg-bg1 ${v}`,
+        style: {
+          gridTemplateColumns: `repeat(${h}, 1fr)`,
+          gap: T(N),
+          ...x
+        },
+        children: $
+      }
+    ),
+    n ? /* @__PURE__ */ e(D, { loadMore: n, hasMore: i, threshold: 100 }) : null
+  ] }) : /* @__PURE__ */ l(_, { children: [
+    R && /* @__PURE__ */ e("div", { className: `bg-bg1 ${v}`, style: x, children: $ }),
+    n ? /* @__PURE__ */ e(D, { loadMore: n, hasMore: i, threshold: 100 }) : null
+  ] }) : f ? /* @__PURE__ */ l("div", { className: "flex flex-col gap-5 items-center justify-center mt-25 w-full", children: [
+    /* @__PURE__ */ e(z, { size: 32 }),
+    /* @__PURE__ */ l("div", { className: "text-gray-600", children: [
+      /* @__PURE__ */ e("span", { children: "加载中" }),
+      /* @__PURE__ */ e(B, {})
+    ] })
+  ] }) : /* @__PURE__ */ l("div", { className: "flex flex-col items-center justify-center flex-1 pt-25", children: [
+    c && /* @__PURE__ */ e(
+      V,
+      {
+        src: `/empty/${c}.svg`,
+        width: 145,
+        height: 145,
+        alt: "empty"
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "text-[14px] text-[#999] mt-3", children: a || "暂无内容" }),
+    o
+  ] });
+}
+q.Item = O;
+export {
+  q as List,
+  O as ListItem
+};

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

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+type LoadingSize = 'small' | 'medium' | 'large';
+interface LoadingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
+    /**
+     * 提示文本
+     * @default "加载中..."
+     */
+    label?: string;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 大小
+     * @default "medium"
+     */
+    size?: LoadingSize;
+    /**
+     * 是否显示文本
+     * @default true
+     */
+    showLabel?: boolean;
+    /**
+     * 自定义颜色
+     * @default ""
+     */
+    color?: string;
+}
+declare function Loading({ label, className, size, showLabel, color, ...rest }: LoadingProps): import("react/jsx-runtime").JSX.Element;
+export default Loading;

package/dist/components/base/loading.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { jsxs as a, jsx as e, Fragment as p } from "react/jsx-runtime";
+import x from "./box.mjs";
+import r from "./text.mjs";
+function b({
+  label: s = "加载中...",
+  className: n = "",
+  size: t = "medium",
+  showLabel: i = !0,
+  color: l = "",
+  ...o
+}) {
+  const m = {
+    small: "h-4 w-4",
+    medium: "h-5 w-5",
+    large: "h-8 w-8"
+  }, d = {
+    small: "text-sm",
+    medium: "text-base",
+    large: "text-lg"
+  }, c = `inline-block animate-spin rounded-full border-2 border-current border-r-transparent ${m[t]}`, u = `inline-flex items-center gap-2 ${l} ${d[t]} ${n}`.trim();
+  return /* @__PURE__ */ a(x, { className: u, role: "status", "aria-live": "polite", ...o, children: [
+    /* @__PURE__ */ e(r, { as: "span", className: c, "aria-hidden": "true" }),
+    i && /* @__PURE__ */ a(p, { children: [
+      /* @__PURE__ */ e(r, { className: "sr-only", children: s }),
+      /* @__PURE__ */ e(r, { "aria-hidden": "true", children: s })
+    ] })
+  ] });
+}
+export {
+  b as default
+};

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

@@ -0,0 +1,6 @@
+interface MaskProps {
+    visible: boolean;
+    onMaskClick: () => void;
+}
+export declare function Mask({ visible, onMaskClick }: MaskProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/base/mask.mjs

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+function r({ visible: n, onMaskClick: e }) {
+  return n ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: "fixed inset-0 z-40 bg-black/0",
+      onClick: e,
+      style: { pointerEvents: n ? "auto" : "none" }
+    }
+  ) : null;
+}
+export {
+  r as Mask
+};

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

@@ -0,0 +1,8 @@
+interface PopoverProps {
+    visible: boolean;
+    children: React.ReactNode;
+    content: React.ReactNode;
+    placement?: 'bottom-start' | 'bottom' | 'bottom-end';
+}
+export declare function Popover({ visible, children, content, placement, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/base/popover.mjs

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as f, Fragment as p, jsxs as a } from "react/jsx-runtime";
+import { useRef as g, useState as w, useEffect as $ } from "react";
+const o = 8, y = 8;
+function B({
+  visible: n,
+  children: l,
+  content: h,
+  placement: i = "bottom-start"
+}) {
+  const s = g(null), d = g(null), [c, u] = w({ top: 0, left: 0 }), [m, x] = w(0);
+  return $(() => {
+    if (n && d.current && s.current) {
+      const e = d.current.getBoundingClientRect(), r = s.current.getBoundingClientRect(), b = e.bottom + y;
+      let t = e.left;
+      i === "bottom-start" ? t = e.left : i === "bottom" ? t = e.left + (e.width - r.width) / 2 : i === "bottom-end" && (t = e.right - r.width), t + r.width > window.innerWidth && (t = window.innerWidth - r.width - 8), t < 8 && (t = 8);
+      const R = e.left + e.width / 2 - t - o / 2, A = o, L = r.width - o, v = Math.max(
+        A,
+        Math.min(L, R)
+      );
+      u({ top: b, left: t }), x(v);
+    }
+  }, [n, i]), n ? /* @__PURE__ */ a(p, { children: [
+    /* @__PURE__ */ f("div", { ref: d, style: { display: "inline-block" }, children: l }),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        ref: s,
+        className: "fixed z-50 bg-bg1 rounded-[8px] border border-line1 shadow-lg",
+        style: {
+          top: `${c.top}px`,
+          left: `${c.left}px`
+        },
+        children: [
+          /* @__PURE__ */ f(
+            "div",
+            {
+              className: "absolute -top-[8px]",
+              style: {
+                left: `${m}px`,
+                width: 0,
+                height: 0,
+                borderLeft: `${o}px solid transparent`,
+                borderRight: `${o}px solid transparent`,
+                borderBottom: `${o}px solid var(--color-bg1)`,
+                filter: "drop-shadow(0 -1px 0 var(--color-line1))"
+              }
+            }
+          ),
+          h
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ f(p, { children: l });
+}
+export {
+  B as Popover
+};

package/dist/components/base/providers-client.d.ts

@@ -0,0 +1,3 @@
+export declare function Providers({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/base/providers-client.mjs

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { QueryClient as i, QueryClientProvider as o } from "@tanstack/react-query";
+import { useState as n } from "react";
+function s({ children: e }) {
+  const [r] = n(() => new i());
+  return /* @__PURE__ */ t(o, { client: r, children: e });
+}
+export {
+  s as Providers
+};

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

@@ -0,0 +1,68 @@
+import { default as React } from 'react';
+type SkeletonType = 'text' | 'circular' | 'rectangular';
+type SkeletonAnimation = 'pulse' | 'wave' | false;
+interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
+    /**
+     * 骨架屏类型
+     * @default "text"
+     */
+    type?: SkeletonType;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 宽度（可以是数字、百分比或 Tailwind 类名）
+     */
+    width?: number | string;
+    /**
+     * 高度（可以是数字、百分比或 Tailwind 类名）
+     */
+    height?: number | string;
+    /**
+     * 动画效果
+     * @default "pulse"
+     */
+    animation?: SkeletonAnimation;
+    /**
+     * 是否显示为块级元素
+     * @default true
+     */
+    block?: boolean;
+}
+declare function Skeleton({ type, className, width, height, animation, block, ...rest }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+interface SkeletonTextProps extends Omit<SkeletonProps, 'type'> {
+    /**
+     * 文本行数
+     * @default 3
+     */
+    lines?: number;
+    /**
+     * 最后一行是否显示为较短宽度
+     * @default true
+     */
+    lastLineShort?: boolean;
+}
+declare function SkeletonText({ lines, lastLineShort, className, ...rest }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+interface SkeletonAvatarProps extends Omit<SkeletonProps, 'type' | 'width' | 'height'> {
+    /**
+     * 头像尺寸
+     * @default 40
+     */
+    size?: number;
+}
+declare function SkeletonAvatar({ size, className, ...rest }: SkeletonAvatarProps): import("react/jsx-runtime").JSX.Element;
+interface SkeletonButtonProps extends Omit<SkeletonProps, 'type'> {
+    /**
+     * 按钮尺寸
+     * @default "medium"
+     */
+    size?: 'small' | 'medium' | 'large';
+}
+declare function SkeletonButton({ size, className, ...rest }: SkeletonButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const SkeletonComponent: typeof Skeleton & {
+    Text: typeof SkeletonText;
+    Avatar: typeof SkeletonAvatar;
+    Button: typeof SkeletonButton;
+};
+export default SkeletonComponent;

package/dist/components/base/skeleton.mjs

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import p from "./box.mjs";
+function l({
+  type: e = "text",
+  className: o = "",
+  width: t,
+  height: n,
+  animation: a = "pulse",
+  block: r = !0,
+  ...i
+}) {
+  const u = {
+    text: "rounded-[8px]",
+    circular: "rounded-full",
+    rectangular: "rounded-[8px]"
+  }, f = (m) => m === "pulse" ? "animate-pulse" : m === "wave" ? "animate-[skeleton-wave_1.6s_ease-in-out_infinite]" : "", d = u[e], h = f(a), x = `${d} ${h} ${r ? "block" : "inline-block"} ${o}`.trim(), g = {
+    backgroundColor: "rgba(0,0,0,0.05)",
+    ...t && { width: typeof t == "number" ? `${t}px` : t },
+    ...n && { height: typeof n == "number" ? `${n}px` : n },
+    ...i.style
+  };
+  return /* @__PURE__ */ s(p, { className: x, style: g, ...i });
+}
+function k({
+  lines: e = 3,
+  lastLineShort: o = !0,
+  className: t = "",
+  ...n
+}) {
+  return /* @__PURE__ */ s(p, { className: `flex flex-col gap-2 ${t}`.trim(), children: Array.from({ length: e }).map((a, r) => {
+    const u = r === e - 1 && o ? "60%" : "100%";
+    return /* @__PURE__ */ s(l, { type: "text", width: u, height: 16, ...n }, r);
+  }) });
+}
+function y({ size: e = 40, className: o = "", ...t }) {
+  return /* @__PURE__ */ s(l, { type: "circular", width: e, height: e, className: o, ...t });
+}
+function b({
+  size: e = "medium",
+  className: o = "",
+  ...t
+}) {
+  const n = {
+    small: { width: 60, height: 28 },
+    medium: { width: 80, height: 36 },
+    large: { width: 100, height: 44 }
+  }, { width: a, height: r } = n[e];
+  return /* @__PURE__ */ s(
+    l,
+    {
+      type: "rectangular",
+      width: a,
+      height: r,
+      className: o,
+      ...t
+    }
+  );
+}
+const c = l;
+c.Text = k;
+c.Avatar = y;
+c.Button = b;
+export {
+  c as default
+};

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

@@ -0,0 +1,49 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface SwitchProps {
+    /**
+     * 指定当前是否打开
+     */
+    checked?: boolean;
+    /**
+     * 初始是否打开
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * 变化时的回调函数，当返回 Promise 时，会自动显示加载状态
+     */
+    onChange?: (val: boolean) => void | Promise<void>;
+    /**
+     * 禁用状态
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 加载状态
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * 选中时的内容
+     */
+    checkedText?: ReactNode;
+    /**
+     * 非选中时的内容
+     */
+    uncheckedText?: ReactNode;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties & {
+        '--checked-color'?: string;
+        '--height'?: string;
+        '--width'?: string;
+        '--border-width'?: string;
+    };
+    /**
+     * 自定义类名
+     */
+    className?: string;
+}
+export declare function Switch({ checked, defaultChecked, onChange, disabled, loading, checkedText, uncheckedText, style, className, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export default Switch;

package/dist/components/base/switch.mjs

@@ -0,0 +1,139 @@
+"use client";
+import { jsxs as C, jsx as s } from "react/jsx-runtime";
+import { clsx as d } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs";
+import { useState as v } from "react";
+const I = {};
+function D({
+  checked: i,
+  defaultChecked: k = !1,
+  onChange: h,
+  disabled: N = !1,
+  loading: S = !1,
+  checkedText: u,
+  uncheckedText: f,
+  style: o = I,
+  className: $ = ""
+}) {
+  const [W, m] = v(k), [j, p] = v(!1), t = i !== void 0 ? i : W, w = S || j, n = N || w, z = async () => {
+    if (n)
+      return;
+    const e = !t;
+    if (i === void 0 && m(e), h) {
+      const r = h(e);
+      if (r instanceof Promise) {
+        p(!0);
+        try {
+          await r;
+        } catch (H) {
+          throw i === void 0 && m(!e), H;
+        } finally {
+          p(!1);
+        }
+      }
+    }
+  }, x = o?.["--checked-color"] || "var(--color-theme5)", a = o?.["--height"] || "31px", l = o?.["--width"] || "51px", b = o?.["--border-width"] || "2px", c = (e) => {
+    if (typeof e == "number")
+      return e;
+    if (!e)
+      return 0;
+    const r = String(e).trim().match(/^(-?\d+(?:\.\d+)?)(px)?$/);
+    return r ? Number(r[1]) : 0;
+  }, g = c(a), L = c(l), M = c(b), y = Math.max(0, g - M * 2), X = Math.max(0, L - g), B = {
+    position: "absolute",
+    width: `${y}px`,
+    height: `${y}px`,
+    transform: t ? `translateX(${X}px)` : "translateX(0)"
+  };
+  return /* @__PURE__ */ C(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": t,
+      disabled: n,
+      onClick: z,
+      className: d(
+        "relative inline-flex items-center",
+        "rounded-full transition-all duration-200 ease-in-out",
+        "border-2 border-solid",
+        "overflow-hidden",
+        n ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+        !n && !t && "active:scale-95",
+        $
+      ),
+      style: {
+        height: a,
+        width: l,
+        borderWidth: b,
+        backgroundColor: t ? x : "#e5e5e5",
+        borderColor: t ? x : "#e5e5e5",
+        ...o
+      },
+      children: [
+        /* @__PURE__ */ s(
+          "span",
+          {
+            className: d(
+              "bg-white rounded-full flex items-center justify-center",
+              "transition-transform duration-200 ease-in-out",
+              "shadow-sm"
+            ),
+            style: B,
+            children: w && /* @__PURE__ */ C(
+              "svg",
+              {
+                className: "animate-spin text-gray-400",
+                width: "14",
+                height: "14",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                  /* @__PURE__ */ s(
+                    "circle",
+                    {
+                      className: "opacity-25",
+                      cx: "12",
+                      cy: "12",
+                      r: "10",
+                      stroke: "currentColor",
+                      strokeWidth: "4"
+                    }
+                  ),
+                  /* @__PURE__ */ s(
+                    "path",
+                    {
+                      className: "opacity-75",
+                      fill: "currentColor",
+                      d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        (t && u || !t && f) && /* @__PURE__ */ s(
+          "span",
+          {
+            className: d(
+              "absolute text-[12px] font-medium text-white",
+              t ? "left-2" : "right-2"
+            ),
+            style: {
+              maxWidth: `calc(${l} - ${a} - 8px)`,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: t ? u : f
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  D as Switch,
+  D as default
+};