# EasyAI 远程组件项目 ## 项目介绍 本项目支持以插件的方式为EasyAI平台提供远程组件服务,以实现对EasyAI平台前端组件库进行扩展,实现自定义组件以满足业务需求。 ## 功能描述 - 支持扩展绘画组件库 - 支持扩展首页组件库(即将上线) ## 组件开发 ### 项目启动 1. 安装依赖 ```bash pnpm install ``` 2. 启动项目 ```bash pnpm dev ``` 3. 访问地址:http://localhost:3201 4. 组件目录:components 5. 维护组件信息目录:manifest 6. 组件调试入口: app.vue 7. EasyAI平台,全局注入的数据和方法: types/common.ts 1. 注入的素材库数据:GlobalInjectMaterials - mock数据:composables/mock/material.data.ts - 在组件中使用:components/RecommendedImages.vue ```ts const { materials: materialList } = inject(GlobalInjectKeyConst.AllMaterials, { materials: ref([]), }) || {}; ``` 2. 注入的上传文件方法:GlobalInjectUploadFileToOSS - 在组件中使用:components/drawPanne/ImageUpload.vue ```ts const { useUtilsUploadFileToOSS } = inject( GlobalInjectKeyConst.UploadFileToOSS, { useUtilsUploadFileToOSS: async (file: File | Blob, filename?: string) => "", }, ); ``` ## 示例组件 (图片上传组件) 1. 组件位置:components/drawPanne/ImageUpload.vue 正常的nuxt(vue3)项目组件开发,直接在components文件夹下创建即可 2. 维护组件信息文件:manifest/ImageUpload.ts 需要参照IComponentMateInfo类型约束文件进行定义 ```typescript export default { name: "DrawImageUpload", // 组件名称 path: "./components/drawPanne/ImageUpload.vue", // 组件路径 scenes: ComponentSceneConst.DrawPanne, // 组件场景 description: "A image upload component", // 组件描述 data: { // 组件数据 paramName: "upload_image_path", // 参数名称 label: "图片上传", // 组件标签 icon: "icon-park:upload-picture", // 组件图标 group: ComponentGroupConst.IMAGE, // 组件分组 isRefComponent: true, // 是否为引用组件 (引用组件,在执行绘画的时候会执行参数赋值操作) }, } satisfies IComponentMateInfo; ``` 3. 组件调试入口:app.vue ```text ``` ## 部署 1. 打包 ```bash pnpm build ``` 2. 启动项目 ```bash pnpm serve ``` 3. 访问 ```bash http://localhost:3200 ``` ## 使用 - 维护 EasyAI 远程组件项目 ![远程组件管理](remote-ui-kit/docs/images/RemoteComponentManage.png)