feat: finish card components

web/app/(commonLayout)/plugins/test/card/actions.ts

@@ -0,0 +1,9 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+
+// Server Actions
+export async function handleDelete() {
+  // revalidatePath only invalidates the cache when the included path is next visited.
+  revalidatePath('/')
+}

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

@@ -1,18 +1,21 @@
+import { handleDelete } from './actions'
 import Card from '@/app/components/plugins/card'
 import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
 import PluginItem from '@/app/components/plugins/plugin-item'
+import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
+import InstallModelItem from '@/app/components/plugins/install-model-item'
 
 const PluginList = async () => {
+  const pluginList = [toolNotion, extensionDallE, modelGPT4, toolNotion, toolNotion]
+
   return (
     <div className='pb-3 bg-white'>
       <div className='mx-3 '>
         <h2 className='my-3'>Dify Plugin list</h2>
         <div className='grid grid-cols-2 gap-3'>
-          <PluginItem payload={toolNotion as any} />
-          <PluginItem payload={extensionDallE as any} />
-          <PluginItem payload={modelGPT4 as any} />
-          <PluginItem payload={toolNotion as any} />
-          <PluginItem payload={toolNotion as any} />
+          {pluginList.map((plugin, index) => (
+            <PluginItem key={index} payload={plugin as any} onDelete={handleDelete} />
+          ))}
         </div>
 
         <h2 className='my-3'>Install Plugin / Package under bundle</h2>
@@ -32,14 +35,25 @@ const PluginList = async () => {
           />
         </div>
 
+        <h3 className='my-1'>Install model provide</h3>
+        <div className='grid grid-cols-2 gap-3'>
+          {pluginList.map((plugin, index) => (
+            <InstallModelItem key={index} payload={plugin as any} />
+          ))}
+        </div>
+
         <div className='my-3 h-[px] bg-gray-50'></div>
         <h2 className='my-3'>Marketplace 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} />
+          {pluginList.map((plugin, index) => (
+            <Card
+              key={index}
+              payload={plugin as any}
+              footer={
+                <CardMoreInfo downloadCount={index % 2 === 0 ? 1234 : 6} tags={index % 2 === 0 ? ['Search', 'Productivity'] : []} />
+              }
+            />
+          ))}
         </div>
       </div>
     </div>

web/app/components/plugins/card/base/description.tsx

@@ -15,11 +15,11 @@ const Description: FC<Props> = ({
 }) => {
   const lineClassName = useMemo(() => {
     if (descriptionLineRows === 1)
-      return 'truncate'
+      return 'h-4 truncate'
     else if (descriptionLineRows === 2)
-      return 'line-clamp-2'
+      return 'h-8 line-clamp-2'
     else
-      return 'line-clamp-3'
+      return 'h-12 line-clamp-3'
   }, [descriptionLineRows])
   return (
     <div className={cn('text-text-tertiary system-xs-regular', lineClassName, className)}>

web/app/components/plugins/card/base/download-count.tsx

@@ -0,0 +1,19 @@
+import { RiInstallLine } from '@remixicon/react'
+import { formatNumber } from '@/utils/format'
+
+type Props = {
+  downloadCount: number
+}
+
+const DownloadCount = ({
+  downloadCount,
+}: Props) => {
+  return (
+    <div className="flex items-center space-x-1 text-text-tertiary">
+      <RiInstallLine className="shrink-0 w-3 h-3" />
+      <div className="system-xs-regular">{formatNumber(downloadCount)}</div>
+    </div>
+  )
+}
+
+export default DownloadCount

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

@@ -23,6 +23,7 @@ export const extensionDallE = {
   name: 'DALL-E',
   version: '1.1.0',
   latest_version: '1.2.0',
+  install_count: 1234,
   icon: 'https://via.placeholder.com/150',
   label: {
     'en-US': 'DALL-E',
@@ -40,6 +41,7 @@ export const modelGPT4 = {
   name: 'GPT-4',
   version: '1.0.0',
   latest_version: '1.0.0',
+  install_count: 99999,
   icon: 'https://via.placeholder.com/150',
   label: {
     'en-US': 'GPT-4',

web/app/components/plugins/card/card-more-info.tsx

@@ -1,3 +1,32 @@
-const CardMoreInfo = () => {
+import DownloadCount from './base/download-count'
 
+type Props = {
+  downloadCount: number
+  tags: string[]
 }
+
+const CardMoreInfo = ({
+  downloadCount,
+  tags,
+}: Props) => {
+  return (
+    <div className="flex items-center h-5">
+      <DownloadCount downloadCount={downloadCount} />
+      {tags && tags.length > 0 && (
+        <>
+          <div className="mx-2 text-text-quaternary system-xs-regular">·</div>
+          <div className="flex space-x-2">
+            {tags.map(tag => (
+              <div key={tag} className="flex space-x-1 system-xs-regular">
+                <span className="text-text-quaternary">#</span>
+                <span className="text-text-tertiary">{tag}</span>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default CardMoreInfo

web/app/components/plugins/install-model-item.tsx

@@ -0,0 +1,56 @@
+import type { FC } from 'react'
+import React from 'react'
+import { RiVerifiedBadgeLine } from '@remixicon/react'
+import Badge from '../base/badge'
+import type { Plugin } from './types'
+import Description from './card/base/description'
+import Icon from './card/base/icon'
+import Title from './card/base/title'
+import DownloadCount from './card/base/download-count'
+import { getLocaleOnServer } from '@/i18n/server'
+import cn from '@/utils/classnames'
+
+type Props = {
+  className?: string
+  payload: Plugin
+}
+
+const PluginItem: FC<Props> = async ({
+  className,
+  payload,
+}) => {
+  const locale = getLocaleOnServer()
+  const { org, label } = payload
+
+  return (
+    <div className='p-1 bg-background-section-burn rounded-xl'>
+      <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)}>
+        {/* Header */}
+        <div className="flex">
+          <Icon src={payload.icon} />
+          <div className="ml-3 w-0 grow">
+            <div className="flex items-center h-5">
+              <Title title={label[locale]} />
+              <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />
+            </div>
+            <div className='mb-1 flex justify-between items-center h-4'>
+              <div className='flex items-center'>
+                <div className='text-text-tertiary system/xs-regular'>{org}</div>
+                <div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
+                <DownloadCount downloadCount={payload.install_count || 0} />
+              </div>
+            </div>
+          </div>
+        </div>
+        <Description className='mt-3' text={payload.brief[locale]} descriptionLineRows={2}></Description>
+        <div className='mt-3 flex space-x-0.5'>
+          {['LLM', 'text embedding', 'speech2text'].map(tag => (
+            <Badge key={tag} text={tag} />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PluginItem

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

@@ -0,0 +1,50 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useRouter } from 'next/navigation'
+import { RiDeleteBinLine, RiInformation2Line, RiLoopLeftLine } from '@remixicon/react'
+
+type Props = {
+  pluginId: string
+  isShowFetchNewVersion: boolean
+  isShowInfo: boolean
+  isShowDelete: boolean
+  onDelete: () => void
+}
+
+const Action: FC<Props> = ({
+  isShowFetchNewVersion,
+  isShowInfo,
+  isShowDelete,
+  onDelete,
+}) => {
+  const router = useRouter()
+
+  const handleFetchNewVersion = () => { }
+  const handleShowInfo = () => {
+    router.refresh() // refresh the page ...
+  }
+  // const handleDelete = () => { }
+  return (
+    <div className='flex space-x-1'>
+      {isShowFetchNewVersion
+        && <div className='p-0.5 cursor-pointer' onClick={handleFetchNewVersion}>
+          <RiLoopLeftLine className='w-5 h-5 text-text-tertiary' />
+        </div>
+      }
+      {
+        isShowInfo
+        && <div className='p-0.5 cursor-pointer' onClick={handleShowInfo}>
+          <RiInformation2Line className='w-5 h-5 text-text-tertiary' />
+        </div>
+      }
+      {
+        isShowDelete
+        && <div className='p-0.5 cursor-pointer' onClick={onDelete}>
+          <RiDeleteBinLine className='w-5 h-5 text-text-tertiary' />
+        </div>
+      }
+    </div>
+  )
+}
+export default React.memo(Action)

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

@@ -1,28 +1,32 @@
 import type { FC } from 'react'
 import React from 'react'
 import { RiArrowRightUpLine, RiLoginCircleLine, RiVerifiedBadgeLine } from '@remixicon/react'
-import { Github } from '../base/icons/src/public/common'
-import Badge from '../base/badge'
-import type { Plugin } from './types'
-import CornerMark from './card/base/corner-mark'
-import Description from './card/base/description'
-import Icon from './card/base/icon'
-import OrgInfo from './card/base/org-info'
-import Title from './card/base/title'
-
+import { Github } from '../../base/icons/src/public/common'
+import Badge from '../../base/badge'
+import type { Plugin } from '../types'
+import CornerMark from '../card/base/corner-mark'
+import Description from '../card/base/description'
+import Icon from '../card/base/icon'
+import OrgInfo from '../card/base/org-info'
+import Title from '../card/base/title'
+import Action from './action'
+import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
 import cn from '@/utils/classnames'
-import { getLocaleOnServer } from '@/i18n/server'
 
 type Props = {
   className?: string
   payload: Plugin
+  onDelete: () => void
 }
 
-const PluginItem: FC<Props> = ({
+const PluginItem: FC<Props> = async ({
   className,
   payload,
+  onDelete,
 }) => {
   const locale = getLocaleOnServer()
+  const { t: pluginI8n } = await translate(locale, 'plugin')
+
   const { type, name, org, label } = payload
   const hasNewVersion = payload.latest_version !== payload.version
 
@@ -39,7 +43,16 @@ const PluginItem: FC<Props> = ({
               <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />
               <Badge className='ml-1' text={payload.version} hasRedCornerMark={hasNewVersion} />
             </div>
-            <Description text={payload.brief[locale]} descriptionLineRows={1}></Description>
+            <div className='flex items-center justify-between'>
+              <Description text={payload.brief[locale]} descriptionLineRows={1}></Description>
+              <Action
+                pluginId='xxx'
+                isShowFetchNewVersion={hasNewVersion}
+                isShowInfo
+                isShowDelete
+                onDelete={onDelete}
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -54,12 +67,12 @@ const PluginItem: FC<Props> = ({
           <div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
           <div className='flex text-text-tertiary system-xs-regular space-x-1'>
             <RiLoginCircleLine className='w-4 h-4' />
-            <span>2 sets of endpoints enabled</span>
+            <span>{pluginI8n('endpointsEnabled', { num: 2 })}</span>
           </div>
         </div>
 
         <div className='flex items-center'>
-          <div className='mr-1 text-text-tertiary system-2xs-medium-uppercase'>From</div>
+          <a href='' target='_blank' className='mr-1 text-text-tertiary system-2xs-medium-uppercase'>{pluginI8n('from')}</a>
           <div className='flex items-center space-x-0.5 text-text-secondary'>
             <Github className='ml-1 w-3 h-3' />
             <div className='system-2xs-semibold-uppercase'>GitHub</div>

web/i18n/de-DE/plugin.ts

@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation

web/i18n/en-US/plugin.ts

@@ -0,0 +1,6 @@
+const translation = {
+  from: 'From',
+  endpointsEnabled: '{{num}} sets of endpoints enabled',
+}
+
+export default translation

web/i18n/es-ES/plugin.ts

@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation

web/i18n/fa-IR/plugin.ts

@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation

web/i18n/fr-FR/plugin.ts

@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation

web/i18n/hi-IN/plugin.ts

@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation

web/i18n/i18next-config.ts

@@ -28,6 +28,7 @@ const loadLangResources = (lang: string) => ({
     tools: require(`./${lang}/tools`).default,
     workflow: require(`./${lang}/workflow`).default,
     runLog: require(`./${lang}/run-log`).default,
+    plugin: require(`./${lang}/plugin`).default,
   },
 })
 

web/i18n/it-IT/plugin.ts

@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation

web/i18n/ja-JP/plugin.ts

@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation

web/i18n/ko-KR/plugin.ts

@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation

web/i18n/pl-PL/plugin.ts

@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation

web/i18n/pt-BR/plugin.ts

@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation

web/i18n/ro-RO/plugin.ts

@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation

web/i18n/ru-RU/plugin.ts

@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation

web/i18n/tr-TR/plugin.ts

@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation

web/i18n/uk-UA/plugin.ts

@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation

web/i18n/vi-VN/plugin.ts

@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation

web/i18n/zh-Hans/plugin.ts

@@ -0,0 +1,6 @@
+const translation = {
+  from: '来自',
+  endpointsEnabled: '{{num}} 组端点已启用',
+}
+
+export default translation

web/i18n/zh-Hant/plugin.ts

@@ -0,0 +1,4 @@
+const translation = {
+}
+
+export default translation