estel/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

22
web/app/components/explore/app-card/index.tsx
View File

@@ -22,8 +22,8 @@ const AppCard = ({
const { t } = useTranslation()
const { app: appBasicInfo } = app
return (
<div className={cn('relative overflow-hidden pb-2 group col-span-1 bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border rounded-lg shadow-sm flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
<div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
<div className={cn('group relative col-span-1 flex cursor-pointer flex-col overflow-hidden rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-2 shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg')}>
<div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
<div className='relative shrink-0'>
<AppIcon
size='large'
@@ -33,13 +33,13 @@ const AppCard = ({
imageUrl={appBasicInfo.icon_url}
/>
<AppTypeIcon wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[4px] border border-divider-regular outline outline-components-panel-on-panel-item-bg'
className='w-3 h-3' type={appBasicInfo.mode} />
className='h-3 w-3' type={appBasicInfo.mode} />
</div>
<div className='grow w-0 py-[1px]'>
<div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'>
<div className='w-0 grow py-[1px]'>
<div className='flex items-center text-sm font-semibold leading-5 text-text-secondary'>
<div className='truncate' title={appBasicInfo.name}>{appBasicInfo.name}</div>
</div>
<div className='flex items-center text-[10px] leading-[18px] text-text-tertiary font-medium'>
<div className='flex items-center text-[10px] font-medium leading-[18px] text-text-tertiary'>
{appBasicInfo.mode === 'advanced-chat' && <div className='truncate'>{t('app.types.advanced').toUpperCase()}</div>}
{appBasicInfo.mode === 'chat' && <div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>}
{appBasicInfo.mode === 'agent-chat' && <div className='truncate'>{t('app.types.agent').toUpperCase()}</div>}
@@ -48,16 +48,16 @@ const AppCard = ({
</div>
</div>
</div>
<div className="description-wrapper h-[90px] px-[14px] system-xs-regular text-text-tertiary">
<div className="description-wrapper system-xs-regular h-[90px] px-[14px] text-text-tertiary">
<div className='line-clamp-4 group-hover:line-clamp-2'>
{app.description}
</div>
</div>
{isExplore && canCreate && (
<div className={cn('hidden absolute bottom-0 left-0 right-0 p-4 pt-8 group-hover:flex bg-gradient-to-t from-[60.27%] from-components-panel-gradient-2 to-transparent')}>
<div className={cn('flex items-center w-full space-x-2 h-8')}>
<Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
<PlusIcon className='w-4 h-4 mr-1' />
<div className={cn('absolute bottom-0 left-0 right-0 hidden bg-gradient-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
<div className={cn('flex h-8 w-full items-center space-x-2')}>
<Button variant='primary' className='h-7 grow' onClick={() => onCreate()}>
<PlusIcon className='mr-1 h-4 w-4' />
<span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
</Button>
</div>

12
web/app/components/explore/app-list/index.tsx
View File

@@ -163,16 +163,16 @@ const Apps = ({
return (
<div className={cn(
'flex flex-col h-full border-l-[0.5px] border-divider-regular',
'flex h-full flex-col border-l-[0.5px] border-divider-regular',
)}>
<div className='shrink-0 pt-6 px-12'>
<div className='shrink-0 px-12 pt-6'>
<div className={`mb-1 ${s.textGradient} text-xl font-semibold`}>{t('explore.apps.title')}</div>
<div className='text-text-tertiary text-sm'>{t('explore.apps.description')}</div>
<div className='text-sm text-text-tertiary'>{t('explore.apps.description')}</div>
</div>
<div className={cn(
'flex items-center justify-between mt-6 px-12',
'mt-6 flex items-center justify-between px-12',
)}>
<>
<Category
@@ -194,12 +194,12 @@ const Apps = ({
</div>
<div className={cn(
'relative flex flex-1 pb-6 flex-col overflow-auto shrink-0 grow mt-4',
'relative mt-4 flex flex-1 shrink-0 grow flex-col overflow-auto pb-6',
)}>
<nav
className={cn(
s.appList,
'grid content-start shrink-0 gap-4 px-6 sm:px-12',
'grid shrink-0 content-start gap-4 px-6 sm:px-12',
)}>
{searchFilteredList.map(app => (
<AppCard

8
web/app/components/explore/category.tsx
View File

@@ -31,17 +31,17 @@ const Category: FC<ICategoryProps> = ({
const isAllCategories = !list.includes(value as AppCategory) || value === allCategoriesEn
const itemClassName = (isSelected: boolean) => cn(
'flex items-center px-3 py-[7px] h-[32px] rounded-lg border-[0.5px] border-transparent text-gray-700 font-medium leading-[18px] cursor-pointer hover:bg-gray-200',
isSelected && 'bg-white border-gray-200 shadow-xs text-primary-600 hover:bg-white',
'flex h-[32px] cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-3 py-[7px] font-medium leading-[18px] text-gray-700 hover:bg-gray-200',
isSelected && 'border-gray-200 bg-white text-primary-600 shadow-xs hover:bg-white',
)
return (
<div className={cn(className, 'flex space-x-1 text-[13px] flex-wrap')}>
<div className={cn(className, 'flex flex-wrap space-x-1 text-[13px]')}>
<div
className={itemClassName(isAllCategories)}
onClick={() => onChange(allCategoriesEn)}
>
<ThumbsUp className='mr-1 w-3.5 h-3.5' />
<ThumbsUp className='mr-1 h-3.5 w-3.5' />
{t('explore.apps.allCategories')}
</div>
{list.filter(name => name !== allCategoriesEn).map(name => (

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

@@ -88,14 +88,14 @@ const CreateAppModal = ({
onClose={() => {}}
className='relative !max-w-[480px] px-8'
>
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onHide}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onHide}>
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
{isEditModal && (
<div className='mb-9 font-semibold text-xl leading-[30px] text-text-primary'>{t('app.editAppTitle')}</div>
<div className='mb-9 text-xl font-semibold leading-[30px] text-text-primary'>{t('app.editAppTitle')}</div>
)}
{!isEditModal && (
<div className='mb-9 font-semibold text-xl leading-[30px] text-text-primary'>{t('explore.appCustomize.title', { name: appName })}</div>
<div className='mb-9 text-xl font-semibold leading-[30px] text-text-primary'>{t('explore.appCustomize.title', { name: appName })}</div>
)}
<div className='mb-9'>
{/* icon & name */}
@@ -115,7 +115,7 @@ const CreateAppModal = ({
value={name}
onChange={e => setName(e.target.value)}
placeholder={t('app.newApp.appNamePlaceholder') || ''}
className='grow h-10'
className='h-10 grow'
/>
</div>
</div>
@@ -132,7 +132,7 @@ const CreateAppModal = ({
{/* answer icon */}
{isEditModal && (appMode === 'chat' || appMode === 'advanced-chat' || appMode === 'agent-chat') && (
<div className='pt-2'>
<div className='flex justify-between items-center'>
<div className='flex items-center justify-between'>
<div className='py-2 text-sm font-medium leading-[20px] text-text-primary'>{t('app.answerIcon.title')}</div>
<Switch
defaultValue={useIconAsAnswerIcon}
@@ -145,7 +145,7 @@ const CreateAppModal = ({
{!isEditModal && isAppsFull && <AppsFull loc='app-explore-create' />}
</div>
<div className='flex flex-row-reverse'>
<Button disabled={!isEditModal && isAppsFull} className='w-24 ml-2' variant='primary' onClick={submit}>{!isEditModal ? t('common.operation.create') : t('common.operation.save')}</Button>
<Button disabled={!isEditModal && isAppsFull} className='ml-2 w-24' variant='primary' onClick={submit}>{!isEditModal ? t('common.operation.create') : t('common.operation.save')}</Button>
<Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
</div>
</Modal>

4
web/app/components/explore/index.tsx
View File

@@ -40,7 +40,7 @@ const Explore: FC<IExploreProps> = ({
}, [isCurrentWorkspaceDatasetOperator])
return (
<div className='flex h-full bg-background-body border-t border-divider-regular overflow-hidden'>
<div className='flex h-full overflow-hidden border-t border-divider-regular bg-background-body'>
<ExploreContext.Provider
value={
{
@@ -53,7 +53,7 @@ const Explore: FC<IExploreProps> = ({
}
>
<Sidebar controlUpdateInstalledApps={controlUpdateInstalledApps} />
<div className='grow w-0'>
<div className='w-0 grow'>
{children}
</div>
</ExploreContext.Provider>

2
web/app/components/explore/installed-app/index.tsx
View File

@@ -28,7 +28,7 @@ const InstalledApp: FC<IInstalledAppProps> = ({
return (
<div className='h-full py-2 pl-0 pr-2 sm:p-2'>
{installedApp.app.mode !== 'completion' && installedApp.app.mode !== 'workflow' && (
<ChatWithHistory installedAppInfo={installedApp} className='rounded-2xl shadow-md overflow-hidden' />
<ChatWithHistory installedAppInfo={installedApp} className='overflow-hidden rounded-2xl shadow-md' />
)}
{installedApp.app.mode === 'completion' && (
<TextGenerationApp isInstalledApp installedAppInfo={installedApp}/>

14
web/app/components/explore/item-operation/index.tsx
View File

@@ -59,26 +59,26 @@ const ItemOperation: FC<IItemOperationProps> = ({
>
<div
ref={ref}
className={'min-w-[120px] p-1 bg-components-panel-bg-blur backdrop-blur-[5px] rounded-lg border border-components-panel-border shadow-lg'}
className={'min-w-[120px] rounded-lg border border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]'}
onMouseEnter={setIsHovering}
onMouseLeave={setNotHovering}
onClick={(e) => {
e.stopPropagation()
}}
>
<div className={cn(s.actionItem, 'hover:bg-state-base-hover group')} onClick={togglePin}>
<Pin02 className='shrink-0 w-4 h-4 text-text-secondary' />
<div className={cn(s.actionItem, 'group hover:bg-state-base-hover')} onClick={togglePin}>
<Pin02 className='h-4 w-4 shrink-0 text-text-secondary' />
<span className={s.actionName}>{isPinned ? t('explore.sidebar.action.unpin') : t('explore.sidebar.action.pin')}</span>
</div>
{isShowRenameConversation && (
<div className={cn(s.actionItem, 'hover:bg-state-base-hover group')} onClick={onRenameConversation}>
<RiEditLine className='shrink-0 w-4 h-4 text-text-secondary' />
<div className={cn(s.actionItem, 'group hover:bg-state-base-hover')} onClick={onRenameConversation}>
<RiEditLine className='h-4 w-4 shrink-0 text-text-secondary' />
<span className={s.actionName}>{t('explore.sidebar.action.rename')}</span>
</div>
)}
{isShowDelete && (
<div className={cn(s.actionItem, s.deleteActionItem, 'hover:bg-state-base-hover group')} onClick={onDelete} >
<RiDeleteBinLine className={cn(s.deleteActionItemChild, 'shrink-0 w-4 h-4 stroke-current text-text-secondary stroke-2')} />
<div className={cn(s.actionItem, s.deleteActionItem, 'group hover:bg-state-base-hover')} onClick={onDelete} >
<RiDeleteBinLine className={cn(s.deleteActionItemChild, 'h-4 w-4 shrink-0 stroke-current stroke-2 text-text-secondary')} />
<span className={cn(s.actionName, s.deleteActionItemChild)}>{t('explore.sidebar.action.delete')}</span>
</div>
)}

6
web/app/components/explore/sidebar/app-nav-item/index.tsx
View File

@@ -45,7 +45,7 @@ export default function AppNavItem({
<div
ref={ref}
key={id}
className={cn('text-components-menu-item-text system-sm-medium flex h-8 items-center justify-between mobile:justify-center px-2 mobile:px-1 rounded-lg text-sm font-normal',
className={cn('system-sm-medium flex h-8 items-center justify-between rounded-lg px-2 text-sm font-normal text-components-menu-item-text mobile:justify-center mobile:px-1',
isSelected ? 'bg-state-base-active text-components-menu-item-text-active' : 'hover:bg-state-base-hover hover:text-components-menu-item-text-hover',
)}
onClick={() => {
@@ -55,11 +55,11 @@ export default function AppNavItem({
{isMobile && <AppIcon size='tiny' iconType={icon_type} icon={icon} background={icon_background} imageUrl={icon_url} />}
{!isMobile && (
<>
<div className='flex items-center space-x-2 w-0 grow'>
<div className='flex w-0 grow items-center space-x-2'>
<AppIcon size='tiny' iconType={icon_type} icon={icon} background={icon_background} imageUrl={icon_url} />
<div className='overflow-hidden text-ellipsis whitespace-nowrap' title={name}>{name}</div>
</div>
<div className='shrink-0 h-6' onClick={e => e.stopPropagation()}>
<div className='h-6 shrink-0' onClick={e => e.stopPropagation()}>
<ItemOperation
isPinned={isPinned}
isItemHovering={isHovering}

6
web/app/components/explore/sidebar/index.tsx
View File

@@ -92,12 +92,12 @@ const SideBar: FC<IExploreSideBarProps> = ({
const pinnedAppsCount = installedApps.filter(({ is_pinned }) => is_pinned).length
return (
<div className='w-fit sm:w-[216px] shrink-0 pt-6 px-4 border-r border-divider-burn cursor-pointer'>
<div className='w-fit shrink-0 cursor-pointer border-r border-divider-burn px-4 pt-6 sm:w-[216px]'>
<div className={cn(isDiscoverySelected ? 'text-text-accent' : 'text-text-tertiary')}>
<Link
href='/explore/apps'
className={cn(isDiscoverySelected ? ' bg-components-main-nav-nav-button-bg-active' : 'font-medium hover:bg-state-base-hover',
'flex items-center pc:justify-start pc:w-full mobile:justify-center mobile:w-fit h-9 px-3 mobile:px-2 gap-2 rounded-lg')}
'flex h-9 items-center gap-2 rounded-lg px-3 mobile:w-fit mobile:justify-center mobile:px-2 pc:w-full pc:justify-start')}
style={isDiscoverySelected ? { boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)' } : {}}
>
{isDiscoverySelected ? <SelectedDiscoveryIcon /> : <DiscoveryIcon />}
@@ -106,7 +106,7 @@ const SideBar: FC<IExploreSideBarProps> = ({
</div>
{installedApps.length > 0 && (
<div className='mt-10'>
<p className='pl-2 mobile:px-0 text-xs text-text-tertiary break-all font-medium uppercase'>{t('explore.sidebar.workspace')}</p>
<p className='break-all pl-2 text-xs font-medium uppercase text-text-tertiary mobile:px-0'>{t('explore.sidebar.workspace')}</p>
<div className='mt-3 space-y-1 overflow-y-auto overflow-x-hidden'
style={{
height: 'calc(100vh - 250px)',