@rxdrag/website-lib 0.0.5 → 0.0.8

package/src/components/Meta.astro

@@ -0,0 +1,66 @@
+---
+import { 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,
+  xTitle,
+  xDescription,
+  xUrl,
+  // 其他属性
+  ogImage,
+} = content || {};
+
+const title = propTitle || seoTitle || "YiZhanFei";
+
+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={xTitle || ogTitle || title} />
+<meta
+  property="twitter:description"
+  content={xDescription || ogDescription || seoDescription}
+/>
+<meta property="twitter:image" content={imageUrl} />
+{xSite && <meta property="twitter:site" content={xSite} />}

package/src/components/Modal.astro

@@ -0,0 +1,69 @@
+---
+import type { CSSProperties } from "react";
+import Popup from "./Popup.astro";
+import { DATA_POPUP_ROLE, PopupRole } from "@rxdrag/website-lib-core";
+import type { IMotionProps } from "./MotionTypes";
+
+interface Props extends IMotionProps {
+  popupKey: string;
+  class?: string;
+  style?: string | CSSProperties;
+}
+
+const roleProps = {
+  [DATA_POPUP_ROLE]: PopupRole.ModalContainer,
+};
+---
+
+<Popup {...roleProps} {...Astro.props}>
+  <slot />
+</Popup>
+
+<script>
+  import {
+    initModal,
+    initModalCloser,
+    onEverySwap,
+    onPageLoaded,
+  } from "@rxdrag/website-lib-core";
+  import {
+    DATA_POPUP,
+    DATA_POPUP_ROLE,
+    PopupRole,
+  } from "@rxdrag/website-lib-core";
+
+  const initModals = () => {
+    // 获取所有的 Modal 实例
+    const popups = document.querySelectorAll(`[${DATA_POPUP}]`);
+    popups.forEach((popup) => {
+      const popupKey = popup.getAttribute(DATA_POPUP);
+      //处理鼠标交互事件
+      if (popupKey && popup) {
+        if (popup.getAttribute(DATA_POPUP_ROLE) === PopupRole.ModalTrigger) {
+          initModal(popupKey, popup as HTMLElement);
+        }
+      }
+      //获取所有 ModalCloser 实例，并处理点击事件
+      //TODO：未处理嵌套跟Modal外部关闭的情况
+      const closers = popup.querySelectorAll(
+        `[${DATA_POPUP_ROLE}="${PopupRole.ModalCloser}"]`
+      );
+
+      closers.forEach((closer) => {
+        // 使用initModalCloser函数处理关闭按钮事件
+        if (popupKey) {
+          initModalCloser(popupKey, closer as HTMLElement);
+        }
+      });
+    });
+  };
+
+  // 在页面加载和每次页面转场后都初始化Modal
+  onPageLoaded(() => {
+    initModals();
+  });
+
+  onEverySwap(() => {
+    initModals();
+  });
+</script>

package/src/components/ModalCloser.astro

@@ -0,0 +1,22 @@
+---
+import { CSSProperties } from "react";
+import { DATA_POPUP_ROLE, PopupRole } from "@rxdrag/website-lib-core";
+import Popup from "./Popup.astro";
+import { IMotionProps } from "./MotionTypes";
+
+interface Props extends IMotionProps {
+  popupKey?: string;
+  class?: string;
+  style?: string | CSSProperties;
+}
+
+const roleProps = {
+  [DATA_POPUP_ROLE]: PopupRole.ModalCloser,
+};
+---
+
+<Popup {...roleProps} {...Astro.props}>
+  <slot />
+</Popup>
+
+<script></script>

package/src/components/ModalPanel.astro

@@ -0,0 +1,22 @@
+---
+import { CSSProperties } from "react";
+import { DATA_POPUP_ROLE, PopupRole } from "@rxdrag/website-lib-core";
+import Popup from "./Popup.astro";
+import { IMotionProps } from "./MotionTypes";
+
+interface Props extends IMotionProps {
+  popupKey?: string;
+  class?: string;
+  style?: string | CSSProperties;
+}
+
+const roleProps = {
+  [DATA_POPUP_ROLE]: PopupRole.ModalPanel,
+};
+---
+
+<Popup {...roleProps} {...Astro.props}>
+  <slot />
+</Popup>
+
+<script></script>

package/src/components/ModalTrigger.astro

@@ -0,0 +1,30 @@
+---
+import { CSSProperties } from "react";
+import {
+  DATA_POPUP_CTA,
+  DATA_POPUP_ROLE,
+  PopupRole,
+} from "@rxdrag/website-lib-core";
+import Popup from "./Popup.astro";
+import { HTMLElementsWithChildren, IMotionProps } from "./MotionTypes";
+
+interface Props extends IMotionProps {
+  popupKey: string;
+  callToAction?: string;
+  as?: HTMLElementsWithChildren;
+  class?: string;
+  style?: string | CSSProperties;
+}
+
+const { callToAction, ...rest } = Astro.props;
+const roleProps = {
+  [DATA_POPUP_CTA]: callToAction,
+  [DATA_POPUP_ROLE]: PopupRole.ModalTrigger,
+};
+---
+
+<Popup {...roleProps} {...rest}>
+  <slot />
+</Popup>
+
+<script></script>

package/src/components/Motion.astro

@@ -0,0 +1,333 @@
+---
+import {
+  DATA_MOTION_ANIMATE,
+  DATA_MOTION_CLOSE,
+  DATA_MOTION_HOVER,
+  DATA_MOTION_INVIEW,
+  DATA_MOTION_OPEN,
+  DATA_MOTION_SCROLL,
+  DATA_MOTION_TAP,
+} from "@rxdrag/website-lib-core";
+import { cssPropertyUnits } from "./MotionTypes";
+import type { HTMLElementsWithChildren, IMotionProps } from "./MotionTypes";
+import { DATA_MOTION_FLIP, DATA_MOTION_SELECTION } from "./TabsLogic";
+
+interface Props extends IMotionProps {
+  as?: HTMLElementsWithChildren;
+  class?: string;
+  style?: string | Record<string, string | number>;
+  [key: string]: any;
+}
+
+const {
+  as = "div",
+  animate,
+  whileHover,
+  whileInView,
+  whileTap,
+  whileScroll,
+  whileOpen,
+  whileClose,
+  whileSelection,
+  flipTransition,
+  class: className,
+  style,
+  ...rest
+} = Astro.props;
+
+const Element = as;
+const dataWhileHover = JSON.stringify(whileHover);
+const dataWhileInView = JSON.stringify(whileInView);
+const dataWhileTap = JSON.stringify(whileTap);
+const dataWhileScroll = JSON.stringify(whileScroll);
+const dataWhileOpen = JSON.stringify(whileOpen);
+const dataWhileClose = JSON.stringify(whileClose);
+const dataWhileSelection = JSON.stringify(whileSelection);
+const motions: Record<string, string> = {
+  [DATA_MOTION_ANIMATE]: JSON.stringify(animate),
+  [DATA_MOTION_HOVER]: dataWhileHover,
+  [DATA_MOTION_INVIEW]: dataWhileInView,
+  [DATA_MOTION_TAP]: dataWhileTap,
+  [DATA_MOTION_SCROLL]: dataWhileScroll,
+  [DATA_MOTION_OPEN]: dataWhileOpen,
+  [DATA_MOTION_CLOSE]: dataWhileClose,
+  [DATA_MOTION_SELECTION]: dataWhileSelection,
+  [DATA_MOTION_FLIP]: JSON.stringify(flipTransition),
+};
+
+const props = { ...motions, ...rest };
+const mergedStyle = { ...style };
+
+if (animate?.keyframes) {
+  // 从keyframes中提取初始值
+  const initialValues = Object.entries(animate.keyframes).reduce(
+    (acc, [key, value]) => {
+      // 如果值是数组，取第一个值作为初始值
+      const initialValue = Array.isArray(value) ? value[0] : value;
+
+      if (key in cssPropertyUnits) {
+        const unit = cssPropertyUnits[key as keyof typeof cssPropertyUnits];
+        if (unit === "transform") {
+          acc.transform = (acc.transform || "") as string;
+          acc.transform += ` translate${key.toUpperCase()}(${typeof initialValue === "number" ? `${initialValue}px` : initialValue})`;
+        } else if (typeof initialValue === "number") {
+          acc[key] = `${initialValue}${unit}`;
+        } else {
+          acc[key] = initialValue;
+        }
+      } else {
+        // 对于未定义的属性，保持原样
+        acc[key] = initialValue.toString();
+      }
+      return acc;
+    },
+    {} as Record<string, string>
+  );
+
+  Object.assign(mergedStyle, initialValues);
+}
+
+// 将 styleProp 的定义移到条件块外部，确保它始终被定义
+const styleProp =
+  Object.keys(mergedStyle).length > 0
+    ? {
+        style: mergedStyle,
+      }
+    : undefined;
+---
+
+<Element class={className} {...props} {...styleProp}>
+  <slot />
+</Element>
+
+<script>
+  import { animate, inView } from "motion";
+
+  import {
+    DATA_MOTION_ANIMATE,
+    DATA_MOTION_CLOSE,
+    DATA_MOTION_INVIEW,
+    DATA_MOTION_OPEN,
+    DATA_MOTION_TAP,
+    onEverySwap,
+    onPageLoaded,
+    onSelected,
+    onUnSelected,
+  } from "@rxdrag/website-lib-core";
+  import type {
+    DualAnimation,
+    SelectionEvent,
+    SimpleAnimation,
+    ViewportAnimation,
+  } from "@rxdrag/website-lib-core";
+  import {
+    getPopupContainer,
+    normalizeSimpleAnimation,
+    normalizeDualAnimation,
+    onPopupOpen,
+  } from "@rxdrag/website-lib-core";
+  import { DATA_MOTION_SELECTION, DATA_TABS } from "./TabsLogic";
+
+  // 初始化动画
+  function initAnimation() {
+    // 查找所有带有 data-motion-animate 属性的元素
+    const elements = document.querySelectorAll(`[${DATA_MOTION_ANIMATE}]`);
+    elements.forEach((element) => {
+      if (element instanceof HTMLElement) {
+        if (element.dataset.motionAnimate) {
+          const animation = normalizeSimpleAnimation(
+            JSON.parse(element.dataset.motionAnimate) as
+              | SimpleAnimation
+              | undefined
+          );
+          if (animation?.keyframes) {
+            animate(element, animation.keyframes, animation.transition);
+          }
+        }
+      } else {
+        console.log("initAnimation: Not an HTMLElement somehow?");
+      }
+    });
+  }
+
+  function initPopups() {
+    onPopupOpen((event) => {
+      const openResponseElements = document.querySelectorAll(
+        `[${DATA_MOTION_OPEN}]`
+      );
+      const containerElement = getPopupContainer(event.key);
+
+      //响应open事件
+      openResponseElements.forEach((element) => {
+        if (
+          element instanceof HTMLElement &&
+          containerElement?.contains(element)
+        ) {
+          if (element.dataset.motionOpen) {
+            const animation = normalizeSimpleAnimation(
+              JSON.parse(element.dataset.motionOpen) as
+                | SimpleAnimation
+                | undefined
+            );
+            if (animation?.keyframes) {
+              animate(element, animation.keyframes, animation.transition);
+            }
+          }
+        }
+      });
+
+      return () => {
+        const closeResponseElements = document.querySelectorAll(
+          `[${DATA_MOTION_CLOSE}]`
+        );
+
+        //响应close事件
+        closeResponseElements.forEach((element) => {
+          if (element instanceof HTMLElement) {
+            if (
+              element.dataset.motionClose &&
+              containerElement?.contains(element)
+            ) {
+              const animation = normalizeSimpleAnimation(
+                JSON.parse(element.dataset.motionClose) as
+                  | SimpleAnimation
+                  | undefined
+              );
+              if (animation && animation.keyframes) {
+                animate(element, animation.keyframes, animation.transition);
+              }
+            }
+          } else {
+            console.log("===Not an HTMLElement somehow?");
+          }
+        });
+      };
+    });
+  }
+
+  // 初始化AOS(Animate On Scroll)动画
+  function initAos() {
+    //查找所有的data-motion-inview元素
+    const inviewElements = document.querySelectorAll(`[${DATA_MOTION_INVIEW}]`);
+    inviewElements.forEach((element) => {
+      if (element instanceof HTMLElement && element.dataset.motionInview) {
+        const animation = normalizeDualAnimation(
+          JSON.parse(element.dataset.motionInview) as
+            | ViewportAnimation
+            | undefined
+        ) as ViewportAnimation;
+
+        inView(element, (target) => {
+          const newElement = target as HTMLElement;
+          const needAction =
+            (!newElement.dataset.motionViewportEnter && animation.once) ||
+            !animation.once;
+
+          if (animation?.in?.keyframes && needAction) {
+            newElement.dataset.motionViewportEnter = "true";
+            animate(target, animation.in.keyframes, animation.in.transition);
+          }
+          // 返回清理函数
+          return () => {
+            // 如果需要在元素离开视图时执行某些操作
+            if (animation?.out?.keyframes && needAction && !animation.once) {
+              animate(
+                target,
+                animation.out.keyframes,
+                animation.out.transition
+              );
+            }
+          };
+        });
+      }
+    });
+  }
+
+  //TODO 初始化Taps
+  function initTaps() {
+    //查找所有的data-motion-tap元素
+    const tapElements = document.querySelectorAll(`[${DATA_MOTION_TAP}]`);
+  }
+
+  //初始化选项卡Selection动画
+  function initTabsMotion() {
+    onSelected((event: SelectionEvent) => {
+      //查找对应的data-motion-selection元素
+      const tabsElement = document.querySelector(`[${DATA_TABS}=${event.key}]`);
+
+      if (tabsElement instanceof HTMLElement) {
+        //该容器下，所有带有选中动画的元素
+        tabsElement
+          .querySelectorAll(`[${DATA_MOTION_SELECTION}]`)
+          .forEach((element) => {
+            const motions = (element as HTMLElement).dataset.motionSelection;
+            if (motions) {
+              const animation = normalizeDualAnimation(
+                JSON.parse(motions) as DualAnimation | undefined
+              );
+              if (animation?.in?.keyframes) {
+                animate(
+                  element,
+                  animation.in.keyframes,
+                  animation.in.transition
+                );
+              }
+            }
+          });
+      }
+    });
+
+    onUnSelected((event: SelectionEvent) => {
+      //查找对应的data-motion-selection元素
+      const tabsElement = document.querySelector(`[${DATA_TABS}=${event.key}]`);
+
+      if (tabsElement instanceof HTMLElement) {
+        //该容器下，所有带有选中动画的元素
+        tabsElement
+          .querySelectorAll(`[${DATA_MOTION_SELECTION}]`)
+          .forEach((element) => {
+            const motions = (element as HTMLElement).dataset.motionSelection;
+            if (motions) {
+              const animation = normalizeDualAnimation(
+                JSON.parse(motions) as DualAnimation | undefined
+              );
+              if (animation?.out?.keyframes) {
+                animate(
+                  element,
+                  animation.out.keyframes,
+                  animation.out.transition
+                );
+              }
+            }
+          });
+      }
+    });
+  }
+
+  const initMotion = () => {
+    initAnimation();
+    initPopups();
+    initAos();
+    initTaps();
+    initTabsMotion();
+  };
+
+  onEverySwap(() => {
+    initMotion();
+  });
+  onPageLoaded(() => {
+    initMotion();
+  });
+
+  // if (!(window as any).__motionInitialized) {
+  //   (window as any).__motionInitialized = true;
+  //   // 当DOM加载完成时初始化动画
+  //   document.addEventListener("astro:after-swap", () => {
+  //     initAnimation();
+  //     initPopups();
+  //     initAos();
+  //     initTaps();
+  //     initTabsMotion();
+  //   });
+  // }
+</script>

package/src/components/MotionTypes.ts

@@ -0,0 +1,71 @@
+import type { SimpleAnimation, HoverAnimation, ViewportAnimation, TapAnimation, ScrollAnimation, SelectionAnimation } from "@rxdrag/website-lib-core";
+import type { AnimationOptions } from "motion";
+
+// 排除不能包含子元素的标签
+export type ExcludedElements =
+  | "img"
+  | "input"
+  | "br"
+  | "hr"
+  | "area"
+  | "base"
+  | "col"
+  | "embed"
+  | "link"
+  | "meta"
+  | "param"
+  | "source"
+  | "track"
+  | "wbr";
+
+export type HTMLElementsWithChildren = Exclude<
+  keyof HTMLElementTagNameMap,
+  ExcludedElements
+>;
+
+// CSS 属性的单位处理映射
+export const cssPropertyUnits = {
+  // 无单位的属性
+  opacity: "",
+  scale: "",
+  fontWeight: "",
+  lineHeight: "",
+  zIndex: "",
+  flex: "",
+  flexGrow: "",
+  flexShrink: "",
+  order: "",
+  // 使用px的属性
+  width: "px",
+  height: "px",
+  minWidth: "px",
+  minHeight: "px",
+  maxWidth: "px",
+  maxHeight: "px",
+  padding: "px",
+  margin: "px",
+  top: "px",
+  right: "px",
+  bottom: "px",
+  left: "px",
+  gap: "px",
+  columnGap: "px",
+  rowGap: "px",
+  // transform 相关的属性
+  x: "transform",
+  y: "transform",
+  z: "transform",
+} as const;
+
+export interface IMotionProps {
+  animate?: SimpleAnimation;
+  whileHover?: HoverAnimation;
+  whileInView?: ViewportAnimation;
+  whileTap?: TapAnimation;
+  whileScroll?: ScrollAnimation;
+  whileOpen?: SimpleAnimation;
+  whileClose?: SimpleAnimation;
+  whileSelection?: SelectionAnimation;
+  // 在flip的父元素中使用
+  flipTransition?: AnimationOptions;
+}

package/src/components/Popover.astro

@@ -0,0 +1,57 @@
+---
+import { CSSProperties } from "react";
+import { DATA_POPUP_ROLE, PopupRole } from "@rxdrag/website-lib-core";
+import Popup from "./Popup.astro";
+import { IMotionProps } from "./MotionTypes";
+
+interface Props extends IMotionProps {
+  popupKey: string;
+  class?: string;
+  style?: string | CSSProperties;
+}
+
+const roleProps = {
+  [DATA_POPUP_ROLE]: PopupRole.PopoverContainer,
+};
+---
+
+<Popup {...roleProps} {...Astro.props}>
+  <slot />
+</Popup>
+
+<script>
+  import {
+    initPopover,
+    onEverySwap,
+    onPageLoaded,
+  } from "@rxdrag/website-lib-core";
+  import {
+    DATA_POPUP,
+    DATA_POPUP_ROLE,
+    PopupRole,
+  } from "@rxdrag/website-lib-core";
+
+  const initPopoverActions = () => {
+    // 获取所有的 Popover 实例
+    const popups = document.querySelectorAll(`[${DATA_POPUP}]`);
+
+    popups.forEach((popup) => {
+      const popupKey = popup.getAttribute(DATA_POPUP);
+      //处理鼠标交互事件
+      if (popupKey && popup) {
+        if (
+          popup.getAttribute(DATA_POPUP_ROLE) === PopupRole.PopoverContainer
+        ) {
+          initPopover(popupKey, popup as HTMLElement);
+        }
+      }
+    });
+  };
+
+  onPageLoaded(() => {
+    initPopoverActions();
+  });
+  onEverySwap(() => {
+    initPopoverActions();
+  });
+</script>

package/src/components/Popup.astro

@@ -0,0 +1,19 @@
+---
+import { DATA_POPUP } from "@rxdrag/website-lib-core";
+import Motion from "./Motion.astro";
+import { IMotionProps } from "./MotionTypes";
+
+interface Props extends IMotionProps {
+  popupKey?: string;
+}
+const { popupKey, ...rest } = Astro.props;
+const popupProps = {
+  [DATA_POPUP]: popupKey,
+};
+---
+
+<Motion {...popupProps} {...rest}>
+  <slot />
+</Motion>
+
+<script></script>