fix: marketplace

web/app/components/plugins/marketplace/description/index.tsx

@@ -21,19 +21,19 @@ const Description = async ({
       <h2 className='shrink-0 flex justify-center items-center text-center body-md-regular text-text-tertiary'>
         {t('marketplace.discover')}
         <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
-          <span className='relative z-[2]'>{t('category.models')}</span>
+          <span className='relative z-[2] lowercase'>{t('category.models')}</span>
         </span>
         ,
         <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
-          <span className='relative z-[2]'>{t('category.tools')}</span>
+          <span className='relative z-[2] lowercase'>{t('category.tools')}</span>
         </span>
         ,
         <span className="relative ml-1 mr-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
-          <span className='relative z-[2]'>{t('category.extensions')}</span>
+          <span className='relative z-[2] lowercase'>{t('category.extensions')}</span>
         </span>
         {t('marketplace.and')}
         <span className="relative ml-1 mr-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
-          <span className='relative z-[2]'>{t('category.bundles')}</span>
+          <span className='relative z-[2] lowercase'>{t('category.bundles')}</span>
         </span>
         <span className='mr-1'>{tCommon('operation.in')}</span>
         {t('marketplace.difyMarketplace')}

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

@@ -25,13 +25,61 @@ const CardWrapper = ({
     setFalse: hideInstallFromMarketplace,
   }] = useBoolean(false)
 
+  if (showInstallButton) {
+    return (
+      <div
+        className='group relative rounded-xl cursor-pointer'
+      >
+        <Card
+          key={plugin.name}
+          payload={plugin}
+          locale={locale}
+          footer={
+            <CardMoreInfo
+              downloadCount={plugin.install_count}
+              tags={plugin.tags.map(tag => tag.name)}
+            />
+          }
+        />
+        {
+          showInstallButton && (
+            <div className='hidden absolute bottom-0 group-hover:flex items-center space-x-2 px-4 pt-8 pb-4 w-full bg-gradient-to-tr from-[#f9fafb] to-[rgba(249,250,251,0)] rounded-b-xl'>
+              <Button
+                variant='primary'
+                className='flex-1'
+                onClick={showInstallFromMarketplace}
+              >
+                {t('plugin.detailPanel.operation.install')}
+              </Button>
+              <Button
+                className='flex-1'
+              >
+                <a href={`${MARKETPLACE_URL_PREFIX}/plugin/${plugin.org}/${plugin.name}`} target='_blank' className='flex items-center gap-0.5'>
+                  {t('plugin.detailPanel.operation.detail')}
+                  <RiArrowRightUpLine className='ml-1 w-4 h-4' />
+                </a>
+              </Button>
+            </div>
+          )
+        }
+        {
+          isShowInstallFromMarketplace && (
+            <InstallFromMarketplace
+              manifest={plugin as any}
+              uniqueIdentifier={plugin.latest_package_identifier}
+              onClose={hideInstallFromMarketplace}
+              onSuccess={hideInstallFromMarketplace}
+            />
+          )
+        }
+      </div>
+    )
+  }
+
   return (
-    <div
-      className='group relative rounded-xl cursor-pointer'
-      onClick={() => {
-        if (!showInstallButton)
-          window.open(`${MARKETPLACE_URL_PREFIX}/plugin/${plugin.org}/${plugin.name}`)
-      }}
+    <a
+      className='group inline-block relative rounded-xl cursor-pointer'
+      href={`${MARKETPLACE_URL_PREFIX}/plugin/${plugin.org}/${plugin.name}`}
     >
       <Card
         key={plugin.name}
@@ -65,17 +113,7 @@ const CardWrapper = ({
           </div>
         )
       }
-      {
-        isShowInstallFromMarketplace && (
-          <InstallFromMarketplace
-            manifest={plugin as any}
-            uniqueIdentifier={plugin.latest_package_identifier}
-            onClose={hideInstallFromMarketplace}
-            onSuccess={hideInstallFromMarketplace}
-          />
-        )
-      }
-    </div>
+    </a>
   )
 }