From 3b03f87a02458f719e2eb4bf112a13441b427d14 Mon Sep 17 00:00:00 2001
From: ‘chensiAb’ <‘chenchenco03@163.com’>
Date: Tue, 25 Mar 2025 13:54:34 +0800
Subject: [PATCH] Merge branch 'master' of ssh://dev.zhiheiot.com:29418/mob-components
---
_cursor.ai/layout.doc/card.doc/CCard.doc.md | 134 ++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 134 insertions(+), 0 deletions(-)
diff --git a/_cursor.ai/layout.doc/card.doc/CCard.doc.md b/_cursor.ai/layout.doc/card.doc/CCard.doc.md
new file mode 100644
index 0000000..bc58fbe
--- /dev/null
+++ b/_cursor.ai/layout.doc/card.doc/CCard.doc.md
@@ -0,0 +1,134 @@
+# 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 -->
\ No newline at end of file
--
Gitblit v1.9.1