@rxdrag/website-lib 0.0.136 → 0.0.137

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/components/PageContent.astro +17 -0
  2. package/components//344/270/273/351/242/230Token.md +137 -357
  3. package/components//345/216/237/345/255/220/345/206/273/347/273/223/346/270/205/345/215/225.md +10 -0
  4. package/package.json +4 -4
package/components/PageContent.astro ADDED
@@ -0,0 +1,17 @@
1
+ ---
2
+ import type { BackgroundConfig } from "@rxdrag/website-lib-core";
3
+ import BackgroundGroup from "./BackgroundGroup.astro";
4
+
5
+ interface Props {
6
+ class?: string;
7
+ className?: string;
8
+ backgrounds?: BackgroundConfig[];
9
+ }
10
+
11
+ const { className, class: className2, backgrounds, ...rest } = Astro.props;
12
+ ---
13
+
14
+ <main class:list={[className, className2]} {...rest}>
15
+ {backgrounds?.length ? <BackgroundGroup backgrounds={backgrounds} /> : null}
16
+ <slot />
17
+ </main>
package/components//344/270/273/351/242/230Token.md CHANGED
@@ -1,367 +1,23 @@
1
- # 外贸网站必备 Theme Token 设计系统 (ToB 简化版)
1
+ # 外贸网站 Theme Token（精简版）
2
2
 
3
- 基于 **TailwindCSS + ShadcnUI** 的 Token 体系，专为 **ToB 外贸询盘转化** 设计。
3
+ 基于 **TailwindCSS + ShadcnUI**，专为 **ToB 外贸询盘转化** 设计。
4
4
 
5
- ---
6
-
7
- ## 一、核心原则
8
-
9
- 1. **Trust First**（信任优先）：色调稳重，避免过于花哨，强调专业感。
10
- 2. **Readability**（阅读体验）：针对长文本（产品参数、About Us、Blog）优化排版。
11
- 3. **Inquiry Driven**（询盘导向）：所有视觉引导最终指向 "Contact Us" 或 "Get a Quote"。
12
-
13
- ---
14
-
15
- ## 二、Color Tokens（色彩系统）
16
-
17
- > 映射到 CSS Variables，支持 Dark Mode 自动适配
18
-
19
- ### 1. Brand（品牌色）
20
-
21
- | Token | Tailwind Class | 说明 | 典型值 |
22
- | :--------------------- | :---------------------------- | :------------------------------------------------ | :------------------------- |
23
- | **Primary** | `bg-primary` / `text-primary` | **主品牌色**，用于 CTA 按钮 (Inquiry)、导航高亮。 | Deep Blue / Industrial Red |
24
- | **Primary Foreground** | `text-primary-foreground` | Primary 背景上的文字颜色。 | White |
25
- | **Secondary** | `bg-secondary` | **辅助色**，用于次级按钮、标签背景。 | Light Blue / Silver |
26
- | **Accent** | `bg-accent` | **强调色**，用于 Hover 态、图标点缀。 | Gold / Orange |
27
-
28
- ### 2. Neutral / Surface（中性色与层级）
29
-
30
- | Token | Tailwind Class | 说明 |
31
- | :------------- | :---------------------- | :----------------------------------------------- |
32
- | **Background** | `bg-background` | 页面背景色（通常是纯白或极淡的灰）。 |
33
- | **Card** | `bg-card` | 卡片背景色（产品卡片、Form 容器）。 |
34
- | **Foreground** | `text-foreground` | 正文颜色（slate-900 / zinc-900）。 |
35
- | **Muted** | `text-muted-foreground` | 辅助文字（参数 Label、日期），通常是 slate-500。 |
36
- | **Border** | `border-border` | 通用边框颜色。 |
37
-
38
- ### 3. Semantic / Feedback（语义色）
39
-
40
- | Token | Tailwind Class | 说明 |
41
- | :-------------- | :---------------- | :--------------------------- |
42
- | **Destructive** | `bg-destructive` | **错误**，表单提交失败。 |
43
- | **Success** | `text-green-600` | **成功**，询盘发送成功反馈。 |
44
- | **Warning** | `text-yellow-600` | **提示**，表单填写注意项。 |
45
-
46
- ### 4. Data & Highlights（数据与高亮）
47
-
48
- ToB 站常见参数表格与卖点强调。
49
-
50
- | Token | Tailwind Class | 说明 |
51
- | :----------------- | :---------------- | :----------------------------------------- |
52
- | **Chart 1** | `bg-chart-1` | 主数据色（参数对比图）。 |
53
- | **Chart 2** | `bg-chart-2` | 对比数据色。 |
54
- | **Highlight** | `bg-highlight` | 文本高亮背景（马克笔效果），强调核心卖点。 |
55
- | **Highlight Text** | `text-highlight` | 高亮文字颜色，用于关键词强调。 |
56
- | **Highlight Soft** | `bg-highlight/20` | 柔和高亮背景，大面积使用。 |
57
-
58
- ### 5. CTA Button Tokens（询盘按钮 Token）
59
-
60
- 外贸站的核心转化入口，需要清晰的视觉层级。
61
-
62
- | Token | 说明 | 场景 |
63
- | :------------------ | :--------------------- | :----------------------------------------------- | ----------------- |
64
- | **btn-primary** | 实心主按钮，品牌色背景 | "Get a Quote"、"Contact Us"、"Inquiry Now" |
65
- | **btn-secondary** | 描边次按钮，透明背景 | "Learn More"、"View Details"、"Download Catalog" | "Get free sample" |
66
- | **btn-ghost** | 无边框幽灵按钮 | 导航链接、紧凑操作 |
67
- | **btn-destructive** | 危险操作按钮 | "Delete"、"Cancel Order" |
68
-
69
- #### btn-primary 样式定义
70
-
71
- | 属性 | Token / Value |
72
- | :------------------- | :---------------------------------------------- |
73
- | **Background** | `--btn-primary-bg: var(--primary)` |
74
- | **Background Hover** | `--btn-primary-bg-hover: var(--primary) / 0.9` |
75
- | **Text** | `--btn-primary-text: var(--primary-foreground)` |
76
- | **Border** | `--btn-primary-border: transparent` |
77
- | **Shadow** | `--btn-primary-shadow: var(--shadow-md)` |
78
- | **Shadow Hover** | `--btn-primary-shadow-hover: var(--shadow-lg)` |
79
- | **Ring Focus** | `--btn-primary-ring: var(--primary) / 0.5` |
80
-
81
- #### btn-secondary 样式定义
82
-
83
- | 属性 | Token / Value |
84
- | :------------------- | :-------------------------------------------------------- |
85
- | **Background** | `--btn-secondary-bg: transparent` |
86
- | **Background Hover** | `--btn-secondary-bg-hover: var(--secondary)` |
87
- | **Text** | `--btn-secondary-text: var(--foreground)` |
88
- | **Text Hover** | `--btn-secondary-text-hover: var(--secondary-foreground)` |
89
- | **Border** | `--btn-secondary-border: var(--border)` |
90
- | **Border Hover** | `--btn-secondary-border-hover: var(--secondary)` |
91
- | **Shadow Hover** | `--btn-secondary-shadow-hover: var(--shadow-sm)` |
92
- | **Ring Focus** | `--btn-secondary-ring: var(--secondary) / 0.5` |
93
-
94
- #### 按钮尺寸 Token
95
-
96
- | Token | Padding | Font Size | Min Width | 场景 |
97
- | :--------- | :------------------------------------------- | :---------- | :-------- | :------------------ |
98
- | **btn-sm** | `--btn-sm-px: 1rem` `--btn-sm-py: 0.5rem` | `text-sm` | 80px | 表格内、紧凑布局 |
99
- | **btn-md** | `--btn-md-px: 1.5rem` `--btn-md-py: 0.75rem` | `text-base` | 120px | **标准按钮** |
100
- | **btn-lg** | `--btn-lg-px: 2rem` `--btn-lg-py: 1rem` | `text-lg` | 160px | Hero 区域、大型 CTA |
101
-
102
- ### 6. Social Media (Trust Signals)
103
-
104
- 用于 Footer 或 Contact 区域的品牌图标，增强信任感。
105
-
106
- | Token | Value | 说明 |
107
- | :----------- | :-------- | :---------------- |
108
- | **WhatsApp** | `#25D366` | **即时沟通核心** |
109
- | **LinkedIn** | `#0A66C2` | **B2B 专业背书** |
110
- | **Facebook** | `#1877F2` | 社媒引流 |
111
- | **YouTube** | `#FF0000` | 工厂/产品视频展示 |
112
-
113
- ### 7. Component Tokens（组件级 Token）
114
-
115
- 定义常用组件的默认样式，保证全站一致性。组件可通过 props 覆盖。
116
-
117
- #### card-* (卡片)
118
-
119
- | Token | Value | 说明 |
120
- | :----------------- | :-------------------------- | :----------------- |
121
- | **--card-bg** | `var(--card)` | 卡片背景色 |
122
- | **--card-border** | `1px solid var(--border)` | 卡片边框 |
123
- | **--card-radius** | `var(--radius-md)` / 8px | 卡片圆角 |
124
- | **--card-shadow** | `var(--shadow-md)` | 卡片阴影 |
125
- | **--card-padding** | `1.5rem` | 卡片内边距 |
126
- | **--card-gap** | `1rem` | 卡片内元素间距 |
127
- | **--card-hover-shadow** | `var(--shadow-lg)` | Hover 态阴影 |
128
- | **--card-hover-translate** | `-2px` | Hover 态上移 |
129
-
130
- #### input-* (输入框)
131
-
132
- | Token | Value | 说明 |
133
- | :----------------------- | :---------------------------- | :----------------- |
134
- | **--input-bg** | `var(--background)` | 输入框背景 |
135
- | **--input-border** | `1px solid var(--border)` | 默认边框 |
136
- | **--input-border-focus** | `1px solid var(--primary)` | Focus 边框 |
137
- | **--input-radius** | `var(--radius-sm)` / 4px | 圆角 |
138
- | **--input-ring** | `var(--primary) / 0.2` | Focus 外发光 |
139
- | **--input-padding** | `0.75rem 1rem` | 内边距 |
140
- | **--input-height** | `2.5rem` / 40px | 标准高度 |
141
- | **--input-placeholder** | `var(--muted-foreground)` | Placeholder 颜色 |
142
-
143
- #### modal-* (弹窗)
144
-
145
- | Token | Value | 说明 |
146
- | :------------------ | :-------------------------- | :----------------- |
147
- | **--modal-bg** | `var(--background)` | 弹窗背景 |
148
- | **--modal-overlay** | `rgba(0, 0, 0, 0.5)` | 遮罩层 |
149
- | **--modal-radius** | `var(--radius-lg)` / 12px | 弹窗圆角 |
150
- | **--modal-shadow** | `var(--shadow-xl)` | 弹窗阴影 |
151
- | **--modal-padding** | `1.5rem` | 内边距 |
152
- | **--modal-width-sm** | `400px` | 小弹窗宽度 |
153
- | **--modal-width-md** | `560px` | 标准弹窗宽度 |
154
- | **--modal-width-lg** | `720px` | 大弹窗宽度 |
155
-
156
- #### badge-* (标签/徽章)
157
-
158
- | Token | Value | 说明 |
159
- | :----------------- | :-------------------------- | :----------------- |
160
- | **--badge-bg** | `var(--secondary)` | 标签背景 |
161
- | **--badge-text** | `var(--secondary-foreground)` | 标签文字 |
162
- | **--badge-radius** | `var(--radius-full)` / 9999px | 圆角（药丸形） |
163
- | **--badge-padding**| `0.25rem 0.75rem` | 内边距 |
164
- | **--badge-font** | `text-xs font-medium` | 字号字重 |
165
-
166
- #### table-* (表格)
167
-
168
- | Token | Value | 说明 |
169
- | :--------------------- | :-------------------------- | :----------------- |
170
- | **--table-header-bg** | `var(--muted)` | 表头背景 |
171
- | **--table-border** | `1px solid var(--border)` | 单元格边框 |
172
- | **--table-row-hover** | `var(--muted) / 0.5` | 行 Hover 背景 |
173
- | **--table-cell-padding** | `0.75rem 1rem` | 单元格内边距 |
174
- | **--table-radius** | `var(--radius-md)` | 表格容器圆角 |
175
-
176
- ---
177
-
178
- ## 三、Typography Tokens（排版系统）
179
-
180
- ### 1. Font Family
181
-
182
- | Token | 说明 | 推荐字体 |
183
- | :------------------ | :----------------------------------------------------------------- | :--------------------------------------------------------- |
184
- | **font-sans** | **正文/通用**。清晰易读，现代感。 | Inter, Roboto, Helvetica Neue |
185
- | **font-serif** | **标题/品牌**。用于 Hero 标题，营造传统、高端感（可选）。 | Playfair Display, Merriweather |
186
- | **font-decorative** | **高端花字**。用于品牌 Slogan、奢侈品/高端制造展示、大型装饰文字。 | Cinzel, Cormorant Garamond, Bodoni Moda, Libre Baskerville |
187
- | **font-mono** | **参数/代码**。用于产品型号、规格数据。 | JetBrains Mono, Roboto Mono |
188
-
189
- ### 2. Font Sizes (Type Scale)
190
-
191
- | Token | Size | Line Height | 场景 |
192
- | :------------ | :---- | :---------- | :-------------------------------------- |
193
- | **text-xs** | 12px | 16px | 辅助标签、版权信息 |
194
- | **text-sm** | 14px | 20px | 导航、次要文本、表格内容 |
195
- | **text-base** | 16px | 24px | **正文默认**（外贸站正文不宜小于 16px） |
196
- | **text-lg** | 18px | 28px | 摘要、大段落首句 |
197
- | **text-xl** | 20px | 28px | H4 / 卡片标题 |
198
- | **text-2xl** | 24px | 32px | H3 / 模块标题 |
199
- | **text-3xl** | 30px | 36px | H2 / 页面主标题 |
200
- | **text-4xl+** | 36px+ | 1.1 | H1 / Hero 标题 |
201
-
202
- ### 3. Font Weight
203
-
204
- | Token | Tailwind | 说明 |
205
- | :----------- | :-------------- | :------------------------ |
206
- | **Regular** | `font-normal` | 正文默认。 |
207
- | **Medium** | `font-medium` | 导航、按钮、表格表头。 |
208
- | **Semibold** | `font-semibold` | 标题、强调数字。 |
209
- | **Bold** | `font-bold` | 仅用于 H1/H2 或极强强调。 |
210
-
211
- ### 4. Semantic & Functional Typography (语义化排版)
212
-
213
- | Token Style | 推荐组合 | 场景 |
214
- | :--------------- | :----------------------------------------------------------- | :--------------------------------- |
215
- | **Lead** | `text-xl text-muted-foreground` | **导语**，文章或模块的副标题。 |
216
- | **Caption** | `text-xs text-muted-foreground` | **注脚**，图片说明、免责声明。 |
217
- | **Spec / Code** | `font-mono text-sm bg-muted px-1 rounded` | **参数值**，强调型号或技术指标。 |
218
- | **Quote** | `font-serif italic text-lg text-foreground/80` | **客户评价**，Testimonial 内容。 |
219
- | **Eyebrow** | `text-sm font-medium tracking-widest uppercase text-primary` | **眉题**，位于 H2 上方的分类标签。 |
220
- | **Form Label** | `text-sm font-medium leading-none` | **表单标签**，清晰易读。 |
221
- | **Input Hint** | `text-[0.8rem] text-muted-foreground` | **输入提示**，帮助用户填写表单。 |
222
- | **Alert Text** | `text-sm font-medium text-destructive` | **报错提示**，表单验证反馈。 |
223
- | **Success Text** | `text-sm font-medium text-green-600` | **成功提示**，提交成功反馈。 |
224
- | **Breadcrumb** | `text-sm text-muted-foreground hover:text-foreground` | **面包屑**，路径导航。 |
225
- | **Empty State** | `text-center text-muted-foreground` | **空状态**，无搜索结果提示。 |
226
-
227
- ---
228
-
229
- ## 四、Spacing & Layout Tokens（空间系统）
230
-
231
- ### 1. Container (Max Width)
232
-
233
- | Token | Width | 场景 |
234
- | :------------------- | :----- | :--------------------------- |
235
- | **max-w-screen-md** | 768px | 窄版落地页 (Squeeze Page) |
236
- | **max-w-screen-lg** | 1024px | 博客文章 / 条款页 |
237
- | **max-w-screen-xl** | 1280px | **标准页面容器** |
238
- | **max-w-screen-2xl** | 1536px | 宽版展示（图片墙、工厂全景） |
239
-
240
- ### 2. Spacing Scale
241
-
242
- | Token | Desktop | Mobile | 场景 |
243
- | :------------- | :------ | :----- | :---------------------------- |
244
- | **py-compact** | 48px | 32px | 紧凑模块（LogoCloud、Footer） |
245
- | **py-normal** | 80px | 48px | **标准模块间距** |
246
- | **py-relaxed** | 120px | 64px | Hero、大留白展示区 |
5
+ > ⚠️ **Tailwind 内置项不再重复**：font-size、font-weight、spacing、rounded、shadow、z-index、duration、ease 等直接使用 Tailwind 默认值。
247
6
 
248
7
  ---
249
8
 
250
- ## 五、Shape & Depth（形态与深度）
9
+ ## 一、需要自定义的 Tailwind 配置
251
10
 
252
- ### 1. Radius (圆角)
253
-
254
- 根据品牌调性灵活选择，严谨工业风可用小圆角，现代科技感可用大圆角。
255
-
256
- | Token | Value | 场景 |
257
- | :--------------- | :------ | :------------------------------ |
258
- | **rounded-none** | 0px | 严谨工业风、传统制造业。 |
259
- | **rounded-sm** | 2px-4px | 按钮、输入框、表格。 |
260
- | **rounded-md** | 6px-8px | 卡片容器、弹窗。 |
261
- | **rounded-lg** | 12px | 大卡片、Hero 图片、现代科技感。 |
262
- | **rounded-xl** | 16px | 特色模块、品牌展示区。 |
263
- | **rounded-full** | 9999px | 头像、标签 Badge、圆形按钮。 |
264
-
265
- ### 2. Border Width (边框)
266
-
267
- | Token | Value | 场景 |
268
- | :------------- | :---- | :---------------------------- |
269
- | **border** | 1px | 默认边框。 |
270
- | **border-l-4** | 4px | 左侧装饰线（引用、Callout）。 |
271
-
272
- ### 3. Z-Index (层级)
273
-
274
- | Token | Value | 场景 |
275
- | :------- | :---- | :---------------- |
276
- | **z-30** | 30 | Sticky Header。 |
277
- | **z-40** | 40 | Dropdown / Menu。 |
278
- | **z-50** | 50 | Modal / Drawer。 |
279
-
280
- ### 4. Shadow (阴影)
281
-
282
- | Token | 场景 |
283
- | :------------ | :-------------------------- |
284
- | **shadow-sm** | 轻微浮起，输入框 focus 态。 |
285
- | **shadow-md** | 卡片默认阴影。 |
286
- | **shadow-lg** | Hover 浮起效果、下拉菜单。 |
287
- | **shadow-xl** | Modal、重要弹窗。 |
288
-
289
- ---
290
-
291
- ## 六、Motion (动效系统)
292
-
293
- 适度动效可提升体验，ToB 站建议**简洁克制**，避免过度花哨。
294
-
295
- ### 1. Duration (时长)
296
-
297
- | Token | Value | 场景 |
298
- | :--------------- | :---- | :--------------------------- |
299
- | **duration-150** | 150ms | 微交互（Hover、Focus）。 |
300
- | **duration-300** | 300ms | **标准过渡**（按钮、卡片）。 |
301
- | **duration-500** | 500ms | 模块入场、页面转场。 |
302
- | **duration-700** | 700ms | 大型动画、Hero 区域。 |
303
-
304
- ### 2. Easing (缓动)
305
-
306
- | Token | Value | 场景 |
307
- | :-------------- | :---------------------------------- | :----------------------- |
308
- | **ease-out** | `cubic-bezier(0, 0, 0.2, 1)` | **推荐默认**，自然减速。 |
309
- | **ease-in-out** | `cubic-bezier(0.4, 0, 0.2, 1)` | 双向动画、循环动效。 |
310
- | **ease-spring** | `cubic-bezier(0.34, 1.56, 0.64, 1)` | 弹性效果、按钮点击反馈。 |
311
-
312
- ### 3. Animation Presets (常用动效)
313
-
314
- | Token | 效果 | 场景 |
315
- | :----------------- | :---------- | :--------------------------- |
316
- | **fade-in** | 淡入 | 模块入场、Toast 提示。 |
317
- | **fade-up** | 淡入 + 上移 | **标准入场**，卡片、列表。 |
318
- | **fade-down** | 淡入 + 下移 | 下拉菜单、Tooltip。 |
319
- | **scale-in** | 缩放淡入 | Modal、弹窗、图片预览。 |
320
- | **slide-in-right** | 右侧滑入 | Drawer、侧边栏。 |
321
- | **pulse** | 脉冲闪烁 | 加载状态、等待提示。 |
322
- | **bounce** | 弹跳 | CTA 按钮吸引注意力（慎用）。 |
323
-
324
- ### 4. Scroll Animation (滚动动效 - AOS)
325
-
326
- | Attribute | 效果 | 场景 |
327
- | :------------------------ | :--------- | :----------------------------- |
328
- | `data-aos="fade-up"` | 向上淡入 | **通用入场**。 |
329
- | `data-aos="fade-in"` | 原地淡入 | 图片、背景。 |
330
- | `data-aos="zoom-in"` | 缩放淡入 | 重点模块、Hero。 |
331
- | `data-aos-delay="100"` | 延迟 100ms | 列表交错动画。 |
332
- | `data-aos-duration="600"` | 时长 600ms | 自定义速度。 |
333
- | `data-aos-once="true"` | 只播放一次 | **推荐**，避免滚动时反复触发。 |
334
-
335
- ---
336
-
337
- ## 七、Iconography (图标)
338
-
339
- 使用 Lucide / Iconify。
340
-
341
- | Token | Size | 场景 |
342
- | :---------- | :---- | :------------------------- |
343
- | **size-4** | 16px | 按钮内图标、面包屑分隔符。 |
344
- | **size-5** | 20px | 导航菜单图标。 |
345
- | **size-6** | 24px | 模块标题图标。 |
346
- | **size-8+** | 32px+ | 特性 (Feature) 装饰图标。 |
347
-
348
- ---
349
-
350
- ## 七、Token 映射示例 (Tailwind Config)
11
+ 修改 `tailwind.config.js` 的 `theme.extend`：
351
12
 
352
13
  ```js
353
14
  // tailwind.config.js
354
15
  module.exports = {
355
16
  theme: {
356
- container: {
357
- center: true,
358
- padding: "2rem",
359
- screens: {
360
- "2xl": "1400px",
361
- },
362
- },
363
17
  extend: {
18
+ // ========== 颜色（CSS变量映射）==========
364
19
  colors: {
20
+ // ShadcnUI 基础色
365
21
  border: "hsl(var(--border))",
366
22
  input: "hsl(var(--input))",
367
23
  ring: "hsl(var(--ring))",
@@ -387,14 +43,18 @@ module.exports = {
387
43
  DEFAULT: "hsl(var(--destructive))",
388
44
  foreground: "hsl(var(--destructive-foreground))",
389
45
  },
390
- // 数据可视化 (简化版)
46
+ card: {
47
+ DEFAULT: "hsl(var(--card))",
48
+ foreground: "hsl(var(--card-foreground))",
49
+ },
50
+ // 数据可视化
391
51
  chart: {
392
52
  1: "hsl(var(--chart-1))",
393
53
  2: "hsl(var(--chart-2))",
394
54
  },
395
55
  // 营销高亮
396
56
  highlight: "hsl(var(--highlight))",
397
- // 社交品牌色
57
+ // 社交品牌色（固定值）
398
58
  social: {
399
59
  whatsapp: "#25D366",
400
60
  linkedin: "#0A66C2",
@@ -402,17 +62,137 @@ module.exports = {
402
62
  youtube: "#FF0000",
403
63
  },
404
64
  },
65
+ // ========== 圆角（基于 --radius 变量）==========
405
66
  borderRadius: {
406
67
  lg: "var(--radius)",
407
68
  md: "calc(var(--radius) - 2px)",
408
69
  sm: "calc(var(--radius) - 4px)",
409
70
  },
410
- transitionDuration: {
411
- fast: "150ms",
412
- normal: "300ms",
413
- slow: "500ms",
71
+ // ========== 自定义字体（可选）==========
72
+ fontFamily: {
73
+ decorative: ["Cinzel", "Cormorant Garamond", "serif"],
74
+ },
75
+ // ========== 模块间距（响应式）==========
76
+ spacing: {
77
+ "section-compact": "3rem", // 48px - 紧凑模块
78
+ "section-normal": "5rem", // 80px - 标准模块
79
+ "section-relaxed": "7.5rem", // 120px - Hero区域
80
+ },
81
+ // ========== 自定义动画 ==========
82
+ keyframes: {
83
+ "fade-up": {
84
+ "0%": { opacity: "0", transform: "translateY(20px)" },
85
+ "100%": { opacity: "1", transform: "translateY(0)" },
86
+ },
87
+ "fade-down": {
88
+ "0%": { opacity: "0", transform: "translateY(-20px)" },
89
+ "100%": { opacity: "1", transform: "translateY(0)" },
90
+ },
91
+ "scale-in": {
92
+ "0%": { opacity: "0", transform: "scale(0.95)" },
93
+ "100%": { opacity: "1", transform: "scale(1)" },
94
+ },
95
+ "slide-in-right": {
96
+ "0%": { transform: "translateX(100%)" },
97
+ "100%": { transform: "translateX(0)" },
98
+ },
99
+ },
100
+ animation: {
101
+ "fade-up": "fade-up 0.5s ease-out",
102
+ "fade-down": "fade-down 0.3s ease-out",
103
+ "scale-in": "scale-in 0.3s ease-out",
104
+ "slide-in-right": "slide-in-right 0.3s ease-out",
414
105
  },
415
106
  },
416
107
  },
417
108
  };
418
109
  ```
110
+
111
+ ---
112
+
113
+ ## 二、CSS 变量定义
114
+
115
+ 在 `globals.css` 中定义（ShadcnUI 格式）：
116
+
117
+ ```css
118
+ @layer base {
119
+ :root {
120
+ --background: 0 0% 100%;
121
+ --foreground: 0 0% 20%;
122
+ --card: 0 0% 98%;
123
+ --card-foreground: 0 0% 20%;
124
+ --primary: 217 58% 43%; /* 工业蓝 #2E5AAC */
125
+ --primary-foreground: 0 0% 100%;
126
+ --secondary: 0 0% 96%;
127
+ --secondary-foreground: 0 0% 20%;
128
+ --muted: 0 0% 96%;
129
+ --muted-foreground: 0 0% 45%;
130
+ --accent: 30 90% 50%; /* 强调橙 */
131
+ --accent-foreground: 0 0% 100%;
132
+ --destructive: 0 84% 60%;
133
+ --destructive-foreground: 0 0% 100%;
134
+ --border: 0 0% 90%;
135
+ --input: 0 0% 90%;
136
+ --ring: 217 58% 43%;
137
+ --radius: 0.5rem;
138
+ --chart-1: 217 58% 43%;
139
+ --chart-2: 30 90% 50%;
140
+ --highlight: 48 96% 53%; /* 高亮黄 */
141
+ }
142
+ .dark {
143
+ --background: 0 0% 10%;
144
+ --foreground: 0 0% 90%;
145
+ /* ... 暗色模式对应值 */
146
+ }
147
+ }
148
+ ```
149
+
150
+ ---
151
+
152
+ ## 三、语义化排版组合
153
+
154
+ 直接使用 Tailwind class 组合：
155
+
156
+ | 用途 | Class 组合 |
157
+ |:-----|:-----------|
158
+ | **Lead 导语** | `text-xl text-muted-foreground` |
159
+ | **Caption 注脚** | `text-xs text-muted-foreground` |
160
+ | **Spec 参数** | `font-mono text-sm bg-muted px-1 rounded` |
161
+ | **Quote 引用** | `font-serif italic text-lg text-foreground/80` |
162
+ | **Eyebrow 眉题** | `text-sm font-medium tracking-widest uppercase text-primary` |
163
+ | **Form Label** | `text-sm font-medium leading-none` |
164
+ | **Error Text** | `text-sm font-medium text-destructive` |
165
+ | **Success Text** | `text-sm font-medium text-green-600` |
166
+
167
+ ---
168
+
169
+ ## 四、外贸站特有 Token
170
+
171
+ ### CTA 按钮层级
172
+
173
+ | 类型 | 场景 |
174
+ |:-----|:-----|
175
+ | **Primary** | "Get a Quote"、"Contact Us"、"Inquiry Now" |
176
+ | **Secondary** | "Learn More"、"View Details"、"Download Catalog" |
177
+ | **Ghost** | 导航链接、紧凑操作 |
178
+
179
+ ### 社交品牌色
180
+
181
+ | 平台 | 色值 | 用途 |
182
+ |:-----|:-----|:-----|
183
+ | WhatsApp | `#25D366` | 即时沟通核心 |
184
+ | LinkedIn | `#0A66C2` | B2B 专业背书 |
185
+ | Facebook | `#1877F2` | 社媒引流 |
186
+ | YouTube | `#FF0000` | 工厂/产品视频 |
187
+
188
+ ---
189
+
190
+ ## 五、AOS 滚动动效
191
+
192
+ | Attribute | 效果 |
193
+ |:----------|:-----|
194
+ | `data-aos="fade-up"` | 向上淡入（通用入场） |
195
+ | `data-aos="fade-in"` | 原地淡入 |
196
+ | `data-aos="zoom-in"` | 缩放淡入 |
197
+ | `data-aos-delay="100"` | 延迟（交错动画） |
198
+ | `data-aos-once="true"` | 只播放一次（推荐）|
package/components//345/216/237/345/255/220/345/206/273/347/273/223/346/270/205/345/215/225.md CHANGED
@@ -46,6 +46,16 @@ interface ContainerProps {
46
46
  ```
47
47
  *原因：限宽核心*
48
48
 
49
+ **PageContent** ✅
50
+ ```ts
51
+ interface PageContentProps {
52
+ class?: string
53
+ className?: string
54
+ backgrounds?: BackgroundConfig[]
55
+ }
56
+ ```
57
+ *原因：页面主内容区域，对应 `<main>` 标签，与 Header/Footer 平级，设计模式需独立渲染*
58
+
49
59
  ### 🧱 2. Layout (布局) - 高优先冻结
50
60
 
51
61
  **Grid** ✅
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rxdrag/website-lib",
3
- "version": "0.0.136",
3
+ "version": "0.0.137",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": "./index.ts",
@@ -28,7 +28,7 @@
28
28
  "typescript": "^5",
29
29
  "@rxdrag/eslint-config-custom": "0.2.13",
30
30
  "@rxdrag/entify-hooks": "0.2.79",
31
- "@rxdrag/rxcms-models": "0.3.105",
31
+ "@rxdrag/rxcms-models": "0.3.106",
32
32
  "@rxdrag/tsconfig": "0.2.1",
33
33
  "@rxdrag/tiptap-preview": "0.0.3"
34
34
  },
@@ -38,8 +38,8 @@
38
38
  "react": "^19.1.0",
39
39
  "react-dom": "^19.1.0",
40
40
  "vanilla-cookieconsent": "3.1.0",
41
- "@rxdrag/website-lib-core": "0.0.124",
42
- "@rxdrag/rxcms-models": "0.3.105"
41
+ "@rxdrag/rxcms-models": "0.3.106",
42
+ "@rxdrag/website-lib-core": "0.0.124"
43
43
  },
44
44
  "peerDependencies": {
45
45
  "astro": "^5.16.6"