首页 > 其他分享 >Antdesign React之API展示页面

Antdesign React之API展示页面

时间:2024-12-21 18:41:48浏览次数:6  
标签:const title views React API avatar stars Antdesign

本项目基于antdesignpro,点击调试后跳转弹窗,左边展示public/doc路径下的md文档并且通过markdownview渲染成md,右侧是json编辑器


index.tsx

import React, { useState, useMemo } from 'react';
import { Layout, Menu, theme, Row, Col } from 'antd';
import { HomeOutlined, FireTwoTone, HeartTwoTone } from '@ant-design/icons';
import CustomCard from "./CustomCard";
import { cardData, categoryLabels, categoryKeys, Card } from './cardData';

const { Header, Content, Sider } = Layout;

const sidebarItems = [HomeOutlined, FireTwoTone, HeartTwoTone].map(
  (icon, index) => ({
    key: categoryKeys[index],
    icon: React.createElement(icon),
    label: categoryLabels[index],
  }),
);

interface CardGridProps {
  cards: Card[];
}

// 卡片网格
const CardGrid: React.FC<CardGridProps> = ({ cards }) => (
  <Row gutter={[16, 16]}>
    {cards.map((card, index) => (
      <Col key={index} xs={24} sm={12} md={8} lg={6}>
        <CustomCard {...card} />
      </Col>
    ))}
  </Row>
);

const Test2: React.FC = () => {
  const {
    token: { colorBgContainer, borderRadiusLG, fontSizeHeading1, paddingLG },
  } = theme.useToken();

  const [selectedCategory, setSelectedCategory] = useState(categoryKeys[0]);

  // 筛选出当前选中类别的卡片
  const filteredCards = useMemo(() => {
    // 如果选中类别是 'all',则返回所有类别的卡片
    if (selectedCategory === 'all') {
      return cardData.flatMap(category => category.cards);
    }
    // 否则,只返回该类别的卡片
    return cardData
      .filter(category => category.categoryName === selectedCategory)
      .flatMap(category => category.cards);
  }, [selectedCategory]);

  return (
    <Layout>
      <Header
        style={{
          textAlign: 'center',
          height: 100,
          paddingInline: paddingLG,
          lineHeight: '64px',
          fontSize: fontSizeHeading1,
          fontFamily: 'PingFang SC',
          backgroundColor: 'white',
        }}
      >
        API HUB
      </Header>
      <Content style={{ padding: '0 48px' }}>
        <Layout
          style={{ padding: '24px 0', background: colorBgContainer, borderRadius: borderRadiusLG }}
        >
          <Sider style={{ background: colorBgContainer }} width={200}>
            <Menu
              mode="inline"
              selectedKeys={[selectedCategory]}
              style={{ height: '100%' }}
              items={sidebarItems}
              onClick={(e) => setSelectedCategory(e.key)}
            />
          </Sider>
          <Content style={{ padding: '0 24px', minHeight: 280 }}>
            <CardGrid cards={filteredCards} />
          </Content>
        </Layout>
      </Content>
    </Layout>
  );
};


export default Test2;

customcard.tsx,定义每一个api卡片

import React, { useState } from 'react';
import { Card, Typography, Button, Modal, Avatar, Row, Col } from 'antd';
import { EyeOutlined, StarOutlined } from '@ant-design/icons';
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-github';
import MarkdownView from '../MarkdownView/MarkdownView';

const { Meta } = Card;

interface CardProps {
  title: string;
  views: number;
  stars: number;
  description: string;
  avatar: string;
  mdFilePath: string;
}

const CustomCard: React.FC<CardProps> = React.memo(({ 
  title, 
  views, 
  stars, 
  description, 
  avatar, 
  mdFilePath 
}) => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [fileContent, setFileContent] = useState('');
  const [jsonContent, setJsonContent] = useState(`{
  "example": "data"
}`);

  // 点击调试按钮处理函数
  const handleButtonClick = async () => {
    try {
      const publicPath = process.env.PUBLIC_URL || '';
      const response = await fetch(`${publicPath}/doc/${mdFilePath}`);
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      const content = await response.text();
      setFileContent(content);
      setIsModalVisible(true);
    } catch (error) {
      console.error('Error reading file:', error);
    }
  };

  // JSON编辑器变更处理函数
  const handleJsonChange = (value: string) => {
    setJsonContent(value);
  };

  return (
    <>
      <Card hoverable>
        <Meta
          avatar={
            <Avatar
              src={avatar}
              size={64}
            />
          }
          title={
            <div>
              <Typography.Title level={5}>
                {title}
              </Typography.Title>
              <div>
                <EyeOutlined style={{ marginRight: 4 }} />
                {views?.toLocaleString() ?? 0}
                <StarOutlined style={{ marginLeft: 16, marginRight: 4 }} />
                {stars?.toLocaleString() ?? 0}
              </div>
            </div>
          }
        />
        <Typography.Paragraph ellipsis={{ rows: 2, expandable: false }}>
          {description}
        </Typography.Paragraph>
        <div>
          <Button type="primary" onClick={handleButtonClick}>
            调试
          </Button>
        </div>
      </Card>
      
      <Modal
        title={title}
        open={isModalVisible}
        onCancel={() => setIsModalVisible(false)}
        footer={null}
        width="90vw"
        centered
        bodyStyle={{ 
          maxHeight: '90vh',
          overflow: 'auto',
          padding: '24px'
        }}
      >
        <Row gutter={24}>
          {/* Markdown内容 - 左侧 */}
          <Col span={18} style={{ 
            maxHeight: '80vh', 
            overflowY: 'auto',
            borderRight: '1px solid #e8e8e8'
          }}>
            <MarkdownView content={fileContent} />
          </Col>

          {/* JSON编辑器 - 右侧 */}
          <Col span={6} style={{ 
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'flex-end'  // 向右对齐
          }}>
            <h3 style={{ marginTop: 0, alignSelf: 'flex-start' }}>JSON 编辑器</h3>
            <AceEditor
              mode="json"
              theme="github"
              value={jsonContent}
              onChange={handleJsonChange}
              name="json-editor"
              editorProps={{ $blockScrolling: true }}
              setOptions={{
                showLineNumbers: true,
                tabSize: 2,
                useWorker: false,
                fontSize: 14,
                printMargin: false 
              }}
              width="100%"
              // height="calc(100vh - 200px)"
              height="50%"
              style={{
                border: '1px solid #e8e8e8',
                borderRadius: '4px'
              }}
            />
            <Button type="primary" style={{ marginTop: 10 }}>
            调试
          </Button>
          </Col>
        </Row>
      </Modal>
    </>
  );
});

export default CustomCard;

carddata.tsx,定义了一些接口的数据,后续将接入后端

export interface Card {
  title: string;
  views: number;
  stars: number;
  description: string;
  avatar: string;
  mdFilePath: string; // 新增的属性
}

export interface Category {
  categoryName: string;
  cards: Card[];
}

export const cardData: Category[] = [
  {
    categoryName: 'hot',
    cards: [
      {
        title: 'OpenAI GPT-3',
        views: 1250000,
        stars: 8500,
        description: 'OpenAI GPT-3是一个强大的自然语言处理API,可用于多种语言任务,如文本生成、翻译和问答。',
        avatar: 'https://example.com/openai-avatar.png',
        mdFilePath: 'test.md', // 示例路径
      },
      {
        title: 'TensorFlow API',
        views: 980000,
        stars: 7200,
        description: 'TensorFlow提供了全面的机器学习和深度学习工具,支持模型训练、部署和推理。',
        avatar: 'https://example.com/tensorflow-avatar.png',
        mdFilePath: 'test2.md', // 示例路径
      },
    ],
  },
  {
    categoryName: 'fav',
    cards: [
      {
        title: 'Stripe支付API',
        views: 750000,
        stars: 6300,
        description: 'Stripe API提供了简单而强大的支付处理功能,支持多种货币和支付方式。',
        avatar: 'https://example.com/stripe-avatar.png',
        mdFilePath: 'public/doc/stripe-api.md', // 示例路径
      },
    ],
  },
  {
    categoryName: 'all',
    cards: [
      {
        title: 'Google Maps API',
        views: 2000000,
        stars: 9500,
        description: 'Google Maps API提供了全面的地图、地理编码和路线规划功能,适用于各种位置基础应用。',
        avatar: 'https://example.com/googlemaps-avatar.png',
        mdFilePath: 'public/doc/google-maps-api.md', // 示例路径
      },
      {
        title: 'AWS S3 API',
        views: 1800000,
        stars: 8900,
        description: 'Amazon S3 API提供了可扩展的云存储解决方案,支持大规模数据存储和检索。',
        avatar: 'https://example.com/awss3-avatar.png',
        mdFilePath: 'public/doc/aws-s3-api.md', // 示例路径
      },
      {
        title: 'Twitter API',
        views: 1500000,
        stars: 7800,
        description: 'Twitter API允许开发者访问和分析Twitter平台的数据,包括推文、用户信息和趋势。',
        avatar: 'https://example.com/twitter-avatar.png',
        mdFilePath: 'public/doc/twitter-api.md', // 示例路径
      },
    ],
  },
  {
    categoryName: 'hot',
    cards: [
      {
        title: 'Firebase实时数据库',
        views: 950000,
        stars: 7100,
        description: 'Firebase实时数据库提供了实时同步的云托管NoSQL数据库,适用于构建协作应用。',
        avatar: 'https://example.com/firebase-avatar.png',
        mdFilePath: 'public/doc/firebase-realtime-db.md', // 示例路径
      },
    ],
  },
  {
    categoryName: 'fav',
    cards: [
      {
        title: 'Spotify API',
        views: 850000,
        stars: 6800,
        description: 'Spotify API使开发者能够集成Spotify的音乐流媒体功能,包括搜索、播放控制和推荐。',
        avatar: 'https://example.com/spotify-avatar.png',
        mdFilePath: 'public/doc/spotify-api.md', // 示例路径
      },
      {
        title: 'GitHub API',
        views: 1100000,
        stars: 8200,
        description: 'GitHub API提供了访问GitHub平台数据的接口,支持代码仓库管理、问题跟踪等功能。',
        avatar: 'https://example.com/github-avatar.png',
        mdFilePath: 'public/doc/github-api.md', // 示例路径
      },
    ],
  },
];

export const categoryLabels = ['全部', '使用热门', '收藏'];
export const categoryKeys = ['all', 'hot', 'fav'];

标签:const,title,views,React,API,avatar,stars,Antdesign
From: https://www.cnblogs.com/chiusto/p/18621031

相关文章

  • MONI后台管理系统-swagger3(springdoc-openapi)集成
    springdoc-openapiJava库有助于使用SpringBoot项目自动生成API文档。springdoc-openapi通过在运行时检查应用程序来根据Spring配置、类结构和各种注释推断API语义。该库会自动生成JSON/YAML和HTML格式的页面文档。生成的文档可以使用swagger-api注释进行补......
  • Python调用星火认知大模型API(流式传输)
    Python调用星火认知大模型API流式传输前言1.获取API认证信息2.快速调用集成星火认知大模型3.实现AI流式回复1)SparkApi.py2)SparkApiMain.py3)SparkPicture.py4)spider.py5)开始测试参考文档前言最近对大模型比较感兴趣,想要调用大模型的API,实现AI助手那种问答效果,正......
  • 【恶意软件检测-CCFA文章】SDAC:使用基于语义距离的 API 集群进行 Android 恶意软件检
    ​SDAC:使用基于语义距离的API集群进行Android恶意软件检测的慢老化解决方案摘要提出了一种名为SDAC的新型缓慢老化解决方案,用于解决Android恶意软件检测中的模型老化问题,该问题是由于在恶意软件检测过程中未能适应Android规范的变化所致。与现有解决方案中的检测模......
  • 【Django】测试带有 CSRF 验证的 POST 表单 API 报错:Forbidden (CSRF cookie not set.
    【Django】测试带有CSRF验证的POST表单API报错:Forbidden(CSRFcookienotset.)问题描述Django使用Apifox测试POST表单报错。Forbidden(CSRFcookienotset.):/api/parse[20/Dec/202415:17:25]"POST//api/parseHTTP/1.1"4032855原因分析要在使......
  • React之Json编辑器
    我们先看下效果,这个白色是不是非常不错?没有太多复杂的功能,就是当一个简洁显示json并且进行编辑的功能接下来是代码部分importAceEditorfrom'react-ace';import{Button,Modal}from'antd';import'./styles.css';//Importaceeditorthemesandmodesimport'ac......
  • python3:访问apple server api
     一,安装用到的库:(venv)liuhongdi@lhdpc:/data/work/python/xiaoqu$pip3installPyJWTCollectingPyJWTDownloadingPyJWT-2.10.1-py3-none-any.whl.metadata(4.0kB)DownloadingPyJWT-2.10.1-py3-none-any.whl(22kB)Installingcollectedpackages:PyJWTSucces......
  • 百亿规模API网关服务Shepherd的设计与实现4
     1.背景中国有句古话:“民以食为天”。对食物的分析和理解,特别是识别菜肴的食材,在健康管理、卡路里计算、烹饪艺术、食物搜索等领域具有重要意义。但是,算法技术尽管在目标检测[1]-[3]、通用场景理解[4][5]和跨模态检索[6]-[8]方面取得了很大进展,却没有在食物相关的场景中取得......
  • React性能优化实战:从理论到落地的最佳实践
    "这个列表页怎么这么卡?"产品经理皱着眉头看着我。作为一个接手海外电商项目的前端开发者,我深知性能问题的重要性。特别是在东南亚市场,很多用户使用的是中低端手机,网络条件也不太理想。最近一个月,我带领团队对整个React应用进行了一次全面的性能优化,不仅解决了性能问题,还总......
  • Set-MMAgent -MaxOperationAPIFiles 的主要功能是设置 Microsoft Monitoring Agent (M
    mmagentApplicationLaunchPrefetching:FalseApplicationPreLaunch    :FalseMaxOperationAPIFiles    :8192MemoryCompression      :FalseOperationAPI        :FalsePageCombining        :FalsePS......
  • 基于Grafana自动化运维巡检API集成方案
    场景      某应用平台已经有Grafana面板,我们编写实现监控Grafana的API指标,实现自动化监控与巡检数据流图解决方案概述要实现通过SpringBoot程序与Grafana告警HTTPAPI进行交互,自动化运维告警,可以按照以下步骤进行:Grafana配置:配置Grafana的数据源(如Prometheus、InfluxDB......