@rxdrag/website-lib 0.0.151 → 0.0.153

package/components/Background.astro

@@ -1,114 +1,140 @@
----
-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" />
-  )
-}
+---
+import type { BackgroundConfig, Locals } from "@rxdrag/website-lib-core";
+import {
+  BackgroundVideoPlayer,
+  BackgroundHlsVideoPlayer,
+  Entify,
+} from "@rxdrag/website-lib-core";
+import Image from "./Image.astro";
+import GlassBorder from "./GlassBorder.astro";
+import GradientBorder from "./GradientBorder.astro";
+import GlassRefraction from "./GlassRefraction.astro";
+
+export interface Props {
+  background: BackgroundConfig;
+  index?: number;
+}
+
+const { env, imageSizes } = Astro.locals as Locals;
+
+const { background } = Astro.props;
+
+const baseFill = "absolute inset-0 w-full h-full";
+const defaultFill = `${baseFill} object-cover`;
+const rawClass = (background.class || "").trim();
+const hasLayoutOverride = /(?:^|\s)(?:inset(?:-[xy])?-|top-|bottom-|left-|right-|w-|h-)/.test(
+  rawClass,
+);
+const className = rawClass
+  ? `${hasLayoutOverride ? "absolute" : defaultFill} ${rawClass}`
+  : defaultFill;
+
+// 安全地提取 mediaRef 和 posterRef（只有部分背景类型有这些属性）
+const mediaRef = background.type === "video" ? background.mediaRef : undefined;
+
+const rx = Entify.getInstance(env, imageSizes);
+
+// 获取媒体数据
+const media = rx ? await rx.getMedia(mediaRef) : undefined;
+
+// 预计算视频相关数据
+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 === "glass" && (
+    <GlassRefraction class={className} />
+  )
+}
+
+{
+  background.type === "glass-border" && (
+    <GlassBorder {...background} class={className} />
+  )
+}
+
+{
+  background.type === "gradient-border" && (
+    <GradientBorder {...background} 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/BackgroundGroup.astro

@@ -1,26 +1,20 @@
----
-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?.length
-      ? backgrounds.map((background) => (
-          <Background
-            background={background}
-            defaultClass={defaultClass}
-          />
-        ))
-      : null
-  }
-</Fragment>
+---
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+import Background from "./Background.astro";
+
+interface Props {
+  backgrounds?: BackgroundConfig[];
+}
+
+const { backgrounds } = Astro.props;
+---
+
+{
+  backgrounds?.length ? (
+    <div class="absolute inset-0 w-full h-full -z-10 pointer-events-none" data-bg-group>
+      {backgrounds.map((background) => (
+        <Background background={background} />
+      ))}
+    </div>
+  ) : null
+}

package/components/BaseFooter.astro

@@ -1,39 +1,24 @@
----
-import type { HTMLAttributes } from "astro/types";
-import type { BackgroundConfig } from "@rxdrag/website-lib-core";
-import BackgroundGroup from "./BackgroundGroup.astro";
-import Container from "./Container.astro";
-
-/**
- * 区块
- */
-
-interface Props extends HTMLAttributes<'footer'> {
-  className?: string;
-  containerClassName?: string;
-  backgrounds?: BackgroundConfig[];
-  disableContainer?: boolean;
-}
-
-const {
-  className,
-  containerClassName,
-  backgrounds,
-  disableContainer,
-  class: originalClass,
-  ...rest
-} = Astro.props;
----
-
-<footer class:list={["footer-block relative", className, originalClass]} {...rest}>
-  <BackgroundGroup backgrounds={backgrounds} />
-  {
-    disableContainer ? (
-      <slot />
-    ) : (
-      <Container class:list={["w-full h-full", containerClassName]}>
-        <slot />
-      </Container>
-    )
-  }
-</footer>
+---
+import type { HTMLAttributes } from "astro/types";
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+import BackgroundGroup from "./BackgroundGroup.astro";
+
+/**
+ * 区块
+ */
+
+interface Props extends HTMLAttributes<"footer"> {
+  className?: string;
+  backgrounds?: BackgroundConfig[];
+}
+
+const { className, backgrounds, class: originalClass, ...rest } = Astro.props;
+---
+
+<footer
+  class:list={["footer-block relative", className, originalClass]}
+  {...rest}
+>
+  <BackgroundGroup backgrounds={backgrounds} />
+  <slot />
+</footer>

package/components/BaseHeader.astro

@@ -1,25 +1,22 @@
----
-import type { HTMLAttributes } from "astro/types";
-import type { BackgroundConfig } from "@rxdrag/website-lib-core";
-import BackgroundGroup from "./BackgroundGroup.astro";
-import Container from "./Container.astro";
-
-/**
- * 区块
- */
-
-interface Props extends HTMLAttributes<"header"> {
-  className?: string;
-  containerClassName?: string;
-  backgrounds?: BackgroundConfig[];
-  //动效
-  disableContainer?: boolean;
-}
-
-const { className, backgrounds, class: originalClass, ...rest } = Astro.props;
----
-
-<header class:list={["header", className, originalClass]} {...rest}>
-  <BackgroundGroup backgrounds={backgrounds} />
-  <slot />
-</header>
+---
+import type { HTMLAttributes } from "astro/types";
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+import BackgroundGroup from "./BackgroundGroup.astro";
+
+/**
+ * 区块
+ */
+
+interface Props extends HTMLAttributes<"header"> {
+  class?: string;
+  className?: string;
+  backgrounds?: BackgroundConfig[];
+}
+
+const { className, backgrounds, class: originalClass, ...rest } = Astro.props;
+---
+
+<header class:list={["header", className, originalClass]} {...rest}>
+  <BackgroundGroup backgrounds={backgrounds} />
+  <slot />
+</header>

package/components/Box.astro

@@ -1,22 +1,20 @@
----
-import type { BackgroundConfig } from "@rxdrag/website-lib-core";
-import BaseBlock from "./BaseBlock.astro";
-
-interface Props {
-  class?: string;
-  className?: string;
-  backgrounds?: BackgroundConfig[];
-}
-
-const { className, class: originalClass, backgrounds, ...rest } = Astro.props;
----
-
-<BaseBlock
-  baseClass={["w-full", "h-full", "flex", "flex-col"]}
-  className={className}
-  class={originalClass}
-  backgrounds={backgrounds}
-  {...rest}
->
-  <slot />
-</BaseBlock>
+---
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+import Frame from "./Frame.astro";
+
+interface Props {
+  class?: string;
+  className?: string;
+  backgrounds?: BackgroundConfig[];
+}
+
+const { className, class: originalClass, backgrounds, ...rest } = Astro.props;
+---
+
+<Frame
+  class:list={["flex relative", className, originalClass]}
+  backgrounds={backgrounds}
+  {...rest}
+>
+  <slot />
+</Frame>

package/components/Button.astro

@@ -0,0 +1,80 @@
+---
+import Link from "@rxdrag/website-lib/components/Link.astro";
+import type { LinkProps } from "@rxdrag/website-lib-core";
+import type { FrameProps } from "@rxdrag/website-lib-core";
+import BackgroundGroup from "./BackgroundGroup.astro";
+
+interface Props extends FrameProps {
+  class?: string;
+  className?: string;
+  link?: LinkProps;
+  disabled?: boolean;
+  loading?: boolean;
+  fullWidth?: boolean;
+  size?: "sm" | "md" | "lg" | "none";
+  type?: "button" | "submit" | "reset";
+}
+
+const {
+  class: className,
+  className: className2,
+  link,
+  disabled,
+  loading = false,
+  fullWidth = false,
+  type = "button",
+  backgrounds,
+  size = "md",
+  ...rest
+} = Astro.props;
+
+const isDisabled = disabled || loading;
+const isLink = !!(link?.type || link?.to);
+
+const sizeClass: Record<"sm" | "md" | "lg", string> = {
+  sm: "btn-sm",
+  md: "btn-md",
+  lg: "btn-lg",
+};
+
+const sizeClassName = size === "none" ? undefined : sizeClass[size];
+
+const composedClass = [
+  fullWidth && "w-full",
+  isDisabled && "opacity-60 cursor-not-allowed",
+  loading && "pointer-events-none",
+  className,
+  className2,
+  backgrounds ? "relative" : undefined,
+  sizeClassName,
+];
+
+---
+
+{
+  isLink ? (
+    <Link
+      type={link!.type}
+      to={link!.to}
+      href={link!.href}
+      options={link!.options}
+      activeWhen={link!.activeWhen}
+      aria-disabled={isDisabled ? "true" : undefined}
+      class:list={composedClass}
+      backgrounds={backgrounds}
+      {...rest}
+    >
+      <slot />
+    </Link>
+  ) : (
+    <button
+      type={type}
+      disabled={isDisabled}
+      class:list={composedClass}
+      {...rest}
+    >
+      <BackgroundGroup backgrounds={backgrounds} />
+      <slot />
+    </button>
+  )
+}