# CCard 列表卡片

## 功能说明

一个用于显示信息的卡片组件，结构包括主体、标题、内容、操作区四个部分。适用于需要将信息以卡片形式展示的场景，如列表项、信息展示等。

## 引用方式

```js
import { CCard, CCardTitle, CCardContent, CCardAction } from '@components/layout/card';
```

## 组件结构

卡片组件由以下四个组件组成：

1. `CCard` - 卡片主体，作为其他组件的容器
2. `CCardTitle` - 卡片标题，显示标题内容和可选的额外操作
3. `CCardContent` - 卡片内容区域
4. `CCardAction` - 卡片底部操作区域，支持横向滚动

## 组件参数

### CCard

无特定参数，通过插槽嵌套其他卡片子组件使用

### CCardTitle

- `title` (String，可选)：标题文本，默认值为 '列表卡片标题'
- `onTitleClick` (Function，可选)：标题点击事件回调函数

### CCardContent

无特定参数，用于包裹卡片主要内容

### CCardAction

无特定参数，用于包裹卡片底部的操作按钮

## 使用示例

### 基础用法

```html
<template>
  <view class="page">
    <CCard>
      <CCardTitle title="用户信息" />
      <CCardContent>
        <view class="user-info">
          <view class="info-item">姓名：张三</view>
          <view class="info-item">电话：13800138000</view>
          <view class="info-item">地址：广州市天河区</view>
        </view>
      </CCardContent>
    </CCard>
  </view>
</template>

<script>
import { CCard, CCardTitle, CCardContent } from '@components/layout/card';

export default {
  components: {
    CCard,
    CCardTitle,
    CCardContent
  }
}
</script>
```

### 完整卡片示例（带标题、内容和操作）

```html
<template>
  <view class="page">
    <CCard>
      <CCardTitle title="订单信息">
        <AtTag size="small" type="primary">新订单</AtTag>
      </CCardTitle>
      
      <CCardContent>
        <view class="order-info">
          <view class="order-item">订单号：2023042501</view>
          <view class="order-item">客户：李四</view>
          <view class="order-item">金额：¥125.00</view>
          <view class="order-item">状态：待处理</view>
        </view>
      </CCardContent>
      
      <CCardAction>
        <AtButton size="small" type="secondary" @tap="evt => handleCancel()">取消</AtButton>
        <AtButton size="small" type="primary" @tap="evt => handleConfirm()">确认</AtButton>
      </CCardAction>
    </CCard>
  </view>
</template>

<script>
import { CCard, CCardTitle, CCardContent, CCardAction } from '@components/layout/card';
import { AtButton, AtTag } from 'taro-ui-vue';

export default {
  components: {
    CCard,
    CCardTitle,
    CCardContent,
    CCardAction,
    AtButton,
    AtTag
  },
  methods: {
    handleCancel() {
      console.log('取消订单');
    },
    handleConfirm() {
      console.log('确认订单');
    }
  }
}
</script>
```

## 注意事项

1. 卡片组件需要按照 `CCard > CCardTitle/CCardContent/CCardAction` 的层级结构使用
2. `CCardTitle` 设置了底部边框，`CCardAction` 设置了顶部边框，都使用了 `m-border-strong-bottom/top` 样式类
3. `CCardTitle` 组件支持通过默认插槽在标题右侧添加额外内容（如标签、按钮等）
4. `CCardAction` 组件使用 `scroll-view` 实现，当操作按钮过多时支持横向滚动
5. 卡片内容可以根据实际需要自由组织，`CCardContent` 不对内容做特定限制

<!-- 作者：Tevin -->