mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-08-14 10:25:52 +08:00
Merge branch 'feat/plugins' of github.com:langgenius/dify into feat/plugins
This commit is contained in:
Yi
commit
177e8cbf73
262
web/app/components/tools/marketplace.tsx
Normal file
262
web/app/components/tools/marketplace.tsx
Normal file
@ -0,0 +1,262 @@
|
|||||||
|
import { RiArrowUpDoubleLine } from '@remixicon/react'
|
||||||
|
import Card from '@/app/components/plugins/card'
|
||||||
|
import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
|
||||||
|
import { toolNotion } from '@/app/components/plugins/card/card-mock'
|
||||||
|
import { useGetLanguage } from '@/context/i18n'
|
||||||
|
|
||||||
|
type MarketplaceProps = {
|
||||||
|
onMarketplaceScroll: () => void
|
||||||
|
}
|
||||||
|
const Marketplace = ({
|
||||||
|
onMarketplaceScroll,
|
||||||
|
}: MarketplaceProps) => {
|
||||||
|
const locale = useGetLanguage()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='shrink-0 sticky -bottom-[442px] h-[530px] overflow-y-auto px-12 py-2 bg-background-default-subtle'>
|
||||||
|
<RiArrowUpDoubleLine
|
||||||
|
className='absolute top-2 left-1/2 -translate-x-1/2 w-4 h-4 text-text-quaternary cursor-pointer'
|
||||||
|
onClick={() => onMarketplaceScroll()}
|
||||||
|
/>
|
||||||
|
<div className='pt-4 pb-3'>
|
||||||
|
<div className='title-2xl-semi-bold bg-gradient-to-r from-[rgba(11,165,236,0.95)] to-[rgba(21,90,239,0.95)] bg-clip-text text-transparent'>More from Marketplace</div>
|
||||||
|
<div className='flex items-center text-center body-md-regular text-text-tertiary'>
|
||||||
|
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">
|
||||||
|
models
|
||||||
|
</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">
|
||||||
|
tools
|
||||||
|
</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">
|
||||||
|
extensions
|
||||||
|
</span>
|
||||||
|
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">
|
||||||
|
bundles
|
||||||
|
</span>
|
||||||
|
in Dify Marketplace
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='py-3'>
|
||||||
|
<div className='title-xl-semi-bold text-text-primary'>Featured</div>
|
||||||
|
<div className='system-xs-regular text-text-tertiary'>Our top picks to get you started</div>
|
||||||
|
<div className='grid grid-cols-4 gap-3 mt-2'>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='py-3'>
|
||||||
|
<div className='title-xl-semi-bold text-text-primary'>Popular</div>
|
||||||
|
<div className='system-xs-regular text-text-tertiary'>Explore the library and discover the incredible work of our community</div>
|
||||||
|
<div className='grid grid-cols-4 gap-3 mt-2'>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
locale={locale}
|
||||||
|
payload={toolNotion as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Marketplace
|
||||||
@ -1,8 +1,9 @@
|
|||||||
'use client'
|
'use client'
|
||||||
import { useEffect, useMemo, useState } from 'react'
|
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { RiCloseLine } from '@remixicon/react'
|
import { RiCloseLine } from '@remixicon/react'
|
||||||
import type { Collection } from './types'
|
import type { Collection } from './types'
|
||||||
|
import Marketplace from './marketplace'
|
||||||
import cn from '@/utils/classnames'
|
import cn from '@/utils/classnames'
|
||||||
import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
|
import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
|
||||||
import TabSliderNew from '@/app/components/base/tab-slider-new'
|
import TabSliderNew from '@/app/components/base/tab-slider-new'
|
||||||
@ -12,16 +13,17 @@ import { DotsGrid } from '@/app/components/base/icons/src/vender/line/general'
|
|||||||
import { Colors } from '@/app/components/base/icons/src/vender/line/others'
|
import { Colors } from '@/app/components/base/icons/src/vender/line/others'
|
||||||
import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
|
import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
|
||||||
import CustomCreateCard from '@/app/components/tools/provider/custom-create-card'
|
import CustomCreateCard from '@/app/components/tools/provider/custom-create-card'
|
||||||
import ContributeCard from '@/app/components/tools/provider/contribute'
|
|
||||||
import ProviderDetail from '@/app/components/tools/provider/detail'
|
import ProviderDetail from '@/app/components/tools/provider/detail'
|
||||||
import Empty from '@/app/components/tools/add-tool-modal/empty'
|
import Empty from '@/app/components/tools/add-tool-modal/empty'
|
||||||
import { fetchCollectionList } from '@/service/tools'
|
import { fetchCollectionList } from '@/service/tools'
|
||||||
import Card from '@/app/components/plugins/card'
|
import Card from '@/app/components/plugins/card'
|
||||||
import { useGetLanguage } from '@/context/i18n'
|
import { useGetLanguage } from '@/context/i18n'
|
||||||
|
import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
|
||||||
|
|
||||||
const ProviderList = () => {
|
const ProviderList = () => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const language = useGetLanguage()
|
const language = useGetLanguage()
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
const [activeTab, setActiveTab] = useTabSearchParams({
|
const [activeTab, setActiveTab] = useTabSearchParams({
|
||||||
defaultTab: 'builtin',
|
defaultTab: 'builtin',
|
||||||
@ -70,7 +72,10 @@ const ProviderList = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='relative flex overflow-hidden bg-gray-100 shrink-0 h-0 grow'>
|
<div className='relative flex overflow-hidden bg-gray-100 shrink-0 h-0 grow'>
|
||||||
<div className='relative flex flex-col overflow-y-auto bg-gray-100 grow'>
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className='relative flex flex-col overflow-y-auto bg-gray-100 grow'
|
||||||
|
>
|
||||||
<div className={cn(
|
<div className={cn(
|
||||||
'sticky top-0 flex justify-between items-center pt-4 px-12 pb-2 leading-[56px] bg-gray-100 z-20 flex-wrap gap-y-2',
|
'sticky top-0 flex justify-between items-center pt-4 px-12 pb-2 leading-[56px] bg-gray-100 z-20 flex-wrap gap-y-2',
|
||||||
currentProvider && 'pr-6',
|
currentProvider && 'pr-6',
|
||||||
@ -93,7 +98,6 @@ const ProviderList = () => {
|
|||||||
'relative grid content-start grid-cols-1 gap-4 px-12 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0',
|
'relative grid content-start grid-cols-1 gap-4 px-12 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0',
|
||||||
currentProvider && 'pr-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
currentProvider && 'pr-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
||||||
)}>
|
)}>
|
||||||
{activeTab === 'builtin' && <ContributeCard />}
|
|
||||||
{activeTab === 'api' && <CustomCreateCard onRefreshData={getProviderList} />}
|
{activeTab === 'api' && <CustomCreateCard onRefreshData={getProviderList} />}
|
||||||
{filteredCollectionList.map(collection => (
|
{filteredCollectionList.map(collection => (
|
||||||
<Card
|
<Card
|
||||||
@ -103,10 +107,19 @@ const ProviderList = () => {
|
|||||||
...collection,
|
...collection,
|
||||||
brief: collection.description,
|
brief: collection.description,
|
||||||
} as any}
|
} as any}
|
||||||
|
footer={
|
||||||
|
<CardMoreInfo
|
||||||
|
downloadCount={0}
|
||||||
|
tags={collection.labels}
|
||||||
|
/>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
{!filteredCollectionList.length && <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'><Empty /></div>}
|
{!filteredCollectionList.length && <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'><Empty /></div>}
|
||||||
</div>
|
</div>
|
||||||
|
<Marketplace onMarketplaceScroll={() => {
|
||||||
|
containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight, behavior: 'smooth' })
|
||||||
|
}} />
|
||||||
</div>
|
</div>
|
||||||
<div className={cn(
|
<div className={cn(
|
||||||
'shrink-0 w-0 border-l-[0.5px] border-black/8 overflow-y-auto transition-all duration-200 ease-in-out',
|
'shrink-0 w-0 border-l-[0.5px] border-black/8 overflow-y-auto transition-all duration-200 ease-in-out',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user