diff --git a/web/app/(commonLayout)/plugins/page.tsx b/web/app/(commonLayout)/plugins/page.tsx index c7ae0b83ab..a3066311b2 100644 --- a/web/app/(commonLayout)/plugins/page.tsx +++ b/web/app/(commonLayout)/plugins/page.tsx @@ -8,7 +8,7 @@ const PluginList = async () => { return ( } - marketplace={} + marketplace={} /> ) } diff --git a/web/app/components/plugins/marketplace/hooks.ts b/web/app/components/plugins/marketplace/hooks.ts index 6ec98963f0..be7554a847 100644 --- a/web/app/components/plugins/marketplace/hooks.ts +++ b/web/app/components/plugins/marketplace/hooks.ts @@ -143,3 +143,34 @@ export const useMarketplaceContainerScroll = ( } }, [container, handleScroll]) } + +export const useSearchBoxAutoAnimate = (searchBoxAutoAnimate?: boolean) => { + const [searchBoxCanAnimate, setSearchBoxCanAnimate] = useState(true) + + const handleSearchBoxCanAnimateChange = useCallback(() => { + if (!searchBoxAutoAnimate) { + const clientWidth = document.documentElement.clientWidth + + if (clientWidth < 1350) + setSearchBoxCanAnimate(false) + else + setSearchBoxCanAnimate(true) + } + }, [searchBoxAutoAnimate]) + + useEffect(() => { + handleSearchBoxCanAnimateChange() + }, [handleSearchBoxCanAnimateChange]) + + useEffect(() => { + window.addEventListener('resize', handleSearchBoxCanAnimateChange) + + return () => { + window.removeEventListener('resize', handleSearchBoxCanAnimateChange) + } + }, [handleSearchBoxCanAnimateChange]) + + return { + searchBoxCanAnimate, + } +} diff --git a/web/app/components/plugins/marketplace/index.tsx b/web/app/components/plugins/marketplace/index.tsx index 4402866c96..5e6fbeec97 100644 --- a/web/app/components/plugins/marketplace/index.tsx +++ b/web/app/components/plugins/marketplace/index.tsx @@ -10,6 +10,7 @@ import { TanstackQueryIniter } from '@/context/query-client' type MarketplaceProps = { locale: string + searchBoxAutoAnimate?: boolean showInstallButton?: boolean shouldExclude?: boolean searchParams?: SearchParams @@ -19,6 +20,7 @@ type MarketplaceProps = { } const Marketplace = async ({ locale, + searchBoxAutoAnimate = true, showInstallButton = true, shouldExclude, searchParams, @@ -43,10 +45,14 @@ const Marketplace = async ({ > - + { const { t } = useMixedTranslation(locale) const activePluginType = useMarketplaceContext(s => s.activePluginType) const handleActivePluginTypeChange = useMarketplaceContext(s => s.handleActivePluginTypeChange) + const { searchBoxCanAnimate } = useSearchBoxAutoAnimate(searchBoxAutoAnimate) const options = [ { @@ -66,7 +72,8 @@ const PluginTypeSwitch = ({ return (
{ diff --git a/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx b/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx index a8e5e1c980..beb1c947fd 100644 --- a/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx +++ b/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx @@ -1,14 +1,20 @@ 'use client' + import { useMarketplaceContext } from '../context' -import { useMixedTranslation } from '../hooks' +import { + useMixedTranslation, + useSearchBoxAutoAnimate, +} from '../hooks' import SearchBox from './index' import cn from '@/utils/classnames' type SearchBoxWrapperProps = { locale?: string + searchBoxAutoAnimate?: boolean } const SearchBoxWrapper = ({ locale, + searchBoxAutoAnimate, }: SearchBoxWrapperProps) => { const { t } = useMixedTranslation(locale) const intersected = useMarketplaceContext(v => v.intersected) @@ -16,12 +22,14 @@ const SearchBoxWrapper = ({ const handleSearchPluginTextChange = useMarketplaceContext(v => v.handleSearchPluginTextChange) const filterPluginTags = useMarketplaceContext(v => v.filterPluginTags) const handleFilterPluginTagsChange = useMarketplaceContext(v => v.handleFilterPluginTagsChange) + const { searchBoxCanAnimate } = useSearchBoxAutoAnimate(searchBoxAutoAnimate) return ( { return 'category=tool' if (pluginType === PluginType.agent) - return 'category=agent_strategy' + return 'category=agent-strategy' if (pluginType === PluginType.model) return 'category=model' diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx index 7851f05aaf..7eea8fea0f 100644 --- a/web/app/components/plugins/plugin-page/index.tsx +++ b/web/app/components/plugins/plugin-page/index.tsx @@ -2,7 +2,9 @@ import { useEffect, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' +import Link from 'next/link' import { + RiBookOpenLine, RiDragDropLine, RiEqualizer2Line, } from '@remixicon/react' @@ -158,6 +160,25 @@ const PluginPage = ({ />
+ { + activeTab === 'discover' && ( + <> + + + +
+ + ) + } {canManagement && ( void }, Props>(({ <> {hasRes && (
{t('plugin.fromMarketplace')} diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts index 603b403435..725450d61d 100644 --- a/web/i18n/en-US/plugin.ts +++ b/web/i18n/en-US/plugin.ts @@ -198,6 +198,7 @@ const translation = { installedError: '{{errorLength}} plugins failed to install', clearAll: 'Clear all', }, + submitPlugin: 'Submit plugin', } export default translation diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts index 55d7dd81f0..fc1a052e39 100644 --- a/web/i18n/zh-Hans/plugin.ts +++ b/web/i18n/zh-Hans/plugin.ts @@ -198,6 +198,7 @@ const translation = { installedError: '{{errorLength}} 个插件安装失败', clearAll: '清除所有', }, + submitPlugin: '上传插件', } export default translation