opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

publish button

This commit is contained in:
StyleZhang 2024-02-26 18:43:08 +08:00
parent dec60fdd4c
commit f91582e060
10 changed files with 126 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/app/(commonLayout)/workflow/page.tsx
View File

@ -52,13 +52,13 @@ const initialEdges = [
sourceHandle: 'condition1',
target: '3',
},
// {
// id: '2',
// type: 'custom',
// source: '2',
// sourceHandle: 'condition2',
// target: '4',
// },
{
id: '2',
type: 'custom',
source: '2',
sourceHandle: 'condition2',
target: '4',
},
]
const Page: FC = () => {

8
web/app/components/workflow/header/index.tsx
View File

@ -2,6 +2,7 @@ import type { FC } from 'react'
import { memo } from 'react'
import { useStore } from '../store'
import RunAndHistory from './run-and-history'
import Publish from './publish'
import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
import { Grid01 } from '@/app/components/base/icons/src/vender/line/layout'
import Button from '@/app/components/base/button'
@ -47,12 +48,7 @@ const Header: FC = () => {
</Button>
)
}
<Button
type='primary'
className='px-3 py-0 h-8 text-[13px] font-medium'
>
publish
</Button>
<Publish />
</div>
</div>
)

65
web/app/components/workflow/header/publish.tsx Normal file
View File

@ -0,0 +1,65 @@
import { useState } from 'react'
import Button from '@/app/components/base/button'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
const Publish = () => {
const [open, setOpen] = useState(false)
return (
<PortalToFollowElem
open={open}
onOpenChange={setOpen}
placement='bottom-end'
offset={{
mainAxis: 4,
crossAxis: -5,
}}
>
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
<Button
type='primary'
className='px-3 py-0 h-8 text-[13px] font-medium'
>
publish
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[11]'>
<div className='w-[320px] bg-white rounded-2xl border-[0.5px] border-gray-200 shadow-xl'>
<div className='p-4 pt-3'>
<div className='flex items-center h-6 text-xs font-medium text-gray-500'>
Current Draft
</div>
<div className='flex items-center h-[18px] text-[13px] font-medium text-gray-700'>
Auto-Saved 3 min ago · Evan
</div>
<Button
type='primary'
className='mt-3 px-3 py-0 w-full h-8 border-[0.5px] border-primary-700 rounded-lg text-[13px] font-medium'
>
Publish
</Button>
</div>
<div className='p-4 pt-3 border-t-[0.5px] border-t-black/5'>
<div className='flex items-center h-6 text-xs font-medium text-gray-500'>
Latest Published
</div>
<div className='flex justify-between'>
<div className='flex items-center mt-[3px] mb-[3px] leading-[18px] text-[13px] font-medium text-gray-700'>
Auto-Saved 3 min ago · Evan
</div>
<Button className='ml-2 px-2 py-0 h-6 shadow-xs rounded-md text-xs font-medium text-gray-700 border-[0.5px] border-gray-200'>
Restore
</Button>
</div>
</div>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
)
}
export default Publish

5
web/app/components/workflow/nodes/_base/components/next-step.tsx
View File

@ -133,8 +133,11 @@ const NextStep = () => {
!!outgoers.length && outgoers.map(outgoer => (
<div
key={outgoer.id}
className='group flex items-center mb-3 last-of-type:mb-0 px-2 h-9 rounded-lg border-[0.5px] border-gray-200 bg-white hover:bg-gray-50 shadow-xs text-xs text-gray-700 cursor-pointer'
className='relative group flex items-center mb-3 last-of-type:mb-0 px-2 h-9 rounded-lg border-[0.5px] border-gray-200 bg-white hover:bg-gray-50 shadow-xs text-xs text-gray-700 cursor-pointer'
>
<div className='absolute left-1 -top-[7.5px] flex items-center px-0.5 h-3 bg-white text-[10px] text-gray-500 font-semibold rounded-[5px]'>
IS TRUE
</div>
<BlockIcon
type={outgoer.data.type}
className='shrink-0 mr-1.5'

23
web/app/components/workflow/nodes/_base/components/node-handle.tsx
View File

@ -14,10 +14,19 @@ import { BlockEnum } from '../../../types'
import type { Node } from '../../../types'
import BlockSelector from '../../../block-selector'
type NodeHandleProps = {
handleId?: string
handleClassName?: string
nodeSelectorClassName?: string
} & Pick<NodeProps, 'id' | 'data'>
export const NodeTargetHandle = ({
id,
data,
}: NodeProps) => {
handleId,
handleClassName,
nodeSelectorClassName,
}: NodeHandleProps) => {
const [open, setOpen] = useState(false)
const store = useStoreApi()
const incomers = getIncomers({ id } as Node, store.getState().getNodes(), store.getState().edges)
@ -32,13 +41,15 @@ export const NodeTargetHandle = ({
return (
<>
<Handle
id={handleId}
type='target'
position={Position.Left}
className={`
!top-[17px] !-left-2 !w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none !translate-y-0 z-[1]
!w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none !translate-y-0 z-[1]
after:absolute after:w-0.5 after:h-2 after:left-1.5 after:top-1 after:bg-primary-500
${!incomers.length && 'after:opacity-0'}
${data.type === BlockEnum.Start && 'opacity-0'}
${handleClassName}
`}
isConnectable={data.type !== BlockEnum.Start}
onClick={handleHandleClick}
@ -53,6 +64,7 @@ export const NodeTargetHandle = ({
placement='left'
triggerClassName={open => `
hidden absolute left-0 top-0 pointer-events-none
${nodeSelectorClassName}
${data.hovering && '!flex'}
${open && '!flex'}
`}
@ -64,18 +76,13 @@ export const NodeTargetHandle = ({
)
}
type NodeSourceHandleProps = {
handleId?: string
handleClassName?: string
nodeSelectorClassName?: string
} & Pick<NodeProps, 'id' | 'data'>
export const NodeSourceHandle = ({
id,
data,
handleId,
handleClassName,
nodeSelectorClassName,
}: NodeSourceHandleProps) => {
}: NodeHandleProps) => {
const [open, setOpen] = useState(false)
const store = useStoreApi()
const connectedEdges = getConnectedEdges([{ id } as Node], store.getState().edges)

4
web/app/components/workflow/nodes/_base/components/title-description-input.tsx
View File

@ -21,7 +21,7 @@ export const TitleInput = memo(({
className={`
grow mr-2 px-1 h-6 text-base text-gray-900 font-semibold rounded-lg border border-transparent appearance-none outline-none
hover:bg-gray-50
focus:border-gray-300 focus:shadow-xs focus:bg-white
focus:border-gray-300 focus:shadow-xs focus:bg-white caret-[#295EFF]
`}
placeholder='Add title...'
/>
@ -58,7 +58,7 @@ export const DescriptionInput = memo(({
className={`
w-full text-xs text-gray-900 leading-[18px] bg-transparent
appearance-none outline-none resize-none
placeholder:text-gray-400
placeholder:text-gray-400 caret-[#295EFF]
`}
placeholder='Add description...'
autoSize

10
web/app/components/workflow/nodes/_base/node.tsx
View File

@ -46,8 +46,14 @@ const BaseNode: FC<BaseNodeProps> = ({
{data.title}
</div>
</div>
{cloneElement(children, { id: nodeId, data })}
<div className='mt-1 pb-1'>
{
children && (
<div className='mb-1'>
{cloneElement(children, { id: nodeId, data })}
</div>
)
}
<div className='pb-1'>
{
data.desc && (
<div className='px-3 pt-1 pb-2 text-xs leading-[18px] text-gray-500 whitespace-pre-line break-words'>

10
web/app/components/workflow/nodes/index.tsx
View File

@ -18,7 +18,15 @@ const CustomNode = memo((props: NodeProps) => {
return (
<>
<NodeTargetHandle { ...props } />
{
nodeData.type !== BlockEnum.VariableAssigner && (
<NodeTargetHandle
{ ...props }
handleClassName='!top-[17px] !-left-2'
handleId='target'
/>
)
}
<BaseNode { ...props }>
<NodeComponent />
</BaseNode>

1
web/app/components/workflow/nodes/start/node.tsx
View File

@ -8,6 +8,7 @@ const i18nPrefix = 'workflow.nodes.start'
const Node: FC = () => {
const { t } = useTranslation()
const { variables } = mockData
return (
<div className='px-3'>
<div className='space-y-0.5'>

21
web/app/components/workflow/panel/run-history.tsx
View File

@ -4,6 +4,7 @@ import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/genera
import { AlertCircle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
const RunHistory = () => {
const mode = useStore(state => state.mode)
const setShowRunHistory = useStore(state => state.setShowRunHistory)
return (
@ -18,15 +19,19 @@ const RunHistory = () => {
</div>
</div>
<div className='p-2'>
<div className='flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-primary-50 cursor-pointer'>
<CheckCircle className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#12B76A]' />
<div>
<div className='flex items-center text-[13px] font-medium text-primary-600 leading-[18px]'>Test Run#7</div>
<div className='flex items-center text-xs text-gray-500 leading-[18px]'>
Evan · 2 min ago
{
mode === 'workflow' && (
<div className='flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-primary-50 cursor-pointer'>
<CheckCircle className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#12B76A]' />
<div>
<div className='flex items-center text-[13px] font-medium text-primary-600 leading-[18px]'>Test Run#7</div>
<div className='flex items-center text-xs text-gray-500 leading-[18px]'>
Evan · 2 min ago
</div>
</div>
</div>
</div>
</div>
)
}
<div className='flex px-2 py-[7px] rounded-lg hover:bg-primary-50 cursor-pointer'>
<AlertCircle className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#F79009]' />
<div>