---
title: 设计文档
order: 2
category: atom
---

# Graphic Text Card 设计文档

## 组件概述

- 组件名称（英文）： Graphic Text Card
- 组件编号： pcp_dd_graphicTextCard_V1.0
- 组件类型： Pro Components
- 组件分类：Data Display
- 简介: 图文卡片组件，结合图标/图片、文本和状态标识，专为标签页、分类导航等场景设计。

## 2. 版本

- 版本： 1.0
- 更新简介: 首次发布

## 3. 组件设计目的

1. 作为 Tabs 标签页的项。
2. 作为列表中的项。
3. 作为导航菜单项。

## 适用场景

- 电商平台: 商品分类标签
- 后台管理系统: 功能模块入口
- 内容应用: 文章分类标签

## UI 设计

文本卡片组件包含以下区域：

- 图形区域（必选）
- 主文本（必选）
- 角标（可选，支持红点、数字和文本）

Analyze the structure of this selection, and make a plan for implementation.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12510-9674&m=dev

- 此组件包含四种样式和三种大小，以及四种状态

- 三种大小（通用）： small, default, large
- 四种状态 （通用）： disabled default hover active
- 四种样式（后期可扩展）：

- 样式 1
  **上面展示图片、下面展示文字， active 状态时，文字颜色为主题色**
  Implement this design from Figma.
  @https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12552-2786&m=dev

- 样式二
  **图形区域默认换成了 IconFont，以便捷使用， active 状态时，图标和文字颜色为主题色**
  Implement this design from Figma.
  @https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12552-2787&m=dev

- 样式三
  **左边展示图片、右边展示文字， active 状态时，背景为主题色，文字为白色**
  Implement this design from Figma.
  @https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12552-2788&m=dev

- 样式四
  **上面展示图片、下面展示文字， active 状态时，边框色为主题色，其他不变**
  Implement this design from Figma.
  @https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12552-2789&m=dev

## 自适应规则

- 宽度默认为固定宽度，超过时内容文本区域显示省略
- 横向放置时内容的排列方式默认为上下居中对齐
- 竖向放置时内容的排列方式默认为左右居中

## 配置项

### 7.1 样式自定义

- 可以切换选择样式一到样式四
- Card 的背景、圆角、边框、阴影、padding、gap 都可以在默认的基础上去的自定义
- 内容的文本可以自定义大小、粗细、颜色、显示行数、宽度
- card 的宽度默认为固定宽，也可更改为内容撑满、撑满父容器
- 图形区域的 icon 可以更改大小、颜色
- 图形区域可以更改背景、圆角、边框、阴影、padding
- 可以更改角标的位置和大小样式

### 7.2 功能配置

- 是否可点击
- 是否显示 tag 标签
- 是否开启角标，角标可切换数字、点、文本
- 是否为选中状态
- 是否开启插槽
