hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-09 10:56:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat：app list dark mode (#16110)

Browse Source
This commit is contained in:
KVOJJJin
2025-03-18 16:21:53 +08:00
committed by GitHub
parent 6f6ba2f025
commit 7d620ffd5e
16 changed files with 90 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -64,13 +64,13 @@ const TagManagementModal = ({ show, type }: TagManagementModalProps) => {
isShow={show}
onClose={() => setShowTagManagementModal(false)}
>
<div className='relative pb-2 text-xl font-semibold leading-[30px] text-gray-900'>{t('common.tag.manageTags')}</div>
<div className='relative pb-2 text-xl font-semibold leading-[30px] text-text-primary'>{t('common.tag.manageTags')}</div>
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={() => setShowTagManagementModal(false)}>
<RiCloseLine className='w-4 h-4 text-gray-500' />
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
</div>
<div className='mt-3 flex flex-wrap gap-2'>
<input
className='shrink-0 w-[100px] px-2 py-1 rounded-lg border border-dashed border-gray-200 text-sm leading-5 text-gray-700 outline-none appearance-none placeholder:text-gray-300 caret-primary-600 focus:border-solid'
className='shrink-0 w-[100px] px-2 py-1 bg-transparent rounded-lg border border-dashed border-divider-regular text-sm leading-5 text-text-secondary outline-none appearance-none placeholder:text-text-quaternary caret-primary-600 focus:border-solid'
placeholder={t('common.tag.addNew') || ''}
autoFocus
value={name}

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

@@ -125,8 +125,8 @@ const Panel = (props: PanelProps) => {
})
return (
<div className='relative w-full bg-white rounded-lg border-[0.5px] border-gray-200'>
<div className='p-2 border-b-[0.5px] border-black/5'>
<div className='relative w-full bg-components-input-bg-hover rounded-lg border-[0.5px] border-components-panel-border'>
<div className='p-2 border-b-[0.5px] border-divider-regular'>
<Input
showLeftIcon
showClearIcon
@@ -138,9 +138,9 @@ const Panel = (props: PanelProps) => {
</div>
{keywords && notExisted && (
<div className='p-1'>
<div className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-100' onClick={createNewTag}>
<RiAddLine className='h-4 w-4 text-gray-500' />
<div className='grow text-sm text-gray-700 leading-5 truncate'>
<div className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-state-base-hover' onClick={createNewTag}>
<RiAddLine className='h-4 w-4 text-text-tertiary' />
<div className='grow text-sm text-text-secondary leading-5 truncate'>
{`${t('common.tag.create')} `}
<span className='font-medium'>{`"${keywords}"`}</span>
</div>
@@ -155,7 +155,7 @@ const Panel = (props: PanelProps) => {
{filteredSelectedTagList.map(tag => (
<div
key={tag.id}
className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-100'
className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-state-base-hover'
onClick={() => selectTag(tag)}
>
<Checkbox
@@ -163,13 +163,13 @@ const Panel = (props: PanelProps) => {
checked={selectedTagIDs.includes(tag.id)}
onCheck={() => { }}
/>
<div title={tag.name} className='grow text-sm text-gray-700 leading-5 truncate'>{tag.name}</div>
<div title={tag.name} className='grow text-sm text-text-secondary leading-5 truncate'>{tag.name}</div>
</div>
))}
{filteredTagList.map(tag => (
<div
key={tag.id}
className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-100'
className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-state-base-hover'
onClick={() => selectTag(tag)}
>
<Checkbox
@@ -177,7 +177,7 @@ const Panel = (props: PanelProps) => {
checked={selectedTagIDs.includes(tag.id)}
onCheck={() => { }}
/>
<div title={tag.name} className='grow text-sm text-gray-700 leading-5 truncate'>{tag.name}</div>
<div title={tag.name} className='grow text-sm text-text-secondary leading-5 truncate'>{tag.name}</div>
</div>
))}
</div>
@@ -185,16 +185,16 @@ const Panel = (props: PanelProps) => {
{!keywords && !filteredTagList.length && !filteredSelectedTagList.length && (
<div className='p-1'>
<div className='p-3 flex flex-col items-center gap-1'>
<Tag03 className='h-6 w-6 text-gray-300' />
<div className='text-gray-500 text-xs leading-[14px]'>{t('common.tag.noTag')}</div>
<Tag03 className='h-6 w-6 text-text-quaternary' />
<div className='text-text-tertiary text-xs leading-[14px]'>{t('common.tag.noTag')}</div>
</div>
</div>
)}
<Divider className='!h-[1px] !my-0' />
<div className='p-1'>
<div className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-100' onClick={() => setShowTagManagementModal(true)}>
<Tag03 className='h-4 w-4 text-gray-500' />
<div className='grow text-sm text-gray-700 leading-5 truncate'>
<div className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-state-base-hover' onClick={() => setShowTagManagementModal(true)}>
<Tag03 className='h-4 w-4 text-text-tertiary' />
<div className='grow text-sm text-text-secondary leading-5 truncate'>
{t('common.tag.manageTags')}
</div>
</div>
@@ -232,7 +232,7 @@ const TagSelector: FC<TagSelectorProps> = ({
const Trigger = () => {
return (
<div className={cn(
'group/tip relative w-full flex items-center gap-1 px-2 py-[7px] rounded-md cursor-pointer hover:bg-gray-100',
'group/tip relative w-full flex items-center gap-1 px-2 py-[7px] rounded-md cursor-pointer hover:bg-state-base-hover',
)}>
<Tag01 className='shrink-0 w-3 h-3' />
<div className='grow text-xs text-start leading-[18px] font-normal truncate'>
@@ -261,8 +261,8 @@ const TagSelector: FC<TagSelectorProps> = ({
btnElement={<Trigger />}
btnClassName={open =>
cn(
open ? '!bg-gray-100 !text-gray-700' : '!bg-transparent',
'!w-full !p-0 !border-0 !text-gray-500 hover:!bg-gray-100 hover:!text-gray-700',
open ? '!bg-state-base-hover !text-text-secondary' : '!bg-transparent',
'!w-full !p-0 !border-0 !text-text-tertiary hover:!bg-state-base-hover hover:!text-text-secondary',
)
}
popupClassName='!w-full !ring-0'

3
web/app/components/base/tag-management/style.module.css
View File

@@ -1,3 +0,0 @@
.bg {
background: linear-gradient(180deg, rgba(247, 144, 9, 0.05) 0%, rgba(247, 144, 9, 0.00) 24.41%), #F9FAFB;
}

16
web/app/components/base/tag-management/tag-item-editor.tsx
View File

@@ -103,29 +103,29 @@ const TagItemEditor: FC<TagItemEditorProps> = ({
return (
<>
<div className={cn('shrink-0 flex items-center gap-0.5 pr-1 pl-2 py-1 rounded-lg border border-gray-200 text-sm leading-5 text-gray-700')}>
<div className={cn('shrink-0 flex items-center gap-0.5 pr-1 pl-2 py-1 rounded-lg border border-components-panel-border text-sm leading-5 text-text-secondary')}>
{!isEditing && (
<>
<div className='text-sm leading-5 text-gray-700'>
<div className='text-sm leading-5 text-text-secondary'>
{tag.name}
</div>
<div className='shrink-0 px-1 text-sm leading-4.5 text-gray-500 font-medium'>{tag.binding_count}</div>
<div className='group/edit shrink-0 p-1 rounded-md cursor-pointer hover:bg-black/5' onClick={() => setIsEditing(true)}>
<RiEditLine className='w-3 h-3 text-gray-500 group-hover/edit:text-gray-800' />
<div className='shrink-0 px-1 text-sm leading-4.5 text-text-tertiary font-medium'>{tag.binding_count}</div>
<div className='group/edit shrink-0 p-1 rounded-md cursor-pointer hover:bg-state-base-hover' onClick={() => setIsEditing(true)}>
<RiEditLine className='w-3 h-3 text-text-tertiary group-hover/edit:text-text-secondary' />
</div>
<div className='group/remove shrink-0 p-1 rounded-md cursor-pointer hover:bg-black/5' onClick={() => {
<div className='group/remove shrink-0 p-1 rounded-md cursor-pointer hover:bg-state-base-hover' onClick={() => {
if (tag.binding_count)
setShowRemoveModal(true)
else
handleRemove()
}}>
<RiDeleteBinLine className='w-3 h-3 text-gray-500 group-hover/remove:text-gray-800' />
<RiDeleteBinLine className='w-3 h-3 text-text-tertiary group-hover/remove:text-text-secondary' />
</div>
</>
)}
{isEditing && (
<input
className='shrink-0 outline-none appearance-none placeholder:text-gray-300 caret-primary-600'
className='shrink-0 outline-none appearance-none placeholder:text-text-quaternary caret-primary-600'
autoFocus
value={name}
onChange={e => setName(e.target.value)}

11
web/app/components/base/tag-management/tag-remove-modal.tsx
View File

@@ -2,7 +2,6 @@
import { useTranslation } from 'react-i18next'
import { RiCloseLine } from '@remixicon/react'
import s from './style.module.css'
import cn from '@/utils/classnames'
import Button from '@/app/components/base/button'
import Modal from '@/app/components/base/modal'
@@ -21,21 +20,21 @@ const TagRemoveModal = ({ show, tag, onConfirm, onClose }: TagRemoveModalProps)
return (
<Modal
className={cn('p-8 max-w-[480px] w-[480px]', s.bg)}
className={cn('p-8 max-w-[480px] w-[480px]')}
isShow={show}
onClose={() => { }}
>
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
<RiCloseLine className='w-4 h-4 text-gray-500' />
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
</div>
<div className='w-12 h-12 p-3 bg-white rounded-xl border-[0.5px] border-gray-100 shadow-xl'>
<div className='w-12 h-12 p-3 bg-background-default-burn rounded-xl border-[0.5px] border-divider-regular shadow-xl'>
<AlertTriangle className='w-6 h-6 text-[rgb(247,144,9)]' />
</div>
<div className='mt-3 text-xl font-semibold leading-[30px] text-gray-900'>
<div className='mt-3 text-xl font-semibold leading-[30px] text-text-primary'>
{`${t('common.tag.delete')} `}
<span>{`"${tag.name}"`}</span>
</div>
<div className='my-1 text-gray-500 text-sm leading-5'>
<div className='my-1 text-text-tertiary text-sm leading-5'>
{t('common.tag.deleteTip')}
</div>
<div className='pt-6 flex items-center justify-end'>