@lobehub/chat 1.96.20 → 1.97.1

package/src/features/MCPPluginDetail/Score/TotalScore.tsx

@@ -0,0 +1,289 @@
+import { Block } from '@lobehub/ui';
+import { Popover, Progress } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { ScoreResult, getGradeColor, sortItemsByPriority } from '../../MCP/calculateScore';
+
+const useStyles = createStyles(({ css, token }) => ({
+  colorDot: css`
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  `,
+  container: css`
+    padding: 24px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: 12px;
+    background: ${token.colorFillQuaternary};
+  `,
+  description: css`
+    margin-block-start: 8px;
+    font-size: 14px;
+    color: ${token.colorTextSecondary};
+  `,
+  gradeBadge: css`
+    flex: none;
+
+    width: 32px;
+    height: 32px;
+    border: 2px solid;
+    border-radius: 50%;
+
+    font-size: 16px;
+    font-weight: bold;
+  `,
+  gradeInfo: css`
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    margin-block-start: 12px;
+  `,
+  itemList: css`
+    margin-block: 8px;
+    margin-inline: 0;
+    padding-inline-start: 16px;
+
+    li {
+      margin-block: 4px;
+      margin-inline: 0;
+    }
+  `,
+  legend: css`
+    display: flex;
+    gap: 16px;
+    margin-block-start: 8px;
+    font-size: 12px;
+  `,
+  legendItem: css`
+    display: flex;
+    gap: 4px;
+    align-items: center;
+  `,
+  progressContainer: css`
+    margin-block-start: 16px;
+  `,
+  scoreText: css`
+    font-size: 24px;
+    font-weight: 600;
+    color: ${token.colorText};
+  `,
+  sectionTitle: css`
+    margin-block: 12px 6px;
+    margin-inline: 0;
+    padding-block-start: 8px;
+    border-block-start: 1px solid ${token.colorBorderSecondary};
+
+    font-size: 14px;
+    font-weight: 600;
+    color: ${token.colorText};
+
+    &:first-of-type {
+      padding-block-start: 0;
+      border-block-start: none;
+    }
+  `,
+  tooltipContent: css`
+    max-width: 400px;
+    line-height: 1.5;
+  `,
+}));
+
+interface ScoreItem {
+  check: boolean;
+  required?: boolean;
+  title: string;
+  weight?: number;
+}
+
+interface TotalScoreProps {
+  isValidated?: boolean;
+  scoreItems?: ScoreItem[];
+  scoreResult: ScoreResult;
+}
+
+const TotalScore = memo<TotalScoreProps>(({ scoreResult, scoreItems = [], isValidated }) => {
+  const { styles, theme } = useStyles();
+  const { t } = useTranslation('discover');
+
+  const { totalScore, maxScore, percentage, grade } = scoreResult;
+
+  // 使用主题颜色的段级颜色配置
+  const SEGMENT_COLORS = {
+    // 绿色 (80-100%)
+    A_COLOR: theme.colorSuccess,
+
+    // 黄色 (60-85%)
+    B_COLOR: theme.colorWarning,
+
+    // 红色 (0-60%)
+    F_COLOR: theme.colorError,
+  };
+
+  const allItems = sortItemsByPriority([...scoreItems]);
+  const completedRequired = allItems.filter((item) => item.required && item.check);
+  const incompleteRequired = allItems.filter((item) => item.required && !item.check);
+  const completedOptional = allItems.filter((item) => !item.required && item.check);
+  const incompleteOptional = allItems.filter((item) => !item.required && !item.check);
+
+  // 计算必需项个数
+  const totalRequiredItems = completedRequired.length + incompleteRequired.length;
+  const completedRequiredItems = completedRequired.length;
+
+  // 生成 tooltip 内容
+  const renderTooltipContent = () => (
+    <div className={styles.tooltipContent}>
+      <div style={{ fontSize: '14px', marginBottom: '12px' }}>
+        <strong>
+          {totalScore}/{maxScore} {t('mcp.details.totalScore.scoreInfo.points')} (
+          {Math.round(percentage)}%)
+        </strong>
+      </div>
+
+      {completedRequired.length > 0 && (
+        <>
+          <div className={styles.sectionTitle} style={{ color: getGradeColor(grade, theme) }}>
+            {t('mcp.details.totalScore.popover.completedRequired', {
+              count: completedRequired.length,
+            })}
+            :
+          </div>
+          <ul className={styles.itemList}>
+            {completedRequired.map((item, index) => (
+              <li key={index}>{item.title}</li>
+            ))}
+          </ul>
+        </>
+      )}
+
+      {incompleteRequired.length > 0 && (
+        <>
+          <div className={styles.sectionTitle} style={{ color: theme.colorError }}>
+            {t('mcp.details.totalScore.popover.incompleteRequired', {
+              count: incompleteRequired.length,
+            })}
+            :
+          </div>
+          <ul className={styles.itemList}>
+            {incompleteRequired.map((item, index) => (
+              <li key={index}>{item.title}</li>
+            ))}
+          </ul>
+        </>
+      )}
+
+      {completedOptional.length > 0 && (
+        <>
+          <div className={styles.sectionTitle} style={{ color: getGradeColor(grade, theme) }}>
+            {t('mcp.details.totalScore.popover.completedOptional', {
+              count: completedOptional.length,
+            })}
+            :
+          </div>
+          <ul className={styles.itemList}>
+            {completedOptional.map((item, index) => (
+              <li key={index}>{item.title}</li>
+            ))}
+          </ul>
+        </>
+      )}
+
+      {incompleteOptional.length > 0 && (
+        <>
+          <div className={styles.sectionTitle} style={{ color: theme.colorTextSecondary }}>
+            {t('mcp.details.totalScore.popover.incompleteOptional', {
+              count: incompleteOptional.length,
+            })}
+            :
+          </div>
+          <ul className={styles.itemList}>
+            {incompleteOptional.map((item, index) => (
+              <li key={index}>{item.title}</li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  );
+
+  return (
+    <Block gap={12} padding={16} variant={'outlined'}>
+      <Flexbox align="flex-start" horizontal justify="space-between">
+        <Flexbox>
+          <h2 style={{ fontWeight: 'bold', margin: 0 }}>
+            {t(`mcp.details.scoreLevel.${grade}.fullTitle`)}
+          </h2>
+          <div className={styles.description}>{t(`mcp.details.scoreLevel.${grade}.desc`)}</div>
+        </Flexbox>
+        {isValidated && (
+          <Center
+            className={styles.gradeBadge}
+            style={{
+              borderColor: getGradeColor(grade, theme),
+              color: getGradeColor(grade, theme),
+            }}
+          >
+            {grade.toUpperCase()}
+          </Center>
+        )}
+      </Flexbox>
+
+      <div className={styles.progressContainer}>
+        <Popover
+          arrow={false}
+          content={renderTooltipContent()}
+          placement="bottom"
+          title={t('mcp.details.totalScore.popover.title')}
+          trigger={['hover', 'click']}
+        >
+          <Progress
+            percent={Math.round(percentage)}
+            showInfo={false}
+            size={{
+              height: 8,
+            }}
+            strokeColor={{
+              '0%': SEGMENT_COLORS.F_COLOR,
+              '60%': SEGMENT_COLORS.B_COLOR,
+              '80%': SEGMENT_COLORS.A_COLOR,
+            }}
+          />
+        </Popover>
+
+        <div className={styles.legend}>
+          <div className={styles.legendItem}>
+            <div className={styles.colorDot} style={{ backgroundColor: SEGMENT_COLORS.F_COLOR }} />
+            <span>{t('mcp.details.totalScore.legend.fGrade', { maxPercent: 60 })}</span>
+          </div>
+          <div className={styles.legendItem}>
+            <div className={styles.colorDot} style={{ backgroundColor: SEGMENT_COLORS.B_COLOR }} />
+            <span>
+              {t('mcp.details.totalScore.legend.bGrade', { maxPercent: 80, minPercent: 60 })}
+            </span>
+          </div>
+          <div className={styles.legendItem}>
+            <div className={styles.colorDot} style={{ backgroundColor: SEGMENT_COLORS.A_COLOR }} />
+            <span>{t('mcp.details.totalScore.legend.aGrade', { minPercent: 80 })}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.gradeInfo}>
+        <span style={{ fontSize: '16px', fontWeight: 600 }}>
+          {totalScore}/{maxScore} {t('mcp.details.totalScore.scoreInfo.points')}
+        </span>
+        <span style={{ color: getGradeColor(grade, theme), fontWeight: 600 }}>
+          {Math.round(percentage)}%
+        </span>
+        <span style={{ color: getGradeColor(grade, theme), fontSize: '14px' }}>
+          {t('mcp.details.totalScore.scoreInfo.requiredItems')}: {completedRequiredItems}/
+          {totalRequiredItems} {t('mcp.details.totalScore.scoreInfo.items')}
+        </span>
+      </div>
+    </Block>
+  );
+});
+
+export default TotalScore;

package/src/features/MCPPluginDetail/Score/index.tsx

@@ -0,0 +1,88 @@
+import { Block, Grid } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import {
+  calculateScore,
+  calculateScoreFlags,
+  createScoreItems,
+  sortItemsByPriority,
+} from '@/features/MCP/calculateScore';
+import { useScoreList } from '@/features/MCP/useScoreList';
+
+import Title from '../../../app/[variants]/(main)/discover/features/Title';
+import { useDetailContext } from '../DetailProvider';
+import GithubBadge from './GithubBadge';
+import ScoreList from './ScoreList';
+import TotalScore from './TotalScore';
+
+const Score = memo(() => {
+  const { t } = useTranslation('discover');
+  const {
+    github,
+    overview,
+    isValidated,
+    toolsCount,
+    promptsCount,
+    resourcesCount,
+    deploymentOptions,
+  } = useDetailContext();
+
+  // 使用工具函数计算所有的 has* 值
+  const scoreFlags = calculateScoreFlags({
+    deploymentOptions,
+    github,
+    isClaimed: false, // 详情页暂时没有 claimed 状态
+    isValidated,
+    overview,
+    promptsCount,
+    resourcesCount,
+    toolsCount,
+  });
+
+  // 计算总分和评级
+  const scoreItems = createScoreItems(scoreFlags);
+  const scoreResult = calculateScore(scoreItems);
+
+  // 使用新的 hook 创建评分项目列表
+  const scoreListItems = useScoreList();
+
+  // 使用工具函数排序
+  const sortedScoreListItems = sortItemsByPriority(scoreListItems);
+
+  return (
+    <Flexbox gap={16}>
+      {/* 总分显示 */}
+      <TotalScore
+        isValidated={isValidated}
+        scoreItems={scoreListItems.map((item) => ({
+          check: item.check,
+          required: item.required,
+          title: item.title,
+          weight: item.weight,
+        }))}
+        scoreResult={scoreResult}
+      />
+
+      {/* 评分明细 */}
+
+      <Grid rows={2}>
+        <Flexbox gap={16}>
+          <Title>{t('mcp.details.score.listTitle')}</Title>
+          <Block variant={'outlined'}>
+            <ScoreList items={sortedScoreListItems} />
+          </Block>
+        </Flexbox>
+        <Flexbox gap={16}>
+          <Title>GitHub Badge</Title>
+          <Block gap={16} padding={16} variant={'outlined'}>
+            <GithubBadge />
+          </Block>
+        </Flexbox>
+      </Grid>
+    </Flexbox>
+  );
+});
+
+export default Score;

package/src/features/PluginAvatar/index.tsx

@@ -4,7 +4,7 @@ import { LucideToyBrick } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Avatar from '@/features/PluginStore/PluginItem/PluginAvatar';
+import Avatar from '@/components/Plugins/PluginAvatar';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 

package/src/features/PluginDetailModal/Meta.tsx

@@ -1,5 +1,4 @@
-import { Block } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Block, Text } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -18,9 +17,9 @@ const Meta = memo<{
       <PluginAvatar identifier={id} size={40} />
       <Flexbox gap={2}>
         <div>{pluginHelpers.getPluginTitle(pluginMeta)}</div>
-        <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+        <Text style={{ fontSize: 12 }} type={'secondary'}>
           {pluginHelpers.getPluginDesc(pluginMeta)}
-        </Typography.Text>
+        </Text>
       </Flexbox>
     </Block>
   );

package/src/features/PluginDevModal/MCPManifestForm/MCPTypeSelect.tsx

@@ -1,5 +1,4 @@
-import { Icon } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Icon, Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { CheckIcon, RouterIcon, TerminalIcon } from 'lucide-react';
 import React, { memo } from 'react';
@@ -161,9 +160,9 @@ const MCPTypeSelect = ({ value, onChange }: MCPTypeSelectProps) => {
               ))}
             </Flexbox>
             {disabled && (
-              <Typography.Text style={{ fontSize: 12, marginTop: 8 }} type="warning">
+              <Text style={{ fontSize: 12, marginTop: 8 }} type="warning">
                 {t('dev.mcp.type.stdioNotAvailable')}
-              </Typography.Text>
+              </Text>
             )}
           </Flexbox>
         );

package/src/features/PluginDevModal/MCPManifestForm/index.tsx

@@ -1,18 +1,11 @@
-import {
-  SiBun,
-  SiDocker,
-  SiNodedotjs,
-  SiNpm,
-  SiPnpm,
-  SiPython,
-} from '@icons-pack/react-simple-icons';
 import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
-import { Alert, AutoComplete, FormItem, Input, TextArea } from '@lobehub/ui';
+import { Alert, FormItem, Input, TextArea } from '@lobehub/ui';
 import { Button, Divider, Form, FormInstance } from 'antd';
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import MCPStdioCommandInput from '@/components/MCPStdioCommandInput';
 import { isDesktop } from '@/const/version';
 import { mcpService } from '@/services/mcp';
 import { useToolStore } from '@/store/tool';
@@ -29,25 +22,6 @@ interface MCPManifestFormProps {
   isEditMode?: boolean;
 }
 
-// 定义预设的命令选项
-const STDIO_COMMAND_OPTIONS: {
-  // 假设图标是 React 函数组件
-  color?: string;
-  icon?: FC<{ color?: string; size?: number }>;
-  value: string;
-}[] = [
-  { color: '#CB3837', icon: SiNpm, value: 'npx' },
-  { color: '#CB3837', icon: SiNpm, value: 'npm' },
-  { color: '#F69220', icon: SiPnpm, value: 'pnpm' },
-  { color: '#F69220', icon: SiPnpm, value: 'pnpx' },
-  { color: '#339933', icon: SiNodedotjs, value: 'node' },
-  { color: '#efe2d2', icon: SiBun, value: 'bun' },
-  { color: '#efe2d2', icon: SiBun, value: 'bunx' },
-  { color: '#DE5FE9', icon: SiPython, value: 'uv' },
-  { color: '#3776AB', icon: SiPython, value: 'python' },
-  { color: '#2496ED', icon: SiDocker, value: 'docker' },
-];
-
 const HTTP_URL_KEY = ['customParams', 'mcp', 'url'];
 const STDIO_COMMAND = ['customParams', 'mcp', 'command'];
 const STDIO_ARGS = ['customParams', 'mcp', 'args'];
@@ -324,18 +298,7 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
                 rules={[{ message: t('dev.mcp.command.required'), required: true }]}
                 tag={'command'}
               >
-                <AutoComplete
-                  options={STDIO_COMMAND_OPTIONS.map(({ value, icon: Icon, color }) => ({
-                    label: (
-                      <Flexbox align={'center'} gap={8} horizontal>
-                        {Icon && <Icon color={color} size={16} />}
-                        {value}
-                      </Flexbox>
-                    ),
-                    value: value,
-                  }))}
-                  placeholder={t('dev.mcp.command.placeholder')}
-                />
+                <MCPStdioCommandInput placeholder={t('dev.mcp.command.placeholder')} />
               </FormItem>
               <FormItem
                 desc={t('dev.mcp.args.desc')}

package/src/features/PluginDevModal/PluginPreview/EmptyState.tsx

@@ -1,11 +1,9 @@
-import { Icon } from '@lobehub/ui';
-import { Space, Typography } from 'antd';
+import { Icon, Text } from '@lobehub/ui';
+import { Space } from 'antd';
 import { createStyles } from 'antd-style';
 import { Puzzle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-const { Title, Paragraph } = Typography;
-
 // Create styles using antd-style
 const useStyles = createStyles(({ token, css }) => ({
   container: css`
@@ -63,10 +61,10 @@ export default function PluginEmptyState() {
       <div className={styles.iconWrapper}>
         <Icon icon={Puzzle} size={32} />
       </div>
-      <Title className={styles.title} level={4}>
+      <Text as={'h4'} className={styles.title}>
         {t('dev.preview.empty.title')}
-      </Title>
-      <Paragraph className={styles.description}>{t('dev.preview.empty.desc')}</Paragraph>
+      </Text>
+      <Text className={styles.description}>{t('dev.preview.empty.desc')}</Text>
       <Space align="center" direction="vertical">
         <div className={styles.line} style={{ width: 128 }} />
         <div className={styles.line} style={{ width: 96 }} />

package/src/features/PluginDevModal/PluginPreview/index.tsx

@@ -1,6 +1,6 @@
 import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
-import { Block, Icon } from '@lobehub/ui';
-import { Form as AForm, Button, FormInstance, Typography } from 'antd';
+import { Block, Icon, Text } from '@lobehub/ui';
+import { Form as AForm, Button, FormInstance } from 'antd';
 import { useTheme } from 'antd-style';
 import { FileCode } from 'lucide-react';
 import { memo } from 'react';
@@ -8,8 +8,8 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import ManifestPreviewer from '@/components/ManifestPreviewer';
-import PluginAvatar from '@/features/PluginStore/PluginItem/PluginAvatar';
-import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
+import PluginAvatar from '@/components/Plugins/PluginAvatar';
+import PluginTag from '@/components/Plugins/PluginTag';
 import { pluginHelpers } from '@/store/tool';
 
 import ApiVisualizer from './ApiVisualizer';
@@ -50,9 +50,9 @@ const PluginPreview = memo<{ form: FormInstance }>(({ form }) => {
               {pluginHelpers.getPluginTitle(meta) || 'Plugin Title'}
               <PluginTag type={'customPlugin'} />
             </Flexbox>
-            <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            <Text style={{ fontSize: 12 }} type={'secondary'}>
               {pluginHelpers.getPluginDesc(meta) || 'Plugin Description'}
-            </Typography.Text>
+            </Text>
           </Flexbox>
         </Flexbox>
 

package/src/features/PluginSettings/index.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
-import PluginSettingRender from './PluginSettingRender';
+import ItemRender from '../../components/JSONSchemaConfig/ItemRender';
 
 export const transformPluginSettings = (pluginSettings: PluginSchema) => {
   if (!pluginSettings?.properties) return [];
@@ -68,7 +68,7 @@ const PluginSettingsConfig = memo<PluginSettingsConfigProps>(({ schema, id }) =>
       initialValues={pluginSetting}
       items={items.map((item) => ({
         children: (
-          <PluginSettingRender
+          <ItemRender
             enum={item.enum}
             format={item.format}
             maximum={item.maximum}

package/src/features/PluginStore/AddPluginButton.tsx

@@ -39,7 +39,7 @@ const AddPluginButton = forwardRef<HTMLButtonElement>((props, ref) => {
         }}
         ref={ref}
       >
-        {t('plugin.addTooltip')}
+        {t('plugin.addMCPPlugin')}
       </Button>
     </div>
   );

package/src/features/PluginStore/Content.tsx

@@ -0,0 +1,59 @@
+import { Segmented } from '@lobehub/ui';
+import { SegmentedOptions } from 'antd/es/segmented';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { isDesktop } from '@/const/version';
+import { useServerConfigStore } from '@/store/serverConfig';
+import { useToolStore } from '@/store/tool';
+import { PluginStoreTabs } from '@/store/tool/slices/oldStore';
+
+import AddPluginButton from './AddPluginButton';
+import InstalledList from './InstalledList';
+import McpList from './McpList';
+import PluginList from './PluginList';
+import Search from './Search';
+
+export const Content = memo(() => {
+  const { t } = useTranslation('plugin');
+  const mobile = useServerConfigStore((s) => s.isMobile);
+  const [listType] = useToolStore((s) => [s.listType]);
+  const [keywords] = useState<string>();
+
+  const options = [
+    isDesktop ? { label: t('store.tabs.mcp'), value: PluginStoreTabs.MCP } : undefined,
+    { label: t('store.tabs.old'), value: PluginStoreTabs.Plugin },
+    { label: t('store.tabs.installed'), value: PluginStoreTabs.Installed },
+  ].filter(Boolean) as SegmentedOptions;
+
+  return (
+    <Flexbox
+      gap={8}
+      style={{ maxHeight: mobile ? '-webkit-fill-available' : 'inherit' }}
+      width={'100%'}
+    >
+      <Flexbox gap={8} paddingInline={16}>
+        <Flexbox gap={8} horizontal>
+          <Segmented
+            block
+            onChange={(v) => {
+              useToolStore.setState({ listType: v as PluginStoreTabs });
+            }}
+            options={options}
+            style={{ flex: 1 }}
+            value={listType}
+            variant={'filled'}
+          />
+          <AddPluginButton />
+        </Flexbox>
+        <Search />
+      </Flexbox>
+      {listType === PluginStoreTabs.MCP && <McpList />}
+      {listType === PluginStoreTabs.Plugin && <PluginList />}
+      {listType === PluginStoreTabs.Installed && <InstalledList keywords={keywords} />}
+    </Flexbox>
+  );
+});
+
+export default Content;