@blocklet/pages-kit-inner-components 0.4.130 → 0.4.132

package/lib/es/chunks/home-qQe9H8C9.js

@@ -0,0 +1,527 @@
+import { jsx as e, jsxs as A } from "react/jsx-runtime";
+import { d as G, e as le, g as ce, u as ue, c as me } from "./state-DGyH1TW3.js";
+import { useLocaleContext as W } from "@arcblock/ux/lib/Locale/context";
+import q from "@arcblock/ux/lib/Result";
+import { useHeaderState as pe } from "@blocklet/pages-kit/builtin/page/header";
+import { useColorConvert as de } from "@blocklet/pages-kit/contexts/color";
+import { setPageDataSource as K } from "@blocklet/pages-kit/utils/data-source";
+import { generateParamCombinations as ge } from "@blocklet/pages-kit/utils/route";
+import fe from "@blocklet/ui-react/lib/Header";
+import { cx as Q } from "@emotion/css";
+import { Global as X, css as Y } from "@emotion/react";
+import J from "@emotion/styled";
+import { Box as O, CircularProgress as he, useTheme as be, Button as ye, Stack as ve, useMediaQuery as we } from "@mui/material";
+import { useReactive as Z, useScroll as Se } from "ahooks";
+import xe from "isomorphic-dompurify";
+import D from "lodash/cloneDeep";
+import Pe from "lodash/isEmpty";
+import ee from "lodash/isEqual";
+import { useEffect as F, useContext as ke, lazy as te, useMemo as M, useRef as oe, Suspense as Ce, useState as Ie } from "react";
+import { Helmet as Me } from "react-helmet";
+import { useSearchParams as ne, Routes as Re, Route as C, Navigate as je, ScrollRestoration as Ee } from "react-router-dom";
+import { useAsync as re } from "react-use";
+import { joinURL as I } from "ufo";
+import { S as Te, n as Be, P as $e, a as Fe, B as Oe, g as Le } from "./array-BfSgATE1.js";
+import { styled as se, useTheme as _e } from "@arcblock/ux/lib/Theme";
+import Ae from "@blocklet/ui-react/lib/Footer";
+import "webfontloader";
+import { createAuthServiceSessionContext as De } from "@arcblock/did-connect/lib/Session";
+const Ne = se(Ae, { shouldForwardProp: (t) => !!t })`
+  & > div > .MuiContainer-root {
+    max-width: unset;
+  }
+`;
+function He({ meta: t, ...o }) {
+  const s = _e();
+  return /* @__PURE__ */ e(Ne, { ...o, meta: t, theme: s || {} });
+}
+function Ue(t) {
+  return /* @__PURE__ */ e(O, { display: "flex", flex: 1, height: "100%", alignItems: "center", justifyContent: "center", ...t, children: /* @__PURE__ */ e(he, { size: 30 }) });
+}
+function Ve(t) {
+  return /* @__PURE__ */ e(ze, { ...t });
+}
+const ze = se(O)`
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 999999999999;
+  width: 80px;
+  font-size: 12px;
+  text-align: center;
+  opacity: 0.7;
+  transform: translateX(-23%) translateY(70%) rotate(-45deg);
+  pointer-events: none;
+`, Ge = `Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`;
+function We({
+  titleFontFamily: t,
+  descriptionFontFamily: o
+}) {
+  var n;
+  const s = be(), a = (n = s == null ? void 0 : s.typography) == null ? void 0 : n.fontFamily;
+  F(() => {
+  }, [t, o]);
+  const r = `${a}, ${Ge}`;
+  return /* @__PURE__ */ e(
+    X,
+    {
+      styles: Y`
+        #app {
+          font-family: ${r};
+
+          .page-kit-section__title {
+            font-family: ${r};
+          }
+
+          .page-kit-section__description {
+            font-family: ${r};
+          }
+        }
+      `
+    }
+  );
+}
+const { SessionProvider: Et, SessionContext: qe, SessionConsumer: Tt, withSession: Bt } = De();
+function U() {
+  return ke(qe);
+}
+function Ke(...t) {
+  var s;
+  const { session: o } = U();
+  return t.includes((s = o.user) == null ? void 0 : s.role);
+}
+function Qe(...t) {
+  var a;
+  const { session: o } = U(), s = Ke(...t);
+  return ((a = window.blocklet) == null ? void 0 : a.tenantMode) === "multiple" ? !!o.user : s;
+}
+function $t() {
+  const [t] = ne(), { session: o } = U(), s = Qe("owner", "admin", "pagesEditor", "member"), a = M(() => {
+    const n = t.get("mode");
+    return Te.includes(n) ? n : "production";
+  }, [t]), r = a === "production" ? a : o.user ? s ? a : "production" : null;
+  return r ? /* @__PURE__ */ e(Xe, { mode: r }) : null;
+}
+function Xe({ mode: t }) {
+  if (t !== "draft") {
+    const o = window.__PAGE_STATE__;
+    return o ? /* @__PURE__ */ e(H, { mode: t, state: o }) : /* @__PURE__ */ e(Je, { mode: t, children: ({ state: s }) => /* @__PURE__ */ e(H, { mode: t, state: s }) });
+  }
+  return /* @__PURE__ */ e(Ye, { children: ({ state: o }) => /* @__PURE__ */ e(H, { mode: t, state: o }) });
+}
+const Ye = te(() => import("./draft-data-PScFOAJJ.js"));
+function Je({
+  mode: t,
+  children: o
+}) {
+  const s = document.querySelector('meta[property="pages:version"]'), a = s == null ? void 0 : s.content, r = ue(), n = M(() => {
+    if (a === "{{pagesPublishedAt}}") {
+      const c = localStorage.getItem(me(r ?? ""));
+      return Number(c) ? Number(c) : (/* @__PURE__ */ new Date()).getTime();
+    }
+    return Number(a);
+  }, [a]), { loading: d, value: l } = re(() => Le({ mode: t, version: n }), [t, n]);
+  return d ? /* @__PURE__ */ e(Ue, {}) : l ? o({ state: l }) : null;
+}
+function H({ mode: t, state: o }) {
+  const { t: s, locale: a } = W(), [r] = ne(), n = r.get("hiddenBadge") === "true", d = r.get("showPublish") === "true", {
+    pageIds: l,
+    pages: c,
+    routeIds: g,
+    routes: p,
+    supportedLocales: u,
+    config: { defaultLocale: h },
+    resources: v
+  } = o, w = G(o), y = M(
+    () => u != null && u.some((m) => m.locale === a) ? a : void 0,
+    [a, u]
+  ), f = Object.values(c).find((m) => (m == null ? void 0 : m.slug) === "/") ? void 0 : Object.values(c)[0], L = M(
+    () => l.map((m) => {
+      const i = c[m];
+      return i && {
+        id: i.id,
+        path: I("/", y || "", i.slug, t !== "production" ? `?mode=${t}` : "")
+      };
+    }).filter(Be),
+    [l, c, y, t]
+  ), P = ([...m]) => (t !== "production" && d && m.unshift(
+    /* @__PURE__ */ e(Ce, { fallback: /* @__PURE__ */ e("div", {}), children: /* @__PURE__ */ e(Ze, { mode: "production", state: o }) })
+  ), m);
+  return /* @__PURE__ */ A($e, { value: { pages: L }, children: [
+    /* @__PURE__ */ A(Re, { children: [
+      f && /* @__PURE__ */ e(C, { index: !0, element: /* @__PURE__ */ e(je, { to: I("/", y || "", f.slug) }) }),
+      g == null ? void 0 : g.map((m) => {
+        var R, j, E, T;
+        const i = p == null ? void 0 : p[m];
+        if (!i || !i.displayTemplateId) return null;
+        const k = c[i.displayTemplateId];
+        if (!k) return null;
+        if (i.params && i.params.length > 0) {
+          const S = ge({
+            basePath: i.path,
+            params: i.params,
+            routeId: i.id,
+            paramsOptions: i.paramsOptions,
+            currentIndex: 0,
+            currentParams: [],
+            currentOptionIds: [],
+            result: []
+          });
+          return S == null ? void 0 : S.map((b) => {
+            var _, B, $, V;
+            const x = b.paramOptionIds.join("-");
+            return /* @__PURE__ */ e(
+              C,
+              {
+                path: I(":projectIdOrSlug?", b.path),
+                element: /* @__PURE__ */ e(
+                  z,
+                  {
+                    mode: t,
+                    components: w,
+                    page: k,
+                    locale: y,
+                    defaultLocale: h,
+                    headerAddons: P,
+                    state: o,
+                    pageData: (V = ($ = (B = (_ = i.dataSource) == null ? void 0 : _.pathDataMappings) == null ? void 0 : B[x]) == null ? void 0 : $.dataCache) == null ? void 0 : V[y || h || "en"]
+                  }
+                )
+              },
+              x
+            );
+          });
+        }
+        return /* @__PURE__ */ e(
+          C,
+          {
+            path: I(":projectIdOrSlug?", i.path),
+            element: /* @__PURE__ */ e(
+              z,
+              {
+                mode: t,
+                components: w,
+                page: k,
+                locale: y,
+                defaultLocale: h,
+                headerAddons: P,
+                state: o,
+                pageData: (T = (E = (j = (R = i.dataSource) == null ? void 0 : R.pathDataMappings) == null ? void 0 : j[i.id]) == null ? void 0 : E.dataCache) == null ? void 0 : T[y || h || "en"]
+              }
+            )
+          },
+          i.id
+        );
+      }),
+      l.map((m) => {
+        const i = c[m];
+        return i ? /* @__PURE__ */ e(
+          C,
+          {
+            path: I(":projectIdOrSlug?", i.slug),
+            element: /* @__PURE__ */ e(
+              N,
+              {
+                mode: t,
+                components: w,
+                page: i,
+                locale: y,
+                defaultLocale: h,
+                headerAddons: P
+              }
+            )
+          },
+          i.id
+        ) : null;
+      }),
+      v.pages && Object.values(v.pages).map(({ blockletId: m, page: i }) => /* @__PURE__ */ e(
+        C,
+        {
+          path: I("/", `@${m}`, i.slug),
+          element: /* @__PURE__ */ e(
+            N,
+            {
+              mode: t,
+              components: w,
+              page: i,
+              locale: y,
+              defaultLocale: h,
+              headerAddons: P
+            }
+          )
+        },
+        i.id
+      )),
+      /* @__PURE__ */ e(
+        C,
+        {
+          path: "*",
+          element: /* @__PURE__ */ e(O, { width: "100vw", height: "100vh", display: "flex", justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ e(q, { status: 404, extra: /* @__PURE__ */ e(ie, { href: "/", children: s("common.back") }) }) })
+        }
+      )
+    ] }),
+    t !== "production" && !n && /* @__PURE__ */ e(Ve, { sx: { bgcolor: "info.light" }, children: t }),
+    /* @__PURE__ */ e(We, {})
+  ] });
+}
+function z({
+  mode: t,
+  pageData: o,
+  components: s,
+  page: a,
+  locale: r,
+  defaultLocale: n,
+  headerAddons: d,
+  state: l
+}) {
+  const c = Z({
+    page: null
+  });
+  F(() => {
+    const p = a || null;
+    p ? c.page = D(p) : c.page = null;
+  }, [a, c]);
+  const g = oe();
+  return F(() => {
+    ee(o, g.current) || o && c.page && (K(c.page, l, r, o), g.current = D(o));
+  }, [c.page, o, r, l]), c.page ? /* @__PURE__ */ e(
+    N,
+    {
+      mode: t,
+      components: s,
+      page: c.page,
+      locale: r,
+      defaultLocale: n,
+      headerAddons: d
+    }
+  ) : null;
+}
+function Ft({
+  mode: t,
+  state: o,
+  path: s,
+  pageData: a
+}) {
+  const { t: r, locale: n } = W(), {
+    pages: d,
+    supportedLocales: l,
+    config: { defaultLocale: c },
+    resources: g
+  } = o, p = Object.values(d).find((f) => (f == null ? void 0 : f.slug) === s), u = Object.values(g.pages || {}).find((f) => f.page.slug === s), h = M(
+    () => l != null && l.some((f) => f.locale === n) ? n : void 0,
+    [n, l]
+  ), v = Z({
+    page: null
+  });
+  F(() => {
+    const f = p || (u == null ? void 0 : u.page) || null;
+    f ? v.page = D(f) : v.page = null;
+  }, [p, u]);
+  const w = oe();
+  if (F(() => {
+    ee(a, w.current) || a && v.page && (K(v.page, o, h, a), w.current = D(a));
+  }, [{}]), !p && !(u != null && u.page))
+    return /* @__PURE__ */ e(O, { width: "100vw", height: "100vh", display: "flex", justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ e(q, { style: { background: "inherit" }, status: 404, extra: /* @__PURE__ */ e(ie, { href: "/", children: r("common.back") }) }) });
+  const y = G(o);
+  return v.page ? /* @__PURE__ */ e(
+    N,
+    {
+      mode: t,
+      components: y,
+      page: v.page,
+      locale: h,
+      defaultLocale: c
+    }
+  ) : null;
+}
+function N({
+  mode: t,
+  components: o,
+  page: s,
+  locale: a,
+  defaultLocale: r,
+  headerAddons: n
+}) {
+  var L, P, m, i, k, R, j, E, T;
+  const d = de(), l = ((L = s.locales) == null ? void 0 : L[a]) ?? ((P = s.locales) == null ? void 0 : P[r]) ?? {}, c = l.title || ((m = window.blocklet) == null ? void 0 : m.appName), g = l.description || ((i = window.blocklet) == null ? void 0 : i.appDescription), p = le(ce(l.image), 540), { logo: u, brand: h, description: v, ...w } = pe(), y = M(
+    () => (S) => {
+      var x;
+      let b = (n == null ? void 0 : n(S)) ?? S;
+      return b = ((x = w.addons) == null ? void 0 : x.call(w, b)) ?? b, b;
+    },
+    [w.addons, n]
+  ), f = (k = l.header) != null && k.translucent ? tt : ae;
+  return /* @__PURE__ */ A(Fe, { page: s, defaultLocale: r, currentLocale: a, children: [
+    /* @__PURE__ */ e(
+      X,
+      {
+        styles: Y`
+          body {
+            background-color: ${d(
+          !l.backgroundColor || l.backgroundColor === "transparent" ? "background.default" : l.backgroundColor
+        )} !important;
+          }
+        `
+      }
+    ),
+    /* @__PURE__ */ e(
+      f,
+      {
+        hideNavMenu: !!((R = l.header) != null && R.hideNavMenus),
+        translucentTextColor: (j = l.header) == null ? void 0 : j.translucentTextColor,
+        ...u ? { logo: u } : {},
+        ...h ? { brand: h } : {},
+        ...v ? { description: v } : {},
+        className: Q(((E = l.header) == null ? void 0 : E.sticky) && "sticky", "page-header"),
+        maxWidth: !1,
+        addons: y
+      }
+    ),
+    /* @__PURE__ */ e(Ee, {}),
+    /* @__PURE__ */ A(Me, { children: [
+      /* @__PURE__ */ e("title", { children: c }),
+      /* @__PURE__ */ e("meta", { name: "og:title", content: c }),
+      /* @__PURE__ */ e("meta", { name: "og:description", content: g }),
+      /* @__PURE__ */ e("meta", { name: "og:image", content: p }),
+      /* @__PURE__ */ e("meta", { name: "twitter:image:src", content: p }),
+      /* @__PURE__ */ e("meta", { name: "twitter:image", content: p }),
+      /* @__PURE__ */ e("meta", { property: "twitter:description", content: g }),
+      /* @__PURE__ */ e("meta", { property: "twitter:title", content: c }),
+      /* @__PURE__ */ e("meta", { name: "description", content: g })
+    ] }),
+    /* @__PURE__ */ e(
+      ve,
+      {
+        flexGrow: 1,
+        className: "PageView-root",
+        sx: {
+          // 第一个 .BlockBase-root 的 pt 为 0
+          "& .BlockBase-root:first-child": {
+            pt: "0 !important"
+          }
+        },
+        children: s.sectionIds.map((S) => {
+          var B, $;
+          const b = s.sections[S];
+          if (!b || b.visibility === "hidden") return null;
+          const x = (B = b.locales) == null ? void 0 : B[a], _ = (($ = b.locales) == null ? void 0 : $[r]) ?? {};
+          return /* @__PURE__ */ e(
+            Oe,
+            {
+              id: S,
+              type: b.component,
+              mode: t,
+              section: b,
+              config: {
+                ...Pe(x) ? _ : x,
+                locale: a,
+                dev: t === "draft" ? {
+                  mode: t,
+                  components: o,
+                  defaultLocale: r
+                } : { mode: t }
+              }
+            },
+            S
+          );
+        })
+      }
+    ),
+    !((T = l.footer) != null && T.hidden) && /* @__PURE__ */ e(He, {})
+  ] });
+}
+const Ze = te(() => import("./publish-button-DMQRXAVS.js")), ae = J(fe)`
+  &.sticky {
+    position: sticky;
+    top: 0;
+  }
+`;
+function et({ logo: t }) {
+  const [o, s] = Ie(), a = we((n) => n.breakpoints.down("sm")), { value: r } = re(() => {
+    var l, c;
+    const n = new URL(
+      a ? ((l = window == null ? void 0 : window.blocklet) == null ? void 0 : l.appLogo) || "/.well-known/service/blocklet/logo" : ((c = window == null ? void 0 : window.blocklet) == null ? void 0 : c.appLogoRect) || "/.well-known/service/blocklet/logo-rect",
+      window.location.origin
+    );
+    n.searchParams.delete("imageFilter"), n.searchParams.delete("f");
+    const d = n.toString();
+    return new Promise((g) => {
+      fetch(d).then((p) => {
+        const u = p.headers.get("content-type");
+        u != null && u.includes("svg") && p.text().then((h) => {
+          s(h), g(null);
+        }), g(p.url);
+      });
+    });
+  }, [a]);
+  if (t)
+    return t;
+  if (o)
+    return /* @__PURE__ */ e(O, { sx: { filter: "initial !important" }, dangerouslySetInnerHTML: { __html: xe.sanitize(o) } });
+  if (r) {
+    const n = new URL(r);
+    n.searchParams.set("imageFilter", "convert"), n.searchParams.set("f", "png"), n.searchParams.set("h", "80");
+    const d = n.toString();
+    return /* @__PURE__ */ e("img", { src: d, alt: "logo" });
+  }
+  return null;
+}
+function tt({
+  logo: t,
+  translucentTextColor: o,
+  ...s
+}) {
+  const { top: a = 0 } = Se(() => document.getElementById("app")) || {};
+  let r = Math.min(a / 800, 1), n = "";
+  if (r > 0.1) {
+    r = Math.max(r, 0.6);
+    const d = Math.round(255 * Math.min(1 - r, 0.2));
+    n = `rgb(${d}, ${d}, ${d})`;
+  } else
+    n = o || "#EEEEEE";
+  return /* @__PURE__ */ e(
+    ae,
+    {
+      logo: /* @__PURE__ */ e(et, { logo: t }),
+      ...s,
+      className: Q(r <= 0.7 && "reverse-color"),
+      style: {
+        backgroundColor: `rgba(255,255,255,${r})`,
+        // @ts-ignore
+        "--logo-invert": r <= 0.7 ? 1 - r / 6 : 1 - r
+      },
+      sx: {
+        backdropFilter: r >= 0.6 ? "blur(10px)" : "blur(0px)",
+        transition: "all 0.3s ease",
+        position: "fixed !important",
+        left: 0,
+        top: 0,
+        right: 0,
+        bgcolor: "transparent",
+        "&.reverse-color": {
+          ".navmenu-root>.navmenu-sub>span,\n          .navmenu-root>.navmenu-item,\n          .header-addons>button,\n          .header-addons>a,\n          .header-addons>div>button": {
+            color: `${n} !important`
+          }
+        },
+        ".header-logo > div": {
+          filter: "invert(var(--logo-invert))"
+        },
+        ".header-logo": {
+          color: n
+        }
+      }
+    }
+  );
+}
+const ie = J(ye)``;
+export {
+  $t as H,
+  Ue as L,
+  H as P,
+  tt as T,
+  Xe as a,
+  z as b,
+  Ft as c,
+  N as d
+};