@rxdrag/website-lib 0.0.60 → 0.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -24,8 +24,8 @@
     "eslint": "^7.32.0",
     "gsap": "^3.12.7",
     "typescript": "^5",
-    "@rxdrag/entify-hooks": "0.2.68",
-    "@rxdrag/rxcms-models": "0.3.87",
+    "@rxdrag/rxcms-models": "0.3.88",
+    "@rxdrag/entify-hooks": "0.2.69",
     "@rxdrag/eslint-config-custom": "0.2.12",
     "@rxdrag/slate-preview": "1.2.58",
     "@rxdrag/tsconfig": "0.2.0"
@@ -34,8 +34,8 @@
     "clsx": "^2.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@rxdrag/rxcms-models": "0.3.87",
-    "@rxdrag/website-lib-core": "0.0.61"
+    "@rxdrag/rxcms-models": "0.3.88",
+    "@rxdrag/website-lib-core": "0.0.63"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

package/src/components/Background.astro

@@ -0,0 +1,109 @@
+---
+import type { BackgroundConfig, IEntify } from "@rxdrag/website-lib-core";
+import {
+  BackgroundVideoPlayer,
+  BackgroundHlsVideoPlayer,
+} from "@rxdrag/website-lib-core";
+
+export interface Props {
+  background: BackgroundConfig;
+  index?: number;
+  defaultClass?: string;
+  rx: IEntify;
+}
+
+const {
+  background,
+  defaultClass = "absolute w-full h-full object-cover",
+  rx,
+} = 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 media = await rx.getMedia(mediaRef);
+const poster = await rx.getMedia(posterRef);
+
+// 构建 className
+const className = [defaultClass, background.className]
+  .filter(Boolean)
+  .join(" ");
+
+// 预计算视频相关数据
+const videoUrl =
+  background.type === "video"
+    ? media?.file?.original || background.url
+    : undefined;
+const posterUrl =
+  background.type === "video"
+    ? poster?.file?.original || background.poster
+    : 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 || background.url
+    : 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/src/components/BackgroundGroup.astro

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

package/src/components/Container.astro

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

package/src/components/Section.astro

@@ -0,0 +1,46 @@
+---
+import type {
+  AnimationConfig,
+  BackgroundConfig,
+  IEntify,
+} from "@rxdrag/website-lib-core";
+import BackgroundGroup from "./BackgroundGroup.astro";
+import Container from "./Container.astro";
+
+/**
+ * 区块
+ */
+
+interface Props {
+  class?: string;
+  className?: string;
+  containerClassName?: string;
+  backgrounds?: BackgroundConfig[];
+  //动效
+  animation?: AnimationConfig;
+  disableContainer?: boolean;
+  rx: IEntify;
+}
+
+const {
+  className,
+  containerClassName,
+  backgrounds,
+  disableContainer,
+  class: originalClass,
+  rx,
+} = Astro.props;
+---
+
+<section class:list={["section-block", className, originalClass]}>
+  <BackgroundGroup rx={rx} backgrounds={backgrounds} />
+  {
+    disableContainer ? (
+      <slot />
+    ) : (
+      <Container class:list={["section-container", containerClassName]}>
+        <slot />
+      </Container>
+    )
+  }
+</section>

package/src/components/index.ts

@@ -1,7 +1,10 @@
 export { default as AnimationNumber } from "./AnimationNumber.astro";
+export { default as Background } from "./Background.astro";
+export { default as BackgroundGroup } from "./BackgroundGroup.astro";
 export { default as Collapse } from "./Collapse.astro";
 export { default as CollapseTrigger } from "./CollapseTrigger.astro";
 export { default as CollapsePanel } from "./CollapsePanel.astro";
+export { default as Container } from "./Container.astro";
 export { default as Flip } from "./Flip.astro";
 export { default as Image } from "./Image.astro";
 export { default as Link } from "./Link.astro";
@@ -14,6 +17,7 @@ export { default as Motion } from "./Motion.astro";
 export { default as Popover } from "./Popover.astro";
 export { default as PopoverPanel } from "./PopverPanel.astro";
 export { default as RichTextView } from "./RichTextView.astro";
+export { default as Section } from "./Section.astro";
 export { default as Tabs } from "./Tabs.astro";
 export { default as TabsBody } from "./TabsBody.astro";
 export { default as TabsHeader } from "./TabsHeader.astro";