youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-05 09:58:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: enhance UI components with new icons and improved styling in billing and dataset processes

Browse Source
This commit is contained in:
twwu
2025-06-18 18:03:43 +08:00
parent f85e6a0dea
commit a103324f25
4 changed files with 256 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
web/app/components/datasets/create/step-three/index.tsx
View File

@ -7,6 +7,7 @@ import EmbeddingProcess from '../embedding-process'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
import type { FullDocumentDetail, createDocumentResponse } from '@/models/datasets'
import AppIcon from '@/app/components/base/app-icon'
import Divider from '@/app/components/base/divider'
type StepThreeProps = {
datasetId?: string
@ -21,31 +22,48 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
const media = useBreakpoints()
const isMobile = media === MediaType.mobile
const iconInfo = creationCache?.dataset?.icon_info || {
icon: '📙',
icon_type: 'emoji',
icon_background: '#FFF4ED',
icon_url: '',
}
return (
<div className="flex h-full max-h-full w-full justify-center overflow-y-auto">
<div className="h-full max-w-[960px] shrink-0 grow overflow-y-auto px-14 sm:px-16">
<div className="mx-auto max-w-[640px]">
<div className='flex h-full max-h-full w-full justify-center overflow-y-auto'>
<div className='h-full max-w-[960px] shrink-0 grow overflow-y-auto px-14 sm:px-16'>
<div className='mx-auto max-w-[640px] pb-8 pt-10'>
{!datasetId && (
<>
<div className="pt-10">
<div className="mb-1 text-xl font-semibold leading-[22px] text-text-primary">{t('datasetCreation.stepThree.creationTitle')}</div>
<div className="mb-7 text-[13px] leading-4 text-text-tertiary">{t('datasetCreation.stepThree.creationContent')}</div>
<div className="flex gap-4">
<AppIcon {...creationCache?.dataset} className="size-14 self-center text-2xl" />
<div className="flex grow flex-col gap-1">
<div className="text-[13px] font-semibold leading-6 text-text-secondary">{t('datasetCreation.stepThree.label')}</div>
<div className="w-full truncate rounded-lg bg-components-input-bg-normal px-3 py-2 text-[13px] leading-4 text-components-input-text-filled">{datasetName || creationCache?.dataset?.name}</div>
<div className='flex flex-col gap-y-1 pb-3'>
<div className='title-2xl-semi-bold text-text-primary'>{t('datasetCreation.stepThree.creationTitle')}</div>
<div className='system-sm-regular text-text-tertiary'>{t('datasetCreation.stepThree.creationContent')}</div>
</div>
<div className='flex gap-4'>
<AppIcon
size='xxl'
iconType={iconInfo.icon_type}
icon={iconInfo.icon}
background={iconInfo.icon_background}
imageUrl={iconInfo.icon_url}
className='shrink-0'
/>
<div className='flex grow flex-col gap-y-1'>
<div className='system-sm-semibold flex h-6 items-center text-text-secondary'>
{t('datasetCreation.stepThree.label')}
</div>
<div className='system-sm-regular w-full truncate rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled'>
<span className='px-1'>{datasetName || creationCache?.dataset?.name}</span>
</div>
</div>
</div>
<hr className="my-6 h-[1px] border-0 bg-divider-subtle" />
<Divider type='horizontal' className='my-6 bg-divider-subtle' />
</>
)}
{datasetId && (
<div className="pt-10">
<div className="mb-1 text-xl font-semibold leading-[22px] text-text-primary">{t('datasetCreation.stepThree.additionTitle')}</div>
<div className="mb-7 text-[13px] leading-4 text-text-tertiary">{`${t('datasetCreation.stepThree.additionP1')} ${datasetName || creationCache?.dataset?.name} ${t('datasetCreation.stepThree.additionP2')}`}</div>
<div className='flex flex-col gap-y-1 pb-3'>
<div className='title-2xl-semi-bold text-text-primary'>{t('datasetCreation.stepThree.additionTitle')}</div>
<div className='system-sm-regular text-text-tertiary'>{`${t('datasetCreation.stepThree.additionP1')} ${datasetName || creationCache?.dataset?.name} ${t('datasetCreation.stepThree.additionP2')}`}</div>
</div>
)}
<EmbeddingProcess
@ -58,13 +76,13 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
</div>
</div>
{!isMobile && (
<div className="shrink-0 pr-8 pt-[88px] text-xs">
<div className="flex w-[328px] flex-col gap-3 rounded-xl bg-background-section p-6 text-text-tertiary">
<div className="flex size-10 items-center justify-center rounded-[10px] bg-components-card-bg shadow-lg">
<RiBookOpenLine className="size-5 text-text-accent" />
<div className='shrink-0 pr-8 pt-[88px] text-xs'>
<div className='flex w-[328px] flex-col gap-3 rounded-xl bg-background-section p-6 text-text-tertiary'>
<div className='flex size-10 items-center justify-center rounded-[10px] bg-components-card-bg shadow-lg'>
<RiBookOpenLine className='size-5 text-text-accent' />
</div>
<div className="text-base font-semibold text-text-secondary">{t('datasetCreation.stepThree.sideTipTitle')}</div>
<div className="text-text-tertiary">{t('datasetCreation.stepThree.sideTipContent')}</div>
<div className='text-base font-semibold text-text-secondary'>{t('datasetCreation.stepThree.sideTipTitle')}</div>
<div className='text-text-tertiary'>{t('datasetCreation.stepThree.sideTipContent')}</div>
</div>
</div>
)}