feat: plugin info

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

@@ -26,7 +26,7 @@ const DebugInfo: FC = () => {
               <RiArrowRightUpLine className='w-3 h-3' />
             </a>
           </div>
-          <div className='flex flex-col items-start gap-0.5 self-stretch'>
+          <div className='space-y-0.5'>
             <KeyValueItem
               label={'Port'}
               value={'cloud.dify,ai:2048'}

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

@@ -0,0 +1,40 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import KeyValueItem from '../base/key-value-item'
+import Modal from '../../base/modal'
+
+const i18nPrefix = 'plugin.pluginInfoModal'
+type Props = {
+  repository: string
+  release: string
+  packageName: string
+  onHide: () => void
+}
+
+const PlugInfo: FC<Props> = ({
+  repository,
+  release,
+  packageName,
+  onHide,
+}) => {
+  const { t } = useTranslation()
+  const labelWidthClassName = 'w-[96px]'
+  return (
+    <Modal
+      title={t(`${i18nPrefix}.title`)}
+      className='w-[480px]'
+      isShow
+      onClose={onHide}
+      closable
+    >
+      <div className='mt-5 space-y-3'>
+        <KeyValueItem label={t(`${i18nPrefix}.repository`)} labelWidthClassName={labelWidthClassName} value={repository} />
+        <KeyValueItem label={t(`${i18nPrefix}.release`)} labelWidthClassName={labelWidthClassName} value={release} />
+        <KeyValueItem label={t(`${i18nPrefix}.packageName`)} labelWidthClassName={labelWidthClassName} value={packageName} />
+      </div>
+    </Modal>
+  )
+}
+export default React.memo(PlugInfo)