@rxdrag/website-lib 0.0.132 → 0.0.134

package/components/Background.astro

@@ -1,108 +1,114 @@
----
-import type { BackgroundConfig, Locals } from "@rxdrag/website-lib-core";
-import {
-  BackgroundVideoPlayer,
-  BackgroundHlsVideoPlayer,
-  Entify,
-} from "@rxdrag/website-lib-core";
-import { getImage } from "astro:assets";
-import type { ImageMetadata } from "astro";
-import Image from "./Image.astro";
-
-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 === "video" ? background.mediaRef : undefined;
-
-const rx = Entify.getInstance(env, imageSizes);
-
-// 获取媒体数据
-const media = rx ? await rx.getMedia(mediaRef) : undefined;
-
-// 构建 className（同时支持 class 和 className）
-const className = [defaultClass, background.class, background.className]
-  .filter(Boolean)
-  .join(" ");
-
-// 预计算视频相关数据
-const videoUrl =
-  background.type === "video" ? media?.file?.original : undefined;
-
-// 处理视频封面
-let posterUrl: string | undefined;
-if (background.type === "video" && background.poster) {
-  if (typeof background.poster === "string") {
-    posterUrl = background.poster;
-  } else if (
-    background.poster &&
-    typeof background.poster === "object" &&
-    "src" in background.poster
-  ) {
-    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"));
-
-// 预计算 Spline URL
-const splineUrl = background.type === "spline" ? background.url : undefined;
----
-
-{background.type === "color" && <div class={className} />}
-
-{background.type === "blur" && <div class={className} />}
-
-{
-  background.type === "image" && background.src && (
-    <Image class={className} src={background.src} 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" />
-  )
-}
+---
+import type { BackgroundConfig, Locals } from "@rxdrag/website-lib-core";
+import {
+  BackgroundVideoPlayer,
+  BackgroundHlsVideoPlayer,
+  Entify,
+} from "@rxdrag/website-lib-core";
+import Image from "./Image.astro";
+
+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 === "video" ? background.mediaRef : undefined;
+
+const rx = Entify.getInstance(env, imageSizes);
+
+// 获取媒体数据
+const media = rx ? await rx.getMedia(mediaRef) : undefined;
+
+// 构建 className（同时支持 class 和 className）
+const className = [defaultClass, background.class].filter(Boolean).join(" ");
+
+// 预计算视频相关数据
+const videoUrl =
+  background.type === "video" ? media?.file?.original : undefined;
+
+// 处理视频封面
+let posterUrl: string | undefined;
+if (background.type === "video" && background.poster) {
+  if (typeof background.poster === "string") {
+    posterUrl = background.poster;
+  } else if (typeof background.poster === "object") {
+    const poster = background.poster as Partial<ImageMetadata>;
+    if (
+      typeof poster.src === "string" &&
+      typeof poster.width === "number" &&
+      typeof poster.height === "number"
+    ) {
+      posterUrl = poster.src;
+    } else {
+      console.log(
+        "[Background] invalid video poster, expect ImageMetadata:",
+        background.poster,
+      );
+    }
+  }
+}
+
+const isHls =
+  background.type === "video" &&
+  (media?.storageType === "cloudflare_stream" ||
+    videoUrl?.endsWith(".m3u8") ||
+    videoUrl?.includes("cloudflarestream.com"));
+
+// 预计算 Spline URL
+const splineUrl = background.type === "spline" ? background.url : undefined;
+---
+
+{background.type === "color" && <div class={className} />}
+
+{background.type === "blur" && <div class={className} />}
+
+{
+  background.type === "image" && background.src && (
+    <Image
+      class={className}
+      src={background.src}
+      layout={background.layout || "full-width"}
+      alt=""
+    />
+  )
+}
+
+{
+  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/Image.astro

@@ -1,6 +1,6 @@
 ---
 import { Image as AstroImage, Picture as AstroPicture } from "astro:assets";
-import { type ImageProps, SIZES_MAP } from "./Image.type";
+import { type ImageProps, SIZES_MAP } from "@rxdrag/website-lib-core";
 
 interface Props extends ImageProps {}
 
@@ -14,13 +14,15 @@ const {
   loading,
   priority,
   quality,
-  sizes = "auto",
+  widths,
+  sizes,
+  sizeHint = "auto",
   class: className,
   ...restProps
-} = Astro.props;
+} = Astro.props as Props;
 
-// 转换 sizes 预设为实际值
-const actualSizes = SIZES_MAP[sizes];
+// 优先使用原生 sizes，否则用 sizeHint 映射
+const actualSizes = sizes ?? SIZES_MAP[sizeHint];
 
 // 判断是否使用 Picture（有 formats 时使用）
 const usePicture = formats && formats.length > 0;
@@ -32,13 +34,13 @@ const isStringSrc = typeof src === "string";
 if (isStringSrc && (src.startsWith("/src/") || src.startsWith("src/"))) {
   throw new Error(
     `Image src="${src}" 是本地资产路径，必须使用 import 导入。\n` +
-      `正确用法：\n` +
-      `  import myImage from "${src}";\n` +
-      `  <Image src={myImage} />`
+    `正确用法：\n` +
+    `  import myImage from "${src}";\n` +
+    `  <Image src={myImage} />`
   );
 }
----
 
+---
 {
   isStringSrc ? (
     <img
@@ -46,7 +48,8 @@ if (isStringSrc && (src.startsWith("/src/") || src.startsWith("src/"))) {
       alt={alt}
       width={width}
       height={height}
-      loading={loading}
+      loading={priority ? "eager" : loading}
+      fetchpriority={priority ? "high" : undefined}
       class={className}
       {...restProps}
     />
@@ -59,9 +62,10 @@ if (isStringSrc && (src.startsWith("/src/") || src.startsWith("src/"))) {
       formats={formats}
       quality={quality}
       loading={priority ? "eager" : loading}
-      sizes={actualSizes}
+      sizes={layout === "none" ? undefined : actualSizes}
+      widths={layout === "none" ? undefined : widths}
       class={className}
-      {...(layout ? { layout } : {})}
+      {...(layout && layout !== "none" ? { layout } : {})}
       {...restProps}
     />
   ) : (
@@ -71,11 +75,12 @@ if (isStringSrc && (src.startsWith("/src/") || src.startsWith("src/"))) {
       width={width}
       height={height}
       quality={quality}
-      loading={loading}
-      sizes={actualSizes}
+      loading={priority ? "eager" : loading}
+      sizes={layout === "none" ? undefined : actualSizes}
+      widths={layout === "none" ? undefined : widths}
       class={className}
       {...(priority ? { priority } : {})}
-      {...(layout ? { layout } : {})}
+      {...(layout && layout !== "none" ? { layout } : {})}
       {...restProps}
     />
   )

package/components/Video.astro

@@ -5,7 +5,6 @@ import {
   type Locals,
 } from "@rxdrag/website-lib-core";
 import { getImage } from "astro:assets";
-import type { ImageMetadata } from "astro";
 
 const { env, imageSizes } = Astro.locals as Locals;
 
@@ -47,8 +46,8 @@ if (poster) {
   if (typeof poster === "string") {
     posterUrl = poster;
   } else {
-    const posterImage = await getImage({ src: poster });
-    posterUrl = posterImage.src;
+    //const posterImage = await getImage({ src: poster });
+    posterUrl = poster.src; //;posterImage.src;
   }
 }
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib",
-  "version": "0.0.132",
+  "version": "0.0.134",
   "type": "module",
   "exports": {
     ".": "./index.ts",
@@ -22,15 +22,15 @@
     "@types/aos": "^3.0.7",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
-    "astro": "^4.0.0",
+    "astro": "^5.16.6",
     "eslint": "^9.39.2",
     "gsap": "^3.12.7",
     "typescript": "^5",
+    "@rxdrag/entify-hooks": "0.2.79",
     "@rxdrag/eslint-config-custom": "0.2.13",
     "@rxdrag/rxcms-models": "0.3.98",
-    "@rxdrag/entify-hooks": "0.2.79",
-    "@rxdrag/tiptap-preview": "0.0.3",
-    "@rxdrag/tsconfig": "0.2.1"
+    "@rxdrag/tsconfig": "0.2.1",
+    "@rxdrag/tiptap-preview": "0.0.3"
   },
   "dependencies": {
     "aos": "3.0.0-beta.6",
@@ -42,7 +42,7 @@
     "@rxdrag/rxcms-models": "0.3.98"
   },
   "peerDependencies": {
-    "astro": "^4.0.0 || ^5.0.0"
+    "astro": "^5.16.6"
   },
   "scripts": {
     "lint": "eslint . --ext .ts,tsx",

package/components/Image.type.ts

@@ -1,242 +0,0 @@
-import type { HTMLAttributes } from "astro/types";
-import type { ImageMetadata } from "astro";
-
-/**
- * 响应式布局模式（Astro 原生值）
- * @see https://docs.astro.build/zh-cn/guides/images/
- */
-export type ImageLayout =
-  | "responsive"   // 跟随父容器，最大不超过原图（推荐）
-  | "full-width"   // 填满父容器（100% 宽度）
-  | "fixed"        // 固定尺寸，不响应
-  | "none";        // 不使用响应式
-
-/**
- * 图片输出格式
- */
-export type ImageFormat = "webp" | "avif" | "png" | "jpg" | "gif" | "svg";
-
-/**
- * 图片在页面中的布局位置（用于优化下载尺寸）
- */
-export type ImageSizePreset =
-  | "auto"      // 自动处理（让 layout 决定）
-  | "full"      // 全宽内容
-  | "half"      // 两栏布局（约 50%）
-  | "third"     // 三栏布局（约 33%）
-  | "quarter"   // 四栏布局（约 25%）
-  | "sidebar";  // 侧边栏内图片
-
-/**
- * 布局预设 → sizes 属性映射
- */
-export const SIZES_MAP: Record<ImageSizePreset, string | undefined> = {
-  auto: undefined,
-  full: "100vw",
-  half: "(max-width: 768px) 100vw, 50vw",
-  third: "(max-width: 768px) 100vw, 33vw",
-  quarter: "(max-width: 768px) 100vw, 25vw",
-  sidebar: "(max-width: 768px) 100vw, 300px",
-};
-
-/**
- * ============================================================
- * 图片组件属性
- * ============================================================
- *
- * 设计原则：
- * 1. Props 只处理图片核心功能（来源、加载、优化）
- * 2. 样式相关属性通过 Tailwind class 设置
- *
- * ============================================================
- * 样式设置指南（通过 class 属性使用 Tailwind）
- * ============================================================
- *
- * 【尺寸】
- *   - 宽度：w-full, w-1/2, w-64, w-[300px]
- *   - 高度：h-auto, h-64, h-screen, h-[200px]
- *   - 最大宽度：max-w-md, max-w-lg, max-w-full
- *
- * 【宽高比】
- *   - 正方形：aspect-square
- *   - 视频：aspect-video (16:9)
- *   - 自定义：aspect-[4/3], aspect-[3/2]
- *
- * 【填充模式】
- *   - 裁剪填满：object-cover（推荐用于背景图、卡片图）
- *   - 完整显示：object-contain（推荐用于 logo）
- *   - 拉伸填满：object-fill
- *   - 原始尺寸：object-none
- *
- * 【位置（配合 object-cover/contain 使用）】
- *   - 居中：object-center（默认）
- *   - 顶部：object-top
- *   - 底部：object-bottom
- *   - 左右：object-left, object-right
- *
- * 【圆角】
- *   - 小：rounded-sm
- *   - 中：rounded-md, rounded-lg
- *   - 大：rounded-xl, rounded-2xl
- *   - 圆形：rounded-full
- *
- * 【阴影】
- *   - 小：shadow-sm
- *   - 中：shadow, shadow-md
- *   - 大：shadow-lg, shadow-xl
- *
- * 【边框】
- *   - 细边框：border
- *   - 边框颜色：border-gray-200, border-white
- *
- * 【滤镜效果】
- *   - 灰度：grayscale
- *   - 模糊：blur-sm, blur-md
- *   - 亮度：brightness-50, brightness-150
- *   - 悬停效果：hover:scale-105, hover:brightness-110
- *
- * 使用示例：
- * ```astro
- * <Image
- *   src="/hero.jpg"
- *   alt="英雄图"
- *   class="w-full aspect-video object-cover rounded-lg shadow-lg"
- * />
- * ```
- */
-export interface ImageProps extends Omit<HTMLAttributes<"img">, "src" | "width" | "height"> {
-  /**
-   * 图片来源
-   * - 本地图片：使用 import 导入
-   * - 远程图片：使用完整 URL
-   * - CMS 图片：使用媒体库路径
-   */
-  src: string | ImageMetadata;
-
-  /**
-   * 图片宽度
-   * - 本地图片可自动推断，可不填
-   * - 本地图片使用 layout="fixed" 时必须填写
-   * - 远程图片不需要填写，用 Tailwind 样式代替
-   */
-  width?: number;
-
-  /**
-   * 图片高度
-   * - 本地图片可自动推断，可不填
-   * - 本地图片使用 layout="fixed" 时必须填写
-   * - 远程图片不需要填写，用 Tailwind 样式代替
-   */
-  height?: number;
-
-  /**
-   * 图片描述（用于无障碍访问和 SEO）
-   * - 内容图片：填写描述文字
-   * - 装饰性图片：设为空字符串 alt=""，屏幕阅读器会忽略
-   */
-  alt?: string;
-
-  /**
-   * 响应式布局模式（Astro 原生值）
-   * - responsive: 跟随容器宽度，最大不超过原图尺寸（推荐）
-   * - full-width: 填满父容器（100% 宽度）
-   * - fixed: 固定尺寸，不响应屏幕变化
-   * - none: 不使用 Astro 响应式处理
-   */
-  layout?: ImageLayout;
-
-  /**
-   * 输出格式（用于 Picture 组件）
-   * - 浏览器会自动选择最优格式
-   * - 推荐：['avif', 'webp'] 获得最佳压缩
-   * @example ['avif', 'webp']
-   */
-  formats?: ImageFormat[];
-
-  /**
-   * 加载策略
-   * - lazy: 延迟加载，首屏外的图片使用
-   * - eager: 立即加载，首屏图片使用
-   * @default "lazy"
-   */
-  loading?: "lazy" | "eager";
-
-  /**
-   * 是否为重要图片（LCP 优化，Astro 原生支持）
-   * - 设为 true 会自动设置 loading="eager" 和 fetchpriority="high"
-   * - 仅对首屏最大的图片使用
-   */
-  priority?: boolean;
-
-  /**
-   * 图片质量（1-100）
-   * - 数值越高质量越好，文件越大
-   * - 推荐 80-90 平衡质量和大小
-   * 备注：这个可以先不提供可视化支持，小白理解不了
-   * @default 80
-   */
-  quality?: number;
-
-  /**
-   * 图片在页面中的布局位置（用于优化下载尺寸）
-   * - auto: 自动处理（推荐，让 layout 决定）
-   * - full: 全宽内容
-   * - half: 两栏布局
-   * - third: 三栏布局
-   * - quarter: 四栏布局
-   * - sidebar: 侧边栏内图片
-   * @default "auto"
-   */
-  sizes?: ImageSizePreset;
-
-  /**
-   * 样式类（使用 Tailwind）
-   *
-   * 【避免布局偏移】
-   *   设置宽高比可预留空间，防止图片加载时页面跳动：
-   *   - aspect-square（1:1）
-   *   - aspect-video（16:9）
-   *   - aspect-[4/3]、aspect-[3/2] 等自定义比例
-   *
-   * 【常用宽高比】
-   *   - 1:1 - 正方形，电商产品、头像、社交卡片
-   *   - 4:3 - 传统屏幕，博客卡片、新闻缩略图
-   *   - 3:2 - 单反照片，摄影作品、画廊
-   *   - 16:9 - 宽屏视频，英雄图、视频封面
-   *   - 21:9 - 超宽屏，电影海报、横幅广告
-   *   - 4:5 - 竖版，Instagram、社交媒体
-   *   - 9:16 - 竖屏视频，Stories、短视频封面
-   *
-   * 【快捷模板】
-   *   - 英雄图：w-full aspect-video object-cover
-   *   - 博客卡片：w-full aspect-[16/9] object-cover rounded-lg
-   *   - 新闻卡片：w-full aspect-[4/3] object-cover rounded-lg
-   *   - 电商卡片：w-full aspect-square object-cover rounded-lg
-   *   - 社交卡片：w-full aspect-[4/5] object-cover rounded-lg
-   *   - 缩略图：w-32 aspect-square object-cover rounded
-   *   - 头像（小）：w-8 h-8 object-cover rounded-full
-   *   - 头像（中）：w-12 h-12 object-cover rounded-full
-   *   - 头像（大）：w-16 h-16 object-cover rounded-full
-   *   - Logo：h-8 w-auto object-contain
-   *   - 产品图：w-full aspect-square object-contain bg-white
-   *   - 背景图：w-full h-full object-cover absolute inset-0
-   *   - 画廊图：w-full aspect-[3/2] object-cover hover:scale-105 transition
-   *   - 横幅广告：w-full aspect-[21/9] object-cover
-   *
-   * 【常用样式】
-   *   - 尺寸：w-full, w-1/2, w-32, h-64, max-w-lg, max-w-screen-xl
-   *   - 填充：object-cover（裁剪填满）, object-contain（完整显示）, object-fill（拉伸）
-   *   - 位置：object-center, object-top, object-bottom, object-left, object-right
-   *   - 圆角：rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-full
-   *   - 阴影：shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl
-   *   - 边框：border, border-2, border-white, border-gray-200
-   *   - 滤镜：grayscale, blur-sm, brightness-75, contrast-125
-   *   - 过渡：transition, hover:scale-105, hover:brightness-110, hover:shadow-xl
-   *
-   * @example "w-full aspect-video object-cover rounded-lg"
-   */
-  class?: string;
-  //兼容react组件
-  className?: string;
-}
-

package/components/Picture.astro

@@ -1,35 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-
-type PictureSource = {
-  srcset: string;
-  media?: string;
-  type?: string;
-  sizes?: string;
-};
-
-interface Props extends HTMLAttributes<"picture"> {
-  className?: string;
-  sources?: PictureSource[];
-  imgProps: Omit<HTMLAttributes<"img">, "src"> & {
-    src: string;
-  };
-}
-
-const {
-  className,
-  sources,
-  imgProps,
-  class: originalClass,
-  ...rest
-} = Astro.props;
-
-const sourceList = sources ?? [];
----
-
-<picture class:list={["picture-block", className, originalClass]} {...rest}>
-  {sourceList.map((source) => (
-    <source {...source} />
-  ))}
-  <img {...imgProps} />
-</picture>