From fe1d1a2eea5a7d88a007a47a60858892cc27f8a4 Mon Sep 17 00:00:00 2001 From: Wendao Date: Tue, 17 Oct 2023 17:58:14 +0800 Subject: [PATCH] [add] Upload: support custom imageSize --- .../edit/Upload/components/Image.tsx | 23 ++++ .../edit/Upload/components/Video.tsx | 8 +- .../xgen/components/edit/Upload/index.less | 108 +++++++++++------- .../xgen/components/edit/Upload/index.tsx | 15 ++- packages/xgen/components/edit/Upload/types.ts | 7 +- 5 files changed, 111 insertions(+), 50 deletions(-) create mode 100644 packages/xgen/components/edit/Upload/components/Image.tsx diff --git a/packages/xgen/components/edit/Upload/components/Image.tsx b/packages/xgen/components/edit/Upload/components/Image.tsx new file mode 100644 index 00000000..522d48a3 --- /dev/null +++ b/packages/xgen/components/edit/Upload/components/Image.tsx @@ -0,0 +1,23 @@ +import { getFileSrc } from '@/knife' +import { DeleteOutlined } from '@ant-design/icons' + +import type { IPropsCustomImage } from '../types' + +const Index = (props: IPropsCustomImage) => { + const { file, imageSize, remove } = props + + return ( +
+
+ +
+ +
+ ) +} + +export default window.$app.memo(Index) diff --git a/packages/xgen/components/edit/Upload/components/Video.tsx b/packages/xgen/components/edit/Upload/components/Video.tsx index 9d1ebb0e..f70c0fa9 100644 --- a/packages/xgen/components/edit/Upload/components/Video.tsx +++ b/packages/xgen/components/edit/Upload/components/Video.tsx @@ -1,13 +1,13 @@ -import { DeleteOutlined } from '@ant-design/icons' import { getFileSrc } from '@/knife' +import { DeleteOutlined } from '@ant-design/icons' -import type { IPropsVideo } from '../types' +import type { IPropsCustomRender } from '../types' -const Index = (props: IPropsVideo) => { +const Index = (props: IPropsCustomRender) => { const { file, remove } = props return ( -
+
diff --git a/packages/xgen/components/edit/Upload/index.less b/packages/xgen/components/edit/Upload/index.less index 777e5aa2..db441e08 100644 --- a/packages/xgen/components/edit/Upload/index.less +++ b/packages/xgen/components/edit/Upload/index.less @@ -7,11 +7,33 @@ padding-top: 11px; padding-left: 10px; + &.custom { + @image_size: unset; + @min_image_size: 83px; + + .xgen-upload-select-picture-card { + min-width: @min_image_size; + min-height: @min_image_size; + width: @image_size; + height: @image_size; + } + + .xgen-upload-list-picture-card-container { + min-width: @min_image_size; + min-height: @min_image_size; + width: @image_size; + height: @image_size; + } + } + @image_size: 83px; .xgen-upload-select-picture-card { width: @image_size; height: @image_size; + display: inline-flex; + align-items: center; + justify-content: center; } .xgen-upload-list-picture-card-container { @@ -58,53 +80,53 @@ height: 160px; } } - - .upload_video_wrap { - &:hover { - .icon_delete { - display: flex; - } - } - - .video { - width: 100%; - height: 160px; - border-radius: 6px; - - object-fit: fill; - } - - .icon_delete { - right: -1px; - bottom: -1px; - z-index: 1; - display: none; - width: 27px; - height: 27px; - border-top-left-radius: 6px; - border-bottom-right-radius: 6px; - background-color: white; - color: black; - cursor: pointer; - - &:hover { - background-color: var(--color_danger); - - .icon { - color: white; - } - } - - .icon { - color: var(--color_danger); - font-size: 15px; - } - } - } } } :global { + .upload_custom_wrap { + &:hover { + .icon_delete { + display: flex; + } + } + + .video { + width: 100%; + height: 160px; + border-radius: 6px; + + object-fit: fill; + } + + .icon_delete { + right: -1px; + bottom: -1px; + z-index: 1; + display: none; + width: 27px; + height: 27px; + border-top-left-radius: 6px; + border-bottom-right-radius: 6px; + background-color: white; + color: black; + cursor: pointer; + + &:hover { + background-color: var(--color_danger); + + .icon { + color: white; + } + } + + .icon { + color: var(--color_danger); + font-size: 15px; + } + } + } + .xgen-upload.xgen-upload-select-picture-card { margin-right: 11px; margin-bottom: 11px; diff --git a/packages/xgen/components/edit/Upload/index.tsx b/packages/xgen/components/edit/Upload/index.tsx index 5bfe106b..39cbaf7c 100644 --- a/packages/xgen/components/edit/Upload/index.tsx +++ b/packages/xgen/components/edit/Upload/index.tsx @@ -6,6 +6,7 @@ import { useMemo } from 'react' import { Item } from '@/components' import { getToken } from '@/knife' +import Image from './components/Image' import UploadBtn from './components/UploadBtn' import filemap from './filemap' import useList from './hooks/useList' @@ -17,7 +18,7 @@ import type { UploadProps } from 'antd' import type { IProps, CustomProps, IPropsUploadBtn } from './types' const Custom = window.$app.memo((props: CustomProps) => { - const { api, filetype, maxCount, desc, onChange: trigger } = props + const { api, filetype, maxCount, desc, imageSize, onChange: trigger } = props const { list, setList } = useList(props.value) const visible_btn = useVisibleBtn(list.length, maxCount || 1) @@ -43,7 +44,11 @@ const Custom = window.$app.memo((props: CustomProps) => { ...props, name: 'file', listType: filemap[filetype].listType, - className: clsx(['form_item_upload_wrap', filemap[filetype].className]), + className: clsx([ + 'form_item_upload_wrap', + filemap[filetype].className, + filetype === 'image' && imageSize && 'custom' + ]), action, headers: { authorization: getToken() }, fileList: list, @@ -55,6 +60,12 @@ const Custom = window.$app.memo((props: CustomProps) => { props_upload['itemRender'] = filemap[filetype].render } + if (filetype === 'image' && imageSize) { + props_upload['itemRender'] = (_, file, _fileList, { remove }) => ( + + ) + } + const props_upload_btn: IPropsUploadBtn = { length: list.length, filetype, diff --git a/packages/xgen/components/edit/Upload/types.ts b/packages/xgen/components/edit/Upload/types.ts index f7eca358..28327fd1 100644 --- a/packages/xgen/components/edit/Upload/types.ts +++ b/packages/xgen/components/edit/Upload/types.ts @@ -6,6 +6,7 @@ interface CommonProps { value: Array filetype: 'image' | 'file' | 'video' desc?: string + imageSize?: { width: string; height: string } } export interface IProps extends UploadProps, Component.PropsEditComponent, CommonProps { @@ -25,11 +26,15 @@ export interface FileType { } } -export interface IPropsVideo { +export interface IPropsCustomRender { file: UploadFile remove: () => void } +export interface IPropsCustomImage extends IPropsCustomRender { + imageSize: CommonProps['imageSize'] +} + export interface IPropsUploadBtn { length: number filetype: IProps['filetype']