知识库，新增排版组件文档

Tevin

2025-03-19 202b2885fca7905f826cec2c5ce4630b514bcf33

知识库，新增排版组件文档

 _cursor.ai/layout.doc/alert.doc/CAlert.doc.md

New file
@@ -0,0 +1,129 @@
# CAlert 弹窗

## 功能说明

基于 Taro UI 的模态框（AtModal）封装的alert弹窗组件，支持Alert（提示）和Confirm（确认）两种模式。

## 引用方式

```js
import CAlert from '@components/layout/alert';
```

## 组件参数

- `onConfirm` (Function，可选)：确认模式下，点击确认按钮的回调函数

## 实例方法

- `$alert(option, callback)`：显示提示弹窗
  - `option` (String|Object)：弹窗配置，可以是字符串或对象
    - 当为字符串时，直接作为弹窗内容
    - 当为对象时，支持以下属性：
      - `title` (String)：弹窗标题
      - `content` (String)：弹窗主要内容
      - `contents` (Array)：弹窗内容数组，会逐行显示
  - `callback` (Function)：点击"知道了"按钮后的回调函数
  
- `$confirm(option, callback)`：显示确认弹窗
  - `option` (String|Object)：弹窗配置，参数同`$alert`
  - `callback` (Function)：点击"取消"或"确定"按钮后的回调函数

## 使用示例

### 基础提示框用法

```html
<template>
  <view class="page">
    <button @tap="evt => showAlert()">显示提示</button>
    <CAlert ref="alert" />
  </view>
</template>

<script>
import CAlert from '@components/layout/alert';

export default {
  components: {
    CAlert
  },
  methods: {
    showAlert() {
      this.$refs.alert.$alert('这是一条提示信息');
    }
  }
}
</script>
```

### 带标题的提示框

```html
<template>
  <view class="page">
    <button @tap="evt => showAlertWithTitle()">显示带标题的提示</button>
    <CAlert ref="alert" />
  </view>
</template>

<script>
import CAlert from '@components/layout/alert';

export default {
  components: {
    CAlert
  },
  methods: {
    showAlertWithTitle() {
      this.$refs.alert.$alert({
        title: '提示',
        content: '这是一条提示信息'
      });
    }
  }
}
</script>
```

### 确认框用法

```html
<template>
  <view class="page">
    <button @tap="evt => showConfirm()">显示确认框</button>
    <CAlert 
      ref="alert" 
      :onConfirm="handleConfirm"
    />
  </view>
</template>

<script>
import CAlert from '@components/layout/alert';

export default {
  components: {
    CAlert
  },
  methods: {
    showConfirm() {
      this.$refs.alert.$confirm('是否确认此操作？');
    },
    handleConfirm() {
      console.log('用户点击了确认');
      // 执行确认操作
    }
  }
}
</script>
```

## 注意事项

1. 弹窗内容支持普通文本，不支持HTML结构
2. 使用确认框时，需要通过props传入`onConfirm`回调函数来响应用户的确认操作
3. 组件内部存在一个拼写错误，确认模式的变量名为`'comfirm'`而非`'confirm'`，但使用时仍应使用`$confirm`方法
4. 组件基于Taro UI的模态框，在样式上与Taro UI保持一致

<!-- 作者：Tevin --> 

 _cursor.ai/layout.doc/anchor.doc/CAnchor.doc.md

New file
@@ -0,0 +1,150 @@
# CAnchor 应用内超连接

## 功能说明

应用内超连接组件，用于在应用内部页面之间进行跳转，封装了 Taro 的页面跳转方法，支持多种跳转模式。组件可包裹任何内容作为点击触发区域。

## 引用方式

```js
import CAnchor from '@components/layout/anchor';
```

## 组件参数

- `href` (String，必选)：跳转目标路径，可以是页面路径，也可以是特殊值 'back'
- `rel` (String，可选)：跳转方式，默认值为 'navigate'
  - `navigate`：保留当前页面，跳转到应用内的某个页面（对应 Taro.navigateTo）
  - `redirect`：关闭当前页面，跳转到应用内的某个页面（对应 Taro.redirectTo）

## 使用示例

### 基础用法

```html
<template>
  <view class="page">
    <CAnchor href="/pages/order/detail?id=12345">
      <view class="link-text">查看订单详情</view>
    </CAnchor>
  </view>
</template>

<script>
import CAnchor from '@components/layout/anchor';

export default {
  components: {
    CAnchor
  }
}
</script>
```

### 包裹图片或按钮

```html
<template>
  <view class="page">
    <!-- 包裹图片 -->
    <CAnchor href="/pages/product/detail?id=6789">
      <image 
        src="/static/images/product.jpg" 
        mode="aspectFill" 
        class="product-image"
      />
    </CAnchor>
    
    <!-- 包裹按钮 -->
    <CAnchor href="/pages/cart/index">
      <AtButton type="primary">
        去购物车结算
      </AtButton>
    </CAnchor>
  </view>
</template>

<script>
import CAnchor from '@components/layout/anchor';
import { AtButton } from 'taro-ui-vue';

export default {
  components: {
    CAnchor,
    AtButton
  }
}
</script>
```

### 返回上一页

```html
<template>
  <view class="page">
    <CAnchor href="back">
      <view class="back-link">
        <AtIcon value="chevron-left" size="16" />
        <text>返回上一页</text>
      </view>
    </CAnchor>
  </view>
</template>

<script>
import CAnchor from '@components/layout/anchor';
import { AtIcon } from 'taro-ui-vue';

export default {
  components: {
    CAnchor,
    AtIcon
  }
}
</script>

<style>
.back-link {
  display: flex;
  align-items: center;
}
</style>
```

### 重定向模式

```html
<template>
  <view class="page">
    <CAnchor 
      href="/pages/login/index" 
      rel="redirect"
    >
      <view class="redirect-link">
        请先登录后再操作
      </view>
    </CAnchor>
  </view>
</template>

<script>
import CAnchor from '@components/layout/anchor';

export default {
  components: {
    CAnchor
  }
}
</script>
```

## 注意事项

1. 组件通过默认插槽提供内容，可以包裹任何元素作为点击区域
2. href 参数必须提供有效的页面路径，否则点击不会触发任何操作
3. 当 href 设置为 'back' 时，等同于调用 Taro.navigateBack() 方法
4. 页面路径应该以 '/' 开头，例如 '/pages/index/index'
5. 可以在路径中添加查询参数，例如 '/pages/detail?id=123'
6. 重定向模式会关闭当前页面，无法通过返回按钮回到当前页面

<!-- 作者：Tevin --> 

 _cursor.ai/layout.doc/card.doc/CCard.doc.md

New file
@@ -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 --> 

 _cursor.ai/layout.doc/description.doc/CDescription.doc.md

New file
@@ -0,0 +1,149 @@
# CDescription 描述列表项

## 功能说明

描述列表项组件，用于展示标签和内容的键值对形式信息，常用于详情页面的信息展示，支持不同的标签对齐方式和样式选项。

## 引用方式

```js
import CDescription from '@components/layout/description';
```

## 组件参数

- `label` (String，必选)：左侧标签文本
- `labelAlign` (String，可选)：标签对齐方式，默认值为 'left'
  - `left`：定宽左对齐
  - `right`：定宽右对齐
  - `none`：无固定宽度
- `enlarged` (Boolean，可选)：是否加大显示区域，默认值为 false
- `hasBorder` (Boolean，可选)：是否显示底部边框，默认值为 false

## 使用示例

### 基础用法

```html
<template>
  <view class="page">
    <CDescription label="名称">
      <text>张三</text>
    </CDescription>
    <CDescription label="电话">
      <text>13800138000</text>
    </CDescription>
    <CDescription label="地址">
      <text>广州市天河区某某路某某号</text>
    </CDescription>
  </view>
</template>

<script>
import CDescription from '@components/layout/description';

export default {
  components: {
    CDescription
  }
}
</script>
```

### 不同对齐方式和样式

```html
<template>
  <view class="page">
    <!-- 标签右对齐 -->
    <CDescription 
      label="订单编号" 
      labelAlign="right"
    >
      <text>OR202304250001</text>
    </CDescription>
    
    <!-- 带底部边框 -->
    <CDescription 
      label="金额" 
      hasBorder
    >
      <text class="m-text-primary">¥198.00</text>
    </CDescription>
    
    <!-- 加大显示区域 -->
    <CDescription 
      label="备注" 
      enlarged
    >
      <text>此订单为加急订单，请优先处理，并且联系物流安排配送</text>
    </CDescription>
    
    <!-- 无宽度限制的标签 -->
    <CDescription 
      label="客户提供的自定义信息要求" 
      labelAlign="none"
    >
      <text>产品需要绿色包装</text>
    </CDescription>
  </view>
</template>

<script>
import CDescription from '@components/layout/description';

export default {
  components: {
    CDescription
  }
}
</script>
```

### 在卡片内使用

```html
<template>
  <view class="page">
    <CCard>
      <CCardTitle title="订单信息" />
      <CCardContent>
        <CDescription label="订单编号">
          <text>OR202304250001</text>
        </CDescription>
        <CDescription label="下单时间">
          <text>2023-04-25 14:30:25</text>
        </CDescription>
        <CDescription label="订单状态">
          <text class="m-text-warning">待处理</text>
        </CDescription>
      </CCardContent>
    </CCard>
  </view>
</template>

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

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

## 注意事项

1. 组件主要用于键值对形式的信息展示，内容部分通过默认插槽提供
2. 标签宽度在labelAlign为left和right时是固定的，建议标签文字不要过长
3. 当标签文字较长时，可以使用labelAlign="none"取消固定宽度限制
4. 内容部分可以插入任何元素，不仅限于文本
5. 组件适合连续使用来展示多个信息项，形成一个完整的描述列表
6. 当设置hasBorder为true时，会在项目底部显示一条分隔线

<!-- 作者：Tevin --> 

 _cursor.ai/layout.doc/drawer.doc/CDrawer.doc.md

New file
@@ -0,0 +1,199 @@
# CDrawer 抽屉

## 功能说明

抽屉组件，可从页面不同方向滑出，通常用于展示临时的操作面板或内容区域，支持从顶部、左侧、右侧滑入。点击遮罩层可关闭抽屉。

## 引用方式

```js
import CDrawer from '@components/layout/drawer';
```

## 组件参数

- `show` (Boolean，必选)：控制抽屉显示或隐藏，默认值为 false
- `direction` (String，可选)：抽屉滑出方向，默认值为 'right'
  - `top`：从顶部滑出
  - `left`：从左侧滑出
  - `right`：从右侧滑出
- `onClose` (Function，必选)：抽屉关闭时的回调函数，通常用于设置 show 为 false

## 使用示例

### 基础用法 - 从右侧滑出

```html
<template>
  <view class="page">
    <button @tap="evt => openDrawer()">打开抽屉</button>
    
    <CDrawer 
      :show="drawerVisible" 
      :onClose="closeDrawer"
    >
      <view class="drawer-content">
        <view class="drawer-title">筛选条件</view>
        <view class="drawer-item">选项1</view>
        <view class="drawer-item">选项2</view>
        <view class="drawer-item">选项3</view>
        <button @tap="evt => applyFilter()">确定</button>
      </view>
    </CDrawer>
  </view>
</template>

<script>
import CDrawer from '@components/layout/drawer';

export default {
  components: {
    CDrawer
  },
  data() {
    return {
      drawerVisible: false
    }
  },
  methods: {
    openDrawer() {
      this.drawerVisible = true;
    },
    closeDrawer() {
      this.drawerVisible = false;
    },
    applyFilter() {
      // 应用筛选逻辑
      this.closeDrawer();
    }
  }
}
</script>

<style>
.drawer-content {
  padding: 20px;
}
.drawer-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.drawer-item {
  padding: 10px 0;
}
</style>
```

### 从左侧滑出的抽屉

```html
<template>
  <view class="page">
    <button @tap="evt => openDrawer()">打开导航菜单</button>
    
    <CDrawer 
      :show="drawerVisible" 
      direction="left"
      :onClose="closeDrawer"
    >
      <view class="menu-content">
        <view class="menu-item" @tap="evt => navigateTo('/pages/home/index')">首页</view>
        <view class="menu-item" @tap="evt => navigateTo('/pages/order/list')">订单管理</view>
        <view class="menu-item" @tap="evt => navigateTo('/pages/user/index')">用户中心</view>
        <view class="menu-item" @tap="evt => navigateTo('/pages/setting/index')">系统设置</view>
      </view>
    </CDrawer>
  </view>
</template>

<script>
import CDrawer from '@components/layout/drawer';
import Taro from '@tarojs/taro';

export default {
  components: {
    CDrawer
  },
  data() {
    return {
      drawerVisible: false
    }
  },
  methods: {
    openDrawer() {
      this.drawerVisible = true;
    },
    closeDrawer() {
      this.drawerVisible = false;
    },
    navigateTo(url) {
      this.closeDrawer();
      Taro.navigateTo({ url });
    }
  }
}
</script>
```

### 从顶部滑出的抽屉

```html
<template>
  <view class="page">
    <button @tap="evt => openDrawer()">显示通知</button>
    
    <CDrawer 
      :show="drawerVisible" 
      direction="top"
      :onClose="closeDrawer"
    >
      <view class="notification">
        <view class="notification-title">系统通知</view>
        <view class="notification-content">
          您有3条未读消息，请及时查看处理。
        </view>
        <button @tap="evt => viewMessages()">查看详情</button>
      </view>
    </CDrawer>
  </view>
</template>

<script>
import CDrawer from '@components/layout/drawer';

export default {
  components: {
    CDrawer
  },
  data() {
    return {
      drawerVisible: false
    }
  },
  methods: {
    openDrawer() {
      this.drawerVisible = true;
    },
    closeDrawer() {
      this.drawerVisible = false;
    },
    viewMessages() {
      this.closeDrawer();
      // 跳转到消息页面
    }
  }
}
</script>
```

## 注意事项

1. 使用抽屉组件时，必须提供 onClose 回调函数，否则点击遮罩层无法关闭抽屉
2. 抽屉内容通过默认插槽提供，可以根据需要自定义内容和样式
3. 抽屉组件默认占满整个屏幕，内容区域的样式需要自行定义
4. 抽屉打开时会添加遮罩层，防止用户与页面其他部分交互
5. 抽屉内容区宽度固定，左右抽屉为屏幕宽度的80%，顶部抽屉为屏幕高度的40%
6. 当前版本的组件不支持从底部滑出的抽屉，如有需要可考虑扩展组件

<!-- 作者：Tevin --> 

 _cursor.ai/layout.doc/h5Page.doc/CH5Page.doc.md

New file
@@ -0,0 +1,175 @@
# CH5Page H5页面布局

## 功能说明

H5页面布局组件集，用于构建标准的H5页面结构，包含页面容器、导航栏和内容区域三个部分，适用于需要遵循统一布局规范的H5页面。

## 引用方式

```js
import { CPage, CNavBar, CContent } from '@components/layout/h5Page';
```

## 组件结构

H5页面布局组件由以下三个组件组成：

1. `CPage` - 页面容器，作为整个页面的最外层容器
2. `CNavBar` - 导航栏，显示页面标题和导航按钮
3. `CContent` - 内容区域，显示页面主要内容，可选择是否支持滚动

## 组件参数

### CPage

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

### CNavBar

- `title` (String，必选)：导航栏标题
- `iconType` (String，可选)：左侧图标类型，默认值为 'chevron-left'
- `onClickIcon` (Function，可选)：左侧图标点击事件回调函数，返回true时将执行默认的返回上一页行为
- `dropNav` (Array，可选)：右侧下拉菜单配置，数组中的每项为对象，包含以下属性：
  - `title` (String)：菜单项标题
  - `url` (String)：点击菜单项跳转的页面路径

### CContent

- `scroll` (String，可选)：是否开启滚动功能，默认值为 'off'
  - `off`：不开启滚动
  - `on`：开启滚动

## 实例方法

### CContent

- `$scrollTop(top)`：滚动到指定位置
  - `top` (Number)：要滚动到的位置，单位为像素，默认为0

## 使用示例

### 基础用法

```html
<template>
  <CPage>
    <CNavBar title="页面标题" />
    <CContent>
      <view class="page-content">
        <!-- 页面内容 -->
        <view class="content-item">内容项1</view>
        <view class="content-item">内容项2</view>
        <view class="content-item">内容项3</view>
      </view>
    </CContent>
  </CPage>
</template>

<script>
import { CPage, CNavBar, CContent } from '@components/layout/h5Page';

export default {
  components: {
    CPage,
    CNavBar,
    CContent
  }
}
</script>
```

### 带滚动的内容和自定义返回事件

```html
<template>
  <CPage>
    <CNavBar 
      title="详情页面" 
      :onClickIcon="handleBackClick"
    />
    <CContent 
      scroll="on"
      ref="content"
    >
      <view class="page-content">
        <!-- 长内容需要滚动 -->
        <view class="content-section" v-for="i in 20" :key="i">
          内容区域 {{i}}
        </view>
      </view>
      <view class="scroll-top-btn" @tap="evt => scrollToTop()">回到顶部</view>
    </CContent>
  </CPage>
</template>

<script>
import { CPage, CNavBar, CContent } from '@components/layout/h5Page';

export default {
  components: {
    CPage,
    CNavBar,
    CContent
  },
  methods: {
    handleBackClick() {
      // 在返回前执行一些操作
      console.log('用户点击了返回按钮');
      // 返回true继续执行默认的返回行为
      return true;
    },
    scrollToTop() {
      this.$refs.content.$scrollTop(0);
    }
  }
}
</script>
```

### 带下拉菜单的导航栏

```html
<template>
  <CPage>
    <CNavBar 
      title="订单列表" 
      :dropNav="navMenuItems"
    />
    <CContent>
      <!-- 页面内容 -->
    </CContent>
  </CPage>
</template>

<script>
import { CPage, CNavBar, CContent } from '@components/layout/h5Page';

export default {
  components: {
    CPage,
    CNavBar,
    CContent
  },
  data() {
    return {
      navMenuItems: [
        { title: '新增订单', url: '/pages/order/create' },
        { title: '订单筛选', url: '/pages/order/filter' },
        { title: '导出订单', url: '/pages/order/export' }
      ]
    }
  }
}
</script>
```

## 注意事项

1. H5页面组件需要按照 `CPage > CNavBar + CContent` 的层级结构使用
2. 当使用下拉菜单时，点击页面其他区域会自动关闭菜单
3. CNavBar 的下拉菜单项需要设置 url 才能正常跳转
4. CContent 设置 scroll="on" 后会自动处理内容区域的滚动，无需额外设置样式
5. 当点击CNavBar的返回图标时，如果没有设置 onClickIcon 回调，将默认执行 Taro.navigateBack()
6. 组件会监听页面点击和触摸事件来处理下拉菜单的关闭逻辑

<!-- 作者：Tevin -->

 _cursor.ai/layout.doc/homeNav.doc/CHomeNav.doc.md

New file
@@ -0,0 +1,127 @@
# CHomeNav 首页导航

## 功能说明

用于首页显示导航菜单项的组件，支持两列或三列排版，可以显示分组标题。搭配CHomeItem子组件使用，用于展示一组功能入口。

## 引用方式

```js
import { CHomeNav, CHomeItem } from '@components/layout/homeNav';
```

## 组件结构

首页导航组件由以下两个组件组成：

1. `CHomeNav` - 导航容器，作为导航项的容器，控制排版
2. `CHomeItem` - 导航项，代表一个功能入口

## 组件参数

### CHomeNav

- `layout` (String，可选)：排版方式，默认值为 'two'
  - `two`：两列排版
  - `three`：三列排版
- `title` (String，可选)：分组标题，不设置则不显示

### CHomeItem

- `label` (String，必选)：导航项名称
- `icon` (String，必选)：导航项图标地址
- `href` (String，必选)：点击后跳转的链接地址

## 使用示例

### 基础用法

```html
<template>
  <view class="page">
    <CHomeNav title="常用功能">
      <CHomeItem
        label="订单管理"
        icon="/static/icons/order.png"
        href="/pages/order/list"
      />
      <CHomeItem
        label="客户管理"
        icon="/static/icons/customer.png"
        href="/pages/customer/list"
      />
      <CHomeItem
        label="配送管理"
        icon="/static/icons/delivery.png"
        href="/pages/delivery/list"
      />
      <CHomeItem
        label="数据统计"
        icon="/static/icons/statistics.png"
        href="/pages/statistics/index"
      />
    </CHomeNav>
  </view>
</template>

<script>
import { CHomeNav, CHomeItem } from '@components/layout/homeNav';

export default {
  components: {
    CHomeNav,
    CHomeItem
  }
}
</script>
```

### 三列排版

```html
<template>
  <view class="page">
    <CHomeNav 
      title="快捷功能" 
      layout="three"
    >
      <CHomeItem
        label="新增订单"
        icon="/static/icons/add-order.png"
        href="/pages/order/create"
      />
      <CHomeItem
        label="新增客户"
        icon="/static/icons/add-customer.png"
        href="/pages/customer/create"
      />
      <CHomeItem
        label="扫码收款"
        icon="/static/icons/qr-payment.png"
        href="/pages/payment/scan"
      />
    </CHomeNav>
  </view>
</template>

<script>
import { CHomeNav, CHomeItem } from '@components/layout/homeNav';

export default {
  components: {
    CHomeNav,
    CHomeItem
  }
}
</script>
```

## 注意事项

1. CHomeNav 组件内部需要包含 CHomeItem 子组件，不支持其他内容
2. CHomeItem 组件使用了 CAnchor 组件处理链接跳转，能够根据链接类型自动选择合适的跳转方式
3. 根据设计，当使用两列布局时图标稍大，三列布局时图标稍小
4. 传给 CHomeItem 的 icon 应该是一个完整的图片路径
5. 不管使用哪种布局，都会自动调整导航项的间距，保证美观

<!-- 作者：Tevin --> 

 _cursor.ai/layout.doc/navCustomBar.doc/CNavCustomBar.doc.md

New file
@@ -0,0 +1,80 @@
# CNavCustomBar 自定义导航条

## 功能说明

自定义导航条组件，用于在页面顶部显示导航信息，可以自动适配不同设备的状态栏高度，支持显示返回按钮和标题。

## 引用方式

```js
import CNavCustomBar from '@components/layout/navCustomBar';
```

## 组件参数

- `isNeedBackIcon` (Boolean，可选)：是否需要显示返回按钮，默认值为 false
- `title` (String，可选)：导航栏标题文本，默认值为空字符串

## 实例方法

- `$getStatusBarHeight()`：获取状态栏高度
- `$getNavBarHeight()`：获取导航栏的总高度（包括状态栏）

## 使用示例

### 基础用法

```html
<template>
  <view class="page">
    <CNavCustomBar 
      title="页面标题" 
      :isNeedBackIcon="true" 
    />
    <view class="content" :style="{paddingTop: navBarHeight + 'px'}">
      <!-- 页面内容 -->
    </view>
  </view>
</template>

<script>
import CNavCustomBar from '@components/layout/navCustomBar';

export default {
  components: {
    CNavCustomBar
  },
  data() {
    return {
      navBarHeight: 0
    }
  },
  mounted() {
    this.navBarHeight = this.$refs.navBar.$getNavBarHeight();
  }
}
</script>
```

### 自定义图标

```html
<template>
  <view class="page">
    <CNavCustomBar title="首页">
      <template #icon>
        <image class="menu-icon" src="../assets/menu.png" />
      </template>
    </CNavCustomBar>
  </view>
</template>
```

## 注意事项

1. 组件使用固定定位显示在页面顶部，使用时需要给内容区域设置上内边距，值为导航栏高度，可通过 `$getNavBarHeight()` 方法获取
2. 组件会自动适配不同设备的状态栏高度
3. 当 `isNeedBackIcon` 为 true 时，点击返回按钮默认执行 Taro.navigateBack({ delta: 1 })
4. 可以通过具名插槽 "icon" 自定义左侧图标，但仅在 isNeedBackIcon 为 false 时生效

<!-- 作者：chensi --> 

 _cursor.ai/layout.doc/numerical.doc/CNumerical.doc.md

New file
@@ -0,0 +1,117 @@
# CNumerical 数值显示

## 功能说明

用于以美观的方式展示一组数值及其标题的组件，支持小数点分隔显示，可以自适应不同数量的数值项，并支持点击事件。

## 引用方式

```js
import CNumerical from '@components/layout/numerical';
```

## 组件参数

- `values` (Array，必选)：数值集合，数组中的每项为对象，包含以下属性：
  - `title` (String)：数值项的标题
  - `value` (Number|String)：要显示的数值
  - `textType` (String，可选)：文本颜色类型，对应 CSS 类 'm-text-{textType}'
  - `onClick` (Function，可选)：点击数值项时的回调函数，接收当前项对象作为参数

## 使用示例

### 基础用法

```html
<template>
  <view class="page">
    <CNumerical :values="numericalValues" />
  </view>
</template>

<script>
import CNumerical from '@components/layout/numerical';

export default {
  components: {
    CNumerical
  },
  data() {
    return {
      numericalValues: [
        {
          title: '今日销量',
          value: 135
        },
        {
          title: '月销量',
          value: 3254
        },
        {
          title: '总销量',
          value: 58962
        }
      ]
    }
  }
}
</script>
```

### 带颜色样式和点击事件

```html
<template>
  <view class="page">
    <CNumerical :values="numericalValues" />
  </view>
</template>

<script>
import CNumerical from '@components/layout/numerical';

export default {
  components: {
    CNumerical
  },
  data() {
    return {
      numericalValues: [
        {
          title: '收入(元)',
          value: 9856.75,
          textType: 'primary'
        },
        {
          title: '支出(元)',
          value: 4328.50,
          textType: 'warning'
        },
        {
          title: '详情',
          value: 0,
          onClick: (item) => {
            console.log('用户点击了详情');
            // 跳转到详情页或显示详情弹窗
          }
        }
      ]
    }
  }
}
</script>
```

## 注意事项

1. 组件会根据传入的数值项数量自动调整布局：
   - 当数量能被3整除时，每行显示3个项目
   - 当数量除以3余1时，最后4个项目每行显示2个
   - 当数量除以3余2时，最后2个项目独占一行
   - 当只有1个项目时，占满整行
2. 数值会自动分离整数和小数部分，整数部分字体较大，小数部分字体较小
3. 当整数部分超过4位数时，小数部分的字体会进一步缩小
4. 具有onClick属性的项目会显示一个向右的箭头，并增加点击样式
5. textType属性可以控制数值的颜色，通过添加类名 'm-text-{textType}' 实现

<!-- 作者：Tevin --> 

 _cursor.ai/layout.doc/waiting.doc/CWaiting.doc.md

New file
@@ -0,0 +1,107 @@
# CWaiting 等待中

## 功能说明

基于 Taro UI 的模态框和活动指示器封装的等待提示组件，用于显示加载中或处理中的状态，支持显示标题和副标题。

## 引用方式

```js
import CWaiting from '@components/layout/waiting';
```

## 组件参数

- `isOpened` (Boolean，必选)：是否显示等待框
- `title` (String，可选)：等待框标题
- `sub` (String，可选)：等待框副标题
- `subType` (String，可选)：副标题的颜色类型，默认值为 'warning'

## 使用示例

### 基础用法

```html
<template>
  <view class="page">
    <button @tap="evt => showWaiting()">显示等待框</button>
    <CWaiting 
      :isOpened="waitingOpened" 
      title="正在加载中..." 
    />
  </view>
</template>

<script>
import CWaiting from '@components/layout/waiting';

export default {
  components: {
    CWaiting
  },
  data() {
    return {
      waitingOpened: false
    }
  },
  methods: {
    showWaiting() {
      this.waitingOpened = true;
      // 模拟3秒后完成加载
      setTimeout(() => {
        this.waitingOpened = false;
      }, 3000);
    }
  }
}
</script>
```

### 带副标题的等待框

```html
<template>
  <view class="page">
    <button @tap="evt => showWaitingWithSub()">显示带副标题的等待框</button>
    <CWaiting 
      :isOpened="waitingOpened" 
      title="正在处理中..." 
      sub="请勿关闭应用" 
    />
  </view>
</template>

<script>
import CWaiting from '@components/layout/waiting';

export default {
  components: {
    CWaiting
  },
  data() {
    return {
      waitingOpened: false
    }
  },
  methods: {
    showWaitingWithSub() {
      this.waitingOpened = true;
      // 模拟处理过程
      setTimeout(() => {
        this.waitingOpened = false;
      }, 3000);
    }
  }
}
</script>
```

## 注意事项

1. 等待框无法通过点击遮罩层关闭，需要手动控制 `isOpened` 属性来关闭等待框
2. 副标题默认使用警告色（橙色），通过 CSS 类 'm-text-warning' 实现
3. 组件基于 Taro UI 的 AtModal 和 AtActivityIndicator，在样式上保持与 Taro UI 一致
4. 建议在异步操作完成后，记得将 `isOpened` 设置为 false 关闭等待框
5. 组件不包含超时处理，如需超时处理，需要在使用组件的页面自行实现

<!-- 作者：Tevin -->