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

refactor: use css var

This commit is contained in:
AkaraChen 2024-11-26 14:18:42 +08:00
parent 1a6a28f650
commit 4757db1b6b
13 changed files with 45 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,6 +17,7 @@ import {
RerankingModeEnum,
WeightedScoreEnum,
} from '@/models/datasets'
import Badge from '@/app/components/base/badge'
type Props = {
value: RetrievalConfig
@ -103,7 +104,7 @@ const RetrievalMethodConfig: FC<Props> = ({
title={
<div className='flex items-center space-x-1'>
<div>{t('dataset.retrieval.hybrid_search.title')}</div>
<div className='flex h-full items-center px-1.5 rounded-md border border-[#296cff] text-xs font-medium text-[#296cff] text-[10px]'>{t('dataset.retrieval.hybrid_search.recommend')}</div>
<Badge text={t('dataset.retrieval.hybrid_search.recommend')} className='border-text-accent-secondary text-text-accent-secondary ml-2' uppercase />
</div>
}
description={t('dataset.retrieval.hybrid_search.description')} isActive={

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

@ -32,7 +32,7 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
return (
<div className='space-y-2'>
<RadioCard
icon={<Icon className='w-4 h-4 text-[#7839EE]' />}
icon={<Icon className='w-4 h-4 text-util-colors-purple-purple-600' />}
title={t(`dataset.retrieval.${type}.title`)}
description={t(`dataset.retrieval.${type}.description`)}
noRadio

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

@ -124,7 +124,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
return (
<div className='flex flex-col' style={{ height: 'calc(100vh - 56px)' }}>
<div className="grow bg-white flex flex-col max-h-full h-full">
<Topbar activeStepIndex={step - 1} />
<Topbar activeIndex={step - 1} />
<div className={step === 1 ? 'block h-full max-h-full overflow-auto' : 'hidden'}>
<StepOne
hasConnection={hasConnection}

14
web/app/components/datasets/create/step-two/index.tsx
View File

@ -61,7 +61,7 @@ import { IS_CE_EDITION } from '@/config'
import Switch from '@/app/components/base/switch'
const TextLabel: FC<PropsWithChildren> = (props) => {
return <label className='text-[#354052] text-xs font-semibold leading-none'>{props.children}</label>
return <label className='text-text-secondary text-xs font-semibold leading-none'>{props.children}</label>
}
const FormField: FC<PropsWithChildren<{ label: ReactNode }>> = (props) => {
@ -779,7 +779,7 @@ const StepTwo = ({
<TextLabel>
{t('datasetCreation.stepTwo.childChunkForRetrieval')}
</TextLabel>
<div className='flex gap-2'>
<div className='flex gap-2 mt-2'>
<DelimiterInput
value={parentChildConfig.child.delimiter}
onChange={e => setParentChildConfig({
@ -841,7 +841,7 @@ const StepTwo = ({
setIndexType(IndexingType.QUALIFIED)
}}
>
<div className='h-8 p-1.5 bg-white rounded-lg border border-[#101828]/10 justify-center items-center inline-flex absolute left-5 top-[18px]'>
<div className='h-8 p-1.5 bg-white rounded-lg border border-components-panel-border-subtle justify-center items-center inline-flex absolute left-5 top-[18px]'>
<Image src={indexMethodIcon.high_quality} alt='Gold Icon' width={20} height={20} />
</div>
{!hasSetIndexType && <span className={cn(s.radio)} />}
@ -872,7 +872,7 @@ const StepTwo = ({
)}
onClick={changeToEconomicalType}
>
<div className='h-8 p-1.5 bg-white rounded-lg border border-[#101828]/10 justify-center items-center inline-flex absolute left-5 top-[18px]'>
<div className='h-8 p-1.5 bg-white rounded-lg border border-components-panel-border-subtle justify-center items-center inline-flex absolute left-5 top-[18px]'>
<Image src={indexMethodIcon.economical} alt='Economical Icon' width={20} height={20} />
</div>
{!hasSetIndexType && <span className={cn(s.radio)} />}
@ -886,7 +886,7 @@ const StepTwo = ({
{hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
<div className='mt-2 text-xs text-gray-500 font-medium'>
{t('datasetCreation.stepTwo.indexSettingTip')}
<Link className='text-[#155EEF]' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
<Link className='text-text-accent' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
</div>
)}
{IS_CE_EDITION && indexType === IndexingType.QUALIFIED && (
@ -931,7 +931,7 @@ const StepTwo = ({
{!!datasetId && (
<div className='mt-2 text-xs text-gray-500 font-medium'>
{t('datasetCreation.stepTwo.indexSettingTip')}
<Link className='text-[#155EEF]' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
<Link className='text-text-accent' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
</div>
)}
</div>
@ -943,7 +943,7 @@ const StepTwo = ({
<div className={s.label}>
<div className='shrink-0 mr-4'>{t('datasetSettings.form.retrievalSetting.title')}</div>
<div className='leading-[18px] text-xs font-normal text-gray-500'>
<a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-[#155eef]'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
<a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
{t('datasetSettings.form.retrievalSetting.longDescription')}
</div>
</div>

2
web/app/components/datasets/create/step-two/inputs.tsx
View File

@ -7,7 +7,7 @@ import type { InputNumberProps } from '@/app/components/base/input-number'
import { InputNumber } from '@/app/components/base/input-number'
const TextLabel: FC<PropsWithChildren> = (props) => {
return <label className='text-[#354052] text-xs font-semibold leading-none'>{props.children}</label>
return <label className='text-text-secondary text-xs font-semibold leading-none'>{props.children}</label>
}
const FormField: FC<PropsWithChildren<{ label: ReactNode }>> = (props) => {

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

@ -27,7 +27,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
)}>
<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} />}
<div className='size-8 rounded-lg border p-1.5 shadow border-[#101828]/10 justify-center flex bg-white'>
<div className='size-8 rounded-lg border p-1.5 shadow border-components-panel-border-subtle justify-center flex bg-white'>
{icon || <Image src={piggyBank.src} className='size-5' alt={description} width={20} height={20} />}
</div>
</div>
@ -35,8 +35,8 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
className='absolute left-4 -bottom-1.5'
/>
<div className='flex-1 space-y-1 py-3 pr-4'>
<div className='text-[#354052] text-sm font-semibold leading-tight'>{title}</div>
<div className='text-[#676f83] text-xs font-normal leading-none'>{description}</div>
<div className='text-text-secondary text-sm font-semibold leading-tight'>{title}</div>
<div className='text-text-tertiary text-xs font-normal leading-none'>{description}</div>
</div>
</div>
}
@ -57,7 +57,7 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
return <div
className={classNames(
'rounded-xl overflow-hidden',
isActive ? 'border-[#296cff] bg-white' : 'border-[#e9ebf0] bg-[#FCFCFD]',
isActive ? 'border-components-option-card-option-selected-border bg-components-panel-bg' : 'border-components-option-card-option-border bg-components-option-card-option-bg',
className,
)}
style={{

8
web/app/components/datasets/create/stepper/index.tsx
View File

@ -4,7 +4,7 @@ import { StepperStep } from './step'
export type StepperProps = {
steps: Step[]
activeStepIndex: number
activeIndex: number
}
function join<T, R = T>(array: T[], sep: R): Array<T | R> {
@ -17,18 +17,18 @@ function join<T, R = T>(array: T[], sep: R): Array<T | R> {
}
export const Stepper: FC<StepperProps> = (props) => {
const { steps, activeStepIndex } = props
const { steps, activeIndex } = props
return <div className='flex items-center gap-3'>
{join(
steps.map((step, index) => (
<StepperStep
key={index}
{...step}
isActive={index === activeStepIndex}
activeIndex={activeIndex}
index={index}
/>
)),
<div className="w-4 h-px bg-[#101828]/30" />,
<div className="w-4 h-px bg-text-quaternary" />,
)}
</div>
}

24
web/app/components/datasets/create/stepper/step.tsx
View File

@ -7,27 +7,41 @@ export type Step = {
export type StepperStepProps = Step & {
index: number
isActive: boolean
activeIndex: number
}
export const StepperStep: FC<StepperStepProps> = (props) => {
const { name, isActive, index } = props
const { name, activeIndex, index } = props
const isActive = index === activeIndex
const isDisabled = activeIndex < index
const label = isActive ? `STEP ${index + 1}` : `${index + 1}`
return <div className='flex items-center gap-2'>
<div className={classNames(
'h-5 px-2 py-1 rounded-3xl flex-col justify-center items-center gap-2 inline-flex',
isActive ? 'bg-[#296cff]' : 'border border-[#101828]/30',
isActive
? 'bg-state-accent-solid'
: !isDisabled
? 'border border-text-tertiary'
: 'border border-divider-deep',
)}>
<div className={classNames(
'text-center text-[10px] font-semibold uppercase leading-3',
isActive ? 'text-white' : 'text-[#676f83]',
isActive
? 'text-white'
: !isDisabled
? 'text-text-tertiary'
: 'text-text-tertiary/30',
)}>
{label}
</div>
</div>
<div className={classNames(
' text-xs font-medium uppercase leading-none',
isActive ? 'text-[#155aef]' : 'text-[#676f83]',
isActive
? 'text-text-accent'
: !isDisabled
? 'text-text-tertiary'
: 'text-text-tertiary/30',
)}>{name}</div>
</div>
}

2
web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx
View File

@ -97,7 +97,7 @@ const CSVDownload: FC<{ docForm: DocForm }> = ({ docForm }) => {
bom={true}
data={getTemplate()}
>
<div className='flex items-center h-[18px] space-x-1 text-[#155EEF] text-xs font-medium'>
<div className='flex items-center h-[18px] space-x-1 text-text-accent text-xs font-medium'>
<DownloadIcon className='w-3 h-3 mr-1' />
{t('datasetDocuments.list.batchModal.template')}
</div>

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

@ -352,7 +352,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
·
<div
onClick={() => { setShowDocTypes(true) }}
className='cursor-pointer hover:text-[#155EEF]'
className='cursor-pointer hover:text-text-accent'
>
{t('common.operation.change')}
</div>

4
web/app/components/datasets/documents/detail/segment-add/index.tsx
View File

@ -50,14 +50,14 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
<div className='inline-flex items-center mr-2 px-3 py-[6px] text-gray-700 bg-[#F6FEF9] rounded-lg border border-black/5'>
<CheckCircle className='mr-2 w-4 h-4 text-[#039855]' />
<span className='font-medium text-[13px] leading-[18px]'>{t('datasetDocuments.list.batchModal.completed')}</span>
<span className='pl-2 font-medium text-[13px] leading-[18px] text-[#155EEF] cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
<span className='pl-2 font-medium text-[13px] leading-[18px] text-text-accent cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
</div>
)}
{importStatus === ProcessStatus.ERROR && (
<div className='inline-flex items-center mr-2 px-3 py-[6px] text-red-600 bg-red-100 rounded-lg border border-black/5'>
<RiErrorWarningFill className='mr-2 w-4 h-4 text-[#D92D20]' />
<span className='font-medium text-[13px] leading-[18px]'>{t('datasetDocuments.list.batchModal.error')}</span>
<span className='pl-2 font-medium text-[13px] leading-[18px] text-[#155EEF] cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
<span className='pl-2 font-medium text-[13px] leading-[18px] text-text-accent cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
</div>
)}
</>

2
web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
View File

@ -77,7 +77,7 @@ const ModifyRetrievalModal: FC<Props> = ({
<div className='text-base font-semibold text-gray-900'>
<div>{t('datasetSettings.form.retrievalSetting.title')}</div>
<div className='leading-[18px] text-xs font-normal text-gray-500'>
<a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-[#155eef]'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
<a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
{t('datasetSettings.form.retrievalSetting.description')}
</div>
</div>

2
web/app/components/datasets/settings/form/index.tsx
View File

@ -305,7 +305,7 @@ const Form = () => {
<div>
<div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.retrievalSetting.title')}</div>
<div className='leading-[18px] text-xs font-normal text-gray-500'>
<a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-[#155eef]'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
<a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
{t('datasetSettings.form.retrievalSetting.description')}
</div>
</div>