feat: 新增图片和图标

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]