# 资源链接

## 任务链接

&#x20;

## Figma链接

Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=431-1221&m=dev

# 1. 组件概述

| **组件名称（英文）** | Base Card                          |
|--------------|------------------------------------|
| **组件编号**     | pca\_dd\_baseCard\_V1.0            |
| **组件类型**     | Atom Components                    |
| **组件分类**     | Data Display                       |
| **简介**       | 基础卡片容器组件，提供高度可定制的容器用于承载和组织任意类型的子内容 |

# 2. 版本

| **版本**   | 1.0  |
|----------|------|
| **更新简介** | 首次发布 |

# 3. 组件设计目的

1. 信息分组展示

2. 内容卡片式布局

3. 作为更复杂Pro组件的构建基础

4. 创建视觉层次和焦点区域

# 4. 适用场景

<table>
<thead>
<tr>
<th><h4>场景</h4></th>
<th><h4>示例</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>电商平台</strong></td>
<td>商品展示卡片</td>
</tr>
<tr>
<td><strong>SaaS应用</strong></td>
<td>数据卡片</td>
</tr>
<tr>
<td><strong>内容平台</strong></td>
<td>文章卡片</td>
</tr>
<tr>
<td><strong>企业应用</strong></td>
<td>仪表板卡片</td>
</tr>
</tbody>
</table>

# 5. UI 设计

## 5.1 展示样式

Base Card 可分为两部分，结构清晰：

* 外层容器​​：外层为一个容器组件，可以更改显示样式

* 内层插槽​​：内层为一个插槽，可往插槽中增添东西

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=ZTJiNzE3YWQwYmQ4NTZjZTE2YjQyOTU1MGRjOWMxZDZfZ0E4bXBUc0k2S1pycTg3Z0h3NHBhTFdhYlhDNVBaMExfVG9rZW46TTRDWWJJb2hGb040Sml4U1hoVGNlSVlJbnV1XzE3NzI2Nzg3Njc6MTc3MjY4MjM2N19WNA)

* 给到此组件的默认四个状态（默认样式、鼠标悬浮、选中、禁用）样式，支持更改四个状态下的样式

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=NjY0YTU5MDU1YmRhOTc4ZGUxNjE5NTU0NDMxMjE5ZmNfOGozd3FTWDdKblZPMThwMWtiSHZlcmNza2pDNjZnQ0tfVG9rZW46Qmx6UWJ5YjFzb1FjU2F4SEE4NmNwcDNCblBBXzE3NzI2Nzg3Njc6MTc3MjY4MjM2N19WNA)

## 5.2 自适应规则

* 默认组件的宽度是跟随父集容器的宽度

* 当父集容器的宽度变小，此组件的宽度也随之缩小

* 此组件最小缩到padding值为2px，不能再小，确保内容与边框不重合

## 5.3 **视觉设计规范（需要主题模块完成）**

### 5.3.1 颜色规范

### 5.3.2 尺寸规范

### 5.3.3 间距规范

## 5.4 基础交互规则

<table>
<thead>
<tr>
<th><h4>交互类型</h4></th>
<th><h4>行为描述</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>悬停</strong></td>
<td>根据hoverEffect配置变化</td>
</tr>
<tr>
<td><strong>点击</strong></td>
<td>触发onClick事件</td>
</tr>
</tbody>
</table>

## 5.5 复合交互逻辑

* 鼠标悬停时应用动画效果

* 可点击卡片支持键盘导航

* 触摸设备支持轻点和长按手势

# 6. 配置项

## 6.1 样式自定义

* 外层容器可以更改其背景色、圆角、边框、阴影的样式

* 外层容器可以更改padding值

* 可以更改鼠标悬停的样式、点击的样式、禁用的样式

* 可更改宽度和高度，默认为跟随父集高度，也可根据内容撑满，也可固定宽高

## 6.2 功能配置

* 是否可点击，默认为可点击的

# 7. 示例

