estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Feat: dataset dark mode (#17993)

Browse Source
This commit is contained in:
KVOJJJin
2025-04-14 15:45:23 +08:00
committed by GitHub
parent cd7fd100a7
commit ed63fbaf9a
14 changed files with 38 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/datasets/create/file-preview/index.module.css
View File

@@ -29,7 +29,7 @@
.previewContent .loading {
width: 100%;
height: 180px;
background: #f9fafb center no-repeat url(../assets/Loading.svg);
background: transparent center no-repeat url(../assets/Loading.svg);
background-size: contain;
}

3
web/app/components/datasets/create/file-preview/index.tsx
View File

@@ -2,6 +2,7 @@
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { XMarkIcon } from '@heroicons/react/20/solid'
import Loading from '@/app/components/base/loading'
import s from './index.module.css'
import cn from '@/utils/classnames'
import type { CustomFile as File } from '@/models/datasets'
@@ -57,7 +58,7 @@ const FilePreview = ({
</div>
</div>
<div className={cn(s.previewContent)}>
{loading && <div className={cn(s.loading)} />}
{loading && <Loading type='area' />}
{!loading && (
<div className={cn(s.fileContent, 'body-md-regular')}>{previewContent}</div>
)}

3
web/app/components/datasets/create/notion-page-preview/index.tsx
View File

@@ -2,6 +2,7 @@
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { XMarkIcon } from '@heroicons/react/20/solid'
import Loading from '@/app/components/base/loading'
import s from './index.module.css'
import cn from '@/utils/classnames'
import type { NotionPage } from '@/models/common'
@@ -62,7 +63,7 @@ const NotionPagePreview = ({
</div>
</div>
<div className={cn(s.previewContent, 'body-md-regular')}>
{loading && <div className={cn(s.loading)} />}
{loading && <Loading type='area' />}
{!loading && (
<div className={cn(s.fileContent, 'body-md-regular')}>{previewContent}</div>
)}

7
web/app/components/datasets/create/step-one/index.module.css
View File

@@ -60,13 +60,6 @@
width: 120px;
}
.dividerLine {
margin: 32px 0;
max-width: 640px;
height: 1px;
background-color: #eaecf0;
}
.notionIcon {
background: var(--color-components-card-bg) center no-repeat url(../assets/notion.svg);
background-size: 24px;

2
web/app/components/datasets/create/step-one/index.tsx
View File

@@ -301,7 +301,7 @@ const StepOne = ({
)}
{!datasetId && (
<>
<div className={s.dividerLine} />
<div className='my-8 h-px max-w-[640px] bg-divider-regular' />
<span className="inline-flex cursor-pointer items-center text-[13px] leading-4 text-text-accent" onClick={modalShowHandle}>
<RiFolder6Line className="mr-1 size-4" />
{t('datasetCreation.stepOne.emptyDatasetCreation')}

5
web/app/components/datasets/documents/detail/index.tsx
View File

@@ -4,7 +4,7 @@ import React, { useMemo, useState } from 'react'
import { createContext, useContext, useContextSelector } from 'use-context-selector'
import { useTranslation } from 'react-i18next'
import { useRouter } from 'next/navigation'
import { RiArrowLeftLine, RiLayoutRight2Line } from '@remixicon/react'
import { RiArrowLeftLine, RiLayoutLeft2Line, RiLayoutRight2Line } from '@remixicon/react'
import { OperationAction, StatusItem } from '../list'
import DocumentPicker from '../../common/document-picker'
import Completed from './completed'
@@ -21,7 +21,6 @@ import type { ChunkingMode, ParentMode, ProcessMode } from '@/models/datasets'
import { useDatasetDetailContext } from '@/context/dataset-detail'
import FloatRightContainer from '@/app/components/base/float-right-container'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
import { LayoutRight2LineMod } from '@/app/components/base/icons/src/public/knowledge'
import { useCheckSegmentBatchImportProgress, useChildSegmentListKey, useSegmentBatchImport, useSegmentListKey } from '@/service/knowledge/use-segment'
import { useDocumentDetail, useDocumentMetadata, useInvalidDocumentList } from '@/service/knowledge/use-document'
import { useInvalid } from '@/service/use-base'
@@ -250,7 +249,7 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
>
{
showMetadata
? <LayoutRight2LineMod className='h-4 w-4 text-components-button-secondary-text' />
? <RiLayoutLeft2Line className='h-4 w-4 text-components-button-secondary-text' />
: <RiLayoutRight2Line className='h-4 w-4 text-components-button-secondary-text' />
}
</button>

3
web/app/components/datasets/hit-testing/textarea.tsx
View File

@@ -13,7 +13,6 @@ import type { ExternalKnowledgeBaseHitTestingResponse, HitTestingResponse } from
import { externalKnowledgeBaseHitTesting, hitTesting } from '@/service/datasets'
import { asyncRunSafe } from '@/utils'
import { RETRIEVE_METHOD, type RetrievalConfig } from '@/types/app'
import promptS from '@/app/components/app/configuration/config-prompt/style.module.css'
type TextAreaWithButtonIProps = {
datasetId: string
@@ -107,7 +106,7 @@ const TextAreaWithButton = ({
const icon = <Image className='size-3.5 text-util-colors-purple-purple-600' src={getIcon(retrievalMethod)} alt='' />
return (
<>
<div className={cn('relative rounded-xl', promptS.gradientBorder)}>
<div className={cn('relative rounded-xl bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 p-0.5 shadow-xs')}>
<div className='relative rounded-t-xl bg-background-section-burn pt-1.5'>
<div className="flex h-8 items-center justify-between pb-1 pl-4 pr-1.5">
<span className="text-[13px] font-semibold uppercase leading-4 text-text-secondary">

2
web/app/components/datasets/metadata/metadata-document/info-group.tsx
View File

@@ -57,7 +57,7 @@ const InfoGroup: FC<Props> = ({
}
return (
<div className={cn('bg-white', className)}>
<div className={cn(className)}>
{!noHeader && (
<div className='flex items-center justify-between'>
<div className='flex items-center space-x-1'>

16
web/app/components/datasets/settings/permission-selector/index.tsx
View File

@@ -114,17 +114,17 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
<PortalToFollowElemContent className='z-[1002]'>
<div className='relative w-[480px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm'>
<div className='p-1'>
<div className='cursor-pointer rounded-lg py-1 pl-3 pr-2 hover:bg-gray-50' onClick={() => {
<div className='cursor-pointer rounded-lg py-1 pl-3 pr-2 hover:bg-state-base-hover' onClick={() => {
onChange(DatasetPermission.onlyMe)
setOpen(false)
}}>
<div className='flex items-center gap-2'>
<Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='mr-2 shrink-0' size={24} />
<div className='mr-2 grow text-sm leading-5 text-gray-900'>{t('datasetSettings.form.permissionsOnlyMe')}</div>
<div className='mr-2 grow text-sm leading-5 text-text-primary'>{t('datasetSettings.form.permissionsOnlyMe')}</div>
{isOnlyMe && <Check className='h-4 w-4 text-primary-600' />}
</div>
</div>
<div className='cursor-pointer rounded-lg py-1 pl-3 pr-2 hover:bg-gray-50' onClick={() => {
<div className='cursor-pointer rounded-lg py-1 pl-3 pr-2 hover:bg-state-base-hover' onClick={() => {
onChange(DatasetPermission.allTeamMembers)
setOpen(false)
}}>
@@ -132,11 +132,11 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
<div className='mr-2 flex h-6 w-6 items-center justify-center rounded-lg bg-[#EEF4FF]'>
<Users01 className='h-3.5 w-3.5 text-[#444CE7]' />
</div>
<div className='mr-2 grow text-sm leading-5 text-gray-900'>{t('datasetSettings.form.permissionsAllMember')}</div>
<div className='mr-2 grow text-sm leading-5 text-text-primary'>{t('datasetSettings.form.permissionsAllMember')}</div>
{isAllTeamMembers && <Check className='h-4 w-4 text-primary-600' />}
</div>
</div>
<div className='cursor-pointer rounded-lg py-1 pl-3 pr-2 hover:bg-gray-50' onClick={() => {
<div className='cursor-pointer rounded-lg py-1 pl-3 pr-2 hover:bg-state-base-hover' onClick={() => {
onChange(DatasetPermission.partialMembers)
onMemberSelect([userProfile.id])
}}>
@@ -144,14 +144,14 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
<div className={cn('mr-2 flex h-6 w-6 items-center justify-center rounded-lg bg-[#FFF6ED]', isPartialMembers && '!bg-[#EEF4FF]')}>
<UsersPlus className={cn('h-3.5 w-3.5 text-[#FB6514]', isPartialMembers && '!text-[#444CE7]')} />
</div>
<div className='mr-2 grow text-sm leading-5 text-gray-900'>{t('datasetSettings.form.permissionsInvitedMembers')}</div>
<div className='mr-2 grow text-sm leading-5 text-text-primary'>{t('datasetSettings.form.permissionsInvitedMembers')}</div>
{isPartialMembers && <Check className='h-4 w-4 text-primary-600' />}
</div>
</div>
</div>
{isPartialMembers && (
<div className='max-h-[360px] overflow-y-auto border-t-[1px] border-gray-100 p-1'>
<div className='sticky left-0 top-0 bg-white p-2 pb-1'>
<div className='max-h-[360px] overflow-y-auto border-t-[1px] border-divider-regular p-1'>
<div className='sticky left-0 top-0 p-2 pb-1'>
<Input
showLeftIcon
showClearIcon