@lobehub/lobehub 2.0.0-next.337 → 2.0.0-next.339

package/src/features/PluginStore/PluginList/List/Item.tsx

@@ -1,92 +0,0 @@
-import { Block, Flexbox, Text } from '@lobehub/ui';
-import { Progress } from 'antd';
-import { cssVar } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import PluginAvatar from '@/components/Plugins/PluginAvatar';
-import PluginTag from '@/components/Plugins/PluginTag';
-import { useToolStore } from '@/store/tool';
-import { pluginStoreSelectors } from '@/store/tool/selectors';
-import { PluginInstallStep } from '@/store/tool/slices/oldStore/initialState';
-import { type DiscoverPluginItem } from '@/types/discover';
-import { type LobeToolType } from '@/types/tool/tool';
-
-import Actions from './Action';
-
-interface PluginItemProps extends DiscoverPluginItem {
-  active?: boolean;
-  onClick?: () => void;
-  type?: LobeToolType;
-}
-const Item = memo<PluginItemProps>(
-  ({ title, description, avatar, onClick, active, identifier, author }) => {
-    const { t } = useTranslation('plugin');
-    const installProgress = useToolStore(
-      pluginStoreSelectors.getPluginInstallProgress(identifier),
-      isEqual,
-    );
-
-    const stepText = installProgress ? t(`mcpInstall.${installProgress.step}` as any) : undefined;
-    const hasError = installProgress?.step === PluginInstallStep.ERROR;
-
-    return (
-      <Flexbox gap={0}>
-        <Block
-          align={'center'}
-          clickable
-          gap={8}
-          horizontal
-          justify={'space-between'}
-          onClick={onClick}
-          paddingBlock={8}
-          paddingInline={12}
-          style={{ position: 'relative' }}
-          variant={active ? 'filled' : 'borderless'}
-        >
-          <Flexbox
-            align={'center'}
-            flex={1}
-            gap={8}
-            horizontal
-            style={{ overflow: 'hidden', position: 'relative' }}
-          >
-            <PluginAvatar avatar={avatar} />
-            <Flexbox flex={1} gap={4} style={{ overflow: 'hidden', position: 'relative' }}>
-              <Flexbox align={'center'} gap={4} horizontal>
-                <Text ellipsis strong>
-                  {title}
-                </Text>
-                <PluginTag author={author} type={'plugin'} />
-              </Flexbox>
-              <Text ellipsis fontSize={12} type={'secondary'}>
-                {description}
-              </Text>
-            </Flexbox>
-          </Flexbox>
-          <Actions identifier={identifier} />
-        </Block>
-
-        {installProgress && !hasError && (
-          <Flexbox paddingBlock={4} paddingInline={12}>
-            <Progress
-              percent={installProgress.progress}
-              showInfo={false}
-              size="small"
-              status="active"
-              strokeColor={{ '0%': cssVar.blue, '100%': cssVar.geekblue }}
-            />
-            {stepText && (
-              <Text fontSize={11} style={{ marginTop: 4 }} type={'secondary'}>
-                ({installProgress.progress}%) {stepText}
-              </Text>
-            )}
-          </Flexbox>
-        )}
-      </Flexbox>
-    );
-  },
-);
-
-export default Item;

package/src/features/PluginStore/PluginList/List/index.tsx

@@ -1,94 +0,0 @@
-import { Center, Flexbox, Icon } from '@lobehub/ui';
-import { ServerCrash } from 'lucide-react';
-import { memo, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Virtuoso } from 'react-virtuoso';
-
-import { useToolStore } from '@/store/tool';
-
-import SearchLoading from '../../Loading';
-import PluginEmpty from '../../PluginEmpty';
-import VirtuosoLoading from '../../VirtuosoLoading';
-import Item from './Item';
-
-export const List = memo(() => {
-  const { t } = useTranslation('plugin');
-
-  const [
-    isPluginListInit,
-    identifier,
-    allItems,
-    totalCount,
-    currentPage,
-    keywords,
-    searchLoading,
-    useFetchPluginList,
-    loadMorePlugins,
-    resetPluginList,
-  ] = useToolStore((s) => [
-    s.isPluginListInit,
-    s.activePluginIdentifier,
-    s.oldPluginItems,
-    s.pluginTotalCount,
-    s.currentPluginPage,
-    s.pluginSearchKeywords,
-    s.pluginSearchLoading,
-    s.useFetchPluginList,
-    s.loadMorePlugins,
-    s.resetPluginList,
-  ]);
-
-  // 当 keywords 变化时重置列表
-  useEffect(() => {
-    resetPluginList(keywords);
-  }, [keywords, resetPluginList]);
-
-  const { isLoading, error } = useFetchPluginList({
-    page: currentPage,
-    pageSize: 20,
-    q: keywords,
-  });
-
-  if (searchLoading || !isPluginListInit) return <SearchLoading />;
-
-  if (error)
-    return (
-      <Center gap={12} padding={40}>
-        <Icon icon={ServerCrash} size={80} />
-        {t('store.networkError')}
-      </Center>
-    );
-
-  const isEmpty = allItems.length === 0;
-  const hasSearchKeywords = Boolean(keywords && keywords.trim());
-
-  if (isEmpty) return <PluginEmpty search={hasSearchKeywords} />;
-
-  return (
-    <Virtuoso
-      components={{
-        Footer: isLoading ? VirtuosoLoading : undefined,
-      }}
-      data={allItems}
-      endReached={loadMorePlugins}
-      increaseViewportBy={typeof window !== 'undefined' ? window.innerHeight : 0}
-      itemContent={(_, item) => (
-        <Flexbox
-          key={item.identifier}
-          onClick={() => {
-            useToolStore.setState({ activePluginIdentifier: item.identifier });
-          }}
-          paddingBlock={2}
-          paddingInline={4}
-        >
-          <Item active={identifier === item.identifier} {...item} />
-        </Flexbox>
-      )}
-      overscan={24}
-      style={{ height: '100%', width: '100%' }}
-      totalCount={totalCount || 0}
-    />
-  );
-});
-
-export default List;

package/src/features/PluginStore/PluginList/index.tsx

@@ -1,46 +0,0 @@
-import { DraggablePanel, Flexbox } from '@lobehub/ui';
-import { cssVar, useTheme } from 'antd-style';
-import { Suspense, memo, useRef } from 'react';
-
-import Detail from './Detail';
-import DetailLoading from './Detail/Loading';
-import List from './List';
-
-export const PluginList = memo(() => {
-  const ref = useRef<HTMLDivElement>(null);
-  const theme = useTheme(); // Keep for colorBgContainerSecondary (not in cssVar)
-
-  return (
-    <Flexbox
-      height={'75vh'}
-      horizontal
-      style={{
-        borderTop: `1px solid ${cssVar.colorBorderSecondary}`,
-        overflow: 'hidden',
-        position: 'relative',
-      }}
-      width={'100%'}
-    >
-      <DraggablePanel maxWidth={1024} minWidth={420} placement={'left'}>
-        <List />
-      </DraggablePanel>
-      <Flexbox
-        height={'100%'}
-        padding={16}
-        ref={ref}
-        style={{
-          background: theme.colorBgContainerSecondary,
-          overflowX: 'hidden',
-          overflowY: 'auto',
-        }}
-        width={'100%'}
-      >
-        <Suspense fallback={<DetailLoading />}>
-          <Detail />
-        </Suspense>
-      </Flexbox>
-    </Flexbox>
-  );
-});
-
-export default PluginList;

package/src/features/PluginStore/Search/index.tsx

@@ -1,40 +0,0 @@
-import { Flexbox, SearchBar } from '@lobehub/ui';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useToolStore } from '@/store/tool';
-import { PluginStoreTabs } from '@/store/tool/slices/oldStore';
-
-export const Search = memo(() => {
-  const { t } = useTranslation('plugin');
-  const [listType, mcpKeywords, pluginKeywords] = useToolStore((s) => [
-    s.listType,
-    s.mcpSearchKeywords,
-    s.pluginSearchKeywords,
-  ]);
-
-  // 根据当前选项卡决定使用哪个关键词
-  const keywords = listType === PluginStoreTabs.MCP ? mcpKeywords : pluginKeywords;
-
-  return (
-    <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
-      <Flexbox flex={1}>
-        <SearchBar
-          allowClear
-          defaultValue={keywords}
-          onSearch={(keywords: string) => {
-            if (listType === PluginStoreTabs.MCP) {
-              useToolStore.setState({ mcpSearchKeywords: keywords, searchLoading: true });
-            } else if (listType === PluginStoreTabs.Plugin) {
-              useToolStore.setState({ pluginSearchKeywords: keywords, pluginSearchLoading: true });
-            }
-          }}
-          placeholder={t('store.placeholder')}
-          variant={'borderless'}
-        />
-      </Flexbox>
-    </Flexbox>
-  );
-});
-
-export default Search;