@lobehub/chat 1.96.20 → 1.97.1

package/src/features/MCP/Scores.tsx

@@ -0,0 +1,268 @@
+'use client';
+
+import { Icon, Tooltip } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { CircleDashedIcon, HammerIcon, LayersIcon, MessageSquareQuoteIcon } from 'lucide-react';
+import Link from 'next/link';
+import qs from 'query-string';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { McpNavKey } from '@/types/discover';
+
+import {
+  calculateScore,
+  calculateScoreFlags,
+  createScoreItems,
+  getGradeColor,
+  getGradeStyleClass,
+} from './calculateScore';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    active: css`
+      background: ${token.colorSuccessBgHover};
+    `,
+    disable: css`
+      color: ${token.colorTextDescription};
+    `,
+    extraTag: css`
+      padding-block: 4px;
+      padding-inline: 10px 12px;
+      border-radius: 16px;
+
+      color: ${token.colorTextSecondary};
+
+      background: ${token.colorFillTertiary};
+    `,
+    extraTagActive: css`
+      &:hover {
+        color: ${token.colorText};
+      }
+    `,
+    gradeA: css`
+      color: ${token.colorSuccess};
+      background: ${token.colorSuccessBg};
+    `,
+    gradeB: css`
+      color: ${token.colorWarning};
+      background: ${token.colorWarningBg};
+    `,
+    gradeF: css`
+      color: ${token.colorError};
+      background: ${token.colorErrorBg};
+    `,
+    gradeIcon: css`
+      flex: none;
+
+      width: 22px;
+      height: 22px;
+      border: 1.5px solid;
+      border-radius: 50%;
+
+      font-size: 12px;
+      font-weight: 600;
+    `,
+    tag: css`
+      padding-block: 4px;
+      padding-inline: 8px 12px;
+      border-radius: 16px;
+      background: ${token.colorFillTertiary};
+    `,
+  };
+});
+
+interface ScoresProps {
+  deploymentOptions?: Array<{
+    installationMethod?: string;
+  }>;
+  github?: {
+    license?: string;
+  };
+  identifier: string;
+  // 列表页支持
+  installationMethods?: string;
+  isClaimed?: boolean;
+  isValidated?: boolean;
+  // 原始数据属性
+  overview?: {
+    readme?: string;
+  };
+  promptsCount?: number;
+  resourcesCount?: number;
+  toolsCount?: number;
+}
+
+const Scores = memo<ScoresProps>(
+  ({
+    identifier,
+    promptsCount,
+    toolsCount,
+    resourcesCount,
+    isValidated,
+    overview,
+    github,
+    deploymentOptions,
+    isClaimed = false,
+    installationMethods,
+  }) => {
+    const { cx, styles, theme } = useStyles();
+    const { t } = useTranslation('discover');
+
+    // 使用工具函数计算所有的 has* 值，但需要处理类型转换
+    const scoreFlags = calculateScoreFlags({
+      // 只传递兼容的属性，或者进行类型转换
+      deploymentOptions: deploymentOptions?.map((item) => ({
+        // 确保不为 undefined
+        connection: { type: 'stdio' as const },
+        installationMethod: item.installationMethod || 'manual', // 提供默认的 connection
+      })),
+      github: github?.license
+        ? {
+            license: github.license,
+            url: '', // 提供默认的 url
+          }
+        : undefined,
+      installationMethods,
+      isClaimed,
+      isValidated,
+      overview: overview?.readme
+        ? {
+            readme: overview.readme,
+          }
+        : undefined,
+      promptsCount,
+      resourcesCount,
+      toolsCount,
+    });
+
+    // 计算评分
+    const scoreItems = createScoreItems(scoreFlags);
+    const scoreResult = calculateScore(scoreItems);
+    const { grade, percentage } = scoreResult;
+
+    const showToolts = Boolean(toolsCount && toolsCount > 0);
+    const showResources = Boolean(resourcesCount && resourcesCount > 0);
+    const showPrompts = Boolean(promptsCount && promptsCount > 0);
+
+    const showExtra = showToolts || showResources || showPrompts;
+
+    const scoreTag = (
+      <Tooltip title={`${t(`mcp.details.scoreLevel.${grade}.desc`)} (${Math.round(percentage)}%)`}>
+        <Flexbox
+          align={'center'}
+          className={cx(styles.tag, getGradeStyleClass(grade, styles))}
+          gap={8}
+          horizontal
+          style={{
+            paddingLeft: 4,
+          }}
+        >
+          <Center className={styles.gradeIcon} style={{ borderColor: getGradeColor(grade, theme) }}>
+            {grade.toUpperCase()}
+          </Center>
+          <span style={{ fontWeight: 500 }}>
+            {t(`mcp.details.scoreLevel.${grade}.title`).toUpperCase()}
+          </span>
+        </Flexbox>
+      </Tooltip>
+    );
+
+    const unvalidatedTag = (
+      <Tooltip title={t('mcp.unvalidated.desc')}>
+        <Flexbox
+          align={'center'}
+          className={styles.tag}
+          gap={8}
+          horizontal
+          style={{
+            color: theme.colorTextDescription,
+            paddingLeft: 4,
+          }}
+        >
+          <Icon color={theme.colorTextQuaternary} icon={CircleDashedIcon} size={22} />
+          {t('mcp.unvalidated.title')}
+        </Flexbox>
+      </Tooltip>
+    );
+
+    return (
+      <Flexbox
+        align={'center'}
+        flex={'none'}
+        gap={8}
+        horizontal
+        onClick={(e) => e.stopPropagation()}
+      >
+        {identifier && (
+          <Link
+            href={qs.stringifyUrl({
+              query: {
+                activeTab: McpNavKey.Score,
+              },
+              url: urlJoin('/discover/mcp', identifier),
+            })}
+          >
+            {isValidated ? scoreTag : unvalidatedTag}
+          </Link>
+        )}
+        {showExtra && (
+          <Link
+            href={qs.stringifyUrl({
+              query: {
+                activeTab: McpNavKey.Schema,
+              },
+              url: urlJoin('/discover/mcp', identifier),
+            })}
+          >
+            <Flexbox align={'center'} className={styles.extraTag} gap={16} horizontal>
+              {showToolts && (
+                <Tooltip
+                  title={[
+                    t('mcp.details.schema.tools.title'),
+                    t('mcp.details.schema.tools.desc'),
+                  ].join(': ')}
+                >
+                  <Flexbox align={'center'} className={styles.extraTagActive} gap={8} horizontal>
+                    <Icon icon={HammerIcon} size={14} />
+                    {toolsCount}
+                  </Flexbox>
+                </Tooltip>
+              )}
+              {showPrompts && (
+                <Tooltip
+                  title={[
+                    t('mcp.details.schema.prompts.title'),
+                    t('mcp.details.schema.prompts.desc'),
+                  ].join(': ')}
+                >
+                  <Flexbox align={'center'} className={styles.extraTagActive} gap={8} horizontal>
+                    <Icon icon={MessageSquareQuoteIcon} size={14} />
+                    {promptsCount}
+                  </Flexbox>
+                </Tooltip>
+              )}
+              {showResources && (
+                <Tooltip
+                  title={[
+                    t('mcp.details.schema.resources.title'),
+                    t('mcp.details.schema.resources.desc'),
+                  ].join(': ')}
+                >
+                  <Flexbox align={'center'} className={styles.extraTagActive} gap={8} horizontal>
+                    <Icon icon={LayersIcon} size={14} />
+                    {resourcesCount}
+                  </Flexbox>
+                </Tooltip>
+              )}
+            </Flexbox>
+          </Link>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default Scores;

package/src/features/MCP/calculateScore.ts

@@ -0,0 +1,324 @@
+import { DeploymentOption } from '@lobehub/market-types';
+
+import { DiscoverMcpDetail } from '@/types/discover';
+
+export interface ScoreItem {
+  check: boolean;
+  required?: boolean;
+  weight?: number; // 权重，可选
+}
+
+export interface ScoreResult {
+  grade: 'a' | 'b' | 'f';
+  maxRequiredScore: number;
+  maxScore: number;
+  percentage: number;
+  requiredPercentage: number;
+  requiredScore: number;
+  totalScore: number;
+}
+
+// 扩展的评分项目接口，用于显示
+export interface ScoreListItem extends ScoreItem {
+  desc: string;
+  key: string;
+  title: string;
+}
+
+// 原始数据接口
+export interface ScoreDataInput {
+  deploymentOptions?: Array<{
+    installationMethod?: string;
+  }>;
+  github?: {
+    license?: string;
+  };
+  installationMethods?: string; // 列表页使用
+  isClaimed?: boolean;
+  isValidated?: boolean;
+  overview?: {
+    readme?: string;
+  };
+  promptsCount?: number;
+  resourcesCount?: number;
+  toolsCount?: number;
+}
+
+// 计算后的布尔值结果
+export interface ScoreFlags {
+  hasClaimed: boolean;
+  hasDeployMoreThanManual: boolean;
+  hasDeployment: boolean;
+  hasLicense: boolean;
+  hasPrompts: boolean;
+  hasReadme: boolean;
+  hasResources: boolean;
+  hasTools: boolean;
+  hasValidated: boolean;
+}
+
+export const DEFAULT_WEIGHTS = {
+  claimed: 4,
+
+  // 必需项
+  deployMoreThanManual: 12,
+
+  deployment: 15,
+
+  // 必需项
+  license: 8,
+
+  // 必需项
+  prompts: 8,
+
+  readme: 10,
+
+  resources: 8,
+  // 必需项，权重最高
+  tools: 15,
+  validated: 20,
+};
+
+// 评分计算输入数据类型
+export interface ScoreCalculationInput
+  extends Partial<
+    Pick<
+      DiscoverMcpDetail,
+      | 'deploymentOptions'
+      | 'github'
+      | 'isValidated'
+      | 'overview'
+      | 'promptsCount'
+      | 'resourcesCount'
+      | 'toolsCount'
+    >
+  > {
+  installationMethods?: string; // 列表页使用
+  isClaimed?: boolean; // 添加 isClaimed 属性
+}
+
+/**
+ * 根据原始数据计算所有的评分标志
+ * @param data 原始数据
+ * @returns 计算后的布尔值标志
+ */
+export function calculateScoreFlags(data: ScoreCalculationInput): ScoreFlags {
+  const {
+    overview,
+    github,
+    deploymentOptions,
+    installationMethods,
+    isValidated,
+    toolsCount,
+    promptsCount,
+    resourcesCount,
+    isClaimed,
+  } = data;
+
+  // 计算基础标志
+  const hasReadme = Boolean(overview?.readme);
+  const hasLicense = Boolean(github?.license);
+
+  // 优先使用 deploymentOptions（详情页），然后使用 installationMethods（列表页）
+  const effectiveDeploymentOptions: DeploymentOption[] =
+    deploymentOptions ||
+    (installationMethods ? [{ installationMethod: installationMethods } as DeploymentOption] : []);
+
+  const hasDeployment = Boolean(
+    effectiveDeploymentOptions && effectiveDeploymentOptions.length > 0,
+  );
+  const hasDeployMoreThanManual = Boolean(
+    hasDeployment &&
+      effectiveDeploymentOptions?.find((item) => item.installationMethod !== 'manual'),
+  );
+
+  const hasTools = Boolean(toolsCount && toolsCount > 0);
+  const hasPrompts = Boolean(promptsCount && promptsCount > 0);
+  const hasResources = Boolean(resourcesCount && resourcesCount > 0);
+  const hasValidated = Boolean(isValidated);
+  const hasClaimed = Boolean(isClaimed);
+
+  return {
+    hasClaimed,
+    hasDeployMoreThanManual,
+    hasDeployment,
+    hasLicense,
+    hasPrompts,
+    hasReadme,
+    hasResources,
+    hasTools,
+    hasValidated,
+  };
+}
+
+/**
+ * 获取评级对应的颜色
+ * @param grade 评级
+ * @param theme 主题对象（可选）
+ * @returns 颜色值
+ */
+export function getGradeColor(grade: string, theme?: any): string {
+  if (theme) {
+    switch (grade) {
+      case 'a': {
+        return theme.colorSuccess;
+      }
+      case 'b': {
+        return theme.colorWarning;
+      }
+      case 'f': {
+        return theme.colorError;
+      }
+      default: {
+        return theme.colorTextSecondary || theme.colorBorderSecondary;
+      }
+    }
+  }
+
+  // 默认颜色值（用于没有主题对象的情况）
+  switch (grade) {
+    case 'a': {
+      return '#52c41a';
+    }
+    case 'b': {
+      return '#faad14';
+    }
+    case 'f': {
+      return '#ff4d4f';
+    }
+    default: {
+      return '#8c8c8c';
+    }
+  }
+}
+
+/**
+ * 获取评级对应的样式类名映射
+ * @param grade 评级
+ * @param styles 样式对象
+ * @returns 对应的样式类名
+ */
+export function getGradeStyleClass(grade: string, styles: any): string {
+  switch (grade) {
+    case 'a': {
+      return styles.gradeA;
+    }
+    case 'b': {
+      return styles.gradeB;
+    }
+    case 'f': {
+      return styles.gradeF;
+    }
+    default: {
+      return styles.disable || '';
+    }
+  }
+}
+
+/**
+ * 按优先级排序评分项目
+ * @param items 评分项目数组
+ * @returns 排序后的项目数组
+ */
+export function sortItemsByPriority<T extends ScoreItem>(items: T[]): T[] {
+  return items.sort((a, b) => {
+    // 1. 必需项优先
+    if (a.required !== b.required) {
+      return a.required ? -1 : 1;
+    }
+
+    // 2. 按权重从高到低
+    const weightA = a.weight || 0;
+    const weightB = b.weight || 0;
+    if (weightA !== weightB) {
+      return weightB - weightA;
+    }
+
+    // 3. 已完成的在前
+    if (a.check !== b.check) {
+      return a.check ? -1 : 1;
+    }
+
+    return 0;
+  });
+}
+
+/**
+ * 计算 MCP Server 的总分和评级
+ * @param items 评分项目
+ * @param weights 权重配置，默认使用 DEFAULT_WEIGHTS
+ * @returns 包含总分、最高分、百分比和评级的结果
+ */
+export function calculateScore(
+  items: Record<string, ScoreItem>,
+  weights: Record<string, number> = DEFAULT_WEIGHTS,
+): ScoreResult {
+  let totalScore = 0;
+  let maxScore = 0;
+  let requiredScore = 0;
+  let maxRequiredScore = 0;
+
+  // 计算实际得分和最大可能得分
+  Object.entries(items).forEach(([key, item]) => {
+    const weight = weights[key] || 5; // 默认权重为 5
+    maxScore += weight;
+
+    if (item.required) {
+      maxRequiredScore += weight;
+      if (item.check) {
+        requiredScore += weight;
+      }
+    }
+
+    if (item.check) {
+      totalScore += weight;
+    }
+  });
+
+  const percentage = maxScore > 0 ? (totalScore / maxScore) * 100 : 0;
+  const requiredPercentage = maxRequiredScore > 0 ? (requiredScore / maxRequiredScore) * 100 : 0;
+
+  // 评级计算逻辑
+  let grade: 'a' | 'b' | 'f';
+
+  // 如果必需项没有全部满足，直接评为 F
+  if (requiredPercentage < 100) {
+    grade = 'f';
+  } else {
+    // 必需项全部满足的情况下，根据总分百分比评级
+    if (percentage >= 80) {
+      grade = 'a'; // 80% 以上为 A
+    } else if (percentage >= 60) {
+      grade = 'b'; // 60-79% 为 B
+    } else {
+      grade = 'f'; // 60% 以下为 F
+    }
+  }
+
+  return {
+    grade,
+    maxRequiredScore,
+    maxScore,
+    percentage,
+    requiredPercentage,
+    requiredScore,
+    totalScore,
+  };
+}
+
+/**
+ * 根据评分项目数据创建用于计算的对象
+ */
+export function createScoreItems(data: ScoreFlags): Record<string, ScoreItem> {
+  return {
+    claimed: { check: data.hasClaimed },
+    deployMoreThanManual: { check: data.hasDeployMoreThanManual },
+    deployment: { check: data.hasDeployment, required: true },
+    license: { check: data.hasLicense },
+    prompts: { check: data.hasPrompts },
+    readme: { check: data.hasReadme, required: true },
+    resources: { check: data.hasResources },
+    tools: { check: data.hasTools, required: true },
+    validated: { check: data.hasValidated, required: true },
+  };
+}

package/src/features/MCP/useScoreList.ts

@@ -0,0 +1,126 @@
+import { useTranslation } from 'react-i18next';
+
+import { useDetailContext } from '@/features/MCPPluginDetail/DetailProvider';
+
+import { DEFAULT_WEIGHTS, ScoreListItem, calculateScoreFlags } from './calculateScore';
+
+/**
+ * Hook for creating score list items with translations
+ * 直接从 DetailContext 获取数据，完全自包含
+ * @returns 包含描述和标题的评分项目列表
+ */
+export function useScoreList(): ScoreListItem[] {
+  const { t } = useTranslation('discover');
+  const {
+    github,
+    overview,
+    isValidated,
+    toolsCount,
+    promptsCount,
+    resourcesCount,
+    deploymentOptions,
+  } = useDetailContext();
+
+  // 计算评分标志
+  const scoreFlags = calculateScoreFlags({
+    deploymentOptions,
+    github,
+    isClaimed: false, // 详情页暂时没有 claimed 状态
+    isValidated,
+    overview,
+    promptsCount,
+    resourcesCount,
+    toolsCount,
+  });
+
+  return [
+    {
+      check: scoreFlags.hasReadme,
+      desc: t('mcp.details.score.readme.desc'),
+      key: 'readme',
+      required: true,
+      title: t('mcp.details.score.readme.title'),
+      weight: DEFAULT_WEIGHTS.readme,
+    },
+    {
+      check: scoreFlags.hasLicense,
+      desc: scoreFlags.hasLicense
+        ? t('mcp.details.score.license.descWithlicense', { license: github?.license })
+        : t('mcp.details.score.license.desc'),
+      key: 'license',
+      required: false,
+      title: t('mcp.details.score.license.title'),
+      weight: DEFAULT_WEIGHTS.license,
+    },
+    {
+      check: scoreFlags.hasDeployment,
+      desc: scoreFlags.hasDeployment
+        ? t('mcp.details.score.deployment.descWithCount', {
+            number: deploymentOptions?.length,
+          })
+        : t('mcp.details.score.deployment.desc'),
+      key: 'deployment',
+      required: true,
+      title: t('mcp.details.score.deployment.title'),
+      weight: DEFAULT_WEIGHTS.deployment,
+    },
+    {
+      check: scoreFlags.hasDeployMoreThanManual,
+      desc: t('mcp.details.score.deployMoreThanManual.desc'),
+      key: 'deployMoreThanManual',
+      required: false,
+      title: t('mcp.details.score.deployMoreThanManual.title'),
+      weight: DEFAULT_WEIGHTS.deployMoreThanManual,
+    },
+    {
+      check: scoreFlags.hasValidated,
+      desc: t('mcp.details.score.validated.desc'),
+      key: 'validated',
+      required: true,
+      title: t('mcp.details.score.validated.title'),
+      weight: DEFAULT_WEIGHTS.validated,
+    },
+    {
+      check: scoreFlags.hasTools,
+      desc: scoreFlags.hasTools
+        ? t('mcp.details.score.tools.descWithCount', { number: toolsCount })
+        : t('mcp.details.score.tools.desc'),
+      key: 'tools',
+      required: true,
+      title: t('mcp.details.score.tools.title'),
+      weight: DEFAULT_WEIGHTS.tools,
+    },
+    {
+      check: scoreFlags.hasPrompts,
+      desc: scoreFlags.hasPrompts
+        ? t('mcp.details.score.prompts.descWithCount', { number: promptsCount })
+        : t('mcp.details.score.prompts.desc'),
+      key: 'prompts',
+      required: false,
+      title: t('mcp.details.score.prompts.title'),
+      weight: DEFAULT_WEIGHTS.prompts,
+    },
+    {
+      check: scoreFlags.hasResources,
+      desc: scoreFlags.hasResources
+        ? t('mcp.details.score.resources.descWithCount', { number: resourcesCount })
+        : t('mcp.details.score.resources.desc'),
+      key: 'resources',
+      required: false,
+      title: t('mcp.details.score.resources.title'),
+      weight: DEFAULT_WEIGHTS.resources,
+    },
+    {
+      check: scoreFlags.hasClaimed,
+      desc: scoreFlags.hasClaimed
+        ? t('mcp.details.score.claimed.desc')
+        : t('mcp.details.score.notClaimed.desc'),
+      key: 'claimed',
+      required: false,
+      title: scoreFlags.hasClaimed
+        ? t('mcp.details.score.claimed.title')
+        : t('mcp.details.score.notClaimed.title'),
+      weight: DEFAULT_WEIGHTS.claimed,
+    },
+  ];
+}