@blocklet/pages-kit-inner-components 0.4.105 → 0.4.106

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

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

package/lib/es/chunks/{publish-button-OwaTBakj.js → publish-button-DiuEASJd.js}

@@ -9,7 +9,7 @@ import { produce as oe } from "immer";
 import N from "lodash/difference";
 import { useState as D, useMemo as j, useCallback as L, forwardRef as se, useImperativeHandle as le, useEffect as ce } from "react";
 import { useAsync as ae } from "react-use";
-import { L as de } from "./home-BBfstt15.js";
+import { L as de } from "./home-BkhNJi9S.js";
 import { p as ue, g as me } from "./array-C85JziT_.js";
 function ge(r) {
   const [a, y] = D(!1);

package/lib/es/home.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "./chunks/state-DsXKwImw.js";
-import { a as y, P as B, c as R, b as j, T as k, H as q } from "./chunks/home-BBfstt15.js";
+import { a as y, P as B, c as R, b as j, T as k, H as q } from "./chunks/home-BkhNJi9S.js";
 import "@arcblock/ux/lib/Locale/context";
 import "@arcblock/ux/lib/Result";
 import "@blocklet/pages-kit/builtin/page/header";