@rxdrag/website-lib 0.0.127 → 0.0.128

package/components/Background.astro

@@ -1,10 +1,14 @@
 ---
-import type { BackgroundConfig, Locals } from "@rxdrag/website-lib-core";
+import type { Locals } from "@rxdrag/website-lib-core";
 import {
   BackgroundVideoPlayer,
   BackgroundHlsVideoPlayer,
   Entify,
 } from "@rxdrag/website-lib-core";
+import type { BackgroundConfig } from "./Background.type";
+import { getImage } from "astro:assets";
+import type { ImageMetadata } from "astro";
+import Image from "./Image.astro";
 
 export interface Props {
   background: BackgroundConfig;
@@ -20,48 +24,43 @@ const {
 } = 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 mediaRef = background.type === "video" ? background.mediaRef : 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]
+// 构建 className（同时支持 class 和 className）
+const className = [defaultClass, background.class, background.className]
   .filter(Boolean)
   .join(" ");
 
 // 预计算视频相关数据
 const videoUrl =
   background.type === "video" ? media?.file?.original : undefined;
-const posterUrl =
-  background.type === "video" ? poster?.file?.original : undefined;
+
+// 处理视频封面
+let posterUrl: string | undefined;
+if (background.type === "video" && background.poster) {
+  if (typeof background.poster === "string") {
+    posterUrl = background.poster;
+  } else {
+    const posterImage = await getImage({
+      src: background.poster as ImageMetadata,
+    });
+    posterUrl = posterImage.src;
+  }
+}
+
 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;
+const splineUrl = background.type === "spline" ? background.url : undefined;
 ---
 
 {background.type === "color" && <div class={className} />}
@@ -69,8 +68,8 @@ const splineUrl =
 {background.type === "blur" && <div class={className} />}
 
 {
-  background.type === "image" && (
-    <img class={className} src={imageUrl} alt="Background Image" />
+  background.type === "image" && background.src && (
+    <Image class={className} src={background.src} alt="Background Image" />
   )
 }
 

package/components/Background.type.ts

@@ -0,0 +1,18 @@
+import type { BlurBackgroundConfig, ColorBackgroundConfig, ImageBackgroundConfig, SplineBackgroundConfig, SvgBackgroundConfig, VideoBackgroundConfig } from "@rxdrag/website-lib-core";
+import type { ImageMetadata } from "astro";
+
+
+export type ImageBgConfig = Omit<ImageBackgroundConfig, "src"> & {
+  src?: string | ImageMetadata;
+}
+
+export type VideoBgConfig = Omit<VideoBackgroundConfig, "poster"> & {
+  poster?: string | ImageMetadata;
+}
+
+export type BackgroundConfig = | ColorBackgroundConfig
+  | BlurBackgroundConfig
+  | ImageBgConfig
+  | SvgBackgroundConfig
+  | VideoBgConfig
+  | SplineBackgroundConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib",
-  "version": "0.0.127",
+  "version": "0.0.128",
   "type": "module",
   "exports": {
     ".": "./index.ts",
@@ -26,11 +26,11 @@
     "eslint": "^9.39.2",
     "gsap": "^3.12.7",
     "typescript": "^5",
-    "@rxdrag/rxcms-models": "0.3.98",
     "@rxdrag/eslint-config-custom": "0.2.13",
     "@rxdrag/entify-hooks": "0.2.79",
-    "@rxdrag/tiptap-preview": "0.0.3",
-    "@rxdrag/tsconfig": "0.2.1"
+    "@rxdrag/rxcms-models": "0.3.98",
+    "@rxdrag/tsconfig": "0.2.1",
+    "@rxdrag/tiptap-preview": "0.0.3"
   },
   "dependencies": {
     "aos": "3.0.0-beta.6",