# NPM 组件库

## 组件库说明

### 文件夹说明

- `src/cione-comp-lib` 目录仅为调试方便, `非最终代码存放位置`, 后续该文件夹将发布到 NPM 仓库
- 不得在`cione-comp-lib`引用`cione-comp-lib`文件夹外的`代码&组件`
- 引用 NPM 依赖时, 在下方记录使用的插件名称

### 使用外部 NPM

如使用了指定版本, 需要标准对应版本号

- echarts echarts-gl
- swiper 安装
- map-leaflet 地图框架
- xgplayer xgplayer-flv.js xgplayer-hls.js 安装
- DPlayer 视频
- Moment.js 2.24.0 JavaScript 日期处理类库
- flv.js flv 流处理插件 AND DPlayer 配合使用
- hls.js hls 流处理插件 AND DPlayer 配合使用
- tinymce 富文本编辑器插件
- @types/tinymce 富文本编辑器插件 -- ts 依赖
- @tinymce/tinymce-vue 富文本编辑器插件 -- vue 依赖
- prismjs html 代码插件
- @types/prismjs html 代码插件 -- ts 依赖
- vite-plugin-importer html 代码插件 -- vue 依赖
- novnc 远程桌面
- three -- threejs 包
- @types/three -- threejs 的 ts 依赖包
- js-base64
- imagehover.css 鼠标 hover 动画

### 组件包说明

#### 文件夹命名规则

co-${type}-${describe}

以一个普通的 label 组建为例子, 文件夹名为 co-label-std, std 为标准、样品
如 echarts, 可以实例化很多组件的情况, 文件夹名为 co-echarts-collection, collection 为作品集代表复数

`co` 为固定, `label` 为类型, `std` 为描述

#### 每个组件包必须包含文件

- index.ts 组件注册入口, 应当保证组件可以
- index.vue 组件视图入口, 以 `defineComponent` 方式声明导出, `name` 为文件夹名大驼峰

#### 组件包的特殊 props 参数说明

```js
export default defineComponent({
  props: {
    /**
     * 平台传入组件包的通用参数 -- 组件库 tools.ts handleEventCallback 关键对象
     * @param packageCode 组件包编码
     * @param elementId 画布组件id
     * @param events 事件对象
     */
    __dataSource: {
      type: Object as PropType<VueDataSource>
    }
    // 平台传入组件包的 画布组件id -- 已弃用
    dataId: {
      type: String
    }
    // 平台传入组件包的 画布组件id -- 已弃用
    dataKey: {
      type: String
    }
  }
})
```

#### 组件包依赖资源

- 优先使用 NPM 依赖安装导入
- 直接存放在对应组件包文件夹目录下, 避免多个组件包资源交叉, 保证每个组件包可以单独使用

#### 组件包 HTML 元素声明

- 根元素应当是唯一的
- 根元素设定 class 为文件夹名称, 如 <div class="co-image-std"></div>
- 组件其他元素 class 命名规则, 包名去掉`co-`, 拼接 `__`, 如 <div class="co-image-std"><img class="image-std__image" /><span class="image-std__name"></span></div>

### 特定组件说明

#### echarts

后续开发 echarts 实例组件时, 统一使用 dataset 作为数据源, 主要是

- 1.统一数据格式, 优化数据管理
- 2.利于场景编辑器静态数据对接

[dataset 使用教程](https://echarts.apache.org/handbook/zh/concepts/dataset/)

### 组件使用表格特定格式的属性说明

- 图片上传 --- imgSrc
- 视频上传 --- videoSrc
- 文件上传 --- flie
- 文件名称 --- flieName ----- 文件批量上传必备
- 时间选择器 --- time
