mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-08-18 07:15:52 +08:00
file icon
This commit is contained in:
parent
80f167ca02
commit
49972939a9
@ -18,62 +18,63 @@ import type { FileAppearanceType } from './types'
|
|||||||
import cn from '@/utils/classnames'
|
import cn from '@/utils/classnames'
|
||||||
|
|
||||||
const FILE_TYPE_ICON_MAP = {
|
const FILE_TYPE_ICON_MAP = {
|
||||||
[FileAppearanceTypeEnum.PDF]: {
|
[FileAppearanceTypeEnum.pdf]: {
|
||||||
component: RiFilePdf2Fill,
|
component: RiFilePdf2Fill,
|
||||||
color: 'text-[#EA3434]',
|
color: 'text-[#EA3434]',
|
||||||
},
|
},
|
||||||
[FileAppearanceTypeEnum.IMAGE]: {
|
[FileAppearanceTypeEnum.image]: {
|
||||||
component: RiFileImageFill,
|
component: RiFileImageFill,
|
||||||
color: 'text-[#00B2EA]',
|
color: 'text-[#00B2EA]',
|
||||||
},
|
},
|
||||||
[FileAppearanceTypeEnum.VIDEO]: {
|
[FileAppearanceTypeEnum.video]: {
|
||||||
component: RiFileVideoFill,
|
component: RiFileVideoFill,
|
||||||
color: 'text-[#844FDA]',
|
color: 'text-[#844FDA]',
|
||||||
},
|
},
|
||||||
[FileAppearanceTypeEnum.AUDIO]: {
|
[FileAppearanceTypeEnum.audio]: {
|
||||||
component: RiFileMusicFill,
|
component: RiFileMusicFill,
|
||||||
color: 'text-[#FF3093]',
|
color: 'text-[#FF3093]',
|
||||||
},
|
},
|
||||||
[FileAppearanceTypeEnum.DOCUMENT]: {
|
[FileAppearanceTypeEnum.document]: {
|
||||||
component: RiFileTextFill,
|
component: RiFileTextFill,
|
||||||
color: 'text-[#6F8BB5]',
|
color: 'text-[#6F8BB5]',
|
||||||
},
|
},
|
||||||
[FileAppearanceTypeEnum.CODE]: {
|
[FileAppearanceTypeEnum.code]: {
|
||||||
component: RiFileCodeFill,
|
component: RiFileCodeFill,
|
||||||
color: 'text-[#BCC0D1]',
|
color: 'text-[#BCC0D1]',
|
||||||
},
|
},
|
||||||
[FileAppearanceTypeEnum.MARKDOWN]: {
|
[FileAppearanceTypeEnum.markdown]: {
|
||||||
component: RiMarkdownFill,
|
component: RiMarkdownFill,
|
||||||
color: 'text-[#309BEC]',
|
color: 'text-[#309BEC]',
|
||||||
},
|
},
|
||||||
[FileAppearanceTypeEnum.OTHER]: {
|
[FileAppearanceTypeEnum.custom]: {
|
||||||
component: RiFile3Fill,
|
component: RiFile3Fill,
|
||||||
color: 'text-[#BCC0D1]',
|
color: 'text-[#BCC0D1]',
|
||||||
},
|
},
|
||||||
[FileAppearanceTypeEnum.EXCEL]: {
|
[FileAppearanceTypeEnum.excel]: {
|
||||||
component: RiFileExcelFill,
|
component: RiFileExcelFill,
|
||||||
color: 'text-[#01AC49]',
|
color: 'text-[#01AC49]',
|
||||||
},
|
},
|
||||||
[FileAppearanceTypeEnum.WORD]: {
|
[FileAppearanceTypeEnum.word]: {
|
||||||
component: RiFileWordFill,
|
component: RiFileWordFill,
|
||||||
color: 'text-[#2684FF]',
|
color: 'text-[#2684FF]',
|
||||||
},
|
},
|
||||||
[FileAppearanceTypeEnum.PPT]: {
|
[FileAppearanceTypeEnum.ppt]: {
|
||||||
component: RiFilePpt2Fill,
|
component: RiFilePpt2Fill,
|
||||||
color: 'text-[#FF650F]',
|
color: 'text-[#FF650F]',
|
||||||
},
|
},
|
||||||
[FileAppearanceTypeEnum.GIF]: {
|
[FileAppearanceTypeEnum.gif]: {
|
||||||
component: RiFileGifFill,
|
component: RiFileGifFill,
|
||||||
color: 'text-[#00B2EA]',
|
color: 'text-[#00B2EA]',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
type FileTypeIconProps = {
|
type FileTypeIconProps = {
|
||||||
type: FileAppearanceType
|
type: FileAppearanceType
|
||||||
size?: 'sm' | 'lg'
|
size?: 'sm' | 'lg' | 'md'
|
||||||
className?: string
|
className?: string
|
||||||
}
|
}
|
||||||
const SizeMap = {
|
const SizeMap = {
|
||||||
sm: 'w-4 h-4',
|
sm: 'w-4 h-4',
|
||||||
|
md: 'w-5 h-5',
|
||||||
lg: 'w-6 h-6',
|
lg: 'w-6 h-6',
|
||||||
}
|
}
|
||||||
const FileTypeIcon = ({
|
const FileTypeIcon = ({
|
||||||
|
@ -1,18 +1,18 @@
|
|||||||
import type { TransferMethod } from '@/types/app'
|
import type { TransferMethod } from '@/types/app'
|
||||||
|
|
||||||
export enum FileAppearanceTypeEnum {
|
export enum FileAppearanceTypeEnum {
|
||||||
IMAGE = 'IMAGE',
|
image = 'image',
|
||||||
VIDEO = 'VIDEO',
|
video = 'video',
|
||||||
AUDIO = 'AUDIO',
|
audio = 'audio',
|
||||||
DOCUMENT = 'DOCUMENT',
|
document = 'document',
|
||||||
CODE = 'CODE',
|
code = 'code',
|
||||||
PDF = 'PDF',
|
pdf = 'pdf',
|
||||||
MARKDOWN = 'MARKDOWN',
|
markdown = 'markdown',
|
||||||
EXCEL = 'EXCEL',
|
excel = 'excel',
|
||||||
WORD = 'WORD',
|
word = 'word',
|
||||||
PPT = 'PPT',
|
ppt = 'ppt',
|
||||||
GIF = 'GIF',
|
gif = 'gif',
|
||||||
OTHER = 'OTHER',
|
custom = 'custom',
|
||||||
}
|
}
|
||||||
|
|
||||||
export type FileAppearanceType = keyof typeof FileAppearanceTypeEnum
|
export type FileAppearanceType = keyof typeof FileAppearanceTypeEnum
|
||||||
|
@ -7,6 +7,7 @@ import cn from '@/utils/classnames'
|
|||||||
import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
|
import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
|
||||||
import TagInput from '@/app/components/base/tag-input'
|
import TagInput from '@/app/components/base/tag-input'
|
||||||
import Checkbox from '@/app/components/base/checkbox'
|
import Checkbox from '@/app/components/base/checkbox'
|
||||||
|
import { FileTypeIcon } from '@/app/components/base/file-uploader'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
type: SupportUploadFileTypes.image | SupportUploadFileTypes.document | SupportUploadFileTypes.audio | SupportUploadFileTypes.video | SupportUploadFileTypes.custom
|
type: SupportUploadFileTypes.image | SupportUploadFileTypes.document | SupportUploadFileTypes.audio | SupportUploadFileTypes.video | SupportUploadFileTypes.custom
|
||||||
@ -45,7 +46,7 @@ const FileTypeItem: FC<Props> = ({
|
|||||||
? (
|
? (
|
||||||
<div>
|
<div>
|
||||||
<div className='flex items-center p-3 pb-2 border-b border-divider-subtle'>
|
<div className='flex items-center p-3 pb-2 border-b border-divider-subtle'>
|
||||||
<span className='shrink-0 w-4 h-4 bg-[#00B2EA]'></span>
|
<FileTypeIcon className='shrink-0' type={type} size='md' />
|
||||||
<div className='mx-2 grow text-text-primary system-sm-medium'>{t(`appDebug.variableConfig.file.${type}.name`)}</div>
|
<div className='mx-2 grow text-text-primary system-sm-medium'>{t(`appDebug.variableConfig.file.${type}.name`)}</div>
|
||||||
<Checkbox className='shrink-0' checked={selected} />
|
<Checkbox className='shrink-0' checked={selected} />
|
||||||
</div>
|
</div>
|
||||||
@ -60,8 +61,7 @@ const FileTypeItem: FC<Props> = ({
|
|||||||
)
|
)
|
||||||
: (
|
: (
|
||||||
<div className='flex items-center'>
|
<div className='flex items-center'>
|
||||||
{/* TODO: Wait File type icon */}
|
<FileTypeIcon className='shrink-0' type={type} size='md' />
|
||||||
<span className='shrink-0 w-4 h-4 bg-[#00B2EA]'></span>
|
|
||||||
<div className='mx-2 grow'>
|
<div className='mx-2 grow'>
|
||||||
<div className='text-text-primary system-sm-medium'>{t(`appDebug.variableConfig.file.${type}.name`)}</div>
|
<div className='text-text-primary system-sm-medium'>{t(`appDebug.variableConfig.file.${type}.name`)}</div>
|
||||||
<div className='mt-1 text-text-tertiary system-2xs-regular-uppercase'>{type !== SupportUploadFileTypes.custom ? FILE_EXTS[type].join(', ') : t('appDebug.variableConfig.file.custom.description')}</div>
|
<div className='mt-1 text-text-tertiary system-2xs-regular-uppercase'>{type !== SupportUploadFileTypes.custom ? FILE_EXTS[type].join(', ') : t('appDebug.variableConfig.file.custom.description')}</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user