From 202b2885fca7905f826cec2c5ce4630b514bcf33 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Wed, 19 Mar 2025 15:30:42 +0800
Subject: [PATCH] 知识库，新增排版组件文档
---
_cursor.ai/layout.doc/waiting.doc/CWaiting.doc.md | 107 ++++
_cursor.ai/layout.doc/homeNav.doc/CHomeNav.doc.md | 127 +++++
_cursor.ai/layout.doc/numerical.doc/CNumerical.doc.md | 117 +++++
_cursor.ai/layout.doc/description.doc/CDescription.doc.md | 149 ++++++
_cursor.ai/layout.doc/navCustomBar.doc/CNavCustomBar.doc.md | 80 +++
_cursor.ai/layout.doc/alert.doc/CAlert.doc.md | 129 +++++
_cursor.ai/layout.doc/h5Page.doc/CH5Page.doc.md | 175 +++++++
_cursor.ai/layout.doc/card.doc/CCard.doc.md | 134 +++++
_cursor.ai/layout.doc/anchor.doc/CAnchor.doc.md | 150 ++++++
_cursor.ai/layout.doc/drawer.doc/CDrawer.doc.md | 199 ++++++++
10 files changed, 1,367 insertions(+), 0 deletions(-)
diff --git a/_cursor.ai/layout.doc/alert.doc/CAlert.doc.md b/_cursor.ai/layout.doc/alert.doc/CAlert.doc.md
new file mode 100644
index 0000000..0e83f04
--- /dev/null
+++ b/_cursor.ai/layout.doc/alert.doc/CAlert.doc.md
@@ -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 -->
\ No newline at end of file
diff --git a/_cursor.ai/layout.doc/anchor.doc/CAnchor.doc.md b/_cursor.ai/layout.doc/anchor.doc/CAnchor.doc.md
new file mode 100644
index 0000000..8c287b4
--- /dev/null
+++ b/_cursor.ai/layout.doc/anchor.doc/CAnchor.doc.md
@@ -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 -->
\ No newline at end of file
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
diff --git a/_cursor.ai/layout.doc/description.doc/CDescription.doc.md b/_cursor.ai/layout.doc/description.doc/CDescription.doc.md
new file mode 100644
index 0000000..8a62006
--- /dev/null
+++ b/_cursor.ai/layout.doc/description.doc/CDescription.doc.md
@@ -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 -->
\ No newline at end of file
diff --git a/_cursor.ai/layout.doc/drawer.doc/CDrawer.doc.md b/_cursor.ai/layout.doc/drawer.doc/CDrawer.doc.md
new file mode 100644
index 0000000..1d8df88
--- /dev/null
+++ b/_cursor.ai/layout.doc/drawer.doc/CDrawer.doc.md
@@ -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 -->
\ No newline at end of file
diff --git a/_cursor.ai/layout.doc/h5Page.doc/CH5Page.doc.md b/_cursor.ai/layout.doc/h5Page.doc/CH5Page.doc.md
new file mode 100644
index 0000000..00e2eb4
--- /dev/null
+++ b/_cursor.ai/layout.doc/h5Page.doc/CH5Page.doc.md
@@ -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 -->
\ No newline at end of file
diff --git a/_cursor.ai/layout.doc/homeNav.doc/CHomeNav.doc.md b/_cursor.ai/layout.doc/homeNav.doc/CHomeNav.doc.md
new file mode 100644
index 0000000..f8b1e18
--- /dev/null
+++ b/_cursor.ai/layout.doc/homeNav.doc/CHomeNav.doc.md
@@ -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 -->
\ No newline at end of file
diff --git a/_cursor.ai/layout.doc/navCustomBar.doc/CNavCustomBar.doc.md b/_cursor.ai/layout.doc/navCustomBar.doc/CNavCustomBar.doc.md
new file mode 100644
index 0000000..1c46be4
--- /dev/null
+++ b/_cursor.ai/layout.doc/navCustomBar.doc/CNavCustomBar.doc.md
@@ -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 -->
\ No newline at end of file
diff --git a/_cursor.ai/layout.doc/numerical.doc/CNumerical.doc.md b/_cursor.ai/layout.doc/numerical.doc/CNumerical.doc.md
new file mode 100644
index 0000000..02abe60
--- /dev/null
+++ b/_cursor.ai/layout.doc/numerical.doc/CNumerical.doc.md
@@ -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 -->
\ No newline at end of file
diff --git a/_cursor.ai/layout.doc/waiting.doc/CWaiting.doc.md b/_cursor.ai/layout.doc/waiting.doc/CWaiting.doc.md
new file mode 100644
index 0000000..afc4d50
--- /dev/null
+++ b/_cursor.ai/layout.doc/waiting.doc/CWaiting.doc.md
@@ -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 -->
\ No newline at end of file
--
Gitblit v1.9.1