feat: Plugin page related document supports multiple languages (#19197)

web/app/components/plugins/plugin-page/debug-info.tsx

@@ -1,6 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
+import { useContext } from 'use-context-selector'
+import I18n from '@/context/i18n'
 import {
   RiArrowRightUpLine,
   RiBugLine,
@@ -9,12 +11,14 @@ import { useTranslation } from 'react-i18next'
 import KeyValueItem from '../base/key-value-item'
 import Tooltip from '@/app/components/base/tooltip'
 import Button from '@/app/components/base/button'
+import { getDocsUrl } from '@/app/components/plugins/utils'
 import { useDebugKey } from '@/service/use-plugins'
 
 const i18nPrefix = 'plugin.debugInfo'
 
 const DebugInfo: FC = () => {
   const { t } = useTranslation()
+  const { locale } = useContext(I18n)
   const { data: info, isLoading } = useDebugKey()
 
   // info.key likes 4580bdb7-b878-471c-a8a4-bfd760263a53 mask the middle part using *.
@@ -30,7 +34,7 @@ const DebugInfo: FC = () => {
         <>
           <div className='flex items-center gap-1 self-stretch'>
             <span className='system-sm-semibold flex shrink-0 grow basis-0 flex-col items-start justify-center text-text-secondary'>{t(`${i18nPrefix}.title`)}</span>
-            <a href='https://docs.dify.ai/plugins/quick-start/develop-plugins/debug-plugin' target='_blank' className='flex cursor-pointer items-center gap-0.5 text-text-accent-light-mode-only'>
+            <a href={getDocsUrl(locale, '/plugins/quick-start/debug-plugin')} target='_blank' className='flex cursor-pointer items-center gap-0.5 text-text-accent-light-mode-only'>
               <span className='system-xs-medium'>{t(`${i18nPrefix}.viewDocs`)}</span>
               <RiArrowRightUpLine className='h-3 w-3' />
             </a>

web/app/components/plugins/plugin-page/index.tsx

@@ -34,10 +34,10 @@ import {
 import type { Dependency } from '../types'
 import type { PluginDeclaration, PluginManifestInMarket } from '../types'
 import { sleep } from '@/utils'
+import { getDocsUrl } from '@/app/components/plugins/utils'
 import { fetchBundleInfoFromMarketPlace, fetchManifestFromMarketPlace } from '@/service/plugins'
 import { marketplaceApiPrefix } from '@/config'
 import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
-import { LanguagesSupported } from '@/i18n/language'
 import I18n from '@/context/i18n'
 import { noop } from 'lodash-es'
 import { PLUGIN_TYPE_SEARCH_MAP } from '../marketplace/plugin-type-switch'
@@ -187,7 +187,7 @@ const PluginPage = ({
               isExploringMarketplace && (
                 <>
                   <Link
-                    href={`https://docs.dify.ai/${locale === LanguagesSupported[1] ? 'v/zh-hans/' : ''}plugins/publish-plugins/publish-to-dify-marketplace`}
+                    href={getDocsUrl(locale, '/plugins/publish-plugins/publish-to-dify-marketplace/README')}
                     target='_blank'
                   >
                     <Button

web/app/components/plugins/utils.ts

@@ -1,3 +1,5 @@
+import { LanguagesSupported } from '@/i18n/language'
+
 import {
   categoryKeys,
   tagKeys,
@@ -10,3 +12,15 @@ export const getValidTagKeys = (tags: string[]) => {
 export const getValidCategoryKeys = (category?: string) => {
   return categoryKeys.find(key => key === category)
 }
+
+export const getDocsUrl = (locale: string, path: string) => {
+  let localePath = 'en'
+
+  if (locale === LanguagesSupported[1])
+    localePath = 'zh-hans'
+
+  else if (locale === LanguagesSupported[7])
+    localePath = 'ja-jp'
+
+  return `https://docs.dify.ai/${localePath}${path}`
+}