admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Chore: frontend infrastructure upgrade (#16420)

Browse Source 
Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
2025-03-21 17:41:03 +08:00
committed by GitHub
parent e61415223b
commit 7709d9df20
1435 changed files with 13372 additions and 11612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
web/app/components/app/create-app-modal/index.tsx
View File

@@ -94,17 +94,17 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
handleCreateApp()
})
return <>
<div className='flex justify-center h-full overflow-y-auto overflow-x-hidden'>
<div className='flex-1 shrink-0 flex justify-end'>
<div className='flex h-full justify-center overflow-y-auto overflow-x-hidden'>
<div className='flex flex-1 shrink-0 justify-end'>
<div className='px-10'>
<div className='w-full h-6 2xl:h-[139px]' />
<div className='pt-1 pb-6'>
<div className='h-6 w-full 2xl:h-[139px]' />
<div className='pb-6 pt-1'>
<span className='title-2xl-semi-bold text-text-primary'>{t('app.newApp.startFromBlank')}</span>
</div>
<div className='leading-6 mb-2'>
<div className='mb-2 leading-6'>
<span className='system-sm-semibold text-text-secondary'>{t('app.newApp.chooseAppType')}</span>
</div>
<div className='flex flex-col w-[660px] gap-4'>
<div className='flex w-[660px] flex-col gap-4'>
<div>
<div className='mb-2'>
<span className='system-2xs-medium-uppercase text-text-tertiary'>{t('app.newApp.forBeginners')}</span>
@@ -114,8 +114,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
active={appMode === 'chat'}
title={t('app.types.chatbot')}
description={t('app.newApp.chatbotShortDescription')}
icon={<div className='w-6 h-6 bg-components-icon-bg-blue-solid rounded-md flex items-center justify-center'>
<ChatBot className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
icon={<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-solid'>
<ChatBot className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
</div>}
onClick={() => {
setAppMode('chat')
@@ -124,8 +124,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
active={appMode === 'agent-chat'}
title={t('app.types.agent')}
description={t('app.newApp.agentShortDescription')}
icon={<div className='w-6 h-6 bg-components-icon-bg-violet-solid rounded-md flex items-center justify-center'>
<Logic className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
icon={<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-violet-solid'>
<Logic className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
</div>}
onClick={() => {
setAppMode('agent-chat')
@@ -134,8 +134,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
active={appMode === 'completion'}
title={t('app.newApp.completeApp')}
description={t('app.newApp.completionShortDescription')}
icon={<div className='w-6 h-6 bg-components-icon-bg-teal-solid rounded-md flex items-center justify-center'>
<ListSparkle className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
icon={<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-teal-solid'>
<ListSparkle className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
</div>}
onClick={() => {
setAppMode('completion')
@@ -152,8 +152,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
active={appMode === 'advanced-chat'}
title={t('app.types.advanced')}
description={t('app.newApp.advancedShortDescription')}
icon={<div className='w-6 h-6 bg-components-icon-bg-blue-light-solid rounded-md flex items-center justify-center'>
<BubbleTextMod className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
icon={<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-light-solid'>
<BubbleTextMod className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
</div>}
onClick={() => {
setAppMode('advanced-chat')
@@ -163,8 +163,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
active={appMode === 'workflow'}
title={t('app.types.workflow')}
description={t('app.newApp.workflowShortDescription')}
icon={<div className='w-6 h-6 bg-components-icon-bg-indigo-solid rounded-md flex items-center justify-center'>
<RiExchange2Fill className='w-4 h-4 text-components-avatar-shape-fill-stop-100' />
icon={<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-indigo-solid'>
<RiExchange2Fill className='h-4 w-4 text-components-avatar-shape-fill-stop-100' />
</div>}
onClick={() => {
setAppMode('workflow')
@@ -172,9 +172,9 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
</div>
</div>
<Divider style={{ margin: 0 }} />
<div className='flex space-x-3 items-center'>
<div className='flex items-center space-x-3'>
<div className='flex-1'>
<div className='h-6 flex items-center mb-1'>
<div className='mb-1 flex h-6 items-center'>
<label className='system-sm-semibold text-text-secondary'>{t('app.newApp.captionName')}</label>
</div>
<Input
@@ -202,9 +202,9 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
/>}
</div>
<div>
<div className='h-6 flex items-center mb-1'>
<div className='mb-1 flex h-6 items-center'>
<label className='system-sm-semibold text-text-secondary'>{t('app.newApp.captionDescription')}</label>
<span className='system-xs-regular text-text-tertiary ml-1'>({t('app.newApp.optional')})</span>
<span className='system-xs-regular ml-1 text-text-tertiary'>({t('app.newApp.optional')})</span>
</div>
<Textarea
className='resize-none'
@@ -214,11 +214,11 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
/>
</div>
</div>
<div className='pt-5 pb-10 flex justify-between items-center'>
<div className='flex gap-1 items-center system-xs-regular text-text-tertiary cursor-pointer' onClick={onCreateFromTemplate}>
<div className='flex items-center justify-between pb-10 pt-5'>
<div className='system-xs-regular flex cursor-pointer items-center gap-1 text-text-tertiary' onClick={onCreateFromTemplate}>
<span>{t('app.newApp.noIdeaTip')}</span>
<div className='p-[1px]'>
<RiArrowRightLine className='w-3.5 h-3.5' />
<RiArrowRightLine className='h-3.5 w-3.5' />
</div>
</div>
<div className='flex gap-2'>
@@ -226,21 +226,21 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
<Button disabled={isAppsFull || !name} className='gap-1' variant="primary" onClick={handleCreateApp}>
<span>{t('app.newApp.Create')}</span>
<div className='flex gap-0.5'>
<RiCommandLine size={14} className='p-0.5 system-kbd bg-components-kbd-bg-white rounded-sm' />
<RiCornerDownLeftLine size={14} className='p-0.5 system-kbd bg-components-kbd-bg-white rounded-sm' />
<RiCommandLine size={14} className='system-kbd rounded-sm bg-components-kbd-bg-white p-0.5' />
<RiCornerDownLeftLine size={14} className='system-kbd rounded-sm bg-components-kbd-bg-white p-0.5' />
</div>
</Button>
</div>
</div>
</div>
</div>
<div className='flex-1 shrink h-full flex justify-start relative overflow-hidden'>
<div className='h-6 2xl:h-[139px] absolute left-0 top-0 right-0 border-b border-b-divider-subtle'></div>
<div className='relative flex h-full flex-1 shrink justify-start overflow-hidden'>
<div className='absolute left-0 right-0 top-0 h-6 border-b border-b-divider-subtle 2xl:h-[139px]'></div>
<div className='max-w-[760px] border-x border-x-divider-subtle'>
<div className='h-6 2xl:h-[139px]' />
<AppPreview mode={appMode} />
<div className='absolute left-0 right-0 border-b border-b-divider-subtle'></div>
<div className='w-[664px] h-[448px] flex items-center justify-center' style={{ background: 'repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(16,24,40,0.04) 4px,transparent 3px, transparent 6px)' }}>
<div className='flex h-[448px] w-[664px] items-center justify-center' style={{ background: 'repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(16,24,40,0.04) 4px,transparent 3px, transparent 6px)' }}>
<AppScreenShot show={appMode === 'chat'} mode='chat' />
<AppScreenShot show={appMode === 'advanced-chat'} mode='advanced-chat' />
<AppScreenShot show={appMode === 'agent-chat'} mode='agent-chat' />
@@ -279,7 +279,7 @@ const CreateAppModal = ({ show, onClose, onSuccess, onCreateFromTemplate }: Crea
export default CreateAppModal
type AppTypeCardProps = {
icon: JSX.Element
icon: React.JSX.Element
beta?: boolean
title: string
description: string
@@ -290,19 +290,19 @@ function AppTypeCard({ icon, title, beta = false, description, active, onClick }
const { t } = useTranslation()
return <div
className={
cn(`w-[191px] h-[84px] p-3 border-[0.5px] relative box-content
rounded-xl border-components-option-card-option-border
bg-components-panel-on-panel-item-bg shadow-xs cursor-pointer hover:shadow-md`, active
? 'outline outline-[1.5px] outline-components-option-card-option-selected-border shadow-md'
cn(`relative box-content h-[84px] w-[191px] cursor-pointer rounded-xl
border-[0.5px] border-components-option-card-option-border
bg-components-panel-on-panel-item-bg p-3 shadow-xs hover:shadow-md`, active
? 'shadow-md outline outline-[1.5px] outline-components-option-card-option-selected-border'
: '')
}
onClick={onClick}
>
{beta && <div className='px-[5px] py-[3px]
rounded-[5px] min-w-[18px] absolute top-3 right-3
border border-divider-deep system-2xs-medium-uppercase text-text-tertiary'>{t('common.menus.status')}</div>}
{beta && <div className='system-2xs-medium-uppercase absolute
right-3 top-3 min-w-[18px] rounded-[5px] border
border-divider-deep px-[5px] py-[3px] text-text-tertiary'>{t('common.menus.status')}</div>}
{icon}
<div className='system-sm-semibold text-text-secondary mt-2 mb-0.5'>{title}</div>
<div className='system-sm-semibold mb-0.5 mt-2 text-text-secondary'>{title}</div>
<div className='system-xs-regular text-text-tertiary'>{description}</div>
</div>
}
@@ -339,9 +339,9 @@ function AppPreview({ mode }: { mode: AppMode }) {
const previewInfo = modeToPreviewInfoMap[mode]
return <div className='px-8 py-4'>
<h4 className='system-sm-semibold-uppercase text-text-secondary'>{previewInfo.title}</h4>
<div className='mt-1 system-xs-regular text-text-tertiary max-w-96 min-h-8'>
<div className='system-xs-regular mt-1 min-h-8 max-w-96 text-text-tertiary'>
<span>{previewInfo.description}</span>
{previewInfo.link && <Link target='_blank' href={previewInfo.link} className='text-text-accent ml-1'>{t('app.newApp.learnMore')}</Link>}
{previewInfo.link && <Link target='_blank' href={previewInfo.link} className='ml-1 text-text-accent'>{t('app.newApp.learnMore')}</Link>}
</div>
</div>
}