feat: add install

web/app/components/plugins/marketplace/list/card-wrapper.tsx

@@ -6,6 +6,8 @@ import type { Plugin } from '@/app/components/plugins/types'
 import { MARKETPLACE_URL_PREFIX } from '@/config'
 import Button from '@/app/components/base/button'
 import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
+import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
+import { useBoolean } from 'ahooks'
 
 type CardWrapperProps = {
   plugin: Plugin
@@ -18,6 +20,12 @@ const CardWrapper = ({
   locale,
 }: CardWrapperProps) => {
   const { t } = useMixedTranslation(locale)
+  const [isShowInstallFromMarketplace, {
+    setTrue: showInstallFromMarketplace,
+    setFalse: hideInstallFromMarketplace,
+  }] = useBoolean(false)
+  console.log(plugin)
+
   return (
     <div
       className='group relative rounded-xl cursor-pointer'
@@ -43,6 +51,7 @@ const CardWrapper = ({
             <Button
               variant='primary'
               className='flex-1'
+              onClick={showInstallFromMarketplace}
             >
               {t('plugin.detailPanel.operation.install')}
             </Button>
@@ -57,6 +66,16 @@ const CardWrapper = ({
           </div>
         )
       }
+      {
+        isShowInstallFromMarketplace && (
+          <InstallFromMarketplace
+            manifest={plugin as any}
+            uniqueIdentifier={plugin.latest_package_identifier}
+            onClose={hideInstallFromMarketplace}
+            onSuccess={hideInstallFromMarketplace}
+          />
+        )
+      }
     </div>
   )
 }

web/app/components/plugins/types.ts

@@ -110,6 +110,7 @@ export type Plugin = {
   plugin_id: string
   version: string
   latest_version: string
+  latest_package_identifier: string
   icon: string
   verified: boolean
   label: Record<Locale, string>