youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-05 09:58:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

dark mode for tools

Browse Source
This commit is contained in:
JzoNg
2024-12-13 13:10:13 +08:00
parent a0e999e438
commit 5c98f1a5aa
32 changed files with 244 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
View File

@ -11,7 +11,7 @@ const ModelBadge: FC<ModelBadgeProps> = ({
}) => {
return (
<div className={classNames(
'flex items-center px-1 h-[18px] rounded-[5px] border border-black/8 bg-white/[0.48] text-[10px] font-medium text-gray-500 cursor-default',
'flex items-center px-1 h-[18px] rounded-[5px] border border-divider-deep system-2xs-medium-uppercase text-text-tertiary cursor-default',
className,
)}>
{children}

15
web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
View File

@ -6,6 +6,7 @@ import type {
import { useLanguage } from '../hooks'
import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
import { OpenaiViolet } from '@/app/components/base/icons/src/public/llm'
import cn from '@/utils/classnames'
type ModelIconProps = {
provider?: Model | ModelProvider
@ -20,7 +21,7 @@ const ModelIcon: FC<ModelIconProps> = ({
const language = useLanguage()
if (provider?.provider.includes('openai') && (modelName?.startsWith('gpt-4') || modelName?.includes('4o')))
return <OpenaiViolet className={`w-4 h-4 ${className}`}/>
return <OpenaiViolet className={cn('w-4 h-4', className)}/>
if (provider?.icon_small) {
return (
@ -28,17 +29,17 @@ const ModelIcon: FC<ModelIconProps> = ({
<img
alt='model-icon'
src={`${provider.icon_small[language] || provider.icon_small.en_US}`}
className={`w-4 h-4 ${className}`}
className={cn('w-4 h-4', className)}
/>
)
}
return (
<div className={`
flex items-center justify-center w-6 h-6 rounded border-[0.5px] border-black/5 bg-gray-50
${className}
`}>
<CubeOutline className='w-4 h-4 text-gray-400' />
<div className={cn(
'flex items-center justify-center w-6 h-6 rounded border-[0.5px] border-black/5 bg-gray-50',
className,
)}>
<CubeOutline className='w-4 h-4 text-text-quaternary' />
</div>
)
}

13
web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
View File

@ -7,7 +7,7 @@ import { useLanguage } from '../hooks'
import type { ModelItem } from '../declarations'
import ModelBadge from '../model-badge'
import FeatureIcon from '../model-selector/feature-icon'
import classNames from '@/utils/classnames'
import cn from '@/utils/classnames'
type ModelNameProps = PropsWithChildren<{
modelItem: ModelItem
@ -37,12 +37,7 @@ const ModelName: FC<ModelNameProps> = ({
if (!modelItem)
return null
return (
<div
className={`
flex items-center truncate text-[13px] font-medium text-gray-800
${className}
`}
>
<div className={cn('flex items-center truncate text-components-input-text-filled system-sm-regular', className)}>
<div
className='truncate'
title={modelItem.label[language] || modelItem.label.en_US}
@ -51,14 +46,14 @@ const ModelName: FC<ModelNameProps> = ({
</div>
{
showModelType && modelItem.model_type && (
<ModelBadge className={classNames('ml-1', modelTypeClassName)}>
<ModelBadge className={cn('ml-1', modelTypeClassName)}>
{modelTypeFormat(modelItem.model_type)}
</ModelBadge>
)
}
{
modelItem.model_properties.mode && showMode && (
<ModelBadge className={classNames('ml-1', modeClassName)}>
<ModelBadge className={cn('ml-1', modeClassName)}>
{(modelItem.model_properties.mode as string).toLocaleUpperCase()}
</ModelBadge>
)