mirror of
https://github.com/langgenius/dify.git
synced 2024-11-16 19:59:50 +08:00
interaction of plugin detail panel
This commit is contained in:
JzoNg
parent
c75e02b5b2
commit
060a894bd1
|
|
@ -7,3 +7,8 @@ export async function handleDelete() {
|
|||
// revalidatePath only invalidates the cache when the included path is next visited.
|
||||
revalidatePath('/')
|
||||
}
|
||||
|
||||
export async function fetchPluginDetail(id: string) {
|
||||
// Fetch plugin detail TODO
|
||||
return { id }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/
|
|||
import PluginItem from '@/app/components/plugins/plugin-item'
|
||||
import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
|
||||
import ProviderCard from '@/app/components/plugins/provider-card'
|
||||
import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
|
||||
import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
|
||||
import Badge from '@/app/components/base/badge'
|
||||
const PluginList = async () => {
|
||||
|
|
@ -72,6 +73,9 @@ const PluginList = async () => {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
<PluginDetailPanel
|
||||
locale={locale}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { PluginType } from '../types'
|
||||
|
||||
export const toolNotion = {
|
||||
id: 'tool-notion',
|
||||
type: PluginType.tool,
|
||||
org: 'Notion',
|
||||
name: 'notion page search',
|
||||
|
|
@ -18,6 +19,7 @@ export const toolNotion = {
|
|||
}
|
||||
|
||||
export const extensionDallE = {
|
||||
id: 'extension-dalle',
|
||||
type: PluginType.extension,
|
||||
org: 'OpenAI',
|
||||
name: 'DALL-E',
|
||||
|
|
@ -36,6 +38,7 @@ export const extensionDallE = {
|
|||
}
|
||||
|
||||
export const modelGPT4 = {
|
||||
id: 'model-gpt4',
|
||||
type: PluginType.model,
|
||||
org: 'OpenAI',
|
||||
name: 'GPT-4',
|
||||
|
|
|
|||
109
web/app/components/plugins/plugin-detail-panel/index.tsx
Normal file
109
web/app/components/plugins/plugin-detail-panel/index.tsx
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
'use client'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import type { FC } from 'react'
|
||||
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
|
||||
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/card-icon'
|
||||
import Title from '../card/base/title'
|
||||
import DownloadCount from '../card/base/download-count'
|
||||
import type { Locale } from '@/i18n'
|
||||
import { fetchPluginDetail } from '@/app/(commonLayout)/plugins/test/card/actions'
|
||||
import Drawer from '@/app/components/base/drawer'
|
||||
import Loading from '@/app/components/base/loading'
|
||||
import cn from '@/utils/classnames'
|
||||
import {
|
||||
// extensionDallE,
|
||||
// modelGPT4,
|
||||
toolNotion,
|
||||
} from '@/app/components/plugins/card/card-mock'
|
||||
|
||||
type Props = {
|
||||
locale: Locale // The component is used in both client and server side, so we can't get the locale from both side(getLocaleOnServer and useContext)
|
||||
}
|
||||
|
||||
const PluginDetailPanel: FC<Props> = ({
|
||||
locale,
|
||||
}) => {
|
||||
const searchParams = useSearchParams()
|
||||
const pluginID = searchParams.get('pluginID')
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [pluginDetail, setPluginDetail] = useState<Plugin>()
|
||||
|
||||
const getPluginDetail = async (pluginID: string) => {
|
||||
setLoading(true)
|
||||
const detail = await fetchPluginDetail(pluginID)
|
||||
setPluginDetail({
|
||||
...detail,
|
||||
...toolNotion,
|
||||
} as any)
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
setPluginDetail(undefined)
|
||||
router.replace(pathname)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (pluginID)
|
||||
getPluginDetail(pluginID)
|
||||
}, [pluginID])
|
||||
|
||||
if (!pluginID)
|
||||
return null
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
isOpen={!!pluginDetail}
|
||||
clickOutsideNotOpen={false}
|
||||
onClose={handleClose}
|
||||
footer={null}
|
||||
mask={false}
|
||||
positionCenter={false}
|
||||
panelClassname={cn('mt-[65px] !w-[405px] !max-w-[405px]')}
|
||||
>
|
||||
{loading && <Loading type='area' />}
|
||||
{!loading && pluginDetail && (
|
||||
<div
|
||||
className={cn('w-full flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl')}
|
||||
style={{
|
||||
height: 'calc(100vh - 65px)',
|
||||
}}
|
||||
>
|
||||
<div className={cn('group 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')}>
|
||||
{/* Header */}
|
||||
<div className="flex">
|
||||
<Icon src={pluginDetail.icon} />
|
||||
<div className="ml-3 w-0 grow">
|
||||
<div className="flex items-center h-5">
|
||||
<Title title={pluginDetail.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'>{pluginDetail.org}</div>
|
||||
<div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
|
||||
<DownloadCount downloadCount={pluginDetail.install_count || 0} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Description className='mt-3' text={pluginDetail.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>
|
||||
)}
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
|
||||
export default PluginDetailPanel
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react'
|
||||
import type { FC } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { RiArrowRightUpLine, RiVerifiedBadgeLine } from '@remixicon/react'
|
||||
import Badge from '../base/badge'
|
||||
import type { Plugin } from './types'
|
||||
|
|
@ -26,47 +27,49 @@ const ProviderCard: FC<Props> = ({
|
|||
|
||||
return (
|
||||
<div className={cn('group 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} />
|
||||
<Link href={`/plugins/test/card?pluginID=${payload.id}`}>
|
||||
{/* 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>
|
||||
</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
|
||||
className='hidden group-hover:flex items-center gap-2 absolute bottom-0 left-0 right-0 p-4 pt-8'
|
||||
style={{ background: 'linear-gradient(0deg, #F9FAFB 60.27%, rgba(249, 250, 251, 0.00) 100%)' }}
|
||||
>
|
||||
<Button
|
||||
className='flex-grow'
|
||||
variant='primary'
|
||||
<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
|
||||
className='hidden group-hover:flex items-center gap-2 absolute bottom-0 left-0 right-0 p-4 pt-8'
|
||||
style={{ background: 'linear-gradient(0deg, #F9FAFB 60.27%, rgba(249, 250, 251, 0.00) 100%)' }}
|
||||
>
|
||||
Install
|
||||
</Button>
|
||||
<Button
|
||||
className='flex-grow'
|
||||
variant='secondary'
|
||||
>
|
||||
Details
|
||||
<RiArrowRightUpLine className='w-4 h-4' />
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
className='flex-grow'
|
||||
variant='primary'
|
||||
>
|
||||
Install
|
||||
</Button>
|
||||
<Button
|
||||
className='flex-grow'
|
||||
variant='secondary'
|
||||
>
|
||||
Details
|
||||
<RiArrowRightUpLine className='w-4 h-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ export enum PluginType {
|
|||
}
|
||||
|
||||
export type Plugin = {
|
||||
id: string
|
||||
'type': PluginType
|
||||
'org': string
|
||||
'name': string
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user