dify
This commit is contained in:
@@ -0,0 +1,70 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import {
|
||||
useCSVDownloader,
|
||||
} from 'react-papaparse'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Download02 as DownloadIcon } from '@/app/components/base/icons/src/vender/solid/general'
|
||||
|
||||
export type ICSVDownloadProps = {
|
||||
vars: { name: string }[]
|
||||
}
|
||||
|
||||
const CSVDownload: FC<ICSVDownloadProps> = ({
|
||||
vars,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { CSVDownloader, Type } = useCSVDownloader()
|
||||
const addQueryContentVars = [...vars]
|
||||
const template = (() => {
|
||||
const res: Record<string, string> = {}
|
||||
addQueryContentVars.forEach((item) => {
|
||||
res[item.name] = ''
|
||||
})
|
||||
return res
|
||||
})()
|
||||
|
||||
return (
|
||||
<div className='mt-6'>
|
||||
<div className='system-sm-medium text-text-primary'>{t('share.generation.csvStructureTitle')}</div>
|
||||
<div className='mt-2 max-h-[500px] overflow-auto'>
|
||||
<table className='w-full table-fixed border-separate border-spacing-0 rounded-lg border border-divider-regular text-xs'>
|
||||
<thead className='text-text-tertiary'>
|
||||
<tr>
|
||||
{addQueryContentVars.map((item, i) => (
|
||||
<td key={i} className='h-9 border-b border-divider-regular pl-3 pr-2'>{item.name}</td>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className='text-text-secondary'>
|
||||
<tr>
|
||||
{addQueryContentVars.map((item, i) => (
|
||||
<td key={i} className='h-9 pl-4'>{item.name} {t('share.generation.field')}</td>
|
||||
))}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<CSVDownloader
|
||||
className="mt-2 block cursor-pointer"
|
||||
type={Type.Link}
|
||||
filename={'template'}
|
||||
bom={true}
|
||||
config={{
|
||||
// delimiter: ';',
|
||||
}}
|
||||
data={[
|
||||
template,
|
||||
]}
|
||||
>
|
||||
<div className='system-xs-medium flex h-[18px] items-center space-x-1 text-text-accent'>
|
||||
<DownloadIcon className='h-3 w-3' />
|
||||
<span>{t('share.generation.downloadTemplate')}</span>
|
||||
</div>
|
||||
</CSVDownloader>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
export default React.memo(CSVDownload)
|
||||
@@ -0,0 +1,73 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
useCSVReader,
|
||||
} from 'react-papaparse'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import cn from '@/utils/classnames'
|
||||
import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
|
||||
|
||||
export type Props = {
|
||||
onParsed: (data: string[][]) => void
|
||||
}
|
||||
|
||||
const CSVReader: FC<Props> = ({
|
||||
onParsed,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { CSVReader } = useCSVReader()
|
||||
const [zoneHover, setZoneHover] = useState(false)
|
||||
return (
|
||||
<CSVReader
|
||||
onUploadAccepted={(results: any) => {
|
||||
onParsed(results.data)
|
||||
setZoneHover(false)
|
||||
}}
|
||||
onDragOver={(event: DragEvent) => {
|
||||
event.preventDefault()
|
||||
setZoneHover(true)
|
||||
}}
|
||||
onDragLeave={(event: DragEvent) => {
|
||||
event.preventDefault()
|
||||
setZoneHover(false)
|
||||
}}
|
||||
>
|
||||
{({
|
||||
getRootProps,
|
||||
acceptedFile,
|
||||
}: any) => (
|
||||
<>
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={cn(
|
||||
'system-sm-regular flex h-20 items-center rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg',
|
||||
acceptedFile && 'border-solid border-components-panel-border bg-components-panel-on-panel-item-bg px-6 hover:border-components-panel-bg-blur hover:bg-components-panel-on-panel-item-bg-hover',
|
||||
zoneHover && 'border border-components-dropzone-border-accent bg-components-dropzone-bg-accent',
|
||||
)}
|
||||
>
|
||||
{
|
||||
acceptedFile
|
||||
? (
|
||||
<div className='flex w-full items-center space-x-2'>
|
||||
<CSVIcon className="shrink-0" />
|
||||
<div className='flex w-0 grow'>
|
||||
<span className='max-w-[calc(100%_-_30px)] truncate text-text-secondary'>{acceptedFile.name.replace(/.csv$/, '')}</span>
|
||||
<span className='shrink-0 text-text-tertiary'>.csv</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<div className='flex w-full items-center justify-center space-x-2'>
|
||||
<CSVIcon className="shrink-0" />
|
||||
<div className='text-text-tertiary'>{t('share.generation.csvUploadTitle')}<span className='cursor-pointer text-text-accent'>{t('share.generation.browse')}</span></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CSVReader>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(CSVReader)
|
||||
@@ -0,0 +1,59 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
RiLoader2Line,
|
||||
RiPlayLargeLine,
|
||||
} from '@remixicon/react'
|
||||
import CSVReader from './csv-reader'
|
||||
import CSVDownload from './csv-download'
|
||||
import Button from '@/app/components/base/button'
|
||||
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
|
||||
import cn from '@/utils/classnames'
|
||||
export type IRunBatchProps = {
|
||||
vars: { name: string }[]
|
||||
onSend: (data: string[][]) => void
|
||||
isAllFinished: boolean
|
||||
}
|
||||
|
||||
const RunBatch: FC<IRunBatchProps> = ({
|
||||
vars,
|
||||
onSend,
|
||||
isAllFinished,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const media = useBreakpoints()
|
||||
const isPC = media === MediaType.pc
|
||||
|
||||
const [csvData, setCsvData] = React.useState<string[][]>([])
|
||||
const [isParsed, setIsParsed] = React.useState(false)
|
||||
const handleParsed = (data: string[][]) => {
|
||||
setCsvData(data)
|
||||
// console.log(data)
|
||||
setIsParsed(true)
|
||||
}
|
||||
|
||||
const handleSend = () => {
|
||||
onSend(csvData)
|
||||
}
|
||||
const Icon = isAllFinished ? RiPlayLargeLine : RiLoader2Line
|
||||
return (
|
||||
<div className='pt-4'>
|
||||
<CSVReader onParsed={handleParsed} />
|
||||
<CSVDownload vars={vars} />
|
||||
<div className='flex justify-end'>
|
||||
<Button
|
||||
variant="primary"
|
||||
className={cn('mt-4 pl-3 pr-4', !isPC && 'grow')}
|
||||
onClick={handleSend}
|
||||
disabled={!isParsed || !isAllFinished}
|
||||
>
|
||||
<Icon className={cn(!isAllFinished && 'animate-spin', 'mr-1 h-4 w-4 shrink-0')} aria-hidden="true" />
|
||||
<span className='text-[13px] uppercase'>{t('share.generation.run')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(RunBatch)
|
||||
@@ -0,0 +1,50 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { RiDownloadLine } from '@remixicon/react'
|
||||
import {
|
||||
useCSVDownloader,
|
||||
} from 'react-papaparse'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import ActionButton from '@/app/components/base/action-button'
|
||||
import Button from '@/app/components/base/button'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
export type IResDownloadProps = {
|
||||
isMobile: boolean
|
||||
values: Record<string, string>[]
|
||||
}
|
||||
|
||||
const ResDownload: FC<IResDownloadProps> = ({
|
||||
isMobile,
|
||||
values,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { CSVDownloader, Type } = useCSVDownloader()
|
||||
|
||||
return (
|
||||
<CSVDownloader
|
||||
className="block cursor-pointer"
|
||||
type={Type.Link}
|
||||
filename={'result'}
|
||||
bom={true}
|
||||
config={{
|
||||
// delimiter: ';',
|
||||
}}
|
||||
data={values}
|
||||
>
|
||||
{isMobile && (
|
||||
<ActionButton>
|
||||
<RiDownloadLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
{!isMobile && (
|
||||
<Button className={cn('space-x-1')}>
|
||||
<RiDownloadLine className='h-4 w-4' />
|
||||
<span>{t('common.operation.download')}</span>
|
||||
</Button>
|
||||
)}
|
||||
</CSVDownloader>
|
||||
)
|
||||
}
|
||||
export default React.memo(ResDownload)
|
||||
Reference in New Issue
Block a user