OnlineEducation-teacher-front/src/libs/fileOperationPlugins.js

/**
 * 以服务的方式，将对文件的一些操作挂载到 Vue 上
 * @description 各个服务的参数传递查看服务封装对应目录下的 index.js 文件，里面注明了需要传递的参数
 */

import { defineAsyncComponent } from 'vue'

/**
 * 动态引入操作文件的弹窗组件
 */
const importDialog = (path) => {
	return defineAsyncComponent(() => import(`@/views/myResource/file/dialog/${path}/index.js`))
}

/**
 * 服务挂载到 Vue - $openDialog，各个服务的名称为其对应的文件夹的名称
 * @description 例如，创建文件夹功能：服务封装路径 'views/myResource/file/dialog/addFolder' ，则如下：
 * 在 *.vue 文件中，使用 this.$openDialog.addFolder 调用创建文件夹服务
 * 在 *.js 文件中，需要先在文件顶部引入 Vue ，即 import Vue from 'vue' ，然后使用 Vue.property.$openDialog.addFolder 调用创建文件夹服务
 */
const dialogModules = import.meta.glob('@/views/myResource/file/dialog/*/index.js', { eager: true })
const openDialog = Object.keys(dialogModules).reduce((acc, path) => {
	const moduleName = path.split('/').slice(-2)[0]
	acc[moduleName] = dialogModules[path].default
	return acc
}, {})

/**
 * 动态添加操作文件的遮罩或浮层组件
 */
const importBox = (path) => {
	return defineAsyncComponent(() => import(`@/views/myResource/file/box/${path}/index.js`))
}

/**
 * 服务挂载到 Vue - $openBox，各个服务的名称为其对应的文件夹的名称
 * @description 例如，图片预览功能：服务封装路径 'views/myResource/file/box/imgPreview' ，则如下：
 * 在 *.vue 文件中，使用 this.$openBox.imgPreview 调用图片预览服务
 * 在 *.js 文件中，需要先在文件顶部引入 Vue ，即 import Vue from 'vue' ，然后使用 Vue.property.$openBox.imgPreview 调用图片预览服务
 */
const boxModules = import.meta.glob('@/views/myResource/file/box/*/index.js', { eager: true })
const openBox = Object.keys(boxModules).reduce((acc, path) => {
	const moduleName = path.split('/').slice(-2)[0]
	acc[moduleName] = boxModules[path].default
	return acc
}, {})

export default { openDialog, openBox }