npm - @rxdrag/website-lib - Versions diffs - 0.0.152 → 0.0.153 - Mend

@rxdrag/website-lib 0.0.152 → 0.0.153

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/README.md +2 -2
package/components/AnimationNumber.astro +217 -217
package/components/Background.astro +140 -114
package/components/BackgroundGroup.astro +20 -26
package/components/BaseFooter.astro +24 -39
package/components/BaseHeader.astro +22 -25
package/components/Box.astro +20 -22
package/components/Button.astro +80 -0
package/components/Carousel.astro +456 -315
package/components/CarouselPagination.astro +97 -76
package/components/CarouselSlide.astro +10 -16
package/components/Collapse.astro +125 -125
package/components/CollapseIndicator.astro +20 -20
package/components/Container.astro +27 -32
package/components/Content.astro +20 -0
package/components/CookieConsent.astro +47 -47
package/components/CookieConsent.css +52 -52
package/components/CookieConsentConfig.ts +208 -208
package/components/Dialog.astro +342 -338
package/components/DialogTrigger.astro +32 -32
package/components/Document.astro +240 -225
package/components/Frame.astro +32 -0
package/components/GlassBorder.astro +104 -0
package/components/GlassRefraction.astro +85 -0
package/components/GradientBorder.astro +80 -0
package/components/Grid.astro +32 -34
package/components/GridCell.astro +28 -32
package/components/Heading.astro +24 -24
package/components/Icon.astro +29 -29
package/components/Image.astro +100 -100
package/components/Image.md +14 -14
package/components/Link.astro +89 -82
package/components/Main.astro +17 -17
package/components/Meta.astro +65 -65
package/components/Popover.astro +189 -189
package/components/RichTextView.astro +28 -28
package/components/Section.astro +26 -44
package/components/TabButton.astro +32 -16
package/components/TabPanel.astro +20 -19
package/components/Tabs.astro +220 -147
package/components/Video.astro +6 -4
package/components/YearsSince.astro +20 -20
package/components//344/270/211/345/261/202/346/250/241/345/236/213.md +5 -5
package/components//344/270/273/351/242/230Token.md +198 -198
package/components//345/216/237/345/255/220/345/206/273/347/273/223/346/270/205/345/215/225.md +270 -260
package/components//347/211/251/346/226/231/346/270/205/345/215/225.md +599 -567
package/index.ts +5 -5
package/package.json +5 -5
package/components/BaseBlock.astro +0 -34
package/components/Motion.astro +0 -77
package/components/Stack.astro +0 -31

package/components/DialogTrigger.astro CHANGED Viewed

@@ -1,32 +1,32 @@
----
-interface Props {
-  dialogId: string;
-  openableKey?: string;
-  as?: string;
-  callToAction?: string;
-  class?: string;
-  className?: string;
-}
-const {
-  dialogId,
-  openableKey,
-  as: _as,
-  callToAction,
-  class: _class,
-  className,
-  ...rest
-} = Astro.props;
-const resolvedDialogId = dialogId || openableKey;
----
-<button
-  type="button"
-  data-modal-open={resolvedDialogId}
-  data-call-to-action={callToAction}
-  class:list={[className, _class]}
-  {...rest}
->
-  <slot />
-</button>
+---
+interface Props {
+  dialogId: string;
+  openableKey?: string;
+  as?: string;
+  callToAction?: string;
+  class?: string;
+  className?: string;
+}
+const {
+  dialogId,
+  openableKey,
+  as: _as,
+  callToAction,
+  class: _class,
+  className,
+  ...rest
+} = Astro.props;
+const resolvedDialogId = dialogId || openableKey;
+---
+<button
+  type="button"
+  data-modal-open={resolvedDialogId}
+  data-call-to-action={callToAction}
+  class:list={[className, _class]}
+  {...rest}
+>
+  <slot />
+</button>

package/components/Document.astro CHANGED Viewed

@@ -1,225 +1,240 @@
----
-import "aos/dist/aos.css";
-import { PageType, type PageMeta } from "@rxdrag/rxcms-models";
-import type { Locals } from "@rxdrag/website-lib-core";
-import Meta from "@rxdrag/website-lib/components/Meta.astro";
-import { Entify } from "@rxdrag/website-lib-core";
-import { ClientRouter } from "astro:transitions";
-const { env, imageSizes } = Astro.locals as Locals;
-const rx = Entify.getInstance(env, imageSizes);
-// 文档壳：只负责 <html>/<head>/<body> 结构，不包含 Header/Footer 等站点布局。
-interface Props {
-  // html 的 lang 属性
-  lang?: string;
-  // SEO Meta（由上层 Layout/页面传入）
-  meta?: PageMeta;
-  // 页面标题（由 Meta 组件消费）
-  title?: string;
-  // 兼容 class / className 两种写法，最终合并到 body 上
-  class?: string;
-  className?: string;
-}
-const {
-  lang = "en",
-  meta,
-  title,
-  class: className = "scroll-smooth",
-  className: className2,
-  // 其余 props 透传到 body（例如 data-* 属性等）
-  ...rest
-} = Astro.props;
-const bodyAttrs = {
-  "data-aos-easing": "ease-out-cubic",
-  "data-aos-duration": "800",
-  "data-aos-delay": "0",
-  "data-aos-offset": "50",
-  "data-aos-once": "true",
-  ...rest,
-};
-//TODO: 添加meta获取逻辑，有可能需要重构后端数据结构，现在看来，只有动态内容需要获取meta，其它页面可以传入
-let resolvedMeta: PageMeta | undefined = meta;
-let resolvedTitle: string | undefined = title;
-// 仅在未传入 meta/title 时，针对动态详情页兜底拉取
-if (!resolvedMeta || !resolvedTitle) {
-  try {
-    const pathname = Astro.url?.pathname || "";
-    const slug =
-      typeof Astro.params?.slug === "string" ? Astro.params.slug : undefined;
-    const id =
-      typeof Astro.params?.id === "string" ? Astro.params.id : undefined;
-    if (slug && pathname.startsWith("/posts/categories/")) {
-      const category = await rx.getPostCategoryBySlug(slug);
-      const page = await rx.getPageByType(PageType.PostList);
-      resolvedTitle = resolvedTitle ?? category?.name ?? "Blog";
-      resolvedMeta = resolvedMeta ?? page?.meta;
-    } else if (slug && pathname.startsWith("/products/categories/")) {
-      const category = await rx.getProductCategoryBySlug(slug);
-      const page = await rx.getPageByType(PageType.ProductList);
-      resolvedTitle = resolvedTitle ?? category?.name ?? "Products";
-      resolvedMeta = resolvedMeta ?? page?.meta;
-    } else if (id && pathname.startsWith("/profiles/")) {
-      const user = await rx.getOneUser(id);
-      const page = await rx.getPageByType(PageType.Profile);
-      resolvedTitle = resolvedTitle ?? user?.name ?? "Profile";
-      resolvedMeta = resolvedMeta ?? page?.meta;
-    } else if (slug && pathname.startsWith("/posts/")) {
-      const post = await rx.getPostBySlug(slug, { width: 1200, height: 600 });
-      resolvedTitle = resolvedTitle ?? post?.title;
-      resolvedMeta = resolvedMeta ?? post?.meta;
-    } else if (slug && pathname.startsWith("/products/")) {
-      const product = await rx.getProductBySlug(slug, {
-        width: 800,
-        height: 800,
-      });
-      resolvedTitle = resolvedTitle ?? product?.title;
-      resolvedMeta = resolvedMeta ?? product?.meta;
-    }
-  } catch (e) {
-    console.log("[Document] resolve meta failed:", e);
-  }
-}
----
-<!doctype html>
-<html lang={lang} class="aos-preload">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, user-scalable=yes"
-    />
-    <meta name="generator" content={Astro.generator} />
-    <link rel="sitemap" href="/sitemap-index.xml" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <!-- 给上层 Layout/页面注入自定义 head 内容（预加载、脚本、样式等） -->
-    <!-- 预连接 -->
-    <link
-      rel="preconnect"
-      href="https://customer-amj1dt4tnge8w6ji.cloudflarestream.com"
-      crossorigin
-    />
-    <script>
-      const w = window as any;
-      const state =
-        w.__aos_state__ ||
-        (w.__aos_state__ = { inited: false, loading: null, aos: null });
-      const el = document.documentElement;
-      const raf = () =>
-        new Promise((resolve) =>
-          requestAnimationFrame(() => resolve(undefined)),
-        );
-      const ensureAos = async () => {
-        if (state.aos) return state.aos;
-        if (!state.loading) {
-          state.loading = import("aos").then((m) => {
-            state.aos = m.default;
-            return state.aos;
-          });
-        }
-        return state.loading;
-      };
-      const bootOrRefresh = async () => {
-        if (
-          window.matchMedia &&
-          window.matchMedia("(prefers-reduced-motion: reduce)").matches
-        ) {
-          el.classList.add("aos-ready");
-          el.classList.remove("aos-preload");
-          return;
-        }
-        if (!document.querySelector("[data-aos]")) {
-          el.classList.add("aos-ready");
-          el.classList.remove("aos-preload");
-          return;
-        }
-        el.classList.add("aos-preload");
-        el.classList.remove("aos-ready");
-        const AOS = await ensureAos();
-        if (!state.inited) {
-          state.inited = true;
-          AOS.init({
-            duration: 800,
-            easing: "ease-out-cubic",
-            once: true,
-            offset: 50,
-          });
-        }
-        await raf();
-        await raf();
-        AOS.refresh();
-        el.classList.add("aos-ready");
-        el.classList.remove("aos-preload");
-      };
-      const boot = () => {
-        bootOrRefresh();
-      };
-      if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", boot, { once: true });
-      } else {
-        boot();
-      }
-      document.addEventListener("astro:page-load", boot);
-      document.addEventListener("astro:after-swap", boot);
-    </script>
-    <ClientRouter />
-    <!-- Consent default (Google) -->
-    <script is:inline>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-      gtag("consent", "default", {
-        ad_storage: "denied",
-        analytics_storage: "denied",
-      });
-    </script>
-    <slot name="head" />
-    <Meta title={resolvedTitle} content={resolvedMeta} />
-    <style>
-      html.aos-preload [data-aos] {
-        opacity: 1 !important;
-        transform: none !important;
-        transition: none !important;
-      }
-    </style>
-  </head>
-  <!-- rest 会被展开到 body 上，方便上层控制 data-* 等属性 -->
-  <body class:list={[className, className2]} {...bodyAttrs}>
-    <slot />
-  </body>
-</html>
-<style>
-  html,
-  body {
-    margin: 0;
-    width: 100%;
-    height: 100%;
-  }
-  html {
-    scroll-behavior: smooth;
-  }
-</style>
+---
+import "aos/dist/aos.css";
+import { PageType, type PageMeta } from "@rxdrag/rxcms-models";
+import type { Locals } from "@rxdrag/website-lib-core";
+import Meta from "@rxdrag/website-lib/components/Meta.astro";
+import { Entify } from "@rxdrag/website-lib-core";
+import { ClientRouter } from "astro:transitions";
+const { env, imageSizes } = Astro.locals as Locals;
+const rx = Entify.getInstance(env, imageSizes);
+// 文档壳：只负责 <html>/<head>/<body> 结构，不包含 Header/Footer 等站点布局。
+interface Props {
+  // html 的 lang 属性
+  lang?: string;
+  // SEO Meta（由上层 Layout/页面传入）
+  meta?: PageMeta;
+  // 页面标题（由 Meta 组件消费）
+  title?: string;
+  // JSON-LD 结构化数据，支持单个或数组
+  jsonLd?: Record<string, unknown> | Record<string, unknown>[];
+  // 兼容 class / className 两种写法，最终合并到 body 上
+  class?: string;
+  className?: string;
+}
+const {
+  lang = "en",
+  meta,
+  title,
+  jsonLd,
+  class: className = "scroll-smooth",
+  className: className2,
+  // 其余 props 透传到 body（例如 data-* 属性等）
+  ...rest
+} = Astro.props;
+const jsonLdItems = jsonLd
+  ? Array.isArray(jsonLd) ? jsonLd : [jsonLd]
+  : [];
+const bodyAttrs = {
+  "data-aos-easing": "ease-out-cubic",
+  "data-aos-duration": "800",
+  "data-aos-delay": "0",
+  "data-aos-offset": "50",
+  "data-aos-once": "true",
+  ...rest,
+};
+//TODO: 添加meta获取逻辑，有可能需要重构后端数据结构，现在看来，只有动态内容需要获取meta，其它页面可以传入
+let resolvedMeta: PageMeta | undefined = meta;
+let resolvedTitle: string | undefined = title;
+// 仅在未传入 meta/title 时，针对动态详情页兜底拉取
+if (!resolvedMeta || !resolvedTitle) {
+  try {
+    const pathname = Astro.url?.pathname || "";
+    const slug =
+      typeof Astro.params?.slug === "string" ? Astro.params.slug : undefined;
+    const id =
+      typeof Astro.params?.id === "string" ? Astro.params.id : undefined;
+    if (slug && pathname.startsWith("/posts/categories/")) {
+      const category = await rx.getPostCategoryBySlug(slug);
+      const page = await rx.getPageByType(PageType.PostList);
+      resolvedTitle = resolvedTitle ?? category?.name ?? "Blog";
+      resolvedMeta = resolvedMeta ?? page?.meta;
+    } else if (slug && pathname.startsWith("/products/categories/")) {
+      const category = await rx.getProductCategoryBySlug(slug);
+      const page = await rx.getPageByType(PageType.ProductList);
+      resolvedTitle = resolvedTitle ?? category?.name ?? "Products";
+      resolvedMeta = resolvedMeta ?? page?.meta;
+    } else if (id && pathname.startsWith("/profiles/")) {
+      const user = await rx.getOneUser(id);
+      const page = await rx.getPageByType(PageType.Profile);
+      resolvedTitle = resolvedTitle ?? user?.name ?? "Profile";
+      resolvedMeta = resolvedMeta ?? page?.meta;
+    } else if (slug && pathname.startsWith("/posts/")) {
+      const post = await rx.getPostBySlug(slug, { width: 1200, height: 600 });
+      resolvedTitle = resolvedTitle ?? post?.title;
+      resolvedMeta = resolvedMeta ?? post?.meta;
+    } else if (slug && pathname.startsWith("/products/")) {
+      const product = await rx.getProductBySlug(slug, {
+        width: 800,
+        height: 800,
+      });
+      resolvedTitle = resolvedTitle ?? product?.title;
+      resolvedMeta = resolvedMeta ?? product?.meta;
+    }
+  } catch (e) {
+    console.log("[Document] resolve meta failed:", e);
+  }
+}
+---
+<!doctype html>
+<html lang={lang} class="aos-preload">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, user-scalable=yes"
+    />
+    <meta name="generator" content={Astro.generator} />
+    <link rel="sitemap" href="/sitemap-index.xml" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <!-- 给上层 Layout/页面注入自定义 head 内容（预加载、脚本、样式等） -->
+    <!-- 预连接 -->
+    <link
+      rel="preconnect"
+      href="https://customer-amj1dt4tnge8w6ji.cloudflarestream.com"
+      crossorigin
+    />
+    <script>
+      const w = window as any;
+      const state =
+        w.__aos_state__ ||
+        (w.__aos_state__ = { inited: false, loading: null, aos: null });
+      const el = document.documentElement;
+      const raf = () =>
+        new Promise((resolve) =>
+          requestAnimationFrame(() => resolve(undefined)),
+        );
+      const ensureAos = async () => {
+        if (state.aos) return state.aos;
+        if (!state.loading) {
+          state.loading = import("aos").then((m) => {
+            state.aos = m.default;
+            return state.aos;
+          });
+        }
+        return state.loading;
+      };
+      const bootOrRefresh = async () => {
+        if (
+          window.matchMedia &&
+          window.matchMedia("(prefers-reduced-motion: reduce)").matches
+        ) {
+          el.classList.add("aos-ready");
+          el.classList.remove("aos-preload");
+          return;
+        }
+        if (!document.querySelector("[data-aos]")) {
+          el.classList.add("aos-ready");
+          el.classList.remove("aos-preload");
+          return;
+        }
+        el.classList.add("aos-preload");
+        el.classList.remove("aos-ready");
+        const AOS = await ensureAos();
+        if (!state.inited) {
+          state.inited = true;
+          AOS.init({
+            duration: 800,
+            easing: "ease-out-cubic",
+            once: true,
+            offset: 50,
+          });
+        }
+        await raf();
+        await raf();
+        AOS.refresh();
+        el.classList.add("aos-ready");
+        el.classList.remove("aos-preload");
+      };
+      const boot = () => {
+        bootOrRefresh();
+      };
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
+      document.addEventListener("astro:page-load", boot);
+      document.addEventListener("astro:after-swap", boot);
+    </script>
+    <ClientRouter />
+    <!-- Consent default (Google) -->
+    <script is:inline>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("consent", "default", {
+        ad_storage: "denied",
+        analytics_storage: "denied",
+      });
+    </script>
+    <slot name="head" />
+    <Meta title={resolvedTitle} content={resolvedMeta} />
+    {jsonLdItems.map((item) => (
+      <script type="application/ld+json" set:html={JSON.stringify(item)} />
+    ))}
+    <style>
+      html.aos-preload [data-aos] {
+        opacity: 1 !important;
+        transform: none !important;
+        transition: none !important;
+      }
+    </style>
+  </head>
+  <!-- rest 会被展开到 body 上，方便上层控制 data-* 等属性 -->
+  <body class:list={[className, className2]} {...bodyAttrs}>
+    <slot />
+  </body>
+</html>
+<style>
+  html,
+  body {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+  }
+  html {
+    scroll-behavior: smooth;
+    scrollbar-gutter: stable;
+  }
+  body {
+    scrollbar-gutter: stable;
+  }
+</style>

package/components/Frame.astro ADDED Viewed

@@ -0,0 +1,32 @@
+---
+import BackgroundGroup from "./BackgroundGroup.astro";
+import type { FrameProps } from "@rxdrag/website-lib-core";
+/**
+ * Frame — 设计系统基础原子组件
+ *
+ * 规范：被冻结（Frozen）的设计器原子组件
+ * - 对外接口与 DOM 结构应保持稳定，不随业务随意增删/调整
+ * - 允许通过原生属性透传（...rest）注入 id/style/data-*（如 data-aos-*）等通用能力
+ * - class 用于提供组件的默认类名；class/className 由使用方叠加
+ * - backgrounds 用于渲染 BackgroundGroup
+ * Frame裁剪用 如果是虚化背景，需要单独裁剪
+ */
+export interface Props extends FrameProps {
+  tag?: string;
+}
+const {
+  tag: Tag = "div",
+  class: classAttr,
+  className,
+  backgrounds,
+  ...rest
+} = Astro.props;
+---
+<Tag class:list={["relative isolate",className, classAttr]} {...rest}>
+  <BackgroundGroup backgrounds={backgrounds} />
+  <slot />
+</Tag>