跳到主要内容

Card组件文档

概述​

Card组件是邮轮穿舱件管理系统-小程序端中的一个核心UI组件，主要用于展示图片卡片信息。该组件基于TDesign小程序组件库构建，具有简洁的布局和灵活的配置选项。

组件结构​

文件结构​

Props属性​

属性名类型默认值说明
urlString-图片URL地址
descString-卡片描述文本
tagsArray[]标签数组，每个标签包含text和theme属性

Props详细说明​

url属性

  • 类型：String
  • 用途：设置卡片顶部显示的图片地址
  • 示例：url="https://example.com/image.jpg"

desc属性

  • 类型：String
  • 用途：设置卡片的主要描述文本
  • 示例：desc="邮轮穿舱件识别任务"

tags属性

  • 类型：Array
  • 用途：设置卡片底部的标签组
  • 结构：[{text: "标签1", theme: "primary"}, {text: "标签2", theme: "success"}]

Events事件​

当前Card组件未定义自定义事件，但支持小程序原生事件如：

  • bindtap - 点击事件
  • bindlongpress - 长按事件

Slots插槽​

Card组件采用内容封装设计，未提供自定义插槽。所有内容通过props进行配置。

样式设计​

尺寸规格​

  • 宽度：340rpx
  • 高度：488rpx
  • 图片区域：340rpx × 340rpx
  • 信息区域：内边距32rpx

样式类名​

.home-card          // 卡片容器
.home-card__image   // 图片区域  
.home-card__info    // 信息区域
.home-card__tag-group // 标签组

依赖关系​

外部组件依赖​

Card组件依赖以下TDesign组件：

  • t-image - 图片显示组件
  • t-tag - 标签显示组件

样式依赖​

使用示例​

基础用法​

<card 
  url="/static/example.jpg"
  desc="邮轮穿舱件识别任务"
  tags="{{[
    {text: '进行中', theme: 'primary'},
    {text: '高优先级', theme: 'warning'}
  ]}}"
/>

在页面中的配置​

在使用Card组件的页面json文件中需要注册：

{
  "usingComponents": {
    "card": "/components/card/index"
  }
}

架构关系图​

flowchart TD
    A[Card Component] --> B[t-image Component]
    A --> C[t-tag Component]
    A --> D[Variable.less]
    B --> E[TDesign Image]
    C --> F[TDesign Tag]
    D --> G[Global Styles]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#f3e5f5

组件继承关系​

classDiagram
    class CardComponent {
        +String url
        +String desc
        +Array tags
        +Object data
        +Object methods
    }
    
    class TImageComponent {
        +String src
        +String mode
        +String t-class
    }
    
    class TTagComponent {
        +String theme
        +String variant
        +String size
        +String text
    }
    
    CardComponent --> TImageComponent : contains
    CardComponent --> TTagComponent : contains

数据流分析​

sequenceDiagram
    participant P as Parent Page
    participant C as Card Component
    participant TI as T-Image
    participant TT as T-Tag
    
    P->>C: 传递props(url, desc, tags)
    C->>TI: 设置src属性
    C->>TT: 循环渲染tags数组
    TI-->>C: 图片加载完成
    TT-->>C: 标签渲染完成

设计模式​

Card组件采用了组合模式(Composite Pattern)，将多个基础组件组合成一个功能完整的复合组件。这种设计模式的优势包括：

  1. 封装性 - 隐藏内部实现细节
  2. 复用性 - 可在多个页面重复使用
  3. 维护性 - 修改内部结构不影响外部使用

性能考虑​

  1. 图片优化 - 使用t-image组件自动处理图片加载和缓存
  2. 标签渲染 - 使用wx:for循环渲染，避免重复代码
  3. 样式隔离 - 使用独立样式文件，避免样式污染

最佳实践​

  1. 图片尺寸 - 建议使用340×340像素的图片以获得最佳显示效果
  2. 标签数量 - 建议最多显示3个标签，避免布局溢出
  3. 描述长度 - 描述文本建议不超过50个字符

扩展建议​

如需扩展Card组件功能，可考虑：

  1. 添加点击事件处理
  2. 支持自定义插槽
  3. 增加动画效果
  4. 支持更多布局变体

该组件作为系统的基础UI构件，为邮轮穿舱件管理系统的用户界面提供了统一、规范的卡片展示方案。