file icon

This commit is contained in:
StyleZhang 2024-09-19 11:06:38 +08:00
parent 80f167ca02
commit 49972939a9
3 changed files with 29 additions and 28 deletions

View File

@ -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 = ({

View File

@ -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

View File

@ -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>