chore: node new toolbar

This commit is contained in:
Joel 2025-05-12 14:15:40 +08:00
parent 626f2524e2
commit 8540233193
4 changed files with 40 additions and 33 deletions

View File

@ -109,7 +109,7 @@ const AllTools = ({
return (
<div className={cn(className)}>
<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 items-center justify-between border-b border-divider-subtle px-3'>
<div className='flex h-8 items-center space-x-1'>
{
tabs.map(tab => (

View File

@ -129,7 +129,11 @@ const NodeSelector: FC<NodeSelectorProps> = ({
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1000]'>
<div className={`rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg ${popupClassName}`}>
<div className='px-2 pt-2' onClick={e => e.stopPropagation()}>
<Tabs
activeTab={activeTab}
onActiveTabChange={handleActiveTabChange}
filterElem={
<div className='relative m-2' onClick={e => e.stopPropagation()}>
{activeTab === TabsEnum.Blocks && (
<Input
showLeftIcon
@ -151,11 +155,8 @@ const NodeSelector: FC<NodeSelectorProps> = ({
placeholder={t('plugin.searchTools')!}
/>
)}
</div>
<Tabs
activeTab={activeTab}
onActiveTabChange={handleActiveTabChange}
}
onSelect={handleSelect}
searchText={searchText}
tags={tags}

View File

@ -16,6 +16,7 @@ export type TabsProps = {
tags: string[]
onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
availableBlocksTypes?: BlockEnum[]
filterElem: React.ReactNode
noBlocks?: boolean
}
const Tabs: FC<TabsProps> = ({
@ -25,6 +26,7 @@ const Tabs: FC<TabsProps> = ({
searchText,
onSelect,
availableBlocksTypes,
filterElem,
noBlocks,
}) => {
const tabs = useTabs()
@ -37,15 +39,15 @@ const Tabs: FC<TabsProps> = ({
<div onClick={e => e.stopPropagation()}>
{
!noBlocks && (
<div className='flex items-center border-b-[0.5px] border-divider-subtle px-3'>
<div className='relative flex bg-background-section-burn pl-1 pt-1'>
{
tabs.map(tab => (
<div
key={tab.key}
className={cn(
'system-sm-medium relative mr-4 cursor-pointer pb-2 pt-1',
'system-sm-medium relative mr-0.5 flex h-8 cursor-pointer items-center rounded-t-lg px-3 ',
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'
? 'sm-no-bottom cursor-default bg-components-panel-bg text-text-accent'
: 'text-text-tertiary',
)}
onClick={() => onActiveTabChange(tab.key)}
@ -57,13 +59,16 @@ const Tabs: FC<TabsProps> = ({
</div>
)
}
{filterElem}
{
activeTab === TabsEnum.Blocks && !noBlocks && (
<div className='border-t border-divider-subtle'>
<Blocks
searchText={searchText}
onSelect={onSelect}
availableBlocksTypes={availableBlocksTypes}
/>
</div>
)
}
{

View File

@ -71,6 +71,7 @@ const config = {
boxShadow: {
'xs': '0px 1px 2px 0px rgba(16, 24, 40, 0.05)',
'sm': '0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10)',
'sm-no-bottom': '0px -1px 2px 0px rgba(16, 24, 40, 0.06), 0px -1px 3px 0px rgba(16, 24, 40, 0.10)',
'md': '0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10)',
'lg': '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)',
'xl': '0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08)',