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 Description from './description'
import IntersectionLine from './intersection-line'
import SearchBox from './search-box'
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 (
<MarketplaceContextProvider>
<Description />
<IntersectionLine />
<SearchBox />
<PluginTypeSwitch />
<List />
<ListWrapper
marketplaceCollections={marketplaceCollections}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
/>
</MarketplaceContextProvider>
)
}

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

@ -1,197 +1,50 @@
'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 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 (
<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>
<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
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 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>
{
!plugins && (
<ListWithCollection
marketplaceCollections={marketplaceCollections}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
/>
)
}
{
plugins && (
<div className='grid grid-cols-4 gap-3 mt-2'>
{
plugins.map(plugin => (
<Card
key={plugin.name}
payload={plugin}
footer={
<CardMoreInfo
downloadCount={plugin.install_count}
tags={['Search', 'Productivity']}
/>
}
/>
))
}
</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