mirror of
http://112.124.100.131/huang.ze/ebiz-dify-ai.git
synced 2025-12-24 10:13:01 +08:00
Chore: frontend infrastructure upgrade (#16420)
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
@@ -22,30 +22,30 @@ const EnvItem = ({
|
||||
|
||||
return (
|
||||
<div className={cn(
|
||||
'mb-1 px-2.5 py-2 bg-components-panel-on-panel-item-bg radius-md border border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
|
||||
'radius-md mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
|
||||
destructive && 'border-state-destructive-border hover:bg-state-destructive-hover',
|
||||
)}>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='grow flex gap-1 items-center'>
|
||||
<Env className='w-4 h-4 text-util-colors-violet-violet-600' />
|
||||
<div className='text-text-primary system-sm-medium'>{env.name}</div>
|
||||
<div className='text-text-tertiary system-xs-medium'>{capitalize(env.value_type)}</div>
|
||||
{env.value_type === 'secret' && <RiLock2Line className='w-3 h-3 text-text-tertiary' />}
|
||||
<div className='flex grow items-center gap-1'>
|
||||
<Env className='h-4 w-4 text-util-colors-violet-violet-600' />
|
||||
<div className='system-sm-medium text-text-primary'>{env.name}</div>
|
||||
<div className='system-xs-medium text-text-tertiary'>{capitalize(env.value_type)}</div>
|
||||
{env.value_type === 'secret' && <RiLock2Line className='h-3 w-3 text-text-tertiary' />}
|
||||
</div>
|
||||
<div className='shrink-0 flex gap-1 items-center text-text-tertiary'>
|
||||
<div className='p-1 radius-md cursor-pointer hover:bg-state-base-hover hover:text-text-secondary'>
|
||||
<RiEditLine className='w-4 h-4' onClick={() => onEdit(env)}/>
|
||||
<div className='flex shrink-0 items-center gap-1 text-text-tertiary'>
|
||||
<div className='radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary'>
|
||||
<RiEditLine className='h-4 w-4' onClick={() => onEdit(env)}/>
|
||||
</div>
|
||||
<div
|
||||
className='p-1 radius-md cursor-pointer hover:bg-state-destructive-hover hover:text-text-destructive'
|
||||
className='radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive'
|
||||
onMouseOver={() => setDestructive(true)}
|
||||
onMouseOut={() => setDestructive(false)}
|
||||
>
|
||||
<RiDeleteBinLine className='w-4 h-4' onClick={() => onDelete(env)} />
|
||||
<RiDeleteBinLine className='h-4 w-4' onClick={() => onDelete(env)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-text-tertiary system-xs-regular truncate'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
|
||||
<div className='system-xs-regular truncate text-text-tertiary'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -149,22 +149,22 @@ const EnvPanel = () => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'relative flex flex-col w-[420px] bg-components-panel-bg-alt rounded-l-2xl h-full border border-components-panel-border',
|
||||
'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
|
||||
)}
|
||||
>
|
||||
<div className='shrink-0 flex items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold'>
|
||||
<div className='system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
|
||||
{t('workflow.env.envPanelTitle')}
|
||||
<div className='flex items-center'>
|
||||
<div
|
||||
className='flex items-center justify-center w-6 h-6 cursor-pointer'
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center'
|
||||
onClick={() => setShowEnvPanel(false)}
|
||||
>
|
||||
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='shrink-0 py-1 px-4 system-sm-regular text-text-tertiary'>{t('workflow.env.envDescription')}</div>
|
||||
<div className='shrink-0 px-4 pt-2 pb-3'>
|
||||
<div className='system-sm-regular shrink-0 px-4 py-1 text-text-tertiary'>{t('workflow.env.envDescription')}</div>
|
||||
<div className='shrink-0 px-4 pb-3 pt-2'>
|
||||
<VariableTrigger
|
||||
open={showVariableModal}
|
||||
setOpen={setShowVariableModal}
|
||||
@@ -173,7 +173,7 @@ const EnvPanel = () => {
|
||||
onClose={() => setCurrentVar(undefined)}
|
||||
/>
|
||||
</div>
|
||||
<div className='grow px-4 rounded-b-2xl overflow-y-auto'>
|
||||
<div className='grow overflow-y-auto rounded-b-2xl px-4'>
|
||||
{envList.map(env => (
|
||||
<EnvItem
|
||||
key={env.id}
|
||||
|
||||
@@ -12,7 +12,7 @@ import type { EnvironmentVariable } from '@/app/components/workflow/types'
|
||||
import cn from '@/utils/classnames'
|
||||
import { checkKeys } from '@/utils/var'
|
||||
|
||||
export interface ModalPropsType {
|
||||
export type ModalPropsType = {
|
||||
env?: EnvironmentVariable
|
||||
onClose: () => void
|
||||
onSave: (env: EnvironmentVariable) => void
|
||||
@@ -68,39 +68,39 @@ const VariableModal = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn('flex flex-col w-[360px] bg-components-panel-bg rounded-2xl h-full border-[0.5px] border-components-panel-border shadow-2xl')}
|
||||
className={cn('flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl')}
|
||||
>
|
||||
<div className='shrink-0 flex items-center justify-between mb-3 p-4 pb-0 text-text-primary system-xl-semibold'>
|
||||
<div className='system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
|
||||
{!env ? t('workflow.env.modal.title') : t('workflow.env.modal.editTitle')}
|
||||
<div className='flex items-center'>
|
||||
<div
|
||||
className='flex items-center justify-center w-6 h-6 cursor-pointer'
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center'
|
||||
onClick={onClose}
|
||||
>
|
||||
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-4 py-2'>
|
||||
{/* type */}
|
||||
<div className='mb-4'>
|
||||
<div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.env.modal.type')}</div>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.type')}</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className={cn(
|
||||
'w-[106px] flex items-center justify-center p-2 radius-md bg-components-option-card-option-bg border border-components-option-card-option-border text-text-secondary system-sm-regular cursor-pointer hover:shadow-xs hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover',
|
||||
type === 'string' && 'text-text-primary system-sm-medium border-[1.5px] shadow-xs bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border hover:border-components-option-card-option-selected-border',
|
||||
'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
|
||||
type === 'string' && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
|
||||
)} onClick={() => setType('string')}>String</div>
|
||||
<div className={cn(
|
||||
'w-[106px] flex items-center justify-center p-2 radius-md bg-components-option-card-option-bg border border-components-option-card-option-border text-text-secondary system-sm-regular cursor-pointer hover:shadow-xs hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover',
|
||||
type === 'number' && 'text-text-primary font-medium border-[1.5px] shadow-xs bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border hover:border-components-option-card-option-selected-border',
|
||||
'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
|
||||
type === 'number' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
|
||||
)} onClick={() => {
|
||||
setType('number')
|
||||
if (!(/^[0-9]$/).test(value))
|
||||
setValue('')
|
||||
}}>Number</div>
|
||||
<div className={cn(
|
||||
'w-[106px] flex items-center justify-center p-2 radius-md bg-components-option-card-option-bg border border-components-option-card-option-border text-text-secondary system-sm-regular cursor-pointer hover:shadow-xs hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover',
|
||||
type === 'secret' && 'text-text-primary font-medium border-[1.5px] shadow-xs bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border hover:border-components-option-card-option-selected-border',
|
||||
'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
|
||||
type === 'secret' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
|
||||
)} onClick={() => setType('secret')}>
|
||||
<span>Secret</span>
|
||||
<Tooltip
|
||||
@@ -116,7 +116,7 @@ const VariableModal = ({
|
||||
</div>
|
||||
{/* name */}
|
||||
<div className='mb-4'>
|
||||
<div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.env.modal.name')}</div>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.name')}</div>
|
||||
<div className='flex'>
|
||||
<Input
|
||||
placeholder={t('workflow.env.modal.namePlaceholder') || ''}
|
||||
@@ -129,7 +129,7 @@ const VariableModal = ({
|
||||
</div>
|
||||
{/* value */}
|
||||
<div className=''>
|
||||
<div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.env.modal.value')}</div>
|
||||
<div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.value')}</div>
|
||||
<div className='flex'>
|
||||
<Input
|
||||
placeholder={t('workflow.env.modal.valuePlaceholder') || ''}
|
||||
@@ -140,7 +140,7 @@ const VariableModal = ({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='p-4 pt-2 flex flex-row-reverse rounded-b-2xl'>
|
||||
<div className='flex flex-row-reverse rounded-b-2xl p-4 pt-2'>
|
||||
<div className='flex gap-2'>
|
||||
<Button onClick={onClose}>{t('common.operation.cancel')}</Button>
|
||||
<Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
|
||||
|
||||
@@ -46,7 +46,7 @@ const VariableTrigger = ({
|
||||
open && onClose()
|
||||
}}>
|
||||
<Button variant='primary'>
|
||||
<RiAddLine className='mr-1 w-4 h-4' />
|
||||
<RiAddLine className='mr-1 h-4 w-4' />
|
||||
<span className='system-sm-medium'>{t('workflow.env.envPanelButton')}</span>
|
||||
</Button>
|
||||
</PortalToFollowElemTrigger>
|
||||
|
||||
Reference in New Issue
Block a user