@lobehub/chat 1.96.20 → 1.97.0

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

@@ -0,0 +1,63 @@
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useDetailContext } from '../DetailProvider';
+import Block from './Block';
+import Prompts from './Prompts';
+import Resources from './Resources';
+import Tools from './Tools';
+import { ModeType } from './types';
+
+const Schema = memo(() => {
+  const { t } = useTranslation('discover');
+  const { promptsCount, toolsCount, resourcesCount } = useDetailContext();
+  const [toolsActiveKey, setToolsActiveKey] = useState<string[]>([]);
+  const [toolsMode, setToolsMode] = useState<ModeType>(ModeType.Docs);
+  const [promptsActiveKey, setPromptsActiveKey] = useState<string[]>([]);
+  const [promptsMode, setPromptsMode] = useState<ModeType>(ModeType.Docs);
+  const [resourcesMode, setResourcesMode] = useState<ModeType>(ModeType.Docs);
+
+  return (
+    <Flexbox gap={64}>
+      <Block
+        count={toolsCount || 0}
+        desc={t('mcp.details.schema.tools.desc')}
+        id={'tools'}
+        mode={toolsMode}
+        setMode={setToolsMode}
+        title={t('mcp.details.schema.tools.title')}
+      >
+        <Tools activeKey={toolsActiveKey} mode={toolsMode} setActiveKey={setToolsActiveKey} />
+      </Block>
+
+      <Block
+        count={promptsCount || 0}
+        desc={t('mcp.details.schema.prompts.desc')}
+        id={'prompts'}
+        mode={promptsMode}
+        setMode={setPromptsMode}
+        title={t('mcp.details.schema.prompts.title')}
+      >
+        <Prompts
+          activeKey={promptsActiveKey}
+          mode={promptsMode}
+          setActiveKey={setPromptsActiveKey}
+        />
+      </Block>
+
+      <Block
+        count={resourcesCount || 0}
+        desc={t('mcp.details.schema.resources.desc')}
+        id={'resources'}
+        mode={resourcesMode}
+        setMode={setResourcesMode}
+        title={t('mcp.details.schema.resources.title')}
+      >
+        <Resources mode={resourcesMode} />
+      </Block>
+    </Flexbox>
+  );
+});
+
+export default Schema;

package/src/features/MCPPluginDetail/Schema/style.ts

@@ -0,0 +1,9 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => {
+  return {
+    code: css`
+      font-family: ${token.fontFamilyCode};
+    `,
+  };
+});

package/src/features/MCPPluginDetail/Schema/types.ts

@@ -0,0 +1,4 @@
+export enum ModeType {
+  Docs = 'docs',
+  JSON = 'json',
+}

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

@@ -0,0 +1,82 @@
+import { Markdown, Select, Snippet, Tag } from '@lobehub/ui';
+import { Divider } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import urlJoin from 'url-join';
+
+import { OFFICIAL_SITE } from '@/const/url';
+
+import { useDetailContext } from '../../DetailProvider';
+
+type BadgeStyle = 'flat' | 'flat-square' | 'plastic' | 'for-the-badge';
+type BadgeTheme = 'dark' | 'light';
+
+const GithubBadge = memo(() => {
+  const { t } = useTranslation('discover');
+  const theme = useTheme();
+  const { identifier = '' } = useDetailContext();
+  const [selectedStyle, setSelectedStyle] = useState<BadgeStyle>('flat-square');
+  const [selectedTheme, setSelectedTheme] = useState<BadgeTheme>('dark');
+
+  const pageUrl = urlJoin(OFFICIAL_SITE, 'mcp', identifier);
+  const badgeUrl = urlJoin(OFFICIAL_SITE, 'badge/mcp', identifier);
+  const styledBadgeUrl =
+    selectedStyle === 'flat-square' ? badgeUrl : `${badgeUrl}?style=${selectedStyle}`;
+
+  const badgeFullUrl = urlJoin(OFFICIAL_SITE, 'badge/mcp-full', identifier);
+
+  // 构建带主题参数的完整 badge URL
+  const styledBadgeFullUrl =
+    selectedTheme === 'dark' ? badgeFullUrl : `${badgeFullUrl}?theme=${selectedTheme}`;
+
+  const badgeLite = `[![MCP Badge](${styledBadgeUrl})](${pageUrl})`;
+
+  const badge = `[![MCP Badge](${styledBadgeFullUrl})](${pageUrl})`;
+
+  const styleOptions = [
+    { label: 'Flat Square', value: 'flat-square' },
+    { label: 'Flat', value: 'flat' },
+    { label: 'Plastic', value: 'plastic' },
+    { label: 'For The Badge', value: 'for-the-badge' },
+  ];
+
+  const themeOptions = [
+    { label: 'Dark', value: 'dark' },
+    { label: 'Light', value: 'light' },
+  ];
+
+  return (
+    <>
+      <Markdown>{t('mcp.details.githubBadge.desc')}</Markdown>
+
+      <Select
+        onChange={setSelectedStyle}
+        options={styleOptions}
+        prefix={<Tag style={{ marginRight: 4 }}>style</Tag>}
+        value={selectedStyle}
+      />
+      <Snippet language={'md'} style={{ fontSize: 12 }} variant={'outlined'}>
+        {badgeLite}
+      </Snippet>
+      <img
+        alt="MCP Badge"
+        height={selectedStyle === 'for-the-badge' ? 28 : 20}
+        src={styledBadgeUrl}
+      />
+      <Divider style={{ color: theme.colorTextDescription, fontSize: 12 }}>OR</Divider>
+      <Select
+        onChange={setSelectedTheme}
+        options={themeOptions}
+        prefix={<Tag style={{ marginRight: 4 }}>theme</Tag>}
+        value={selectedTheme}
+      />
+      <Snippet language={'md'} style={{ fontSize: 12 }} variant={'outlined'}>
+        {badge}
+      </Snippet>
+      <img alt="MCP Badge" src={styledBadgeFullUrl} />
+    </>
+  );
+});
+
+export default GithubBadge;

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

@@ -0,0 +1,34 @@
+import { Icon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { BanIcon, CircleCheckBigIcon, CircleDashedIcon } from 'lucide-react';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Title from '../../../app/[variants]/(main)/discover/features/Title';
+
+export interface ScoreItemProps {
+  check: boolean;
+  desc: ReactNode;
+  key: string;
+  required?: boolean;
+  title: ReactNode;
+}
+
+const ScoreItem = memo<ScoreItemProps>(({ required, check, desc, title }) => {
+  const theme = useTheme();
+  return (
+    <Flexbox align={'center'} gap={16} horizontal paddingInline={16}>
+      <Icon
+        color={check ? theme.colorSuccess : required ? theme.colorError : theme.colorTextQuaternary}
+        icon={check ? CircleCheckBigIcon : required ? BanIcon : CircleDashedIcon}
+        size={24}
+      />
+      <Flexbox gap={4}>
+        <Title level={3}>{title}</Title>
+        <p style={{ color: theme.colorTextSecondary, margin: 0 }}>{desc}</p>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default ScoreItem;

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

@@ -0,0 +1,24 @@
+import { Divider } from 'antd';
+import { Fragment, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import ScoreItem, { ScoreItemProps } from './ScoreItem';
+
+interface ScoreListProps {
+  items: ScoreItemProps[];
+}
+
+const ScoreList = memo<ScoreListProps>(({ items }) => {
+  return (
+    <Flexbox gap={16} paddingBlock={16}>
+      {items.map((item, index) => (
+        <Fragment key={item.key}>
+          <ScoreItem {...item} key={item.key} />
+          {index < items.length - 1 && <Divider style={{ margin: 0 }} />}
+        </Fragment>
+      ))}
+    </Flexbox>
+  );
+});
+
+export default ScoreList;

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>
         );