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

4
web/app/components/workflow/note-node/note-editor/context.tsx
View File

@@ -19,13 +19,13 @@ const NoteEditorContext = createContext<NoteEditorStore | null>(null)
type NoteEditorContextProviderProps = {
value: string
children: JSX.Element | string | (JSX.Element | string)[]
children: React.JSX.Element | string | (React.JSX.Element | string)[]
}
export const NoteEditorContextProvider = memo(({
value,
children,
}: NoteEditorContextProviderProps) => {
const storeRef = useRef<NoteEditorStore>()
const storeRef = useRef<NoteEditorStore | undefined>(undefined)
if (!storeRef.current)
storeRef.current = createNoteEditorStore()

2
web/app/components/workflow/note-node/note-editor/editor.tsx
View File

@@ -44,7 +44,7 @@ const Editor = ({
onFocus={() => setShortcutsEnabled(false)}
onBlur={() => setShortcutsEnabled(true)}
spellCheck={false}
className='w-full h-full outline-none text-text-secondary caret-primary-600'
className='h-full w-full text-text-secondary caret-primary-600 outline-none'
/>
</div>
}

22
web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
View File

@@ -69,9 +69,9 @@ const LinkEditorComponent = ({
<FloatingPortal root={containerElement}>
<div
className={cn(
'nodrag nopan inline-flex items-center w-max rounded-md border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg z-10',
'nodrag nopan z-10 inline-flex w-max items-center rounded-md border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg',
!linkOperatorShow && 'p-1 shadow-md',
linkOperatorShow && 'p-0.5 shadow-sm system-xs-medium text-text-tertiary',
linkOperatorShow && 'system-xs-medium p-0.5 text-text-tertiary shadow-sm',
)}
style={floatingStyles}
ref={refs.setFloating}
@@ -80,7 +80,7 @@ const LinkEditorComponent = ({
!linkOperatorShow && (
<>
<input
className='mr-0.5 p-1 w-[196px] h-6 rounded-sm text-[13px] appearance-none outline-none bg-transparent text-components-input-text-filled'
className='mr-0.5 h-6 w-[196px] appearance-none rounded-sm bg-transparent p-1 text-[13px] text-components-input-text-filled outline-none'
value={url}
onChange={e => setUrl(e.target.value)}
placeholder={t('workflow.nodes.note.editor.enterUrl') || ''}
@@ -101,38 +101,38 @@ const LinkEditorComponent = ({
linkOperatorShow && (
<>
<a
className='flex items-center px-2 h-6 rounded-md hover:bg-state-base-hover'
className='flex h-6 items-center rounded-md px-2 hover:bg-state-base-hover'
href={escape(url)}
target='_blank'
rel='noreferrer'
>
<RiExternalLinkLine className='mr-1 w-3 h-3' />
<RiExternalLinkLine className='mr-1 h-3 w-3' />
<div className='mr-1'>
{t('workflow.nodes.note.editor.openLink')}
</div>
<div
title={escape(url)}
className='text-text-accent max-w-[140px] truncate'
className='max-w-[140px] truncate text-text-accent'
>
{escape(url)}
</div>
</a>
<div className='mx-1 w-[1px] h-3.5 bg-divider-regular'></div>
<div className='mx-1 h-3.5 w-[1px] bg-divider-regular'></div>
<div
className='flex items-center mr-0.5 px-2 h-6 rounded-md cursor-pointer hover:bg-state-base-hover'
className='mr-0.5 flex h-6 cursor-pointer items-center rounded-md px-2 hover:bg-state-base-hover'
onClick={(e) => {
e.stopPropagation()
setLinkOperatorShow(false)
}}
>
<RiEditLine className='mr-1 w-3 h-3' />
<RiEditLine className='mr-1 h-3 w-3' />
{t('common.operation.edit')}
</div>
<div
className='flex items-center px-2 h-6 rounded-md cursor-pointer hover:bg-state-base-hover'
className='flex h-6 cursor-pointer items-center rounded-md px-2 hover:bg-state-base-hover'
onClick={handleUnlink}
>
<RiLinkUnlinkM className='mr-1 w-3 h-3' />
<RiLinkUnlinkM className='mr-1 h-3 w-3' />
{t('workflow.nodes.note.editor.unlink')}
</div>
</>

12
web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
View File

@@ -63,24 +63,24 @@ const ColorPicker = ({
>
<PortalToFollowElemTrigger onClick={() => setOpen(!open)}>
<div className={cn(
'flex items-center justify-center w-8 h-8 rounded-md cursor-pointer hover:bg-black/5',
'flex h-8 w-8 cursor-pointer items-center justify-center rounded-md hover:bg-black/5',
open && 'bg-black/5',
)}>
<div
className={cn(
'w-4 h-4 rounded-full border border-black/5',
'h-4 w-4 rounded-full border border-black/5',
THEME_MAP[theme].title,
)}
></div>
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent>
<div className='grid grid-cols-3 grid-rows-2 gap-0.5 p-0.5 rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-lg'>
<div className='grid grid-cols-3 grid-rows-2 gap-0.5 rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-lg'>
{
COLOR_LIST.map(color => (
<div
key={color.key}
className='group relative flex items-center justify-center w-8 h-8 rounded-md cursor-pointer'
className='group relative flex h-8 w-8 cursor-pointer items-center justify-center rounded-md'
onClick={(e) => {
e.stopPropagation()
onThemeChange(color.key)
@@ -89,13 +89,13 @@ const ColorPicker = ({
>
<div
className={cn(
'hidden group-hover:block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-5 h-5 rounded-full border-[1.5px]',
'absolute left-1/2 top-1/2 hidden h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-[1.5px] group-hover:block',
color.outer,
)}
></div>
<div
className={cn(
'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full border border-black/5',
'absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-black/5',
color.inner,
)}
></div>

12
web/app/components/workflow/note-node/note-editor/toolbar/command.tsx
View File

@@ -32,15 +32,15 @@ const Command = ({
const icon = useMemo(() => {
switch (type) {
case 'bold':
return <RiBold className={cn('w-4 h-4', selectedIsBold && 'text-primary-600')} />
return <RiBold className={cn('h-4 w-4', selectedIsBold && 'text-primary-600')} />
case 'italic':
return <RiItalic className={cn('w-4 h-4', selectedIsItalic && 'text-primary-600')} />
return <RiItalic className={cn('h-4 w-4', selectedIsItalic && 'text-primary-600')} />
case 'strikethrough':
return <RiStrikethrough className={cn('w-4 h-4', selectedIsStrikeThrough && 'text-primary-600')} />
return <RiStrikethrough className={cn('h-4 w-4', selectedIsStrikeThrough && 'text-primary-600')} />
case 'link':
return <RiLink className={cn('w-4 h-4', selectedIsLink && 'text-primary-600')} />
return <RiLink className={cn('h-4 w-4', selectedIsLink && 'text-primary-600')} />
case 'bullet':
return <RiListUnordered className={cn('w-4 h-4', selectedIsBullet && 'text-primary-600')} />
return <RiListUnordered className={cn('h-4 w-4', selectedIsBullet && 'text-primary-600')} />
}
}, [type, selectedIsBold, selectedIsItalic, selectedIsStrikeThrough, selectedIsLink, selectedIsBullet])
@@ -65,7 +65,7 @@ const Command = ({
>
<div
className={cn(
'flex items-center justify-center w-8 h-8 cursor-pointer rounded-md text-text-tertiary hover:text-text-accent hover:bg-state-accent-active',
'flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-text-tertiary hover:bg-state-accent-active hover:text-text-accent',
type === 'bold' && selectedIsBold && 'bg-state-accent-active',
type === 'italic' && selectedIsItalic && 'bg-state-accent-active',
type === 'strikethrough' && selectedIsStrikeThrough && 'bg-state-accent-active',

2
web/app/components/workflow/note-node/note-editor/toolbar/divider.tsx
View File

@@ -1,6 +1,6 @@
const Divider = () => {
return (
<div className='mx-1 w-[1px] h-3.5 bg-divider-regular'></div>
<div className='mx-1 h-3.5 w-[1px] bg-divider-regular'></div>
)
}

10
web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
View File

@@ -42,20 +42,20 @@ const FontSizeSelector = () => {
>
<PortalToFollowElemTrigger onClick={() => handleOpenFontSizeSelector(!fontSizeSelectorShow)}>
<div className={cn(
'flex items-center pl-2 pr-1.5 h-8 rounded-md text-[13px] font-medium text-text-tertiary hover:text-text-secondary cursor-pointer hover:bg-state-base-hover',
'flex h-8 cursor-pointer items-center rounded-md pl-2 pr-1.5 text-[13px] font-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
fontSizeSelectorShow && 'bg-state-base-hover text-text-secondary',
)}>
<RiFontSize className='mr-1 w-4 h-4' />
<RiFontSize className='mr-1 h-4 w-4' />
{FONT_SIZE_LIST.find(font => font.key === fontSize)?.value || t('workflow.nodes.note.editor.small')}
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent>
<div className='p-1 w-[120px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-md shadow-xl text-text-secondary'>
<div className='w-[120px] rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 text-text-secondary shadow-xl'>
{
FONT_SIZE_LIST.map(font => (
<div
key={font.key}
className='flex items-center justify-between pl-3 pr-2 h-8 rounded-md cursor-pointer hover:bg-state-base-hover'
className='flex h-8 cursor-pointer items-center justify-between rounded-md pl-3 pr-2 hover:bg-state-base-hover'
onClick={(e) => {
e.stopPropagation()
handleFontSize(font.key)
@@ -69,7 +69,7 @@ const FontSizeSelector = () => {
</div>
{
fontSize === font.key && (
<Check className='w-4 h-4 text-text-accent' />
<Check className='h-4 w-4 text-text-accent' />
)
}
</div>

2
web/app/components/workflow/note-node/note-editor/toolbar/index.tsx
View File

@@ -18,7 +18,7 @@ const Toolbar = ({
onShowAuthorChange,
}: ToolbarProps) => {
return (
<div className='inline-flex items-center p-0.5 bg-components-actionbar-bg rounded-lg border-[0.5px] border-components-actionbar-border shadow-sm'>
<div className='inline-flex items-center rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-sm'>
<ColorPicker
theme={theme}
onThemeChange={onThemeChange}

14
web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
View File

@@ -40,18 +40,18 @@ const Operator = ({
<PortalToFollowElemTrigger onClick={() => setOpen(!open)}>
<div
className={cn(
'flex items-center justify-center w-8 h-8 cursor-pointer rounded-lg text-text-tertiary hover:text-text-secondary hover:bg-state-base-hover',
'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
open && 'bg-state-base-hover text-text-secondary',
)}
>
<RiMoreFill className='w-4 h-4' />
<RiMoreFill className='h-4 w-4' />
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent>
<div className='min-w-[192px] bg-components-panel-bg-blur rounded-md border-[0.5px] border-components-panel-border shadow-xl'>
<div className='min-w-[192px] rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl'>
<div className='p-1'>
<div
className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-text-secondary hover:bg-state-base-hover'
className='flex h-8 cursor-pointer items-center justify-between rounded-md px-3 text-sm text-text-secondary hover:bg-state-base-hover'
onClick={() => {
onCopy()
setOpen(false)
@@ -61,7 +61,7 @@ const Operator = ({
<ShortcutsName keys={['ctrl', 'c']} />
</div>
<div
className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-text-secondary hover:bg-state-base-hover'
className='flex h-8 cursor-pointer items-center justify-between rounded-md px-3 text-sm text-text-secondary hover:bg-state-base-hover'
onClick={() => {
onDuplicate()
setOpen(false)
@@ -74,7 +74,7 @@ const Operator = ({
<div className='h-[1px] bg-divider-subtle'></div>
<div className='p-1'>
<div
className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-text-secondary hover:bg-state-base-hover'
className='flex h-8 cursor-pointer items-center justify-between rounded-md px-3 text-sm text-text-secondary hover:bg-state-base-hover'
onClick={e => e.stopPropagation()}
>
<div>{t('workflow.nodes.note.editor.showAuthor')}</div>
@@ -88,7 +88,7 @@ const Operator = ({
<div className='h-[1px] bg-divider-subtle'></div>
<div className='p-1'>
<div
className='flex items-center justify-between px-3 h-8 cursor-pointer rounded-md text-sm text-text-secondary hover:text-text-destructive hover:bg-state-destructive-hover'
className='flex h-8 cursor-pointer items-center justify-between rounded-md px-3 text-sm text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive'
onClick={() => {
onDelete()
setOpen(false)