feat: 新增图片和图标

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

@@ -71,14 +71,14 @@ const iconNames = [
 ]
 const iconList = iconNames.map(name => ({
   ...IconConfig,
-  category: ChatCategoryEnum.UNICONS,
-  categoryName: ChatCategoryEnumName.UNICONS,
+  category: ChatCategoryEnum.COMMON,
+  categoryName: ChatCategoryEnumName.COMMON,
   package: PackagesCategoryEnum.ICONS,
   image: name,
   icon: name,
   dataset: name,
   title: name.replace('uim:', ''),
-  virtualComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+  redirectComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
 }))
 
 export default iconList

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

@@ -6,8 +6,8 @@ export const IconConfig: ConfigType = {
   chartKey: 'VIcon',
   conKey: 'VCIcon',
   title: '图标',
-  category: ChatCategoryEnum.UNICONS,
-  categoryName: ChatCategoryEnumName.UNICONS,
+  category: ChatCategoryEnum.COMMON,
+  categoryName: ChatCategoryEnumName.COMMON,
   package: PackagesCategoryEnum.ICONS,
   chartFrame: ChartFrameEnum.COMMON,
   image: 'icon.png'

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

@@ -39,7 +39,7 @@ const iconList = iconNames.map(name => ({
   icon: name,
   dataset: name,
   title: name.replace('line-md:', ''),
-  virtualComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+  redirectComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
 }))
 
 export default iconList

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

@@ -36,7 +36,6 @@ const iconNames = [
   'wi:night-alt-cloudy-high',
   'wi:night-alt-hail',
   'wi:night-alt-lightning',
-  'wi:night-alt-lightning',
   'wi:umbrella',
 ]
 const iconList = iconNames.map(name => ({
@@ -48,7 +47,7 @@ const iconList = iconNames.map(name => ({
   icon: name,
   dataset: name,
   title: name.replace('wi:', ''),
-  virtualComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+  redirectComponent: './components/Icons/Icon' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
 }))
 
 export default iconList

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

@@ -1,12 +1,12 @@
 export enum ChatCategoryEnum {
   ML = 'MaterialLine',
-  UNICONS = 'Unicons',
+  COMMON = 'Common',
   WEATHER = "WEATHER"
 }
 
 
 export enum ChatCategoryEnumName {
   ML = '动画',
-  UNICONS = '通用',
+  COMMON = '通用',
   WEATHER = "天气"
 }

src/packages/components/Icons/index.ts

@@ -1,5 +1,5 @@
 import MaterialLine from './MaterialLine'
-import Unicons from './Unicons'
+import Common from './Common'
 import Weather from './Weather'
 
-export const IconList = [...MaterialLine, ...Unicons, ...Weather]
+export const IconList = [...MaterialLine, ...Common, ...Weather]

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

@@ -1,67 +0,0 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
-import { ImageConfig } from '@/packages/components/Informations/Mores/Image/index'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
-import { setLocalStorage, getLocalStorage } from '@/utils'
-import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
-import { StorageEnum } from '@/enums/storageEnum'
-
-const StoreKey = StorageEnum.GO_USER_MEDIA_PHOTOS
-
-/**
- * 上传完成事件类型
- */
-type UploadCompletedEventType = {
-  fileName: string
-  url: string
-}
-
-const userPhotosList: ConfigType[] = getLocalStorage(StoreKey) || []
-
-const uploadFile = (callback: Function | null = null) => {
-  const input = document.createElement('input')
-  input.type = 'file'
-  input.accept = 'image/*' // 这里只允许图片类型
-  input.onchange = async () => {
-    if (!input.files || !input.files.length) return
-    const file = input.files[0]
-    const reader = new FileReader()
-    reader.onload = () => {
-      const eventObj: UploadCompletedEventType = { fileName: file.name, url: reader.result as string }
-      callback && callback(eventObj)
-    }
-    reader.readAsDataURL(file)
-  }
-  input.click()
-}
-
-const addConfig = {
-  ...ImageConfig,
-  category: ChatCategoryEnum.MY,
-  categoryName: ChatCategoryEnumName.MY,
-  package: PackagesCategoryEnum.PHOTOS,
-  title: '上传新项',
-  image: 'upload.png',
-  virtualComponent: './components/Informations/Mores/Image', // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
-  disabled: true,
-  clickHandle: (photoConfig: ConfigType) => {
-    uploadFile((e: UploadCompletedEventType) => {
-      // 和上传组件一样配置，更换标题，图片，预设数据
-      const newPhoto = {
-        ...ImageConfig,
-        category: ChatCategoryEnum.MY,
-        categoryName: ChatCategoryEnumName.MY,
-        package: PackagesCategoryEnum.PHOTOS,
-        title: e.fileName,
-        image: e.url,
-        dataset: e.url,
-        virtualComponent: './components/Informations/Mores/Image' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
-      }
-      userPhotosList.push(newPhoto)
-      setLocalStorage(StoreKey, userPhotosList)
-      const { getPackagesList } = usePackagesStore()
-      getPackagesList.Photos.splice(getPackagesList.Photos.length - 1, 0, newPhoto) // 插入到上传按钮前的位置
-    })
-  }
-}
-
-export default [...userPhotosList, addConfig]

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

@@ -0,0 +1,86 @@
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ImageConfig } from '@/packages/components/Informations/Mores/Image/index'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
+import { setLocalStorage, getLocalStorage, goDialog } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+import { FileTypeEnum } from '@/enums/fileTypeEnum'
+import { backgroundImageSize } from '@/settings/designSetting'
+import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
+
+const StoreKey = StorageEnum.GO_USER_MEDIA_PHOTOS
+
+/**
+ * 上传完成事件类型
+ */
+type UploadCompletedEventType = {
+  fileName: string
+  url: string
+}
+
+const userPhotosList: ConfigType[] = getLocalStorage(StoreKey) || []
+
+const uploadFile = (callback: Function | null = null) => {
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.accept = 'image/*' // 这里只允许图片类型
+  input.onchange = async () => {
+    if (!input.files || !input.files.length) return
+    const file = input.files[0]
+    const { name, size, type } = file
+    if (size > 1024 * 1024 * backgroundImageSize) {
+      window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
+      return false
+    }
+    if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
+      window['$message'].warning('文件格式不符合，请重新上传！')
+      return false
+    }
+    const reader = new FileReader()
+    reader.onload = () => {
+      const eventObj: UploadCompletedEventType = { fileName: name, url: reader.result as string }
+      callback && callback(eventObj)
+    }
+    reader.readAsDataURL(file)
+  }
+  input.click()
+}
+
+const addConfig = {
+  ...ImageConfig,
+  category: ChatCategoryEnum.PRIVATE,
+  categoryName: ChatCategoryEnumName.PRIVATE,
+  package: PackagesCategoryEnum.PHOTOS,
+  title: '点击上传图片',
+  image: 'upload.png',
+  redirectComponent: './components/Informations/Mores/Image', // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+  disabled: true,
+  clickHandle: (photoConfig: ConfigType) => {
+    goDialog({
+      message: `图片需小于 ${backgroundImageSize}M 且只暂存在浏览器中，请自行对接后端接口！`,
+      transformOrigin: 'center',
+      onPositiveCallback: () => {
+        uploadFile((e: UploadCompletedEventType) => {
+          // 和上传组件一样配置，更换标题，图片，预设数据
+          const packagesStore = usePackagesStore()
+          const newPhoto = {
+            ...ImageConfig,
+            category: ChatCategoryEnum.PRIVATE,
+            categoryName: ChatCategoryEnumName.PRIVATE,
+            package: PackagesCategoryEnum.PHOTOS,
+            title: e.fileName,
+            image: e.url,
+            dataset: e.url,
+            redirectComponent: './components/Informations/Mores/Image' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+          }
+          userPhotosList.unshift(newPhoto)
+          // 存储在本地数据中
+          setLocalStorage(StoreKey, userPhotosList)
+          // 插入到上传按钮前的位置
+          packagesStore.addPhotos(newPhoto, 1)
+        })
+      }
+    })
+  }
+}
+
+export default [addConfig, ...userPhotosList]

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

@@ -2,10 +2,12 @@ import { PackagesCategoryEnum } from '@/packages/index.d'
 import { ImageConfig } from '@/packages/components/Informations/Mores/Image/index'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
 
+// 远程共享库（调接口获取图像列表）
 const imageList = [
   { imageName: 'carousel1', imageUrl: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg' },
   { imageName: 'carousel2', imageUrl: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg' }
 ]
+
 const photoConfigList = imageList.map(i => ({
   ...ImageConfig,
   category: ChatCategoryEnum.SHARE,
@@ -14,7 +16,7 @@ const photoConfigList = imageList.map(i => ({
   image: i.imageUrl,
   dataset: i.imageUrl,
   title: i.imageName,
-  virtualComponent: './components/Informations/Mores/Image' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
+  redirectComponent: './components/Informations/Mores/Image' // 虚拟组件路径，尾部不跟 ‘/’，相对于 /packages/index.ts 文件的位置
 }))
 
 export default photoConfigList

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

@@ -1,9 +1,9 @@
 export enum ChatCategoryEnum {
-  MY = 'My',
+  PRIVATE = 'Private',
   SHARE = 'Share'
 }
 
 export enum ChatCategoryEnumName {
-  MY = '我的',
-  SHARE = '共享'
+  PRIVATE = '私有图',
+  SHARE = '共享图'
 }

src/packages/components/Photos/index.ts

@@ -1,4 +1,4 @@
-import My from './My'
+import Private from './Private'
 import Share from './Share'
 
-export const PhotoList = [...Share, ...My]
+export const PhotoList = [...Private, ...Share]

src/packages/index.d.ts

@@ -15,20 +15,34 @@ export enum ChartFrameEnum {
 
 // 组件配置
 export type ConfigType = {
+  // 组件 key
   key: string
+  // 画布组件 key
   chartKey: string
+  // 右侧设置面板组件 key
   conKey: string
+  // 标题
   title: string
+  // 分类
   category: string
+  // 分类名称
   categoryName: string
+  // 所属包
   package: string
+  // 归类
   chartFrame?: ChartFrameEnum
+  // 预览图
   image: string
-  virtualComponent?: string // 虚拟组件Path，指定后创建该组件时，从指定路径创建
-  dataset?: any // 组件预设的 dataset 值
-  disabled?: boolean // 禁用的
-  clickHandle?: Function // 单击事件
-  icon?: string // 图标
+  // 从指定路径创建创建该组件
+  redirectComponent?: string
+  // 组件预设的 dataset 值(图片/图标)
+  dataset?: any
+  // 禁用 拖拽或双击生成组件
+  disabled?: boolean
+  // 图标
+  icon?: string
+  // 自定义单击事件
+  clickHandle?: Function
 }
 
 // 数据请求

src/packages/index.ts

@@ -21,9 +21,9 @@ export let packagesList: PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ChartList,
   [PackagesCategoryEnum.INFORMATIONS]: InformationList,
   [PackagesCategoryEnum.TABLES]: TableList,
+  [PackagesCategoryEnum.DECORATES]: DecorateList,
   [PackagesCategoryEnum.PHOTOS]: PhotoList,
-  [PackagesCategoryEnum.ICONS]: IconList,
-  [PackagesCategoryEnum.DECORATES]: DecorateList
+  [PackagesCategoryEnum.ICONS]: IconList
 }
 
 /**
@@ -31,9 +31,10 @@ export let packagesList: PackagesType = {
  * @param targetData
  */
 export const createComponent = async (targetData: ConfigType) => {
-  const { virtualComponent, category, key } = targetData
-  const componentPath = virtualComponent
-    ? `${virtualComponent}/config.ts`
+  const { redirectComponent, category, key } = targetData
+  // redirectComponent 是给图片组件库和图标组件库使用的
+  const componentPath = redirectComponent
+    ? `${redirectComponent}/config.ts`
     : `./components/${targetData.package}/${category}/${key}/config.ts`
   const chart = await import(/* @vite-ignore */ componentPath)
   return new chart.default()
@@ -78,8 +79,8 @@ export const fetchConfigComponent = (dropData: ConfigType) => {
  */
 export const fetchImages = async (targetData?: ConfigType) => {
   if (!targetData) return ''
-  // 判断图片是否为 url，是则直接返回该 url
-  if (/^(?:https?):\/\/[^\s/.?#].[^\s]*/.test(targetData.image)) return targetData.image
+  // 正则判断图片是否为 url，是则直接返回该 url
+  if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(targetData.image)) return targetData.image
   // 新数据动态处理
   const { image, package: targetDataPackage } = targetData
   // 兼容旧数据