feat: add installed

web/app/(commonLayout)/plugins/test/card/page.tsx

@@ -3,15 +3,34 @@ import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/
 
 const PluginList = async () => {
   return (
-    <>
+    <div className='pb-3 bg-white'>
-      <div className='mx-3 grid grid-cols-4 gap-3'>
+      <div className='mx-3 '>
+        <h2 className='my-3'>Dify Plugin list</h2>
+        <div className='grid grid-cols-4 gap-3'>
           <Card payload={toolNotion as any} />
           <Card payload={extensionDallE as any} />
           <Card payload={modelGPT4 as any} />
           <Card payload={toolNotion as any} />
           <Card payload={toolNotion as any} />
         </div>
-    </>
+
+        <h2 className='my-3'>Install Plugin / Package under bundle</h2>
+        <div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
+          <Card
+            payload={toolNotion as any}
+            descriptionLineRows={1}
+          />
+        </div>
+        <h3 className='my-1'>Installed</h3>
+        <div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
+          <Card
+            payload={toolNotion as any}
+            descriptionLineRows={1}
+            installed
+          />
+        </div>
+      </div>
+    </div>
   )
 }
 

web/app/components/plugins/card-mock.ts

@@ -11,8 +11,8 @@ export const toolNotion = {
     'zh-Hans': 'Notion 页面搜索',
   },
   brief: {
-    'en-US': 'Description: Search Notion pages and open visited ones faster. No admin access required.',
+    'en-US': 'Description: Search Notion pages and open visited ones faster. No admin access required.More and more info...More and more info...More and more info...',
-    'zh-Hans': '搜索 Notion 页面并更快地打开已访问的页面。无需管理员访问权限。',
+    'zh-Hans': '搜索 Notion 页面并更快地打开已访问的页面。无需管理员访问权限。More and more info...More and more info...More and more info...',
   },
 }
 

web/app/components/plugins/card.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { RiVerifiedBadgeLine } from '@remixicon/react'
+import { RiCheckLine, RiVerifiedBadgeLine } from '@remixicon/react'
 import type { FC } from 'react'
 import { LeftCorner } from '../base/icons/src/vender/plugin'
 import type { Plugin } from './types'
@@ -31,6 +31,13 @@ export const Icon = ({
         backgroundImage: `url(${src})`,
       }}
     >
+      {installed
+        && <div className='p-0.5 absolute bottom-[-4px] right-[-4px] w-3 h-3 rounded-full bg-white '>
+          <div className='h-full rounded-full bg-state-success-solid'>
+            <RiCheckLine className='w-full h-full text-text-primary-on-surface' />
+          </div>
+        </div>
+      }
     </div>
   )
 }
@@ -108,7 +115,7 @@ const Card = ({
 
   const { type, name, org, label } = payload
   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')}>
+    <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)}>
       <CornerMark text={type} />
       {/* Header */}
       <div className="flex">