@rxdrag/website-lib-core 0.0.50 → 0.0.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -20,22 +20,23 @@
     "@iconify/react": "^5.0.2",
     "@types/gsap": "^3.0.0",
     "@types/lodash-es": "^4.14.191",
-    "@types/react": "^18.2.22",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
     "eslint": "^7.32.0",
     "typescript": "^5",
-    "@rxdrag/eslint-config-custom": "0.2.12",
     "@rxdrag/tsconfig": "0.2.0",
-    "@rxdrag/slate-preview": "1.2.57"
+    "@rxdrag/eslint-config-custom": "0.2.12",
+    "@rxdrag/slate-preview": "1.2.58"
   },
   "dependencies": {
     "clsx": "^2.1.0",
     "gsap": "^3.12.7",
+    "hls.js": "^1.6.13",
     "lodash-es": "^4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@rxdrag/rxcms-models": "0.3.76",
-    "@rxdrag/entify-lib": "0.0.8"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@rxdrag/rxcms-models": "0.3.77",
+    "@rxdrag/entify-lib": "0.0.9"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

package/src/astro/README.md

@@ -0,0 +1 @@
+定义astro物料用的一些接口

package/src/astro/animation.ts

@@ -0,0 +1,146 @@
+/**
+ * AOS (Animate On Scroll) 动画配置类型定义
+ * 基于 AOS 库的 data-aos 属性
+ */
+
+// AOS 动画类型
+export type AOSAnimation =
+  | "" // 无动效
+  // Fade animations
+  | "fade"
+  | "fade-up"
+  | "fade-down"
+  | "fade-left"
+  | "fade-right"
+  | "fade-up-right"
+  | "fade-up-left"
+  | "fade-down-right"
+  | "fade-down-left"
+  // Flip animations
+  | "flip-up"
+  | "flip-down"
+  | "flip-left"
+  | "flip-right"
+  // Slide animations
+  | "slide-up"
+  | "slide-down"
+  | "slide-left"
+  | "slide-right"
+  // Zoom animations
+  | "zoom-in"
+  | "zoom-in-up"
+  | "zoom-in-down"
+  | "zoom-in-left"
+  | "zoom-in-right"
+  | "zoom-out"
+  | "zoom-out-up"
+  | "zoom-out-down"
+  | "zoom-out-left"
+  | "zoom-out-right";
+
+// AOS 缓动函数
+export type AOSEasing =
+  | "ease"
+  | "linear"
+  | "ease-in"
+  | "ease-out"
+  | "ease-in-out"
+  | "ease-in-back"
+  | "ease-out-back"
+  | "ease-in-out-back"
+  | "ease-in-sine"
+  | "ease-out-sine"
+  | "ease-in-out-sine"
+  | "ease-in-quad"
+  | "ease-out-quad"
+  | "ease-in-out-quad"
+  | "ease-in-cubic"
+  | "ease-out-cubic"
+  | "ease-in-out-cubic"
+  | "ease-in-quart"
+  | "ease-out-quart"
+  | "ease-in-out-quart";
+
+// AOS 锚点位置
+export type AOSAnchorPlacement =
+  | "top-bottom"
+  | "top-center"
+  | "top-top"
+  | "center-bottom"
+  | "center-center"
+  | "center-top"
+  | "bottom-bottom"
+  | "bottom-center"
+  | "bottom-top";
+
+/**
+ * 动画配置
+ * 使用 data-aos-* 格式的键名，可以直接通过 {...props} 展开到 HTML 元素上
+ */
+export type AOSAnimationConfig = {
+  /**
+   * 动画类型
+   * 默认值: 无
+   */
+  "data-aos"?: AOSAnimation;
+
+  /**
+   * 动画偏移量（像素）
+   * 默认值: 120
+   * 说明: 元素距离视口多少像素时触发动画
+   */
+  "data-aos-offset"?: number | string;
+
+  /**
+   * 动画延迟（毫秒）
+   * 默认值: 0
+   * 可选值: 0-3000，步长 50
+   */
+  "data-aos-delay"?: number | string;
+
+  /**
+   * 动画持续时间（毫秒）
+   * 默认值: 400
+   * 可选值: 0-3000，步长 50
+   */
+  "data-aos-duration"?: number | string;
+
+  /**
+   * 缓动函数
+   * 默认值: ease
+   */
+  "data-aos-easing"?: AOSEasing;
+
+  /**
+   * 锚点位置
+   * 默认值: top-bottom
+   * 说明: 定义元素的哪个位置相对于窗口的哪个位置触发动画
+   * 格式: [元素位置]-[窗口位置]
+   */
+  "data-aos-anchor-placement"?: AOSAnchorPlacement;
+
+  /**
+   * 锚点元素选择器
+   * 说明: 使用另一个元素作为触发点
+   */
+  "data-aos-anchor"?: string;
+
+  /**
+   * 是否只执行一次
+   * 默认值: false
+   * 说明: 设置为 true 时，动画只在第一次滚动到时执行
+   */
+  "data-aos-once"?: boolean | "true" | "false";
+
+  /**
+   * 是否在移动设备上禁用
+   * 可选值: 'mobile' | 'phone' | 'tablet' | false
+   */
+  "data-aos-disable"?: "mobile" | "phone" | "tablet" | false;
+
+  /**
+   * 动画 ID
+   * 说明: 用于单独控制动画
+   */
+  "data-aos-id"?: string;
+};

package/src/astro/background.ts

@@ -0,0 +1,53 @@
+// 背景样式类型定义，支持tailwind类
+export type ColorBackgroundConfig = {
+  id?: string;
+  type: "color";
+  className?: string; // 颜色 ，模糊，图案等，如 "bg-blue-500", "bg-gradient-to-r from-blue-500 to-purple-600"
+};
+
+export type BlurBackgroundConfig = {
+  id?: string;
+  type: "blur";
+  className?: string; // 模糊，如 "backdrop-blur"
+};
+
+export type ImageBackgroundConfig = {
+  id?: string;
+  type: "image";
+  className?: string; // 图片，如 "bg-cover bg-center bg-no-repeat"
+  mediaRef?: string; // 图片ref
+  url?: string; // 图片 URL
+};
+
+export type SvgBackgroundConfig = {
+  id?: string;
+  type: "svg";
+  className?: string; // 图案，如 "bg-dots-sm bg-gray-100"
+  code?: string; // SVG代码
+};
+
+export type VideoBackgroundConfig = {
+  id?: string;
+  type: "video";
+  className?: string; // 视频，如 "bg-cover bg-center bg-no-repeat"
+  mediaRef?: string; // 视频Ref
+  posterRef?: string; // 视频封面Ref
+  url?: string; // 视频 URL
+  poster?: string; // 视频封面图 URL
+};
+
+export type SplineBackgroundConfig = {
+  id?: string;
+  type: "spline";
+  className?: string; // Spline，如 "bg-cover bg-center bg-no-repeat"
+  mediaRef?: string; // Spline ID
+  url?: string; // Spline 场景 URL
+};
+
+export type BackgroundConfig =
+  | ColorBackgroundConfig
+  | BlurBackgroundConfig
+  | ImageBackgroundConfig
+  | SvgBackgroundConfig
+  | VideoBackgroundConfig
+  | SplineBackgroundConfig;

package/src/astro/grid/consts.ts

@@ -0,0 +1,80 @@
+import { ResponsiveGridLayout } from "./types";
+
+const oneCellLayout = {
+  id: "cell1",
+  colStart: 1,
+  colSpan: 12,
+  rowStart: 1,
+};
+
+//单行布局
+export const layout1: ResponsiveGridLayout = {
+  lg: {
+    cols: 12,
+    cells: [oneCellLayout],
+  },
+  md: {
+    cols: 12,
+    cells: [oneCellLayout],
+  },
+  sm: {
+    cols: 12,
+    cells: [oneCellLayout],
+  },
+};
+
+export const layout2: ResponsiveGridLayout = {
+  lg: {
+    cols: 12,
+    cells: [
+      {
+        id: "cell1",
+        colStart: 1,
+        colSpan: 6,
+        rowStart: 1,
+      },
+      {
+        id: "cell2",
+        colStart: 7,
+        colSpan: 6,
+        rowStart: 1,
+      },
+    ],
+  },
+  md: {
+    cols: 12,
+    cells: [
+      {
+        id: "cell1",
+        colStart: 1,
+        colSpan: 6,
+        rowStart: 1,
+      },
+      {
+        id: "cell2",
+        colStart: 7,
+        colSpan: 6,
+        rowStart: 1,
+      },
+    ],
+  },
+  sm: {
+    cols: 12,
+    cells: [
+      {
+        id: "cell1",
+        colStart: 1,
+        colSpan: 12,
+        rowStart: 1,
+      },
+      {
+        id: "cell2",
+        colStart: 1,
+        colSpan: 12,
+        rowStart: 1,
+      },
+    ],
+  },
+};
+
+export const singleRowLayouts: ResponsiveGridLayout[] = [layout1, layout2];

package/src/astro/grid/index.ts

@@ -0,0 +1,2 @@
+export * from "./consts"
+export * from "./types"

package/src/astro/grid/types.ts

@@ -0,0 +1,35 @@
+export type GridCellLayout = {
+  id: string;
+  /** 列起始位置 (1-based, 对应 col-start-*) */
+  colStart: number;
+  /** 列跨度 (对应 col-span-*) */
+  colSpan: number;
+  /** 行起始位置 (1-based, 对应 row-start-*) */
+  rowStart: number;
+  /** 行跨度 (对应 row-span-*) */
+  rowSpan?: number;
+};
+
+export type GridLayout = {
+  cells: GridCellLayout[];
+  cols: number;
+  //这个可以计算出来
+  //rows: number;
+};
+
+//@deprecated 后面废弃这个写法，直接用tailwind grid布局
+//要不然，代码用物料写起来会异常复杂
+export type ResponsiveGridLayout = {
+  [breakpoint: string]: GridLayout;
+};
+
+export type GridLayoutProps = {
+  //这里面添加列数，比如grid-cols-12, sm:grid-cols-6
+  className?: string;
+};
+
+export type GridCellProps = {
+  //这里面添加row-start, col-start, row-span, col-span，比如row-start-1, col-start-1, row-span-1, col-span-1
+  //sm:row-start-1, sm:col-start-1, sm:row-span-1, sm:col-span-1
+  className?: string;
+};

package/src/astro/index.ts

@@ -0,0 +1,7 @@
+export * from "./animation";
+export * from "./grid";
+export * from "./section";
+export * from "./background";
+export * from "./media";
+
+

package/src/astro/media.ts

@@ -0,0 +1,109 @@
+import { ImageSizes, Media } from "@rxdrag/rxcms-models";
+import { ImgHTMLAttributes } from "react";
+
+export type FileFieldType =
+  | "thumbnail"
+  | "original"
+  | "small"
+  | "medium"
+  | "large"
+  | "resize";
+
+export type ImageResize = {
+  width?: number;
+  height?: number;
+};
+
+export const DEFUALT_WIDTH = 100;
+export const DEFUALT_HEIGHT = 100;
+
+export const DEFAULT_SAMLL: ImageResize = {
+  width: 400,
+  height: 400,
+};
+
+export const DEFAULT_MEDIUM: ImageResize = {
+  width: 800,
+  height: 800,
+};
+
+export const DEFAULT_LARGE: ImageResize = {
+  width: 1200,
+  height: 1200,
+};
+
+//TODO：以后还要加transform参数
+export type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
+  className?: string;
+  mediaId?: string;
+  //默认original
+  fileField?: FileFieldType;
+  resize?: ImageResize;
+  children?: React.ReactNode;
+  //为导出代码方便，如果设置了src，显示的时候可以忽略mediaId等
+  src?: string;
+};
+
+export const transformMeidaFields = (
+  field?: FileFieldType,
+  resize?: ImageResize,
+  images?: ImageSizes
+): string[] => {
+  const fields = ["original", "thumbnail"];
+  if (resize) {
+    fields.push(
+      `resize(width: ${resize.width || DEFUALT_WIDTH}, height: ${
+        resize.height || DEFUALT_HEIGHT
+      })`
+    );
+  }
+  if (field === "small") {
+    fields.push(
+      `small(width: ${images?.small?.width || DEFAULT_SAMLL.width}, height: ${
+        images?.small?.height || DEFAULT_SAMLL.height
+      })`
+    );
+  }
+  if (field === "medium") {
+    fields.push(
+      `medium(width: ${
+        images?.medium?.width || DEFAULT_MEDIUM.width
+      }, height: ${images?.medium?.height || DEFAULT_MEDIUM.height})`
+    );
+  }
+  if (field === "large") {
+    fields.push(
+      `large(width: ${images?.large?.width || DEFAULT_LARGE.width}, height: ${
+        images?.large?.height || DEFAULT_LARGE.height
+      })`
+    );
+  }
+  return fields;
+};
+
+export const extractShowSrc = (
+  field?: FileFieldType,
+  resize?: ImageResize,
+  media?: Media
+) => {
+  if (!media?.file) {
+    return "";
+  }
+  if (field === "thumbnail") {
+    return media.file.thumbnail;
+  }
+
+  if (field === "resize" && resize) {
+    return media.file.resize;
+  }
+  if (field === "small" && media.file.small) {
+    return media.file.small;
+  }
+  if (field === "medium" && media.file.medium) {
+    return media.file.medium;
+  }
+  if (field === "large" && media.file.large) {
+    return media.file.large;
+  }
+  return media.file.original;
+};

package/src/astro/section/index.ts

@@ -0,0 +1,12 @@
+import { AOSAnimationConfig } from "../animation";
+import { BackgroundConfig } from "../background";
+
+//可调参数有：内边距（4个），内边距（4个）。内容：内边距（4个），内边距（4个）
+export type SectionProps = {
+  className?: string;
+  containerClassName?: string;
+  backgrounds?: BackgroundConfig[];
+  //动效
+  animation?: AOSAnimationConfig;
+  disableContainer?: boolean;
+};

package/src/entify/Entify.ts

@@ -17,6 +17,10 @@ import {
   queryProducts,
   queryUserPosts,
   fulltextSearch,
+  queryOneEntity,
+  createUploadCredentials,
+  UploadOptions,
+  UploadSession,
 } from "./lib";
 import { IQueryOptions } from "@rxdrag/entify-lib";
 import { queryAllProducts } from "./lib/queryAllProducts";
@@ -24,7 +28,13 @@ import { queryPostSlugs } from "./lib/queryPostSlugs";
 import { queryUserIds } from "./lib/queryUserIds";
 import { IEntify, PostPatinateOptions, PostsOptions } from "./IEntify";
 import { queryWebsite } from "./lib/queryWebsite";
-import { Page, PageType, Product } from "@rxdrag/rxcms-models";
+import {
+  Page,
+  PageType,
+  Product,
+  WebsitePart,
+  WebsitePartBoolExp,
+} from "@rxdrag/rxcms-models";
 import { queryPageBySlug } from "./lib/queryPageBySlug";
 import { queryPageByType } from "./lib/queryPageByType";
 
@@ -52,6 +62,15 @@ export class Entify implements IEntify {
     );
   }
 
+  public async queryOneEntity<T extends WebsitePart = WebsitePart>(
+    options: IQueryOptions<T, WebsitePartBoolExp>
+  ) {
+    return await queryOneEntity<T, WebsitePartBoolExp>(
+      options,
+      this.envVariables
+    );
+  }
+
   public getLang() {
     return this.envVariables.language || "en-US";
   }
@@ -73,7 +92,12 @@ export class Entify implements IEntify {
     imageSize?: TSize,
     addonFields?: (keyof Product)[]
   ) {
-    return await queryFeaturedProducts(count, imageSize, this.envVariables, addonFields);
+    return await queryFeaturedProducts(
+      count,
+      imageSize,
+      this.envVariables,
+      addonFields
+    );
   }
 
   public async getLatestPosts(count?: number, coverSize?: TSize) {
@@ -413,4 +437,10 @@ export class Entify implements IEntify {
 
     return paths;
   }
+
+  public async createUploadCredentials(
+    options: UploadOptions
+  ): Promise<UploadSession | null> {
+    return await createUploadCredentials(options, this.envVariables);
+  }
 }

package/src/entify/IEntify.ts

@@ -1,6 +1,6 @@
 import { IQueryOptions, ListResult } from "@rxdrag/entify-lib";
 import { TSize } from "./types";
-import { ListConditions } from "./lib";
+import { ListConditions, UploadOptions, UploadSession } from "./lib";
 import {
   TPost,
   TPostCategory,
@@ -8,7 +8,17 @@ import {
   TProductCategory,
   TUser,
 } from "./view-model";
-import { Lang, Page, PageType, Product, SearchIndex, Theme, Website } from "@rxdrag/rxcms-models";
+import {
+  Lang,
+  Page,
+  PageType,
+  Product,
+  SearchIndex,
+  ThemeBranch,
+  Website,
+  WebsitePart,
+} from "@rxdrag/rxcms-models";
+import { WebsitePartBoolExp } from "@rxdrag/rxcms-models/";
 
 export type PostsOptions = {
   category?: string;
@@ -35,15 +45,24 @@ export interface IEntify {
     staticKey?: string
   ): Promise<ListResult<unknown> | undefined>;
 
+  queryOneEntity<T extends WebsitePart = WebsitePart>(options: IQueryOptions<T, WebsitePartBoolExp>): Promise<T | undefined>;
+
   getWebsite(): Promise<Website | undefined>;
 
-  getTheme(): Promise<Theme | undefined>;
+  getTheme(): Promise<ThemeBranch | undefined>;
 
   getLangs(): Promise<Lang[] | undefined>;
 
-  getFeaturedProducts(count?: number, imageSize?: TSize, addonFields?: (keyof Product)[]): Promise<TProduct[] | undefined>;
+  getFeaturedProducts(
+    count?: number,
+    imageSize?: TSize,
+    addonFields?: (keyof Product)[]
+  ): Promise<TProduct[] | undefined>;
 
-  getLatestPosts(count?: number, coverSize?: TSize): Promise<TPost[] | undefined>;
+  getLatestPosts(
+    count?: number,
+    coverSize?: TSize
+  ): Promise<TPost[] | undefined>;
 
   getPosts(options: PostsOptions): Promise<TPost[] | undefined>;
 
@@ -124,9 +143,14 @@ export interface IEntify {
 
   getUserPosts(userId: string): Promise<TPost[] | undefined>;
 
-  fulltextSearch(keyword: string, imageSize: TSize | undefined): Promise<ListResult<SearchIndex> | undefined>;
+  fulltextSearch(
+    keyword: string,
+    imageSize: TSize | undefined
+  ): Promise<ListResult<SearchIndex> | undefined>;
 
   getUserPaths(): Promise<unknown>;
 
   createPagination(totalItems: number, pageSize: number): unknown;
+
+  createUploadCredentials(options: UploadOptions): Promise<UploadSession | null>;
 }

package/src/entify/lib/createUploadCredentials.ts

@@ -0,0 +1,56 @@
+import { createEntifyClient } from "./createEntifyClient";
+import { EnvVariables } from "../types";
+
+export type UploadOptions = {
+  mediaType: string;
+  uploadLength?: number;
+  uploadMetadata?: string;
+};
+
+export type UploadSession = {
+  platform: PlatformType | string;
+  uploadUrl?: string;
+  credentials?: unknown;
+  expiry?: number;
+};
+
+export enum PlatformType {
+  aliyun = "aliyun",
+  aliyunOss = "aliyun_oss",
+  cloudflareR2 = "cloudflare_r2",
+  cloudflareImages = "cloudflare_images",
+  cloudflareStream = "cloudflare_stream",
+}
+
+const rootField = "createUploadCredentials";
+
+const createUploadCredentialsGql = `
+  mutation createUploadCredentials($options: UploadOptionsInput!) {
+    ${rootField}(options: $options) {
+      platform
+      credentials
+      uploadUrl
+      expiry
+    }
+  }
+`;
+
+export async function createUploadCredentials(
+  options: UploadOptions,
+  envVariables: EnvVariables
+): Promise<UploadSession | null> {
+  const entifyClient = createEntifyClient(envVariables);
+
+  const data = await entifyClient.client.request<{ [key: string]: UploadSession | null }>(
+    createUploadCredentialsGql,
+    { options }
+  );
+
+  const response = data?.[rootField];
+
+  if (!response) {
+    return null;
+  }
+
+  return response;
+}