AI导哈

网络诊断工具模拟器

一个模拟经典网络诊断工具（Telnet和DNS查询）的现代Web应用，具有响应式UI，适用于网络教育和演示。

  • by channabasava-rampur1
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 channabasava-rampur1/mcp-server

使用说明

网络实用程序MCP服务器

一个现代的web应用程序，模拟经典的网络诊断工具（Telnet和DNS查找），具有美观、响应迅速的UI。使用React、Vite、Tailwind CSS和Radix UI组件构建。

特性

  • Telnet工具： 模拟任何主机/IP和端口的端口连接测试。真实的终端输出和连接模拟。
  • DNS查找工具： 查询域名和IP地址的模拟DNS记录。支持多种记录类型（A、AAAA、CNAME、MX、NS、TXT、SOA、PTR）。
  • 标签界面： 通过活动选项卡的清晰视觉指示，可以轻松在工具之间切换。
  • 终端输出： 两个工具的样式化、可滚动终端输出。
  • 可重用UI组件： 按钮、卡片、输入、标签、选择等，使用Radix UI和Tailwind CSS构建。
  • 现代设计： 响应式布局、自定义颜色主题和Lucide图标。
  • 安全演示： 为了安全起见，所有网络操作都在浏览器中模拟。

项目结构

├── public/
│   └── vite.svg
├── src/
│   ├── App.jsx                # Main app with tabbed interface
│   ├── main.jsx               # Entry point
│   ├── index.css              # Tailwind and custom CSS
│   ├── components/
│   │   ├── TelnetTool.jsx     # Telnet simulation tool
│   │   ├── DNSLookupTool.jsx  # DNS lookup simulation tool
│   │   ├── TerminalOutput.jsx # Styled terminal output
│   │   └── ui/                # Reusable UI components
│   └── assets/
├── styles/
│   └── globals.css            # (Optional) global styles
├── tailwind.config.js         # Tailwind theme/config
├── vite.config.js             # Vite config
├── package.json               # Project metadata & scripts
└── README.md

入门指南

  1. 安装依赖项：
    npm install
  2. 启动开发服务器：
    npm run dev
  3. 打开 http://localhost:5173 在您的浏览器中。

为生产而建

npm run build

棉绒

npm run lint

定制

  • 编辑 tailwind.config.js 主题/颜色。
  • UI组件位于 src/components/ui/ 并且可以重复使用或扩展。

备注

  • 此应用程序仅用于演示和教育目的。不执行真正的网络操作。
  • 所有网络和DNS结果都在浏览器中模拟。

反应+快速

这个模板提供了一个最小的设置，让React在Vite中使用HMR和一些ESLint规则。

目前，有两个官方插件可用：

扩展ESLint配置

如果您正在开发生产应用程序，我们建议使用启用了类型感知lint规则的TypeScript。看看 TS模板 有关如何集成TypeScript和 typescript-eslint 在你的项目中。

相关 MCP