修复实体更新失效bug

代码结构优化​ - 将相关功能的方法分组组织
提取辅助函数​ - 将复杂逻辑提取为独立函数
减少重复代码​ - 合并相似的功能逻辑
简化状态管理​ - 更清晰的状态变量组织

README.md

@@ -1,18 +1,104 @@
-#文件前32个十六进制位是头部数据，
-分别是[4位表示的version][4位表示的header_size][4位表示的timestamp][4位表示的unknown1][4位表示的unknown2][4位表示的unknown3][4位表示的material_count][4位表示的reserved]
-其中header_size不知为何总为错误的
+# Satisfactory 蓝图编辑器文档
 
-#下面为蓝图材料数据：
+## 项目概述
 
-[4位表示的路径长度(包括00结束符)] [材料路径(结束用1位的00表示)] [4位表示的数量] [4位表示的参数]
-当所有材料结束时，在末尾添加4个十六进制未表示的0代表材料部分结束
-注：[4位表示的参数] 目前具体是什么未知. 但只有蓝图的最后一个材料才会有数据其他都为0. 其数值可能和蓝图绑定不得修改，蓝图的最后一个的参数必须有数据
+这个项目是一个用于《Satisfactory》游戏的蓝图编辑器，允许玩家上传、编辑和导出游戏蓝图文件(.sbp/.sbpcfg)。编辑器提供了JSON编辑和图形化编辑两种方式，让玩家可以轻松修改蓝图的各种属性。
 
-#下面为建筑部分：
+## 功能特点
 
-[4位表示的路径长度(包括00结束符)] [建筑路径(结束用1位的00表示)] [4位表示的参数]
-当建筑部分结束时尾部添加4个十六进制未的22222222代表建筑部分结束
-注：[4位表示的参数] 目前具体是什么未知. 但只有蓝图的最后一个建筑才会有数据其他都为0. 其数值可能和蓝图绑定不得修改，蓝图的最后一个的参数必须有数据
+### 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
+
+## 安装与使用
+
+### 安装依赖
+```bash
+npm install
+```
+
+### 开发模式
+```bash
+npm run dev
+```
+
+### 生产构建
+```bash
+npm run build
+```
+
+## 项目结构
+
+```
+src/
+├── components
+├── App.vue (主组件)
+└── main.js
+```
+
+## 主要组件说明
+
+### BlueprintEditor.vue
+
+这是应用的核心组件，包含所有蓝图编辑功能：
+
+#### 状态管理
+- `uploadedFiles`: 存储上传的文件
+- `blueprintData`: 存储解析后的蓝图数据
+- `rawObjects/newObjects`: 存储蓝图中的实体对象
+- `isParsing/isExporting`: 处理状态标志
+
+#### 主要方法
+- `parseBlueprint()`: 解析上传的蓝图文件
+- `exportBlueprint()`: 导出编辑后的蓝图
+- `formatJson()`: 格式化JSON显示
+- `updateDataFromJson()`: 从JSON更新数据
+
+#### 实体编辑功能
+- `selectEntity()`: 选择要编辑的实体
+- `updateEntityFromJson()`: 更新实体数据
+- `addProperty()`: 添加新属性
+- `deleteProperty()`: 删除属性
+
+## 注意事项
+
+1. **Objects段警告**：Objects段包含大量实体数据，对于大型蓝图，开启此选项可能导致性能问题。
+
+2. **文件格式**：仅支持Satisfactory U8+版本的蓝图文件。
+
+3. **数据安全**：编辑蓝图时建议备份原始文件，以防意外修改导致蓝图损坏。
 
-#下面是压缩部分：
-此部分为Zlib压缩后数据 具体内容没分析 不做分析

package-lock.json

@@ -8,9 +8,12 @@
       "name": "web",
       "version": "0.0.0",
       "dependencies": {
+        "@etothepii/satisfactory-file-parser": "^3.1.3",
         "@tailwindcss/vite": "^4.1.14",
         "axios": "^1.12.2",
         "daisyui": "^5.3.7",
+        "monaco-editor": "^0.55.1",
+        "monaco-editor-vue3": "^1.0.4",
         "tailwindcss": "^4.1.14",
         "vue": "^3.5.22"
       },
@@ -481,6 +484,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/@etothepii/satisfactory-file-parser": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@etothepii/satisfactory-file-parser/-/satisfactory-file-parser-3.1.3.tgz",
+      "integrity": "sha512-PMSUhdzL8Qdvl7BXGdtXma5wXdKybThwCD6yaj0/YLRdoD1vjt9JP7GW2/AsHrIcXrPQcBRWieD+rRRo83Y7Aw==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^2.1.0"
+      }
+    },
     "node_modules/@isaacs/fs-minipass": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
@@ -1099,6 +1111,13 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.1.tgz",
@@ -1300,6 +1319,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
+      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -1847,6 +1875,18 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/marked": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
+      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -1898,6 +1938,26 @@
         "node": ">= 18"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.55.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
+      "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
+      "license": "MIT",
+      "dependencies": {
+        "dompurify": "3.2.7",
+        "marked": "14.0.0"
+      }
+    },
+    "node_modules/monaco-editor-vue3": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/monaco-editor-vue3/-/monaco-editor-vue3-1.0.4.tgz",
+      "integrity": "sha512-gaIMBdhUGorOAX0kBvWul9QCQ+6J+MjZgqkieDECv3rjXsRbI07XNNrnD3IBC1jnGRF9+aTZ9CNhJ8Uv06z1uw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "vue": "^3"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -1916,6 +1976,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",

package.json

@@ -9,9 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@etothepii/satisfactory-file-parser": "^3.1.3",
     "@tailwindcss/vite": "^4.1.14",
     "axios": "^1.12.2",
     "daisyui": "^5.3.7",
+    "monaco-editor": "^0.55.1",
+    "monaco-editor-vue3": "^1.0.4",
     "tailwindcss": "^4.1.14",
     "vue": "^3.5.22"
   },

src/components/HelloWorld.vue

@@ -1,43 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/style.css

@@ -1,2 +1,7 @@
 @import "tailwindcss";
-@plugin "daisyui";
+@plugin "daisyui";
+
+/* 修复JSON编辑状态的颜色问题 */
+.text-error {
+  color: #18181B !important;
+}