mirror of
https://github.com/langgenius/dify.git
synced 2026-05-05 01:48:04 +08:00
merge main
This commit is contained in:
Joel
@ -25,18 +25,18 @@ const Collapse = ({
|
||||
const toggle = () => setOpen(!open)
|
||||
|
||||
return (
|
||||
<div className={classNames('border border-gray-200 bg-gray-50 rounded-lg', wrapperClassName)}>
|
||||
<div className='flex items-center justify-between leading-[18px] px-3 py-2 text-xs font-medium text-gray-800 cursor-pointer' onClick={toggle}>
|
||||
<div className={classNames('bg-background-section-burn rounded-xl', wrapperClassName)}>
|
||||
<div className='flex items-center justify-between leading-[18px] px-3 py-2 text-xs font-medium text-text-secondary cursor-pointer' onClick={toggle}>
|
||||
{title}
|
||||
{
|
||||
open
|
||||
? <ChevronDownIcon className='w-3 h-3 text-gray-400' />
|
||||
: <ChevronRightIcon className='w-3 h-3 text-gray-400' />
|
||||
? <ChevronDownIcon className='w-3 h-3 text-components-button-tertiary-text' />
|
||||
: <ChevronRightIcon className='w-3 h-3 text-components-button-tertiary-text' />
|
||||
}
|
||||
</div>
|
||||
{
|
||||
open && (
|
||||
<div className='py-2 border-t border-t-gray-100'>
|
||||
<div className='py-1 mb-1 mx-1 border-t border-divider-subtle rounded-lg bg-components-panel-on-panel-item-bg'>
|
||||
{
|
||||
items.map(item => (
|
||||
<div key={item.key} onClick={() => onSelect && onSelect(item)}>
|
||||
|
||||
@ -12,7 +12,6 @@ export default function DataSourcePage() {
|
||||
|
||||
return (
|
||||
<div className='mb-8'>
|
||||
<div className='mb-2 text-sm font-medium text-gray-900'>{t('common.dataSource.add')}</div>
|
||||
<DataSourceNotion workspaces={notionWorkspaces} />
|
||||
<DataSourceWebsite provider={DataSourceProvider.jinaReader} />
|
||||
<DataSourceWebsite provider={DataSourceProvider.fireCrawl} />
|
||||
|
||||
@ -44,22 +44,22 @@ const ConfigItem: FC<Props> = ({
|
||||
const onChangeAuthorizedPage = notionActions?.onChangeAuthorizedPage || function () { }
|
||||
|
||||
return (
|
||||
<div className={cn(s['workspace-item'], 'flex items-center mb-1 py-1 pr-1 bg-white rounded-lg')} key={payload.id}>
|
||||
<div className={cn(s['workspace-item'], 'flex items-center mb-1 py-1 pr-1 bg-components-panel-on-panel-item-bg rounded-lg')} key={payload.id}>
|
||||
<payload.logo className='ml-3 mr-1.5' />
|
||||
<div className='grow py-[7px] leading-[18px] text-[13px] font-medium text-gray-700 truncate' title={payload.name}>{payload.name}</div>
|
||||
<div className='grow py-[7px] system-sm-medium text-text-secondary truncate' title={payload.name}>{payload.name}</div>
|
||||
{
|
||||
payload.isActive
|
||||
? <Indicator className='shrink-0 mr-[6px]' />
|
||||
? <Indicator className='shrink-0 mr-[6px]' color='green' />
|
||||
: <Indicator className='shrink-0 mr-[6px]' color='yellow' />
|
||||
}
|
||||
<div className='shrink-0 mr-3 text-xs font-medium uppercase'>
|
||||
<div className={`shrink-0 mr-3 text-xs font-medium uppercase ${payload.isActive ? 'text-util-colors-green-green-600' : 'text-util-colors-warning-warning-600'}`}>
|
||||
{
|
||||
payload.isActive
|
||||
? t(isNotion ? 'common.dataSource.notion.connected' : 'common.dataSource.website.active')
|
||||
: t(isNotion ? 'common.dataSource.notion.disconnected' : 'common.dataSource.website.inactive')
|
||||
}
|
||||
</div>
|
||||
<div className='mr-2 w-[1px] h-3 bg-gray-100' />
|
||||
<div className='mr-2 w-[1px] h-3 bg-divider-regular' />
|
||||
{isNotion && (
|
||||
<Operate payload={{
|
||||
id: payload.id,
|
||||
@ -70,8 +70,8 @@ const ConfigItem: FC<Props> = ({
|
||||
|
||||
{
|
||||
isWebsite && !readOnly && (
|
||||
<div className='p-2 text-gray-500 cursor-pointer rounded-md hover:bg-black/5' onClick={onRemove} >
|
||||
<RiDeleteBinLine className='w-4 h-4 ' />
|
||||
<div className='p-2 text-text-tertiary cursor-pointer rounded-md hover:bg-black/5' onClick={onRemove} >
|
||||
<RiDeleteBinLine className='w-4 h-4' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { PlusIcon } from '@heroicons/react/24/solid'
|
||||
import { RiAddLine } from '@remixicon/react'
|
||||
import type { ConfigItemType } from './config-item'
|
||||
import ConfigItem from './config-item'
|
||||
|
||||
@ -41,12 +41,12 @@ const Panel: FC<Props> = ({
|
||||
const isWebsite = type === DataSourceType.website
|
||||
|
||||
return (
|
||||
<div className='mb-2 border-[0.5px] border-gray-200 bg-gray-50 rounded-xl'>
|
||||
<div className='mb-2 bg-background-section-burn rounded-xl'>
|
||||
<div className='flex items-center px-3 py-[9px]'>
|
||||
<div className={cn(s[`${type}-icon`], 'w-8 h-8 mr-3 border border-gray-100 rounded-lg')} />
|
||||
<div className={cn(s[`${type}-icon`], 'w-8 h-8 mr-3 border border-divider-subtle rounded-lg bg-background-default')} />
|
||||
<div className='grow'>
|
||||
<div className='flex items-center h-5'>
|
||||
<div className='text-sm font-medium text-gray-800'>{t(`common.dataSource.${type}.title`)}</div>
|
||||
<div className='text-sm font-medium text-text-primary'>{t(`common.dataSource.${type}.title`)}</div>
|
||||
{isWebsite && (
|
||||
<div className='ml-1 leading-[18px] px-1.5 rounded-md bg-white border border-gray-100 text-xs font-medium text-gray-700'>
|
||||
<span className='text-gray-500'>{t('common.dataSource.website.with')}</span> { provider === DataSourceProvider.fireCrawl ? '🔥 Firecrawl' : 'Jina Reader'}
|
||||
@ -55,7 +55,7 @@ const Panel: FC<Props> = ({
|
||||
</div>
|
||||
{
|
||||
!isConfigured && (
|
||||
<div className='leading-5 text-xs text-gray-500'>
|
||||
<div className='system-xs-medium text-text-tertiary'>
|
||||
{t(`common.dataSource.${type}.description`)}
|
||||
</div>
|
||||
)
|
||||
@ -81,13 +81,13 @@ const Panel: FC<Props> = ({
|
||||
<>
|
||||
{isSupportList && <div
|
||||
className={
|
||||
`flex items-center px-3 py-1 min-h-7 bg-white border-[0.5px] border-gray-200 text-xs font-medium text-primary-600 rounded-md
|
||||
`flex items-center px-3 py-1 min-h-7 bg-components-button-secondary-bg border-[0.5px] border-components-button-secondary-border system-sm-medium text-components-button-secondary-accent-text rounded-md
|
||||
${!readOnly ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
|
||||
}
|
||||
onClick={onConfigure}
|
||||
>
|
||||
<PlusIcon className='w-[14px] h-[14px] mr-[5px]' />
|
||||
{t('common.dataSource.notion.addWorkspace')}
|
||||
<RiAddLine className='w-4 h-4 text-components-button-secondary-accent-text mr-[5px]' />
|
||||
{t('common.dataSource.connect')}
|
||||
</div>}
|
||||
</>
|
||||
)
|
||||
@ -98,8 +98,8 @@ const Panel: FC<Props> = ({
|
||||
{isWebsite && !isConfigured && (
|
||||
<div
|
||||
className={
|
||||
`flex items-center ml-3 px-3 h-7 bg-white border border-gray-200
|
||||
rounded-md text-xs font-medium text-gray-700
|
||||
`flex items-center ml-3 px-3 h-7 bg-components-button-secondary-bg border-[0.5px] border-components-button-secondary-border
|
||||
rounded-md text-xs font-medium text-components-button-secondary-accent-text
|
||||
${!readOnly ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
|
||||
}
|
||||
onClick={!readOnly ? onConfigure : undefined}
|
||||
@ -113,10 +113,10 @@ const Panel: FC<Props> = ({
|
||||
isConfigured && (
|
||||
<>
|
||||
<div className='flex items-center px-3 h-[18px]'>
|
||||
<div className='text-xs font-medium text-gray-500'>
|
||||
<div className='system-xs-medium text-text-tertiary'>
|
||||
{isNotion ? t('common.dataSource.notion.connectedWorkspace') : t('common.dataSource.website.configuredCrawlers')}
|
||||
</div>
|
||||
<div className='grow ml-3 border-t border-t-gray-100' />
|
||||
<div className='grow ml-3 border-t border-t-divider-subtle' />
|
||||
</div>
|
||||
<div className='px-3 pt-2 pb-3'>
|
||||
{
|
||||
|
||||
@ -148,24 +148,25 @@ export default function AccountSetting({
|
||||
show
|
||||
onClose={onCancel}
|
||||
>
|
||||
<div className='mx-auto max-w-[1048px] h-[100vh] flex'>
|
||||
<div className='w-[44px] sm:w-[224px] pl-4 pr-6 border-r border-divider-burn flex flex-col'>
|
||||
<div className='mt-6 mb-8 px-3 py-2 text-text-primary title-2xl-semi-bold'>{t('common.userProfile.settings')}</div>
|
||||
<div className='flex'>
|
||||
<div className='w-[44px] sm:w-[200px] px-[1px] py-4 sm:p-4 border border-divider-burn shrink-0 sm:shrink-1 flex flex-col items-center sm:items-start'>
|
||||
<div className='mb-8 ml-0 sm:ml-2 sm:text-base title-2xl-semi-bold text-text-primary'>{t('common.userProfile.settings')}</div>
|
||||
<div className='w-full'>
|
||||
{
|
||||
menuItems.map(menuItem => (
|
||||
<div key={menuItem.key} className='mb-2'>
|
||||
{!isCurrentWorkspaceDatasetOperator && (
|
||||
<div className='py-2 pl-3 pb-1 mb-0.5 text-text-tertiary system-xs-medium-uppercase'>{menuItem.name}</div>
|
||||
<div className='px-2 mb-[6px] sm:text-xs system-xs-medium-uppercase text-text-tertiary'>{menuItem.name}</div>
|
||||
)}
|
||||
<div>
|
||||
{
|
||||
menuItem.items.map(item => (
|
||||
<div
|
||||
key={item.key}
|
||||
className={cn(
|
||||
'flex items-center mb-0.5 p-1 pl-3 h-[37px] text-sm cursor-pointer rounded-lg',
|
||||
activeMenu === item.key ? 'bg-state-base-active text-components-menu-item-text-active system-sm-semibold' : 'text-components-menu-item-text system-sm-medium')}
|
||||
className={`
|
||||
flex items-center h-[37px] mb-[2px] text-sm cursor-pointer rounded-lg
|
||||
${activeMenu === item.key ? 'system-sm-semibold text-components-menu-item-text-active bg-state-base-active' : 'system-sm-medium text-components-menu-item-text'}
|
||||
`}
|
||||
title={item.name}
|
||||
onClick={() => setActiveMenu(item.key)}
|
||||
>
|
||||
@ -180,17 +181,19 @@ export default function AccountSetting({
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className='relative flex w-[824px]'>
|
||||
<div className='absolute top-6 -right-11 flex flex-col items-center z-[9999]'>
|
||||
<Button
|
||||
variant='tertiary'
|
||||
size='large'
|
||||
className='px-2'
|
||||
onClick={onCancel}
|
||||
>
|
||||
<RiCloseLine className='w-5 h-5' />
|
||||
</Button>
|
||||
<div className='mt-1 text-text-tertiary system-2xs-medium-uppercase'>ESC</div>
|
||||
<div ref={scrollRef} className='relative w-[824px] h-[720px] pb-4 overflow-y-auto'>
|
||||
<div className={cn('sticky top-0 px-6 py-4 flex items-center h-14 mb-4 bg-components-panel-bg title-2xl-semi-bold text-text-primary z-20', scrolled && scrolledClassName)}>
|
||||
<div className='shrink-0'>{activeItem?.name}</div>
|
||||
{
|
||||
activeItem?.description && (
|
||||
<div className='shrink-0 ml-2 text-xs text-gray-600'>{activeItem?.description}</div>
|
||||
)
|
||||
}
|
||||
<div className='grow flex justify-end'>
|
||||
<div className='z-[10] flex items-center justify-center -mr-4 p-2 cursor-pointer rounded-[10px] hover:bg-components-button-tertiary-bg' onClick={onCancel}>
|
||||
<RiCloseLine className='w-5 h-5 text-components-button-tertiary-text' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref={scrollRef} className='w-full pb-4 bg-components-panel-bg overflow-y-auto'>
|
||||
<div className={cn('sticky top-0 mx-8 pt-[27px] pb-2 mb-[18px] flex items-center bg-components-panel-bg z-20', scrolled && 'border-b border-divider-regular')}>
|
||||
|
||||
@ -13,7 +13,7 @@ import { timezones } from '@/utils/timezone'
|
||||
import { languages } from '@/i18n/language'
|
||||
|
||||
const titleClassName = `
|
||||
mb-2 text-sm font-medium text-gray-900
|
||||
mb-2 system-sm-semibold text-text-secondary
|
||||
`
|
||||
|
||||
export default function LanguagePage() {
|
||||
|
||||
@ -85,32 +85,32 @@ const MembersPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className='overflow-visible lg:overflow-visible'>
|
||||
<div className='flex items-center py-[7px] border-b border-gray-200 min-w-[480px]'>
|
||||
<div className='grow px-3 text-xs font-medium text-gray-500'>{t('common.members.name')}</div>
|
||||
<div className='shrink-0 w-[104px] text-xs font-medium text-gray-500'>{t('common.members.lastActive')}</div>
|
||||
<div className='shrink-0 w-[96px] px-3 text-xs font-medium text-gray-500'>{t('common.members.role')}</div>
|
||||
<div className='flex items-center py-[7px] border-b border-divider-regular min-w-[480px]'>
|
||||
<div className='grow px-3 system-xs-medium-uppercase text-text-tertiary'>{t('common.members.name')}</div>
|
||||
<div className='shrink-0 w-[104px] system-xs-medium-uppercase text-text-tertiary'>{t('common.members.lastActive')}</div>
|
||||
<div className='shrink-0 w-[96px] px-3 system-xs-medium-uppercase text-text-tertiary'>{t('common.members.role')}</div>
|
||||
</div>
|
||||
<div className='min-w-[480px] relative'>
|
||||
{
|
||||
accounts.map(account => (
|
||||
<div key={account.id} className='flex border-b border-gray-100'>
|
||||
<div key={account.id} className='flex border-b border-divider-subtle'>
|
||||
<div className='grow flex items-center py-2 px-3'>
|
||||
<Avatar size={24} className='mr-2' name={account.name} />
|
||||
<div className=''>
|
||||
<div className='text-[13px] font-medium text-gray-700 leading-[18px]'>
|
||||
<div className='text-text-secondary system-sm-medium'>
|
||||
{account.name}
|
||||
{account.status === 'pending' && <span className='ml-1 text-xs text-[#DC6803]'>{t('common.members.pending')}</span>}
|
||||
{userProfile.email === account.email && <span className='text-xs text-gray-500'>{t('common.members.you')}</span>}
|
||||
{account.status === 'pending' && <span className='ml-1 system-xs-regular text-[#DC6803]'>{t('common.members.pending')}</span>}
|
||||
{userProfile.email === account.email && <span className='system-xs-regular text-text-tertiary'>{t('common.members.you')}</span>}
|
||||
</div>
|
||||
<div className='text-xs text-gray-500 leading-[18px]'>{account.email}</div>
|
||||
<div className='text-text-tertiary system-xs-regular'>{account.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='shrink-0 flex items-center w-[104px] py-2 text-[13px] text-gray-700'>{dayjs(Number((account.last_active_at || account.created_at)) * 1000).locale(locale === 'zh-Hans' ? 'zh-cn' : 'en').fromNow()}</div>
|
||||
<div className='shrink-0 flex items-center w-[104px] py-2 system-xs-regular text-text-secondary'>{dayjs(Number((account.last_active_at || account.created_at)) * 1000).locale(locale === 'zh-Hans' ? 'zh-cn' : 'en').fromNow()}</div>
|
||||
<div className='shrink-0 w-[96px] flex items-center'>
|
||||
{
|
||||
((isCurrentWorkspaceOwner && account.role !== 'owner') || (isCurrentWorkspaceManager && !['owner', 'admin'].includes(account.role)))
|
||||
? <Operation member={account} operatorRole={currentWorkspace.role} onOperate={mutate} />
|
||||
: <div className='px-3 text-[13px] text-gray-700'>{RoleMap[account.role] || RoleMap.normal}</div>
|
||||
: <div className='px-3 system-xs-regular text-text-secondary'>{RoleMap[account.role] || RoleMap.normal}</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user