opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: enhance dataset components with new icons and improve layout structure

This commit is contained in:
twwu 2025-05-08 13:48:14 +08:00
parent 38f1a42ce8
commit 1fbeb3a21a
12 changed files with 183 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
View File

@ -166,7 +166,13 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
return (
<div className={cn(s.app, 'relative flex', 'overflow-hidden')}>
{appDetail && (
<AppSideBar title={appDetail.name} icon={appDetail.icon} icon_background={appDetail.icon_background as string} desc={appDetail.mode} navigation={navigation} />
<AppSideBar
title={appDetail.name}
icon={appDetail.icon}
icon_background={appDetail.icon_background as string}
desc={appDetail.mode}
navigation={navigation}
/>
)}
<div className="grow overflow-hidden bg-components-panel-bg">
{children}

157
web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
View File

@ -6,8 +6,7 @@ import useSWR from 'swr'
import { useTranslation } from 'react-i18next'
import type { RemixiconComponentType } from '@remixicon/react'
import {
RiApps2AddLine,
RiBookOpenLine,
RiAttachmentLine,
RiEqualizer2Fill,
RiEqualizer2Line,
RiFileTextFill,
@ -15,9 +14,6 @@ import {
RiFocus2Fill,
RiFocus2Line,
} from '@remixicon/react'
import {
PaperClipIcon,
} from '@heroicons/react/24/outline'
import { RiInformation2Line } from '@remixicon/react'
import classNames from '@/utils/classnames'
import { fetchDatasetDetail, fetchDatasetRelatedApps } from '@/service/datasets'
@ -33,7 +29,7 @@ import Tooltip from '@/app/components/base/tooltip'
import LinkedAppsPanel from '@/app/components/base/linked-apps-panel'
import { PipelineFill, PipelineLine } from '@/app/components/base/icons/src/vender/pipeline'
import { Divider } from '@/app/components/base/icons/src/vender/knowledge'
import { useGetDocLanguage } from '@/context/i18n'
import NoLinkedAppsPanel from '@/app/components/datasets/no-linked-apps-panel'
export type IAppDetailLayoutProps = {
children: React.ReactNode
@ -41,102 +37,69 @@ export type IAppDetailLayoutProps = {
}
type IExtraInfoProps = {
isMobile: boolean
relatedApps?: RelatedAppResponse
documentCount?: number
expand: boolean
}
const ExtraInfo = React.memo(({
isMobile,
relatedApps,
documentCount,
expand,
}: IExtraInfoProps) => {
const { t } = useTranslation()
const docLanguage = useGetDocLanguage()
const hasRelatedApps = relatedApps?.data && relatedApps?.data?.length > 0
const relatedAppsTotal = relatedApps?.data?.length || 0
return (
<div>
{hasRelatedApps && (
<>
{!isMobile && (
<div className='flex items-center gap-x-0.5'>
<div className='flex grow flex-col px-2 pb-1.5 pt-1'>
<div className='system-md-semibold-uppercase text-text-secondary'>
{documentCount || '--'}
</div>
<div className='system-2xs-medium-uppercase text-text-tertiary'>
{t('common.datasetMenus.documents')}
</div>
</div>
<div className='py-2 pl-0.5 pr-1.5'>
<Divider className='text-test-divider-regular h-full w-fit' />
</div>
<div className='flex grow flex-col px-2 pb-1.5 pt-1'>
<div className='system-md-semibold-uppercase text-text-secondary'>
{relatedAppsTotal || '--'}
</div>
<Tooltip
position='bottom-start'
noDecoration
needsDelay
popupContent={
<LinkedAppsPanel
relatedApps={relatedApps.data}
isMobile={isMobile}
/>
}
>
<div className='system-2xs-medium-uppercase flex cursor-pointer items-center gap-x-0.5 text-text-tertiary'>
<span>{t('common.datasetMenus.relatedApp')}</span>
<RiInformation2Line className='size-3' />
</div>
</Tooltip>
</div>
<>
{!expand && (
<div className='flex items-center gap-x-0.5'>
<div className='flex grow flex-col px-2 pb-1.5 pt-1'>
<div className='system-md-semibold-uppercase text-text-secondary'>
{documentCount ?? '--'}
</div>
)}
{isMobile && (
<div className={classNames('uppercase text-xs text-text-tertiary font-medium pb-2 pt-4', 'flex items-center justify-center !px-0 gap-1')}>
{relatedAppsTotal || '--'}
<PaperClipIcon className='h-4 w-4 text-text-secondary' />
<div className='system-2xs-medium-uppercase text-text-tertiary'>
{t('common.datasetMenus.documents')}
</div>
)}
</>
)}
{!hasRelatedApps && !expand && (
<Tooltip
position='right'
noDecoration
needsDelay
popupContent={
<div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4'>
<div className='inline-flex rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle p-2'>
<RiApps2AddLine className='h-4 w-4 text-text-tertiary' />
</div>
<div className='my-2 text-xs text-text-tertiary'>{t('common.datasetMenus.emptyTip')}</div>
<a
className='mt-2 inline-flex cursor-pointer items-center text-xs text-text-accent'
href={`https://docs.dify.ai/${docLanguage}/guides/knowledge-base/integrate-knowledge-within-application`}
target='_blank' rel='noopener noreferrer'
>
<RiBookOpenLine className='mr-1 text-text-accent' />
{t('common.datasetMenus.viewDoc')}
</a>
</div>
}
>
<div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 text-text-secondary'>
<span>{t('common.datasetMenus.noRelatedApp')}</span>
<RiInformation2Line className='h-4 w-4' />
</div>
</Tooltip>
<div className='py-2 pl-0.5 pr-1.5'>
<Divider className='text-test-divider-regular h-full w-fit' />
</div>
<div className='flex grow flex-col px-2 pb-1.5 pt-1'>
<div className='system-md-semibold-uppercase text-text-secondary'>
{relatedAppsTotal ?? '--'}
</div>
<Tooltip
position='bottom-start'
noDecoration
needsDelay
popupContent={
hasRelatedApps ? (
<LinkedAppsPanel
relatedApps={relatedApps.data}
isMobile={expand}
/>
) : <NoLinkedAppsPanel />
}
>
<div className='system-2xs-medium-uppercase flex cursor-pointer items-center gap-x-0.5 text-text-tertiary'>
<span>{t('common.datasetMenus.relatedApp')}</span>
<RiInformation2Line className='size-3' />
</div>
</Tooltip>
</div>
</div>
)}
</div>
{expand && (
<div className={classNames('uppercase text-xs text-text-tertiary font-medium pb-2 pt-4', 'flex items-center justify-center !px-0 gap-1')}>
{relatedAppsTotal ?? '--'}
<RiAttachmentLine className='size-4 text-text-secondary' />
</div>
)}
</>
)
})
@ -203,25 +166,27 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
return (
<div className='flex grow overflow-hidden'>
{!hideSideBar && <AppSideBar
title={datasetRes?.name || '--'}
icon={datasetRes?.icon_info?.icon || 'https://static.dify.ai/images/dataset-default-icon.png'}
icon_background={datasetRes?.icon_info?.icon_background || '#F5F5F5'}
desc={datasetRes?.description || '--'}
isExternal={datasetRes?.provider === 'external'}
navigation={navigation}
extraInfo={
!isCurrentWorkspaceDatasetOperator
? mode => <ExtraInfo isMobile={mode === 'collapse'} relatedApps={relatedApps} expand={mode === 'collapse'} documentCount={datasetRes?.document_count} />
: undefined
}
iconType={datasetRes?.data_source_type === DataSourceType.NOTION ? 'notion' : 'dataset'}
/>}
<DatasetDetailContext.Provider value={{
indexingTechnique: datasetRes?.indexing_technique,
dataset: datasetRes,
mutateDatasetRes: () => mutateDatasetRes(),
}}>
{!hideSideBar && (
<AppSideBar
title={datasetRes?.name || '--'}
icon={datasetRes?.icon_info?.icon || 'https://static.dify.ai/images/dataset-default-icon.png'}
icon_background={datasetRes?.icon_info?.icon_background || '#F5F5F5'}
desc={datasetRes?.description || '--'}
isExternal={datasetRes?.provider === 'external'}
navigation={navigation}
extraInfo={
!isCurrentWorkspaceDatasetOperator
? mode => <ExtraInfo relatedApps={relatedApps} expand={mode === 'collapse'} documentCount={datasetRes?.document_count} />
: undefined
}
iconType={datasetRes?.data_source_type === DataSourceType.NOTION ? 'notion' : 'dataset'}
/>
)}
<div className="grow overflow-hidden bg-background-default-subtle">{children}</div>
</DatasetDetailContext.Provider>
</div>

75
web/app/components/app-sidebar/dataset-info.tsx
View File

@ -3,41 +3,74 @@ import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import AppIcon from '../base/app-icon'
const DatasetSvg = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M0.833497 5.13481C0.833483 4.69553 0.83347 4.31654 0.858973 4.0044C0.88589 3.67495 0.94532 3.34727 1.10598 3.03195C1.34567 2.56155 1.72812 2.17909 2.19852 1.93941C2.51384 1.77875 2.84152 1.71932 3.17097 1.6924C3.48312 1.6669 3.86209 1.66691 4.30137 1.66693L7.62238 1.66684C8.11701 1.66618 8.55199 1.66561 8.95195 1.80356C9.30227 1.92439 9.62134 2.12159 9.88607 2.38088C10.1883 2.67692 10.3823 3.06624 10.603 3.50894L11.3484 5.00008H14.3679C15.0387 5.00007 15.5924 5.00006 16.0434 5.03691C16.5118 5.07518 16.9424 5.15732 17.3468 5.36339C17.974 5.68297 18.4839 6.19291 18.8035 6.82011C19.0096 7.22456 19.0917 7.65515 19.13 8.12356C19.1668 8.57455 19.1668 9.12818 19.1668 9.79898V13.5345C19.1668 14.2053 19.1668 14.7589 19.13 15.2099C19.0917 15.6784 19.0096 16.1089 18.8035 16.5134C18.4839 17.1406 17.974 17.6505 17.3468 17.9701C16.9424 18.1762 16.5118 18.2583 16.0434 18.2966C15.5924 18.3334 15.0387 18.3334 14.3679 18.3334H5.63243C4.96163 18.3334 4.40797 18.3334 3.95698 18.2966C3.48856 18.2583 3.05798 18.1762 2.65353 17.9701C2.02632 17.6505 1.51639 17.1406 1.19681 16.5134C0.990734 16.1089 0.908597 15.6784 0.870326 15.2099C0.833478 14.7589 0.833487 14.2053 0.833497 13.5345V5.13481ZM7.51874 3.33359C8.17742 3.33359 8.30798 3.34447 8.4085 3.37914C8.52527 3.41942 8.63163 3.48515 8.71987 3.57158C8.79584 3.64598 8.86396 3.7579 9.15852 4.34704L9.48505 5.00008L2.50023 5.00008C2.50059 4.61259 2.50314 4.34771 2.5201 4.14012C2.5386 3.91374 2.57 3.82981 2.59099 3.7886C2.67089 3.6318 2.79837 3.50432 2.95517 3.42442C2.99638 3.40343 3.08031 3.37203 3.30669 3.35353C3.54281 3.33424 3.85304 3.33359 4.3335 3.33359H7.51874Z" fill="#444CE7" />
</svg>
import Effect from '../base/effect'
import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
import { DOC_FORM_ICON_WITH_BG, DOC_FORM_TEXT } from '@/models/datasets'
import { useKnowledge } from '@/hooks/use-knowledge'
import Badge from '../base/badge'
type Props = {
isExternal?: boolean
name: string
description: string
expand: boolean
extraInfo?: React.ReactNode
}
const DatasetInfo: FC<Props> = ({
name,
description,
isExternal,
expand,
extraInfo,
}) => {
const { t } = useTranslation()
const dataset = useDatasetDetailContextWithSelector(state => state.dataset)
const iconInfo = dataset!.icon_info || {
icon: '📙',
icon_type: 'emoji',
icon_background: '#FFF4ED',
icon_url: '',
}
const isExternal = dataset!.provider === 'external'
const { formatIndexingTechniqueAndMethod } = useKnowledge()
const Icon = isExternal ? DOC_FORM_ICON_WITH_BG.external : DOC_FORM_ICON_WITH_BG[dataset!.doc_form]
return (
<div className='pl-1 pt-1'>
<div className='mr-3 shrink-0'>
<AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />
</div>
{expand && (
<div className='mt-2'>
<div className='system-md-semibold text-text-secondary'>
{name}
<div className='relative flex flex-col p-2'>
<Effect className='-left-5 top-[-22px] opacity-15' />
<div className='flex flex-col gap-y-2 p-2'>
<div className='relative w-fit'>
<AppIcon
size='large'
iconType={iconInfo.icon_type}
icon={iconInfo.icon}
background={iconInfo.icon_background}
imageUrl={iconInfo.icon_url}
/>
<div className='absolute -bottom-1 -right-1 z-10'>
<Icon className='size-4' />
</div>
<div className='system-2xs-medium-uppercase mt-1 text-text-tertiary'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</div>
<div className='system-xs-regular my-3 text-text-tertiary first-letter:capitalize'>{description}</div>
</div>
)}
{expand && dataset && (
<>
<div className='flex flex-col gap-y-1'>
<div
className='system-md-semibold truncate text-text-secondary'
title={dataset.name}
>
{dataset.name}
</div>
<div className='system-2xs-medium-uppercase text-text-tertiary'>
{isExternal && t('dataset.externalTag')}
{!isExternal && (
<div className='flex items-center gap-x-1'>
<Badge>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`)}</Badge>
<Badge>{formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method)}</Badge>
</div>
)}
</div>
</div>
<p className='system-xs-regular line-clamp-3 text-text-tertiary first-letter:capitalize'>
{dataset.description}
</p>
</>
)}
</div>
{extraInfo}
</div>
)

3
web/app/components/app-sidebar/index.tsx
View File

@ -73,9 +73,6 @@ const AppDetailNav = ({
)}
{iconType === 'dataset' && (
<DatasetInfo
name={title}
description={desc}
isExternal={isExternal}
expand={expand}
extraInfo={extraInfo && extraInfo(appSidebarExpand)}
/>

18
web/app/components/base/effect/index.tsx Normal file
View File

@ -0,0 +1,18 @@
import React from 'react'
import cn from '@/utils/classnames'
type EffectProps = {
className?: string
}
const Effect = ({
className,
}: EffectProps) => {
return (
<div
className={cn('absolute size-[112px] bg-util-colors-blue-brand-blue-brand-500 blur-[80px]', className)}
/>
)
}
export default React.memo(Effect)

9
web/app/components/datasets/create-from-pipeline/header-effect.tsx
View File

@ -1,9 +0,0 @@
import React from 'react'
const HeaderEffect = () => {
return (
<div className='absolute left-8 top-[-34px] size-[112px] bg-util-colors-blue-brand-blue-brand-500 opacity-20 blur-[80px]' />
)
}
export default React.memo(HeaderEffect)

4
web/app/components/datasets/create-from-pipeline/index.tsx
View File

@ -1,8 +1,8 @@
'use client'
import HeaderEffect from './header-effect'
import Header from './header'
import CreateOptions from './create-options'
import List from './list'
import Effect from '../../base/effect'
const CreateFromPipeline = () => {
return (
@ -10,7 +10,7 @@ const CreateFromPipeline = () => {
className='relative flex flex-col rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle'
style={{ height: 'calc(100vh - 56px)' }}
>
<HeaderEffect />
<Effect className='left-8 top-[-34px] opacity-20' />
<Header />
<CreateOptions />
<List />

4
web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
View File

@ -9,7 +9,7 @@ import Operations from './operations'
import Modal from '@/app/components/base/modal'
import EditPipelineInfo from './edit-pipeline-info'
import type { PipelineTemple } from '@/models/pipeline'
import { DOC_FORM_ICON, DOC_FORM_TEXT } from '@/models/datasets'
import { DOC_FORM_ICON_WITH_BG, DOC_FORM_TEXT } from '@/models/datasets'
import Confirm from '@/app/components/base/confirm'
import { useDeletePipeline, useExportPipelineDSL, useImportPipelineDSL, usePipelineTemplateById } from '@/service/use-pipeline'
import { downloadFile } from '@/utils/format'
@ -131,7 +131,7 @@ const TemplateCard = ({
})
}, [pipeline.id, deletePipeline])
const Icon = DOC_FORM_ICON[pipeline.doc_form] || General
const Icon = DOC_FORM_ICON_WITH_BG[pipeline.doc_form] || General
const iconInfo = pipeline.icon_info
return (

5
web/app/components/datasets/list/dataset-card/index.tsx
View File

@ -3,7 +3,6 @@ import { useRouter } from 'next/navigation'
import { useTranslation } from 'react-i18next'
import type { DataSet } from '@/models/datasets'
import { useSelector as useAppContextWithSelector } from '@/context/app-context'
import { General } from '@/app/components/base/icons/src/public/knowledge/dataset-card'
import { useKnowledge } from '@/hooks/use-knowledge'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import type { Tag } from '@/app/components/base/tag-management/constant'
@ -22,7 +21,7 @@ import CustomPopover from '@/app/components/base/popover'
import Operations from './operations'
import AppIcon from '@/app/components/base/app-icon'
import CornerLabel from '@/app/components/base/corner-label'
import { DOC_FORM_ICON, DOC_FORM_TEXT } from '@/models/datasets'
import { DOC_FORM_ICON_WITH_BG, DOC_FORM_TEXT } from '@/models/datasets'
const EXTERNAL_PROVIDER = 'external'
@ -50,7 +49,7 @@ const DatasetCard = ({
const isExternalProvider = useMemo(() => {
return dataset.provider === EXTERNAL_PROVIDER
}, [dataset.provider])
const Icon = isExternalProvider ? DOC_FORM_ICON.external : (DOC_FORM_ICON[dataset.doc_form] || General)
const Icon = isExternalProvider ? DOC_FORM_ICON_WITH_BG.external : DOC_FORM_ICON_WITH_BG[dataset.doc_form]
const iconInfo = dataset.icon_info || {
icon: '📙',
icon_type: 'emoji',

28
web/app/components/datasets/no-linked-apps-panel.tsx Normal file
View File

@ -0,0 +1,28 @@
import { useGetDocLanguage } from '@/context/i18n'
import { RiApps2AddLine, RiBookOpenLine } from '@remixicon/react'
import React from 'react'
import { useTranslation } from 'react-i18next'
const NoLinkedAppsPanel = () => {
const { t } = useTranslation()
const docLanguage = useGetDocLanguage()
return (
<div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4'>
<div className='inline-flex rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle p-2'>
<RiApps2AddLine className='size-4 text-text-tertiary' />
</div>
<div className='my-2 text-xs text-text-tertiary'>{t('common.datasetMenus.emptyTip')}</div>
<a
className='mt-2 inline-flex cursor-pointer items-center text-xs text-text-accent'
href={`https://docs.dify.ai/${docLanguage}/guides/knowledge-base/integrate-knowledge-within-application`}
target='_blank' rel='noopener noreferrer'
>
<RiBookOpenLine className='mr-1 size-4 text-text-accent' />
{t('common.datasetMenus.viewDoc')}
</a>
</div>
)
}
export default React.memo(NoLinkedAppsPanel)

2
web/context/dataset-detail.ts
View File

@ -11,7 +11,7 @@ const DatasetDetailContext = createContext<DatasetDetailContextValue>({})
export const useDatasetDetailContext = () => useContext(DatasetDetailContext)
export const useDatasetDetailContextWithSelector = (selector: (value: DatasetDetailContextValue) => any) => {
export const useDatasetDetailContextWithSelector = <T>(selector: (value: DatasetDetailContextValue) => T): T => {
return useContextSelector(DatasetDetailContext, selector)
}
export default DatasetDetailContext

9
web/models/datasets.ts
View File

@ -5,6 +5,7 @@ import type { IndexingType } from '@/app/components/datasets/create/step-two'
import type { MetadataFilteringVariableType } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
import type { MetadataItemWithValue } from '@/app/components/datasets/metadata/types'
import { ExternalKnowledgeBase, General, Graph, ParentChild, Qa } from '@/app/components/base/icons/src/public/knowledge/dataset-card'
import { GeneralChunk, ParentChildChunk, QuestionAndAnswer } from '@/app/components/base/icons/src/vender/knowledge'
export enum DataSourceType {
FILE = 'upload_file',
@ -704,7 +705,7 @@ export type BatchImportResponse = {
job_status: string
}
export const DOC_FORM_ICON: Record<ChunkingMode | 'external', React.ComponentType<{ className: string }>> = {
export const DOC_FORM_ICON_WITH_BG: Record<ChunkingMode | 'external', React.ComponentType<{ className: string }>> = {
[ChunkingMode.text]: General,
[ChunkingMode.qa]: Qa,
[ChunkingMode.parentChild]: ParentChild,
@ -712,6 +713,12 @@ export const DOC_FORM_ICON: Record<ChunkingMode | 'external', React.ComponentTyp
external: ExternalKnowledgeBase,
}
export const DOC_FORM_ICON: Record<ChunkingMode.text | ChunkingMode.qa | ChunkingMode.parentChild, React.ComponentType<{ className: string }>> = {
[ChunkingMode.text]: GeneralChunk,
[ChunkingMode.qa]: QuestionAndAnswer,
[ChunkingMode.parentChild]: ParentChildChunk,
}
export const DOC_FORM_TEXT: Record<ChunkingMode, string> = {
[ChunkingMode.text]: 'general',
[ChunkingMode.qa]: 'qa',