!163 fix: 修复原来动态导入的问题，保留 redirectComponent 配置的灵活性

Merge pull request !163 from dodu/dev-commet

src/packages/components/Icons/Common/index.ts

@@ -1,4 +1,4 @@
-import { IconConfig } from '../Icon/index'
+import { IconConfig } from '../Default/Icon/index'
 import { PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
 
@@ -78,7 +78,7 @@ const iconList = iconNames.map(name => ({
   icon: name,
   dataset: name,
   title: name.replace('uim:', ''),
-  redirectComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+  redirectComponent: `${IconConfig.package}/${IconConfig.category}/${IconConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
 }))
 
 export default iconList

src/packages/components/Icons/Default/Icon/index.ts

@@ -1,13 +1,13 @@
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const IconConfig: ConfigType = {
   key: 'Icon',
   chartKey: 'VIcon',
   conKey: 'VCIcon',
   title: '图标',
-  category: ChatCategoryEnum.COMMON,
-  categoryName: ChatCategoryEnumName.COMMON,
+  category: ChatCategoryEnum.DEFAULT,
+  categoryName: ChatCategoryEnumName.DEFAULT,
   package: PackagesCategoryEnum.ICONS,
   chartFrame: ChartFrameEnum.STATIC,
   image: 'icon.png'

src/packages/components/Icons/MaterialLine/index.ts

@@ -1,4 +1,4 @@
-import { IconConfig } from '../Icon/index'
+import { IconConfig } from '../Default/Icon/index'
 import { PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
 
@@ -39,7 +39,7 @@ const iconList = iconNames.map(name => ({
   icon: name,
   dataset: name,
   title: name.replace('line-md:', ''),
-  redirectComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+  redirectComponent: `${IconConfig.package}/${IconConfig.category}/${IconConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
 }))
 
 export default iconList

src/packages/components/Icons/Weather/index.ts

@@ -1,4 +1,4 @@
-import { IconConfig } from '../Icon/index'
+import { IconConfig } from '../Default/Icon/index'
 import { PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
 
@@ -36,7 +36,7 @@ const iconNames = [
   'wi:night-alt-cloudy-high',
   'wi:night-alt-hail',
   'wi:night-alt-lightning',
-  'wi:umbrella',
+  'wi:umbrella'
 ]
 const iconList = iconNames.map(name => ({
   ...IconConfig,
@@ -47,7 +47,7 @@ const iconList = iconNames.map(name => ({
   icon: name,
   dataset: name,
   title: name.replace('wi:', ''),
-  redirectComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+  redirectComponent: `${IconConfig.package}/${IconConfig.category}/${IconConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
 }))
 
 export default iconList

src/packages/components/Icons/index.d.ts

@@ -1,12 +1,13 @@
 export enum ChatCategoryEnum {
   ML = 'MaterialLine',
   COMMON = 'Common',
-  WEATHER = "WEATHER"
+  WEATHER = 'Weather',
+  DEFAULT = 'Default' // 这个仅用来表示组件分类目录，不要在 index.ts 中导入
 }
 
-
 export enum ChatCategoryEnumName {
   ML = '动画',
   COMMON = '通用',
-  WEATHER = "天气"
+  WEATHER = '天气',
+  DEFAULT = '默认'
 }

src/packages/components/Icons/index.ts

@@ -2,4 +2,4 @@ import MaterialLine from './MaterialLine'
 import Common from './Common'
 import Weather from './Weather'
 
-export const IconList = [...MaterialLine, ...Common, ...Weather]
+export const IconList = [...MaterialLine, ...Weather, ...Common]

src/packages/components/Photos/Private/index.ts

@@ -22,7 +22,7 @@ const userPhotosList: ConfigType[] = getLocalStorage(StoreKey) || []
 const uploadFile = (callback: Function | null = null) => {
   const input = document.createElement('input')
   input.type = 'file'
-  input.accept = 'image/*' // 这里只允许图片类型
+  input.accept = '.png,.jpg,.jpeg,.gif' // 这里只允许部分图片类型
   input.onchange = async () => {
     if (!input.files || !input.files.length) return
     const file = input.files[0]
@@ -53,7 +53,7 @@ const addConfig = {
   chartFrame: ChartFrameEnum.STATIC,
   title: '点击上传图片',
   image: 'upload.png',
-  redirectComponent: './components/Informations/Mores/Image', // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+  redirectComponent: `${ImageConfig.package}/${ImageConfig.category}/${ImageConfig.key}`, // 跳转组件路径规则：packageName/categoryName/componentKey
   disabled: true,
   configEvents: {
     // 点击上传事件
@@ -74,7 +74,7 @@ const addConfig = {
               title: e.fileName,
               image: e.url,
               dataset: e.url,
-              redirectComponent: './components/Informations/Mores/Image' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+              redirectComponent: `${ImageConfig.package}/${ImageConfig.category}/${ImageConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
             }
             userPhotosList.unshift(newPhoto)
             // 存储在本地数据中

src/packages/components/Photos/Share/index.ts

@@ -17,7 +17,7 @@ const photoConfigList = imageList.map(i => ({
   image: i.imageUrl,
   dataset: i.imageUrl,
   title: i.imageName,
-  redirectComponent: './components/Informations/Mores/Image' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+  redirectComponent: `${ImageConfig.package}/${ImageConfig.category}/${ImageConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
 }))
 
 export default photoConfigList

src/packages/index.ts

@@ -31,28 +31,13 @@ export let packagesList: PackagesType = {
  * @param targetData
  */
 export const createComponent = async (targetData: ConfigType) => {
-  const { package: packageName } = targetData
-  if (packageName === PackagesCategoryEnum.ICONS) {
-    return createIconComponent()
-  } else if (packageName === PackagesCategoryEnum.PHOTOS) {
-    return createPhotoComponent()
-  } else {
-    return createDefaultComponent(targetData)
+  const { redirectComponent, category, key } = targetData
+  // redirectComponent 是给图片组件库和图标组件库使用的
+  if (redirectComponent) {
+    const [packageName, categoryName, keyName] = redirectComponent.split('/')
+    const redirectChart = await import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`)
+    return new redirectChart.default()
   }
-}
-
-export const createIconComponent = async () => {
-  const chart = await import(`./components/Icons/Icon/config`)
-  return new chart.default()
-}
-
-export const createPhotoComponent = async () => {
-  const chart = await import(`./components/Informations/Mores/Image/config`)
-  return new chart.default()
-}
-
-export const createDefaultComponent = async (targetData: ConfigType) => {
-  const { category, key } = targetData
   const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`)
   return new chart.default()
 }