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

fix: option card gradient & tailwind config

This commit is contained in:
AkaraChen 2024-12-13 15:47:29 +08:00
parent 7d673e7f14
commit fe2d60dfc9
6 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
View File

@ -25,7 +25,7 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
<OptionCard icon={<Image className='w-4 h-4' src={retrievalIcon.vector} alt='' />}
title={t('dataset.retrieval.invertedIndex.title')}
description={t('dataset.retrieval.invertedIndex.description')} isActive
activeHeaderClassName='dataset-option-card-purple-gradient'
activeHeaderClassName='bg-dataset-option-card-purple-gradient'
>
<RetrievalParamConfig
type={RETRIEVE_METHOD.invertedIndex}

4
web/app/components/datasets/common/retrieval-method-config/index.tsx
View File

@ -69,7 +69,7 @@ const RetrievalMethodConfig: FC<Props> = ({
search_method: RETRIEVE_METHOD.semantic,
})}
effectImg={Effect.src}
activeHeaderClassName='dataset-option-card-purple-gradient'
activeHeaderClassName='bg-dataset-option-card-purple-gradient'
>
<RetrievalParamConfig
type={RETRIEVE_METHOD.semantic}
@ -90,7 +90,7 @@ const RetrievalMethodConfig: FC<Props> = ({
search_method: RETRIEVE_METHOD.fullText,
})}
effectImg={Effect.src}
activeHeaderClassName='dataset-option-card-purple-gradient'
activeHeaderClassName='bg-dataset-option-card-purple-gradient'
>
<RetrievalParamConfig
type={RETRIEVE_METHOD.fullText}

9
web/app/components/datasets/create/step-two/option-card.tsx
View File

@ -1,6 +1,5 @@
import { type ComponentProps, type FC, type ReactNode, forwardRef } from 'react'
import Image from 'next/image'
import Effect from '../assets/option-card-effect-blue.svg'
import classNames from '@/utils/classnames'
const TriangleArrow: FC<ComponentProps<'svg'>> = props => (
@ -25,7 +24,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
isActive && activeClassName,
)}>
<div className='size-14 flex items-center justify-center relative overflow-hidden'>
{isActive && <Image src={effectImg || Effect.src} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
{isActive && effectImg && <Image src={effectImg} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
<div className='size-8 rounded-lg border p-1.5 shadow border-components-panel-border-subtle justify-center flex bg-background-default-dodge'>
{icon}
</div>
@ -58,10 +57,10 @@ export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, disabled, ...rest } = props
return <div
className={classNames(
'rounded-xl border',
'rounded-xl border bg-components-option-card-option-bg',
(isActive && !noHighlight)
? 'border-components-option-card-option-selected-border bg-components-panel-bg'
: 'border-components-option-card-option-border bg-components-option-card-option-bg',
? 'border-components-option-card-option-selected-border'
: 'border-components-option-card-option-border',
disabled && 'opacity-50',
className,
)}

3
web/tailwind.config.js
View File

@ -102,6 +102,9 @@ const config = {
'dataset-chunk-process-error-bg': 'var(--color-dataset-chunk-process-error-bg)',
'dataset-chunk-detail-card-hover-bg': 'var(--color-dataset-chunk-detail-card-hover-bg)',
'dataset-child-chunk-expand-btn-bg': 'var(--color-dataset-child-chunk-expand-btn-bg)',
'dataset-option-card-blue-gradient': 'var(--color-dataset-option-card-blue-gradient)',
'dataset-option-card-purple-gradient': 'var(--color-dataset-option-card-purple-gradient)',
'dataset-option-card-orange-gradient': 'var(--color-dataset-option-card-orange-gradient)',
},
lineClamp: {
20: '20',

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

@ -6,7 +6,7 @@ html[data-theme="dark"] {
--color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
--color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #1D1D20 0%, #222225 100%);
--color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
--color-dataset-option-card-blue-gradient: linear-gradient(180deg, #24252E 0%, #1E1E21 100%);
--color-dataset-option-card-purple-gradient: linear-gradient(180deg, #25242E 0%, #1E1E21 100%);
--color-dataset-option-card-orange-gradient: linear-gradient(180deg, #2B2322 0%, #1E1E21 100%);
--color-dataset-option-card-blue-gradient: linear-gradient(90deg, #24252E 0%, #1E1E21 100%);
--color-dataset-option-card-purple-gradient: linear-gradient(90deg, #25242E 0%, #1E1E21 100%);
--color-dataset-option-card-orange-gradient: linear-gradient(90deg, #2B2322 0%, #1E1E21 100%);
}

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

@ -6,7 +6,7 @@ html[data-theme="light"] {
--color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
--color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
--color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
--color-dataset-option-card-blue-gradient: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
--color-dataset-option-card-purple-gradient: linear-gradient(180deg, #F0EEFA 0%, #F9FAFB 100%);
--color-dataset-option-card-orange-gradient: linear-gradient(180deg, #F8F2EE 0%, #F9FAFB 100%);
--color-dataset-option-card-blue-gradient: linear-gradient(90deg, #F2F4F7 0%, #F9FAFB 100%);
--color-dataset-option-card-purple-gradient: linear-gradient(90deg, #F0EEFA 0%, #F9FAFB 100%);
--color-dataset-option-card-orange-gradient: linear-gradient(90deg, #F8F2EE 0%, #F9FAFB 100%);
}