卡片组件

📋 更新历史

日期	版本	更新内容
2025-11-06	v1.1.0	新增 Minimalist 简约系列卡片
2025-08-15	v1.0.0	初始版本

卡片是 PSUIP 中的特殊容器组件，提供了预定义的布局模板和样式。卡片分为通用卡片和特定卡片两大类型，支持不同的内容组织方式和视觉呈现效果。

卡片分类

通用卡片

支持所有 PSUIP 语义组件
提供基础的容器样式
灵活的内容布局

特定卡片

预定义的内容插槽 (slot)
特定的视觉设计风格
限定支持的语义组件类型

通用卡片

通用卡片内部可以包含任何 PSUIP 语义组件，提供了三种基础样式变体。

1. 标准卡片

语法：<card></card>

特性：

基础的卡片容器
适中的内边距
轻微的阴影效果

示例：


<card>
### 产品特性
我们的产品具有强大的功能和优异的性能，满足各种业务需求
 
- ✅ 模块化设计，灵活配置 
- ✅ 实时数据处理能力
- ✅ 智能化推荐算法
- ✅ 多端同步支持
 
[查看功能详情](https://example.com/features)
</card>

2. 悬浮卡片 (Elevated)

语法：<card:elevated></card:elevated>

特性：

明显的阴影效果
悬浮感的视觉设计
适合重要内容展示

示例：


<card:elevated>
### 重要公告
系统将在明天凌晨进行维护升级，预计耗时 2 小时。
 
**维护时间**：2025-03-15 02:00 - 04:00
 
**影响范围**：
- 网站访问暂时中断
- 数据同步功能暂停
- 移动端 App 离线模式
 
[了解详情](https://example.com/maintenance)
</card:elevated>

3. 轮廓卡片 (Outlined)

语法：<card:outlined></card:outlined>

特性：

边框样式设计
轻量级视觉效果
适合列表展示

示例：


<card:outlined>
### 联系方式
**地址**：北京市朝阳区科技园区
 
**电话**：+86 400-123-4567
 
**邮箱**：contact@example.com
 
**工作时间**：周一至周五 9:00-18:00
 
[在线客服](https://example.com/support)
</card:outlined>

特定卡片

特定卡片具有预定义的内容插槽，只支持特定的 PSUIP 语义组件，并通过 markdownMapping 规则将内容映射到对应的插槽中。

Elegant 系列

1. elegantStandard

设计风格：优雅青蓝渐变，商务专业感

语法：<card:elegantStandard></card:elegantStandard>

支持的组件映射：


markdownMapping: {
    h2: 'title',                    // 卡片标题
    h3: 'content.title',           // 内容区标题
    p: 'content.segment',          // 文本段落
    'button:primary': 'content.buttonContainer.button',         // 主要按钮
    'button:secondary': 'content.buttonContainer.secondaryButton', // 次要按钮
    img: 'content.image',          // 图片
    table: 'content.table',        // 表格
    blockquote: 'content.quote',   // 引用
    code: 'content.codeBlock'      // 代码块
}

示例：


<card:elegantStandard>
## 标准布局卡片
### 设计理念
优雅青蓝标准布局采用渐变背景和装饰性元素，营造出高端、专业的视觉效果。适用于重要内容展示、产品介绍等场景。
 
**主要特色：**
- 渐变背景：多层次青蓝色渐变
- 装饰元素：对称的装饰线条和圆点
- 响应式设计：适配各种屏幕尺寸
- 层次清晰：标题和内容区域明确分离
 
![优雅设计](https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg?w=400&h=200)
 
这种设计风格特别适合商务场景、品牌展示和高端产品介绍。
 
[了解更多](https://example.com/elegant)
[secondary][了解更多](https://example.com/elegant)
</card:elegantStandard>

2. elegantList

设计风格：优雅列表布局，突出条目展示

语法：<card:elegantList></card:elegantList>

支持的组件映射：


markdownMapping: {
    h2: 'title',                   // 卡片标题
    h3: 'listContainer.listTitle', // 列表标题
    'li:*': 'listContainer.list.item*', // 列表项（支持多个）
    ul: 'listContainer.list',      // 列表容器
    p: 'summary.text'              // 总结文本
}

示例：


<card:elegantList>
## 公司简介
### 核心优势
- ✅ 我们是一家专注于人工智能和大数据领域的创新科技公司
- ✅ 我们拥有一支充满活力和创新精神的技术团队
- ✅ 我们提供行业领先的数字化解决方案
- ✅ 我们致力于为客户创造最大价值
 
致力于提供最先进的数字化解决方案。
</card:elegantList>

3. elegantTable

设计风格：优雅表格布局，数据展示专用

语法：<card:elegantTable></card:elegantTable>

支持的组件映射：


markdownMapping: {
    h2: 'title',                      // 卡片标题
    h3: 'tableContainer.tableTitle',  // 表格标题
    table: 'tableContainer.dataTable', // 数据表格
    p: 'notes.text'                   // 备注说明
}

示例：


<card:elegantTable>
## 表格布局卡片
### 数据展示
 
| 功能模块 | 完成度 | 优先级 |
|---------|--------|--------|
| 卡片系统 | 100% | 高 |
| 布局引擎 | 95% | 高 |
| 主题配置 | 88% | 中 |
| 动画效果 | 75% | 中 |
| 响应式设计 | 92% | 高 |
 
这种布局特别适合数据报告、功能对比、进度跟踪等需要表格化展示的内容。
</card:elegantTable>

TechGradient 系列

1. techGradientStandard

设计风格：科技感渐变，现代技术产品风格

语法：<card:techGradientStandard></card:techGradientStandard>

支持的组件映射：


markdownMapping: {
    h2: 'title',                    // 卡片标题
    h3: 'content.title',           // 内容区标题
    p: 'content.segment',          // 文本段落
    'button:primary': 'content.buttonContainer.button',         // 主要按钮
    'button:secondary': 'content.buttonContainer.secondaryButton', // 次要按钮
    img: 'content.image',          // 图片
    table: 'content.table',        // 表格
    blockquote: 'content.quote',   // 引用
    code: 'content.codeBlock'      // 代码块
}

示例：


<card:techGradientStandard>
## 科技渐变标准
### 技术创新平台
科技渐变标准布局专为现代技术产品和创新平台设计，融合了未来感的渐变色彩与简洁的信息架构。
 
**核心特性：**
- 动态渐变：多层次科技色彩过渡
- 玻璃拟态：现代UI设计趋势
- 高性能：优化的渲染和交互
- 未来感：前沿的视觉设计语言
 
![科技产品](https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=600&h=200)
 
### 应用场景
- 科技产品展示
- 创新项目介绍  
- 数字化解决方案
- 前沿技术说明
 
> "技术的发展永不停歇，我们的创新也永不止步。"
 
[开始体验](https://example.com/demo)
[secondary][技术文档](https://docs.example.com)
</card:techGradientStandard>

2. techGradientHeaderActions

设计风格：科技感头部操作布局

语法：<card:techGradientHeaderActions></card:techGradientHeaderActions>

支持的组件映射：


markdownMapping: {
    h2: 'header.title',                        // 头部标题
    'button:primary': 'header.actions.primaryAction',     // 主要操作按钮
    'button:secondary': 'header.actions.secondaryAction', // 次要操作按钮
    h3: 'content.title',                       // 内容标题
    p: 'content.segment',                      // 内容段落
    img: 'content.image'                       // 内容图片
}

示例：


<card:techGradientHeaderActions>
## AI智能平台
[立即试用](https://example.com/try)
[secondary][了解更多](https://example.com/learn)
 
### 人工智能解决方案
我们的AI智能平台集成了最新的机器学习算法和深度学习技术，为企业提供智能化的数据分析和决策支持。
 
**平台优势：**
- 智能算法：先进的AI模型和算法
- 数据洞察：深度数据分析和可视化
- 自动化：智能流程自动化
- 安全可靠：企业级安全保障
 
![AI技术](https://images.unsplash.com/photo-1677442136019-21780ecad995?w=600&h=200)
 
平台采用云原生架构，支持弹性扩展和高可用部署，满足不同规模企业的需求。
</card:techGradientHeaderActions>

Header 系列

1. headerCard

设计风格：简洁头部布局，图表数据展示

语法：<card:headerCard></card:headerCard>

支持的组件映射：


markdownMapping: {
    h2: 'title',                       // 标题
    p: 'text',                         // 描述文本
    'chart:*': 'chartContainer.chart*' // 图表（支持所有图表类型）
}

示例：


<card:headerCard>
## 三、头部品牌分析
联想、苹果和荣耀作为 AI-PC 市场的头部品牌，各自凭借独特的产品功能和市场策略在竞争中占据一席之地。以下是联想、苹果和荣耀的销售份额占比。
 
[chart:barh]
| 品牌 | 市场份额 |
|------|----------|
| 联想 | 35% |
| 苹果 | 28% |
| 荣耀 | 18% |
 
[chart:pie]
| 类型 | 占比 |
|------|------|
| 游戏本 | 40% |
| 轻薄本 | 35% |
| 工作站 | 25% |
</card:headerCard>

2. headerPrecentCard

设计风格：百分比数据展示卡片

语法：<card:headerPrecentCard></card:headerPrecentCard>

支持的组件映射：


// 组合映射规则
'h3+h4+p:group': 'percentItems.percentItem*'
 
// 在 percentItem 内部的映射
markdownMapping: {
    h3: 'itemTitle',        // 项目标题
    h4: 'percentValue',     // 百分比数值
    p: 'itemDescription'    // 项目描述
}

基础示例：


<card:headerPrecentCard>
## 二、市场概述
AI-PC 概念自 2023 年由英特尔提出后，迅速引发行业关注
 
### 中国市场
#### 15%
AI-PC 出货量
 
### 全球市场  
#### 25%
AI-PC 渗透率
 
### 未来预测
#### 40%
预计增长率
</card:headerPrecentCard>

Minimalist 系列 v1.1.0 新增

Minimalist 系列卡片采用极简设计风格，去除多余装饰，强调内容本身，适合现代化、专业化的界面设计。

1. minimalistBorderLessCard

设计风格：无边框极简卡片，纯粹的内容展示

语法：<card:minimalistBorderLessCard></card:minimalistBorderLessCard>

支持的组件映射：


markdownMapping: {
    h2: 'title',        // 主标题
    h3: 'pageTitle',    // 页面标题
    p: 'content'        // 内容段落
}

示例：


<card:minimalistBorderLessCard>
## 产品介绍
### 核心特性
我们的产品采用创新的设计理念，为用户提供极致的使用体验。通过简洁的界面和强大的功能，满足各类业务需求。
</card:minimalistBorderLessCard>

特点：

无边框、无背景色
大字号标题设计
强调内容可读性
适合长文本展示

2. minimalistListCard

设计风格：极简列表卡片，清晰的条目展示

语法：<card:minimalistListCard></card:minimalistListCard>

支持的组件映射：


markdownMapping: {
    h2: 'title',                   // 卡片标题
    p: 'content',                  // 说明文本
    'h3+h4:group': 'listItems.listItem*'  // 列表项组合
}
 
// 在 listItem 内部：
markdownMapping: {
    h3: 'itemTitle',       // 项目标题
    h4: 'itemDescription'  // 项目描述
}

示例：


<card:minimalistListCard>
## 功能特性
 
提供全方位的解决方案
 
### 智能分析
#### 500+
分析模型数量
 
### 实时处理
#### 99.9%
系统可用性
 
### 安全保障
#### A级
安全认证等级
 
### 技术支持
#### 24/7
全天候服务
</card:minimalistListCard>

特点：

网格化列表布局
标题和描述的清晰层次
适合展示多个并列项目
自动适配列数（2列布局）

3. minimalistImageCard

设计风格：极简图文卡片，图片与文字的完美结合

语法：<card:minimalistImageCard></card:minimalistImageCard>

支持的组件映射：


markdownMapping: {
    h2: 'title',                      // 主标题
    h3: 'pageTitle',                  // 副标题
    'img+h4+p:group': 'imageItems.imageItem*'  // 图文项组合
}
 
// 在 imageItem 内部：
markdownMapping: {
    img: 'image',          // 图片
    h4: 'itemTitle',       // 项目标题
    p: 'itemDescription'   // 项目描述
}

示例：


<card:minimalistImageCard>
## 案例展示
### 成功案例
 
![项目A](https://images.unsplash.com/photo-1551434678-e076c223a692?w=600&h=300)
#### 企业数字化转型
帮助传统企业实现数字化转型，提升运营效率50%
 
![项目B](https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=600&h=300)
#### 智能制造平台
打造全流程智能制造解决方案，降低成本30%
</card:minimalistImageCard>

特点：

图片优先展示
2列网格布局
图片上方展示，文字下方说明
适合产品展示、案例展示

4. minimalistButtonCard

设计风格：极简按钮卡片，强调操作引导

语法：<card:minimalistButtonCard></card:minimalistButtonCard>

支持的组件映射：


markdownMapping: {
    h2: 'title',                    // 标题
    p: 'content',                   // 内容描述
    'button:primary': 'buttonContainer.button',           // 主按钮
    'button:secondary': 'buttonContainer.secondaryButton' // 次按钮
}

示例：


<card:minimalistButtonCard>
## 开始使用
 
我们提供简单易用的接入方式，让您快速开始使用我们的服务。完整的文档和示例代码可以帮助您在几分钟内完成集成。
 
[立即开始](https://example.com/start)
[secondary][查看文档](https://example.com/docs)
</card:minimalistButtonCard>

特点：

突出行动号召（CTA）
清晰的操作引导
支持主次按钮组合
顶部边框分隔设计

5. minimalistChartCard

设计风格：极简图表卡片，数据可视化专用

语法：<card:minimalistChartCard></card:minimalistChartCard>

支持的组件映射：


markdownMapping: {
    h2: 'headerContainer.headerTitle',    // 大标题（左侧）
    h3: 'headerContainer.right.pageTitle', // 页面标题（右侧）
    p: 'headerContainer.right.description', // 描述文本（右侧）
    'chart:*': 'chartContainer.chart*'     // 图表组件
}

示例：


<card:minimalistChartCard>
## Q4
### 季度业绩报告
本季度各项指标均达成预期目标，销售额同比增长25%，客户满意度提升至98%
 
[chart:bar]
| 指标 | 完成率 |
|------|--------|
| 销售额 | 125% |
| 客户数 | 110% |
| 利润率 | 108% |
 
[chart:pie]
| 渠道 | 占比 |
|------|------|
| 线上 | 60 |
| 线下 | 40 |
</card:minimalistChartCard>

特点：

左右分栏布局
左侧大字号标题
右侧详细说明
支持多个图表并列展示
适合仪表板和报表场景

6. minimalistHeaderCard

设计风格：极简头部卡片，带标签的标题展示

语法：<card:minimalistHeaderCard></card:minimalistHeaderCard>

支持的组件映射：


markdownMapping: {
    h2: 'title',   // 标题
    h3: 'label'    // 标签
}

示例：


<card:minimalistHeaderCard>
## 数据概览
### 实时更新
</card:minimalistHeaderCard>

特点：

固定宽度容器（360px）
标题与标签并排展示
白色背景，顶部圆角
适合作为内容区域的头部
标签支持自定义颜色

Minimalist 系列使用场景

专业报告：简洁专业的数据报告展示
产品介绍：现代化的产品特性说明
仪表板：清晰的数据可视化面板
案例展示：图文并茂的项目展示
引导页面：简洁的操作引导界面

Minimalist 系列设计原则

去繁就简：移除多余的装饰元素
内容优先：突出内容本身的价值
层次清晰：通过字号和间距建立层次
留白充足：给内容足够的呼吸空间
品牌统一：使用设计令牌保持一致性

组合使用示例


<layout:column>
 
<card:minimalistHeaderCard>
## 月度报告
### 2025年3月
</card:minimalistHeaderCard>
 
<card:minimalistChartCard>
## 03
### 销售业绩分析
本月销售额突破新高，各项指标持续向好
 
[chart:bar|部门业绩]
| 部门 | 销售额 |
|------|--------|
| 华东 | 1200 |
| 华南 | 980 |
| 华北 | 1100 |
</card:minimalistChartCard>
 
<card:minimalistListCard>
## 关键指标
 
核心业务指标达成情况
 
### 销售额
#### 1200万
同比增长25%
 
### 新客户
#### 350+
环比增长15%
 
### 满意度
#### 98%
创历史新高
 
### 复购率
#### 75%
稳步提升
</card:minimalistListCard>
 
<card:minimalistButtonCard>
## 下载完整报告
 
获取包含详细数据和深度分析的完整报告文档
 
[下载PDF报告](https://example.com/report.pdf)
[secondary][在线查看](https://example.com/report)
</card:minimalistButtonCard>
 
</layout:column>

设计令牌定制

特定卡片支持通过设计令牌 (Design Token) 定制特定插槽的样式。

语法规范


<插槽名称 属性名={设计令牌}>内容</插槽名称>

示例：自定义颜色


<card:headerPrecentCard>
## 二、市场概述
AI-PC 概念自 2023 年由英特尔提出后，迅速引发行业关注
 
### 中国市场
<percentValue color={color.success.green6}>#### 15%</percentValue>
AI-PC 出货量
 
### 全球市场  
<percentValue color={color.warning.orange6}>#### 25%</percentValue>
AI-PC 渗透率
 
### 未来预测
<percentValue color={color.error.red6}>#### 40%</percentValue>
预计增长率
</card:headerPrecentCard>

支持的设计令牌属性

color: 颜色设置
background: 背景色
fontSize: 字体大小
padding: 内边距
margin: 外边距

详细的设计令牌定义请参考设计令牌文档。

最佳实践

1. 选择合适的卡片类型

通用卡片：内容结构灵活，需要自定义布局
特定卡片：有明确的内容结构，追求统一的视觉效果

2. 内容组织


<!-- 推荐：结构清晰 -->
<card:elegantStandard>
## 主标题
### 子标题
内容描述...
 
[主要操作](https://example.com)
[secondary][次要操作](https://example.com)
</card:elegantStandard>
 
<!-- 不推荐：结构混乱 -->
<card:elegantStandard>
[按钮](https://example.com)
## 标题
内容...
### 子标题
</card:elegantStandard>

3. 响应式考虑

卡片会自动适配移动设备
图表在小屏幕上会调整显示方式
按钮组合会自动调整布局

4. 性能优化

避免在单个卡片中放置过多内容
图片使用适当的尺寸和格式
图表数据保持合理的数据量

错误处理

常见错误

不支持的组件类型


<!-- 错误：elegantList 不支持图片 -->
<card:elegantList>
## 标题
![图片](url)
</card:elegantList>
 
<!-- 正确：使用支持图片的卡片 -->
<card:elegantStandard>
## 标题
![图片](url)
</card:elegantStandard>

映射规则冲突


<!-- 错误：多个 h2 标题 -->
<card:elegantStandard>
## 标题1
## 标题2
</card:elegantStandard>
 
<!-- 正确：一个主标题，多个子标题 -->
<card:elegantStandard>
## 主标题
### 子标题1
### 子标题2
</card:elegantStandard>

错误恢复机制

不支持的组件会被忽略或使用默认样式
多余的同类型组件会使用最后一个
缺失必要组件时显示占位符
语法错误时回退到通用卡片模式