@rxdrag/website-lib-core 0.0.119 → 0.0.121

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.119",
+  "version": "0.0.121",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -24,7 +24,7 @@
     "eslint": "^9.39.2",
     "typescript": "^5",
     "@rxdrag/eslint-config-custom": "0.2.13",
-    "@rxdrag/tiptap-preview": "0.0.2",
+    "@rxdrag/tiptap-preview": "0.0.3",
     "@rxdrag/tsconfig": "0.2.1"
   },
   "dependencies": {
@@ -34,7 +34,7 @@
     "hls.js": "^1.6.13",
     "lodash-es": "^4.17.21",
     "@rxdrag/entify-lib": "0.0.24",
-    "@rxdrag/rxcms-models": "0.3.97"
+    "@rxdrag/rxcms-models": "0.3.98"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0",

package/src/astro/background.ts

@@ -2,45 +2,50 @@
 export type ColorBackgroundConfig = {
   id?: string;
   type: "color";
-  className?: string; // 颜色 ，模糊，图案等，如 "bg-blue-500", "bg-gradient-to-r from-blue-500 to-purple-600"
+  class?: string; // 颜色 ，模糊，图案等，如 "bg-blue-500", "bg-gradient-to-r from-blue-500 to-purple-600"
+  className?: string;//兼容旧的
 };
 
 export type BlurBackgroundConfig = {
   id?: string;
   type: "blur";
-  className?: string; // 模糊，如 "backdrop-blur"
+  class?: string; // 模糊，如 "backdrop-blur"
+  className?: string;//兼容旧的
 };
 
 export type ImageBackgroundConfig = {
   id?: string;
   type: "image";
-  className?: string; // 图片，如 "bg-cover bg-center bg-no-repeat"
-  mediaRef?: string; // 图片ref
+  class?: string; // 图片，如 "bg-cover bg-center bg-no-repeat"
+  className?: string;//兼容旧的
+  //实际组件中还会传入ImageMetadata
   src?: string; // 图片源
 };
 
 export type SvgBackgroundConfig = {
   id?: string;
   type: "svg";
-  className?: string; // 图案，如 "bg-dots-sm bg-gray-100"
+  class?: string; // 图案，如 "bg-dots-sm bg-gray-100"
+  className?: string;//兼容旧的
   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
-  mediaSrc?: string; // 视频源
-  posterSrc?: string; // 视频封面图源
+  class?: string; // 视频，如 "bg-cover bg-center bg-no-repeat"
+  className?: string;//兼容旧的
+  mediaRef?: string; // 视频源
+  //实际组件中还会传入ImageMetadata
+  poster?: string; // 视频封面图源
 };
 
 export type SplineBackgroundConfig = {
   id?: string;
   type: "spline";
-  className?: string; // Spline，如 "bg-cover bg-center bg-no-repeat"
-  mediaRef?: string; // Spline ID
+  class?: string; // Spline，如 "bg-cover bg-center bg-no-repeat"
+  className?: string;//兼容旧的
+  spline?: string; // Spline ID
   url?: string; // Spline 场景 URL
 };
 

package/src/astro/media.ts

@@ -55,7 +55,7 @@ export const DEFAULT_POST_THUMBNAIL_IMAGE_SIZE: ImageResize = {
 export type ImageProps = {
   alt?: string;
   className?: string;
-  mediaRef?: string;
+  src?: string;
   //默认original
   fileField?: FileFieldType;
   resize?: ImageResize;

package/src/design-tokens.ts

@@ -0,0 +1,160 @@
+/**
+ * 站点排版（Typography）相关的 className 枚举。
+ *
+ * - 这些值对应 Tailwind/CSS 中的 class 名称（例如 `.text-h1`）。
+ * - 用 enum 的好处是：业务侧使用时避免手写字符串、避免拼写错误。
+ */
+export enum TypographyClassName {
+  /**
+   * 一级标题（H1）
+   * - 使用场景：首页 Banner 主标题、内页页面标题
+   * - 样式：`@apply text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-semibold leading-tight;`
+   * - 文字颜色：品牌主色
+   *   - 例：工业蓝 `#2E5AAC` / RGB(46, 90, 172)
+   *   - Tailwind：`text-[#2E5AAC]`
+   */
+  textH1 = "text-h1",
+
+  /**
+   * 二级标题（H2）
+   * - 使用场景：板块标题（如“关于我们 / 产品分类 / 数字实力”）
+   * - 样式：`@apply text-3xl sm:text-4xl lg:text-5xl font-semibold leading-snug;`
+   * - 文字颜色：深灰色
+   *   - 例：`#333333` / RGB(51, 51, 51)
+   *   - Tailwind：`text-[#333333]`
+   */
+  textH2 = "text-h2",
+
+  /**
+   * 三级标题（H3）
+   * - 使用场景：子板块标题（如产品子类、优势小点）
+   * - 样式：`@apply text-2xl sm:text-3xl lg:text-4xl font-semibold leading-snug;`
+   * - 文字颜色：中深灰色
+   *   - 例：`#444444` / RGB(68, 68, 68)
+   *   - Tailwind：`text-[#444444]`
+   */
+  textH3 = "text-h3",
+
+  /**
+   * 四级标题（H4）
+   * - 使用场景：详情页小标题（如参数分类、案例亮点）
+   * - 样式：`@apply text-xl sm:text-2xl lg:text-3xl font-semibold leading-snug;`
+   * - 文字颜色：中灰色
+   *   - 例：`#555555` / RGB(85, 85, 85)
+   *   - Tailwind：`text-[#555555]`
+   */
+  textH4 = "text-h4",
+
+  /**
+   * H5
+   * - 使用场景：H5 标题
+   * - 样式：`@apply text-lg md:text-xl leading-snug;`
+   */
+  textH5 = "text-h5",
+
+  /**
+   * H6
+   * - 使用场景：H6 标题
+   * - 样式：`@apply text-base md:text-lg leading-relaxed;`
+   */
+  textH6 = "text-h6",
+
+
+  // 正文（Body）
+  // - 更符合网站惯例：用全局基准字体（body 或内容容器）统一控制正文样式，段落直接继承
+  // - 文字颜色：中灰色
+  //   - 例：`#666666` / RGB(102, 102, 102)
+  //   - Tailwind：`text-[#666666]`
+  // textBody = "text-body",
+
+  /**
+   * 辅助说明（Caption）
+   * - 使用场景：图片标注、参数备注、表单提示
+   * - 样式：`@apply text-xs md:text-sm leading-snug;` + `color: var(--foreground-secondary);`
+   * - 文字颜色：浅灰色
+   *   - 例：`#888888` / RGB(136, 136, 136)
+   *   - Tailwind：`text-[#888888]`
+   */
+  textCaption = "text-caption",
+
+  /**
+   * 强调文本（Strong）
+   * - 使用场景：核心数据、优势关键词（适配“数字实力”板块）
+   * - 样式：`@apply text-lg md:text-xl font-semibold leading-snug;`
+   * - 文字颜色：建议使用深灰色或继承当前容器标题色（以保证强调对比）
+   *   - 深灰示例：`#333333` / RGB(51, 51, 51)
+   *   - Tailwind：`text-[#333333]`
+   */
+  textStrong = "text-strong",
+
+  /**
+   * 链接文本（Link）
+   * - 使用场景：导航栏、按钮文字、详情跳转
+   * - 样式：`@apply text-sm md:text-base font-medium leading-snug;`
+   * - 文字颜色：品牌主色（同 H1）或深灰色 `#333333`
+   *   - 常规：品牌主色 `#2E5AAC` / RGB(46, 90, 172)
+   *   - Hover：主色加深 `#1E4A9C`
+   *   - Tailwind：`text-[#2E5AAC] hover:text-[#1E4A9C]`
+   */
+  textLink = "text-link",
+}
+
+/**
+ * 颜色规范补充（非 Typography class）：
+ * - 表单必填提示 / 订单须知：低饱和警示色
+ *   - 例：`#E67E22` / RGB(230, 126, 34)
+ *   - Tailwind：`text-[#E67E22]`
+ */
+
+/**
+ * 下拉/单选等 UI 控件的可选项顺序。
+ *
+ * 说明：不要依赖 `Object.values(TypographyClassName)` 做 UI 列表
+ * - 顺序不一定符合展示需求
+ * - 后续插入/调整可能导致 UI 顺序变化
+ */
+export const typographyClassNameList: TypographyClassName[] = [
+  TypographyClassName.textCaption,
+  TypographyClassName.textStrong,
+  TypographyClassName.textLink,
+  TypographyClassName.textH1,
+  TypographyClassName.textH2,
+  TypographyClassName.textH3,
+  TypographyClassName.textH4,
+  TypographyClassName.textH5,
+  TypographyClassName.textH6,
+];
+
+/**
+ * 面向 UI 展示的短 label（用于下拉选项文案）。
+ *
+ * 约束：尽量短，避免下拉太宽。
+ */
+export const typographyClassNameLabels: Record<TypographyClassName, string> = {
+  [TypographyClassName.textH1]: "一级标题",
+  [TypographyClassName.textH2]: "二级标题",
+  [TypographyClassName.textH3]: "三级标题",
+  [TypographyClassName.textH4]: "四级标题",
+  [TypographyClassName.textH5]: "五级标题",
+  [TypographyClassName.textH6]: "六级标题",
+  [TypographyClassName.textCaption]: "说明",
+  [TypographyClassName.textStrong]: "强调",
+  [TypographyClassName.textLink]: "链接",
+};
+
+/**
+ * Heading 组件 level(1-6) 与 Typography class 的映射。
+ *
+ * 说明：只定义 1-4（H1~H4）的排版规范；H5/H6 暂时回退到较小正文规格。
+ */
+export const headingLevelToTypographyClassName: Record<
+  1 | 2 | 3 | 4 | 5 | 6,
+  TypographyClassName
+> = {
+  1: TypographyClassName.textH1,
+  2: TypographyClassName.textH2,
+  3: TypographyClassName.textH3,
+  4: TypographyClassName.textH4,
+  5: TypographyClassName.textH5,
+  6: TypographyClassName.textH6,
+};

package/src/entify/Entify.ts

@@ -15,6 +15,8 @@ import {
   queryPosts,
   queryProductCategories,
   queryProducts,
+  queryTagCategories,
+  queryTags,
   queryUserPosts,
   fulltextSearch,
   queryOneEntity,
@@ -268,6 +270,14 @@ export class Entify implements IEntify {
     return await queryOnePostCategoryBySlug(slug, this.envVariables);
   }
 
+  public async getTagCategories() {
+    return await queryTagCategories(this.envVariables);
+  }
+
+  public async getTags(categoryId?: string) {
+    return await queryTags(this.envVariables, categoryId);
+  }
+
   public async getProducts(
     conditions: ListConditions,
     imageSize: ImageSize | undefined,

package/src/entify/IEntify.ts

@@ -5,6 +5,8 @@ import {
   TPostCategory,
   TProduct,
   TProductCategory,
+  TTag,
+  TTagCategory,
   TUser,
 } from "./view-model";
 import {
@@ -123,6 +125,10 @@ export interface IEntify {
 
   getPostCategoryBySlug(slug: string): Promise<TPostCategory | undefined>;
 
+  getTagCategories(): Promise<TTagCategory[] | undefined>;
+
+  getTags(categoryId?: string): Promise<TTag[] | undefined>;
+
   getProducts(
     conditions: ListConditions,
     imageSize: ImageSize | undefined,

package/src/entify/lib/index.ts

@@ -19,6 +19,8 @@ export * from "./queryOneProductCategoryBySlug";
 export * from "./queryOneUser";
 export * from "./queryPostCategories";
 export * from "./queryPosts";
+export * from "./queryTagCategories";
+export * from "./queryTags";
 export * from "./queryProductCategories";
 export * from "./queryProducts";
 export * from "./queryProductsInMenu";

package/src/entify/lib/queryTagCategories.ts

@@ -0,0 +1,58 @@
+import {
+  TagCategory,
+  TagCategoryBoolExp,
+  TagCategoryOrderBy,
+  TagCategoryDistinctExp,
+  TagCategoryFields,
+  TagCategoryQueryOptions,
+  TagQueryOptions,
+  TagFields,
+} from "@rxdrag/rxcms-models";
+import { queryEntityList } from "./queryEntityList";
+import { ListResult } from "@rxdrag/entify-lib";
+import { EnvVariables } from "../types";
+import { TTagCategory } from "../view-model";
+import { listToTree } from "./listToTree";
+
+export async function queryTagCategories(envVariables: EnvVariables) {
+  const result = await queryEntityList<
+    TagCategory,
+    TagCategoryBoolExp,
+    TagCategoryOrderBy,
+    TagCategoryDistinctExp
+  >(
+    new TagCategoryQueryOptions(
+      [
+        TagCategoryFields.id,
+        TagCategoryFields.name,
+      ],
+      {
+        where: {
+          lang: {
+            abbr: {
+              _eq: envVariables.language,
+            },
+          },
+        },
+        orderBy: [{ [TagCategoryFields.name]: "asc" }],
+      }
+    )
+      .parent()
+      .tags(
+        new TagQueryOptions(
+          [TagFields.id, TagFields.name, TagFields.color],
+          {
+            orderBy: [{ [TagFields.createdAt]: "desc" }],
+          }
+        )
+      ),
+    envVariables
+  );
+  const typedResult = result as ListResult<TTagCategory> | undefined;
+
+  if (!typedResult) {
+    return undefined;
+  }
+
+  return listToTree(typedResult.items || []);
+}

package/src/entify/lib/queryTags.ts

@@ -0,0 +1,57 @@
+import {
+  Tag,
+  TagBoolExp,
+  TagOrderBy,
+  TagDistinctExp,
+  TagFields,
+  TagQueryOptions,
+  TagAssciations,
+} from "@rxdrag/rxcms-models";
+import { queryEntityList } from "./queryEntityList";
+import { ListResult } from "@rxdrag/entify-lib";
+import { EnvVariables } from "../types";
+import { TTag } from "../view-model";
+
+export async function queryTags(envVariables: EnvVariables, categoryId?: string) {
+  const whereCondition: TagBoolExp = {
+    lang: {
+      abbr: {
+        _eq: envVariables.language,
+      },
+    },
+  };
+
+  if (categoryId) {
+    whereCondition[TagAssciations.category] = {
+      id: { _eq: categoryId },
+    };
+  }
+
+  const result = await queryEntityList<
+    Tag,
+    TagBoolExp,
+    TagOrderBy,
+    TagDistinctExp
+  >(
+    new TagQueryOptions(
+      [
+        TagFields.id,
+        TagFields.name,
+        TagFields.color,
+      ],
+      {
+        where: whereCondition,
+        orderBy: [{ [TagFields.name]: "asc" }],
+      }
+    ).category(),
+    envVariables
+  );
+
+  const typedResult = result as ListResult<TTag> | undefined;
+
+  if (!typedResult) {
+    return undefined;
+  }
+
+  return typedResult.items;
+}

package/src/entify/view-model/models.ts

@@ -50,6 +50,21 @@ export type TPostCategory = {
   posts?: TPost[];
 };
 
+export type TTagCategory = {
+  id?: string | null;
+  name?: string;
+  children?: TTagCategory[];
+  parent?: TTagCategory;
+  tags?: TTag[];
+};
+
+export type TTag = {
+  id?: string | null;
+  name?: string;
+  color?: string;
+  category?: TTagCategory;
+};
+
 export type TUser = {
   id?: string | null;
   name?: string;
@@ -113,6 +128,8 @@ export const entityMaps: Record<string, string> = {
   Product: "TProduct",
   Post: "TPost",
   PostCategory: "TPostCategory",
+  TagCategory: "TTagCategory",
+  Tag: "TTag",
   User: "TUser",
   WebsiteSettings: "TWebsiteSettings",
 };

package/src/index.ts

@@ -4,3 +4,5 @@ export * from "./entify";
 export * from "./react";
 export * from "./robots";
 export * from "./lib";
+export * from "./design-tokens";
+

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

@@ -2,25 +2,19 @@ import {
   Icon as IconifyIcon,
   IconProps as IconifyIconProps,
 } from "@iconify/react";
+import type { IconifyIcon as IconifyIconData } from "@iconify/react";
 import { forwardRef } from "react";
-import { svgToIconify } from "./svgToIconify";
-
-export { svgToIconify };
 
 export type IconProps = Omit<IconifyIconProps, "icon"> & {
-  icon?: string;
-  svg?: string;
+  icon?: string | IconifyIconData;
 };
 
 export const Icon = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
-  const { icon, svg, ...rest } = props;
-
-  const iconObj = svg ? svgToIconify(svg) : undefined;
-  const finalIcon = icon || iconObj;
+  const { icon, ...rest } = props;
 
-  if (!finalIcon) {
+  if (!icon) {
     return null;
   }
 
-  return <IconifyIcon ref={ref} {...rest} icon={finalIcon} />;
-});
+  return <IconifyIcon ref={ref} {...rest} icon={icon} />;
+});

package/src/react/components/Icon/svgToIconify.ts

@@ -1,59 +0,0 @@
-import { IconifyIcon } from "@iconify/react";
-
-export function svgToIconify(svgString: string): IconifyIcon | null {
-  if (typeof window === 'undefined') return null;
-
-  try {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(svgString, "image/svg+xml");
-    const svg = doc.querySelector("svg");
-
-    if (!svg) {
-      console.error("Invalid SVG string");
-      return null;
-    }
-
-    const viewBox = svg.getAttribute("viewBox");
-    let width = svg.getAttribute("width");
-    let height = svg.getAttribute("height");
-
-    // 如果没有显式宽高，尝试从 viewBox 解析
-    if (viewBox && (!width || !height)) {
-      const parts = viewBox.split(/\s+/).map(parseFloat);
-      if (parts.length === 4) {
-        if (!width) width = parts[2].toString();
-        if (!height) height = parts[3].toString();
-      }
-    }
-
-    // 提取关键属性并包裹在 <g> 中，以保留 SVG 根节点的样式
-    const attributesToPreserve = [
-      "fill", 
-      "stroke", 
-      "stroke-width", 
-      "stroke-linecap", 
-      "stroke-linejoin"
-    ];
-    
-    const gAttributes = attributesToPreserve
-      .map(attr => {
-        const value = svg.getAttribute(attr);
-        return value ? `${attr}="${value}"` : "";
-      })
-      .filter(Boolean)
-      .join(" ");
-
-    const body = gAttributes 
-      ? `<g ${gAttributes}>${svg.innerHTML}</g>`
-      : svg.innerHTML;
-
-    return {
-      body,
-      width: width ? parseFloat(width) : undefined,
-      height: height ? parseFloat(height) : undefined,
-    };
-  } catch (e) {
-    console.error("Error parsing SVG:", e);
-    return null;
-  }
-}