AI-Infra-Guard 前端开源完整指南：基于 React 与 Vite 的扫描界面定制教程

AI-Infra-Guard 前端开源完整指南基于 React 与 Vite 的扫描界面定制教程【免费下载链接】AI-Infra-GuardA full-stack AI Red Teaming platform securing AI ecosystems via Agent Scan, Skills Scan, MCP scan, AI Infra scan and LLM jailbreak evaluation.项目地址: https://gitcode.com/GitHub_Trending/ai/AI-Infra-GuardAI-Infra-Guard是一个覆盖 AI 生态全栈的红色团队Red Teaming安全测试平台提供 AI 基础设施扫描、MCP 服务扫描、Agent 技能扫描与大模型越狱评估等能力。它的 Web 前端基于React 18 TypeScript Vite 6构建配合 Tailwind CSS 与 shadcn/ui 组件库实现了中英双语、高完成度的可视化扫描界面。本文面向新手带你用最快的方式跑通并定制这套 AI 安全扫描平台的前端。技术栈一眼看懂层级技术选型作用框架React 18 TypeScript界面组件化开发构建Vite 6 pnpm秒级热更新的开发服务器与打包样式Tailwind CSS shadcn/ui Radix UI原子化 CSS 与无障碍组件路由react-router v6页面导航国际化react-i18next中英文 100% 覆盖依赖清单完整记录在 frontend/package.json 中你可以看到recharts图表、socket.io-client扫描进度实时推送、html2canvasjspdf报告导出等与扫描场景紧密相关的库。一键跑通前端开发环境搭建前置条件Node.js 18 与包管理器pnpm已启动的 Go 后端服务默认监听8088端口安装与启动三步走# 1. 获取代码 git clone https://gitcode.com/GitHub_Trending/ai/AI-Infra-Guard cd AI-Infra-Guard/frontend # 2. 安装依赖 pnpm install # 3. 启动开发服务器默认代理到 http://localhost:8088 pnpm dev浏览器访问http://localhost:5173即可看到扫描平台界面。如果后端不在本机可通过环境变量自定义代理地址VITE_DEV_PROXY_TARGEThttp://你的后端IP:8088 pnpm dev 这个代理逻辑写在 frontend/vite.config.ts 的server.proxy配置中/api与/llm两类请求都会被转发到后端前端代码无需处理跨域。核心目录结构定制从哪里下手frontend/ ├── src/ │ ├── components/ # 业务组件Header、TaskSidebar、ChatArea 等 │ ├── config/ # 环境常量与私有能力桥接层 │ ├── pages/ # 页面报告页、帮助文档页、LLM 代理检测页 │ ├── i18n/ # 国际化资源中英文案 │ ├── hooks/ lib/ utils/ │ ├── App.tsx # 应用入口组件 │ └── main.tsx # React 挂载与路由初始化 ├── public/aigdocs/ # 内置帮助文档Markdown 图片 ├── tailwind.config.js # 主题与样式变量 └── vite.config.ts # 构建、代理与资源拷贝配置两个值得新手优先关注的文件frontend/src/main.tsx应用挂载入口可以看到ErrorBoundary、BrowserRouter、AppShell的组装顺序frontend/src/config/privateModules.tsx项目的开源内核 私有覆盖层架构核心——开源构建中所有私有能力都是空实现no-op因此你读到的源码就是开源产品的全部能力。四步定制扫描界面第一步改主题色与品牌风格界面风格定义在 frontend/DESIGN.md 中品牌主色是靛蓝色#5D5FEF标题使用 Hanken Grotesk 字体正文使用 Inter 字体卡片采用大圆角 柔和环境阴影。要改全局主题只需修改 frontend/tailwind.config.js 中的颜色与圆角变量例如把主色换成本公司品牌色全站按钮、链接、高亮状态会同步更新。第二步改文案与中英文案所有界面文案走国际化体系资源文件位于 frontend/src/i18n/ 目录。定制步骤在语言 JSON 文件中找到对应 key修改文案支持中英文双份资源保存后 Vite 热更新即时生效无需重启。语言切换组件LanguageSwitcher与 URL 语言同步逻辑在 frontend/src/components/LanguageSwitcher.tsx可参照它新增小语种支持。第三步加页面与改布局页面级代码集中在 frontend/src/pages/现有三个页面可作模板ReportPage.tsx—— 扫描报告页图表 漏洞列表HelpDocumentPage.tsx—— 帮助文档页动态加载public/aigdocs/下的 MarkdownLLMProxyDetectPage.tsx—— LLM 代理检测页通用 UI 基础组件按钮、对话框、选项卡等位于 frontend/src/components/ui/全部基于 Radix UI shadcn/ui 封装新页面优先复用这些组件可以保持视觉一致。第四步接入自己的后端接口开发环境所有请求经 Vite 代理转发生产环境则依赖同源部署。若你的后端路径不同直接修改 frontend/vite.config.ts 中devProxyTarget的默认值即可。生产构建一个细节决定开源版内容执行pnpm build后产物输出到dist/目录。这里有个新手容易忽略的机制Vite 自定义插件会按需拷贝 public 资源——只有源码中真正引用到的图片、文档才会进入产物开源构建还默认只保留 openSource 变体的帮助文档。因此两个实用技巧新增帮助文档把 Markdown 放进frontend/public/aigdocs/并按 frontend/vite.config.ts 中的文档白名单规则命名构建时才会被打包部署子路径通过环境变量VITE_BASENAME指定 base 前缀适配挂在网关子目录下的场景。写在最后总结一下这份 AI-Infra-Guard 前端定制教程的关键路径pnpm dev起跑 → 按目录结构定位模块 → 用 Tailwind 改主题、i18n 改文案、pages 加页面 →pnpm build产出部署包。整个开源内核代码位于 frontend/src/配合 frontend/README.md 中的架构说明足够你快速完成二次开发。祝定制顺利 【免费下载链接】AI-Infra-GuardA full-stack AI Red Teaming platform securing AI ecosystems via Agent Scan, Skills Scan, MCP scan, AI Infra scan and LLM jailbreak evaluation.项目地址: https://gitcode.com/GitHub_Trending/ai/AI-Infra-Guard创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考