mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-08-16 17:45:54 +08:00
feat: add debug info i18n and extract common to components
This commit is contained in:
Joel
parent
35384bda41
commit
d1dcd39191
42
web/app/components/plugins/base/key-value-item.tsx
Normal file
42
web/app/components/plugins/base/key-value-item.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback } from 'react'
|
||||
import copy from 'copy-to-clipboard'
|
||||
|
||||
import {
|
||||
RiClipboardLine,
|
||||
} from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Toast from '../../base/toast'
|
||||
import ActionButton from '@/app/components/base/action-button'
|
||||
type Props = {
|
||||
label: string
|
||||
value: string
|
||||
}
|
||||
|
||||
const KeyValueItem: FC<Props> = ({
|
||||
label,
|
||||
value,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const handleCopy = useCallback(() => {
|
||||
copy(value)
|
||||
Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
|
||||
}, [value])
|
||||
|
||||
return (
|
||||
<div className='flex items-center gap-1 self-stretch'>
|
||||
<span className='flex w-10 flex-col justify-center items-start text-text-tertiary system-xs-medium'>{label}</span>
|
||||
<div className='flex justify-center items-center gap-0.5'>
|
||||
<span className='system-xs-medium text-text-secondary'>
|
||||
{value}
|
||||
</span>
|
||||
<ActionButton onClick={handleCopy}>
|
||||
<RiClipboardLine className='w-3.5 h-3.5 text-text-tertiary' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(KeyValueItem)
|
||||
@ -52,7 +52,7 @@ const Card = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
|
||||
<div className={wrapClassName}>
|
||||
{!hideCornerMark && <CornerMark text={type} />}
|
||||
{/* Header */}
|
||||
<div className="flex">
|
||||
|
||||
53
web/app/components/plugins/plugin-page/debug-info.tsx
Normal file
53
web/app/components/plugins/plugin-page/debug-info.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import {
|
||||
RiArrowRightUpLine,
|
||||
RiBugLine,
|
||||
} from '@remixicon/react'
|
||||
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'
|
||||
|
||||
const i18nPrefix = 'plugin.debugInfo'
|
||||
|
||||
const DebugInfo: FC = () => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<Tooltip
|
||||
triggerMethod='click'
|
||||
popupContent={
|
||||
<>
|
||||
<div className='flex items-center gap-1 self-stretch'>
|
||||
<span className='flex flex-col justify-center items-start flex-grow flex-shrink-0 basis-0 text-text-secondary system-sm-semibold'>{t(`${i18nPrefix}.title`)}</span>
|
||||
<a href='' target='_blank' className='flex items-center gap-0.5 text-text-accent-light-mode-only cursor-pointer'>
|
||||
<span className='system-xs-medium'>{t(`${i18nPrefix}.viewDocs`)}</span>
|
||||
<RiArrowRightUpLine className='w-3 h-3' />
|
||||
</a>
|
||||
</div>
|
||||
<div className='flex flex-col items-start gap-0.5 self-stretch'>
|
||||
<KeyValueItem
|
||||
label={'Port'}
|
||||
value={'cloud.dify,ai:2048'}
|
||||
/>
|
||||
<KeyValueItem
|
||||
label={'Key'}
|
||||
value={'A1B2C3D4E5F6G7H8'}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
popupClassName='flex flex-col items-start w-[256px] px-4 py-3.5 gap-1 border border-components-panel-border
|
||||
rounded-xl bg-components-tooltip-bg shadows-shadow-lg z-50'
|
||||
asChild={false}
|
||||
position='bottom'
|
||||
>
|
||||
<Button className='w-full h-full p-2 text-components-button-secondary-text'>
|
||||
<RiBugLine className='w-4 h-4' />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(DebugInfo)
|
||||
@ -3,9 +3,6 @@
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
RiArrowRightUpLine,
|
||||
RiBugLine,
|
||||
RiClipboardLine,
|
||||
RiDragDropLine,
|
||||
RiEqualizer2Line,
|
||||
} from '@remixicon/react'
|
||||
@ -18,10 +15,10 @@ import {
|
||||
import InstallPluginDropdown from './install-plugin-dropdown'
|
||||
import { useUploader } from './use-uploader'
|
||||
import usePermission from './use-permission'
|
||||
import DebugInfo from './debug-info'
|
||||
import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
|
||||
import Button from '@/app/components/base/button'
|
||||
import TabSlider from '@/app/components/base/tab-slider'
|
||||
import ActionButton from '@/app/components/base/action-button'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import cn from '@/utils/classnames'
|
||||
import PermissionSetModal from '@/app/components/plugins/permission-setting-modal/modal'
|
||||
@ -93,43 +90,7 @@ const PluginPage = ({
|
||||
)}
|
||||
{
|
||||
canDebugger && (
|
||||
<Tooltip
|
||||
triggerMethod='click'
|
||||
popupContent={
|
||||
<>
|
||||
<div className='flex items-center gap-1 self-stretch'>
|
||||
<span className='flex flex-col justify-center items-start flex-grow flex-shrink-0 basis-0 text-text-secondary system-sm-semibold'>Debugging</span>
|
||||
<div className='flex items-center gap-0.5 text-text-accent-light-mode-only cursor-pointer'>
|
||||
<span className='system-xs-medium'>View docs</span>
|
||||
<RiArrowRightUpLine className='w-3 h-3' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col items-start gap-0.5 self-stretch'>
|
||||
{['Port', 'Key'].map((label, index) => (
|
||||
<div key={label} className='flex items-center gap-1 self-stretch'>
|
||||
<span className='flex w-10 flex-col justify-center items-start text-text-tertiary system-xs-medium'>{label}</span>
|
||||
<div className='flex justify-center items-center gap-0.5'>
|
||||
<span className='system-xs-medium text-text-secondary'>
|
||||
{index === 0 ? 'cloud.dify,ai:2048' : 'A1B2C3D4E5F6G7H8'}
|
||||
</span>
|
||||
<ActionButton>
|
||||
<RiClipboardLine className='w-3.5 h-3.5 text-text-tertiary' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
popupClassName='flex flex-col items-start w-[256px] px-4 py-3.5 gap-1 border border-components-panel-border
|
||||
rounded-xl bg-components-tooltip-bg shadows-shadow-lg z-50'
|
||||
asChild={false}
|
||||
position='bottom'
|
||||
>
|
||||
<Button className='w-full h-full p-2 text-components-button-secondary-text'>
|
||||
<RiBugLine className='w-4 h-4' />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<DebugInfo />
|
||||
)
|
||||
}
|
||||
{
|
||||
|
||||
@ -21,6 +21,10 @@ const translation = {
|
||||
},
|
||||
install: '{{num}} installs',
|
||||
installAction: 'Install',
|
||||
debugInfo: {
|
||||
title: 'Debugging',
|
||||
viewDocs: 'View Docs',
|
||||
},
|
||||
privilege: {
|
||||
title: 'Plugin Preferences',
|
||||
whoCanInstall: 'Who can install and manage plugins?',
|
||||
|
||||
@ -21,6 +21,10 @@ const translation = {
|
||||
},
|
||||
install: '{{num}} 次安装',
|
||||
installAction: '安装',
|
||||
debugInfo: {
|
||||
title: '调试',
|
||||
viewDocs: '查看文档',
|
||||
},
|
||||
privilege: {
|
||||
title: '插件偏好',
|
||||
whoCanInstall: '谁可以安装和管理插件？',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user