Commit dce01cf0 authored by StyleZhang's avatar StyleZhang

header

parent da84ba06
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="edit-03">
<g id="Solid">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.50004 10.0001C5.50004 9.72398 5.7239 9.50012 6.00004 9.50012H10.5C10.7762 9.50012 11 9.72398 11 10.0001C11 10.2763 10.7762 10.5001 10.5 10.5001H6.00004C5.7239 10.5001 5.50004 10.2763 5.50004 10.0001Z" fill="#98A2B3"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.89651 1.39656C8.50599 0.787085 9.49414 0.787084 10.1036 1.39656C10.7131 2.00604 10.7131 2.99419 10.1036 3.60367L3.82225 9.88504C3.81235 9.89494 3.80254 9.90476 3.79281 9.91451C3.64909 10.0585 3.52237 10.1855 3.3696 10.2791C3.23539 10.3613 3.08907 10.4219 2.93602 10.4587C2.7618 10.5005 2.58242 10.5003 2.37897 10.5001C2.3652 10.5001 2.35132 10.5001 2.33732 10.5001H1.50005C1.22391 10.5001 1.00005 10.2763 1.00005 10.0001V9.16286C1.00005 9.14886 1.00004 9.13497 1.00003 9.1212C0.999836 8.91776 0.999669 8.73838 1.0415 8.56416C1.07824 8.4111 1.13885 8.26479 1.22109 8.13058C1.31471 7.97781 1.44166 7.85109 1.58566 7.70736C1.5954 7.69764 1.60523 7.68783 1.61513 7.67793L7.89651 1.39656Z" fill="#98A2B3"/>
</g>
</g>
</svg>
{
"icon": {
"type": "element",
"isRootNode": true,
"name": "svg",
"attributes": {
"width": "12",
"height": "12",
"viewBox": "0 0 12 12",
"fill": "none",
"xmlns": "http://www.w3.org/2000/svg"
},
"children": [
{
"type": "element",
"name": "g",
"attributes": {
"id": "edit-03"
},
"children": [
{
"type": "element",
"name": "g",
"attributes": {
"id": "Solid"
},
"children": [
{
"type": "element",
"name": "path",
"attributes": {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
"d": "M5.50004 10.0001C5.50004 9.72398 5.7239 9.50012 6.00004 9.50012H10.5C10.7762 9.50012 11 9.72398 11 10.0001C11 10.2763 10.7762 10.5001 10.5 10.5001H6.00004C5.7239 10.5001 5.50004 10.2763 5.50004 10.0001Z",
"fill": "currentColor"
},
"children": []
},
{
"type": "element",
"name": "path",
"attributes": {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
"d": "M7.89651 1.39656C8.50599 0.787085 9.49414 0.787084 10.1036 1.39656C10.7131 2.00604 10.7131 2.99419 10.1036 3.60367L3.82225 9.88504C3.81235 9.89494 3.80254 9.90476 3.79281 9.91451C3.64909 10.0585 3.52237 10.1855 3.3696 10.2791C3.23539 10.3613 3.08907 10.4219 2.93602 10.4587C2.7618 10.5005 2.58242 10.5003 2.37897 10.5001C2.3652 10.5001 2.35132 10.5001 2.33732 10.5001H1.50005C1.22391 10.5001 1.00005 10.2763 1.00005 10.0001V9.16286C1.00005 9.14886 1.00004 9.13497 1.00003 9.1212C0.999836 8.91776 0.999669 8.73838 1.0415 8.56416C1.07824 8.4111 1.13885 8.26479 1.22109 8.13058C1.31471 7.97781 1.44166 7.85109 1.58566 7.70736C1.5954 7.69764 1.60523 7.68783 1.61513 7.67793L7.89651 1.39656Z",
"fill": "currentColor"
},
"children": []
}
]
}
]
}
]
},
"name": "Edit03"
}
\ No newline at end of file
// GENERATE BY script
// DON NOT EDIT IT MANUALLY
import * as React from 'react'
import data from './Edit03.json'
import IconBase from '@/app/components/base/icons/IconBase'
import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
props,
ref,
) => <IconBase {...props} ref={ref} data={data as IconData} />)
Icon.displayName = 'Edit03'
export default Icon
...@@ -2,6 +2,7 @@ export { default as AnswerTriangle } from './AnswerTriangle' ...@@ -2,6 +2,7 @@ export { default as AnswerTriangle } from './AnswerTriangle'
export { default as CheckCircle } from './CheckCircle' export { default as CheckCircle } from './CheckCircle'
export { default as CheckDone01 } from './CheckDone01' export { default as CheckDone01 } from './CheckDone01'
export { default as Download02 } from './Download02' export { default as Download02 } from './Download02'
export { default as Edit03 } from './Edit03'
export { default as Edit04 } from './Edit04' export { default as Edit04 } from './Edit04'
export { default as Eye } from './Eye' export { default as Eye } from './Eye'
export { default as MessageClockCircle } from './MessageClockCircle' export { default as MessageClockCircle } from './MessageClockCircle'
......
import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
import Button from '@/app/components/base/button'
const Header = () => { const Header = () => {
return ( return (
<div <div
className='absolute top-0 left-0 w-full h-14 z-10' className='absolute top-0 left-0 flex items-center justify-between px-3 w-full h-14 z-10'
style={{ style={{
background: 'linear-gradient(180deg, #F9FAFB 0%, rgba(249, 250, 251, 0.00) 100%)', background: 'linear-gradient(180deg, #F9FAFB 0%, rgba(249, 250, 251, 0.00) 100%)',
}} }}
> >
<div>
<div className='text-xs font-medium text-gray-700'>Fitness and Nutrition Expert</div>
<div className='flex items-center'>
<div className='flex items-center text-xs text-gray-500'>
<Edit03 className='mr-1 w-3 h-3 text-gray-400' />
Editing
</div>
</div>
</div>
<div>
<Button
type='primary'
className='px-3 py-0 h-8 text-[13px] font-medium'
>
publish
</Button>
</div>
</div> </div>
) )
} }
......
...@@ -31,54 +31,56 @@ const BasePanel: FC<BasePanelProps> = ({ ...@@ -31,54 +31,56 @@ const BasePanel: FC<BasePanelProps> = ({
} = useWorkflowContext() } = useWorkflowContext()
return ( return (
<div className='absolute top-2 right-2 bottom-2 w-[420px] bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl z-20'> <div className='absolute top-2 right-2 bottom-2 w-[420px] bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl z-20 overflow-y-auto'>
<div className='flex items-center px-4 pt-3'> <div className='sticky top-0 bg-white'>
<BlockIcon <div className='flex items-center px-4 pt-3'>
className='shrink-0 mr-2' <BlockIcon
type={selectedNode!.data.type} className='shrink-0 mr-2'
size='md' type={selectedNode!.data.type}
/> size='md'
<div className='grow py-1 text-base text-gray-900 font-semibold '>LLM</div> />
<div className='shrink-0 flex items-center'> <div className='grow py-1 text-base text-gray-900 font-semibold '>LLM</div>
<div <div className='shrink-0 flex items-center'>
className='w-6 h-6 cursor-pointer' <div
onClick={() => handleSelectedNodeIdChange('')} className='w-6 h-6 cursor-pointer'
> onClick={() => handleSelectedNodeIdChange('')}
<XClose className='w-4 h-4 text-gray-500' /> >
<XClose className='w-4 h-4 text-gray-500' />
</div>
</div> </div>
</div> </div>
</div> <div className='p-2'>
<div className='p-2'> <div className='py-[5px] pl-1.5 pr-2 text-xs text-gray-400'>
<div className='py-[5px] pl-1.5 pr-2 text-xs text-gray-400'> Add description...
Add description... </div>
</div> </div>
{
(inputsElement || outputsElement) && (
<div className='flex items-center px-4 h-[42px]'>
{
inputsElement && (
<div
className='cursor-pointer'
onClick={() => setActiveTab(TabEnum.Inputs)}
>
inputs
</div>
)
}
{
outputsElement && (
<div
className='ml-4 cursor-pointer'
onClick={() => setActiveTab(TabEnum.Outputs)}
>
outpus
</div>
)
}
</div>
)
}
</div> </div>
{
(inputsElement || outputsElement) && (
<div className='flex items-center px-4 h-[42px]'>
{
inputsElement && (
<div
className='cursor-pointer'
onClick={() => setActiveTab(TabEnum.Inputs)}
>
inputs
</div>
)
}
{
outputsElement && (
<div
className='ml-4 cursor-pointer'
onClick={() => setActiveTab(TabEnum.Outputs)}
>
outpus
</div>
)
}
</div>
)
}
<div className='py-2 border-t-[0.5px] border-b-[0.5px] border-black/5'> <div className='py-2 border-t-[0.5px] border-b-[0.5px] border-black/5'>
{defaultElement} {defaultElement}
{activeTab === TabEnum.Inputs && inputsElement} {activeTab === TabEnum.Inputs && inputsElement}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment