@blocklet/pages-kit-inner-components 0.6.38 → 0.6.39

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

@@ -0,0 +1,652 @@
+import { jsx as e, jsxs as T } from "react/jsx-runtime";
+import { u as z, c as U, d as se, e as ie, f as le, b as ce } from "./state-DRjnlQY_.js";
+import { useLocaleContext as W } from "@arcblock/ux/lib/Locale/context";
+import V from "@arcblock/ux/lib/Result";
+import { styled as M, useTheme as ue } from "@arcblock/ux/lib/Theme";
+import { useHeaderState as pe } from "@blocklet/pages-kit/builtin/page/header";
+import { useColorConvert as de } from "@blocklet/pages-kit/contexts/color";
+import { setPageDataSource as G } from "@blocklet/pages-kit/utils/data-source";
+import { generateParamCombinations as me } from "@blocklet/pages-kit/utils/route";
+import ge from "@blocklet/ui-react/lib/Header";
+import { cx as he } from "@emotion/css";
+import { Global as q, css as K } from "@emotion/react";
+import { Box as k, CircularProgress as fe, useTheme as Y, Button as be, Stack as ye, alpha as $ } from "@mui/material";
+import { useReactive as J, useScroll as xe } from "ahooks";
+import ve from "isomorphic-dompurify";
+import R from "lodash/cloneDeep";
+import Pe from "lodash/isEmpty";
+import Q from "lodash/isEqual";
+import { useRef as A, useEffect as C, lazy as X, useMemo as x, Suspense as ke, useState as we } from "react";
+import { Helmet as Se } from "react-helmet";
+import { useSearchParams as Z, Routes as Ce, Route as S, Navigate as Ie, ScrollRestoration as Te } from "react-router-dom";
+import { useAsync as ee } from "react-use";
+import { joinURL as P } from "ufo";
+import { u as Re, S as je, i as D, P as Me, a as Oe, R as Ee, B as Le, b as te, g as Ae } from "./index-Dm9c1YeI.js";
+import Be from "@blocklet/ui-react/lib/Footer";
+import "webfontloader";
+import { u as _e, a as Fe } from "./session-C72Dq8zg.js";
+const $e = M(k)`
+  display: contents;
+  & > div > div > .MuiContainer-root {
+    max-width: unset;
+  }
+`;
+function De({ meta: t, ...o }) {
+  const s = ue(), { getPageMetaStyle: n } = Re(), r = n();
+  return /* @__PURE__ */ e(
+    $e,
+    {
+      sx: {
+        ".blocklet__footer .MuiContainer-root": {
+          ...r.maxWidth && {
+            maxWidth: r.maxWidth
+          },
+          ...r.px && {
+            px: r.px
+          }
+        }
+      },
+      children: /* @__PURE__ */ e(
+        Be,
+        {
+          ...o,
+          meta: t,
+          theme: s || {},
+          sx: {
+            // ...getPageMetaStyle(),
+          }
+        }
+      )
+    }
+  );
+}
+let He = null;
+function Ne(t) {
+  const o = A(null), { type: s } = t;
+  return C(() => {
+    s === "app" && o.current;
+  }, [s]), /* @__PURE__ */ e(
+    k,
+    {
+      ...t,
+      ref: o,
+      sx: [
+        {
+          display: "flex",
+          flex: 1,
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          ".spinner-wrapper": {
+            // 取消出现动画，减少页面撕裂感，但是有弊端，会让每次都出现一下加载 logo
+            // animation: 'unset',
+            // opacity: 1,
+          }
+        },
+        ...Array.isArray(t.sx) ? t.sx : [t.sx]
+      ],
+      children: s !== "app" && /* @__PURE__ */ e(fe, { size: 30 })
+    }
+  );
+}
+function ze(t) {
+  return /* @__PURE__ */ e(Ue, { ...t });
+}
+const Ue = M(k)`
+  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;
+`, We = `Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`;
+function Ve({
+  titleFontFamily: t,
+  descriptionFontFamily: o
+}) {
+  const n = Y()?.typography?.fontFamily;
+  C(() => {
+  }, [t, o]);
+  const r = `${n}, ${We}`;
+  return /* @__PURE__ */ e(
+    q,
+    {
+      styles: K`
+        #app {
+          font-family: ${r};
+
+          .page-kit-section__title {
+            font-family: ${r};
+          }
+
+          .page-kit-section__description {
+            font-family: ${r};
+          }
+        }
+      `
+    }
+  );
+}
+function H(t) {
+  return t != null;
+}
+function Tt() {
+  const [t] = Z(), { session: o } = _e(), s = Fe("owner", "admin", "pagesEditor", "member"), n = x(() => {
+    const a = t.get("mode");
+    return je.includes(a) ? a : "production";
+  }, [t]), r = n === "production" ? n : o.user ? s ? n : "production" : null;
+  return r ? /* @__PURE__ */ e(Ge, { mode: r }) : null;
+}
+function Ge({ mode: t }) {
+  if (t !== "draft") {
+    const o = window.__PAGE_STATE__;
+    return o ? /* @__PURE__ */ e(L, { mode: t, state: o }) : /* @__PURE__ */ e(Ye, { mode: t, children: ({ state: s }) => /* @__PURE__ */ e(L, { mode: t, state: s }) });
+  }
+  return /* @__PURE__ */ e(Ke, { children: ({ state: o }) => /* @__PURE__ */ e(L, { mode: t, state: o }) });
+}
+const qe = X(() => import("./publish-button-Tf6i5WAs.js")), Ke = X(() => import("./draft-data-mNAXJMtq.js"));
+function Ye({
+  mode: t,
+  children: o
+}) {
+  const n = document.querySelector('meta[property="pages:version"]')?.content, r = z(), a = x(() => {
+    if (n === "{{pagesPublishedAt}}") {
+      const u = localStorage.getItem(ce(r ?? ""));
+      return Number(u) ? Number(u) : (/* @__PURE__ */ new Date()).getTime();
+    }
+    return Number(n);
+  }, [n]), { loading: p, value: c } = ee(() => Ae({ mode: t, version: a }), [t, a]);
+  return p ? /* @__PURE__ */ e(Ne, {}) : c ? o({ state: c }) : null;
+}
+function L({ mode: t, state: o }) {
+  const { t: s, locale: n } = W(), [r] = Z(), a = z(), p = se(), c = r.get("hiddenBadge") === "true", u = r.get("showPublish") === "true", {
+    pageIds: d,
+    pages: l,
+    routeIds: f,
+    routes: m,
+    supportedLocales: g,
+    config: { defaultLocale: y },
+    resources: w
+  } = o, b = U(o), v = x(
+    () => g?.some((h) => h.locale === n) ? n : void 0,
+    [n, g]
+  ), B = Object.values(m || {}).find((h) => h?.path === "/") || Object.values(l).find((h) => h?.slug === "/") ? void 0 : Object.values(l)[0], ae = x(() => t === "production" ? d?.map((h) => {
+    const i = l[h];
+    return i && {
+      id: i.id,
+      path: P("/", p || a || "", i.slug),
+      // 是否通过 Link 跳转，如果有 sectionIds 和 sections ，那么认为是内部页面，则通过 Link 跳转
+      isLinkToPage: D(i)
+    };
+  }).filter(H) : f?.map((h) => {
+    const i = m[h];
+    return i ? {
+      id: i.id,
+      path: P("/", p || a || "", i.path, `?mode=${t}&showPublish=true`)
+    } : null;
+  }).filter(H), [d, l, t, m, f, a, p]), I = ([...h]) => (t !== "production" && u && h.unshift(
+    /* @__PURE__ */ e(ke, { fallback: /* @__PURE__ */ e("div", {}), children: /* @__PURE__ */ e(qe, { ref: { current: null }, mode: "production", state: o }) })
+  ), h);
+  return /* @__PURE__ */ T(Me, { value: { pages: ae }, children: [
+    /* @__PURE__ */ T(Ce, { children: [
+      B && /* @__PURE__ */ e(S, { index: !0, element: /* @__PURE__ */ e(Ie, { to: P("/", v || "", B.slug) }) }),
+      f?.map((h) => {
+        const i = m?.[h];
+        if (!i || !i.displayTemplateId) return null;
+        const O = l[i.displayTemplateId];
+        if (!O) return null;
+        let E = [];
+        return i.params && i.params.length > 0 && (E = me({
+          basePath: i.path,
+          params: i.params,
+          routeId: i.id,
+          paramsOptions: i.paramsOptions,
+          currentIndex: 0,
+          currentParams: [],
+          currentOptionIds: [],
+          result: []
+        })?.map((_) => {
+          const F = _.paramOptionIds.join("-");
+          return /* @__PURE__ */ e(
+            S,
+            {
+              path: P(":projectIdOrSlug?", _.path),
+              element: /* @__PURE__ */ e(
+                N,
+                {
+                  mode: t,
+                  components: b,
+                  page: O,
+                  locale: v,
+                  defaultLocale: y,
+                  headerAddons: I,
+                  state: o,
+                  pageData: i.dataSource?.pathDataMappings?.[F]?.dataCache?.[v || y || "en"]
+                }
+              )
+            },
+            F
+          );
+        })), E.push(
+          /* @__PURE__ */ e(
+            S,
+            {
+              path: P(":projectIdOrSlug?", i.path),
+              element: /* @__PURE__ */ e(
+                N,
+                {
+                  mode: t,
+                  components: b,
+                  page: O,
+                  locale: v,
+                  defaultLocale: y,
+                  headerAddons: I,
+                  state: o,
+                  pageData: i.dataSource?.pathDataMappings?.[i.id]?.dataCache?.[v || y || "en"]
+                }
+              )
+            },
+            i.id
+          )
+        ), E;
+      }),
+      d?.map((h) => {
+        const i = l[h];
+        return !i || !D(i) ? null : /* @__PURE__ */ e(
+          S,
+          {
+            path: P(":projectIdOrSlug?", i.slug),
+            element: /* @__PURE__ */ e(
+              j,
+              {
+                mode: t,
+                components: b,
+                page: i,
+                locale: v,
+                defaultLocale: y,
+                headerAddons: I
+              }
+            )
+          },
+          i.id
+        );
+      }),
+      w?.pages && Object.values(w?.pages)?.map(({ blockletId: h, page: i }) => /* @__PURE__ */ e(
+        S,
+        {
+          path: P("/", `@${h}`, i.slug),
+          element: /* @__PURE__ */ e(
+            j,
+            {
+              mode: t,
+              components: b,
+              page: i,
+              locale: v,
+              defaultLocale: y,
+              headerAddons: I
+            }
+          )
+        },
+        i.id
+      )),
+      /* @__PURE__ */ e(
+        S,
+        {
+          path: "*",
+          element: /* @__PURE__ */ e(
+            k,
+            {
+              sx: {
+                width: "100vw",
+                height: "100vh",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ e(
+                V,
+                {
+                  status: 404,
+                  extra: /* @__PURE__ */ e(re, { href: "/", children: s("common.back") }),
+                  sx: {
+                    bgcolor: "transparent",
+                    width: "100%",
+                    height: "100%"
+                  }
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    t !== "production" && !c && /* @__PURE__ */ e(ze, { sx: { bgcolor: "info.light" }, children: t }),
+    /* @__PURE__ */ e(Ve, {})
+  ] });
+}
+function N({
+  mode: t,
+  pageData: o,
+  components: s,
+  page: n,
+  locale: r,
+  defaultLocale: a,
+  headerAddons: p,
+  state: c
+}) {
+  const u = J({
+    page: null
+  });
+  C(() => {
+    const l = n || null;
+    l ? u.page = R(l) : u.page = null;
+  }, [n, JSON.stringify(n), u]);
+  const d = A(void 0);
+  return C(() => {
+    Q(o, d.current) || o && u.page && (G(u.page, c, r, o), d.current = R(o));
+  }, [u.page, o, r, c]), u.page ? /* @__PURE__ */ e(
+    j,
+    {
+      mode: t,
+      components: s,
+      page: u.page,
+      locale: r,
+      defaultLocale: a,
+      headerAddons: p
+    }
+  ) : null;
+}
+function Rt({
+  mode: t,
+  state: o,
+  path: s,
+  pageData: n
+}) {
+  const { t: r, locale: a } = W(), {
+    pages: p,
+    supportedLocales: c,
+    config: { defaultLocale: u },
+    resources: d
+  } = o, l = Object.values(p).find((b) => b?.slug === s), f = Object.values(d?.pages || {}).find((b) => b.page.slug === s), m = x(
+    () => c?.some((b) => b.locale === a) ? a : void 0,
+    [a, c]
+  ), g = J({
+    page: null
+  });
+  C(() => {
+    const b = l || f?.page || null;
+    b ? g.page = R(b) : g.page = null;
+  }, [l, f]);
+  const y = A(void 0);
+  if (C(() => {
+    Q(n, y.current) || n && g.page && (G(g.page, o, m, n), y.current = R(n));
+  }, [{}]), !l && !f?.page)
+    return /* @__PURE__ */ e(
+      k,
+      {
+        sx: {
+          width: "100vw",
+          height: "100vh",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ e(V, { style: { background: "inherit" }, status: 404, extra: /* @__PURE__ */ e(re, { href: "/", children: r("common.back") }) })
+      }
+    );
+  const w = U(o);
+  return g.page ? /* @__PURE__ */ e(
+    j,
+    {
+      mode: t,
+      components: w,
+      page: g.page,
+      locale: m,
+      defaultLocale: u
+    }
+  ) : null;
+}
+function j({
+  mode: t,
+  components: o,
+  page: s,
+  locale: n,
+  defaultLocale: r,
+  headerAddons: a
+}) {
+  const p = de(), c = s.locales?.[n] ?? s.locales?.[r] ?? {}, u = c.title || window.blocklet?.appName, d = c.description || window.blocklet?.appDescription, l = ie(le(c.image), 540);
+  return /* @__PURE__ */ T(Oe, { page: s, defaultLocale: r, currentLocale: n, children: [
+    /* @__PURE__ */ e(
+      q,
+      {
+        styles: K`
+          body {
+            background-color: ${p(
+          !c.backgroundColor || c.backgroundColor === "transparent" ? "background.default" : c.backgroundColor
+        )} !important;
+          }
+        `
+      }
+    ),
+    /* @__PURE__ */ e(Je, { meta: c, headerAddons: a }),
+    /* @__PURE__ */ e(Te, {}),
+    /* @__PURE__ */ T(Se, { children: [
+      /* @__PURE__ */ e("title", { children: u }),
+      /* @__PURE__ */ e("meta", { name: "og:title", content: u }),
+      /* @__PURE__ */ e("meta", { name: "og:description", content: d }),
+      /* @__PURE__ */ e("meta", { name: "og:image", content: l }),
+      /* @__PURE__ */ e("meta", { name: "twitter:image:src", content: l }),
+      /* @__PURE__ */ e("meta", { name: "twitter:image", content: l }),
+      /* @__PURE__ */ e("meta", { property: "twitter:description", content: d }),
+      /* @__PURE__ */ e("meta", { property: "twitter:title", content: u }),
+      /* @__PURE__ */ e("meta", { name: "description", content: d })
+    ] }),
+    /* @__PURE__ */ e(
+      ye,
+      {
+        className: "PageView-root",
+        sx: {
+          flexGrow: 1,
+          // 第一个 .BlockBase-root 的 pt 为 0
+          "& .BlockBase-root:first-child": {
+            pt: "0 !important"
+          }
+        },
+        children: /* @__PURE__ */ e(Ee, { children: s?.sectionIds?.map((f, m) => {
+          const g = s.sections[f];
+          if (!g || g.visibility === "hidden") return null;
+          const y = s.dataSource?.[f]?.[n], w = s.dataSource?.[f]?.[r] ?? {};
+          return /* @__PURE__ */ e(k, { sx: { position: "relative" }, children: /* @__PURE__ */ e(
+            Le,
+            {
+              id: f,
+              type: g.component,
+              mode: t,
+              section: g,
+              config: {
+                ...Pe(y) ? w : y,
+                locale: n,
+                dev: t === "draft" ? {
+                  mode: t,
+                  components: o,
+                  defaultLocale: r
+                } : {
+                  mode: t,
+                  defaultLocale: r
+                  // 用于 fallback 的 locale
+                }
+              },
+              page: s,
+              renderIndex: m
+            },
+            f
+          ) }, f);
+        }) })
+      }
+    ),
+    !c.footer?.hidden && /* @__PURE__ */ e(De, {})
+  ] });
+}
+const oe = M(ge)`
+  &.sticky {
+    position: sticky;
+    top: 0;
+  }
+`;
+function Je({ meta: t, headerAddons: o }) {
+  const { logo: s, brand: n, description: r, ...a } = pe(), p = te(), c = x(
+    () => (d) => {
+      let l = o?.(d) ?? d;
+      return l = a.addons?.(l) ?? l, l;
+    },
+    [a.addons, o]
+  ), u = x(
+    () => t.header?.translucent ? Qe : oe,
+    [t.header?.translucent]
+  );
+  return /* @__PURE__ */ e(
+    u,
+    {
+      hideNavMenu: !!t.header?.hideNavMenus,
+      translucentTextColor: t.header?.translucentTextColor,
+      ...s ? { logo: /* @__PURE__ */ e(ne, { logo: s }) } : {},
+      ...n ? { brand: n } : {},
+      ...r ? { description: r } : {},
+      className: he(t.header?.sticky && "sticky", "page-header"),
+      maxWidth: !1,
+      addons: c,
+      sx: {
+        ".header-logo": {
+          display: p ? "none !important" : "inline-flex",
+          alignItems: "center"
+        },
+        ".header-brand-wrapper": {
+          display: p ? "none !important" : "flex"
+        }
+      }
+    }
+  );
+}
+function ne({ logo: t }) {
+  const [o, s] = we(), n = te(), { value: r } = ee(() => {
+    const a = new URL(
+      n ? window?.blocklet?.appLogo || "/.well-known/service/blocklet/logo" : window?.blocklet?.appLogoRect || "/.well-known/service/blocklet/logo-rect",
+      window.location.origin
+    );
+    a.searchParams.delete("imageFilter"), a.searchParams.delete("f");
+    const p = a.toString();
+    return new Promise((c) => {
+      fetch(p).then((u) => {
+        u.headers.get("content-type")?.includes("svg") && u.text().then((l) => {
+          s(l), c(null);
+        }), c(u.url);
+      });
+    });
+  }, [n]);
+  if (n)
+    return null;
+  if (t)
+    return t;
+  if (o)
+    return /* @__PURE__ */ e(k, { sx: { filter: "initial !important" }, dangerouslySetInnerHTML: { __html: ve.sanitize(o) } });
+  if (r) {
+    const a = new URL(r);
+    a.searchParams.set("imageFilter", "convert"), a.searchParams.set("f", "png"), a.searchParams.set("h", "80");
+    const p = a.toString();
+    return /* @__PURE__ */ e("img", { src: p, alt: "logo" });
+  }
+  return null;
+}
+function Qe({
+  logo: t,
+  translucentTextColor: o,
+  ...s
+}) {
+  const r = xe(document.getElementById("app"), (m) => m.top < 1200), a = Y(), p = a.palette.mode === "dark", c = Math.min(r?.top ?? 0, 800), u = x(() => {
+    let m = Math.min(c / 800, 1), g = "";
+    return m > 0.1 ? (m = Math.max(m, 0.6), g = $(a.palette.text.primary, m)) : g = o || "#EEEEEE", {
+      backgroundOpacity: m,
+      textColor: g,
+      isReversed: m < 0.7
+    };
+  }, [c, 800, a.palette.text.primary, o]), { backgroundOpacity: d, textColor: l, isReversed: f } = u;
+  return /* @__PURE__ */ e(
+    oe,
+    {
+      logo: /* @__PURE__ */ e(ne, { logo: t }),
+      ...s,
+      sx: {
+        // 基础布局和定位
+        position: "fixed !important",
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: a.zIndex.appBar,
+        // 确保在顶层
+        backgroundColor: "transparent !important",
+        // 主元素始终透明
+        // 使用伪元素作为背景层
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: -1,
+          // 置于内容下方
+          // 背景样式（颜色和模糊）是固定的
+          backgroundColor: $(a.palette.background.default, d),
+          backdropFilter: d >= 0.6 ? "blur(10px)" : "blur(0px)",
+          // **性能关键**: 只对 opacity 进行动画
+          // opacity: backgroundOpacity,
+          // 让 CSS 平滑地处理透明度变化
+          transition: "backgroundColor 0.3s ease-in-out"
+        },
+        // --- 文字和图标颜色过渡 ---
+        // 直接为 Header 内所有相关元素设置颜色和过渡
+        // color: textColor,
+        transition: "color 0.3s ease-in-out",
+        // 覆盖子组件的颜色，使其继承父级的 `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: `${l} !important`
+          // 使用 inherit 来同步颜色
+        },
+        ".header-logo, .header-menu": {
+          color: `${l} !important`
+        },
+        "& .navmenu--horizontal": {
+          bgcolor: "transparent !important"
+        },
+        ".header-addons  *": {
+          borderColor: `${l} !important`
+        },
+        // --- Logo 反色效果 ---
+        // filter 也是一个较昂贵的属性，但其影响远小于背景色的重绘
+        // 这里的逻辑保持不变，但可以考虑是否有更优的方案（如提供两个颜色的 Logo）
+        ".header-logo > div": {
+          // 暗黑模式不做反转
+          filter: p ? "unset" : `invert(${f ? 1 : 0})`,
+          transition: "filter 0.3s ease-in-out"
+        }
+      }
+    }
+  );
+}
+const re = M(be)``;
+export {
+  Tt as H,
+  Ne as L,
+  L as P,
+  Qe as T,
+  Ge as a,
+  N as b,
+  Rt as c,
+  j as d,
+  Je as e
+};