From b82f583d8222f8740afa2d1532db93832c4a5274 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Wed, 19 Mar 2025 18:35:28 +0800
Subject: [PATCH] 知识库文档，增加插件部分
---
_cursor.ai/plugins.doc/filter.doc/CFilter.doc.md | 193 +++++++++++++++++++++
_cursor.ai/plugins.doc/qrcode.doc/CQRCode.doc.md | 53 +++++
_cursor.ai/plugins.doc/echarts.doc/CECharts.doc.md | 156 +++++++++++++++++
_cursor.ai/plugins.doc/infiniteScroll.doc/CInfiniteScroll.doc.md | 125 +++++++++++++
4 files changed, 527 insertions(+), 0 deletions(-)
diff --git a/_cursor.ai/plugins.doc/echarts.doc/CECharts.doc.md b/_cursor.ai/plugins.doc/echarts.doc/CECharts.doc.md
new file mode 100644
index 0000000..2b6ea9e
--- /dev/null
+++ b/_cursor.ai/plugins.doc/echarts.doc/CECharts.doc.md
@@ -0,0 +1,156 @@
+# ECharts图表组件
+
+## 组件名称
+
+`CECharts` - 用于在小程序环境中渲染ECharts图表的组件
+
+## 组件说明
+
+该组件是对百度ECharts的封装，用于在小程序环境中渲染各类图表，支持触摸交互和数据更新。支持柱状图、折线图、饼图等各种ECharts支持的图表类型。
+
+## 使用方法
+
+```html
+<CECharts
+ :canvasId="'chart-' + Math.random()"
+ :onReady="handleChartReady"
+/>
+```
+
+```js
+// 图表初始化回调
+handleChartReady(chart) {
+ chart.setOption({
+ title: {
+ text: '销售统计'
+ },
+ tooltip: {},
+ xAxis: {
+ data: ['1月', '2月', '3月', '4月', '5月', '6月']
+ },
+ yAxis: {},
+ series: [{
+ name: '销量',
+ type: 'bar',
+ data: [5, 20, 36, 10, 10, 20]
+ }]
+ });
+}
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| ------------ | -------- | -------- | --------------------------------------- |
+| canvasId | String | 随机生成 | 画布ID，用于标识图表实例 |
+| disableTouch | Boolean | false | 是否禁用触摸交互 |
+| onReady | Function | - | 图表准备就绪的回调函数，参数为chart实例 |
+
+## 方法说明
+
+组件内部对外暴露的方法：
+
+| 方法名 | 参数 | 说明 |
+| -------------------- | -------- | ---------------------- |
+| init | callback | 初始化图表方法 |
+| canvasToTempFilePath | opt | 将图表转为临时文件路径 |
+
+## 使用示例
+
+```html
+<template>
+ <view class="page">
+ <view class="chart-container">
+ <CECharts
+ ref="salesChart"
+ :onReady="handleSalesChartReady"
+ />
+ </view>
+ </view>
+</template>
+
+<script>
+import { CECharts } from '@components/plugins/echarts';
+
+export default {
+ components: {
+ CECharts
+ },
+ data() {
+ return {
+ salesData: []
+ }
+ },
+ methods: {
+ // 图表准备就绪回调
+ handleSalesChartReady(chart) {
+ // 保存图表实例
+ this.chart = chart;
+
+ // 设置图表配置
+ chart.setOption({
+ title: {
+ text: '月度销售统计',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: ['1月', '2月', '3月', '4月', '5月', '6月']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ name: '销量',
+ type: 'bar',
+ data: [10, 52, 200, 334, 390, 330]
+ }]
+ });
+ },
+
+ // 更新图表数据
+ updateChartData(newData) {
+ if (!this.chart) return;
+
+ this.chart.setOption({
+ series: [{
+ data: newData
+ }]
+ });
+ }
+ },
+ mounted() {
+ // 获取数据
+ setTimeout(() => {
+ const newData = [50, 120, 180, 80, 70, 110];
+ this.updateChartData(newData);
+ }, 2000);
+ }
+}
+</script>
+```
+
+## 默认配置说明
+
+组件已经内置了一些默认配置：
+
+1. 禁用了渐进式渲染（progressive: 0）
+2. 配置了默认的 tooltip 样式
+3. 优化了 tooltip 的定位逻辑
+
+## 注意事项
+
+1. 该组件暂时仅适用于小程序环境，文件名为 `CECharts.weapp.vue`
+2. 在小程序端使用需要确保 canvas 的 type 属性设置为 "2d"
+3. 小程序对 canvas 的性能有一定限制，复杂图表可能会有性能问题
+4. 组件自动会处理触摸事件，支持图表交互
+5. 如需保存图表为图片，可使用 canvasToTempFilePath 方法
\ No newline at end of file
diff --git a/_cursor.ai/plugins.doc/filter.doc/CFilter.doc.md b/_cursor.ai/plugins.doc/filter.doc/CFilter.doc.md
new file mode 100644
index 0000000..742ee75
--- /dev/null
+++ b/_cursor.ai/plugins.doc/filter.doc/CFilter.doc.md
@@ -0,0 +1,193 @@
+# 筛选组件
+
+## 组件名称
+
+`CFilter` - 用于页面筛选条件的组件
+
+## 组件说明
+
+该组件用于实现页面筛选功能，包含顶部筛选条和展开的更多筛选抽屉，支持多种筛选控件类型，包括选择器、日期范围、单选和输入框等。
+
+## 使用方法
+
+```html
+<CFilter
+ :filterData="filterData"
+ :bar="barConfig"
+ :items="itemsConfig"
+ :selectOptions="selectOptions"
+ :onChange="handleFilterChange"
+/>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| ------------- | -------- | ------ | ---------------------- |
+| filterData | Object | {} | 筛选数据对象 |
+| bar | Object | {} | 筛选横条项目配置 |
+| items | Array | [] | 筛选展开层项目列表配置 |
+| selectOptions | Object | {} | 各个项目的选项列表 |
+| onChange | Function | - | 筛选变化时的回调函数 |
+
+## 子组件说明
+
+CFilter组件包含以下子组件：
+
+1. `CFilterSelect` - 下拉选择组件
+2. `CFilterDateRange` - 日期范围选择组件
+3. `CFilterRadio` - 单选组件
+4. `CFilterInput` - 输入框组件
+
+## 配置项说明
+
+### bar 配置项
+
+顶部筛选条配置，支持类型：
+
+```js
+{
+ type: 'select', // 类型：select/dateRange/input
+ label: '状态', // 显示的标签
+ name: 'status', // 字段名称
+ cancelable: true // 是否可取消选择
+}
+```
+
+### items 配置项
+
+更多筛选项配置数组：
+
+```js
+[
+ {
+ type: 'select', // 类型：select/dateRange/radio/input
+ label: '会员类型', // 显示的标签
+ name: 'memberType', // 字段名称
+ },
+ {
+ type: 'dateRange',
+ label: '日期范围',
+ name: 'dateRange'
+ }
+]
+```
+
+### selectOptions 配置项
+
+选项数据配置：
+
+```js
+{
+ status: [
+ { label: '全部', value: '' },
+ { label: '正常', value: 1 },
+ { label: '停用', value: 0 }
+ ],
+ memberType: [
+ { label: '全部', value: '' },
+ { label: '普通会员', value: 'normal' },
+ { label: 'VIP会员', value: 'vip' }
+ ]
+}
+```
+
+## 使用示例
+
+```html
+<template>
+ <view class="page">
+ <CFilter
+ :filterData="filterData"
+ :bar="barConfig"
+ :items="itemsConfig"
+ :selectOptions="selectOptions"
+ :onChange="handleFilterChange"
+ />
+
+ <!-- 列表内容 -->
+ <view class="list">
+ <!-- 根据筛选结果显示内容 -->
+ </view>
+ </view>
+</template>
+
+<script>
+import { CFilter } from '@components/plugins/filter';
+
+export default {
+ components: {
+ CFilter
+ },
+ data() {
+ return {
+ // 筛选数据
+ filterData: {
+ status: 1,
+ memberType: '',
+ dateRange: '',
+ keyword: ''
+ },
+ // 顶部筛选条配置
+ barConfig: {
+ type: 'select',
+ label: '状态',
+ name: 'status',
+ cancelable: false
+ },
+ // 更多筛选项配置
+ itemsConfig: [
+ {
+ type: 'select',
+ label: '会员类型',
+ name: 'memberType'
+ },
+ {
+ type: 'dateRange',
+ label: '创建日期',
+ name: 'dateRange'
+ },
+ {
+ type: 'input',
+ label: '关键字',
+ name: 'keyword'
+ }
+ ],
+ // 选项数据
+ selectOptions: {
+ status: [
+ { label: '全部', value: '' },
+ { label: '正常', value: 1 },
+ { label: '停用', value: 0 }
+ ],
+ memberType: [
+ { label: '全部', value: '' },
+ { label: '普通会员', value: 'normal' },
+ { label: 'VIP会员', value: 'vip' }
+ ]
+ }
+ }
+ },
+ methods: {
+ // 筛选变化回调
+ handleFilterChange(filterData) {
+ console.log('筛选条件变化:', filterData);
+ // 根据筛选条件获取数据
+ this.getListData(filterData);
+ },
+
+ // 获取列表数据
+ getListData(params) {
+ // 请求数据
+ }
+ }
+}
+</script>
+```
+
+## 注意事项
+
+1. 筛选条（bar）只能配置一个筛选项
+2. 抽屉式筛选（items）可以配置多个筛选项
+3. 每个筛选项的类型（type）必须与组件类型匹配
+4. select和radio类型的选项必须在selectOptions中配置对应的选项数据
\ No newline at end of file
diff --git a/_cursor.ai/plugins.doc/infiniteScroll.doc/CInfiniteScroll.doc.md b/_cursor.ai/plugins.doc/infiniteScroll.doc/CInfiniteScroll.doc.md
new file mode 100644
index 0000000..a9da34c
--- /dev/null
+++ b/_cursor.ai/plugins.doc/infiniteScroll.doc/CInfiniteScroll.doc.md
@@ -0,0 +1,125 @@
+# 无限滚动组件
+
+## 组件名称
+
+`CInfiniteScroll` - 用于实现下拉刷新和上拉加载更多功能的滚动容器组件
+
+## 组件说明
+
+该组件实现了移动端常见的下拉刷新和上拉加载更多功能，支持自动加载第一页和手动触发加载，适用于列表展示场景。
+
+## 使用方法
+
+```html
+<CInfiniteScroll
+ :autoInit="true"
+ :onLoadMore="handleLoadMore"
+>
+ <!-- 内容插槽 -->
+ <view v-for="(item, index) in list" :key="index">
+ {{ item.name }}
+ </view>
+</CInfiniteScroll>
+```
+
+```js
+// 数据加载方法
+handleLoadMore({ current, next, success, fail }) {
+ // 请求后端数据
+ $fetch.getList({ page: next }).then(res => {
+ // 加载成功
+ success({
+ pageTotal: res.pageTotal, // 总页数
+ });
+ }).catch(() => {
+ // 加载失败
+ fail();
+ });
+}
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| ---------- | -------- | ------ | -------------------------------- |
+| autoInit | Boolean | false | 是否自动初始化（自动加载第一页） |
+| onLoadMore | Function | - | 发起加载页面数据的回调函数 |
+
+## 方法说明
+
+| 方法名 | 参数 | 说明 |
+| ----------- | --------- | ------------------------------------------- |
+| $initScroll | - | 初始化加载第一页数据 |
+| $refresh | autoStart | 重置并刷新数据，参数为 'off' 时不会自动加载 |
+
+## 回调参数说明
+
+`onLoadMore` 回调函数参数：
+
+| 参数名 | 类型 | 说明 |
+| ------- | -------- | ---------------------------------------------- |
+| current | Number | 当前页页码 |
+| next | Number | 需要加载的页面页码 |
+| success | Function | 当加载成功后调用，参数 `{ pageTotal: 总页数 }` |
+| fail | Function | 加载失败后调用 |
+
+## 使用示例
+
+```html
+<template>
+ <view class="page">
+ <CInfiniteScroll
+ ref="scrollList"
+ :autoInit="true"
+ :onLoadMore="handleLoadMore"
+ >
+ <view class="list-item" v-for="(item, index) in list" :key="index">
+ {{ item.name }}
+ </view>
+ </CInfiniteScroll>
+ </view>
+</template>
+
+<script>
+import { CInfiniteScroll } from '@components/plugins/infiniteScroll';
+import { $fetchCommon } from '@fetchers/FCommon';
+
+export default {
+ components: {
+ CInfiniteScroll
+ },
+ data() {
+ return {
+ list: []
+ }
+ },
+ methods: {
+ handleLoadMore({ current, next, success, fail }) {
+ $fetchCommon.getList({ page: next }).then(res => {
+ // 拼接数据
+ if (current === 0) {
+ this.list = res.list;
+ } else {
+ this.list = this.list.concat(res.list);
+ }
+ success({
+ pageTotal: res.pageTotal
+ });
+ }).catch(() => {
+ fail();
+ });
+ },
+ // 手动刷新列表
+ refreshList() {
+ this.$refs.scrollList.$refresh();
+ }
+ }
+}
+</script>
+```
+
+## 注意事项
+
+1. 组件通过检测滚动位置自动触发加载更多功能
+2. 下拉刷新功能仅在滚动到顶部时可用
+3. 加载状态会自动管理，包括"加载中"和"没有更多了"等提示
\ No newline at end of file
diff --git a/_cursor.ai/plugins.doc/qrcode.doc/CQRCode.doc.md b/_cursor.ai/plugins.doc/qrcode.doc/CQRCode.doc.md
new file mode 100644
index 0000000..888b452
--- /dev/null
+++ b/_cursor.ai/plugins.doc/qrcode.doc/CQRCode.doc.md
@@ -0,0 +1,53 @@
+# 二维码组件
+
+## 组件名称
+
+`CQRCode` - 用于生成和展示二维码的组件
+
+## 组件说明
+
+该组件用于在页面中生成二维码，支持在H5环境下保存二维码图片。
+
+## 使用方法
+
+```html
+<CQRCode
+ content="https://example.com"
+ :size="200"
+ :margin="2"
+ :downloadable="true"
+/>
+```
+
+## 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| ------------ | ------- | --------------------- | ------------------------- |
+| content | String | 'http://www.aisim.cn' | 二维码内容，通常为URL地址 |
+| size | Number | 200 | 二维码尺寸，单位为像素 |
+| margin | Number | 2 | 二维码边距大小 |
+| downloadable | Boolean | false | 是否显示"保存到手机"按钮 |
+
+## 方法说明
+
+组件无对外暴露的方法
+
+## 使用示例
+
+```html
+<!-- 简单用法 -->
+<CQRCode content="https://www.example.com" />
+
+<!-- 带保存按钮的用法 -->
+<CQRCode
+ content="https://www.example.com"
+ :size="300"
+ :margin="4"
+ :downloadable="true"
+/>
+```
+
+## 注意事项
+
+1. 目前在H5环境中支持保存二维码图片到本地
+2. 小程序环境下的保存功能尚未实现
\ No newline at end of file
--
Gitblit v1.9.1