@rxdrag/website-lib 0.0.151 → 0.0.153

package/components/Image.astro

@@ -1,100 +1,100 @@
----
-import { Image as AstroImage, Picture as AstroPicture } from "astro:assets";
-import { type ImageProps, type ImageSizePreset } from "@rxdrag/website-lib-core";
-
-interface Props extends ImageProps {}
-
-/**
- * 布局预设 → 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",
-};
-
-
-const {
-  src,
-  alt = "",
-  width,
-  height,
-  layout,
-  formats,
-  loading,
-  priority,
-  quality,
-  widths,
-  sizes,
-  sizeHint = "auto",
-  class: className,
-  ...restProps
-} = Astro.props as Props;
-
-// 优先使用原生 sizes，否则用 sizeHint 映射
-const actualSizes = sizes ?? SIZES_MAP[sizeHint];
-
-// 判断是否使用 Picture（有 formats 时使用）
-const usePicture = formats && formats.length > 0;
-
-// 判断是否为字符串路径（远程/CMS/public）
-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} />`
-  );
-}
-
----
-{
-  isStringSrc ? (
-    <img
-      src={src}
-      alt={alt}
-      width={width}
-      height={height}
-      loading={priority ? "eager" : loading}
-      fetchpriority={priority ? "high" : undefined}
-      class={className}
-      {...restProps}
-    />
-  ) : usePicture ? (
-    <AstroPicture
-      src={src}
-      alt={alt}
-      width={width}
-      height={height}
-      formats={formats}
-      quality={quality}
-      loading={priority ? "eager" : loading}
-      sizes={layout === "none" ? undefined : actualSizes}
-      widths={layout === "none" ? undefined : widths}
-      class={className}
-      {...(layout && layout !== "none" ? { layout } : {})}
-      {...restProps}
-    />
-  ) : (
-    <AstroImage
-      src={src}
-      alt={alt}
-      width={width}
-      height={height}
-      quality={quality}
-      loading={priority ? "eager" : loading}
-      sizes={layout === "none" ? undefined : actualSizes}
-      widths={layout === "none" ? undefined : widths}
-      class={className}
-      {...(priority ? { priority } : {})}
-      {...(layout && layout !== "none" ? { layout } : {})}
-      {...restProps}
-    />
-  )
-}
+---
+import { Image as AstroImage, Picture as AstroPicture } from "astro:assets";
+import { type ImageProps, type ImageSizePreset } from "@rxdrag/website-lib-core";
+
+interface Props extends ImageProps {}
+
+/**
+ * 布局预设 → 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",
+};
+
+
+const {
+  src,
+  alt = "",
+  width,
+  height,
+  layout,
+  formats,
+  loading,
+  priority,
+  quality,
+  widths,
+  sizes,
+  sizeHint = "auto",
+  class: className,
+  ...restProps
+} = Astro.props as Props;
+
+// 优先使用原生 sizes，否则用 sizeHint 映射
+const actualSizes = sizes ?? SIZES_MAP[sizeHint];
+
+// 判断是否使用 Picture（有 formats 时使用）
+const usePicture = formats && formats.length > 0;
+
+// 判断是否为字符串路径（远程/CMS/public）
+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} />`
+  );
+}
+
+---
+{
+  isStringSrc ? (
+    <img
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      loading={priority ? "eager" : loading}
+      fetchpriority={priority ? "high" : undefined}
+      class={className}
+      {...restProps}
+    />
+  ) : usePicture ? (
+    <AstroPicture
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      formats={formats}
+      quality={quality}
+      loading={priority ? "eager" : loading}
+      sizes={layout === "none" ? undefined : actualSizes}
+      widths={layout === "none" ? undefined : widths}
+      class={className}
+      {...(layout && layout !== "none" ? { layout } : {})}
+      {...restProps}
+    />
+  ) : (
+    <AstroImage
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      quality={quality}
+      loading={priority ? "eager" : loading}
+      sizes={layout === "none" ? undefined : actualSizes}
+      widths={layout === "none" ? undefined : widths}
+      class={className}
+      {...(priority ? { priority } : {})}
+      {...(layout && layout !== "none" ? { layout } : {})}
+      {...restProps}
+    />
+  )
+}

package/components/Image.md

@@ -1,15 +1,15 @@
-| 中文名  | key        | 说明        |
-| ---- | ---------- | --------- |
-| 图片   | src        | 必填        |
-| 替代文本 | alt        | SEO / 无障碍 |
-| 使用场景 | scene      | 下拉        |
-| 响应式  | responsive | 下拉        |
-| 优先加载 | priority   | LCP       |
-| 懒加载  | loading    | 默认 lazy   |
-| 装饰图片 | decorative | 自动 aria   |
-
-## 最后一句总结（你可以记下来）
-
-Tailwind 决定“看起来多大”
-sizes 决定“下载多大”
+| 中文名  | key        | 说明        |
+| ---- | ---------- | --------- |
+| 图片   | src        | 必填        |
+| 替代文本 | alt        | SEO / 无障碍 |
+| 使用场景 | scene      | 下拉        |
+| 响应式  | responsive | 下拉        |
+| 优先加载 | priority   | LCP       |
+| 懒加载  | loading    | 默认 lazy   |
+| 装饰图片 | decorative | 自动 aria   |
+
+## 最后一句总结（你可以记下来）
+
+Tailwind 决定“看起来多大”
+sizes 决定“下载多大”
 这两件事发生在不同时间、不同层级

package/components/Link.astro

@@ -1,99 +1,89 @@
----
-import { toHref, type LinkType } from "@rxdrag/website-lib-core";
-
-import type { HTMLAttributes } from "astro/types";
-
-/**
- * 链接
- *
- * 规范：被冻结（Frozen）的设计器原子组件
- * - 对外接口与 DOM 结构应保持稳定，不随业务随意增删/调整
- * - 允许通过原生属性透传（...rest）注入 id/style/data-* 等通用能力
- * - 支持 className（自定义组件统一约定）
- * - href 由 type/to/options 计算得出；不允许外部通过 props 覆盖（避免行为不稳定）
- */
-
-interface Props extends HTMLAttributes<"a"> {
-  type?: LinkType | string;
-  to?: string;
-  className?: string;
-  //用于active类名的传递
-  activeWhen?: string | true;
-
-  // 链接生成配置：用于 toHref 计算最终 href 的路径前缀
-  // - productsSlug：产品详情页路径前缀（如 "products"）
-  // - postsSlug：文章详情页路径前缀（如 "posts"）
-  options?: {
-    productsSlug?: string;
-    postsSlug?: string;
-  };
-
-  // 允许外部传入以便兼容旧用法，但运行时会被忽略（href 统一由 type/to/options 生成）
-  href?: string;
-}
-
-const {
-  type,
-  to,
-  class: cls,
-  className,
-  activeWhen,
-  options,
-  href: hrefFromProps,
-  "class:list": classListFromProps,
-  ...props
-} = Astro.props;
-
-if (hrefFromProps) {
-  console.log(
-    `[Link] prop "href" is ignored. Use type/to/options to generate href. href=${hrefFromProps}`
-  );
-}
-if (classListFromProps) {
-  console.log(
-    '[Link] prop "class:list" is ignored. Use class/className instead.'
-  );
-}
-
-const href = toHref(type || "", to || "", options);
-const hrefObj = href ? { href } : {};
----
-
-<a
-  {...props}
-  {...hrefObj}
-  data-actived-path={activeWhen}
-  class:list={[cls, className]}
->
-  <slot />
-</a>
-
-<script>
-  import { initLinks } from "@rxdrag/website-lib-core";
-
-  (() => {
-    const bindAstroLifecycle = (key: string, fn: () => void) => {
-      const w = window as typeof window & {
-        __astro_lifecycle_bound__?: Record<string, boolean>;
-      };
-      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);
-    };
-
-    bindAstroLifecycle("website-lib:init-links", () => {
-      initLinks();
-    });
-  })();
-</script>
+---
+import {
+  toHref,
+  type BackgroundConfig,
+  type LinkProps,
+} from "@rxdrag/website-lib-core";
+import BackgroundGroup from "./BackgroundGroup.astro";
+
+/**
+ * 链接
+ *
+ * 规范：被冻结（Frozen）的设计器原子组件
+ * - 对外接口与 DOM 结构应保持稳定，不随业务随意增删/调整
+ * - 允许通过原生属性透传（...rest）注入 id/style/data-* 等通用能力
+ * - 支持 className（自定义组件统一约定）
+ * - href 由 type/to/options 计算得出；不允许外部通过 props 覆盖（避免行为不稳定）
+ */
+
+interface Props extends LinkProps {
+  backgrounds?: BackgroundConfig[];
+}
+
+const {
+  type,
+  to,
+  class: cls,
+  className,
+  activeWhen,
+  options,
+  href: hrefFromProps,
+  "class:list": classListFromProps,
+  backgrounds,
+  ...props
+} = Astro.props;
+
+if (hrefFromProps) {
+  console.log(
+    `[Link] prop "href" is ignored. Use type/to/options to generate href. href=${hrefFromProps}`,
+  );
+}
+if (classListFromProps) {
+  console.log(
+    '[Link] prop "class:list" is ignored. Use class/className instead.',
+  );
+}
+
+const href = toHref(type || "", to || "", options);
+const hrefObj = href ? { href } : {};
+---
+
+<a
+  {...props}
+  {...hrefObj}
+  data-actived-path={activeWhen}
+  class:list={[cls, className, backgrounds ? "relative" : undefined]}
+>
+  <BackgroundGroup backgrounds={backgrounds} />
+  <slot />
+</a>
+
+<script>
+  import { initLinks } from "@rxdrag/website-lib-core";
+
+  (() => {
+    const bindAstroLifecycle = (key: string, fn: () => void) => {
+      const w = window as typeof window & {
+        __astro_lifecycle_bound__?: Record<string, boolean>;
+      };
+      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);
+    };
+
+    bindAstroLifecycle("website-lib:init-links", () => {
+      initLinks();
+    });
+  })();
+</script>

package/components/Main.astro

@@ -1,17 +1,17 @@
----
-import type { BackgroundConfig } from "@rxdrag/website-lib-core";
-import BackgroundGroup from "./BackgroundGroup.astro";
-
-interface Props {
-  class?: string;
-  className?: string;
-  backgrounds?: BackgroundConfig[];
-}
-
-const { className, class: className2, backgrounds, ...rest } = Astro.props;
----
-
-<main class:list={[className, className2]} {...rest}>
-  {backgrounds?.length ? <BackgroundGroup backgrounds={backgrounds} /> : null}
-  <slot />
-</main>
+---
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+import BackgroundGroup from "./BackgroundGroup.astro";
+
+interface Props {
+  class?: string;
+  className?: string;
+  backgrounds?: BackgroundConfig[];
+}
+
+const { className, class: className2, backgrounds, ...rest } = Astro.props;
+---
+
+<main class:list={[className, className2]} {...rest}>
+  {backgrounds?.length ? <BackgroundGroup backgrounds={backgrounds} /> : null}
+  <slot />
+</main>

package/components/Meta.astro

@@ -1,65 +1,65 @@
----
-import type { PageMeta } from "@rxdrag/rxcms-models";
-
-interface Props {
-  content?: PageMeta;
-  title?: string;
-}
-
-const { content, title: propTitle } = Astro.props;
-
-// 从content中提取SEO相关属性
-const {
-  // SeoMeta属性
-  seoTitle,
-  seoKeywords,
-  seoDescription,
-  seoAuthor,
-  publisher,
-  seoRobots,
-  // OgMeta属性
-  ogTitle,
-  ogDescription,
-  ogUrl,
-  ogSiteName,
-  ogType,
-  xCard,
-  xSite,
-  xUrl,
-  // 其他属性
-  ogImage,
-} = content || {};
-
-const title = propTitle || seoTitle || "YiZhanFei";
-
-//暂时不输出canonicalUrl非必须
-const canonicalURL = Astro.url.href;
-const imageUrl = ogImage?.file?.url || "";
----
-
-<title>{seoTitle || title}</title>
-<meta name="description" content={seoDescription} />
-<meta name="keywords" content={seoKeywords} />
-<meta name="author" content={seoAuthor} />
-<meta name="publisher" content={publisher} />
-<meta name="robots" content={seoRobots || "index, follow"} />
-<!-- <link rel="canonical" href={canonicalURL} /> -->
-
-<!-- Open Graph / Facebook -->
-<meta property="og:type" content={ogType || "website"} />
-<meta property="og:url" content={ogUrl || canonicalURL} />
-<meta property="og:title" content={ogTitle || title} />
-<meta property="og:description" content={ogDescription || seoDescription} />
-<meta property="og:image" content={imageUrl} />
-{ogSiteName && <meta property="og:site_name" content={ogSiteName} />}
-
-<!-- Twitter -->
-<meta property="twitter:card" content={xCard || "summary_large_image"} />
-<meta property="twitter:url" content={xUrl || ogUrl || canonicalURL} />
-<meta property="twitter:title" content={ogTitle || title} />
-<meta
-  property="twitter:description"
-  content={ogDescription || seoDescription}
-/>
-<meta property="twitter:image" content={imageUrl} />
-{xSite && <meta property="twitter:site" content={xSite} />}
+---
+import type { PageMeta } from "@rxdrag/rxcms-models";
+
+interface Props {
+  content?: PageMeta;
+  title?: string;
+}
+
+const { content, title: propTitle } = Astro.props;
+
+// 从content中提取SEO相关属性
+const {
+  // SeoMeta属性
+  seoTitle,
+  seoKeywords,
+  seoDescription,
+  seoAuthor,
+  publisher,
+  seoRobots,
+  // OgMeta属性
+  ogTitle,
+  ogDescription,
+  ogUrl,
+  ogSiteName,
+  ogType,
+  xCard,
+  xSite,
+  xUrl,
+  // 其他属性
+  ogImage,
+} = content || {};
+
+const title = propTitle || seoTitle || "YiZhanFei";
+
+//暂时不输出canonicalUrl非必须
+const canonicalURL = Astro.url.href;
+const imageUrl = ogImage?.file?.url || "";
+---
+
+<title>{seoTitle || title}</title>
+<meta name="description" content={seoDescription} />
+<meta name="keywords" content={seoKeywords} />
+<meta name="author" content={seoAuthor} />
+<meta name="publisher" content={publisher} />
+<meta name="robots" content={seoRobots || "index, follow"} />
+<!-- <link rel="canonical" href={canonicalURL} /> -->
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content={ogType || "website"} />
+<meta property="og:url" content={ogUrl || canonicalURL} />
+<meta property="og:title" content={ogTitle || title} />
+<meta property="og:description" content={ogDescription || seoDescription} />
+<meta property="og:image" content={imageUrl} />
+{ogSiteName && <meta property="og:site_name" content={ogSiteName} />}
+
+<!-- Twitter -->
+<meta property="twitter:card" content={xCard || "summary_large_image"} />
+<meta property="twitter:url" content={xUrl || ogUrl || canonicalURL} />
+<meta property="twitter:title" content={ogTitle || title} />
+<meta
+  property="twitter:description"
+  content={ogDescription || seoDescription}
+/>
+<meta property="twitter:image" content={imageUrl} />
+{xSite && <meta property="twitter:site" content={xSite} />}