@rxdrag/website-lib 0.0.120 → 0.0.122

package/components//347/211/251/346/226/231/345/244/207/345/277/230.md

@@ -1,353 +0,0 @@
-# 原子化物料清单
-
-共 25 个原子，按冻结层级分类
-
----
-
-## 一、🧊 完全冻结（Frozen）
-
-> 语义和接口永不改变，AI 只能操作内容，不能改结构
-
-### 1. 结构原子
-
-**Section**
-```ts
-interface SectionProps {
-  id: string
-  tone?: "light" | "dark" | "brand"
-  density?: "compact" | "normal" | "relaxed"
-  maxWidth?: "sm" | "md" | "lg" | "xl" | "full"
-}
-```
-- tone：控制背景、基础文字色
-- density：上下 padding（mobile 自动降级一档）
-- maxWidth：内容最大宽度（mobile 自动 full）
-
-**Container**
-```ts
-interface ContainerProps {
-  size?: "sm" | "md" | "lg" | "xl"
-  align?: "left" | "center"
-}
-```
-
-### 2. 布局原子
-
-**Grid**
-```ts
-interface GridProps {
-  cols?: number | { base: number; md?: number; lg?: number }
-  gap?: "xs" | "sm" | "md" | "lg" | "xl"
-  align?: "start" | "center" | "end"
-}
-```
-
-**Stack**
-```ts
-interface StackProps {
-  direction?: "vertical" | "horizontal"
-  gap?: "xs" | "sm" | "md" | "lg"
-  align?: "start" | "center" | "end"
-}
-```
-- mobile 强制 vertical
-
-**Split**
-```ts
-interface SplitProps {
-  ratio?: "1:1" | "2:1" | "3:2"
-  reverse?: boolean
-}
-```
-- mobile 自动 stack
-
-### 3. 内容原子
-
-**Heading**
-```ts
-interface HeadingProps {
-  level?: 1 | 2 | 3 | 4
-  emphasis?: "strong" | "normal" | "soft"
-}
-```
-- 自动响应式字号缩放
-- H1 mobile 自动降级
-
-**Text**
-```ts
-interface TextProps {
-  size?: "sm" | "md" | "lg"
-  tone?: "muted" | "normal"
-}
-```
-
-**Media**
-```ts
-interface MediaProps {
-  type?: "image" | "video"
-  src: string
-  ratio?: "1:1" | "4:3" | "16:9"
-}
-```
-- 自动 lazy + responsive image
-
-**Link**
-```ts
-interface LinkProps {
-  href: string
-  external?: boolean  // 自动加 target="_blank" rel="noopener"
-  variant?: "default" | "muted" | "nav"
-}
-```
-
-### 4. 行为原子
-
-**Button / CTA**
-```ts
-interface ButtonProps {
-  variant?: "primary" | "secondary" | "ghost"
-  size?: "sm" | "md" | "lg"
-}
-```
-
-### 5. 语义原子（SEO 核心）
-
-**Feature**（卖点）
-```ts
-interface FeatureProps {
-  icon?: string
-  title: string
-  description: string
-  emphasis?: "normal" | "strong"
-}
-```
-
-**SpecList**（参数列表）
-```ts
-interface SpecListProps {
-  items: { label: string; value: string }[]
-  layout?: "grid" | "list"
-}
-```
-
-**Table**（多列对比表）
-```ts
-interface TableProps {
-  columns: { key: string; label: string }[]
-  rows: Record<string, string>[]
-  striped?: boolean
-  compact?: boolean
-}
-```
-
-**FAQ**
-```ts
-interface FAQProps {
-  items: { question: string; answer: string }[]
-  defaultOpen?: number
-}
-```
-- SEO Schema：FAQPage
-
-**Breadcrumb**
-```ts
-interface BreadcrumbProps {
-  items: { label: string; href?: string }[]
-}
-```
-- SEO Schema：BreadcrumbList
-
-### 6. 表单原子（询盘核心）
-
-**Input**
-```ts
-interface InputProps {
-  type?: "text" | "email" | "tel" | "number"
-  label?: string
-  placeholder?: string
-  required?: boolean
-  error?: string
-}
-```
-
-**Textarea**
-```ts
-interface TextareaProps {
-  label?: string
-  placeholder?: string
-  rows?: number
-  required?: boolean
-}
-```
-
-**Select**
-```ts
-interface SelectProps {
-  options: { value: string; label: string }[]
-  label?: string
-  placeholder?: string
-  required?: boolean
-}
-```
-
----
-
-## 二、🧊❄️ 半冻结（Semi-Frozen）
-
-> 规则冻结，形态可扩展（可加 variant，但不改核心接口）
-
-**Box**
-```ts
-interface BoxProps {
-  padding?: "none" | "sm" | "md" | "lg"
-  background?: "none" | "muted" | "card"
-  border?: boolean
-  radius?: "none" | "sm" | "md" | "lg"
-}
-```
-- 场景：Feature 卡片、Pricing 卡片、侧边栏模块
-
-**Prose**
-```ts
-interface ProseProps {
-  size?: "sm" | "md" | "lg"
-}
-```
-- 自动处理段落/标题间距、列表/引用样式
-- 对应 Tailwind `prose` 类
-- 场景：产品详情、博客正文、About 页面
-
-**Spacer**
-```ts
-interface SpacerProps {
-  size?: "xs" | "sm" | "md" | "lg"
-}
-```
-
-**Align**
-```ts
-interface AlignProps {
-  x?: "left" | "center" | "right"
-  y?: "top" | "center" | "bottom"
-}
-```
-
-**Badge**
-```ts
-interface BadgeProps {
-  tone?: "info" | "success" | "warning"
-}
-```
-
-**Icon**
-```ts
-interface IconProps {
-  name: string  // iconify 格式，如 "mdi:check"
-  size?: "sm" | "md" | "lg" | "xl"
-  color?: "current" | "muted" | "brand"
-}
-```
-
-**Divider**
-```ts
-interface DividerProps {
-  orientation?: "horizontal" | "vertical"
-  spacing?: "sm" | "md" | "lg"
-}
-```
-
-**LogoCloud**
-```ts
-interface LogoCloudProps {
-  logos: string[]
-  columns?: Responsive<number>
-  tone?: "mono" | "color"
-}
-```
-
-**Testimonial**
-```ts
-interface TestimonialProps {
-  quote: string
-  author: string
-  role?: string
-  avatar?: string
-}
-```
-
-**Rating**
-```ts
-interface RatingProps {
-  value: number  // 0-5
-  max?: number
-  size?: "sm" | "md" | "lg"
-  showValue?: boolean
-}
-```
-
-**PriceTag**
-```ts
-interface PriceTagProps {
-  amount: number
-  currency?: "USD" | "EUR" | "CNY"
-  original?: number  // 原价（用于折扣展示）
-  size?: "sm" | "md" | "lg"
-}
-```
-
----
-
-## 三、🔥 不冻结（Unfrozen）
-
-> 设计趋势变化快，形态多变，AI 需在受控范围操作
-
-**Repeat**
-```ts
-interface RepeatProps<T> {
-  items: T[]
-  columns?: number | Responsive<number>
-  render: (item: T) => AstroNode
-}
-```
-- 工具组件，render 函数形态不稳定
-- 用于批量生成 Features / Logos / Testimonials
-
-**Pagination**
-```ts
-interface PaginationProps {
-  current: number
-  total: number
-  pageSize?: number
-  onChange?: (page: number) => void
-}
-```
-- 交互模式可能变化（无限滚动 vs 分页）
-
-**Countdown**
-```ts
-interface CountdownProps {
-  endTime: Date | string
-  format?: "d:h:m:s" | "h:m:s"
-  onEnd?: () => void
-}
-```
-- 促销场景，样式/动效多变
-
-**Animation**（装饰层）
-- 直接用 `data-aos-*` 属性
-- 详见《原子冻结清单》
-
-**Carousel / Tabs / Modal**
-- 形态多变，易滥用
-- 不纳入冻结层
-
----
-
-## 四、判断公式
-
-新原子是否该加？满足 ≥2 条才值得：
-
-- 在 3 个以上站点重复出现？
-- AI 是否能明确理解它的语义？
-- 是否能明显减少模板复杂度？
-- 是否对转化 / SEO 有直接价值？