feat: plugin info

web/app/components/plugins/base/key-value-item.tsx

@@ -9,14 +9,17 @@ import {
 import { useTranslation } from 'react-i18next'
 import { ClipboardCheck } from '../../base/icons/src/vender/line/files'
 import Tooltip from '../../base/tooltip'
+import cn from '@/utils/classnames'
 import ActionButton from '@/app/components/base/action-button'
 type Props = {
   label: string
+  labelWidthClassName?: string
   value: string
 }
 
 const KeyValueItem: FC<Props> = ({
   label,
+  labelWidthClassName = 'w-10',
   value,
 }) => {
   const { t } = useTranslation()
@@ -41,7 +44,7 @@ const KeyValueItem: FC<Props> = ({
 
   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>
+      <span className={cn('flex flex-col justify-center items-start text-text-tertiary system-xs-medium', labelWidthClassName)}>{label}</span>
       <div className='flex justify-center items-center gap-0.5'>
         <span className='system-xs-medium text-text-secondary'>
           {value}

web/app/components/plugins/plugin-item/action.tsx

@@ -3,6 +3,9 @@ import type { FC } from 'react'
 import React from 'react'
 import { useRouter } from 'next/navigation'
 import { RiDeleteBinLine, RiInformation2Line, RiLoopLeftLine } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import PluginInfo from '../plugin-page/plugin-info'
+import ActionButton from '../../base/action-button'
 
 type Props = {
   pluginId: string
@@ -19,11 +22,13 @@ const Action: FC<Props> = ({
   onDelete,
 }) => {
   const router = useRouter()
+  const [isShowPluginInfo, {
+    setTrue: showPluginInfo,
+    setFalse: hidePluginInfo,
+  }] = useBoolean(false)
 
   const handleFetchNewVersion = () => { }
-  const handleShowInfo = () => {
-    router.refresh() // refresh the page ...
-  }
+
   // const handleDelete = () => { }
   return (
     <div className='flex space-x-1'>
@@ -34,9 +39,9 @@ const Action: FC<Props> = ({
       }
       {
         isShowInfo
-        && <div className='p-0.5 cursor-pointer' onClick={handleShowInfo}>
+        && <ActionButton onClick={showPluginInfo}>
           <RiInformation2Line className='w-5 h-5 text-text-tertiary' />
-        </div>
+        </ActionButton>
       }
       {
         isShowDelete
@@ -44,6 +49,15 @@ const Action: FC<Props> = ({
           <RiDeleteBinLine className='w-5 h-5 text-text-tertiary' />
         </div>
       }
+
+      {isShowPluginInfo && (
+        <PluginInfo
+          repository='https://github.com/langgenius/dify-github-plugin'
+          release='1.2.5'
+          packageName='notion-sync.difypkg'
+          onHide={hidePluginInfo}
+        />
+      )}
     </div>
   )
 }

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)

web/i18n/en-US/plugin.ts

@@ -33,6 +33,12 @@ const translation = {
     admin: 'Admins',
     noOne: 'No one',
   },
+  pluginInfoModal: {
+    title: 'Plugin info',
+    repository: 'Repository',
+    release: 'Release',
+    packageName: 'Package',
+  },
 }
 
 export default translation

web/i18n/zh-Hans/plugin.ts

@@ -33,6 +33,12 @@ const translation = {
     admin: '管理员',
     noOne: '无人',
   },
+  pluginInfoModal: {
+    title: '插件信息',
+    repository: '仓库',
+    release: '发布版本',
+    packageName: '包',
+  },
 }
 
 export default translation