hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-12 12:26:54 +08:00
Code Issues 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

12
web/app/components/workflow/block-selector/all-tools.tsx
View File

@@ -98,13 +98,13 @@ const AllTools = ({
return (
<div className={cn(className)}>
<div className='flex items-center justify-between px-3 bg-background-default-hover border-b-[0.5px] border-divider-subtle shadow-xs'>
<div className='flex items-center h-8 space-x-1'>
<div className='flex items-center justify-between border-b-[0.5px] border-divider-subtle bg-background-default-hover px-3 shadow-xs'>
<div className='flex h-8 items-center space-x-1'>
{
tabs.map(tab => (
<div
className={cn(
'flex items-center px-2 h-6 rounded-md hover:bg-state-base-hover cursor-pointer',
'flex h-6 cursor-pointer items-center rounded-md px-2 hover:bg-state-base-hover',
'text-xs font-medium text-text-secondary',
activeTab === tab.key && 'bg-state-base-hover-alt',
)}
@@ -119,12 +119,12 @@ const AllTools = ({
<ViewTypeSelect viewType={activeView} onChange={setActiveView} />
{supportAddCustomTool && (
<div className='flex items-center'>
<div className='mr-1.5 w-px h-3.5 bg-divider-regular'></div>
<div className='mr-1.5 h-3.5 w-px bg-divider-regular'></div>
<ActionButton
className='bg-components-button-primary-bg hover:bg-components-button-primary-bg text-components-button-primary-text hover:text-components-button-primary-text'
className='bg-components-button-primary-bg text-components-button-primary-text hover:bg-components-button-primary-bg hover:text-components-button-primary-text'
onClick={onShowAddCustomCollectionModal}
>
<RiAddLine className='w-4 h-4' />
<RiAddLine className='h-4 w-4' />
</ActionButton>
</div>
)}

10
web/app/components/workflow/block-selector/blocks.tsx
View File

@@ -58,7 +58,7 @@ const Blocks = ({
>
{
classification !== '-' && !!list.length && (
<div className='flex items-start px-3 h-[22px] text-xs font-medium text-text-tertiary'>
<div className='flex h-[22px] items-start px-3 text-xs font-medium text-text-tertiary'>
{t(`workflow.tabs.${classification}`)}
</div>
)
@@ -76,14 +76,14 @@ const Blocks = ({
className='mb-2'
type={block.type}
/>
<div className='mb-1 system-md-medium text-text-primary'>{block.title}</div>
<div className='text-text-tertiary system-xs-regular'>{nodesExtraData[block.type].about}</div>
<div className='system-md-medium mb-1 text-text-primary'>{block.title}</div>
<div className='system-xs-regular text-text-tertiary'>{nodesExtraData[block.type].about}</div>
</div>
)}
>
<div
key={block.type}
className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-state-base-hover cursor-pointer'
className='flex h-8 w-full cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover'
onClick={() => onSelect(block.type)}
>
<BlockIcon
@@ -103,7 +103,7 @@ const Blocks = ({
<div className='p-1'>
{
isEmpty && (
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
<div className='flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
)
}
{

2
web/app/components/workflow/block-selector/index-bar.tsx
View File

@@ -86,7 +86,7 @@ const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs, className }) => {
<div className={classNames('index-bar absolute right-0 top-36 flex flex-col items-center w-6 justify-center text-xs font-medium text-text-quaternary', className)}>
<div className='absolute left-0 top-0 h-full w-px bg-[linear-gradient(270deg,rgba(255,255,255,0)_0%,rgba(16,24,40,0.08)_30%,rgba(16,24,40,0.08)_50%,rgba(16,24,40,0.08)_70.5%,rgba(255,255,255,0)_100%)]'></div>
{letters.map(letter => (
<div className="hover:text-text-secondary cursor-pointer" key={letter} onClick={() => handleIndexClick(letter)}>
<div className="cursor-pointer hover:text-text-secondary" key={letter} onClick={() => handleIndexClick(letter)}>
{letter}
</div>
))}

7
web/app/components/workflow/block-selector/index.tsx
View File

@@ -27,7 +27,6 @@ import SearchBox from '@/app/components/plugins/marketplace/search-box'
import {
Plus02,
} from '@/app/components/base/icons/src/vender/line/general'
import classNames from '@/utils/classnames'
type NodeSelectorProps = {
open?: boolean
@@ -117,13 +116,13 @@ const NodeSelector: FC<NodeSelectorProps> = ({
: (
<div
className={`
flex items-center justify-center
w-4 h-4 rounded-full bg-components-button-primary-bg text-text-primary-on-surface hover:bg-components-button-primary-bg-hover cursor-pointer z-10
z-10 flex h-4
w-4 cursor-pointer items-center justify-center rounded-full bg-components-button-primary-bg text-text-primary-on-surface hover:bg-components-button-primary-bg-hover
${triggerClassName?.(open)}
`}
style={triggerStyle}
>
<Plus02 className='w-2.5 h-2.5' />
<Plus02 className='h-2.5 w-2.5' />
</div>
)
}

8
web/app/components/workflow/block-selector/market-place-plugin/action.tsx
View File

@@ -72,13 +72,13 @@ const OperationDropdown: FC<Props> = ({
>
<PortalToFollowElemTrigger onClick={handleTrigger}>
<ActionButton className={cn(open && 'bg-state-base-hover')}>
<RiMoreFill className='w-4 h-4 text-components-button-secondary-accent-text' />
<RiMoreFill className='h-4 w-4 text-components-button-secondary-accent-text' />
</ActionButton>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[9999]'>
<div className='w-[112px] p-1 bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg'>
<div onClick={handleDownload} className='px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'>{t('common.operation.download')}</div>
<a href={`${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}`} target='_blank' className='block px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'>{t('common.operation.viewDetails')}</a>
<div className='w-[112px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
<div onClick={handleDownload} className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>{t('common.operation.download')}</div>
<a href={`${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}`} target='_blank' className='system-md-regular block cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>{t('common.operation.viewDetails')}</a>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>

16
web/app/components/workflow/block-selector/market-place-plugin/item.tsx
View File

@@ -36,24 +36,24 @@ const Item: FC<Props> = ({
}] = useBoolean(false)
return (
<div className='group/plugin flex rounded-lg py-1 pr-1 pl-3 hover:bg-state-base-hover'>
<div className='group/plugin flex rounded-lg py-1 pl-3 pr-1 hover:bg-state-base-hover'>
<div
className='shrink-0 relative w-6 h-6 border-[0.5px] border-components-panel-border-subtle rounded-md bg-center bg-no-repeat bg-contain'
className='relative h-6 w-6 shrink-0 rounded-md border-[0.5px] border-components-panel-border-subtle bg-contain bg-center bg-no-repeat'
style={{ backgroundImage: `url(${payload.icon})` }}
/>
<div className='ml-2 w-0 grow flex'>
<div className='ml-2 flex w-0 grow'>
<div className='w-0 grow'>
<div className='h-4 leading-4 text-text-primary system-sm-medium truncate '>{getLocalizedText(payload.label)}</div>
<div className='h-5 leading-5 text-text-tertiary system-xs-regular truncate'>{getLocalizedText(payload.brief)}</div>
<div className='flex text-text-tertiary system-xs-regular space-x-1'>
<div className='system-sm-medium h-4 truncate leading-4 text-text-primary '>{getLocalizedText(payload.label)}</div>
<div className='system-xs-regular h-5 truncate leading-5 text-text-tertiary'>{getLocalizedText(payload.brief)}</div>
<div className='system-xs-regular flex space-x-1 text-text-tertiary'>
<div>{payload.org}</div>
<div>·</div>
<div>{t('plugin.install', { num: formatNumber(payload.install_count || 0) })}</div>
</div>
</div>
{/* Action */}
<div className={cn(!open ? 'hidden' : 'flex', 'group-hover/plugin:flex items-center space-x-1 h-4 text-components-button-secondary-accent-text system-xs-medium')}>
<div className='px-1.5 cursor-pointer' onClick={showInstallModal}>{t('plugin.installAction')}</div>
<div className={cn(!open ? 'hidden' : 'flex', 'system-xs-medium h-4 items-center space-x-1 text-components-button-secondary-accent-text group-hover/plugin:flex')}>
<div className='cursor-pointer px-1.5' onClick={showInstallModal}>{t('plugin.installAction')}</div>
<Action
open={open}
onOpenChange={setOpen}

41
web/app/components/workflow/block-selector/market-place-plugin/list.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
import React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import useStickyScroll, { ScrollPosition } from '../use-sticky-scroll'
import Item from './item'
@@ -19,14 +19,17 @@ type Props = {
disableMaxWidth?: boolean
}
const List = forwardRef<{ handleScroll: () => void }, Props>(({
wrapElemRef,
searchText,
tags,
list,
toolContentClassName,
disableMaxWidth = false,
}, ref) => {
const List = (
{
ref,
wrapElemRef,
searchText,
tags,
list,
toolContentClassName,
disableMaxWidth = false,
},
) => {
const { t } = useTranslation()
const hasFilter = !searchText
const hasRes = list.length > 0
@@ -68,12 +71,12 @@ const List = forwardRef<{ handleScroll: () => void }, Props>(({
if (hasFilter) {
return (
<Link
className='sticky bottom-0 z-10 flex h-8 px-4 py-1 system-sm-medium items-center border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-b-lg shadow-lg text-text-accent-light-mode-only cursor-pointer'
className='system-sm-medium sticky bottom-0 z-10 flex h-8 cursor-pointer items-center rounded-b-lg border-[0.5px] border-t border-components-panel-border bg-components-panel-bg-blur px-4 py-1 text-text-accent-light-mode-only shadow-lg'
href={`${marketplaceUrlPrefix}/`}
target='_blank'
>
<span>{t('plugin.findMoreInMarketplace')}</span>
<RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
<RiArrowRightUpLine className='ml-0.5 h-3 w-3' />
</Link>
)
}
@@ -84,7 +87,7 @@ const List = forwardRef<{ handleScroll: () => void }, Props>(({
<>
{hasRes && (
<div
className={cn('sticky z-10 flex justify-between h-8 px-4 py-1 text-text-primary system-sm-medium cursor-pointer', stickyClassName, !disableMaxWidth && maxWidthClassName)}
className={cn('system-sm-medium sticky z-10 flex h-8 cursor-pointer justify-between px-4 py-1 text-text-primary', stickyClassName, !disableMaxWidth && maxWidthClassName)}
onClick={handleHeadClick}
>
<span>{t('plugin.fromMarketplace')}</span>
@@ -95,7 +98,7 @@ const List = forwardRef<{ handleScroll: () => void }, Props>(({
onClick={e => e.stopPropagation()}
>
<span>{t('plugin.searchInMarketplace')}</span>
<RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
<RiArrowRightUpLine className='ml-0.5 h-3 w-3' />
</Link>
</div>
)}
@@ -107,22 +110,22 @@ const List = forwardRef<{ handleScroll: () => void }, Props>(({
onAction={() => { }}
/>
))}
<div className='mt-2 mb-3 flex items-center justify-center space-x-2'>
<div className="w-[90px] h-[2px] bg-gradient-to-l from-[rgba(16,24,40,0.08)] to-[rgba(255,255,255,0.01)]"></div>
<div className='mb-3 mt-2 flex items-center justify-center space-x-2'>
<div className="h-[2px] w-[90px] bg-gradient-to-l from-[rgba(16,24,40,0.08)] to-[rgba(255,255,255,0.01)]"></div>
<Link
href={urlWithSearchText}
target='_blank'
className='shrink-0 flex items-center h-4 system-sm-medium text-text-accent-light-mode-only'
className='system-sm-medium flex h-4 shrink-0 items-center text-text-accent-light-mode-only'
>
<RiSearchLine className='mr-0.5 w-3 h-3' />
<RiSearchLine className='mr-0.5 h-3 w-3' />
<span>{t('plugin.searchInMarketplace')}</span>
</Link>
<div className="w-[90px] h-[2px] bg-gradient-to-l from-[rgba(255,255,255,0.01)] to-[rgba(16,24,40,0.08)]"></div>
<div className="h-[2px] w-[90px] bg-gradient-to-l from-[rgba(255,255,255,0.01)] to-[rgba(16,24,40,0.08)]"></div>
</div>
</div>
</>
)
})
}
List.displayName = 'List'

4
web/app/components/workflow/block-selector/tabs.tsx
View File

@@ -36,13 +36,13 @@ const Tabs: FC<TabsProps> = ({
<div onClick={e => e.stopPropagation()}>
{
!noBlocks && (
<div className='flex items-center px-3 border-b-[0.5px] border-divider-subtle'>
<div className='flex items-center border-b-[0.5px] border-divider-subtle px-3'>
{
tabs.map(tab => (
<div
key={tab.key}
className={cn(
'relative mr-4 pt-1 pb-2 system-sm-medium cursor-pointer',
'system-sm-medium relative mr-4 cursor-pointer pb-2 pt-1',
activeTab === tab.key
? 'text-text-primary after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-util-colors-blue-brand-blue-brand-600'
: 'text-text-tertiary',

2
web/app/components/workflow/block-selector/tool-picker.tsx
View File

@@ -142,7 +142,7 @@ const ToolPicker: FC<Props> = ({
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1000]'>
<div className={cn('relative w-[356px] min-h-20 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg', panelClassName)}>
<div className={cn('relative min-h-20 w-[356px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm', panelClassName)}>
<div className='p-2 pb-1'>
<SearchBox
search={searchText}

10
web/app/components/workflow/block-selector/tool/action-item.tsx
View File

@@ -44,13 +44,13 @@ const ToolItem: FC<Props> = ({
toolIcon={provider.icon}
/>
<div className='mb-1 text-sm leading-5 text-text-primary'>{payload.label[language]}</div>
<div className='text-xs text-text-secondary leading-[18px]'>{payload.description[language]}</div>
<div className='text-xs leading-[18px] text-text-secondary'>{payload.description[language]}</div>
</div>
)}
>
<div
key={payload.name}
className='flex justify-between items-center pr-1 rounded-lg pl-[21px] hover:bg-state-base-hover cursor-pointer'
className='flex cursor-pointer items-center justify-between rounded-lg pl-[21px] pr-1 hover:bg-state-base-hover'
onClick={() => {
if (disabled) return
const params: Record<string, string> = {}
@@ -73,12 +73,12 @@ const ToolItem: FC<Props> = ({
})
}}
>
<div className={cn('h-8 leading-8 border-l-2 border-divider-subtle pl-4 truncate text-text-secondary system-sm-medium', disabled && 'opacity-30')}>{payload.label[language]}</div>
<div className={cn('system-sm-medium h-8 truncate border-l-2 border-divider-subtle pl-4 leading-8 text-text-secondary', disabled && 'opacity-30')}>{payload.label[language]}</div>
{disabled && <Badge
className='flex items-center h-5 text-text-tertiary space-x-0.5'
className='flex h-5 items-center space-x-0.5 text-text-tertiary'
uppercase
>
<RiCheckLine className='w-3 h-3 ' />
<RiCheckLine className='h-3 w-3 ' />
<div>{t('tools.addToolModal.added')}</div>
</Badge>
}

2
web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
View File

@@ -24,7 +24,7 @@ const Item: FC<Props> = ({
}) => {
return (
<div>
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>
<div className='flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary'>
{groupName}
</div>
<div>

10
web/app/components/workflow/block-selector/tool/tool.tsx
View File

@@ -75,7 +75,7 @@ const Tool: FC<Props> = ({
>
<div className={cn(className)}>
<div
className='flex items-center justify-between pl-3 pr-1 w-full rounded-lg hover:bg-state-base-hover cursor-pointer select-none'
className='flex w-full cursor-pointer select-none items-center justify-between rounded-lg pl-3 pr-1 hover:bg-state-base-hover'
onClick={() => {
if (hasAction)
setFold(!isFold)
@@ -97,21 +97,21 @@ const Tool: FC<Props> = ({
// })
}}
>
<div className='flex grow items-center h-8'>
<div className='flex h-8 grow items-center'>
<BlockIcon
className='shrink-0'
type={BlockEnum.Tool}
toolIcon={payload.icon}
/>
<div className='ml-2 text-sm text-text-primary flex-1 w-0 grow truncate'>{payload.label[language]}</div>
<div className='ml-2 w-0 flex-1 grow truncate text-sm text-text-primary'>{payload.label[language]}</div>
</div>
<div className='flex items-center'>
{isFlatView && (
<div className='text-text-tertiary system-xs-regular'>{groupName}</div>
<div className='system-xs-regular text-text-tertiary'>{groupName}</div>
)}
{hasAction && (
<FoldIcon className={cn('w-4 h-4 text-text-quaternary shrink-0', isFold && 'text-text-tertiary')} />
<FoldIcon className={cn('h-4 w-4 shrink-0 text-text-quaternary', isFold && 'text-text-tertiary')} />
)}
</div>
</div>

2
web/app/components/workflow/block-selector/tools.tsx
View File

@@ -90,7 +90,7 @@ const Blocks = ({
<div className={classNames('p-1 max-w-[320px]', className)}>
{
!tools.length && !showWorkflowEmpty && (
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
<div className='flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
)
}
{!tools.length && showWorkflowEmpty && (

16
web/app/components/workflow/block-selector/view-type-select.tsx
View File

@@ -30,27 +30,27 @@ const ViewTypeSelect: FC<Props> = ({
<div className='flex items-center rounded-lg bg-components-segmented-control-bg-normal p-px'>
<div
className={
cn('p-[3px] rounded-lg',
cn('rounded-lg p-[3px]',
viewType === ViewType.flat
? 'bg-components-segmented-control-item-active-bg shadow-xs text-text-accent-light-mode-only'
: 'text-text-tertiary cursor-pointer',
? 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-xs'
: 'cursor-pointer text-text-tertiary',
)
}
onClick={handleChange(ViewType.flat)}
>
<RiSortAlphabetAsc className='w-4 h-4' />
<RiSortAlphabetAsc className='h-4 w-4' />
</div>
<div
className={
cn('p-[3px] rounded-lg',
cn('rounded-lg p-[3px]',
viewType === ViewType.tree
? 'bg-components-segmented-control-item-active-bg shadow-xs text-text-accent-light-mode-only'
: 'text-text-tertiary cursor-pointer',
? 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-xs'
: 'cursor-pointer text-text-tertiary',
)
}
onClick={handleChange(ViewType.tree)}
>
<RiNodeTree className='w-4 h-4 ' />
<RiNodeTree className='h-4 w-4 ' />
</div>
</div>
)