CycloneDX/cyclonedx-bom-studio

# CycloneDX BOM Studio 一个用于创建和管理 [CycloneDX](https://cyclonedx.org/) 物料清单 (BOM) 的可视化编辑器。BOM Studio 允许您通过直观的基于浏览器的界面来构建、编辑、验证和导出 CycloneDX BOM —— 无需命令行工具或手动编辑 JSON。  ## 什么是 BOM？ 物料清单 是构成软件或硬件产品的所有组件、库和依赖项的结构化清单。BOM 在软件供应链安全、法规合规性和漏洞管理方面越来越受到要求。CycloneDX 是 SBOM 表示的领先开放标准之一。 ## 功能 **可视化创建和编辑 BOM** 从零开始构建 CycloneDX BOM，或打开现有的 BOM 进行编辑。CycloneDX 规范中的大多数字段都可以通过带有上下文帮助和验证的结构化表单进行访问。 **支持 CycloneDX 1.4 – 1.7** 全面支持 CycloneDX 规范的 1.4 至 1.7 版本。使用较旧格式 (1.0 – 1.5) 的 BOM 在导入时会自动升级到 1.7。特定于版本的字段会根据所选的规范版本出现或隐藏。 **组件管理** 添加和编辑所有 CycloneDX 类型的组件：application、framework、library、container、platform、device、device-driver、firmware、file、machine-learning-model、data、cryptographic-asset。每种组件类型都会显示其相关的属性编辑器。 **依赖可视化** 通过三种方式查看和编辑依赖关系：可搜索的表格、可折叠的树状图以及交互式力导向图。按组件名称过滤依赖项并在不同视图之间导航。 **实时验证** 随时根据官方 CycloneDX JSON schema 验证您的 BOM。验证错误会以内联方式显示，并提供直接导航到相关字段的功能。 **导入和导出** 打开 JSON 格式的 BOM 文件。将您的工作导出为 JSON。在集成了语法高亮功能的 CodeMirror 编辑器中直接查看和编辑原始 JSON 源代码。 **本地化** 提供 8 种语言版本：英语、法语、德语、西班牙语、简体中文、阿拉伯语、日语和俄语。阿拉伯语支持 RTL（从右到左）布局。 **完整的 BOM 编辑界面** 编辑所有顶级 BOM 部分：元数据（包括工具、作者、供应商、制造商、许可证）、组件、服务、依赖项、漏洞、组合、外部引用、注释、构想、声明和定义。 ## 开始使用 ### 前置条件 - [Node.js](https://nodejs.org/) 20 或更高版本 - npm 10 或更高版本 ### 安装依赖 ``` npm install ``` ### 开发服务器 ``` npm run dev ``` 在 `http://localhost:5173` 打开热重载开发服务器。 或者，您可以使用本地 Docker 容器来运行开发服务器。 ``` ./dev.sh ``` ### 生产构建 ``` npm run build ``` 将优化后的静态文件输出到 `dist/`。生产构建包含 Content Security Policy meta 标签。 ### 预览生产构建 ``` npm run preview ``` ### 运行测试 ``` npm run test # single run npm run test:watch # watch mode npm run test:coverage # with coverage report ``` ### 基础 URL 配置 要在子路径下部署，请设置 `BASE_URL` 环境变量： ``` BASE_URL=/my-app/ npm run build ``` ## 技术 | 类别 | 技术 | |----------|-----------| | 框架 | Vue 3 (Composition API, `