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/homeNav.doc/CHomeNav.doc.md | 127 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 127 insertions(+), 0 deletions(-)
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
--
Gitblit v1.9.1