ngskcloud
/
gcgj-dify-1.7.0
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: marketplace list

Browse Source
pull/9940/head
StyleZhang 2 years ago
parent f0f1bfa5d9
commit 0d85d44de5
4 changed files with 131 additions and 191 deletions
Show Stats Download Patch File Download Diff File

23
web/app/components/plugins/marketplace/index.tsx
Unescape Escape View File

@ -1,18 +1,35 @@
import type { Plugin } from '../types'
import { MarketplaceContextProvider } from './context' import { MarketplaceContextProvider } from './context'
import Description from './description' import Description from './description'
import IntersectionLine from './intersection-line' import IntersectionLine from './intersection-line'
import SearchBox from './search-box' import SearchBox from './search-box'
import PluginTypeSwitch from './plugin-type-switch' import PluginTypeSwitch from './plugin-type-switch'
import List from './list' import ListWrapper from './list/list-wrapper'
import type { MarketplaceCollection } from './types'
const Marketplace = async () => {
const marketplaceCollectionsData = await globalThis.fetch('https://marketplace.dify.dev/api/v1/collections')
const marketplaceCollectionsDataJson = await marketplaceCollectionsData.json()
const marketplaceCollections = marketplaceCollectionsDataJson.data.collections
const marketplaceCollectionPluginsMap = {} as Record<string, Plugin[]>
await Promise.all(marketplaceCollections.map(async (collection: MarketplaceCollection) => {
const marketplaceCollectionPluginsData = await globalThis.fetch(`https://marketplace.dify.dev/api/v1/collections/${collection.name}/plugins`)
const marketplaceCollectionPluginsDataJson = await marketplaceCollectionPluginsData.json()
const plugins = marketplaceCollectionPluginsDataJson.data.plugins
marketplaceCollectionPluginsMap[collection.name] = plugins
}))
const Marketplace = () => {
return ( return (
<MarketplaceContextProvider> <MarketplaceContextProvider>
<Description /> <Description />
<IntersectionLine /> <IntersectionLine />
<SearchBox /> <SearchBox />
<PluginTypeSwitch /> <PluginTypeSwitch />
<List /> <ListWrapper
marketplaceCollections={marketplaceCollections}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
/>
</MarketplaceContextProvider> </MarketplaceContextProvider>
) )
} }

229
web/app/components/plugins/marketplace/list/index.tsx
Unescape Escape View File

@ -1,197 +1,50 @@
'use client' 'use client'
import type { Plugin } from '../../types'
import type { MarketplaceCollection } from '../types'
import ListWithCollection from './list-with-collection'
import Card from '@/app/components/plugins/card' import Card from '@/app/components/plugins/card'
import CardMoreInfo from '@/app/components/plugins/card/card-more-info' import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
import { toolNotion } from '@/app/components/plugins/card/card-mock'
const List = () => { interface ListProps {
marketplaceCollections: MarketplaceCollection[]
marketplaceCollectionPluginsMap: Record<string, Plugin[]>
plugins?: Plugin[]
}
const List = ({
marketplaceCollections,
marketplaceCollectionPluginsMap,
plugins,
}: ListProps) => {
return ( return (
<div className='px-12 py-2 bg-background-default-subtle'> <div className='px-12 py-2 bg-background-default-subtle'>
<div className='py-3'> {
<div className='title-xl-semi-bold text-text-primary'>Featured</div> !plugins && (
<div className='system-xs-regular text-text-tertiary'>Our top picks to get you started</div> <ListWithCollection
<div className='grid grid-cols-4 gap-3 mt-2'> marketplaceCollections={marketplaceCollections}
<Card marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
payload={toolNotion as any} />
footer={ )
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} /> }
} {
/> plugins && (
<Card <div className='grid grid-cols-4 gap-3 mt-2'>
payload={toolNotion as any} {
footer={ plugins.map(plugin => (
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} /> <Card
} key={plugin.name}
/> payload={plugin}
<Card footer={
payload={toolNotion as any} <CardMoreInfo
footer={ downloadCount={plugin.install_count}
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} /> tags={['Search', 'Productivity']}
} />
/> }
<Card />
payload={toolNotion as any} ))
footer={ }
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} /> </div>
} )
/> }
<Card
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
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
<Card
payload={toolNotion as any}
footer={
<CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
}
/>
</div>
</div>
</div> </div>
) )
} }

48
web/app/components/plugins/marketplace/list/list-with-collection.tsx
Unescape Escape View File

@ -0,0 +1,48 @@
'use client'
import type { MarketplaceCollection } from '../types'
import type { Plugin } from '@/app/components/plugins/types'
import Card from '@/app/components/plugins/card'
import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
interface ListWithCollectionProps {
marketplaceCollections: MarketplaceCollection[]
marketplaceCollectionPluginsMap: Record<string, Plugin[]>
}
const ListWithCollection = ({
marketplaceCollections,
marketplaceCollectionPluginsMap,
}: ListWithCollectionProps) => {
return (
<>
{
marketplaceCollections.map(collection => (
<div
key={collection.name}
className='py-3'
>
<div className='title-xl-semi-bold text-text-primary'>{collection.name}</div>
<div className='system-xs-regular text-text-tertiary'>{collection.description}</div>
<div className='grid grid-cols-4 gap-3 mt-2'>
{
marketplaceCollectionPluginsMap[collection.name].map(plugin => (
<Card
key={plugin.name}
payload={plugin}
footer={
<CardMoreInfo
downloadCount={plugin.install_count}
tags={['Search', 'Productivity']}
/>
}
/>
))
}
</div>
</div>
))
}
</>
)
}
export default ListWithCollection

22
web/app/components/plugins/marketplace/list/list-wrapper.tsx
Unescape Escape View File

@ -0,0 +1,22 @@
'use client'
import type { Plugin } from '../../types'
import type { MarketplaceCollection } from '../types'
import List from './index'
interface ListWrapperProps {
marketplaceCollections: MarketplaceCollection[]
marketplaceCollectionPluginsMap: Record<string, Plugin[]>
}
const ListWrapper = ({
marketplaceCollections,
marketplaceCollectionPluginsMap,
}: ListWrapperProps) => {
return (
<List
marketplaceCollections={marketplaceCollections}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
/>
)
}
export default ListWrapper
Write Preview
Loading…
Cancel
Save