outman/dify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor I18n render in plugin detail

Browse Source
This commit is contained in:
JzoNg 2025-01-03 10:16:44 +08:00
parent 5fb356fd33
commit 39335b8038
5 changed files with 21 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
View File

@ -8,7 +8,7 @@ import Button from '@/app/components/base/button'
import Drawer from '@/app/components/base/drawer'
import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
import Toast from '@/app/components/base/toast'
import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
import { useRenderI18nObject } from '@/hooks/use-i18n'
import cn from '@/utils/classnames'
type Props = {
@ -24,14 +24,14 @@ const EndpointModal: FC<Props> = ({
onCancel,
onSaved,
}) => {
const getValueFromI18nObject = useRenderI18nObject()
const { t } = useTranslation()
const language = useLanguage()
const [tempCredential, setTempCredential] = React.useState<any>(defaultValues)
const handleSave = () => {
for (const field of formSchemas) {
if (field.required && !tempCredential[field.name]) {
Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: field.label[language] || field.label.en_US }) })
Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: getValueFromI18nObject(field.label) }) })
return
}
}

17
web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
View File

@ -2,7 +2,6 @@
import type { FC } from 'react'
import React, { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import {
RiArrowLeftLine,
RiCloseLine,
@ -16,8 +15,7 @@ import type {
StrategyDetail,
} from '@/app/components/plugins/types'
import type { Locale } from '@/i18n'
import I18n from '@/context/i18n'
import { getLanguage } from '@/i18n/language'
import { useRenderI18nObject } from '@/hooks/use-i18n'
import cn from '@/utils/classnames'
type Props = {
@ -38,8 +36,7 @@ const StrategyDetail: FC<Props> = ({
detail,
onHide,
}) => {
const { locale } = useContext(I18n)
const language = getLanguage(locale)
const getValueFromI18nObject = useRenderI18nObject()
const { t } = useTranslation()
const outputSchema = useMemo(() => {
@ -98,10 +95,10 @@ const StrategyDetail: FC<Props> = ({
</div>
<div className='flex items-center gap-1'>
<Icon size='tiny' className='w-6 h-6' src={provider.icon} />
<div className=''>{provider.label[language]}</div>
<div className=''>{getValueFromI18nObject(provider.label)}</div>
</div>
<div className='mt-1 text-text-primary system-md-semibold'>{detail.identity.label[language]}</div>
<Description className='mt-3' text={detail.description[language]} descriptionLineRows={2}></Description>
<div className='mt-1 text-text-primary system-md-semibold'>{getValueFromI18nObject(detail.identity.label)}</div>
<Description className='mt-3' text={getValueFromI18nObject(detail.description)} descriptionLineRows={2}></Description>
</div>
{/* form */}
<div className='h-full'>
@ -113,7 +110,7 @@ const StrategyDetail: FC<Props> = ({
{detail.parameters.map((item: any, index) => (
<div key={index} className='py-1'>
<div className='flex items-center gap-2'>
<div className='text-text-secondary code-sm-semibold'>{item.label[language]}</div>
<div className='text-text-secondary code-sm-semibold'>{getValueFromI18nObject(item.label)}</div>
<div className='text-text-tertiary system-xs-regular'>
{getType(item.type)}
</div>
@ -123,7 +120,7 @@ const StrategyDetail: FC<Props> = ({
</div>
{item.human_description && (
<div className='mt-0.5 text-text-tertiary system-xs-regular'>
{item.human_description?.[language]}
{getValueFromI18nObject(item.human_description)}
</div>
)}
</div>

11
web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
View File

@ -1,13 +1,11 @@
'use client'
import React, { useState } from 'react'
import { useContext } from 'use-context-selector'
import StrategyDetailPanel from './strategy-detail'
import type {
StrategyDetail,
} from '@/app/components/plugins/types'
import type { Locale } from '@/i18n'
import I18n from '@/context/i18n'
import { getLanguage } from '@/i18n/language'
import { useRenderI18nObject } from '@/hooks/use-i18n'
import cn from '@/utils/classnames'
type Props = {
@ -26,8 +24,7 @@ const StrategyItem = ({
provider,
detail,
}: Props) => {
const { locale } = useContext(I18n)
const language = getLanguage(locale)
const getValueFromI18nObject = useRenderI18nObject()
const [showDetail, setShowDetail] = useState(false)
return (
@ -36,8 +33,8 @@ const StrategyItem = ({
className={cn('mb-2 px-4 py-3 bg-components-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover')}
onClick={() => setShowDetail(true)}
>
<div className='pb-0.5 text-text-secondary system-md-semibold'>{detail.identity.label[language]}</div>
<div className='text-text-tertiary system-xs-regular line-clamp-2' title={detail.description[language]}>{detail.description[language]}</div>
<div className='pb-0.5 text-text-secondary system-md-semibold'>{getValueFromI18nObject(detail.identity.label)}</div>
<div className='text-text-tertiary system-xs-regular line-clamp-2' title={getValueFromI18nObject(detail.description)}>{getValueFromI18nObject(detail.description)}</div>
</div>
{showDetail && (
<StrategyDetailPanel

6
web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
View File

@ -12,7 +12,7 @@ import Toast from '@/app/components/base/toast'
import { fetchBuiltInToolCredential, fetchBuiltInToolCredentialSchema } from '@/service/tools'
import Loading from '@/app/components/base/loading'
import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
import { useRenderI18nObject } from '@/hooks/use-i18n'
import cn from '@/utils/classnames'
type Props = {
@ -26,8 +26,8 @@ const ToolCredentialForm: FC<Props> = ({
onCancel,
onSaved,
}) => {
const getValueFromI18nObject = useRenderI18nObject()
const { t } = useTranslation()
const language = useLanguage()
const [credentialSchema, setCredentialSchema] = useState<any>(null)
const { name: collectionName } = collection
const [tempCredential, setTempCredential] = React.useState<any>({})
@ -45,7 +45,7 @@ const ToolCredentialForm: FC<Props> = ({
const handleSave = () => {
for (const field of credentialSchema) {
if (field.required && !tempCredential[field.name]) {
Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: field.label[language] || field.label.en_US }) })
Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: getValueFromI18nObject(field.label) }) })
return
}
}

8
web/app/components/plugins/provider-card.tsx
View File

@ -10,12 +10,12 @@ import Icon from './card/base/card-icon'
import Title from './card/base/title'
import DownloadCount from './card/base/download-count'
import Button from '@/app/components/base/button'
import { useGetLanguage } from '@/context/i18n'
import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
import cn from '@/utils/classnames'
import { useBoolean } from 'ahooks'
import { getPluginLinkInMarketplace } from '@/app/components/plugins/marketplace/utils'
import { useI18N } from '@/context/i18n'
import { useRenderI18nObject } from '@/hooks/use-i18n'
type Props = {
className?: string
@ -26,12 +26,12 @@ const ProviderCard: FC<Props> = ({
className,
payload,
}) => {
const getValueFromI18nObject = useRenderI18nObject()
const { t } = useTranslation()
const [isShowInstallFromMarketplace, {
setTrue: showInstallFromMarketplace,
setFalse: hideInstallFromMarketplace,
}] = useBoolean(false)
const language = useGetLanguage()
const { org, label } = payload
const { locale } = useI18N()
@ -42,7 +42,7 @@ const ProviderCard: FC<Props> = ({
<Icon src={payload.icon} />
<div className="ml-3 w-0 grow">
<div className="flex items-center h-5">
<Title title={label[language] || label.en_US} />
<Title title={getValueFromI18nObject(label)} />
{/* <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" /> */}
</div>
<div className='mb-1 flex justify-between items-center h-4'>
@ -54,7 +54,7 @@ const ProviderCard: FC<Props> = ({
</div>
</div>
</div>
<Description className='mt-3' text={payload.brief[language] || payload.brief.en_US} descriptionLineRows={2}></Description>
<Description className='mt-3' text={getValueFromI18nObject(payload.brief)} descriptionLineRows={2}></Description>
<div className='mt-3 flex space-x-0.5'>
{payload.tags.map(tag => (
<Badge key={tag.name} text={tag.name} />