@rxdrag/website-lib 0.0.104 → 0.0.106

package/components/AnimationNumber.astro

@@ -0,0 +1,218 @@
+---
+interface Props {
+  start?: number;
+  end: number;
+  duration?: number;
+  class?: string;
+  sign?: string;
+  once?: boolean;
+  type?: "int" | "float";
+  fractionDigits?: number;
+}
+
+const {
+  start = 0,
+  end,
+  duration = 1200,
+  class: className,
+  sign = "+",
+  once = false,
+  type = "int",
+  fractionDigits = 1,
+} = Astro.props;
+
+const id = crypto.randomUUID();
+---
+
+<span
+  class={className}
+  data-light-number
+  data-id={id}
+  data-start={start}
+  data-end={end}
+  data-duration={duration}
+  data-once={once ? "1" : "0"}
+  data-type={type}
+  data-fraction-digits={fractionDigits}
+>
+  <span data-light-number-value>{start}</span>
+  {
+    sign && (
+      <span data-light-number-sign style="display:none">
+        {sign}
+      </span>
+    )
+  }
+</span>
+
+<script is:inline>
+  (() => {
+    const bindAstroLifecycle = (key, fn) => {
+      const w = window;
+      const bound = (w.__astro_lifecycle_bound__ ||= Object.create(null));
+      if (bound[key]) return;
+      bound[key] = true;
+
+      const boot = () => fn();
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
+
+      document.addEventListener("astro:page-load", boot);
+      document.addEventListener("astro:after-swap", boot);
+    };
+
+    const globalKey = "__light_number_state__";
+    const w = window;
+    const state = (w[globalKey] ||= {
+      docBound: false,
+      moBound: false,
+      scheduled: false,
+    });
+
+    const scheduleInit = () => {
+      if (state.scheduled) return;
+      state.scheduled = true;
+      requestAnimationFrame(() => {
+        state.scheduled = false;
+        init();
+      });
+    };
+
+    const init = () => {
+      const nodes = document.querySelectorAll("[data-light-number]");
+      nodes.forEach((root) => {
+        if (!(root instanceof HTMLElement)) return;
+        if (root.dataset.bound === "1") return;
+        root.dataset.bound = "1";
+
+      const valueEl = root.querySelector("[data-light-number-value]");
+      const signEl = root.querySelector("[data-light-number-sign]");
+      if (!(valueEl instanceof HTMLElement)) return;
+
+      const start = Number(root.dataset.start ?? "0");
+      const end = Number(root.dataset.end ?? "0");
+      const duration = Number(root.dataset.duration ?? "1200");
+      const once = root.dataset.once === "1";
+      const type = root.dataset.type === "float" ? "float" : "int";
+      const fractionDigits = Number(root.dataset.fractionDigits ?? "1");
+
+      let running = false;
+      let played = false;
+      let rafId = 0;
+
+      const format = (n) => {
+        if (type === "float") {
+          return n.toFixed(
+            Number.isFinite(fractionDigits) ? fractionDigits : 1
+          );
+        }
+        return String(Math.round(n));
+      };
+
+      const setValue = (n) => {
+        valueEl.textContent = format(n);
+      };
+
+      const showSign = () => {
+        if (signEl instanceof HTMLElement) {
+          signEl.style.display = "";
+        }
+      };
+
+      const animate = () => {
+        if (running) return;
+        if (once && played) return;
+
+        running = true;
+        played = true;
+        showSign();
+
+        const from = start;
+        const to = end;
+        const t0 = performance.now();
+
+        const step = (t) => {
+          const p = Math.min(1, (t - t0) / Math.max(16, duration));
+          const eased = 1 - Math.pow(1 - p, 3);
+          const v = from + (to - from) * eased;
+          setValue(v);
+          if (p < 1) {
+            rafId = requestAnimationFrame(step);
+          } else {
+            running = false;
+          }
+        };
+
+        cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(step);
+      };
+
+      const isInViewport = () => {
+        const rect = root.getBoundingClientRect();
+        const vh = window.innerHeight || document.documentElement.clientHeight;
+        return rect.bottom > 0 && rect.top < vh;
+      };
+
+      if (typeof IntersectionObserver === "undefined") {
+        if (isInViewport()) animate();
+        else window.addEventListener("scroll", animate, { passive: true, once: true });
+        return;
+      }
+
+      const io = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (!entry.isIntersecting) return;
+            animate();
+            if (once) io.disconnect();
+          });
+        },
+        { threshold: 0.25 }
+      );
+
+        io.observe(root);
+
+        if (isInViewport()) animate();
+      });
+    };
+
+    const boot = () => {
+      init();
+    };
+
+    bindAstroLifecycle("light-number:boot", boot);
+
+    if (!state.moBound) {
+      state.moBound = true;
+      const mo = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          if (!m.addedNodes || m.addedNodes.length === 0) continue;
+          for (const n of m.addedNodes) {
+            if (!(n instanceof Element)) continue;
+            if (n.matches && n.matches("[data-light-number]")) {
+              scheduleInit();
+              return;
+            }
+            if (n.querySelector && n.querySelector("[data-light-number]")) {
+              scheduleInit();
+              return;
+            }
+          }
+        }
+      });
+      if (document.body) {
+        mo.observe(document.body, { childList: true, subtree: true });
+      } else {
+        document.addEventListener(
+          "DOMContentLoaded",
+          () => mo.observe(document.body, { childList: true, subtree: true }),
+          { once: true }
+        );
+      }
+    }
+  })();
+</script>

package/components/Background.astro

@@ -0,0 +1,106 @@
+---
+import type { BackgroundConfig, Locals } from "@rxdrag/website-lib-core";
+import {
+  BackgroundVideoPlayer,
+  BackgroundHlsVideoPlayer,
+  Entify,
+} from "@rxdrag/website-lib-core";
+
+export interface Props {
+  background: BackgroundConfig;
+  index?: number;
+  defaultClass?: string;
+}
+
+const { env, imageSizes } = Astro.locals as Locals;
+
+const {
+  background,
+  defaultClass = "absolute top-0 left-0 w-full h-full object-cover",
+} = Astro.props;
+
+// 安全地提取 mediaRef 和 posterRef（只有部分背景类型有这些属性）
+const mediaRef =
+  background.type === "image" ||
+  background.type === "video" ||
+  background.type === "spline"
+    ? background.mediaRef
+    : undefined;
+
+const posterRef =
+  background.type === "video" ? background.posterRef : undefined;
+
+const rx = Entify.getInstance(env, imageSizes);
+
+// 获取媒体数据
+const media = rx ? await rx.getMedia(mediaRef) : undefined;
+const poster = rx ? await rx.getMedia(posterRef) : undefined;
+
+// 构建 className
+const className = [defaultClass, background.className]
+  .filter(Boolean)
+  .join(" ");
+
+// 预计算视频相关数据
+const videoUrl =
+  background.type === "video" ? media?.file?.original : undefined;
+const posterUrl =
+  background.type === "video" ? poster?.file?.original : undefined;
+const isHls =
+  background.type === "video" &&
+  (media?.storageType === "cloudflare_stream" ||
+    videoUrl?.endsWith(".m3u8") ||
+    videoUrl?.includes("cloudflarestream.com"));
+
+// 预计算图片 URL
+const imageUrl =
+  background.type === "image" ? media?.file?.original : undefined;
+
+// 预计算 Spline URL
+const splineUrl =
+  background.type === "spline"
+    ? background.url ||
+      (background.mediaRef ? `/media/${background.mediaRef}` : "")
+    : undefined;
+---
+
+{background.type === "color" && <div class={className} />}
+
+{background.type === "blur" && <div class={className} />}
+
+{
+  background.type === "image" && (
+    <img class={className} src={imageUrl} alt="Background Image" />
+  )
+}
+
+{
+  background.type === "svg" && background.code && (
+    <div class={className} set:html={background.code} />
+  )
+}
+
+{
+  background.type === "video" &&
+    (isHls ? (
+      <BackgroundHlsVideoPlayer
+        className={className}
+        src={videoUrl}
+        poster={posterUrl}
+        client:load
+      />
+    ) : (
+      <BackgroundVideoPlayer
+        className={className}
+        src={videoUrl}
+        poster={posterUrl}
+        client:load
+      />
+    ))
+}
+
+{
+  background.type === "spline" && (
+    <iframe class={className} src={splineUrl} title="Spline 3D Scene" />
+  )
+}

package/components/BackgroundGroup.astro

@@ -0,0 +1,21 @@
+---
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+import Background from "./Background.astro";
+
+interface Props {
+  backgrounds?: BackgroundConfig[];
+}
+
+const { backgrounds } = Astro.props;
+
+const defaultClass =
+  "absolute w-full h-full inset-0 object-cover";
+---
+
+<Fragment>
+  {
+    backgrounds?.map((background) => (
+      <Background background={background} defaultClass={defaultClass} />
+    ))
+  }
+</Fragment>

package/components/Box.astro

@@ -0,0 +1,25 @@
+---
+import type {
+  AnimationConfig,
+  BackgroundConfig,
+} from "@rxdrag/website-lib-core";
+import BackgroundGroup from "./BackgroundGroup.astro";
+
+interface Props {
+  class?: string;
+  className?: string;
+  backgrounds?: BackgroundConfig[];
+  //动效
+  animation?: AnimationConfig;
+}
+
+const { className, class: originalClass, backgrounds, ...rest } = Astro.props;
+---
+
+<div
+  class:list={["w-full, h-full flex flex-col", className, originalClass]}
+  {...rest}
+>
+  <BackgroundGroup backgrounds={backgrounds} />
+  <slot />
+</div>

package/components/Collapse.astro

@@ -0,0 +1,125 @@
+---
+interface Props {
+  class?: string;
+  triggerClass?: string;
+  panelClass?: string;
+  initialOpen?: boolean;
+}
+
+const {
+  class: className,
+  triggerClass,
+  panelClass,
+  initialOpen = false,
+} = Astro.props;
+
+const collapseId = crypto.randomUUID();
+const panelId = `collapse-panel-${collapseId}`;
+const rootId = `collapse-${collapseId}`;
+---
+
+<div
+  class:list={["n-collapse", className]}
+  id={rootId}
+  data-open={initialOpen ? "true" : "false"}
+>
+  <button
+    type="button"
+    class:list={["n-collapse__trigger", triggerClass]}
+    aria-expanded={initialOpen ? "true" : "false"}
+    aria-controls={panelId}
+  >
+    <slot name="trigger" />
+  </button>
+
+  <div
+    id={panelId}
+    class:list={["n-collapse__panel", panelClass]}
+    style={`height: ${initialOpen ? "auto" : "0px"};`}
+    aria-hidden={initialOpen ? "false" : "true"}
+  >
+    <slot />
+  </div>
+</div>
+
+<style>
+  .n-collapse__panel {
+    transition: height 0.35s ease;
+  }
+
+  .n-collapse__indicator {
+    transition: transform 0.25s ease;
+  }
+
+  .n-collapse[data-open="true"] .n-collapse__indicator {
+    transform: rotate(180deg);
+  }
+</style>
+
+<script is:inline>
+  // This component can appear multiple times per page.
+  // We install a single global initializer so it keeps working after Astro SPA navigation.
+  if (!window.__nCollapse) {
+    window.__nCollapse = {
+      initCollapseRoot(root) {
+        if (!root || root.dataset.nCollapseBound === "true") return;
+        root.dataset.nCollapseBound = "true";
+
+        const trigger = root.querySelector(":scope > .n-collapse__trigger");
+        const panel = root.querySelector(":scope > .n-collapse__panel");
+        if (!trigger || !panel) {
+          console.log("Collapse: trigger/panel not found", root);
+          return;
+        }
+
+        let open = root.dataset.open === "true";
+        if (open) {
+          panel.style.height = "auto";
+          trigger.setAttribute("aria-expanded", "true");
+          panel.setAttribute("aria-hidden", "false");
+        }
+
+        const setOpen = (next) => {
+          open = next;
+          root.dataset.open = open ? "true" : "false";
+          trigger.setAttribute("aria-expanded", open ? "true" : "false");
+          panel.setAttribute("aria-hidden", open ? "false" : "true");
+
+          if (open) {
+            panel.style.height = "auto";
+            const h = panel.scrollHeight;
+            panel.style.height = "0px";
+            panel.offsetHeight;
+            panel.style.height = h + "px";
+          } else {
+            const h = panel.scrollHeight;
+            panel.style.height = h + "px";
+            panel.offsetHeight;
+            panel.style.height = "0px";
+          }
+        };
+
+        const onTransitionEnd = (e) => {
+          if (e.target !== panel || e.propertyName !== "height") return;
+          if (open) panel.style.height = "auto";
+        };
+
+        trigger.addEventListener("click", () => setOpen(!open));
+        panel.addEventListener("transitionend", onTransitionEnd);
+      },
+      initAll() {
+        document.querySelectorAll(".n-collapse").forEach((el) => window.__nCollapse.initCollapseRoot(el));
+      },
+      listenersBound: false,
+    };
+  }
+
+  // Bind listeners once to support ClientRouter/ViewTransitions.
+  if (!window.__nCollapse.listenersBound) {
+    window.__nCollapse.listenersBound = true;
+    document.addEventListener("astro:page-load", () => window.__nCollapse.initAll());
+    document.addEventListener("astro:after-swap", () => window.__nCollapse.initAll());
+  }
+
+  window.__nCollapse.initAll();
+</script>

package/components/CollapseIndicator.astro

@@ -0,0 +1,20 @@
+---
+interface Props {
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+
+<span class:list={["n-collapse__indicator", "h-5", "w-5", "flex-none", "text-foreground", className]} aria-hidden="true">
+  <svg
+    aria-hidden="true"
+    fill="currentColor"
+    focusable="false"
+    height="1.25rem"
+    viewBox="0 0 24 24"
+    width="1.25rem"
+  >
+    <path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"></path>
+  </svg>
+</span>

package/components/Container.astro

@@ -0,0 +1,13 @@
+---
+interface Props {
+  //布局
+  className?: string;
+  class?: string;
+}
+
+const { className, class: classAttr, ...rest } = Astro.props;
+---
+
+<div class:list={["section-container", className, classAttr]} {...rest}>
+  <slot />
+</div>