github/go-view
4
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2026-04-23 00:00:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增图片和图标

Browse Source
This commit is contained in:
奔跑的面条
2023-05-23 20:55:24 +08:00
parent f0db75f623
commit e52b5ef914
28 changed files with 6807 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/packages/components/Icons/Unicons/index.ts → src/packages/components/Icons/Common/index.ts
+3 -3
View File
@@ -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
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
+1 -2
View File
@@ -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
Vendored
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
-67
View File
@@ -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
+86
View File
@@ -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
+3 -1
View File
@@ -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
Vendored
+3 -3
View File
@@ -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
+2 -2
View File
@@ -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]