@rxdrag/website-lib-core 0.0.20 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -25,9 +25,9 @@
     "eslint": "^7.32.0",
     "typescript": "^5",
     "@rxdrag/entify-hooks": "0.2.43",
-    "@rxdrag/tsconfig": "0.2.0",
+    "@rxdrag/eslint-config-custom": "0.2.12",
     "@rxdrag/slate-preview": "1.2.57",
-    "@rxdrag/eslint-config-custom": "0.2.12"
+    "@rxdrag/tsconfig": "0.2.0"
   },
   "dependencies": {
     "clsx": "^2.1.0",
@@ -35,7 +35,7 @@
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@rxdrag/rxcms-models": "0.3.49"
+    "@rxdrag/rxcms-models": "0.3.51"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

package/src/component-logic/link-client.ts

@@ -10,12 +10,11 @@ export const initLinks = () => {
   links.forEach((anchorLink) => {
     // 从链接URL中提取路径部分
     try {
-      const linkUrl = new URL(anchorLink.href);
+      const linkUrl = anchorLink.href ? new URL(anchorLink.href) : null;
       const linkPath =
         anchorLink.dataset.activedPath === "true"
-          ? linkUrl.pathname
+          ? linkUrl?.pathname
           : anchorLink.dataset.activedPath;
-
       // 检查当前路径是否与链接路径匹配或是其子路径
       if (
         currentPath === linkPath ||
@@ -30,4 +29,4 @@ export const initLinks = () => {
       console.warn("Invalid URL:", e, anchorLink);
     }
   });
-};
+};

package/src/controller/PageLoader.ts

@@ -66,14 +66,15 @@ export class PageLoader implements IPageLoader {
 
     try {
       // 使用标志来确保回调只执行一次
-      let hasExecuted = false;
+      //let hasExecuted = false;
 
       // 主事件处理函数，调用所有注册的回调
       const handleEvent = () => {
+        console.log("===>页面转场事件触发，执行回调");
         // 如果已经执行过，则不再执行
-        if (hasExecuted) return;
+        //if (hasExecuted) return;
 
-        hasExecuted = true;
+        //hasExecuted = true;
 
         // 执行所有回调
         this.callbacks.forEach((callback) => {
@@ -85,9 +86,9 @@ export class PageLoader implements IPageLoader {
         });
 
         // 重置执行标志，允许下一次页面转场时再次执行
-        setTimeout(() => {
-          hasExecuted = false;
-        }, 100);
+        // setTimeout(() => {
+        //   hasExecuted = false;
+        // }, 100);
       };
 
       // 只监听一个事件，优先使用 astro:page-load

package/src/entify/Entify.ts

@@ -16,7 +16,7 @@ import {
   queryProductCategories,
   queryProducts,
   queryUserPosts,
-  searchProducts,
+  fulltextSearch,
 } from "./lib";
 import { IQueryOptions } from "@rxdrag/entify-hooks";
 import { queryAllProducts } from "./lib/queryAllProducts";
@@ -72,8 +72,8 @@ export class Entify implements IEntify {
     return await queryFeaturedProducts(count, this.envVariables);
   }
 
-  public async getLatestPosts(count?: number) {
-    return await queryLatestPosts(count, this.envVariables);
+  public async getLatestPosts(count?: number, coverSize?: TSize) {
+    return await queryLatestPosts(count, coverSize, this.envVariables);
   }
 
   public async getHomePage(): Promise<Page | undefined> {
@@ -371,8 +371,8 @@ export class Entify implements IEntify {
     return (await queryUserPosts({ userId }, this.envVariables))?.items;
   }
 
-  public async searchProducts(keyword: string) {
-    return await searchProducts(keyword, this.envVariables);
+  public async fulltextSearch(keyword: string, imageSize: TSize | undefined) {
+    return await fulltextSearch(keyword, imageSize,this.envVariables);
   }
 
   public async getUserPaths() {

package/src/entify/IEntify.ts

@@ -8,7 +8,7 @@ import {
   TProductCategory,
   TUser,
 } from "./view-model";
-import { Lang, Page, PageType, Theme, Website } from "@rxdrag/rxcms-models";
+import { Lang, Page, PageType, SearchIndex, Theme, Website } from "@rxdrag/rxcms-models";
 
 export type PostsOptions = {
   category?: string;
@@ -43,7 +43,7 @@ export interface IEntify {
 
   getFeaturedProducts(count?: number): Promise<TProduct[] | undefined>;
 
-  getLatestPosts(count?: number): Promise<TPost[] | undefined>;
+  getLatestPosts(count?: number, coverSize?: TSize): Promise<TPost[] | undefined>;
 
   getPosts(options: PostsOptions): Promise<TPost[] | undefined>;
 
@@ -123,7 +123,7 @@ export interface IEntify {
 
   getUserPosts(userId: string): Promise<TPost[] | undefined>;
 
-  searchProducts(keyword: string): Promise<ListResult<TProduct> | undefined>;
+  fulltextSearch(keyword: string, imageSize: TSize | undefined): Promise<ListResult<SearchIndex> | undefined>;
 
   getUserPaths(): Promise<unknown>;
 

package/src/entify/lib/fulltextSearch.ts

@@ -0,0 +1,61 @@
+import {
+  PublishableStatus,
+  SearchIndex,
+  SearchIndexBoolExp,
+  SearchIndexOrderBy,
+  SearchIndexDistinctExp,
+  SearchIndexQueryOptions,
+  SearchIndexFields,
+  MediaQueryOptions,
+} from "@rxdrag/rxcms-models";
+import { queryEntityList } from "./queryEntityList";
+import { ListResult } from "@rxdrag/entify-hooks";
+import { EnvVariables, TSize } from "../types";
+
+export async function fulltextSearch(
+  keyword: string,
+  imageSize: TSize | undefined,
+  envVariables: EnvVariables
+) {
+
+  const queryOptions = new SearchIndexQueryOptions(
+    [
+      SearchIndexFields.id,
+      SearchIndexFields.title,
+      SearchIndexFields.summary,
+      SearchIndexFields.sourceId,
+      SearchIndexFields.sourceType,
+      SearchIndexFields.sourceLang,
+      SearchIndexFields.sourceSlug,
+    ],
+    {
+      limit: 100,
+      where: {
+        sourceLang: {
+          _eq: envVariables.language,
+        },
+        [SearchIndexFields.sourceStatus]: {
+          _eq: PublishableStatus.published,
+        },
+        content: {
+          _match: keyword,
+        },
+      }
+    }
+  ).media(new MediaQueryOptions().file([
+    "thumbnail(width:400, height:320)",
+    "url",
+    imageSize
+      ? `resize(width:${imageSize.width}, height:${imageSize.height})`
+      : "resize(width:500, height:400)",
+  ])).setNoQuery(!keyword);
+
+  const result = await queryEntityList<
+    SearchIndex,
+    SearchIndexBoolExp,
+    SearchIndexOrderBy,
+    SearchIndexDistinctExp
+  >(queryOptions, envVariables);
+
+  return result as ListResult<SearchIndex> | undefined;
+}

package/src/entify/lib/index.ts

@@ -25,5 +25,5 @@ export * from "./queryProductsInMenu";
 export * from "./queryUserPosts";
 export * from "./queryWebSiteSettings";
 export * from "./upsertEntity";
-export * from "./searchProducts";
+export * from "./fulltextSearch";
 export * from "./sendEmail";

package/src/entify/lib/queryLatestPosts.ts

@@ -12,11 +12,12 @@ import {
   PublishableStatus,
 } from "@rxdrag/rxcms-models";
 import { queryEntityList } from "./queryEntityList";
-import { EnvVariables } from "../types";
+import { EnvVariables, TSize } from "../types";
 import { TPost } from "../view-model";
 
 export async function queryLatestPosts(
   count: number = 2,
+  coverSize: TSize | undefined,
   envVariables: EnvVariables
 ) {
   const result = await queryEntityList<
@@ -56,7 +57,7 @@ export async function queryLatestPosts(
       .cover(
         new MediaQueryOptions().file([
           "thumbnail",
-          "resize(width:480, height:180)",
+          `resize(width:${coverSize?.width || 480}, height:${coverSize?.height || 180})`,
         ])
       )
       .author(

package/src/entify/lib/queryProducts.ts

@@ -1,4 +1,13 @@
-import { Product, ProductBoolExp, ProductOrderBy, ProductDistinctExp, ProductFields, ProductQueryOptions, PublishableStatus, ProductAssciations } from "@rxdrag/rxcms-models";
+import {
+  Product,
+  ProductBoolExp,
+  ProductOrderBy,
+  ProductDistinctExp,
+  ProductFields,
+  ProductQueryOptions,
+  PublishableStatus,
+  ProductAssciations,
+} from "@rxdrag/rxcms-models";
 import { ListConditions } from "./queryPosts";
 import { queryEntityList } from "./queryEntityList";
 import { newQueryProductsMediaOptions } from "./newQueryProductsMediaOptions";
@@ -7,22 +16,22 @@ import { EnvVariables, TSize } from "../types";
 import { TProduct } from "../view-model";
 
 export async function queryProducts(
-  conditions: ListConditions, 
-  imageSize: TSize | undefined, 
+  conditions: ListConditions,
+  imageSize: TSize | undefined,
   envVariables: EnvVariables,
   selectFields?: (keyof Product)[]
 ) {
   const { category: categorySlug, page = 1, pageSize = 10 } = conditions;
 
-  let where = {}
+  let where = {};
   if (categorySlug) {
     where = {
       [ProductAssciations.category]: {
         slug: {
-          "_eq": categorySlug
-        }
+          _eq: categorySlug,
+        },
       },
-    }
+    };
   }
 
   // 默认查询字段
@@ -37,38 +46,35 @@ export async function queryProducts(
   // 使用指定的字段或默认字段
   const fields = selectFields || defaultFields;
 
-  const queryOptions = new ProductQueryOptions(
-    fields,
-    {
-      offset: (page - 1) * pageSize,
-      limit: pageSize,
-      where: {
-        [ProductFields.status]: {
-          "_eq": PublishableStatus.published
-        },
-        lang: {
-          abbr: {
-            _eq: envVariables.language,
-          },
+  const queryOptions = new ProductQueryOptions(fields, {
+    offset: (page - 1) * pageSize,
+    limit: pageSize,
+    where: {
+      [ProductFields.status]: {
+        _eq: PublishableStatus.published,
+      },
+      lang: {
+        abbr: {
+          _eq: envVariables.language,
         },
-        ...where,
       },
-      orderBy: [
-        { [ProductFields.seqValue]: "asc" }
-      ]
-    }
-  );
+      ...where,
+    },
+    orderBy: [
+      { [ProductFields.seqValue]: "asc", [ProductFields.updatedAt]: "desc" },
+    ],
+  });
 
   // 只有在不指定字段或需要查询媒体时才添加媒体查询
-  if (!selectFields || !selectFields.includes('slug' as keyof Product)) {
-    queryOptions.mediaPivots(
-      newQueryProductsMediaOptions(imageSize)
-    );
+  if (!selectFields || !selectFields.includes("slug" as keyof Product)) {
+    queryOptions.mediaPivots(newQueryProductsMediaOptions(imageSize));
   }
 
-  const result = await queryEntityList<Product, ProductBoolExp, ProductOrderBy, ProductDistinctExp>(
-    queryOptions,
-    envVariables
-  );
+  const result = await queryEntityList<
+    Product,
+    ProductBoolExp,
+    ProductOrderBy,
+    ProductDistinctExp
+  >(queryOptions, envVariables);
   return result as ListResult<TProduct> | undefined;
 }

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

@@ -76,6 +76,8 @@ export interface QuoteRequest {
   company?: string;
   message?: string;
   fromCta?: string;
+  // 电话或者whatsapp
+  mobile?: string;
   // 蜜罐字段，用于检测机器人
   phone: string;
   // 一个加密字段，用于防机器人，点击时附加一个加密的字符串
@@ -91,12 +93,17 @@ export type ContactFormProps = {
   submitAlign?: "left" | "center" | "right";
   actionUrl?: string;
   formSalt: string;
+  classNames?: {
+    submit?: string;
+    container?: string;
+  };
   labels?: {
     name?: string;
     email?: string;
     company?: string;
     message?: string;
     submit?: string;
+    mobile?: string;
   };
 };
 
@@ -107,6 +114,7 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
       actionUrl = "/api/ask-for-quote",
       formSalt,
       labels = {},
+      classNames = {},
     } = props;
     const [formData, setFormData] = useState<QuoteRequest>({
       name: "",
@@ -115,6 +123,8 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
       message: "",
       phone: "", // 初始化蜜罐字段
     });
+    const submitClassName = classNames.submit || "btn-primary";
+    const containerClassName = classNames.container || "gap-y-6";
     // 错误状态
     const [errors, setErrors] = useState<FormErrors>({});
     const [submitting, setSubmitting] = useState(false);
@@ -236,8 +246,21 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
     return (
       <div
         ref={ref}
-        className="py-4 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2"
+        className={clsx(
+          "py-4 grid max-w-2xl grid-cols-1 gap-x-6 sm:grid-cols-2",
+          containerClassName
+        )}
       >
+        <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={labels?.name || "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="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"
@@ -254,17 +277,18 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
         <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={(labels?.name || "Your Name") + " *"}
+          label={labels?.mobile || "Your tel"}
           labelClassName="block text-sm font-medium leading-6 text-gray-900"
-          name="name"
-          value={formData.name}
+          name="mobile"
+          required={true}
+          autoFocus={true}
+          value={formData.mobile}
           onChange={handleChange}
-          error={errors.name}
         />
         <Input
-          className="col-span-full"
+          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={(labels?.company || "Company") + " *"}
+          label={labels?.company || "Company"}
           labelClassName="block text-sm font-medium leading-6 text-gray-900"
           name="company"
           value={formData.company}
@@ -309,7 +333,10 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
             </div>
           )}
           <Submit
-            className="flex gap-2 items-center relative shadow-sm btn btn-primary btn-lg nowrap"
+            className={clsx(
+              "flex gap-2 items-center relative shadow-sm btn btn-lg nowrap",
+              submitClassName
+            )}
             title={labels?.submit || "Send Message"}
             spinner={
               <div className="left-8 flex items-center justify-center">

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

@@ -9,6 +9,11 @@ export type MediasProps = {
   // Aspect ratio, format is `aspect-[width/height]`
   aspect?: string;
   thumbnailAspect?: string;
+  classNames?: {
+    mainArea?: string;
+    navigation?: string;
+    thumbnail?: string;
+  }
 };
 
 export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
@@ -18,8 +23,10 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
     children,
     aspect = "aspect-[1/1]",
     thumbnailAspect = "aspect-[5/4]",
+    classNames,
     ...rest
   } = props;
+  const { mainArea, navigation, thumbnail } = classNames || {};
   const [selectedId, setSelectedId] = useState<string | undefined | null>(
     value?.externalVideoUrl ? "video" : value?.medias?.[0]?.id || ""
   );
@@ -136,7 +143,7 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
     <div ref={ref} className={clsx("flex flex-col", className)} {...rest}>
       {children}
       {/* Main display area */}
-      <div className={clsx("relative group")}>
+      <div className={clsx("relative group", mainArea)}>
         {canPrevious && (
           <button
             onClick={handlePrevious}
@@ -211,7 +218,7 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
       </div>
 
       {/* Thumbnail navigation */}
-      <div className="relative mt-4">
+      <div className={clsx("relative mt-4", navigation)}>
         <div className="flex items-stretch gap-2">
           {totalItems > 6 && (
             <button
@@ -222,7 +229,8 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
                 "transition-colors duration-200 rounded-l-md",
                 !canPrevious
                   ? "bg-gray-100 text-gray-400 cursor-not-allowed"
-                  : "bg-gray-200 hover:bg-gray-300 text-gray-700"
+                  : "bg-gray-200 hover:bg-gray-300 text-gray-700",
+                thumbnail,
               )}
               aria-label="Previous"
             >

package/src/react/components/SearchInput.tsx

@@ -8,25 +8,10 @@ export const SearchInput = forwardRef<HTMLInputElement, SearchProps>(
     const { children, ...rest } = props;
     const [keyword, setKeyword] = useState<string>();
 
-    // const navigate = useNavigate();
-    // const [, setOpen] = useXModalState();
-
-    const handleKeyEnter = (event: React.KeyboardEvent<HTMLElement>) => {
-      if (event.key !== "Enter" || !keyword) {
-        return;
-      }
-      // setOpen?.(false);
-      const encodedKeyword = encodeURIComponent(keyword || "");
-      if (encodedKeyword) {
-        //navigate(`/search?keyword=${encodedKeyword}`);
-      }
-    };
-
     return (
       <input
         ref={ref}
         name="q"
-        onKeyDown={handleKeyEnter}
         value={keyword}
         onChange={(e) => setKeyword(e.target.value)}
         {...rest}

package/src/entify/lib/searchProducts.ts

@@ -1,77 +0,0 @@
-import {
-  Product,
-  ProductBoolExp,
-  ProductOrderBy,
-  ProductDistinctExp,
-  ProductFields,
-  ProductQueryOptions,
-  PublishableStatus,
-} from "@rxdrag/rxcms-models";
-import { queryEntityList } from "./queryEntityList";
-import { newQueryProductsMediaOptions } from "./newQueryProductsMediaOptions";
-import { ListResult } from "@rxdrag/entify-hooks";
-import { EnvVariables } from "../types";
-import { TProduct } from "../view-model";
-
-export async function searchProducts(
-  keyword: string,
-  envVariables: EnvVariables
-) {
-  const keyExp = keyword
-    ? {
-        _or: [
-          {
-            title: {
-              _like: `%${keyword}%`,
-            },
-          },
-          {
-            [ProductFields.description]: {
-              _like: `%${keyword}%`,
-            },
-          },
-        ],
-      }
-    : undefined;
-
-  const keyArray = keyExp ? [keyExp] : [];
-
-  const queryOptions = new ProductQueryOptions(
-    [
-      ProductFields.id,
-      ProductFields.slug,
-      ProductFields.title,
-      ProductFields.shortTitle,
-      ProductFields.description,
-    ],
-    {
-      limit: 100,
-      where: {
-        _and: [
-          {
-            lang: {
-              abbr: {
-                _eq: envVariables.language,
-              },
-            },
-          },
-          {
-            [ProductFields.status]: {
-              _eq: PublishableStatus.published,
-            },
-          },
-          ...keyArray,
-        ],
-      },
-      orderBy: [{ [ProductFields.seqValue]: "asc" }],
-    }
-  ).mediaPivots(newQueryProductsMediaOptions());
-
-  const result = await queryEntityList<
-    Product,
-    ProductBoolExp,
-    ProductOrderBy,
-    ProductDistinctExp
-  >(queryOptions, envVariables);
-  return result as ListResult<TProduct> | undefined;
-}