修复实体更新失效bug

简化代码
代码结构优化 - 将相关功能的方法分组组织提取辅助函数 - 将复杂逻辑提取为独立函数减少重复代码 - 合并相似的功能逻辑简化状态管理 - 更清晰的状态变量组织
2025-12-05 00:16:46 +08:00 · 2025-12-05 00:06:13 +08:00 · 2025-12-04 23:57:23 +08:00 · 2025-12-04 18:00:50 +08:00 · 2025-12-04 17:53:49 +08:00 · 2025-12-04 17:31:18 +08:00
6 changed files with 824 additions and 743 deletions
--- a/README.md
+++ b/README.md
@@ -1,124 +1,104 @@
-# 幸福工厂蓝图编辑器 - 项目文档
+# Satisfactory 蓝图编辑器文档

 ## 项目概述

-这是一个用于解析和编辑《幸福工厂》(Satisfactory)游戏蓝图(.sbp文件)的Web工具。用户可以上传蓝图文件，查看和修改其中的材料信息，然后下载修改后的蓝图文件。
+这个项目是一个用于《Satisfactory》游戏的蓝图编辑器，允许玩家上传、编辑和导出游戏蓝图文件(.sbp/.sbpcfg)。编辑器提供了JSON编辑和图形化编辑两种方式，让玩家可以轻松修改蓝图的各种属性。

-## 文件结构解析
+## 功能特点

-### 1. 文件头部 (32字节/64位十六进制)
-结构如下：
-```
-[4位] version - 版本号
-[4位] header_size - 头部大小(目前总是错误的)
-[4位] timestamp - 时间戳
-[4位] unknown1 - 未知字段1
-[4位] unknown2 - 未知字段2
-[4位] unknown3 - 未知字段3
-[4位] material_count - 材料数量
-[4位] reserved - 保留字段
+### 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
 ```

-### 2. 材料部分
-每个材料的结构：
+### 开发模式
+```bash
+npm run dev
 ```
-[4位] 路径长度(包括null结束符)
-[变长] 材料路径(以00结束)
-[4位] 数量
-[4位] 参数(只有最后一个材料有值)
+
+### 生产构建
+```bash
+npm run build
 ```
-材料部分以`00000000`结束
-
-### 3. 建筑部分
-每个建筑的结构：
-```
-[4位] 路径长度(包括null结束符)
-[变长] 建筑路径(以00结束)
-[4位] 参数(只有最后一个建筑有值)
-```
-建筑部分以`22222222`结束
-
-### 4. 压缩数据部分
-Zlib压缩的数据，工具不做解析
-
-## 功能说明
-
-### 主要功能
-1. **文件上传**：支持.sbp蓝图文件上传
-2. **头部信息展示**：显示蓝图文件的头部信息
-3. **材料编辑**：
-   - 查看所有材料及其属性
-   - 修改材料路径和数量
-   - 添加/删除材料
-4. **建筑信息展示**：显示建筑信息(只读)
-5. **数据下载**：将修改后的数据保存为.sbp文件
-
-### 特殊处理
-1. 材料部分的最后一个条目必须有参数值
-2. 建筑部分的最后一个条目必须有参数值
-3. 自动更新材料数量计数
-
-## 使用说明
-
-1. 点击"选择文件"按钮上传.sbp蓝图文件
-2. 在"材料资产"部分可以：
-   - 修改材料路径(需使用正确的游戏资源路径)
-   - 修改材料数量
-   - 添加新材料(点击"添加材料"按钮)
-   - 删除材料(点击材料条目右侧的删除按钮)
-3. 修改完成后点击"下载蓝图"按钮保存文件
-
-## 注意事项
-
-1. 材料路径需要正确的游戏资源路径格式，可以参考其他蓝图文件中的路径
-2. 最后一个材料的参数值必须保留，不能删除
-3. 建筑信息目前是只读的，不能修改
-4. 压缩数据部分目前不做解析，下载时会原样保存
-
-## 技术实现
-
- 前端框架：Vue.js
- UI组件库：DaisyUI
- 文件处理：使用JavaScript的FileReader和ArrayBuffer处理二进制数据
- HEX转换：自定义方法实现字符串与十六进制的相互转换

 ## 项目结构

 ```
-├── index.html
-├── src/
-│   ├── App.vue          # 主组件
-│   ├── main.js          # 入口文件
-│   └── assets/          # 静态资源
-└── README.md            # 项目说明
+src/
+├── components
+├── App.vue (主组件)
+└── main.js
 ```

-## 开发说明
+## 主要组件说明

-1. 克隆仓库：
-   ```
-   git clone https://git.liulikeji.cn/xingluo/satisfactory-BlueprintsEdit.git
-   ```
-2. 安装依赖：
-   ```
-   npm install
-   ```
-3. 运行开发服务器：
-   ```
-   npm run dev
-   ```
-4. 构建生产版本：
-   ```
-   npm run build
-   ```
+### BlueprintEditor.vue

-   
-## 未来计划
+这是应用的核心组件，包含所有蓝图编辑功能：

-1. 添加建筑配方或超频编辑功能
-2. 支持压缩数据的解析和修改
-3. 添加材料图标
+#### 状态管理
+- `uploadedFiles`: 存储上传的文件
+- `blueprintData`: 存储解析后的蓝图数据
+- `rawObjects/newObjects`: 存储蓝图中的实体对象
+- `isParsing/isExporting`: 处理状态标志

-## 贡献指南
+#### 主要方法
+- `parseBlueprint()`: 解析上传的蓝图文件
+- `exportBlueprint()`: 导出编辑后的蓝图
+- `formatJson()`: 格式化JSON显示
+- `updateDataFromJson()`: 从JSON更新数据
+
+#### 实体编辑功能
+- `selectEntity()`: 选择要编辑的实体
+- `updateEntityFromJson()`: 更新实体数据
+- `addProperty()`: 添加新属性
+- `deleteProperty()`: 删除属性
+
+## 注意事项
+
+1. **Objects段警告**：Objects段包含大量实体数据，对于大型蓝图，开启此选项可能导致性能问题。
+
+2. **文件格式**：仅支持Satisfactory U8+版本的蓝图文件。
+
+3. **数据安全**：编辑蓝图时建议备份原始文件，以防意外修改导致蓝图损坏。

-欢迎提交Pull Request或Issue报告问题。对于新功能建议，请先创建Issue讨论。
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,8 @@
        "@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"
      },
@@ -1109,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",
@@ -1310,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",
@@ -1857,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",
@@ -1908,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",
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
    "@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"
  },
--- a/src/App.vue
+++ b/src/App.vue
--- a/src/components/HelloWorld.vue
+++ b/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>
--- a/src/style.css
+++ b/src/style.css
@@ -1,2 +1,7 @@
@import "tailwindcss";
-@plugin "daisyui";
+@plugin "daisyui";
+
+/* 修复JSON编辑状态的颜色问题 */
+.text-error {
+  color: #18181B !important;
+}
Author	SHA1	Message	Date
nnwang	603bad4f94	修复实体更新失效bug	2025-12-05 00:16:46 +08:00
nnwang	a9e541fc9b	简化代码代码结构优化 - 将相关功能的方法分组组织提取辅助函数 - 将复杂逻辑提取为独立函数减少重复代码 - 合并相似的功能逻辑简化状态管理 - 更清晰的状态变量组织	2025-12-05 00:06:13 +08:00
nnwang	8904afa511	修复编辑器不同步bug	2025-12-04 23:57:23 +08:00
nnwang	febe90a2d1		2025-12-04 18:00:50 +08:00
nnwang	0ecc020c23	将附属组件的父组件名去掉	2025-12-04 17:53:49 +08:00
nnwang	fc3df13dd9	将编辑器修改位Monaco并且修复bug	2025-12-04 17:31:18 +08:00
xingluo	231349b24c	更新 README.md	2025-10-18 23:41:07 +08:00