@rxdrag/website-lib-core 0.0.7 → 0.0.8

package/src/react/components/EnquiryForm/index.tsx

@@ -1,334 +0,0 @@
-import { useEffect, useState } from "react";
-import { Input } from "./Input";
-import { Submit } from "./Submit";
-import { Textarea } from "./Textarea";
-import { onPopupClose, onPopupOpen } from "../../../scripts";
-import { DATA_POPUP_CTA } from "../../../scripts/consts";
-import clsx from "clsx";
-
-/**
- * 简单的加密函数，用于生成防机器人的加密字段
- * @param value 需要加密的值
- * @returns 加密后的字符串
- */
-const encrypt = (value: string, formSalt: string): string => {
-  // 获取当前时间戳，精确到分钟级别（防止频繁变化）
-  const timestamp = Math.floor(Date.now() / (60 * 1000));
-
-  // 将时间戳与盐值和输入值组合
-  const dataToEncrypt = `${formSalt}:${timestamp}:${value}`;
-
-  // 使用简单的哈希算法
-  let hash = 0;
-  for (let i = 0; i < dataToEncrypt.length; i++) {
-    const char = dataToEncrypt.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
-    hash = hash & hash; // 转换为32位整数
-  }
-
-  // 转换为16进制字符串并添加时间戳信息
-  return `${hash.toString(16)}_${timestamp}`;
-};
-
-/**
- * 验证加密字段是否有效
- * @param encryptedValue 加密后的字符串
- * @param originalValue 原始值（如蜜罐字段的值）
- * @param maxAgeMinutes 最大有效时间（分钟）
- * @returns 是否有效
- */
-export const verifyEncryption = (
-  formSalt: string,
-  encryptedValue: string = "",
-  originalValue: string = "",
-  maxAgeMinutes: number = 30
-): boolean => {
-  // 解析加密值
-  const parts = encryptedValue.split("_");
-  if (parts.length !== 2) {
-    return false; // 格式不正确
-  }
-
-  const [hashString, timestampString] = parts;
-  const timestamp = parseInt(timestampString, 10);
-
-  // 验证时间戳是否在有效期内
-  const currentTimestamp = Math.floor(Date.now() / (60 * 1000));
-  if (isNaN(timestamp) || currentTimestamp - timestamp > maxAgeMinutes) {
-    return false; // 时间戳无效或已过期
-  }
-
-  // 重新计算哈希值
-  const dataToEncrypt = `${formSalt}:${timestamp}:${originalValue}`;
-  let hash = 0;
-  for (let i = 0; i < dataToEncrypt.length; i++) {
-    const char = dataToEncrypt.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
-    hash = hash & hash;
-  }
-
-  // 比较哈希值
-  return hashString === hash.toString(16);
-};
-
-export interface QuoteRequest {
-  name?: string;
-  email?: string;
-  company?: string;
-  message?: string;
-  fromCta?: string;
-  // 蜜罐字段，用于检测机器人
-  phone: string;
-  // 一个加密字段，用于防机器人，点击时附加一个加密的字符串
-  encryptedField?: string;
-}
-interface FormErrors {
-  name?: string;
-  email?: string;
-  message?: string;
-}
-
-export function EnquiryForm(props: {
-  submitAlign?: "left" | "center" | "right";
-  actionUrl?: string;
-  formSalt: string;
-}) {
-  const {
-    submitAlign = "right",
-    actionUrl = "/api/ask-for-quote",
-    formSalt,
-  } = props;
-  const [formData, setFormData] = useState<QuoteRequest>({
-    name: "",
-    email: "",
-    company: "",
-    message: "",
-    fromCta: "",
-    phone: "", // 初始化蜜罐字段
-  });
-  // 错误状态
-  const [errors, setErrors] = useState<FormErrors>({});
-  const [submitting, setSubmitting] = useState(false);
-  const [submitStatus, setSubmitStatus] = useState<{
-    success?: boolean;
-    message?: string;
-  }>({});
-  //最近被点击过的cta
-
-  useEffect(() => {
-    const unsub = onPopupOpen((event) => {
-      setFormData((prev) => ({
-        ...prev,
-        fromCta: event.target?.getAttribute(DATA_POPUP_CTA) || undefined,
-      }));
-    });
-    const unsub2 = onPopupClose(() => {
-      setFormData((prev) => ({
-        ...prev,
-        fromCta: "",
-      }));
-    });
-    return () => {
-      unsub();
-      unsub2();
-    };
-  }, []);
-
-  // 处理输入变化
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-
-    setSubmitStatus({}); // 重置提交状态
-
-    // 清除对应字段的错误
-    if (errors[name as keyof FormErrors]) {
-      setErrors((prev) => ({
-        ...prev,
-        [name]: undefined,
-      }));
-    }
-  };
-  // 验证表单
-  const validateForm = (): boolean => {
-    const newErrors: FormErrors = {};
-
-    // if (!formData.name?.trim()) {
-    //   newErrors.name = "Please enter your name";
-    // }
-
-    if (!formData.email?.trim()) {
-      newErrors.email = "Please enter your email";
-    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-      newErrors.email = "Please enter a valid email address";
-    }
-
-    if (!formData.message?.trim()) {
-      newErrors.message = "Please enter your message";
-    }
-
-    // 检查蜜罐字段 - 如果填写了则表示是机器人
-    if (formData.phone) {
-      // 悄悄失败，不显示错误信息
-      console.log("Honeypot triggered - likely spam submission");
-      return false;
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleClick = async (event: React.MouseEvent) => {
-    event.preventDefault(); // 阻止表单默认提交行为
-
-    // 验证表单
-    if (!validateForm()) {
-      return; // 如果验证失败，不继续提交
-    }
-
-    try {
-      setSubmitting(true);
-      setSubmitStatus({}); // 重置提交状态
-
-      const response = await fetch(actionUrl, {
-        method: "POST",
-        body: JSON.stringify({
-          ...formData,
-          encryptedField: encrypt(formData.phone, formSalt),
-        }),
-        headers: {
-          "X-Request-URL": window.location.href,
-          "Content-Type": "application/json",
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error(`Server responded with status: ${response.status}`);
-      }
-
-      const result = await response.json();
-
-      setSubmitStatus({
-        success: result.success,
-        message: result.message,
-      });
-
-      if (result.success) {
-        // 重置表单
-        setFormData({
-          name: "",
-          email: "",
-          company: "",
-          message: "",
-          fromCta: "产品页面",
-          phone: "",
-        });
-        window.location.href = "/thanks";
-      }
-    } catch (error) {
-      // 如果出现错误，打印错误信息
-      console.error("Form submission error:", error);
-      setSubmitStatus({
-        success: false,
-        message:
-          error instanceof Error
-            ? `Error: ${error.message}`
-            : "Failed to submit the form. Please try again later.",
-      });
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="py-4 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2">
-      <Input
-        className="sm:col-span-1"
-        inputClassName="mt-2 block w-full rounded-md outline-none border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6"
-        label="Your Email *"
-        labelClassName="block text-sm font-medium leading-6 text-gray-900"
-        name="email"
-        required={true}
-        autoFocus={true}
-        type="email"
-        value={formData.email}
-        onChange={handleChange}
-        error={errors.email}
-      />
-      <Input
-        className="sm:col-span-1"
-        inputClassName="mt-2 block w-full rounded-md outline-none border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6"
-        label="Your Name"
-        labelClassName="block text-sm font-medium leading-6 text-gray-900"
-        name="name"
-        value={formData.name}
-        onChange={handleChange}
-        error={errors.name}
-      />
-      <Input
-        className="col-span-full"
-        inputClassName="mt-2 block w-full rounded-md outline-none border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6"
-        label="Company"
-        labelClassName="block text-sm font-medium leading-6 text-gray-900"
-        name="company"
-        value={formData.company}
-        onChange={handleChange}
-      />
-      <Textarea
-        className="col-span-full"
-        label="Message *"
-        labelClassName="block text-sm font-medium leading-6 text-gray-900"
-        name="message"
-        required={true}
-        textareaClassName="mt-2 block w-full rounded-md outline-none border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6"
-        value={formData.message}
-        onChange={handleChange}
-        error={errors.message}
-      />
-      {/* 蜜罐字段 - 对用户隐藏但对机器人可见 */}
-      <div style={{ display: "none" }}>
-        <input
-          type="text"
-          name="phone"
-          value={formData.phone}
-          onChange={handleChange}
-          tabIndex={-1}
-          autoComplete="off"
-        />
-      </div>
-      <div
-        className={clsx("col-span-full flex items-center gap-x-6 px-0 py-2", {
-          "justify-start": submitAlign === "left",
-          "justify-center": submitAlign === "center",
-          "justify-end": submitAlign === "right",
-        })}
-      >
-        {submitStatus.message && !submitStatus.success && (
-          <div
-            className={`text-sm ${
-              submitStatus.success ? "text-green-600" : "text-red-600"
-            }`}
-          >
-            {submitStatus.message}
-          </div>
-        )}
-        <Submit
-          className="flex gap-2 items-center relative shadow-sm btn btn-primary btn-lg nowrap"
-          title="Send Message"
-          spinner={
-            <div className="left-8 flex items-center justify-center">
-              <div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white" />
-            </div>
-          }
-          submitting={submitting}
-          onClick={handleClick}
-        />
-      </div>
-    </div>
-  );
-}

package/src/scripts/actions.ts

@@ -1,304 +0,0 @@
-import {
-  DATA_POPUP,
-  DATA_POPUP_ROLE,
-  EVENT_CLOSE,
-  EVENT_OPEN,
-  EVENT_SELECT,
-  EVENT_UNSELECT,
-  PopupRole,
-} from "./consts";
-import { $emit, $on, PopupEvent, SelectionEvent } from "./events";
-import { ANIMATIONS, DUAL_ANIMATIONS } from "../motion/consts";
-import { DualAnimation, SimpleAnimation } from "../motion/types";
-
-/**
- * 在每次页面切换后执行回调函数
- * 注意：此函数注册的事件监听器不会自动解注册，将在每次页面切换时执行
- *
- * @param init - 每次页面切换时要执行的回调函数
- * @returns 用于手动解注册事件的函数
- */
-export function onEverySwap(init: () => void) {
-  document.addEventListener("astro:after-swap", init);
-  // 返回一个函数，用于手动解注册事件
-  return () => document.removeEventListener("astro:after-swap", init);
-}
-
-/**
- * 初始化动画，在 page-load 事件触发时执行
- *
- * @param init - 初始化动画的回调函数
- */
-export function onPageLoaded(init: () => void) {
-  const doInit = () => {
-    init();
-    document.removeEventListener("astro:page-load", doInit);
-  };
-  document.addEventListener("astro:page-load", doInit);
-}
-
-/**
- * 用于在脚本中监听弹出层的打开/关闭事件，并处理相关动画效果
- * 注意：此函数主要用于脚本中的事件处理，组件内部已有相应实现，无需使用
- *
- * @param targetKey - 要监听的弹出层的唯一标识
- * @param callback - 弹出层打开时的回调函数，可返回关闭时的清理函数
- * @returns 取消监听的函数
- *
- * @example
- * ```typescript
- * // 监听产品菜单的打开/关闭事件并添加旋转动画
- * onOpen("products-popup", () => {
- *   // 打开时顺时针旋转
- *   animate("#products-indicator", {
- *     rotate: [0, 180],
- *   });
- *
- *   // 返回关闭时的动画处理函数
- *   return () => {
- *     animate("#products-indicator", {
- *       rotate: [180, 0],
- *     });
- *   };
- * });
- * ```
- */
-export function onOpen(
-  targetKey: string,
-  callback?: (evnet?: PopupEvent) => VoidFunction | void
-) {
-  return onPopupOpen((event) => {
-    if (event.key === targetKey) {
-      return callback?.(event);
-    }
-  });
-}
-
-/**
- * 用于在脚本中监听弹出层的打开/关闭事件，并处理相关动画效果
- * 注意：此函数主要用于脚本中的事件处理，组件内部已有相应实现，无需使用
- *
- * @param callback - 弹出层打开时的回调函数，可返回关闭时的清理函数
- * @returns 取消监听的函数
- *
- */
-export function onPopupOpen(
-  callback: (event: PopupEvent) => VoidFunction | void
-) {
-  let unsubscribe: ((event: PopupEvent) => void) | void;
-
-  const handleOpen = (event: PopupEvent) => {
-    unsubscribe = callback?.(event);
-  };
-
-  const unsubscribeOpen = $on(EVENT_OPEN, handleOpen);
-
-  const handelClose = (event: PopupEvent) => {
-    unsubscribe?.(event);
-  };
-  const unsubscribeClose = $on(EVENT_CLOSE, handelClose);
-
-  return () => {
-    unsubscribeOpen();
-    unsubscribeClose();
-  };
-}
-
-export function onPopupClose(
-  callback: (event: PopupEvent) => VoidFunction | void
-) {
-  return $on<PopupEvent>(EVENT_CLOSE, callback);
-}
-
-export function onSelected(
-  callback: (event: SelectionEvent) => VoidFunction | void
-) {
-  return $on<SelectionEvent>(EVENT_SELECT, callback);
-}
-
-export function onUnSelected(
-  callback: (event: SelectionEvent) => VoidFunction | void
-) {
-  return $on<SelectionEvent>(EVENT_UNSELECT, callback);
-}
-
-// 使用WeakMap存储事件处理函数引用
-const popoverHandlers = new WeakMap<
-  HTMLElement,
-  {
-    enter: (event: Event) => void;
-    leave: (event: Event) => void;
-  }
->();
-
-// 使用WeakMap存储Modal触发器的事件处理函数引用
-const modalHandlers = new WeakMap<HTMLElement, (event: Event) => void>();
-
-// 使用WeakMap存储Modal关闭按钮的事件处理函数引用
-const modalCloserHandlers = new WeakMap<HTMLElement, (event: Event) => void>();
-
-/**
- * 初始化Popover的鼠标交互事件
- * @param popupKey - 弹出层的唯一标识
- * @param element - 弹出层的 DOM 元素
- */
-export function initPopover(popupKey: string, element: HTMLElement) {
-  // 先移除旧的事件监听器（如果存在）
-  const oldHandlers = popoverHandlers.get(element);
-  if (oldHandlers) {
-    element.removeEventListener("mouseenter", oldHandlers.enter);
-    element.removeEventListener("mouseleave", oldHandlers.leave);
-    element.removeEventListener("touchstart", oldHandlers.enter);
-    element.removeEventListener("touchend", oldHandlers.leave);
-  }
-
-  // 创建新的事件处理函数
-  const handleMouseEnter = (event: Event) => {
-    openPopup(popupKey, element);
-  };
-
-  const handleMouseLeave = (event: Event) => {
-    closePopup(popupKey);
-  };
-
-  // 保存新的事件处理函数引用
-  popoverHandlers.set(element, {
-    enter: handleMouseEnter,
-    leave: handleMouseLeave,
-  });
-
-  // 添加新的事件监听器
-  element.addEventListener("mouseenter", handleMouseEnter);
-  element.addEventListener("mouseleave", handleMouseLeave);
-  element.addEventListener("touchstart", handleMouseEnter);
-  element.addEventListener("touchend", handleMouseLeave);
-}
-
-export function getPopupContainer(popupKey: string) {
-  return document.querySelector(
-    `[${DATA_POPUP}="${popupKey}"][${DATA_POPUP_ROLE}="${PopupRole.ModalContainer}"], [${DATA_POPUP}="${popupKey}"][${DATA_POPUP_ROLE}="${PopupRole.PopoverContainer}"]`
-  ) as HTMLElement | undefined;
-}
-
-export function initModal(popupKey: string, trigger: HTMLElement) {
-  // 先移除旧的事件监听器（如果存在）
-  const oldHandler = modalHandlers.get(trigger);
-  if (oldHandler) {
-    trigger.removeEventListener("click", oldHandler);
-  }
-
-  // 创建新的事件处理函数
-  const handleTriggerClick = (event: Event) => {
-    // 查找 Modal 容器
-    openPopup(popupKey, trigger);
-  };
-
-  // 保存新的事件处理函数引用
-  modalHandlers.set(trigger, handleTriggerClick);
-
-  // 添加新的事件监听器
-  trigger.addEventListener("click", handleTriggerClick);
-}
-
-/**
- * 初始化Modal关闭按钮
- * @param popupKey - 弹出层的唯一标识
- * @param closer - 关闭按钮元素
- */
-export function initModalCloser(popupKey: string, closer: HTMLElement) {
-  // 先移除旧的事件监听器（如果存在）
-  const oldHandler = modalCloserHandlers.get(closer);
-  if (oldHandler) {
-    closer.removeEventListener("click", oldHandler);
-  }
-
-  // 创建新的事件处理函数
-  const handleCloserClick = (event: Event) => {
-    closePopup(popupKey);
-  };
-
-  // 保存新的事件处理函数引用
-  modalCloserHandlers.set(closer, handleCloserClick);
-
-  // 添加新的事件监听器
-  closer.addEventListener("click", handleCloserClick);
-}
-
-/**
- * 打开弹出层
- * @param popupKey
- * @param target
- */
-export function openPopup(popupKey: string, target: HTMLElement) {
-  // 查找 Modal 容器
-  const modalContainer = getPopupContainer(popupKey);
-  if (modalContainer) {
-    modalContainer.classList.add("open");
-    $emit(EVENT_OPEN, { key: popupKey, target });
-  } else {
-    console.error("未找到弹出层", popupKey);
-  }
-}
-
-// 选择
-export function select(key: string, target: HTMLElement, selection: string) {
-  $emit(EVENT_SELECT, { key, target, selection });
-}
-
-// 取消选择
-export function unselect(key: string, target: HTMLElement, selection: string) {
-  $emit(EVENT_UNSELECT, { key, target, selection });
-}
-
-/**
- * 关闭弹出层
- * @param popupKey - 弹出层的唯一标识
- * @param target - 可选的目标元素，如果提供则使用该元素，否则查找容器
- */
-export function closePopup(popupKey: string, target?: HTMLElement) {
-  const container = target || getPopupContainer(popupKey);
-  container?.classList.remove("open");
-  $emit(EVENT_CLOSE, { key: popupKey });
-}
-
-export function normalizeSimpleAnimation(animation?: SimpleAnimation) {
-  if (animation?.preset) {
-    const preset = ANIMATIONS[animation?.preset];
-    return {
-      ...preset,
-      keyframes: { ...preset.keyframes, ...animation.keyframes },
-      transition: { ...preset.transition, ...animation.transition },
-    };
-  }
-
-  return animation;
-}
-
-//处理预置动画
-export function normalizeDualAnimation(
-  animation?: DualAnimation
-): DualAnimation | undefined {
-  if (!animation) {
-    return undefined;
-  }
-
-  // 如果有预设，合并预设和自定义配置
-  if (animation.preset) {
-    const preset = DUAL_ANIMATIONS[animation.preset];
-    return {
-      ...animation,
-      in: animation.in
-        ? normalizeSimpleAnimation({ ...preset.in, ...animation.in })
-        : preset.in,
-      out: animation.out
-        ? normalizeSimpleAnimation({ ...preset.out, ...animation.out })
-        : preset.out,
-    };
-  }
-
-  // 如果没有预设，但有 in/out 配置
-  return {
-    in: animation.in ? normalizeSimpleAnimation(animation.in) : undefined,
-    out: animation.out ? normalizeSimpleAnimation(animation.out) : undefined,
-  };
-}

package/src/scripts/events.ts

@@ -1,33 +0,0 @@
-export type PopupEvent = {
-  //控件组的唯一标识
-  key: string;
-  //发出事件的element，popover对应Container，modal对应Trigger
-  target?: HTMLElement;
-};
-
-export type SelectionEvent = {
-  //控件组的唯一标识
-  key: string;
-  //发出事件的element
-  target: HTMLElement;
-  selection: string;
-};
-
-export const $emit = (event: string, options?: PopupEvent | SelectionEvent) => {
-  const customEvent = new CustomEvent(event, { detail: options });
-  document.dispatchEvent(customEvent);
-};
-
-export const $on = <T = PopupEvent | SelectionEvent>(
-  event: string,
-  callback: (options: T) => void
-) => {
-  const eventListener = (e: CustomEvent) => {
-    callback(e.detail);
-  };
-  document.addEventListener(event, eventListener as EventListener);
-
-  return () => {
-    document.removeEventListener(event, eventListener as EventListener);
-  };
-};

package/src/scripts/index.ts

@@ -1,3 +0,0 @@
-export * from "./actions";
-export * from "./consts";
-export * from "./events";