Satisfactory 蓝图编辑器文档

项目概述

这个项目是一个用于《Satisfactory》游戏的蓝图编辑器，允许玩家上传、编辑和导出游戏蓝图文件(.sbp/.sbpcfg)。编辑器提供了JSON编辑和图形化编辑两种方式，让玩家可以轻松修改蓝图的各种属性。

功能特点

1. 蓝图文件导入

• 支持拖放上传或点击上传
• 支持.sbp（主蓝图文件）和.sbpcfg（配置文件）
• 显示上传文件的基本信息

2. JSON编辑器

• 将蓝图文件解析为可编辑的JSON格式
• 支持格式化JSON
• 可刷新和更新JSON数据
• 可选择是否显示Objects段（包含大量实体数据）

3. 图形化编辑器

• 基础编辑：

  • 蓝图基本信息（名称、尺寸）
  • 配置信息（版本、图标、描述、颜色等）
  • 头部信息（版本号）
  • 物品消耗管理
  • 配方引用管理

• 进阶编辑：

  • 实体列表浏览
  • 实体位置编辑（旋转、平移、缩放）
  • 属性编辑（添加/删除/修改属性）
  • 组件编辑
  • 附属组件编辑

4. 蓝图导出

• 将编辑后的JSON导出为.sbp和.sbpcfg文件
• 显示导出状态

技术栈

• 前端框架：Vue 3

• UI库：DaisyUI (https://github.com/saadeghi/daisyui)

• 蓝图解析库：@etothepii/satisfactory-file-parser (https://github.com/etothepii4/satisfactory-file-parser)

• 图标库：Font Awesome

安装与使用

安装依赖

npm install

开发模式

npm run dev

生产构建

npm run build

SCIM 图标提取脚本

项目现在包含一套面向 satisfactory-calculator.com 的提取脚本，覆盖以下资源页：

• items
• buildings
• architecture
• structures
• tools
• vehicles
• fauna
• statues

运行下面这一条命令，就会抓取 SCIM 分类页、访问详情页、下载图标到本地，并把前端可直接使用的统一映射写到本地：

npm run scim:catalog

输出结果：

• public/data/scim/icon-lookup.json
• public/data/scim/icons/

这个映射文件就是前端直接读取的文件。

默认会覆盖以下分类：

• items
• buildings
• architecture
• structures
• tools
• vehicles
• fauna
• statues

并且在每张图片下载成功后立即增量写回映射，便于中断后继续复用已完成结果。

可选参数：

node scripts/fetch-scim-catalog.mjs --sections items,buildings,architecture --output public/data/scim/icon-lookup.partial.json

如果只想更新远程地址而不下载本地图标：

node scripts/fetch-scim-catalog.mjs --no-download

项目结构

src/
├── components
├── App.vue (主组件)
└── main.js

注意事项

1. Objects段警告：Objects段包含大量实体数据，对于大型蓝图，开启此选项可能导致性能问题。

2. 文件格式：仅支持Satisfactory U8+版本的蓝图文件。

3. 数据安全：编辑蓝图时建议备份原始文件，以防意外修改导致蓝图损坏。