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

fix: credential

Browse Source
This commit is contained in:
zxhlyh
2025-08-22 14:13:23 +08:00
parent 3c00a0e508
commit 735290538f
9 changed files with 77 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
View File

@ -1,6 +1,7 @@
import {
memo,
useCallback,
useMemo,
} from 'react'
import { RiAddLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
@ -37,11 +38,11 @@ const AddCredentialInLoadBalancing = ({
} = modelCredential
const customModel = configurationMethod === ConfigurationMethodEnum.customizableModel
const notAllowCustomCredential = provider.allow_custom_token === false
const renderTrigger = useCallback((open?: boolean) => {
const ButtonComponent = useMemo(() => {
const Item = (
<div className={cn(
'system-sm-medium flex h-8 items-center rounded-lg px-3 text-text-accent hover:bg-state-base-hover',
open && 'bg-state-base-hover',
notAllowCustomCredential && 'cursor-not-allowed opacity-50',
)}>
<RiAddLine className='mr-2 h-4 w-4' />
@ -59,13 +60,34 @@ const AddCredentialInLoadBalancing = ({
asChild
popupContent={t('plugin.auth.credentialUnavailable')}
>
{Item}
</Tooltip>
)
{Item}
</Tooltip>
)
}
return Item
}, [notAllowCustomCredential, t, customModel])
const renderTrigger = useCallback((open?: boolean) => {
const Item = (
<div className={cn(
'system-sm-medium flex h-8 items-center rounded-lg px-3 text-text-accent hover:bg-state-base-hover',
open && 'bg-state-base-hover',
)}>
<RiAddLine className='mr-2 h-4 w-4' />
{
customModel
? t('common.modelProvider.auth.addCredential')
: t('common.modelProvider.auth.addApiKey')
}
</div>
)
return Item
}, [t, customModel])
if (!available_credentials?.length)
return ButtonComponent
return (
<Authorized
provider={provider}

3
web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
View File

@ -80,7 +80,6 @@ const AddCustomModel = ({
size='small'
className={cn(
open && 'bg-components-button-ghost-bg-hover',
notAllowCustomCredential && 'cursor-not-allowed opacity-50',
)}
>
<RiAddCircleFill className='mr-1 h-3.5 w-3.5' />
@ -88,7 +87,7 @@ const AddCustomModel = ({
</Button>
)
return Item
}, [t, notAllowCustomCredential])
}, [t])
if (noModels)
return ButtonComponent

16
web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
View File

@ -29,7 +29,6 @@ import type {
} from '../../declarations'
import { useAuth } from '../hooks'
import AuthorizedItem from './authorized-item'
import Tooltip from '@/app/components/base/tooltip'
type AuthorizedProps = {
provider: ModelProvider,
@ -114,26 +113,15 @@ const Authorized = ({
const Trigger = useMemo(() => {
const Item = (
<Button
className={cn('grow', notAllowCustomCredential && 'cursor-not-allowed')}
className='grow'
size='small'
>
<RiEqualizer2Line className='mr-1 h-3.5 w-3.5' />
{t('common.operation.config')}
</Button>
)
if (notAllowCustomCredential) {
return (
<Tooltip
asChild
popupContent={t('plugin.auth.credentialUnavailable')}
>
{Item}
</Tooltip>
)
}
return Item
}, [notAllowCustomCredential, t])
}, [t])
return (
<>

2
web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-credential-status.ts
View File

@ -12,6 +12,7 @@ export const useCredentialStatus = (provider: ModelProvider) => {
const hasCredential = !!available_credentials?.length
const authorized = current_credential_id && current_credential_name
const authRemoved = hasCredential && !current_credential_id && !current_credential_name
const currentCredential = available_credentials?.find(credential => credential.credential_id === current_credential_id)
return useMemo(() => ({
hasCredential,
@ -20,5 +21,6 @@ export const useCredentialStatus = (provider: ModelProvider) => {
current_credential_id,
current_credential_name,
available_credentials,
notAllowedToUse: currentCredential?.not_allowed_to_use,
}), [hasCredential, authorized, authRemoved, current_credential_id, current_credential_name, available_credentials])
}

18
web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
View File

@ -16,6 +16,7 @@ import type {
import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
import cn from '@/utils/classnames'
import Tooltip from '@/app/components/base/tooltip'
import Badge from '@/app/components/base/badge'
type SwitchCredentialInLoadBalancingProps = {
provider: ModelProvider
@ -41,10 +42,10 @@ const SwitchCredentialInLoadBalancing = ({
const selectedCredentialId = customModelCredential?.credential_id
const authRemoved = !selectedCredentialId && !!credentials?.length
let color = 'green'
if (authRemoved && !customModelCredential?.not_allowed_to_use)
color = 'red'
if (customModelCredential?.not_allowed_to_use)
color = 'gray'
if (authRemoved)
color = 'red'
const Item = (
<Button
@ -60,7 +61,18 @@ const SwitchCredentialInLoadBalancing = ({
color={color as any}
/>
{
authRemoved ? t('common.modelProvider.auth.authRemoved') : customModelCredential?.credential_name
authRemoved && !customModelCredential?.not_allowed_to_use && t('common.modelProvider.auth.authRemoved')
}
{
!authRemoved && customModelCredential?.not_allowed_to_use && t('plugin.auth.credentialUnavailable')
}
{
!authRemoved && !customModelCredential?.not_allowed_to_use && customModelCredential?.credential_name
}
{
customModelCredential?.from_enterprise && (
<Badge className='ml-2'>Enterprise</Badge>
)
}
<RiArrowDownSLine className='h-4 w-4' />
</Button>

11
web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
View File

@ -44,6 +44,7 @@ const CredentialPanel = ({
authorized,
authRemoved,
current_credential_name,
notAllowedToUse,
} = useCredentialStatus(provider)
const handleChangePriority = async (key: PreferredProviderTypeEnum) => {
@ -79,6 +80,14 @@ const CredentialPanel = ({
return ''
}, [authorized, authRemoved, current_credential_name, hasCredential])
const color = useMemo(() => {
if (authRemoved)
return 'red'
if (notAllowedToUse)
return 'gray'
return 'green'
}, [authRemoved, notAllowedToUse])
return (
<>
{
@ -97,7 +106,7 @@ const CredentialPanel = ({
>
{credentialLabel}
</div>
<Indicator className='shrink-0' color={authorized ? 'green' : 'red'} />
<Indicator className='shrink-0' color={color} />
</div>
<div className='flex items-center gap-0.5'>
<ConfigProvider

5
web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
View File

@ -57,6 +57,7 @@ const ModelLoadBalancingConfigs = ({
onUpdate,
}: ModelLoadBalancingConfigsProps) => {
const { t } = useTranslation()
const providerFormSchemaPredefined = configurationMethod === ConfigurationMethodEnum.predefinedModel
const modelLoadBalancingEnabled = useProviderContextSelector(state => state.modelLoadBalancingEnabled)
const handleOpenModal = useModelModalHandler()
@ -192,7 +193,7 @@ const ModelLoadBalancingConfigs = ({
<div className='mr-1 text-[13px]'>
{isProviderManaged ? t('common.modelProvider.defaultConfig') : config.name}
</div>
{isProviderManaged && (
{isProviderManaged && providerFormSchemaPredefined && (
<Badge className='ml-2'>{t('common.modelProvider.providerManaged')}</Badge>
)}
{
@ -206,7 +207,7 @@ const ModelLoadBalancingConfigs = ({
<>
<div className='flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
{
config.credential_id && !credential?.not_allowed_to_use && (
config.credential_id && !credential?.not_allowed_to_use && !credential?.from_enterprise && (
<span
className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-components-button-secondary-bg text-text-tertiary transition-colors hover:bg-components-button-secondary-bg-hover'
onClick={() => {

12
web/app/components/plugins/plugin-auth/authorized-in-node.tsx
View File

@ -41,6 +41,7 @@ const AuthorizedInNode = ({
let label = ''
let removed = false
let unavailable = false
let color = 'green'
if (!credentialId) {
label = t('plugin.auth.workspaceDefault')
}
@ -48,7 +49,12 @@ const AuthorizedInNode = ({
const credential = credentials.find(c => c.id === credentialId)
label = credential ? credential.name : t('plugin.auth.authRemoved')
removed = !credential
unavailable = !!credential?.not_allowed_to_use
unavailable = !!credential?.not_allowed_to_use && !credential?.from_enterprise
if (removed)
color = 'red'
else if (unavailable)
color = 'gray'
}
return (
<Button
@ -60,11 +66,11 @@ const AuthorizedInNode = ({
>
<Indicator
className='mr-1.5'
color={removed ? 'red' : 'green'}
color={color as any}
/>
{label}
{
!unavailable && t('plugin.auth.unavailable')
unavailable && t('plugin.auth.unavailable')
}
<RiArrowDownSLine
className={cn(

11
web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
View File

@ -60,6 +60,7 @@ const PluginAuthInAgent = ({
let label = ''
let removed = false
let unavailable = false
let color = 'green'
if (!credentialId) {
label = t('plugin.auth.workspaceDefault')
}
@ -67,7 +68,11 @@ const PluginAuthInAgent = ({
const credential = credentials.find(c => c.id === credentialId)
label = credential ? credential.name : t('plugin.auth.authRemoved')
removed = !credential
unavailable = !!credential?.not_allowed_to_use
unavailable = !!credential?.not_allowed_to_use && !credential?.from_enterprise
if (removed)
color = 'red'
else if (unavailable)
color = 'gray'
}
return (
<Button
@ -78,11 +83,11 @@ const PluginAuthInAgent = ({
)}>
<Indicator
className='mr-2'
color={removed ? 'red' : 'green'}
color={color as any}
/>
{label}
{
!unavailable && t('plugin.auth.unavailable')
unavailable && t('plugin.auth.unavailable')
}
<RiArrowDownSLine className='ml-0.5 h-4 w-4' />
</Button>