@blocklet/pages-kit-inner-components 0.5.56 → 0.6.1

package/lib/es/chunks/{draft-data-CWM--ooz.js → draft-data-CafrGKeh.js}

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { u as a, S as o, a as s, b as n } from "./state-l--dTdHq.js";
+import { u as a, S as o, g as s, a as n } from "./state-0gvZF3k2.js";
 function d({ children: t }) {
   const r = a();
   return /* @__PURE__ */ e(o, { url: s(r ?? ""), name: "root", waitingSynced: !0, children: /* @__PURE__ */ e(i, { children: t }) });

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

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