AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-19 23:59:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: account page dark mode (#11977)

Browse Source
This commit is contained in:
Yi Xiao 2024-12-23 11:17:49 +08:00 committed by GitHub
parent 39df994ff9
commit 74b1b60125
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 165 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/app/account/account-page/index.tsx
View File

@ -18,10 +18,10 @@ import { IS_CE_EDITION } from '@/config'
import Input from '@/app/components/base/input'
const titleClassName = `
text-sm font-medium text-gray-900
system-sm-semibold text-text-secondary
`
const descriptionClassName = `
mt-1 text-xs font-normal text-gray-500
mt-1 body-xs-regular text-text-tertiary
`
const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
@ -122,7 +122,7 @@ export default function AccountPage() {
<div className='mr-3'>
<AppIcon size='tiny' />
</div>
<div className='mt-[3px] text-xs font-medium text-gray-700 leading-[18px]'>{item.name}</div>
<div className='mt-[3px] system-sm-medium text-text-secondary'>{item.name}</div>
</div>
)
}
@ -130,7 +130,7 @@ export default function AccountPage() {
return (
<>
<div className='pt-2 pb-3'>
<h4 className='title-2xl-semi-bold text-primary'>{t('common.account.myAccount')}</h4>
<h4 className='title-2xl-semi-bold text-text-primary'>{t('common.account.myAccount')}</h4>
</div>
<div className='mb-8 p-6 rounded-xl flex items-center bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1'>
<Avatar name={userProfile.name} size={64} />
@ -142,10 +142,10 @@ export default function AccountPage() {
<div className='mb-8'>
<div className={titleClassName}>{t('common.account.name')}</div>
<div className='flex items-center justify-between gap-2 w-full mt-2'>
<div className='flex-1 bg-gray-100 rounded-md p-2 system-sm-regular text-components-input-text-filled '>
<div className='flex-1 bg-components-input-bg-normal rounded-lg p-2 system-sm-regular text-components-input-text-filled '>
<span className='pl-1'>{userProfile.name}</span>
</div>
<div className=' bg-gray-100 rounded-md py-2 px-3 cursor-pointer system-sm-medium text-components-input-text-filled' onClick={handleEditName}>
<div className='bg-components-button-tertiary-bg rounded-lg py-2 px-3 cursor-pointer system-sm-medium text-components-button-tertiary-text' onClick={handleEditName}>
{t('common.operation.edit')}
</div>
</div>
@ -153,7 +153,7 @@ export default function AccountPage() {
<div className='mb-8'>
<div className={titleClassName}>{t('common.account.email')}</div>
<div className='flex items-center justify-between gap-2 w-full mt-2'>
<div className='flex-1 bg-gray-100 rounded-md p-2 system-sm-regular text-components-input-text-filled '>
<div className='flex-1 bg-components-input-bg-normal rounded-lg p-2 system-sm-regular text-components-input-text-filled '>
<span className='pl-1'>{userProfile.email}</span>
</div>
</div>
@ -162,14 +162,14 @@ export default function AccountPage() {
systemFeatures.enable_email_password_login && (
<div className='mb-8 flex justify-between gap-2'>
<div>
<div className='mb-1 text-sm font-medium text-gray-900'>{t('common.account.password')}</div>
<div className='mb-2 text-xs text-gray-500'>{t('common.account.passwordTip')}</div>
<div className='mb-1 system-sm-semibold text-text-secondary'>{t('common.account.password')}</div>
<div className='mb-2 body-xs-regular text-text-tertiary'>{t('common.account.passwordTip')}</div>
</div>
<Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
</div>
)
}
<div className='mb-6 border-[0.5px] border-gray-100' />
<div className='mb-6 border-[1px] border-divider-subtle' />
<div className='mb-8'>
<div className={titleClassName}>{t('common.account.langGeniusAccount')}</div>
<div className={descriptionClassName}>{t('common.account.langGeniusAccountTip')}</div>
@ -181,7 +181,7 @@ export default function AccountPage() {
wrapperClassName='mt-2'
/>
)}
{!IS_CE_EDITION && <Button className='mt-2 text-[#D92D20]' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
{!IS_CE_EDITION && <Button className='mt-2 text-components-button-destructive-secondary-text' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
</div>
{
editNameModalVisible && (
@ -190,7 +190,7 @@ export default function AccountPage() {
onClose={() => setEditNameModalVisible(false)}
className={s.modal}
>
<div className='mb-6 text-lg font-medium text-gray-900'>{t('common.account.editName')}</div>
<div className='mb-6 title-2xl-semi-bold text-text-primary'>{t('common.account.editName')}</div>
<div className={titleClassName}>{t('common.account.name')}</div>
<Input className='mt-2'
value={editName}
@ -219,7 +219,7 @@ export default function AccountPage() {
}}
className={s.modal}
>
<div className='mb-6 text-lg font-medium text-gray-900'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
<div className='mb-6 title-2xl-semi-bold text-text-primary'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
{userProfile.is_password_set && (
<>
<div className={titleClassName}>{t('common.account.currentPassword')}</div>
@ -242,7 +242,7 @@ export default function AccountPage() {
</div>
</>
)}
<div className='mt-8 text-sm font-medium text-gray-900'>
<div className='mt-8 system-sm-semibold text-text-secondary'>
{userProfile.is_password_set ? t('common.account.newPassword') : t('common.account.password')}
</div>
<div className='relative mt-2'>
@ -261,7 +261,7 @@ export default function AccountPage() {
</Button>
</div>
</div>
<div className='mt-8 text-sm font-medium text-gray-900'>{t('common.account.confirmPassword')}</div>
<div className='mt-8 system-sm-semibold text-text-secondary'>{t('common.account.confirmPassword')}</div>
<div className='relative mt-2'>
<Input
type={showConfirmPassword ? 'text' : 'password'}
@ -305,13 +305,13 @@ export default function AccountPage() {
title={t('common.account.delete')}
content={
<>
<div className='my-1 text-[#D92D20] text-sm leading-5'>
<div className='my-1 text-text-destructive body-md-medium'>
{t('common.account.deleteTip')}
</div>
<div className='mt-3 text-sm leading-5'>
<span>{t('common.account.deleteConfirmTip')}</span>
<a
className='text-primary-600 cursor'
className='text-text-accent cursor'
href={`mailto:support@dify.ai?subject=Delete Account Request&body=Delete Account: ${userProfile.email}`}
target='_blank'
rel='noreferrer noopener'
@ -323,7 +323,7 @@ export default function AccountPage() {
support@dify.ai
</a>
</div>
<div className='my-2 px-3 py-2 rounded-lg bg-gray-100 text-sm font-medium leading-5 text-gray-800'>{`${t('common.account.delete')}: ${userProfile.email}`}</div>
<div className='my-2 px-3 py-2 rounded-lg bg-components-input-bg-active border border-components-input-border-active system-sm-regular text-components-input-text-filled'>{`${t('common.account.delete')}: ${userProfile.email}`}</div>
</>
}
confirmText={t('common.operation.ok') as string}

12
web/app/account/avatar.tsx
View File

@ -40,9 +40,9 @@ export default function AppSelector() {
className={`
inline-flex items-center
rounded-[20px] p-1x text-sm
text-gray-700 hover:bg-gray-200
text-text-primary
mobile:px-1
${open && 'bg-gray-200'}
${open && 'bg-components-panel-bg-blur'}
`}
>
<Avatar name={userProfile.name} size={32} />
@ -60,7 +60,7 @@ export default function AppSelector() {
<Menu.Items
className="
absolute -right-2 -top-1 w-60 max-w-80
divide-y divide-gray-100 origin-top-right rounded-lg bg-white
divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
shadow-lg
"
>
@ -78,10 +78,10 @@ export default function AppSelector() {
<Menu.Item>
<div className='p-1' onClick={() => handleLogout()}>
<div
className='flex items-center justify-start h-9 px-3 rounded-lg cursor-pointer group hover:bg-gray-50'
className='flex items-center justify-start h-9 px-3 rounded-lg cursor-pointer group hover:bg-state-base-hover'
>
<LogOut01 className='w-4 h-4 text-gray-500 flex mr-1' />
<div className='font-normal text-[14px] text-gray-700'>{t('common.userProfile.logout')}</div>
<LogOut01 className='w-4 h-4 text-text-tertiary flex mr-1' />
<div className='font-normal text-[14px] text-text-secondary'>{t('common.userProfile.logout')}</div>
</div>
</div>
</Menu.Item>

2
web/app/account/layout.tsx
View File

@ -21,7 +21,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
<HeaderWrapper>
<Header />
</HeaderWrapper>
<div className='relative flex flex-col overflow-y-auto bg-white shrink-0 h-0 grow'>
<div className='relative flex flex-col overflow-y-auto bg-components-panel-bg shrink-0 h-0 grow'>
{children}
</div>
</ModalContextProvider>

12
web/app/components/base/modal/index.tsx
View File

@ -1,6 +1,6 @@
import { Dialog, Transition } from '@headlessui/react'
import { Fragment } from 'react'
import { XMarkIcon } from '@heroicons/react/24/outline'
import { RiCloseLine } from '@remixicon/react'
import classNames from '@/utils/classnames'
// https://headlessui.com/react/dialog
@ -39,7 +39,7 @@ export default function Modal({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-25" />
<div className="fixed inset-0 bg-background-overlay-fullscreen" />
</Transition.Child>
<div
@ -66,16 +66,16 @@ export default function Modal({
)}>
{title && <Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-text-primary"
className="title-2xl-semi-bold text-text-primary"
>
{title}
</Dialog.Title>}
{description && <Dialog.Description className='text-text-tertiary text-xs font-normal mt-2'>
{description && <Dialog.Description className='text-text-secondary body-md-regular mt-2'>
{description}
</Dialog.Description>}
{closable
&& <div className='absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'>
<XMarkIcon className='w-4 h-4 text-text-tertiary' onClick={
&& <div className='absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-state-base-hover'>
<RiCloseLine className='w-4 h-4 text-text-tertiary' onClick={
(e) => {
e.stopPropagation()
onClose()

17
web/app/components/base/select/index.tsx
View File

@ -2,7 +2,8 @@
import type { FC } from 'react'
import React, { Fragment, useEffect, useState } from 'react'
import { Combobox, Listbox, Transition } from '@headlessui/react'
import { CheckIcon, ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid'
import { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid'
import { RiCheckLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import classNames from '@/utils/classnames'
import {
@ -152,7 +153,7 @@ const Select: FC<ISelectProps> = ({
'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
)}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
<RiCheckLine className="h-4 w-4" aria-hidden="true" />
</span>
)}
</>
@ -210,7 +211,7 @@ const SimpleSelect: FC<ISelectProps> = ({
<div className={classNames('group/simple-select relative h-9', wrapperClassName)}>
{renderTrigger && <Listbox.Button className='w-full'>{renderTrigger(selectedItem)}</Listbox.Button>}
{!renderTrigger && (
<Listbox.Button className={classNames(`flex items-center w-full h-full rounded-lg border-0 bg-gray-100 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover/simple-select:bg-state-base-hover-alt ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
<Listbox.Button className={classNames(`flex items-center w-full h-full rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover-alt group-hover/simple-select:bg-state-base-hover-alt ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
<span className={classNames('block truncate text-left system-sm-regular text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2">
{(selectedItem && !notClearable)
@ -243,13 +244,13 @@ const SimpleSelect: FC<ISelectProps> = ({
leaveTo="opacity-0"
>
<Listbox.Options className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}>
<Listbox.Options className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg-blur py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}>
{items.map((item: Item) => (
<Listbox.Option
key={item.value}
className={({ active }) =>
classNames(
`relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''}`,
'relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-state-base-hover text-text-secondary',
optionClassName,
)
}
@ -265,10 +266,10 @@ const SimpleSelect: FC<ISelectProps> = ({
{selected && !hideChecked && (
<span
className={classNames(
'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
'absolute inset-y-0 right-0 flex items-center pr-4 text-text-accent',
)}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
<RiCheckLine className="h-4 w-4" aria-hidden="true" />
</span>
)}
</>)}
@ -369,7 +370,7 @@ const PortalSelect: FC<PortalSelectProps> = ({
{item.name}
</span>
{!hideChecked && item.value === value && (
<CheckIcon className='shrink-0 h-4 w-4 text-text-accent' />
<RiCheckLine className='shrink-0 h-4 w-4 text-text-accent' />
)}
</div>
))}

35
web/app/components/header/account-dropdown/index.tsx
View File

@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
import { Fragment, useState } from 'react'
import { useRouter } from 'next/navigation'
import { useContext } from 'use-context-selector'
import { RiArrowDownSLine } from '@remixicon/react'
import { RiArrowDownSLine, RiLogoutBoxRLine } from '@remixicon/react'
import Link from 'next/link'
import { Menu, Transition } from '@headlessui/react'
import Indicator from '../indicator'
@ -16,7 +16,6 @@ import Avatar from '@/app/components/base/avatar'
import { logout } from '@/service/common'
import { useAppContext } from '@/context/app-context'
import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
import { useModalContext } from '@/context/modal-context'
import { LanguagesSupported } from '@/i18n/language'
import { useProviderContext } from '@/context/provider-context'
@ -28,8 +27,8 @@ export type IAppSelector = {
export default function AppSelector({ isMobile }: IAppSelector) {
const itemClassName = `
flex items-center w-full h-9 px-3 text-gray-700 text-[14px]
rounded-lg font-normal hover:bg-gray-50 cursor-pointer
flex items-center w-full h-9 px-3 text-text-secondary system-md-regular
rounded-lg hover:bg-state-base-hover cursor-pointer
`
const router = useRouter()
const [aboutVisible, setAboutVisible] = useState(false)
@ -89,7 +88,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<Menu.Items
className="
absolute right-0 mt-1.5 w-60 max-w-80
divide-y divide-gray-100 origin-top-right rounded-lg bg-white
divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
shadow-lg
"
>
@ -97,13 +96,13 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div className='flex flex-nowrap items-center px-4 py-[13px]'>
<Avatar name={userProfile.name} size={36} className='mr-3' />
<div className='grow'>
<div className='leading-5 font-normal text-[14px] text-gray-800 break-all'>{userProfile.name}</div>
<div className='leading-[18px] text-xs font-normal text-gray-500 break-all'>{userProfile.email}</div>
<div className='system-md-medium text-text-primary break-all'>{userProfile.name}</div>
<div className='system-xs-regular text-text-tertiary break-all'>{userProfile.email}</div>
</div>
</div>
</Menu.Item>
<div className='px-1 py-1'>
<div className='mt-2 px-3 text-xs font-medium text-gray-500'>{t('common.userProfile.workspace')}</div>
<div className='mt-2 px-3 text-xs font-medium text-text-tertiary'>{t('common.userProfile.workspace')}</div>
<WorkplaceSelector />
</div>
<div className="px-1 py-1">
@ -113,7 +112,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
href='/account'
target='_self' rel='noopener noreferrer'>
<div>{t('common.account.account')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
<ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</Link>
</Menu.Item>
<Menu.Item>
@ -127,7 +126,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)}
target='_blank' rel='noopener noreferrer'>
<div>{t('common.userProfile.emailSupport')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
<ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</a>
</Menu.Item>}
<Menu.Item>
@ -136,7 +135,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
href='https://github.com/langgenius/dify/discussions/categories/feedbacks'
target='_blank' rel='noopener noreferrer'>
<div>{t('common.userProfile.communityFeedback')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
<ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</Link>
</Menu.Item>
<Menu.Item>
@ -145,7 +144,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
href='https://discord.gg/5AEfbxcd9k'
target='_blank' rel='noopener noreferrer'>
<div>{t('common.userProfile.community')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
<ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</Link>
</Menu.Item>
<Menu.Item>
@ -156,7 +155,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
}
target='_blank' rel='noopener noreferrer'>
<div>{t('common.userProfile.helpCenter')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
<ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</Link>
</Menu.Item>
<Menu.Item>
@ -165,7 +164,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
href='https://roadmap.dify.ai'
target='_blank' rel='noopener noreferrer'>
<div>{t('common.userProfile.roadmap')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
<ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</Link>
</Menu.Item>
{
@ -174,7 +173,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div className={classNames(itemClassName, 'justify-between')} onClick={() => setAboutVisible(true)}>
<div>{t('common.userProfile.about')}</div>
<div className='flex items-center'>
<div className='mr-2 text-xs font-normal text-gray-500'>{langeniusVersionInfo.current_version}</div>
<div className='mr-2 system-xs-regular text-text-tertiary'>{langeniusVersionInfo.current_version}</div>
<Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
</div>
</div>
@ -185,10 +184,10 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<Menu.Item>
<div className='p-1' onClick={() => handleLogout()}>
<div
className='flex items-center justify-between h-9 px-3 rounded-lg cursor-pointer group hover:bg-gray-50'
className='flex items-center justify-between h-9 px-3 rounded-lg cursor-pointer group hover:bg-state-base-hover'
>
<div className='font-normal text-[14px] text-gray-700'>{t('common.userProfile.logout')}</div>
<LogOut01 className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
<div className='system-md-regular text-text-secondary'>{t('common.userProfile.logout')}</div>
<RiLogoutBoxRLine className='hidden w-4 h-4 text-text-tertiary group-hover:flex' />
</div>
</div>
</Menu.Item>

10
web/app/components/header/account-setting/collapse/index.tsx
View File

@ -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)}>

1
web/app/components/header/account-setting/data-source-page/index.tsx
View File

@ -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} />

14
web/app/components/header/account-setting/data-source-page/panel/config-item.tsx
View File

@ -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>
)
}

24
web/app/components/header/account-setting/data-source-page/panel/index.tsx
View File

@ -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'>
{

14
web/app/components/header/account-setting/index.tsx
View File

@ -152,14 +152,14 @@ export default function AccountSetting({
wrapperClassName='pt-[60px]'
>
<div className='flex'>
<div className='w-[44px] sm:w-[200px] px-[1px] py-4 sm:p-4 border border-gray-100 shrink-0 sm:shrink-1 flex flex-col items-center sm:items-start'>
<div className='mb-8 ml-0 sm:ml-2 text-sm sm:text-base font-medium leading-6 text-gray-900'>{t('common.userProfile.settings')}</div>
<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-4'>
{!isCurrentWorkspaceDatasetOperator && (
<div className='px-2 mb-[6px] text-[10px] sm:text-xs font-medium text-gray-500'>{menuItem.name}</div>
<div className='px-2 mb-[6px] sm:text-xs system-xs-medium-uppercase text-text-tertiary'>{menuItem.name}</div>
)}
<div>
{
@ -168,7 +168,7 @@ export default function AccountSetting({
key={item.key}
className={`
flex items-center h-[37px] mb-[2px] text-sm cursor-pointer rounded-lg
${activeMenu === item.key ? 'font-semibold text-primary-600 bg-primary-50' : 'font-light text-gray-700'}
${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)}
@ -185,7 +185,7 @@ export default function AccountSetting({
</div>
</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-white text-base font-medium text-gray-900 z-20', scrolled && scrolledClassName)}>
<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 && (
@ -193,8 +193,8 @@ export default function AccountSetting({
)
}
<div className='grow flex justify-end'>
<div className='flex items-center justify-center -mr-4 w-6 h-6 cursor-pointer' onClick={onCancel}>
<RiCloseLine className='w-4 h-4 text-gray-400' />
<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>

2
web/app/components/header/account-setting/language-page/index.tsx
View File

@ -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() {

22
web/app/components/header/account-setting/members-page/index.tsx
View File

@ -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>

2
web/app/components/header/header-wrapper.tsx
View File

@ -11,7 +11,7 @@ const HeaderWrapper = ({
children,
}: HeaderWrapperProps) => {
const pathname = usePathname()
const isBordered = ['/apps', '/datasets', '/datasets/create', '/tools', '/account'].includes(pathname)
const isBordered = ['/apps', '/datasets', '/datasets/create', '/tools'].includes(pathname)
return (
<div className={classNames(

2
web/app/components/header/index.tsx
View File

@ -50,7 +50,7 @@ const Header = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedSegment])
return (
<div className='flex flex-1 items-center justify-between px-4'>
<div className='flex flex-1 items-center justify-between px-4 bg-background-body'>
<div className='flex items-center'>
{isMobile && <div
className='flex items-center justify-center h-8 w-8 cursor-pointer'

20
web/app/components/header/indicator/index.tsx
View File

@ -17,20 +17,20 @@ type ColorMap = {
}
const BACKGROUND_MAP: ColorMap = {
green: 'bg-[#31C48D]',
orange: 'bg-[#FF5A1F]',
red: 'bg-[#F04438]',
blue: 'bg-[#36BFFA]',
green: 'bg-components-badge-status-light-success-bg',
orange: 'bg-components-badge-status-light-warning-bg',
red: 'bg-components-badge-status-light-error-bg',
blue: 'bg-components-badge-status-light-normal-bg',
yellow: 'bg-[#FDB022]',
gray: 'bg-[#D0D5DD]',
gray: 'bg-components-badge-status-light-disabled-bg',
}
const BORDER_MAP: ColorMap = {
green: 'border-[#0E9F6E]',
orange: 'border-[#D03801]',
red: 'border-[#D92D20]',
blue: 'border-[#0BA5EC]',
green: 'border-components-badge-status-light-success-border-inner',
orange: 'border-components-badge-status-light-warning-border-inner',
red: 'border-components-badge-status-light-error-border-inner',
blue: 'border-components-badge-status-light-normal-border-inner',
yellow: 'border-[#F79009]',
gray: 'border-[#98A2B3]',
gray: 'border-components-badge-status-light-disabled-border-inner',
}
const SHADOW_MAP: ColorMap = {
green: 'shadow-[0_0_5px_-3px_rgba(14,159,110,0.1),0.5px_0.5px_3px_rgba(14,159,110,0.3),inset_1.5px_1.5px_0px_rgba(255,255,255,0.2)]',

31
web/themes/manual-dark.css
View File

@ -1,6 +1,27 @@
html[data-theme="dark"] {
--color-chatbot-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.90) 0%, rgba(29, 29, 32, 0.90) 90.48%);
--color-chat-bubble-bg: linear-gradient(180deg, rgba(200, 206, 218, 0.08) 0%, rgba(200, 206, 218, 0.02) 100%);
--color-workflow-process-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
--mask-top2bottom-gray-50-to-transparent:linear-gradient(180deg, rgba(24, 24, 27, 0.08) 0%, rgba(0, 0, 0, 0.00) 100%);
}
--color-chatbot-bg: linear-gradient(
180deg,
rgba(34, 34, 37, 0.9) 0%,
rgba(29, 29, 32, 0.9) 90.48%
);
--color-chat-bubble-bg: linear-gradient(
180deg,
rgba(200, 206, 218, 0.08) 0%,
rgba(200, 206, 218, 0.02) 100%
);
--color-workflow-process-bg: linear-gradient(
90deg,
rgba(24, 24, 27, 0.25) 0%,
rgba(24, 24, 27, 0.04) 100%
);
--color-account-teams-bg: linear-gradient(
271deg,
rgba(34, 34, 37, 0.9) -0.1%,
rgba(29, 29, 32, 0.9) 98.26%
);
--mask-top2bottom-gray-50-to-transparent: linear-gradient(
180deg,
rgba(24, 24, 27, 0.08) 0%,
rgba(0, 0, 0, 0) 100%
);
}

31
web/themes/manual-light.css
View File

@ -1,6 +1,27 @@
html[data-theme="light"] {
--color-chatbot-bg: linear-gradient(180deg, rgba(249, 250, 251, 0.90) 0%, rgba(242, 244, 247, 0.90) 90.48%);
--color-chat-bubble-bg: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.60) 100%);
--color-workflow-process-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
--mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg, rgba(200, 206, 218, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%);
}
--color-chatbot-bg: linear-gradient(
180deg,
rgba(249, 250, 251, 0.9) 0%,
rgba(242, 244, 247, 0.9) 90.48%
);
--color-chat-bubble-bg: linear-gradient(
180deg,
#fff 0%,
rgba(255, 255, 255, 0.6) 100%
);
--color-workflow-process-bg: linear-gradient(
90deg,
rgba(200, 206, 218, 0.2) 0%,
rgba(200, 206, 218, 0.04) 100%
);
--color-account-teams-bg: linear-gradient(
271deg,
rgba(249, 250, 251, 0.9) -0.1%,
rgba(242, 244, 247, 0.9) 98.26%
);
--mask-top2bottom-gray-50-to-transparent: linear-gradient(
180deg,
rgba(200, 206, 218, 0.2) 0%,
rgba(255, 255, 255, 0) 100%
);
}

1
web/themes/tailwind-theme-var-define.ts
View File

@ -399,6 +399,7 @@ const vars = {
'background-default-burn': 'var(--color-background-default-burn)',
'background-overlay-fullscreen': 'var(--color-background-overlay-fullscreen)',
'background-default-lighter': 'var(--color-background-default-lighter)',
'background-account-teams-bg': 'var(--color-account-teams-bg)',
'background-section': 'var(--color-background-section)',
'background-interaction-from-bg-1': 'var(--color-background-interaction-from-bg-1)',
'background-interaction-from-bg-2': 'var(--color-background-interaction-from-bg-2)',