@rxdrag/website-lib 0.0.119 → 0.0.121

package/components//347/211/251/346/226/231/346/270/205/345/215/225.md

@@ -0,0 +1,487 @@
+# 原子化物料清单
+
+> 外贸 toB 独立站物料体系，按冻结层级分类
+
+| 分类 | 数量 | 说明 |
+|------|------|------|
+| 完全冻结原子 | 14 | 语义和接口永不改变 |
+| 半冻结原子 | 4 | 规则冻结，形态可扩展 |
+| 业务组件 | 9 | 包含复杂交互逻辑 |
+| 设计器模板 | 52 | 一键生成常用结构 |
+
+---
+
+## 一、原子物料判断公式
+
+新原子是否该加？满足 ≥2 条才值得：
+
+- 在 3 个以上站点重复出现？
+- AI 是否能明确理解它的语义？
+- 是否能明显减少模板复杂度？
+- 是否对转化 / SEO 有直接价值？
+
+---
+
+## 二、🧊 完全冻结（Frozen）
+
+> 语义和接口永不改变，AI 只能操作内容，不能改结构
+
+### 1. 结构原子
+
+**Section（区块）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+
+interface SectionProps extends HTMLAttributes<'section'> {
+  className?: string;
+  containerClassName?: string;
+  backgrounds?: BackgroundConfig[];
+  disableContainer?: boolean;
+}
+```
+
+**BaseHeader（基础 Header 容器壳）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+
+interface BaseHeaderProps extends HTMLAttributes<'header'> {
+  className?: string;
+  containerClassName?: string;
+  backgrounds?: BackgroundConfig[];
+  disableContainer?: boolean;
+}
+```
+
+**BaseFooter（基础 Footer 容器壳）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+
+interface BaseFooterProps extends HTMLAttributes<'footer'> {
+  className?: string;
+  containerClassName?: string;
+  backgrounds?: BackgroundConfig[];
+  disableContainer?: boolean;
+}
+```
+
+**Container（容器）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+
+interface ContainerProps extends HTMLAttributes<'div'> {
+  className?: string;
+}
+```
+
+**BaseBlock（基础容器壳）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+
+interface BaseBlockProps extends HTMLAttributes<'div'> {
+  baseClass?: string | string[];
+  className?: string;
+  backgrounds?: BackgroundConfig[];
+}
+```
+
+### 2. 布局原子
+
+**Grid（网格）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+
+interface GridProps extends HTMLAttributes<'div'> {
+  patternName?: string;
+  className?: string;
+  backgrounds?: BackgroundConfig[];
+}
+```
+
+**GridCell（网格单元）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+
+interface GridCellProps extends HTMLAttributes<'div'> {
+  className?: string;
+  backgrounds?: BackgroundConfig[];
+}
+```
+
+**Stack（堆叠）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+
+interface StackProps extends HTMLAttributes<'div'> {
+  className?: string;
+  backgrounds?: BackgroundConfig[];
+}
+```
+
+- mobile 强制 vertical
+- 方向/间距/对齐等布局响应式通过 class / className（Tailwind，如 flex flex-col md:flex-row gap-4 md:gap-8 items-center）表达
+
+### 3. 内容原子
+
+**Heading（标题）**
+
+- 不单独定义 Heading 原子
+- 直接使用原生 `h1/h2/h3/h4` 标签表达语义
+- 视觉样式（字号/字重/行高/响应式）统一通过 `class` / `className`（Tailwind，如 `text-2xl md:text-4xl font-semibold`）表达
+
+**P（段落）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+
+interface PProps extends HTMLAttributes<'p'> {
+}
+```
+- 语义：段落文本（块级），适合正文描述、说明文案、长文本
+
+**Span（行内文本）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+
+interface SpanProps extends HTMLAttributes<'span'> {
+}
+```
+- 语义：行内文本（inline），适合按钮旁提示、小标签、句内强调、短文本片段
+- 文本样式（字号/字重/颜色/行高/响应式）统一通过 `class`（Tailwind，如 `text-sm md:text-base text-muted-foreground`）表达
+
+**Image（图片）**
+- 不在 `website-lib` 中定义 Image 原子组件
+- 推荐直接使用 Astro 官方 `astro:assets` 的 `Image` 组件（构建期生成优化后的图片与 srcset）
+- `website-lib/components/Image.astro` 仅用于兼容旧代码（`mediaRef/fileField/resize` 取图），后续逐步下线
+
+**Picture（响应式图片）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+
+type PictureSource = {
+  srcset: string;
+  media?: string;
+  type?: string;
+  sizes?: string;
+};
+
+interface PictureProps extends HTMLAttributes<'picture'> {
+  className?: string;
+  sources?: PictureSource[];
+  imgProps: Omit<HTMLAttributes<'img'>, 'src'> & {
+    src: string;
+  };
+}
+```
+- 语义：响应式图片容器（picture/source/img），用于 art-direction、不同断点/格式（如 webp/avif）切换
+- 规则：结构固定为 `<picture><source* /><img /></picture>`，AI 只允许改 `sources/imgProps` 内容，不改结构
+- 样式：通过 `className` 或原生 `class`（Tailwind）控制
+
+**Video（视频）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+
+interface VideoProps extends HTMLAttributes<'video'> {
+  src: string;
+  poster?: string;
+}
+```
+- 语义：视频（对应原生 video 标签或视频播放器）
+- 是否 controls/自动播放/静音/inline 等通过原生属性 + `class` 表达
+
+**Icon（图标）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+
+interface IconProps extends HTMLAttributes<'span'> {
+  className?: string;
+  icon?: string;
+  svg?: string;
+}
+```
+- 语义：图标（装饰性或功能性图标）
+- icon：图标名，支持 iconify（如 `mdi:check`）或本地图标 `local:xxx`（由 Entify 在运行时加载 svg）
+- svg：直接传入 svg 字符串（优先级低于 local 图标加载）
+- 大小/颜色/旋转/动画等统一通过 `className`（Tailwind，如 `w-6 h-6 text-blue-500 rotate-90`）表达
+
+**hr（分割线）**
+- 不单独定义 hr 原子
+- 直接使用原生 `<hr>` 标签表达语义
+- 视觉样式（边框颜色/粗细/间距/响应式）统一通过 `class`（Tailwind，如 `border-t border-gray-300 my-8`）表达
+
+**Link（链接）**
+
+```ts
+import type { HTMLAttributes } from "astro/types";
+import type { LinkType } from "@rxdrag/website-lib-core";
+
+interface LinkProps extends HTMLAttributes<'a'> {
+  type?: LinkType | string;
+  to?: string;
+  className?: string;
+  //用于active类名的传递
+  activeWhen?: string | true;
+
+  // 链接生成配置：用于 toHref 计算最终 href 的路径前缀
+  // - productsSlug：产品详情页路径前缀（如 "products"）
+  // - postsSlug：文章详情页路径前缀（如 "posts"）
+  options?: {
+    productsSlug?: string;
+    postsSlug?: string;
+  };
+
+  // 允许外部传入以便兼容旧用法，但运行时会被忽略（href 统一由 type/to/options 生成）
+  href?: string;
+}
+```
+
+- href 由组件内部根据 type/to/options 计算，不建议外部直接传 href
+
+### 4. 行为原子
+
+- 不定义 Button/CTA 原子组件
+- 直接使用原生 `button`（触发动作）或 `a`/`Link`（跳转）
+- 视觉样式/响应式统一通过 `class`（Tailwind）表达
+
+### 5. 表单原子（询盘核心）
+
+- 基础表单控件（Input/Textarea）作为半冻结原子（见"三、半冻结"章节）
+- 复杂表单控件（TelInput/FileUpload/Select）建议通过设计器模板/Designer 生成（见文末备注）
+- 完整表单（含校验/提交/防机器人）建议直接使用 ContactForm 业务组件（见"四、业务组件"章节）
+
+---
+
+## 三、🧊❄️ 半冻结（Semi-Frozen）
+
+> 规则冻结，形态可扩展（可加 variant，但不改核心接口）
+
+- 富文本排版（Prose）：直接在容器上使用 Tailwind `prose` 类（如 `prose prose-lg prose-zinc`），不作为独立组件。场景：产品详情、博客正文、About 页面
+- 间距控制（Spacer）：使用 Tailwind 的 `gap`/`space-y`/`mt`/`mb` 等工具类，不需要 Spacer 组件
+- 对齐控制（Align）：使用 Tailwind 的 `text-center`/`justify-center`/`items-center` 等工具类，不需要 Align 组件
+
+**Badge（徽标）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+
+interface BadgeProps extends HTMLAttributes<'span'> {
+  className?: string;
+  tone?: "info" | "success" | "warning" | "error" | "neutral";
+}
+```
+- 语义：状态标签、分类标签等
+- tone：语义化的颜色变体（info/success/warning/error/neutral）
+- 样式通过 `className` 和 `tone` 组合控制
+
+**Input（输入框）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+
+interface InputProps extends Omit<HTMLAttributes<'input'>, 'type'> {
+  label?: string;
+  name: string;
+  type?: "text" | "email" | "tel" | "number" | "password" | "url";
+  required?: boolean;
+  placeholder?: string;
+  error?: string;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  requiredClassName?: string;
+  fieldStyle?: "default" | "label-inline" | string;
+}
+```
+- 语义：基础文本输入框（支持文本/邮箱/电话/数字/密码/URL 类型）
+- 包含 label/input/error 提示的完整结构
+- fieldStyle：支持不同布局样式（default: label 在上方，label-inline: label 在左侧）
+- 样式通过 className/labelClassName/inputClassName 控制
+
+**Textarea（多行输入）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+
+interface TextareaProps extends Omit<HTMLAttributes<'textarea'>, 'rows'> {
+  label?: string;
+  name: string;
+  required?: boolean;
+  placeholder?: string;
+  rows?: number;
+  error?: string;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  requiredClassName?: string;
+  fieldStyle?: "default" | "label-inline" | string;
+}
+```
+- 语义：多行文本输入框
+- 包含 label/textarea/error 提示的完整结构
+- fieldStyle：支持不同布局样式（同 Input）
+- 样式通过 className/labelClassName/inputClassName 控制
+
+**Checkbox/Radio（复选/单选）**
+```ts
+import type { HTMLAttributes } from "astro/types";
+
+interface CheckboxProps extends Omit<HTMLAttributes<'input'>, 'type'> {
+  label?: string;
+  name: string;
+  value?: string;
+  checked?: boolean;
+  required?: boolean;
+  error?: string;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+}
+
+interface RadioProps extends CheckboxProps {
+  // 继承 Checkbox 的所有属性
+}
+```
+- 语义：复选框（Checkbox）或单选框（Radio）
+- 包含 label/input/error 提示的完整结构
+- 用于同意条款、选项选择等场景
+- 样式通过 className/labelClassName/inputClassName 控制
+
+---
+
+## 四、🔥 不冻结 / 业务组件
+
+> 设计趋势变化快、形态多变，或包含复杂交互逻辑，不纳入冻结原子清单
+
+**AnimationNumber（数字动画）**
+```ts
+interface AnimationNumberProps {
+  start?: number;
+  end: number;
+  duration?: number;
+  class?: string;
+  sign?: string;
+  once?: boolean;
+  type?: "int" | "float";
+  fractionDigits?: number;
+}
+```
+- 职责：数字滚动动画（从 start 滚动到 end）
+- 特点：IntersectionObserver 视口检测、缓动动画、支持整数/浮点数、可配置是否只播放一次
+- 使用：`import AnimationNumber from '@rxdrag/website-lib/components/AnimationNumber.astro'`
+- 不作为原子原因：包含复杂的动画逻辑、视口检测、MutationObserver 等业务逻辑（218 行代码）
+
+> 以下是包含复杂交互逻辑和状态管理的组件，作为可复用的业务组件由开发者直接导入使用
+
+**Dialog（对话框/弹窗）**
+- 职责：模态对话框，支持原生 `<dialog>` 和降级方案
+- 特点：包含打开/关闭动画、backdrop 控制、焦点管理、ESC/点击外部关闭、多种定位方式（center/top）
+- 使用：`import Dialog from '@rxdrag/website-lib/components/Dialog.astro'`
+- 不作为原子原因：交互逻辑复杂（375 行代码），包含状态机、动画协调、原生 API 降级处理等业务逻辑
+
+**Popover（弹出面板）**
+- 职责：悬浮展开面板，支持 hover/click 触发
+- 特点：包含高度动画、hover 延迟、点击外部关闭、ESC 关闭、全局 popover 协调
+- 使用：`import Popover from '@rxdrag/website-lib/components/Popover.astro'`
+- 不作为原子原因：交互逻辑复杂（188 行代码），包含事件协调、动画状态管理等业务逻辑
+
+**Collapse（折叠面板）**
+- 职责：可折叠内容区域（手风琴）
+- 特点：包含高度动画、初始状态支持、aria 属性管理、支持 Astro SPA 导航
+- 使用：`import Collapse from '@rxdrag/website-lib/components/Collapse.astro'`
+- 不作为原子原因：交互逻辑复杂（126 行代码），包含动画状态管理、transitionend 事件处理等业务逻辑
+
+**ContactForm（询盘表单）**
+- 职责：完整询盘表单（字段渲染 + 校验 + 提交 + 防机器人 + 上传）
+- 特点：内置 email/message 校验、honeypot（phone）防机器人、encryptedField 加密字段、提交状态与错误提示、可配置字段列表（fields）
+- 使用：`import { ContactForm } from '@rxdrag/website-lib-core/src/react/components/ContactForm'`
+- 不作为原子原因：包含实际业务逻辑与提交流程，不适合作为冻结原子
+
+**Carousel（轮播）**
+- 职责：图片/内容轮播展示
+- 特点：自动播放、手动切换、无限循环、指示器、响应式、触摸滑动支持
+- 使用：`import Carousel from '@rxdrag/website-lib/components/Carousel.astro'`（待实现）
+- 不作为原子原因：交互逻辑复杂，包含自动播放定时器、触摸事件处理、动画状态管理等业务逻辑
+
+**Tabs（标签页）**
+- 职责：标签页切换展示
+- 特点：支持水平/垂直布局、键盘导航、URL 同步、懒加载内容
+- 使用：`import Tabs from '@rxdrag/website-lib/components/Tabs.astro'`（待实现）
+- 不作为原子原因：交互逻辑复杂，包含状态管理、键盘事件处理、URL 路由同步等业务逻辑
+
+**Card（卡片）**
+- 职责：内容卡片容器（图片 + 标题 + 描述 + 操作按钮等）
+- 特点：支持多种布局变体（横向/纵向）、悬停效果、阴影/边框样式、可点击/可展开
+- 使用：`import Card from '@rxdrag/website-lib/components/Card.astro'`（待实现）
+- 不作为原子原因：组合结构复杂，包含多个子元素（header/body/footer）和交互状态，形态多变
+
+**Medias（图片画廊）**
+- 职责：图片/视频画廊展示（主图 + 缩略图导航）
+- 特点：缩略图切换、键盘控制（方向键）、图片缩放、视频播放、左右箭头导航、支持横向/纵向缩略图布局
+- 使用：`import { Medias } from '@rxdrag/website-lib-core/src/react/components/Medias'`
+- 不作为原子原因：交互逻辑复杂（264 行代码），包含状态管理、键盘事件处理、缩略图滚动计算等业务逻辑
+
+**说明**：
+- 这些组件形态多变、易滥用，不适合作为冻结原子
+- 它们包含的 JavaScript 业务逻辑无法简化为设计器模板
+- 开发者可以直接导入使用，或根据具体需求自行封装变体
+
+---
+
+## 五、设计器模板 / Designer 备注
+
+- **Box（盒子）**：用设计器提供一个"Box 模板/Designer"：一键生成通用容器盒子（用于 Feature 卡片、Pricing 卡片、侧边栏模块等），支持配置 `className` 和 `backgrounds`，后续仍可自由用 `class` 调整样式
+- **Feature（卖点）**：用设计器提供一个"Feature 模板/Designer"：一键生成 `Icon + h3 + p` 的结构，后续仍可自由用 `class` 调整
+- **CTA Button（行动号召按钮）**：用设计器提供"CTA Button 模板/Designer"：一键插入常见的 CTA 按钮（Get Price/Get Sample/Contact Us 等），预设文案和样式（主按钮/次按钮/边框按钮），后续可自由修改文案、样式、链接
+- **LogoCloud（Logo 墙）**：用设计器提供一个"LogoCloud 模板/Designer"：一键生成 Logo 墙结构（Grid + 多个 img），支持配置 logos 列表、列数（响应式）、单色/彩色模式等
+- **Testimonial（用户评价）**：用设计器提供一个"Testimonial 模板/Designer"：一键生成用户评价结构（blockquote + 引用文字 + 作者信息 + 头像），后续仍可自由用 `class` 调整
+- **Rating（评分）**：用设计器提供一个"Rating 模板/Designer"：一键生成星级评分结构（Icon 组件循环渲染星星），支持配置评分值、最大值、是否显示数值等
+- **PriceTag（价格标签）**：用设计器提供一个"PriceTag 模板/Designer"：一键生成价格标签结构（金额 + 货币符号 + 原价划线），支持配置货币类型、原价等
+- **Image（图片）**：设计器侧针对图片提供专门的 Designer（负责插入/选择资源/生成 `astro:assets Image` 代码）
+- **Video（视频）**：设计器侧针对视频提供专门的 Designer（负责插入/选择资源/生成带 `src/poster` 的视频代码）
+- **SpecList（参数列表）**：用设计器提供一个"SpecList 模板/Designer"：一键生成参数列表结构（建议 `dl/dt/dd` 或 `ul/li`），后续仍可自由用 `class` 调整
+- **FAQ（常见问题）**：用设计器提供一个"FAQ 模板/Designer"：一键生成 FAQ 结构（建议使用原生 `details/summary`），需要 SEO 时由设计器/构建流程注入 FAQPage Schema
+- **Breadcrumb（面包屑）**：用设计器提供一个"Breadcrumb 模板/Designer"：一键生成 `nav + ol/li + Link` 结构，需要 SEO 时由设计器/构建流程注入 BreadcrumbList Schema
+- **TelInput（国际电话输入）**：用设计器提供一个"TelInput 模板/Designer"：一键生成国际电话输入框（包含国家/地区码下拉选择 + 电话号码输入 + 自动拼接完整号码），支持搜索国家、自定义国家列表等，后续仍可自由用 `class` 调整样式
+- **FileUpload（文件上传）**：用设计器提供一个"FileUpload 模板/Designer"：一键生成文件上传组件（包含文件选择/拖拽 + 上传到服务器 + 进度显示 + 文件信息返回 + 错误处理），支持配置文件类型限制、大小限制、上传接口等
+- **Select（选择框）**：用设计器提供一个"Select 模板/Designer"：一键生成选择框（包含 label + select/option + error 提示），支持单选/多选、搜索、分组等，后续仍可自由用 `class` 调整样式
+- **Pagination（分页）**：用设计器提供一个"Pagination 模板/Designer"：一键生成分页导航结构（上一页/下一页 + 页码列表），支持配置总页数、当前页、显示页码数量等，后续仍可自由用 `class` 调整样式
+- **Social Links（社交链接）**：用设计器提供一个"Social Links 模板/Designer"：一键生成社交媒体图标链接组（Facebook/LinkedIn/Twitter/Instagram/YouTube/WhatsApp 等），支持配置显示哪些平台、图标样式、链接地址
+- **Newsletter（邮件订阅）**：用设计器提供一个"Newsletter 模板/Designer"：一键生成邮件订阅表单（Email 输入框 + 订阅按钮），支持配置提示文案、按钮文案、提交接口等
+- **Header/Nav（导航菜单）**：用设计器提供一个"Header/Nav 模板/Designer"：一键生成导航结构（Logo + 菜单项 + CTA 按钮 + 移动端汉堡菜单），支持配置菜单层级、样式变体（透明/固定/粘性）
+- **Footer（页脚）**：用设计器提供一个"Footer 模板/Designer"：一键生成页脚结构（多列链接 + 联系信息 + 社交链接 + 版权信息），支持配置列数、内容区块
+- **Timeline（时间轴）**：用设计器提供一个"Timeline 模板/Designer"：一键生成时间轴结构（用于公司历程/项目流程展示），支持配置时间节点、标题、描述、横向/纵向布局
+- **Map（地图嵌入）**：用设计器提供一个"Map 模板/Designer"：一键生成地图嵌入代码（Google Map/百度地图 iframe），支持配置地址、缩放级别、高度等
+- **Filter（筛选器）**：用设计器提供一个"Filter 模板/Designer"：一键生成筛选器结构（用于产品列表筛选），支持配置筛选项（分类/价格区间/属性等）、单选/多选、布局样式
+- **Mobile Nav（移动端导航）**：用设计器提供一个"Mobile Nav 模板/Designer"：一键生成移动端导航面板（汉堡菜单展开后的全屏/侧滑导航），支持配置菜单项、层级展开、动画效果、关闭按钮
+- **Back to Top（返回顶部）**：用设计器提供一个"Back to Top 模板/Designer"：一键生成返回顶部按钮（固定定位、滚动显示/隐藏、平滑滚动），支持配置图标、位置、显示阈值
+- **Cookie Consent（Cookie 同意）**：用设计器提供一个"Cookie Consent 模板/Designer"：一键生成 GDPR 合规的 Cookie 同意弹窗/横幅（底部横幅或弹窗形式），支持配置文案、接受/拒绝按钮、隐私政策链接
+- **Language Switcher（语言切换）**：用设计器提供一个"Language Switcher 模板/Designer"：一键生成语言切换器（下拉菜单或图标列表），支持配置可用语言、显示格式（国旗图标/语言代码/语言名称）
+- **Search（搜索框）**：用设计器提供一个"Search 模板/Designer"：一键生成站内搜索框（输入框 + 搜索按钮/图标），支持配置占位文案、搜索接口、展开/收起动画
+- **WhatsApp Button（WhatsApp 按钮）**：用设计器提供一个"WhatsApp Button 模板/Designer"：一键生成浮动 WhatsApp 客服按钮（固定定位），支持配置电话号码、预设消息、位置（左下/右下）
+- **Announcement Bar（顶部通知栏）**：用设计器提供一个"Announcement Bar 模板/Designer"：一键生成顶部通知栏（促销信息/公告），支持配置文案、链接、背景色、关闭按钮、多条轮播
+- **Hero Section（首屏大图）**：用设计器提供一个"Hero Section 模板/Designer"：一键生成首屏区块（背景图/视频 + 标题 + 副标题 + CTA 按钮），支持配置背景类型、文字对齐、叠加层、高度等
+- **Stats Section（数据统计）**：用设计器提供一个"Stats Section 模板/Designer"：一键生成数据统计区块（多个数字+标签的展示），支持配置数字、标签、图标、列数、动画效果（配合 AnimationNumber）
+- **CTA Section（大横幅CTA）**：用设计器提供一个"CTA Section 模板/Designer"：一键生成页面中间的行动号召横幅（背景 + 标题 + 描述 + CTA 按钮），支持配置背景、按钮样式
+- **Team Section（团队展示）**：用设计器提供一个"Team Section 模板/Designer"：一键生成团队成员展示区块（头像 + 姓名 + 职位 + 社交链接），支持配置列数、卡片样式
+- **Process/Steps（流程/步骤）**：用设计器提供一个"Process/Steps 模板/Designer"：一键生成流程/步骤展示（步骤编号 + 标题 + 描述 + 连接线），支持配置横向/纵向布局、步骤数量、图标
+- **Pricing Table（价格表）**：用设计器提供一个"Pricing Table 模板/Designer"：一键生成定价方案展示（方案名称 + 价格 + 功能列表 + CTA 按钮），支持配置列数、高亮推荐方案、货币符号
+- **Comparison Table（对比表）**：用设计器提供一个"Comparison Table 模板/Designer"：一键生成产品/方案对比表（多列对比 + 功能行 + 勾选/叉号），支持配置列数、行数、高亮差异
+- **Share Buttons（分享按钮）**：用设计器提供一个"Share Buttons 模板/Designer"：一键生成社交分享按钮组（Facebook/Twitter/LinkedIn/WhatsApp/Email 等），支持配置显示平台、按钮样式、分享内容
+- **Alert/Notice（提示块）**：用设计器提供一个"Alert/Notice 模板/Designer"：一键生成提示/警告块（图标 + 文案 + 关闭按钮），支持配置类型（info/success/warning/error）、是否可关闭
+- **Quote/Blockquote（引用块）**：用设计器提供一个"Quote/Blockquote 模板/Designer"：一键生成引用块（引号图标 + 引用文字 + 来源），支持配置样式变体、来源信息
+- **Tags/Categories（标签云）**：用设计器提供一个"Tags/Categories 模板/Designer"：一键生成标签云/分类列表（用于产品分类、博客标签展示），支持配置标签样式（圆角/方角）、颜色、链接、布局（inline/grid）
+- **Avatar（头像）**：用设计器提供一个"Avatar 模板/Designer"：一键生成头像组件（圆形/方形图片 + 可选姓名/状态），支持配置尺寸、形状、边框、占位图、头像组（重叠展示）
+- **Sidebar（分类侧边栏）**：用设计器提供一个"Sidebar 模板/Designer"：一键生成侧边栏结构（用于产品列表/博客列表页），支持配置内容区块（分类导航、筛选条件、标签云、搜索框、最新文章等）、折叠/展开、粘性定位
+- **Author Card（作者卡片）**：用设计器提供一个"Author Card 模板/Designer"：一键生成作者简介卡片（头像 + 姓名 + 简介 + 社交链接），用于博客文章底部，支持配置布局样式（横向/纵向）
+- **Table of Contents（文章目录）**：用设计器提供一个"Table of Contents 模板/Designer"：一键生成文章目录导航（自动提取 h2/h3 标题生成锚点列表），支持配置层级深度、粘性定位、高亮当前章节
+- **Mega Menu（大型下拉菜单）**：用设计器提供一个"Mega Menu 模板/Designer"：一键生成多列下拉导航菜单（分类 + 子菜单 + 图片/图标），用于产品分类较多的站点，支持配置列数、子菜单层级、悬停/点击触发
+- **Icon List（图标列表）**：用设计器提供一个"Icon List 模板/Designer"：一键生成带图标的列表项（✓/✗/图标 + 文字），用于产品特性、服务优势、功能对比等，支持配置图标类型、颜色、布局（单列/多列）
+- **404/Error Page（错误页面）**：用设计器提供一个"404/Error Page 模板/Designer"：一键生成错误页面（404/500 等），包含错误插图/图标 + 错误提示文案 + 返回首页按钮，支持配置错误类型、自定义插图
+- **Thank You Page（感谢页面）**：用设计器提供一个"Thank You Page 模板/Designer"：一键生成表单提交成功后的感谢页面（成功图标 + 感谢文案 + 后续引导），支持配置文案、CTA 按钮、社交分享
+- **Post Meta（文章元信息）**：用设计器提供一个"Post Meta 模板/Designer"：一键生成文章元信息（发布日期 + 作者 + 分类 + 阅读时间），用于博客文章顶部/底部，支持配置显示哪些字段、分隔符、图标
+- **Trust Badges（信任徽章）**：用设计器提供一个"Trust Badges 模板/Designer"：一键生成信任徽章组（支付方式图标、安全认证、质量认证、行业资质等），用于页脚或产品页，支持配置徽章列表、尺寸、布局
+- **Countdown Timer（倒计时）**：用设计器提供一个"Countdown Timer 模板/Designer"：一键生成促销倒计时（天:时:分:秒），用于促销活动/限时优惠，支持配置结束时间、样式变体、结束后行为
+
+---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib",
-  "version": "0.0.119",
+  "version": "0.0.121",
   "type": "module",
   "exports": {
     ".": "./index.ts",
@@ -26,10 +26,10 @@
     "eslint": "^7.32.0",
     "gsap": "^3.12.7",
     "typescript": "^5",
-    "@rxdrag/rxcms-models": "0.3.96",
-    "@rxdrag/entify-hooks": "0.2.77",
     "@rxdrag/eslint-config-custom": "0.2.12",
     "@rxdrag/slate-preview": "1.2.63",
+    "@rxdrag/rxcms-models": "0.3.96",
+    "@rxdrag/entify-hooks": "0.2.77",
     "@rxdrag/tsconfig": "0.2.0"
   },
   "dependencies": {
@@ -37,8 +37,8 @@
     "clsx": "^2.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@rxdrag/rxcms-models": "0.3.96",
-    "@rxdrag/website-lib-core": "0.0.114"
+    "@rxdrag/website-lib-core": "0.0.115",
+    "@rxdrag/rxcms-models": "0.3.96"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"