mirror of https://github.com/langgenius/dify.git
feat: layout opt
This commit is contained in:
yessenia
parent
1ce8c43e2c
commit
cbbb05c189
|
|
@ -1,3 +1,4 @@
|
|||
import Link from 'next/link'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import DownloadCount from './download-count'
|
||||
|
||||
|
|
@ -22,8 +23,16 @@ const OrgInfo = ({
|
|||
<div className={cn('system-xs-regular flex h-4 items-center gap-2 text-text-tertiary', className)}>
|
||||
{orgName && (
|
||||
<span className="shrink-0">
|
||||
by
|
||||
{orgName}
|
||||
<span className="mr-1 text-text-tertiary">by</span>
|
||||
<Link
|
||||
href={`/creators/${orgName}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-text-secondary hover:underline"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{orgName}
|
||||
</Link>
|
||||
</span>
|
||||
)}
|
||||
<span className="shrink-0">·</span>
|
||||
|
|
|
|||
|
|
@ -1,83 +0,0 @@
|
|||
'use client'
|
||||
|
||||
// todo: update the illustration
|
||||
const HeroIllustration = () => {
|
||||
return (
|
||||
<svg
|
||||
width="280"
|
||||
height="160"
|
||||
viewBox="0 0 280 160"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="absolute right-0 top-1/2 -translate-y-1/2 opacity-80"
|
||||
>
|
||||
{/* Large circle - top right */}
|
||||
<circle
|
||||
cx="220"
|
||||
cy="40"
|
||||
r="60"
|
||||
fill="url(#gradient1)"
|
||||
fillOpacity="0.3"
|
||||
/>
|
||||
{/* Medium circle - middle */}
|
||||
<circle
|
||||
cx="180"
|
||||
cy="100"
|
||||
r="40"
|
||||
fill="url(#gradient2)"
|
||||
fillOpacity="0.4"
|
||||
/>
|
||||
{/* Small circle - bottom */}
|
||||
<circle
|
||||
cx="240"
|
||||
cy="120"
|
||||
r="25"
|
||||
fill="url(#gradient3)"
|
||||
fillOpacity="0.5"
|
||||
/>
|
||||
{/* Decorative dots */}
|
||||
<circle cx="140" cy="60" r="4" fill="white" fillOpacity="0.6" />
|
||||
<circle cx="160" cy="45" r="3" fill="white" fillOpacity="0.4" />
|
||||
<circle cx="130" cy="90" r="5" fill="white" fillOpacity="0.5" />
|
||||
<circle cx="200" cy="70" r="3" fill="white" fillOpacity="0.3" />
|
||||
{/* Abstract shapes */}
|
||||
<rect
|
||||
x="150"
|
||||
y="110"
|
||||
width="30"
|
||||
height="30"
|
||||
rx="8"
|
||||
fill="white"
|
||||
fillOpacity="0.15"
|
||||
transform="rotate(-15 150 110)"
|
||||
/>
|
||||
<rect
|
||||
x="100"
|
||||
y="50"
|
||||
width="20"
|
||||
height="20"
|
||||
rx="4"
|
||||
fill="white"
|
||||
fillOpacity="0.1"
|
||||
transform="rotate(10 100 50)"
|
||||
/>
|
||||
{/* Gradient definitions */}
|
||||
<defs>
|
||||
<radialGradient id="gradient1" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="white" stopOpacity="0.6" />
|
||||
<stop offset="100%" stopColor="white" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient id="gradient2" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="white" stopOpacity="0.5" />
|
||||
<stop offset="100%" stopColor="white" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient id="gradient3" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0%" stopColor="white" stopOpacity="0.7" />
|
||||
<stop offset="100%" stopColor="white" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default HeroIllustration
|
||||
|
|
@ -1,36 +1,164 @@
|
|||
'use client'
|
||||
|
||||
import type { MotionValue } from 'motion/react'
|
||||
import { useTranslation } from '#i18n'
|
||||
import { motion, useMotionValue, useSpring, useTransform } from 'motion/react'
|
||||
import { useEffect, useLayoutEffect, useRef } from 'react'
|
||||
import marketPlaceBg from '@/public/marketplace/hero-bg.jpg'
|
||||
import marketplaceGradientNoise from '@/public/marketplace/hero-gradient-noise.svg'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import PluginTypeSwitch from '../plugin-type-switch'
|
||||
import HeroIllustration from './hero-illustration'
|
||||
|
||||
type DescriptionProps = {
|
||||
className?: string
|
||||
scrollContainerId?: string
|
||||
}
|
||||
|
||||
export const Description = ({ className }: DescriptionProps) => {
|
||||
// Constants for collapse animation
|
||||
const MAX_SCROLL = 120 // pixels to fully collapse
|
||||
const EXPANDED_PADDING_TOP = 32 // pt-8
|
||||
const COLLAPSED_PADDING_TOP = 12 // pt-3
|
||||
const EXPANDED_PADDING_BOTTOM = 24 // pb-6
|
||||
const COLLAPSED_PADDING_BOTTOM = 12 // pb-3
|
||||
|
||||
export const Description = ({
|
||||
className,
|
||||
scrollContainerId = 'marketplace-container',
|
||||
}: DescriptionProps) => {
|
||||
const { t } = useTranslation('plugin')
|
||||
const rafRef = useRef<number | null>(null)
|
||||
const lastProgressRef = useRef(0)
|
||||
const titleRef = useRef<HTMLDivElement | null>(null)
|
||||
const progress = useMotionValue(0)
|
||||
const titleHeight = useMotionValue(0)
|
||||
const smoothProgress = useSpring(progress, { stiffness: 260, damping: 34 })
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const node = titleRef.current
|
||||
if (!node)
|
||||
return
|
||||
|
||||
const updateHeight = () => {
|
||||
titleHeight.set(node.scrollHeight)
|
||||
}
|
||||
|
||||
updateHeight()
|
||||
|
||||
if (typeof ResizeObserver === 'undefined')
|
||||
return
|
||||
|
||||
const observer = new ResizeObserver(updateHeight)
|
||||
observer.observe(node)
|
||||
return () => observer.disconnect()
|
||||
}, [titleHeight])
|
||||
|
||||
useEffect(() => {
|
||||
const container = document.getElementById(scrollContainerId)
|
||||
if (!container)
|
||||
return
|
||||
|
||||
const handleScroll = () => {
|
||||
// Cancel any pending animation frame
|
||||
if (rafRef.current)
|
||||
cancelAnimationFrame(rafRef.current)
|
||||
|
||||
// Use requestAnimationFrame for smooth updates
|
||||
rafRef.current = requestAnimationFrame(() => {
|
||||
const scrollTop = Math.round(container.scrollTop)
|
||||
const rawProgress = Math.min(Math.max(scrollTop / MAX_SCROLL, 0), 1)
|
||||
const snappedProgress = rawProgress >= 0.95
|
||||
? 1
|
||||
: rawProgress <= 0.05
|
||||
? 0
|
||||
: Math.round(rawProgress * 100) / 100
|
||||
|
||||
if (snappedProgress !== lastProgressRef.current) {
|
||||
lastProgressRef.current = snappedProgress
|
||||
progress.set(snappedProgress)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
container.addEventListener('scroll', handleScroll, { passive: true })
|
||||
|
||||
// Initial check
|
||||
handleScroll()
|
||||
|
||||
return () => {
|
||||
container.removeEventListener('scroll', handleScroll)
|
||||
if (rafRef.current)
|
||||
cancelAnimationFrame(rafRef.current)
|
||||
}
|
||||
}, [progress, scrollContainerId])
|
||||
|
||||
// Calculate interpolated values
|
||||
const contentOpacity = useTransform(smoothProgress, [0, 1], [1, 0])
|
||||
const contentScale = useTransform(smoothProgress, [0, 1], [1, 0.9])
|
||||
const titleMaxHeight: MotionValue<number> = useTransform(
|
||||
[smoothProgress, titleHeight],
|
||||
(values: number[]) => values[1] * (1 - values[0]),
|
||||
)
|
||||
const tabsMarginTop = useTransform(smoothProgress, [0, 1], [48, 0])
|
||||
const paddingTop = useTransform(smoothProgress, [0, 1], [EXPANDED_PADDING_TOP, COLLAPSED_PADDING_TOP])
|
||||
const paddingBottom = useTransform(smoothProgress, [0, 1], [EXPANDED_PADDING_BOTTOM, COLLAPSED_PADDING_BOTTOM])
|
||||
|
||||
return (
|
||||
<div className={cn('relative mx-4 mt-4 h-[200px] rounded-2xl bg-gradient-to-r from-util-colors-blue-brand-blue-brand-600 to-util-colors-blue-brand-blue-brand-500 px-8 py-6', className)}>
|
||||
{/* Background illustration */}
|
||||
<HeroIllustration />
|
||||
<motion.div
|
||||
className={cn(
|
||||
'sticky top-[60px] z-20 mx-4 mt-4 shrink-0 overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border px-6',
|
||||
className,
|
||||
)}
|
||||
style={{
|
||||
paddingTop,
|
||||
paddingBottom,
|
||||
}}
|
||||
>
|
||||
{/* Blue base background */}
|
||||
<div className="absolute inset-0 bg-[rgba(0,51,255,0.9)]" />
|
||||
|
||||
{/* Decorative image with blend mode - showing top 1/3 of the image */}
|
||||
<div
|
||||
className="absolute inset-0 bg-no-repeat opacity-80 mix-blend-lighten"
|
||||
style={{
|
||||
backgroundImage: `url(${marketPlaceBg.src})`,
|
||||
backgroundSize: '110% auto',
|
||||
backgroundPosition: 'center top',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Gradient & Noise overlay */}
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
style={{ backgroundImage: `url(${marketplaceGradientNoise.src})` }}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10">
|
||||
<h1 className="title-4xl-semi-bold mb-2 shrink-0 text-text-primary-on-surface">
|
||||
{t('marketplace.heroTitle')}
|
||||
</h1>
|
||||
<h2 className="body-md-regular shrink-0 text-text-secondary-on-surface">
|
||||
{t('marketplace.heroSubtitle')}
|
||||
</h2>
|
||||
{/* Title and subtitle - fade out and scale down */}
|
||||
<motion.div
|
||||
ref={titleRef}
|
||||
style={{
|
||||
opacity: contentOpacity,
|
||||
scale: contentScale,
|
||||
transformOrigin: 'left top',
|
||||
maxHeight: titleMaxHeight,
|
||||
overflow: 'hidden',
|
||||
willChange: 'opacity, transform',
|
||||
}}
|
||||
>
|
||||
<h1 className="title-4xl-semi-bold mb-2 shrink-0 text-text-primary-on-surface">
|
||||
{t('marketplace.heroTitle')}
|
||||
</h1>
|
||||
<h2 className="body-md-regular shrink-0 text-text-secondary-on-surface">
|
||||
{t('marketplace.heroSubtitle')}
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
{/* Plugin type switch tabs */}
|
||||
<div className="mt-6">
|
||||
{/* Plugin type switch tabs - always visible */}
|
||||
<motion.div style={{ marginTop: tabsMarginTop }}>
|
||||
<PluginTypeSwitch variant="hero" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import type { SearchParams } from 'nuqs'
|
||||
import { TanstackQueryInitializer } from '@/context/query-client'
|
||||
import { Description } from './description'
|
||||
import { HydrateQueryClient } from './hydration-server'
|
||||
import ListWrapper from './list/list-wrapper'
|
||||
import MarketplaceHeader from './marketplace-header'
|
||||
|
||||
type MarketplaceProps = {
|
||||
showInstallButton?: boolean
|
||||
|
|
@ -19,7 +19,7 @@ const Marketplace = async ({
|
|||
return (
|
||||
<TanstackQueryInitializer>
|
||||
<HydrateQueryClient searchParams={searchParams}>
|
||||
<Description className="mx-12 mt-1" />
|
||||
<MarketplaceHeader descriptionClassName="mx-12 mt-1" />
|
||||
<ListWrapper
|
||||
showInstallButton={showInstallButton}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@ type ScrollState = {
|
|||
totalPages: number
|
||||
}
|
||||
|
||||
const SCROLL_OVERLAP_RATIO = 0.5
|
||||
|
||||
const defaultScrollState: ScrollState = {
|
||||
canScrollLeft: false,
|
||||
canScrollRight: false,
|
||||
|
|
@ -127,23 +129,7 @@ const Carousel = ({
|
|||
scrollStateRef.current = calculateScrollState(container)
|
||||
}, [children, calculateScrollState])
|
||||
|
||||
const scroll = useCallback((direction: 'left' | 'right') => {
|
||||
const container = containerRef.current
|
||||
if (!container)
|
||||
return
|
||||
|
||||
const scrollAmount = container.clientWidth - (itemWidth / 2)
|
||||
const newScrollLeft = direction === 'left'
|
||||
? container.scrollLeft - scrollAmount
|
||||
: container.scrollLeft + scrollAmount
|
||||
|
||||
container.scrollTo({
|
||||
left: newScrollLeft,
|
||||
behavior: 'smooth',
|
||||
})
|
||||
}, [itemWidth])
|
||||
|
||||
const scrollToPage = useCallback((pageIndex: number) => {
|
||||
const scrollToPage = useCallback((pageIndex: number, instant = false) => {
|
||||
const container = containerRef.current
|
||||
if (!container)
|
||||
return
|
||||
|
|
@ -153,20 +139,51 @@ const Carousel = ({
|
|||
|
||||
container.scrollTo({
|
||||
left: scrollLeft,
|
||||
behavior: 'smooth',
|
||||
behavior: instant ? 'instant' : 'smooth',
|
||||
})
|
||||
}, [itemWidth, gap])
|
||||
|
||||
const scroll = useCallback((direction: 'left' | 'right') => {
|
||||
const container = containerRef.current
|
||||
if (!container)
|
||||
return
|
||||
|
||||
// Handle looping
|
||||
if (direction === 'left' && !scrollState.canScrollLeft) {
|
||||
// At first page, loop to last page
|
||||
scrollToPage(scrollState.totalPages - 1, true)
|
||||
return
|
||||
}
|
||||
if (direction === 'right' && !scrollState.canScrollRight) {
|
||||
// At last page, loop to first page
|
||||
scrollToPage(0, true)
|
||||
return
|
||||
}
|
||||
|
||||
const scrollAmount = container.clientWidth - (itemWidth * SCROLL_OVERLAP_RATIO)
|
||||
const newScrollLeft = direction === 'left'
|
||||
? container.scrollLeft - scrollAmount
|
||||
: container.scrollLeft + scrollAmount
|
||||
|
||||
container.scrollTo({
|
||||
left: newScrollLeft,
|
||||
behavior: 'smooth',
|
||||
})
|
||||
}, [itemWidth, scrollState.canScrollLeft, scrollState.canScrollRight, scrollState.totalPages, scrollToPage])
|
||||
|
||||
// Auto-play functionality
|
||||
useEffect(() => {
|
||||
if (!autoPlay || isHovered || scrollState.totalPages <= 1)
|
||||
return
|
||||
|
||||
const interval = setInterval(() => {
|
||||
const nextPage = scrollState.canScrollRight
|
||||
? scrollState.currentPage + 1
|
||||
: 0 // Loop back to first page
|
||||
scrollToPage(nextPage)
|
||||
if (scrollState.canScrollRight) {
|
||||
scrollToPage(scrollState.currentPage + 1)
|
||||
}
|
||||
else {
|
||||
// Loop back to first page instantly (no animation)
|
||||
scrollToPage(0, true)
|
||||
}
|
||||
}, autoPlayInterval)
|
||||
|
||||
return () => clearInterval(interval)
|
||||
|
|
@ -206,13 +223,13 @@ const Carousel = ({
|
|||
<div className="flex items-center gap-1">
|
||||
<NavButton
|
||||
direction="left"
|
||||
disabled={!scrollState.canScrollLeft}
|
||||
disabled={scrollState.totalPages <= 1}
|
||||
onClick={() => scroll('left')}
|
||||
Icon={RiArrowLeftSLine}
|
||||
/>
|
||||
<NavButton
|
||||
direction="right"
|
||||
disabled={!scrollState.canScrollRight}
|
||||
disabled={scrollState.totalPages <= 1}
|
||||
onClick={() => scroll('right')}
|
||||
Icon={RiArrowRightSLine}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ const List = ({
|
|||
{
|
||||
plugins && !!plugins.length && (
|
||||
<div className={cn(
|
||||
'grid grid-cols-4 gap-3',
|
||||
'grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||
cardContainerClassName,
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ type ListWithCollectionProps = {
|
|||
}
|
||||
|
||||
const PARTNERS_COLLECTION_NAME = 'partners'
|
||||
const GRID_DISPLAY_LIMIT = 8 // 2 rows × 4 columns
|
||||
const GRID_DISPLAY_LIMIT = 8 // show up to 8 items
|
||||
|
||||
const ListWithCollection = ({
|
||||
marketplaceCollections,
|
||||
|
|
@ -62,8 +62,8 @@ const ListWithCollection = ({
|
|||
{rows.map(columnPlugins => (
|
||||
<div
|
||||
key={`column-${columnPlugins[0]?.plugin_id}`}
|
||||
className="flex shrink-0 flex-col gap-3"
|
||||
style={{ scrollSnapAlign: 'start', width: 'calc((100% - 36px) / 4)' }}
|
||||
className="flex w-[calc((100%-0px)/1)] shrink-0 flex-col gap-3 sm:w-[calc((100%-12px)/2)] lg:w-[calc((100%-24px)/3)] xl:w-[calc((100%-36px)/4)]"
|
||||
style={{ scrollSnapAlign: 'start' }}
|
||||
>
|
||||
{columnPlugins.map(plugin => (
|
||||
<div key={plugin.plugin_id}>
|
||||
|
|
@ -77,11 +77,11 @@ const ListWithCollection = ({
|
|||
}
|
||||
|
||||
const renderGridCollection = (collection: MarketplaceCollection, plugins: Plugin[]) => {
|
||||
// Other collections: Fixed 2 rows × 4 columns grid
|
||||
// Other collections: responsive grid
|
||||
const displayPlugins = plugins.slice(0, GRID_DISPLAY_LIMIT)
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-4 gap-3">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{displayPlugins.map(plugin => (
|
||||
<div key={plugin.plugin_id}>
|
||||
{renderPluginCard(plugin)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
'use client'
|
||||
import type { ActivePluginType } from '../constants'
|
||||
import { useTranslation } from '#i18n'
|
||||
import { useState } from 'react'
|
||||
import Loading from '@/app/components/base/loading'
|
||||
import SegmentedControl from '@/app/components/base/segmented-control'
|
||||
import CategoriesFilter from '../../plugin-page/filter-management/category-filter'
|
||||
import TagFilter from '../../plugin-page/filter-management/tag-filter'
|
||||
import { useActivePluginType, useFilterPluginTags, useMarketplaceSearchMode } from '../atoms'
|
||||
import { PLUGIN_TYPE_SEARCH_MAP } from '../constants'
|
||||
import SortDropdown from '../sort-dropdown'
|
||||
import { useMarketplaceData } from '../state'
|
||||
import List from './index'
|
||||
|
|
@ -8,10 +15,21 @@ import List from './index'
|
|||
type ListWrapperProps = {
|
||||
showInstallButton?: boolean
|
||||
}
|
||||
type SearchScope = 'all' | 'plugins' | 'creators'
|
||||
const searchScopeOptionKeys = [
|
||||
{ value: 'all', textKey: 'marketplace.searchFilterAll' },
|
||||
{ value: 'plugins', textKey: 'marketplace.searchFilterPlugins' },
|
||||
{ value: 'creators', textKey: 'marketplace.searchFilterCreators' },
|
||||
] as const satisfies ReadonlyArray<{ value: SearchScope, textKey: 'marketplace.searchFilterAll' | 'marketplace.searchFilterPlugins' | 'marketplace.searchFilterCreators' }>
|
||||
|
||||
const ListWrapper = ({
|
||||
showInstallButton,
|
||||
}: ListWrapperProps) => {
|
||||
const { t } = useTranslation()
|
||||
const isSearchMode = useMarketplaceSearchMode()
|
||||
const [filterPluginTags, handleFilterPluginTagsChange] = useFilterPluginTags()
|
||||
const [activePluginType, handleActivePluginTypeChange] = useActivePluginType()
|
||||
const [searchScope, setSearchScope] = useState<SearchScope>('all')
|
||||
|
||||
const {
|
||||
plugins,
|
||||
|
|
@ -22,21 +40,55 @@ const ListWrapper = ({
|
|||
isFetchingNextPage,
|
||||
page,
|
||||
} = useMarketplaceData()
|
||||
const pluginsCount = pluginsTotal || 0
|
||||
const searchScopeOptions: Array<{ value: SearchScope, text: string, count: number }> = searchScopeOptionKeys.map(option => ({
|
||||
value: option.value,
|
||||
text: t(option.textKey, { ns: 'plugin' }),
|
||||
count: option.value === 'creators' ? 0 : pluginsCount,
|
||||
}))
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ scrollbarGutter: 'stable' }}
|
||||
className="relative flex grow flex-col bg-background-default-subtle px-12 py-2"
|
||||
>
|
||||
{
|
||||
plugins && (
|
||||
<div className="mb-4 flex items-center pt-3">
|
||||
<div className="title-xl-semi-bold text-text-primary">{t('marketplace.pluginsResult', { ns: 'plugin', num: pluginsTotal })}</div>
|
||||
<div className="mx-3 h-3.5 w-[1px] bg-divider-regular"></div>
|
||||
<SortDropdown />
|
||||
{plugins && !isSearchMode && (
|
||||
<div className="mb-4 flex items-center pt-3">
|
||||
<div className="title-xl-semi-bold text-text-primary">{t('marketplace.pluginsResult', { ns: 'plugin', num: pluginsTotal })}</div>
|
||||
<div className="mx-3 h-3.5 w-[1px] bg-divider-regular"></div>
|
||||
<SortDropdown />
|
||||
</div>
|
||||
)}
|
||||
{isSearchMode && (
|
||||
<div className="mb-4 flex items-center justify-between pt-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<SegmentedControl
|
||||
size="large"
|
||||
activeState="accentLight"
|
||||
value={searchScope}
|
||||
onChange={(value) => {
|
||||
setSearchScope(value as SearchScope)
|
||||
}}
|
||||
options={searchScopeOptions}
|
||||
/>
|
||||
<CategoriesFilter
|
||||
value={activePluginType === PLUGIN_TYPE_SEARCH_MAP.all ? [] : [activePluginType]}
|
||||
onChange={(categories) => {
|
||||
if (categories.length === 0) {
|
||||
handleActivePluginTypeChange(PLUGIN_TYPE_SEARCH_MAP.all)
|
||||
return
|
||||
}
|
||||
handleActivePluginTypeChange(categories[categories.length - 1] as ActivePluginType)
|
||||
}}
|
||||
/>
|
||||
<TagFilter
|
||||
value={filterPluginTags}
|
||||
onChange={handleFilterPluginTagsChange}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<SortDropdown />
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
isLoading && page === 1 && (
|
||||
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
'use client'
|
||||
|
||||
import { useMarketplaceSearchMode } from './atoms'
|
||||
import { Description } from './description'
|
||||
import SearchResultsHeader from './search-results-header'
|
||||
|
||||
type MarketplaceHeaderProps = {
|
||||
descriptionClassName?: string
|
||||
}
|
||||
|
||||
const MarketplaceHeader = ({ descriptionClassName }: MarketplaceHeaderProps) => {
|
||||
const isSearchMode = useMarketplaceSearchMode()
|
||||
|
||||
if (isSearchMode)
|
||||
return <SearchResultsHeader />
|
||||
|
||||
return <Description className={descriptionClassName} />
|
||||
}
|
||||
|
||||
export default MarketplaceHeader
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import type { ComponentType } from 'react'
|
||||
import {
|
||||
RiBrain2Line,
|
||||
RiDatabase2Line,
|
||||
RiHammerLine,
|
||||
RiPuzzle2Line,
|
||||
RiSpeakAiLine,
|
||||
} from '@remixicon/react'
|
||||
import { Trigger as TriggerIcon } from '@/app/components/base/icons/src/vender/plugin'
|
||||
import { PluginCategoryEnum } from '../types'
|
||||
|
||||
export type PluginTypeIconComponent = ComponentType<{ className?: string }>
|
||||
|
||||
export const MARKETPLACE_TYPE_ICON_COMPONENTS: Record<PluginCategoryEnum, PluginTypeIconComponent> = {
|
||||
[PluginCategoryEnum.tool]: RiHammerLine,
|
||||
[PluginCategoryEnum.model]: RiBrain2Line,
|
||||
[PluginCategoryEnum.datasource]: RiDatabase2Line,
|
||||
[PluginCategoryEnum.trigger]: TriggerIcon,
|
||||
[PluginCategoryEnum.agent]: RiSpeakAiLine,
|
||||
[PluginCategoryEnum.extension]: RiPuzzle2Line,
|
||||
}
|
||||
|
|
@ -1,20 +1,16 @@
|
|||
'use client'
|
||||
import type { ActivePluginType } from './constants'
|
||||
import type { PluginCategoryEnum } from '@/app/components/plugins/types'
|
||||
import { useTranslation } from '#i18n'
|
||||
import {
|
||||
RiApps2Line,
|
||||
RiArchive2Line,
|
||||
RiBrain2Line,
|
||||
RiDatabase2Line,
|
||||
RiHammerLine,
|
||||
RiPuzzle2Line,
|
||||
RiSpeakAiLine,
|
||||
} from '@remixicon/react'
|
||||
import { useSetAtom } from 'jotai'
|
||||
import { Trigger as TriggerIcon } from '@/app/components/base/icons/src/vender/plugin'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import { searchModeAtom, useActivePluginType } from './atoms'
|
||||
import { PLUGIN_CATEGORY_WITH_COLLECTIONS, PLUGIN_TYPE_SEARCH_MAP } from './constants'
|
||||
import { MARKETPLACE_TYPE_ICON_COMPONENTS } from './plugin-type-icons'
|
||||
|
||||
type PluginTypeSwitchProps = {
|
||||
className?: string
|
||||
|
|
@ -30,6 +26,15 @@ const PluginTypeSwitch = ({
|
|||
|
||||
const isHeroVariant = variant === 'hero'
|
||||
|
||||
const getTypeIcon = (value: ActivePluginType) => {
|
||||
if (value === PLUGIN_TYPE_SEARCH_MAP.all)
|
||||
return isHeroVariant ? <RiApps2Line className="mr-1.5 h-4 w-4" /> : null
|
||||
if (value === PLUGIN_TYPE_SEARCH_MAP.bundle)
|
||||
return <RiArchive2Line className="mr-1.5 h-4 w-4" />
|
||||
const Icon = MARKETPLACE_TYPE_ICON_COMPONENTS[value as PluginCategoryEnum]
|
||||
return Icon ? <Icon className="mr-1.5 h-4 w-4" /> : null
|
||||
}
|
||||
|
||||
const options: Array<{
|
||||
value: ActivePluginType
|
||||
text: string
|
||||
|
|
@ -38,42 +43,42 @@ const PluginTypeSwitch = ({
|
|||
{
|
||||
value: PLUGIN_TYPE_SEARCH_MAP.all,
|
||||
text: isHeroVariant ? t('category.allTypes', { ns: 'plugin' }) : t('category.all', { ns: 'plugin' }),
|
||||
icon: isHeroVariant ? <RiApps2Line className="mr-1.5 h-4 w-4" /> : null,
|
||||
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.all),
|
||||
},
|
||||
{
|
||||
value: PLUGIN_TYPE_SEARCH_MAP.model,
|
||||
text: t('category.models', { ns: 'plugin' }),
|
||||
icon: <RiBrain2Line className="mr-1.5 h-4 w-4" />,
|
||||
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.model),
|
||||
},
|
||||
{
|
||||
value: PLUGIN_TYPE_SEARCH_MAP.tool,
|
||||
text: t('category.tools', { ns: 'plugin' }),
|
||||
icon: <RiHammerLine className="mr-1.5 h-4 w-4" />,
|
||||
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.tool),
|
||||
},
|
||||
{
|
||||
value: PLUGIN_TYPE_SEARCH_MAP.datasource,
|
||||
text: t('category.datasources', { ns: 'plugin' }),
|
||||
icon: <RiDatabase2Line className="mr-1.5 h-4 w-4" />,
|
||||
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.datasource),
|
||||
},
|
||||
{
|
||||
value: PLUGIN_TYPE_SEARCH_MAP.trigger,
|
||||
text: t('category.triggers', { ns: 'plugin' }),
|
||||
icon: <TriggerIcon className="mr-1.5 h-4 w-4" />,
|
||||
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.trigger),
|
||||
},
|
||||
{
|
||||
value: PLUGIN_TYPE_SEARCH_MAP.agent,
|
||||
text: t('category.agents', { ns: 'plugin' }),
|
||||
icon: <RiSpeakAiLine className="mr-1.5 h-4 w-4" />,
|
||||
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.agent),
|
||||
},
|
||||
{
|
||||
value: PLUGIN_TYPE_SEARCH_MAP.extension,
|
||||
text: t('category.extensions', { ns: 'plugin' }),
|
||||
icon: <RiPuzzle2Line className="mr-1.5 h-4 w-4" />,
|
||||
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.extension),
|
||||
},
|
||||
{
|
||||
value: PLUGIN_TYPE_SEARCH_MAP.bundle,
|
||||
text: t('category.bundles', { ns: 'plugin' }),
|
||||
icon: <RiArchive2Line className="mr-1.5 h-4 w-4" />,
|
||||
icon: getTypeIcon(PLUGIN_TYPE_SEARCH_MAP.bundle),
|
||||
},
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
import type { Tag } from '@/app/components/plugins/hooks'
|
||||
import type { Plugin } from '@/app/components/plugins/types'
|
||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { PluginCategoryEnum } from '../../types'
|
||||
import SearchBox from './index'
|
||||
import SearchBoxWrapper from './search-box-wrapper'
|
||||
import SearchDropdown from './search-dropdown'
|
||||
import MarketplaceTrigger from './trigger/marketplace'
|
||||
import ToolSelectorTrigger from './trigger/tool-selector'
|
||||
|
||||
|
|
@ -13,32 +16,72 @@ import ToolSelectorTrigger from './trigger/tool-selector'
|
|||
// Mock i18n translation hook
|
||||
vi.mock('#i18n', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string, options?: { ns?: string }) => {
|
||||
t: (key: string, options?: { ns?: string, num?: number, author?: string }) => {
|
||||
// Build full key with namespace prefix if provided
|
||||
const fullKey = options?.ns ? `${options.ns}.${key}` : key
|
||||
const translations: Record<string, string> = {
|
||||
'pluginTags.allTags': 'All Tags',
|
||||
'pluginTags.searchTags': 'Search tags',
|
||||
'plugin.searchPlugins': 'Search plugins',
|
||||
'plugin.install': `${options?.num || 0} installs`,
|
||||
'plugin.marketplace.searchDropdown.plugins': 'Plugins',
|
||||
'plugin.marketplace.searchDropdown.showAllResults': 'Show all search results',
|
||||
'plugin.marketplace.searchDropdown.enter': 'Enter',
|
||||
'plugin.marketplace.searchDropdown.byAuthor': `by ${options?.author || ''}`,
|
||||
}
|
||||
return translations[fullKey] || key
|
||||
},
|
||||
}),
|
||||
}))
|
||||
|
||||
vi.mock('ahooks', () => ({
|
||||
useDebounce: (value: string) => value,
|
||||
}))
|
||||
|
||||
vi.mock('jotai', async () => {
|
||||
const actual = await vi.importActual<typeof import('jotai')>('jotai')
|
||||
return {
|
||||
...actual,
|
||||
useSetAtom: () => vi.fn(),
|
||||
}
|
||||
})
|
||||
|
||||
vi.mock('@/hooks/use-i18n', () => ({
|
||||
useRenderI18nObject: () => (value: Record<string, string> | string) => {
|
||||
if (typeof value === 'string')
|
||||
return value
|
||||
return value.en_US || Object.values(value)[0] || ''
|
||||
},
|
||||
}))
|
||||
|
||||
// Mock marketplace state hooks
|
||||
const { mockSearchPluginText, mockHandleSearchPluginTextChange, mockFilterPluginTags, mockHandleFilterPluginTagsChange } = vi.hoisted(() => {
|
||||
const {
|
||||
mockSearchPluginText,
|
||||
mockHandleSearchPluginTextChange,
|
||||
mockFilterPluginTags,
|
||||
mockHandleFilterPluginTagsChange,
|
||||
mockActivePluginType,
|
||||
mockSortValue,
|
||||
} = vi.hoisted(() => {
|
||||
return {
|
||||
mockSearchPluginText: '',
|
||||
mockHandleSearchPluginTextChange: vi.fn(),
|
||||
mockFilterPluginTags: [] as string[],
|
||||
mockHandleFilterPluginTagsChange: vi.fn(),
|
||||
mockActivePluginType: 'all',
|
||||
mockSortValue: {
|
||||
sortBy: 'install_count',
|
||||
sortOrder: 'DESC',
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
vi.mock('../atoms', () => ({
|
||||
useSearchPluginText: () => [mockSearchPluginText, mockHandleSearchPluginTextChange],
|
||||
useFilterPluginTags: () => [mockFilterPluginTags, mockHandleFilterPluginTagsChange],
|
||||
useActivePluginType: () => [mockActivePluginType, vi.fn()],
|
||||
useMarketplaceSortValue: () => mockSortValue,
|
||||
searchModeAtom: {},
|
||||
}))
|
||||
|
||||
// Mock useTags hook
|
||||
|
|
@ -60,8 +103,57 @@ vi.mock('@/app/components/plugins/hooks', () => ({
|
|||
tags: mockTags,
|
||||
tagsMap: mockTagsMap,
|
||||
}),
|
||||
useCategories: () => ({
|
||||
categoriesMap: {
|
||||
'tool': { name: 'tool', label: 'Tool' },
|
||||
'model': { name: 'model', label: 'Model' },
|
||||
'datasource': { name: 'datasource', label: 'Data Source' },
|
||||
'trigger': { name: 'trigger', label: 'Trigger' },
|
||||
'agent-strategy': { name: 'agent-strategy', label: 'Agent Strategy' },
|
||||
'extension': { name: 'extension', label: 'Extension' },
|
||||
'bundle': { name: 'bundle', label: 'Bundle' },
|
||||
},
|
||||
}),
|
||||
}))
|
||||
|
||||
let mockDropdownPlugins: Plugin[] = []
|
||||
vi.mock('../query', () => ({
|
||||
useMarketplacePlugins: () => ({
|
||||
data: { pages: [{ plugins: mockDropdownPlugins }] },
|
||||
isLoading: false,
|
||||
}),
|
||||
}))
|
||||
|
||||
const createPlugin = (overrides: Partial<Plugin> = {}): Plugin => ({
|
||||
type: 'plugin',
|
||||
org: 'dropbox',
|
||||
author: 'dropbox',
|
||||
name: 'dropbox-search',
|
||||
plugin_id: 'plugin-1',
|
||||
version: '1.0.0',
|
||||
latest_version: '1.0.0',
|
||||
latest_package_identifier: 'pkg-1',
|
||||
icon: 'https://example.com/icon.png',
|
||||
verified: false,
|
||||
label: { en_US: 'Dropbox search' },
|
||||
brief: { en_US: 'Interact with Dropbox files.' },
|
||||
description: { en_US: 'Interact with Dropbox files.' },
|
||||
introduction: '',
|
||||
repository: '',
|
||||
category: PluginCategoryEnum.tool,
|
||||
install_count: 206,
|
||||
endpoint: {
|
||||
settings: [],
|
||||
},
|
||||
tags: [],
|
||||
badges: [],
|
||||
verification: {
|
||||
authorized_category: 'community',
|
||||
},
|
||||
from: 'marketplace',
|
||||
...overrides,
|
||||
})
|
||||
|
||||
// Mock portal-to-follow-elem with shared open state
|
||||
let mockPortalOpenState = false
|
||||
|
||||
|
|
@ -115,6 +207,7 @@ describe('SearchBox', () => {
|
|||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
mockPortalOpenState = false
|
||||
mockDropdownPlugins = []
|
||||
})
|
||||
|
||||
// ================================
|
||||
|
|
@ -424,6 +517,64 @@ describe('SearchBox', () => {
|
|||
expect(onSearchChange).toHaveBeenCalledWith(' ')
|
||||
})
|
||||
})
|
||||
|
||||
// ================================
|
||||
// Submission Tests
|
||||
// ================================
|
||||
describe('Submission', () => {
|
||||
it('should call onSearchSubmit when pressing Enter', () => {
|
||||
const onSearchSubmit = vi.fn()
|
||||
render(<SearchBox {...defaultProps} onSearchSubmit={onSearchSubmit} />)
|
||||
|
||||
const input = screen.getByRole('textbox')
|
||||
fireEvent.keyDown(input, { key: 'Enter' })
|
||||
|
||||
expect(onSearchSubmit).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// ================================
|
||||
// SearchDropdown Component Tests
|
||||
// ================================
|
||||
describe('SearchDropdown', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render plugin items and metadata', () => {
|
||||
render(
|
||||
<SearchDropdown
|
||||
query="dropbox"
|
||||
plugins={[createPlugin()]}
|
||||
onShowAll={vi.fn()}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(screen.getByText('Plugins')).toBeInTheDocument()
|
||||
expect(screen.getByText('Dropbox search')).toBeInTheDocument()
|
||||
expect(screen.getByText('Tool')).toBeInTheDocument()
|
||||
expect(screen.getByText('206 installs')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Interactions', () => {
|
||||
it('should call onShowAll when clicking show all results', () => {
|
||||
const onShowAll = vi.fn()
|
||||
render(
|
||||
<SearchDropdown
|
||||
query="dropbox"
|
||||
plugins={[createPlugin()]}
|
||||
onShowAll={onShowAll}
|
||||
/>,
|
||||
)
|
||||
|
||||
fireEvent.click(screen.getByText('Show all search results'))
|
||||
|
||||
expect(onShowAll).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// ================================
|
||||
|
|
@ -433,6 +584,7 @@ describe('SearchBoxWrapper', () => {
|
|||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
mockPortalOpenState = false
|
||||
mockDropdownPlugins = []
|
||||
})
|
||||
|
||||
describe('Rendering', () => {
|
||||
|
|
@ -457,12 +609,22 @@ describe('SearchBoxWrapper', () => {
|
|||
})
|
||||
|
||||
describe('Hook Integration', () => {
|
||||
it('should call handleSearchPluginTextChange when search changes', () => {
|
||||
it('should not commit search when input changes', () => {
|
||||
render(<SearchBoxWrapper />)
|
||||
|
||||
const input = screen.getByRole('textbox')
|
||||
fireEvent.change(input, { target: { value: 'new search' } })
|
||||
|
||||
expect(mockHandleSearchPluginTextChange).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should commit search when pressing Enter', () => {
|
||||
render(<SearchBoxWrapper />)
|
||||
|
||||
const input = screen.getByRole('textbox')
|
||||
fireEvent.change(input, { target: { value: 'new search' } })
|
||||
fireEvent.keyDown(input, { key: 'Enter' })
|
||||
|
||||
expect(mockHandleSearchPluginTextChange).toHaveBeenCalledWith('new search')
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@ import TagsFilter from './tags-filter'
|
|||
type SearchBoxProps = {
|
||||
search: string
|
||||
onSearchChange: (search: string) => void
|
||||
onSearchSubmit?: () => void
|
||||
onSearchFocus?: () => void
|
||||
onSearchBlur?: () => void
|
||||
wrapperClassName?: string
|
||||
inputClassName?: string
|
||||
tags: string[]
|
||||
|
|
@ -22,6 +25,9 @@ type SearchBoxProps = {
|
|||
const SearchBox = ({
|
||||
search,
|
||||
onSearchChange,
|
||||
onSearchSubmit,
|
||||
onSearchFocus,
|
||||
onSearchBlur,
|
||||
wrapperClassName,
|
||||
inputClassName,
|
||||
tags,
|
||||
|
|
@ -58,6 +64,12 @@ const SearchBox = ({
|
|||
onChange={(e) => {
|
||||
onSearchChange(e.target.value)
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter')
|
||||
onSearchSubmit?.()
|
||||
}}
|
||||
onFocus={onSearchFocus}
|
||||
onBlur={onSearchBlur}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
{
|
||||
|
|
@ -89,6 +101,12 @@ const SearchBox = ({
|
|||
onChange={(e) => {
|
||||
onSearchChange(e.target.value)
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter')
|
||||
onSearchSubmit?.()
|
||||
}}
|
||||
onFocus={onSearchFocus}
|
||||
onBlur={onSearchBlur}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,9 +1,28 @@
|
|||
'use client'
|
||||
|
||||
import type { PluginsSearchParams } from '../types'
|
||||
import { useTranslation } from '#i18n'
|
||||
import { useDebounce } from 'ahooks'
|
||||
import { useSetAtom } from 'jotai'
|
||||
import { useMemo, useState } from 'react'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import { useFilterPluginTags, useSearchPluginText } from '../atoms'
|
||||
import {
|
||||
searchModeAtom,
|
||||
useActivePluginType,
|
||||
useFilterPluginTags,
|
||||
useMarketplaceSortValue,
|
||||
useSearchPluginText,
|
||||
} from '../atoms'
|
||||
import { PLUGIN_TYPE_SEARCH_MAP } from '../constants'
|
||||
import { useMarketplacePlugins } from '../query'
|
||||
import { getMarketplaceListFilterType } from '../utils'
|
||||
import SearchBox from './index'
|
||||
import SearchDropdown from './search-dropdown'
|
||||
|
||||
type SearchBoxWrapperProps = {
|
||||
wrapperClassName?: string
|
||||
|
|
@ -16,18 +35,92 @@ const SearchBoxWrapper = ({
|
|||
const { t } = useTranslation()
|
||||
const [searchPluginText, handleSearchPluginTextChange] = useSearchPluginText()
|
||||
const [filterPluginTags, handleFilterPluginTagsChange] = useFilterPluginTags()
|
||||
const [activePluginType] = useActivePluginType()
|
||||
const sort = useMarketplaceSortValue()
|
||||
const setSearchMode = useSetAtom(searchModeAtom)
|
||||
const committedSearch = searchPluginText || ''
|
||||
const [draftSearch, setDraftSearch] = useState(committedSearch)
|
||||
const [isFocused, setIsFocused] = useState(false)
|
||||
const [isHoveringDropdown, setIsHoveringDropdown] = useState(false)
|
||||
const debouncedDraft = useDebounce(draftSearch, { wait: 300 })
|
||||
const hasDraft = !!debouncedDraft.trim()
|
||||
|
||||
const dropdownQueryParams = useMemo(() => {
|
||||
if (!hasDraft)
|
||||
return undefined
|
||||
const filterType = getMarketplaceListFilterType(activePluginType) as PluginsSearchParams['type']
|
||||
return {
|
||||
query: debouncedDraft.trim(),
|
||||
category: activePluginType === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginType,
|
||||
tags: filterPluginTags,
|
||||
sort_by: sort.sortBy,
|
||||
sort_order: sort.sortOrder,
|
||||
type: filterType,
|
||||
page_size: 3,
|
||||
}
|
||||
}, [activePluginType, debouncedDraft, filterPluginTags, hasDraft, sort.sortBy, sort.sortOrder])
|
||||
|
||||
const dropdownQuery = useMarketplacePlugins(dropdownQueryParams)
|
||||
const dropdownPlugins = dropdownQuery.data?.pages[0]?.plugins || []
|
||||
|
||||
const handleSubmit = () => {
|
||||
const trimmed = draftSearch.trim()
|
||||
if (!trimmed)
|
||||
return
|
||||
handleSearchPluginTextChange(trimmed)
|
||||
setSearchMode(true)
|
||||
setIsFocused(false)
|
||||
}
|
||||
|
||||
const inputValue = isFocused ? draftSearch : committedSearch
|
||||
const isDropdownOpen = hasDraft && (isFocused || isHoveringDropdown)
|
||||
|
||||
return (
|
||||
<SearchBox
|
||||
wrapperClassName={cn('z-[11] mx-auto w-[640px] shrink-0', wrapperClassName)}
|
||||
inputClassName={cn('w-full', inputClassName)}
|
||||
search={searchPluginText}
|
||||
onSearchChange={handleSearchPluginTextChange}
|
||||
tags={filterPluginTags}
|
||||
onTagsChange={handleFilterPluginTagsChange}
|
||||
placeholder={t('searchPlugins', { ns: 'plugin' })}
|
||||
usedInMarketplace
|
||||
/>
|
||||
<PortalToFollowElem
|
||||
placement="bottom-start"
|
||||
offset={8}
|
||||
open={isDropdownOpen}
|
||||
onOpenChange={setIsFocused}
|
||||
>
|
||||
<PortalToFollowElemTrigger asChild>
|
||||
<div>
|
||||
<SearchBox
|
||||
wrapperClassName={cn('z-[11] mx-auto w-[640px] shrink-0', wrapperClassName)}
|
||||
inputClassName={cn('w-full', inputClassName)}
|
||||
search={inputValue}
|
||||
onSearchChange={setDraftSearch}
|
||||
onSearchSubmit={handleSubmit}
|
||||
onSearchFocus={() => {
|
||||
setDraftSearch(committedSearch)
|
||||
setIsFocused(true)
|
||||
}}
|
||||
onSearchBlur={() => {
|
||||
if (!isHoveringDropdown)
|
||||
setIsFocused(false)
|
||||
}}
|
||||
tags={filterPluginTags}
|
||||
onTagsChange={handleFilterPluginTagsChange}
|
||||
placeholder={t('searchPlugins', { ns: 'plugin' })}
|
||||
usedInMarketplace
|
||||
/>
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent
|
||||
className="z-[1001]"
|
||||
onMouseEnter={() => setIsHoveringDropdown(true)}
|
||||
onMouseLeave={() => setIsHoveringDropdown(false)}
|
||||
onMouseDown={(event) => {
|
||||
event.preventDefault()
|
||||
}}
|
||||
>
|
||||
<SearchDropdown
|
||||
query={debouncedDraft.trim()}
|
||||
plugins={dropdownPlugins}
|
||||
onShowAll={handleSubmit}
|
||||
isLoading={dropdownQuery.isLoading}
|
||||
/>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
import type { Plugin } from '@/app/components/plugins/types'
|
||||
import { useTranslation } from '#i18n'
|
||||
import { RiArrowRightLine } from '@remixicon/react'
|
||||
import Loading from '@/app/components/base/loading'
|
||||
import { useCategories } from '@/app/components/plugins/hooks'
|
||||
import { useRenderI18nObject } from '@/hooks/use-i18n'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import { MARKETPLACE_TYPE_ICON_COMPONENTS } from '../../plugin-type-icons'
|
||||
import { getPluginDetailLinkInMarketplace } from '../../utils'
|
||||
|
||||
type SearchDropdownProps = {
|
||||
query: string
|
||||
plugins: Plugin[]
|
||||
onShowAll: () => void
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
const SearchDropdown = ({
|
||||
query,
|
||||
plugins,
|
||||
onShowAll,
|
||||
isLoading = false,
|
||||
}: SearchDropdownProps) => {
|
||||
const { t } = useTranslation()
|
||||
const getValueFromI18nObject = useRenderI18nObject()
|
||||
const { categoriesMap } = useCategories(true)
|
||||
|
||||
return (
|
||||
<div className="w-[472px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl backdrop-blur-sm">
|
||||
<div className="flex flex-col">
|
||||
{isLoading && !plugins.length && (
|
||||
<div className="flex items-center justify-center py-6">
|
||||
<Loading />
|
||||
</div>
|
||||
)}
|
||||
{!!plugins.length && (
|
||||
<div className="p-1">
|
||||
<div className="system-xs-semibold-uppercase px-3 pb-2 pt-3 text-text-primary">
|
||||
{t('marketplace.searchDropdown.plugins', { ns: 'plugin' })}
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
{plugins.map((plugin) => {
|
||||
const title = getValueFromI18nObject(plugin.label) || plugin.name
|
||||
const description = getValueFromI18nObject(plugin.brief) || ''
|
||||
const categoryLabel = categoriesMap[plugin.category]?.label || plugin.category
|
||||
const installLabel = t('install', { ns: 'plugin', num: plugin.install_count || 0 })
|
||||
const author = plugin.org || plugin.author || ''
|
||||
const TypeIcon = MARKETPLACE_TYPE_ICON_COMPONENTS[plugin.category]
|
||||
return (
|
||||
<a
|
||||
key={`${plugin.org}/${plugin.name}`}
|
||||
className={cn(
|
||||
'flex gap-2 rounded-lg px-3 py-2 hover:bg-state-base-hover',
|
||||
)}
|
||||
href={getPluginDetailLinkInMarketplace(plugin)}
|
||||
>
|
||||
<div className="flex h-7 w-7 items-center justify-center overflow-hidden rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge">
|
||||
<img className="h-full w-full object-cover" src={plugin.icon} alt={title} />
|
||||
</div>
|
||||
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
|
||||
<div className="system-sm-medium truncate text-text-primary">{title}</div>
|
||||
{!!description && (
|
||||
<div className="system-xs-regular truncate text-text-tertiary">{description}</div>
|
||||
)}
|
||||
<div className="flex items-center gap-1.5 pt-0.5 text-text-tertiary">
|
||||
<div className="flex items-center gap-1">
|
||||
{TypeIcon && <TypeIcon className="h-4 w-4 text-text-tertiary" />}
|
||||
<span className="system-xs-regular">{categoryLabel}</span>
|
||||
</div>
|
||||
<span className="system-xs-regular">·</span>
|
||||
<span className="system-xs-regular">
|
||||
{t('marketplace.searchDropdown.byAuthor', { ns: 'plugin', author })}
|
||||
</span>
|
||||
<span className="system-xs-regular">·</span>
|
||||
<span className="system-xs-regular">{installLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="border-t border-divider-subtle p-1">
|
||||
<button
|
||||
className="group flex w-full items-center justify-between rounded-lg px-3 py-2 text-left"
|
||||
onClick={onShowAll}
|
||||
type="button"
|
||||
>
|
||||
<span className="system-sm-medium text-text-accent">
|
||||
{t('marketplace.searchDropdown.showAllResults', { ns: 'plugin', query })}
|
||||
</span>
|
||||
<span className="flex items-center">
|
||||
<span className="system-2xs-medium-uppercase rounded-[5px] border border-divider-deep px-1.5 py-0.5 text-text-tertiary group-hover:hidden">
|
||||
{t('marketplace.searchDropdown.enter', { ns: 'plugin' })}
|
||||
</span>
|
||||
<RiArrowRightLine className="hidden h-5 w-5 text-text-tertiary group-hover:block" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SearchDropdown
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export { default as MarketplaceTrigger } from './marketplace'
|
||||
export { default as ToolSelectorTrigger } from './tool-selector'
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
'use client'
|
||||
|
||||
import { useTranslation } from '#i18n'
|
||||
import { useSearchPluginText } from './atoms'
|
||||
|
||||
const SearchResultsHeader = () => {
|
||||
const { t } = useTranslation('plugin')
|
||||
const [searchPluginText] = useSearchPluginText()
|
||||
|
||||
return (
|
||||
<div className="px-12 py-4">
|
||||
<div className="flex items-center gap-1 system-xs-regular text-text-tertiary">
|
||||
<span>{t('marketplace.searchBreadcrumbMarketplace')}</span>
|
||||
<span className="text-text-quaternary">/</span>
|
||||
<span>{t('marketplace.searchBreadcrumbSearch')}</span>
|
||||
</div>
|
||||
<div className="mt-2 flex items-end gap-2">
|
||||
<div className="title-4xl-semi-bold text-text-primary">
|
||||
{t('marketplace.searchResultsFor')}
|
||||
</div>
|
||||
<div className="relative title-4xl-semi-bold text-saas-dify-blue-accessible">
|
||||
<span className="relative z-10">{searchPluginText || ''}</span>
|
||||
<span className="absolute bottom-0 left-0 right-0 h-3 bg-saas-dify-blue-accessible opacity-10" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SearchResultsHeader
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
'use client'
|
||||
|
||||
import { cn } from '@/utils/classnames'
|
||||
import SearchBoxWrapper from './search-box/search-box-wrapper'
|
||||
|
||||
type StickySearchAndSwitchWrapperProps = {
|
||||
pluginTypeSwitchClassName?: string
|
||||
}
|
||||
|
||||
const StickySearchAndSwitchWrapper = ({
|
||||
pluginTypeSwitchClassName,
|
||||
}: StickySearchAndSwitchWrapperProps) => {
|
||||
const hasCustomTopClass = pluginTypeSwitchClassName?.includes('top-')
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'mt-4 bg-background-body',
|
||||
hasCustomTopClass && 'sticky z-10',
|
||||
pluginTypeSwitchClassName,
|
||||
)}
|
||||
>
|
||||
<SearchBoxWrapper />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default StickySearchAndSwitchWrapper
|
||||
|
|
@ -151,7 +151,7 @@ const PluginPage = ({
|
|||
onChange={setActiveTab}
|
||||
options={options}
|
||||
/>
|
||||
<SearchBoxWrapper wrapperClassName="w-[360px] mx-0" inputClassName="p-0" />
|
||||
{!isPluginsTab && <SearchBoxWrapper wrapperClassName="w-[360px] mx-0" inputClassName="p-0" />}
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
{
|
||||
|
|
|
|||
|
|
@ -200,10 +200,22 @@
|
|||
"marketplace.heroTitle": "Discover. Extend. Build.",
|
||||
"marketplace.installs": "installs",
|
||||
"marketplace.moreFrom": "More from Marketplace",
|
||||
"marketplace.ourTopPicks": "Our top picks to get you started",
|
||||
"marketplace.noPluginFound": "No plugin found",
|
||||
"marketplace.ourTopPicks": "Our top picks to get you started",
|
||||
"marketplace.partnerTip": "Verified by a Dify partner",
|
||||
"marketplace.pluginsResult": "{{num}} results",
|
||||
"marketplace.searchBreadcrumbMarketplace": "Marketplace",
|
||||
"marketplace.searchBreadcrumbSearch": "Search",
|
||||
"marketplace.searchDropdown.byAuthor": "by {{author}}",
|
||||
"marketplace.searchDropdown.enter": "Enter",
|
||||
"marketplace.searchDropdown.plugins": "Plugins",
|
||||
"marketplace.searchDropdown.showAllResults": "Show all search results",
|
||||
"marketplace.searchFilterAll": "All",
|
||||
"marketplace.searchFilterCreators": "Creators",
|
||||
"marketplace.searchFilterPlugins": "Plugins",
|
||||
"marketplace.searchFilterTags": "Tags",
|
||||
"marketplace.searchFilterTypes": "Types",
|
||||
"marketplace.searchResultsFor": "Results for",
|
||||
"marketplace.sortBy": "Sort by",
|
||||
"marketplace.sortOption.firstReleased": "First Released",
|
||||
"marketplace.sortOption.mostPopular": "Most Popular",
|
||||
|
|
|
|||
|
|
@ -200,10 +200,22 @@
|
|||
"marketplace.heroTitle": "探索。扩展。构建。",
|
||||
"marketplace.installs": "次安装",
|
||||
"marketplace.moreFrom": "更多来自市场",
|
||||
"marketplace.ourTopPicks": "我们精选推荐",
|
||||
"marketplace.noPluginFound": "未找到插件",
|
||||
"marketplace.ourTopPicks": "我们精选推荐",
|
||||
"marketplace.partnerTip": "此插件由 Dify 合作伙伴认证",
|
||||
"marketplace.pluginsResult": "{{num}} 个插件结果",
|
||||
"marketplace.searchBreadcrumbMarketplace": "市场",
|
||||
"marketplace.searchBreadcrumbSearch": "搜索",
|
||||
"marketplace.searchDropdown.byAuthor": "由 {{author}} 提供",
|
||||
"marketplace.searchDropdown.enter": "输入",
|
||||
"marketplace.searchDropdown.plugins": "插件",
|
||||
"marketplace.searchDropdown.showAllResults": "显示所有搜索结果",
|
||||
"marketplace.searchFilterAll": "全部",
|
||||
"marketplace.searchFilterCreators": "创作者",
|
||||
"marketplace.searchFilterPlugins": "插件",
|
||||
"marketplace.searchFilterTags": "标签",
|
||||
"marketplace.searchFilterTypes": "类型",
|
||||
"marketplace.searchResultsFor": "搜索结果",
|
||||
"marketplace.sortBy": "排序方式",
|
||||
"marketplace.sortOption.firstReleased": "首次发布",
|
||||
"marketplace.sortOption.mostPopular": "最受欢迎",
|
||||
|
|
|
|||
|
|
@ -121,6 +121,7 @@
|
|||
"mermaid": "11.11.0",
|
||||
"mime": "4.1.0",
|
||||
"mitt": "3.0.1",
|
||||
"motion": "12.31.0",
|
||||
"negotiator": "1.0.0",
|
||||
"next": "16.1.5",
|
||||
"next-themes": "0.4.6",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 201 KiB |
|
|
@ -0,0 +1,27 @@
|
|||
<svg width="1416" height="200" viewBox="0 0 1416 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_n_21362_44659)">
|
||||
<rect width="1416" height="200" fill="url(#paint0_linear_21362_44659)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_n_21362_44659" x="0" y="0" width="1416" height="200" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.83333331346511841 0.83333331346511841" stitchTiles="stitch" numOctaves="3" result="noise" seed="3192" />
|
||||
<feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" />
|
||||
<feComponentTransfer in="alphaNoise" result="coloredNoise1">
|
||||
<feFuncA type="discrete" tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "/>
|
||||
</feComponentTransfer>
|
||||
<feComposite operator="in" in2="shape" in="coloredNoise1" result="noise1Clipped" />
|
||||
<feFlood flood-color="rgba(0, 0, 0, 0.18)" result="color1Flood" />
|
||||
<feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" />
|
||||
<feMerge result="effect1_noise_21362_44659">
|
||||
<feMergeNode in="shape" />
|
||||
<feMergeNode in="color1" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_21362_44659" x1="708" y1="0" x2="708" y2="200" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-opacity="0.3"/>
|
||||
<stop offset="0.661631" stop-color="#0033FF" stop-opacity="0.3"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in New Issue