知识库文档，增加插件部分

Tevin

2025-03-19 b82f583d8222f8740afa2d1532db93832c4a5274

知识库文档，增加插件部分

 _cursor.ai/plugins.doc/echarts.doc/CECharts.doc.md

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

 _cursor.ai/plugins.doc/filter.doc/CFilter.doc.md

New file
@@ -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中配置对应的选项数据 

 _cursor.ai/plugins.doc/infiniteScroll.doc/CInfiniteScroll.doc.md

New file
@@ -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. 加载状态会自动管理，包括"加载中"和"没有更多了"等提示 

 _cursor.ai/plugins.doc/qrcode.doc/CQRCode.doc.md

New file
@@ -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. 小程序环境下的保存功能尚未实现