feat: update error message styles and add background gradients for dataset crawler

This commit is contained in:
twwu
2025-01-23 15:09:35 +08:00
parent 49674507c6
commit ebad19c9f7
35 changed files with 186 additions and 379 deletions

View File

@ -34,10 +34,11 @@ export type ButtonProps = {
destructive?: boolean
loading?: boolean
styleCss?: CSSProperties
spinnerClassName?: string
} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, destructive, loading, styleCss, children, ...props }, ref) => {
({ className, variant, size, destructive, loading, styleCss, children, spinnerClassName, ...props }, ref) => {
return (
<button
type='button'
@ -50,7 +51,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{...props}
>
{children}
{loading && <Spinner loading={loading} className='!text-white !h-3 !w-3 !border-2 !ml-1' />}
{loading && <Spinner loading={loading} className={classNames('!text-white !h-3 !w-3 !border-2 !ml-1', spinnerClassName)} />}
</button>
)
},

View File

@ -20,7 +20,7 @@
"width": "16",
"height": "16",
"rx": "5",
"fill": "#F2F4F7"
"fill": "currentColor"
},
"children": []
},
@ -33,7 +33,7 @@
"width": "233",
"height": "10",
"rx": "3",
"fill": "#EAECF0"
"fill": "currentColor"
},
"children": []
},
@ -46,7 +46,7 @@
"width": "345",
"height": "6",
"rx": "3",
"fill": "#F2F4F7"
"fill": "currentColor"
},
"children": []
}

View File

@ -1,4 +0,0 @@
.popup {
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
z-index: 10;
}

View File

@ -4,8 +4,6 @@ import { Fragment } from 'react'
import { Menu, Transition } from '@headlessui/react'
import { RiArrowDownSLine } from '@remixicon/react'
import NotionIcon from '../../notion-icon'
import s from './index.module.css'
import cn from '@/utils/classnames'
import type { DataSourceNotionWorkspace } from '@/models/common'
type WorkspaceSelectorProps = {
@ -26,14 +24,14 @@ export default function WorkspaceSelector({
{
({ open }) => (
<>
<Menu.Button className={`flex items-center justify-center h-7 rounded-md hover:bg-gray-50 ${open && 'bg-gray-50'} cursor-pointer`}>
<Menu.Button className={`flex items-center justify-center h-7 p-1 pr-2 rounded-md hover:bg-state-base-hover ${open && 'bg-state-base-hover'} cursor-pointer`}>
<NotionIcon
className='ml-1 mr-2'
className='mr-2'
src={currentWorkspace?.workspace_icon}
name={currentWorkspace?.workspace_name}
/>
<div className='mr-1 w-[90px] text-left text-sm font-medium text-text-secondary truncate' title={currentWorkspace?.workspace_name}>{currentWorkspace?.workspace_name}</div>
<div className='mr-1 px-1 h-[18px] bg-primary-50 rounded-lg text-xs font-medium text-text-accent'>{currentWorkspace?.pages.length}</div>
{/* <div className='mr-1 px-1 h-[18px] bg-primary-50 rounded-lg text-xs font-medium text-text-accent'>{currentWorkspace?.pages.length}</div> */}
<RiArrowDownSLine className='w-4 h-4 text-text-secondary' />
</Menu.Button>
<Transition
@ -46,19 +44,16 @@ export default function WorkspaceSelector({
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
className={cn(
s.popup,
`absolute left-0 top-8 w-80
origin-top-right rounded-lg bg-white
border-[0.5px] border-gray-200`,
)}
className='absolute left-0 top-8 z-10 w-80
origin-top-right rounded-lg bg-components-panel-bg-blur
border-[0.5px] border-components-panel-border shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'
>
<div className="p-1 max-h-50 overflow-auto">
{
items.map(item => (
<Menu.Item key={item.workspace_id}>
<div
className='flex items-center px-3 h-9 hover:bg-gray-50 cursor-pointer'
className='flex items-center px-3 h-9 rounded-lg hover:bg-state-base-hover cursor-pointer'
onClick={() => onSelect(item.workspace_id)}
>
<NotionIcon
@ -66,8 +61,8 @@ export default function WorkspaceSelector({
src={item.workspace_icon}
name={item.workspace_name}
/>
<div className='grow mr-2 text-sm text-gray-700 truncate' title={item.workspace_name}>{item.workspace_name}</div>
<div className='shrink-0 text-xs font-medium text-primary-600'>
<div className='grow mr-2 system-sm-medium text-text-secondary truncate' title={item.workspace_name}>{item.workspace_name}</div>
<div className='shrink-0 system-xs-medium text-text-accent'>
{item.pages.length} {t('common.dataSource.notion.selector.pageSelected')}
</div>
</div>