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

fix: make TagSelector always visible for accessibility and mobile support (#23515)

Browse Source
This commit is contained in:
lyzno1
2025-08-07 09:25:26 +08:00
committed by GitHub
parent d253ca192a
commit f6c7175828
10 changed files with 19 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/(commonLayout)/datasets/Container.tsx → web/app/(commonLayout)/datasets/container.tsx
View File

@@ -9,10 +9,10 @@ import { useQuery } from '@tanstack/react-query'
// Components
import ExternalAPIPanel from '../../components/datasets/external-api/external-api-panel'
import Datasets from './Datasets'
import DatasetFooter from './DatasetFooter'
import Datasets from './datasets'
import DatasetFooter from './dataset-footer'
import ApiServer from '../../components/develop/ApiServer'
import Doc from './Doc'
import Doc from './doc'
import TabSliderNew from '@/app/components/base/tab-slider-new'
import TagManagementModal from '@/app/components/base/tag-management'
import TagFilter from '@/app/components/base/tag-management/filter'

11
web/app/(commonLayout)/datasets/DatasetCard.tsx → web/app/(commonLayout)/datasets/dataset-card.tsx
View File

@@ -162,24 +162,19 @@ const DatasetCard = ({
</div>
<div
className={cn(
'mb-2 max-h-[72px] grow px-[14px] text-xs leading-normal text-text-tertiary group-hover:line-clamp-2 group-hover:max-h-[36px]',
tags.length ? 'line-clamp-2' : 'line-clamp-4',
'mb-2 line-clamp-2 max-h-[36px] grow px-[14px] text-xs leading-normal text-text-tertiary',
!dataset.embedding_available && 'opacity-50 hover:opacity-100',
)}
title={dataset.description}>
{dataset.description}
</div>
<div className={cn(
'mt-4 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
tags.length ? 'flex' : '!hidden group-hover:!flex',
)}>
<div className='mt-4 flex h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1'>
<div className={cn('flex w-0 grow items-center gap-1', !dataset.embedding_available && 'opacity-50 hover:opacity-100')} onClick={(e) => {
e.stopPropagation()
e.preventDefault()
}}>
<div className={cn(
'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
tags.length ? '!block' : '!hidden',
'mr-[41px] w-full grow group-hover:!mr-0',
)}>
<TagSelector
position='bl'

0
web/app/(commonLayout)/datasets/DatasetFooter.tsx → web/app/(commonLayout)/datasets/dataset-footer.tsx
View File

4
web/app/(commonLayout)/datasets/Datasets.tsx → web/app/(commonLayout)/datasets/datasets.tsx
View File

@@ -3,8 +3,8 @@
import { useCallback, useEffect, useRef } from 'react'
import useSWRInfinite from 'swr/infinite'
import { debounce } from 'lodash-es'
import NewDatasetCard from './NewDatasetCard'
import DatasetCard from './DatasetCard'
import NewDatasetCard from './new-dataset-card'
import DatasetCard from './dataset-card'
import type { DataSetListResponse, FetchDatasetsParams } from '@/models/datasets'
import { fetchDatasets } from '@/service/datasets'
import { useAppContext } from '@/context/app-context'

0
web/app/(commonLayout)/datasets/Doc.tsx → web/app/(commonLayout)/datasets/doc.tsx
View File

0
web/app/(commonLayout)/datasets/NewDatasetCard.tsx → web/app/(commonLayout)/datasets/new-dataset-card.tsx
View File

2
web/app/(commonLayout)/datasets/page.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { useTranslation } from 'react-i18next'
import Container from './Container'
import Container from './container'
import useDocumentTitle from '@/hooks/use-document-title'
const AppList = () => {

12
web/app/components/apps/app-card.tsx
View File

@@ -370,20 +370,14 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
{app.description}
</div>
</div>
<div className={cn(
'absolute bottom-1 left-0 right-0 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
tags.length ? 'flex' : '!hidden group-hover:!flex',
)}>
<div className='absolute bottom-1 left-0 right-0 flex h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1'>
{isCurrentWorkspaceEditor && (
<>
<div className={cn('flex w-0 grow items-center gap-1')} onClick={(e) => {
e.stopPropagation()
e.preventDefault()
}}>
<div className={cn(
'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
tags.length ? '!block' : '!hidden',
)}>
<div className='mr-[41px] w-full grow group-hover:!mr-0'>
<TagSelector
position='bl'
type='app'
@@ -395,7 +389,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
/>
</div>
</div>
<div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 group-hover:!flex' />
<div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 bg-divider-regular group-hover:!flex' />
<div className='!hidden shrink-0 group-hover:!flex'>
<CustomPopover
htmlContent={<Operations />}

6
web/app/components/base/tag-management/selector.tsx
View File

@@ -238,12 +238,16 @@ const TagSelector: FC<TagSelectorProps> = ({
}, [selectedTags, tagList])
const Trigger = () => {
const hasNoTags = !triggerContent
return (
<div className={cn(
'group/tip relative flex w-full cursor-pointer items-center gap-1 rounded-md px-2 py-[7px] hover:bg-state-base-hover',
)}>
<Tag01 className='h-3 w-3 shrink-0 text-components-input-text-placeholder' />
<div className='system-sm-regular grow truncate text-start text-components-input-text-placeholder'>
<div className={cn(
'system-sm-regular grow truncate text-start',
hasNoTags ? 'italic text-components-input-text-placeholder' : 'font-medium text-components-input-text-placeholder',
)}>
{!triggerContent ? t('common.tag.addTag') : triggerContent}
</div>
</div>

4
web/service/access-control.ts
View File

@@ -70,7 +70,7 @@ export const useUpdateAccessMode = () => {
})
}
export const useGetUserCanAccessApp = ({ appId, isInstalledApp = true }: { appId?: string; isInstalledApp?: boolean; }) => {
export const useGetUserCanAccessApp = ({ appId, isInstalledApp = true, enabled }: { appId?: string; isInstalledApp?: boolean; enabled?: boolean }) => {
const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
return useQuery({
queryKey: [NAME_SPACE, 'user-can-access-app', appId],
@@ -80,7 +80,7 @@ export const useGetUserCanAccessApp = ({ appId, isInstalledApp = true }: { appId
else
return { result: true }
},
enabled: !!appId,
enabled: enabled !== undefined ? enabled : !!appId,
staleTime: 0,
gcTime: 0,
})