diff --git a/src/App.vue b/src/App.vue
index 3a9655d..48f09b7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,187 +1,832 @@
 <template>
-  <div class="navbar bg-base-100 shadow-sm">
-    <div class="flex-none">
-      <button class="btn btn-square">
-        <a href="https://git.liulikeji.cn/xingluo/satisfactory-BlueprintsEdit" target="_blank" rel="noopener noreferrer">
-          <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 128 128"><path fill="currentColor" d="M124.742 58.378L69.625 3.264c-3.172-3.174-8.32-3.174-11.497 0L46.685 14.71l14.518 14.518c3.375-1.139 7.243-.375 9.932 2.314a9.66 9.66 0 0 1 2.293 9.993L87.42 55.529c3.385-1.167 7.292-.413 9.994 2.295c3.78 3.777 3.78 9.9 0 13.679a9.673 9.673 0 0 1-13.683 0a9.68 9.68 0 0 1-2.105-10.521L68.578 47.933l-.002 34.341a9.7 9.7 0 0 1 2.559 1.828c3.779 3.777 3.779 9.898 0 13.683c-3.779 3.777-9.904 3.777-13.679 0c-3.778-3.784-4.088-9.905-.311-13.683c.934-.933 1.855-1.638 2.855-2.11V47.333c-1-.472-1.92-1.172-2.856-2.111c-2.861-2.86-3.396-7.06-1.928-10.576L40.983 20.333L3.229 58.123c-3.175 3.177-3.155 8.325.02 11.5l55.126 55.114c3.173 3.174 8.325 3.174 11.503 0l54.86-54.858c3.175-3.176 3.178-8.327.004-11.501"/></svg>
-        </a>
-      </button>
-    </div>
-    
-    <div class="flex-1">
-      <input type="file" id="fileInput" class="file-input" @change="handleFileUpload" accept=".sbp"/>
-    </div>
-    
-    <div class="flex-none" v-if="parsedData">
-      <button class="btn btn-ghost" @click="downloadCombinedData">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-        </svg>
-        下载蓝图(.sbp)
-      </button>
-    </div>
-  </div>
-
-  <div class="container mx-auto p-4">
-    <div v-if="error" class="alert alert-error mb-4">
-      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
-      <span>{{ error }}</span>
-    </div>
-    
-    <div v-if="loading" class="flex flex-col items-center justify-center py-8">
-      <span class="loading loading-spinner loading-lg"></span>
-      <p class="mt-4">正在解析蓝图文件...</p>
-    </div>
-    
-    <div v-if="parsedData" class="space-y-4">
-      <!-- 文件头信息 -->
-      <div class="collapse collapse-arrow bg-base-200 border border-base-300 rounded-box">
-        <input type="checkbox" class="peer" checked /> 
-        <div class="collapse-title font-medium">
-          <span>文件头信息</span>
+  <div class="container mx-auto max-w-6xl p-4">
+    <div class="card bg-base-200 shadow-xl">
+      <div class="card-body">
+        <div class="text-center mb-6">
+          <h1 class="text-4xl font-bold flex items-center justify-center gap-2">
+            <i class="fas fa-cube"></i>
+            Satisfactory 蓝图编辑器
+          </h1>
+          <p class="text-lg opacity-80 mt-2">
+            将 .sbp/.sbpcfg 文件转换为可编辑的JSON格式，修改后导出回蓝图文件
+          </p>
         </div>
-        <div class="collapse-content"> 
-          <div class="overflow-x-auto">
-            <table class="table table-zebra">
-              <tbody>
-                <tr v-for="(value, key) in parsedData.header" :key="key">
-                  <th class="w-1/3">{{ key }}</th>
-                  <td>{{ value }}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-
-      <!-- 材料资产 -->
-      <div class="collapse collapse-arrow bg-base-200 border border-base-300 rounded-box">
-        <input type="checkbox" class="peer" checked /> 
-        <div class="collapse-title font-medium">
-          <span>材料资产 ({{ parsedData.materials.length }})</span>
-        </div>
-        <div class="collapse-content space-y-4"> 
-          <div v-for="(mat, index) in parsedData.materials" :key="index" class="bg-base-100 p-4 rounded-box">
-            <div class="flex gap-2 items-end">
-              <div class="form-control flex-1">
-                <label class="label">
-                  <div class="tooltip tooltip-right" data-tip="此部分表达比较抽象，如果你不知道那个资源的路径是什么，可以找一个有这个资源的蓝图文件，解析后复制过来">
-                    <span class="label-text">路径 ⓘ</span>
+        
+        <!-- 文件导入和JSON编辑器（左右排列） -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+          <!-- 左侧面板：蓝图文件导入 -->
+          <div class="card bg-base-300">
+            <div class="card-body">
+              <h2 class="card-title text-2xl flex items-center gap-2">
+                <i class="fas fa-folder-open"></i>
+                蓝图文件导入
+              </h2>
+              
+              <div class="mt-4">
+                <div 
+                  class="border-2 border-dashed border-primary rounded-xl p-8 text-center cursor-pointer hover:bg-base-100 transition-colors"
+                  @click="triggerFileInput"
+                  @dragover.prevent
+                  @drop="handleDrop"
+                >
+                  <i class="fas fa-cloud-upload-alt text-4xl text-primary mb-4"></i>
+                  <p class="text-lg mb-2">拖放蓝图文件到此处或点击上传</p>
+                  <p class="mb-4">支持单独上传 .sbp 文件</p>
+                  <button class="btn btn-primary">
+                    <i class="fas fa-file-upload mr-2"></i>
+                    选择文件
+                  </button>
+                  <input 
+                    type="file" 
+                    class="hidden" 
+                    ref="fileInput" 
+                    @change="handleFileChange" 
+                    multiple
+                    accept=".sbp,.sbpcfg"
+                  >
+                </div>
+                
+                <div v-if="uploadedFiles.length" class="mt-6 bg-base-100 rounded-xl p-4">
+                  <div class="grid grid-cols-1 gap-2">
+                    <div class="flex justify-between items-center py-2 border-b border-base-200">
+                      <span class="font-bold">蓝图名称:</span>
+                      <span>{{ blueprintName }}</span>
+                    </div>
+                    <div class="flex justify-between items-center py-2 border-b border-base-200">
+                      <span class="font-bold">主文件:</span>
+                      <span>
+                        {{ mainFileName || '未上传' }}
+                        <span v-if="mainFileName" class="badge badge-primary">.sbp</span>
+                      </span>
+                    </div>
+                    <div class="flex justify-between items-center py-2">
+                      <span class="font-bold">配置文件:</span>
+                      <span>
+                        {{ configFileName || '未上传' }}
+                        <span v-if="configFileName" class="badge badge-success">.sbpcfg</span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                
+                <div class="flex flex-wrap gap-3 mt-6">
+                  <button 
+                    class="btn btn-success flex-1"
+                    :class="{'btn-disabled': !canParse || isParsing}"
+                    @click="parseBlueprint"
+                  >
+                    <span v-if="isParsing" class="loading loading-spinner"></span>
+                    {{ isParsing ? '解析中...' : '解析为JSON' }}
+                  </button>
+                  <button 
+                    class="btn btn-error flex-1"
+                    :class="{'btn-disabled': !uploadedFiles.length}"
+                    @click="resetFiles"
+                  >
+                    <i class="fas fa-trash mr-2"></i>
+                    重置文件
+                  </button>
+                </div>
+                
+                <!-- 解析状态区域 -->
+                <div v-if="isParsing || statusMessages.length" class="mt-6 bg-base-100 rounded-xl p-4">
+                  <h3 class="font-bold text-lg mb-2">解析状态:</h3>
+                  
+                  <!-- 进度条 -->
+                  <div v-if="isParsing" class="mb-4">
+                    <div class="flex justify-between mb-1">
+                      <span class="text-sm font-medium">进度: {{ Math.round(progress) }}%</span>
+                    </div>
+                    <div class="w-full bg-gray-200 rounded-full h-2.5">
+                      <div 
+                        class="bg-primary h-2.5 rounded-full transition-all duration-300" 
+                        :style="{ width: progress + '%' }"
+                      ></div>
+                    </div>
                   </div>
                   
-                </label>
-                <input 
-                  type="text" 
-                  v-model="mat.path" 
-                  class="input input-bordered w-full"
-                  @input="updateMaterial(index, 'path', mat.path)"
-                >
-              </div>
-              <div class="form-control w-24">
-                <label class="label">
-                  <span class="label-text">数量</span>
-                </label>
-                <input 
-                  type="number" 
-                  v-model.number="mat.amount" 
-                  class="input input-bordered"
-                  @input="updateMaterial(index, 'amount', mat.amount)"
-                >
-              </div>
-              <div class="form-control w-24">
-                <label class="label">
-                  <div class="tooltip tooltip-left tooltip-warning" data-tip="此数值只蓝图的最后一个才有，且绑定不得修改。如果删除此条则最后一个材料依然需要此数值">
-                    <span class="label-text">属性 ⓘ</span>
+                  <!-- 状态消息 -->
+                  <div class="max-h-40 overflow-y-auto">
+                    <div v-for="(msg, index) in statusMessages" :key="index" class="text-sm py-1">
+                      <i class="fas fa-info-circle text-info mr-2"></i> {{ msg }}
+                    </div>
                   </div>
-                  
-                </label>
-                <input 
-                  type="text" 
-                  v-model="mat.attribute" 
-                  class="input input-bordered"
-                  @input="updateMaterial(index, 'attribute', mat.attribute)"
-                >
+                </div>
+                
+                <div v-if="error" class="alert alert-error mt-4">
+                  <i class="fas fa-exclamation-circle mr-2"></i> {{ error }}
+                </div>
               </div>
-              <button @click="removeMaterial(index)" class="btn btn-square btn-error">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
             </div>
           </div>
           
-          <button @click="addMaterial" class="btn btn-primary w-full">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-            </svg>
-            添加材料
-          </button>
-        </div>
-      </div>
-
-      <!-- 配方资产 -->
-      <div class="collapse collapse-arrow bg-base-200 border border-base-300 rounded-box">
-        <input type="checkbox" class="peer" /> 
-        <div class="collapse-title font-medium">
-          <span>配方资产 ({{ parsedData.recipes.length }})</span>
-        </div>
-        <div class="collapse-content"> 
-          <div class="overflow-x-auto">
-            <table class="table table-zebra">
-              <thead>
-                <tr>
-                  <th>路径</th>
-                  <th>属性</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="(recipe, index) in parsedData.recipes" :key="index">
-                  <td>{{ recipe.path }}</td>
-                  <td>{{ recipe.attribute }}</td>
-                </tr>
-              </tbody>
-            </table>
+          <!-- 右侧面板：JSON编辑器 -->
+          <div class="card bg-base-300">
+            <div class="card-body">
+              <h2 class="card-title text-2xl flex items-center gap-2">
+                <i class="fas fa-edit"></i>
+                JSON 编辑器
+              </h2>
+              
+              <!-- Objects段开关 -->
+              <div class="flex items-center mb-3">
+                <span class="mr-2 font-medium">显示Objects段:</span>
+                <input type="checkbox" class="toggle toggle-error" v-model="showObjects" />
+                <span class="ml-2 text-sm text-warning">
+                  <i class="fas fa-exclamation-triangle mr-1"></i> 警告：Objects段包含大量数据，大蓝图严禁开启
+                </span>
+              </div>
+              
+              <textarea 
+                class="textarea textarea-bordered w-full h-96 mt-2 font-mono"
+                v-model="displayedJson" 
+                placeholder="蓝图JSON内容将显示在这里..."
+                :disabled="!isParsed"
+              ></textarea>
+              
+              <div class="flex flex-wrap gap-3 mt-4">
+                <button 
+                  class="btn btn-warning flex-1"
+                  @click="exportBlueprint"
+                  :disabled="!isParsed"
+                >
+                  <span v-if="isExporting" class="loading loading-spinner"></span>
+                  {{ isExporting ? '导出中...' : '导出蓝图文件' }}
+                </button>
+                <button 
+                  class="btn flex-1"
+                  @click="formatJson"
+                  :disabled="!isParsed"
+                >
+                  <i class="fas fa-indent mr-2"></i>
+                  格式化JSON
+                </button>
+                <button 
+                  class="btn btn-info flex-1"
+                  @click="refreshJson"
+                  :disabled="!isParsed"
+                >
+                  <i class="fas fa-sync mr-2"></i>
+                  刷新JSON
+                </button>
+                <button 
+                  class="btn btn-success flex-1"
+                  @click="updateDataFromJson"
+                  :disabled="!isParsed"
+                >
+                  <i class="fas fa-save mr-2"></i>
+                  更新数据
+                </button>
+              </div>
+              
+              <div v-if="exportStatus" class="mt-4 bg-base-100 rounded-xl p-4">
+                <h3 class="font-bold text-lg mb-2">导出状态:</h3>
+                <div class="text-sm">
+                  <i class="fas fa-info-circle text-info mr-2"></i> {{ exportStatus }}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
+        
+        <!-- 图形化编辑器区域（下方单独区域） -->
+        <div v-if="isParsed" class="card bg-base-300">
+          <div class="card-body">
+            <h2 class="card-title text-2xl flex items-center gap-2">
+              <i class="fas fa-sliders"></i>
+              图形化编辑器
+            </h2>
+            
+            <!-- 导航栏：基础和进阶 -->
+            <div class="tabs tabs-boxed mb-4">
+              <a 
+                class="tab" 
+                :class="{'tab-active': activeVisualTab === 'basic'}" 
+                @click="activeVisualTab = 'basic'"
+              >
+                <i class="fas fa-info-circle mr-2"></i> 基础编辑
+              </a> 
+              <a 
+                class="tab" 
+                :class="{'tab-active': activeVisualTab === 'advanced'}" 
+                @click="activeVisualTab = 'advanced'"
+              >
+                <i class="fas fa-cubes mr-2"></i> 进阶编辑 (Objects)
+              </a>
+            </div>
+            
+            <!-- 基础编辑区域 -->
+            <div v-show="activeVisualTab === 'basic'">
+              <div class="bg-base-100 rounded-xl p-4 mb-4">
+                <h3 class="font-bold text-lg mb-3 flex items-center gap-2">
+                  <i class="fas fa-info-circle"></i>
+                  蓝图基本信息
+                </h3>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div class="form-control">
+                    <label class="label">
+                      <span class="label-text">蓝图名称</span>
+                    </label>
+                    <input 
+                      type="text" 
+                      class="input input-bordered" 
+                      v-model="blueprintData.name"
+                      placeholder="输入蓝图名称"
+                    >
+                  </div>
+                  
+                  <div class="form-control">
+                    <label class="label">
+                      <span class="label-text">设计尺寸</span>
+                    </label>
+                    <div class="flex gap-2">
+                      <input 
+                        type="number" 
+                        class="input input-bordered dimension-input" 
+                        v-model.number="blueprintData.header.designerDimension.x"
+                        placeholder="X"
+                      >
+                      <input 
+                        type="number" 
+                        class="input input-bordered dimension-input" 
+                        v-model.number="blueprintData.header.designerDimension.y"
+                        placeholder="Y"
+                      >
+                      <input 
+                        type="number" 
+                        class="input input-bordered dimension-input" 
+                        v-model.number="blueprintData.header.designerDimension.z"
+                        placeholder="Z"
+                      >
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="bg-base-100 rounded-xl p-4">
+                <h3 class="font-bold text-lg mb-3 flex items-center gap-2">
+                  <i class="fas fa-cog"></i>
+                  配置信息
+                </h3>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div class="form-control">
+                    <label class="label">
+                      <span class="label-text">配置版本</span>
+                    </label>
+                    <input 
+                      type="number" 
+                      class="input input-bordered" 
+                      v-model.number="blueprintData.config.configVersion"
+                      disabled
+                    >
+                  </div>
+                  
+                  <div class="form-control">
+                    <label class="label">
+                      <span class="label-text">图标ID</span>
+                    </label>
+                    <input 
+                      type="number" 
+                      class="input input-bordered" 
+                      v-model.number="blueprintData.config.iconID"
+                    >
+                  </div>
+                  
+                  <div class="form-control">
+                    <label class="label">
+                      <span class="label-text">引用的图标库</span>
+                    </label>
+                    <input 
+                      type="text" 
+                      class="input input-bordered" 
+                      v-model="blueprintData.config.referencedIconLibrary"
+                      placeholder="输入图标库路径"
+                    >
+                  </div>
+                  
+                  <div class="form-control">
+                    <label class="label">
+                      <span class="label-text">图标库类型</span>
+                    </label>
+                    <input 
+                      type="text" 
+                      class="input input-bordered" 
+                      v-model="blueprintData.config.iconLibraryType"
+                      placeholder="输入图标库类型"
+                    >
+                  </div>
+                  
+                  <div class="form-control md:col-span-2">
+                    <label class="label">
+                      <span class="label-text">描述</span>
+                    </label>
+                    <textarea 
+                      class="textarea textarea-bordered" 
+                      v-model="blueprintData.config.description"
+                      placeholder="输入蓝图描述"
+                    ></textarea>
+                  </div>
+                  
+                  <div class="form-control">
+                    <label class="label">
+                      <span class="label-text">颜色 (RGBA)</span>
+                    </label>
+                    <div class="flex items-center gap-3">
+                      <div class="flex gap-1">
+                        <input 
+                          type="number" 
+                          class="input input-bordered w-16" 
+                          v-model.number="blueprintData.config.color.r"
+                          min="0"
+                          max="1"
+                          step="0.01"
+                          placeholder="R"
+                        >
+                        <input 
+                          type="number" 
+                          class="input input-bordered w-16" 
+                          v-model.number="blueprintData.config.color.g"
+                          min="0"
+                          max="1"
+                          step="0.01"
+                          placeholder="G"
+                        >
+                        <input 
+                          type="number" 
+                          class="input input-bordered w-16" 
+                          v-model.number="blueprintData.config.color.b"
+                          min="0"
+                          max="1"
+                          step="0.01"
+                          placeholder="B"
+                        >
+                        <input 
+                          type="number" 
+                          class="input input-bordered w-16" 
+                          v-model.number="blueprintData.config.color.a"
+                          min="0"
+                          max="1"
+                          step="0.01"
+                          placeholder="A"
+                        >
+                      </div>
+                      <div 
+                        class="color-preview" 
+                        :style="{
+                          backgroundColor: `rgba(
+                            ${Math.round(blueprintData.config.color.r * 255)}, 
+                            ${Math.round(blueprintData.config.color.g * 255)}, 
+                            ${Math.round(blueprintData.config.color.b * 255)}, 
+                            ${blueprintData.config.color.a}
+                          )`
+                        }"
+                      ></div>
+                    </div>
+                  </div>
+                </div>
+                
+                <div class="mt-4">
+                  <h4 class="font-bold mb-2">最后编辑者</h4>
+                  <div class="bg-base-200 p-3 rounded-lg">
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+                      <div class="form-control">
+                        <label class="label">
+                          <span class="label-text">账户ID</span>
+                        </label>
+                        <input 
+                          type="text" 
+                          class="input input-bordered" 
+                          v-model="blueprintData.config.lastEditedBy[0].accountId"
+                          placeholder="输入账户ID"
+                        >
+                      </div>
+                      
+                      <div class="form-control">
+                        <label class="label">
+                          <span class="label-text">显示名称</span>
+                        </label>
+                        <input 
+                          type="text" 
+                          class="input input-bordered" 
+                          v-model="blueprintData.config.lastEditedBy[0].displayName"
+                          placeholder="输入显示名称"
+                        >
+                      </div>
+                      
+                      <div class="form-control">
+                        <label class="label">
+                          <span class="label-text">平台名称</span>
+                        </label>
+                        <input 
+                          type="text" 
+                          class="input input-bordered" 
+                          v-model="blueprintData.config.lastEditedBy[0].platformName"
+                          placeholder="输入平台名称"
+                        >
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="bg-base-100 rounded-xl p-4 mb-4">
+                <h3 class="font-bold text-lg mb-3 flex items-center gap-2">
+                  <i class="fas fa-heading"></i>
+                  头部信息
+                </h3>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div class="form-control">
+                    <label class="label">
+                      <span class="label-text">头部版本</span>
+                    </label>
+                    <input 
+                      type="number" 
+                      class="input input-bordered" 
+                      v-model.number="blueprintData.header.headerVersion"
+                      disabled
+                    >
+                  </div>
+                  
+                  <div class="form-control">
+                    <label class="label">
+                      <span class="label-text">保存版本</span>
+                    </label>
+                    <input 
+                      type="number" 
+                      class="input input-bordered" 
+                      v-model.number="blueprintData.header.saveVersion"
+                      disabled
+                    >
+                  </div>
+                  
+                  <div class="form-control">
+                    <label class="label">
+                      <span class="label-text">构建版本</span>
+                    </label>
+                    <input 
+                      type="number" 
+                      class="input input-bordered" 
+                      v-model.number="blueprintData.header.buildVersion"
+                      disabled
+                    >
+                  </div>
+                </div>
+              </div>
+              <div class="bg-base-100 rounded-xl p-4">
+                <div class="collapse bg-base-100 border-base-300 border">
+                  <input type="checkbox" />
+                  <div class="collapse-title font-semibold">物品消耗</div>
 
-      <!-- 高级数据 -->
-      <div class="collapse collapse-arrow bg-base-200 border border-base-300 rounded-box">
-        <input type="checkbox" class="peer" /> 
-        <div class="collapse-title font-medium">
-          <span>高级数据</span>
-        </div>
-        <div class="collapse-content space-y-4"> 
-          <div class="mockup-code">
-            <pre data-prefix=">"><code>元数据：</code></pre>
-            <pre data-prefix=">"><code>{{ parsedData.metadata_hex || '无元数据' }}</code></pre>
-          </div>
+                  <div class="collapse-content text-sm">
+                    <fieldset 
+                      v-for="(item, index) in blueprintData.header.itemCosts" 
+                      :key="index" 
+                      class="fieldset bg-base-200 border-base-300 rounded-box border p-4"
+                    >
+                    <div class="join">
+                        <input type="text"  class="input join-item flex-grow" v-model="item[0].pathName" />
+                      
+                      <input type="number" class="input join-item w-20" v-model.number="item[1]" />
+                      <button class="btn join-item btn-error "@click="removeItemCost(index)">删除</button>
+                    </div>
 
-          <div class="mockup-code">
-            <pre data-prefix=">"><code>压缩数据：</code></pre>
-            <pre data-prefix=">"><code>{{ parsedData.compressed_data_hex || '无压缩数据' }}</code></pre>
-          </div>
+                    </fieldset>
 
-          <div class="mockup-code">
-            <pre data-prefix=">"><code>原始JSON数据：</code></pre>
-            <pre><code>{{ parsedData }}</code></pre>
+                    <button 
+                      class="btn btn-primary btn-sm"
+                      @click="addItemCost"
+                    >
+                      <i class="fas fa-plus mr-1"></i> 添加物品成本
+                    </button>
+                  </div>
+                </div>
+                
+                <div class="collapse bg-base-100 border-base-300 border">
+                  <input type="checkbox" />
+                  <div class="collapse-title font-semibold">配方引用</div>
+                  
+                  <div class="collapse-content text-sm">
+
+                    <fieldset 
+                      v-for="(recipe, index) in blueprintData.header.recipeReferences" 
+                      :key="index" 
+                      class="fieldset bg-base-200 border-base-300 rounded-box border p-4"
+                    >
+
+                        <div class="join ">
+                          <input class="input join-item flex-grow"  type="text"  v-model="recipe.pathName" placeholder="输入路径名称"/>
+                          <button class="btn join-item  btn-error" @click="removeRecipe(index)">删除</button>
+                        </div>
+                    </fieldset>
+                    
+                    <button 
+                      class="btn btn-primary btn-sm"
+                      @click="addRecipe"
+                    >
+                      <i class="fas fa-plus mr-1"></i> 添加配方
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 进阶编辑区域 - 使用第一个文件的编辑器 -->
+            <div v-show="activeVisualTab === 'advanced' && showObjects">
+              <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+                <!-- 左侧实体列表 -->
+                <div class="lg:col-span-1">
+                  <div class="card bg-base-100 shadow-xl">
+                    <div class="card-body">
+                      <h2 class="card-title">实体列表</h2>
+                      <div class="overflow-y-auto max-h-[70vh]">
+                        <div 
+                          v-for="(entity, index) in filteredEntities" 
+                          :key="index"
+                          @click="selectEntity(index)"
+                          :class="['p-3 mb-2 rounded-lg cursor-pointer hover:bg-base-300 transition', 
+                                   selectedEntityIndex === index ? 'bg-primary text-primary-content' : 'bg-base-200']"
+                        >
+                          <div class="font-bold truncate">{{ entity.instanceName || '未命名实体' }}</div>
+                          <div class="text-sm opacity-75 truncate">{{ entity.typePath || '未知类型' }}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                
+                <!-- 右侧实体编辑区域 -->
+                <div class="lg:col-span-3">
+                  <div v-if="selectedEntity" class="card bg-base-100 shadow-xl">
+                    <div class="card-body">
+                      <h2 class="card-title flex items-center">
+                        <span class="truncate">{{ selectedEntity.instanceName || '未命名实体' }}</span>
+                        <span class="badge badge-primary ml-2">{{ selectedEntity.type || '未知类型' }}</span>
+                      </h2>
+                      
+                      <!-- 导航标签页 -->
+                      <div class="tabs tabs-boxed bg-base-200 mb-4">
+                        <a 
+                          v-for="tab in tabs" 
+                          :key="tab.id"
+                          @click="activeTab = tab.id"
+                          :class="['tab', activeTab === tab.id ? 'tab-active' : '']"
+                        >
+                          {{ tab.label }}
+                        </a>
+                      </div>
+                      
+                      <!-- 原始JSON标签页 -->
+                      <div v-if="activeTab === 'raw'">
+                        <h3 class="text-lg font-semibold mb-3">原始JSON数据</h3>
+                        <textarea 
+                          v-model="entityJson" 
+                          class="textarea textarea-bordered w-full h-96 font-mono"
+                        ></textarea>
+                        <div class="mt-3 flex justify-end">
+                          <button @click="updateEntityFromJson" class="btn btn-primary">更新实体</button>
+                        </div>
+                      </div>
+                      
+                      <!-- 位置标签页 -->
+                      <div v-if="activeTab === 'position' && selectedEntity.transform">
+                        <h3 class="text-lg font-semibold mb-3">位置信息</h3>
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                          <div>
+                            <h4 class="font-medium mb-2">旋转</h4>
+                            <div class="space-y-2">
+                              <div class="form-control">
+                                <label class="label">
+                                  <span class="label-text">X</span>
+                                </label>
+                                <input type="number" v-model.number="selectedEntity.transform.rotation.x" class="input input-bordered">
+                              </div>
+                              <div class="form-control">
+                                <label class="label">
+                                  <span class="label-text">Y</span>
+                                </label>
+                                <input type="number" v-model.number="selectedEntity.transform.rotation.y" class="input input-bordered">
+                              </div>
+                              <div class="form-control">
+                                <label class="label">
+                                  <span class="label-text">Z</span>
+                                </label>
+                                <input type="number" v-model.number="selectedEntity.transform.rotation.z" class="input input-bordered">
+                              </div>
+                              <div class="form-control">
+                                <label class="label">
+                                  <span class="label-text">W</span>
+                                </label>
+                                <input type="number" v-model.number="selectedEntity.transform.rotation.w" class="input input-bordered">
+                              </div>
+                            </div>
+                          </div>
+                          
+                          <div>
+                            <h4 class="font-medium mb-2">平移</h4>
+                            <div class="space-y-2">
+                              <div class="form-control">
+                                <label class="label">
+                                  <span class="label-text">X</span>
+                                </label>
+                                <input type="number" v-model.number="selectedEntity.transform.translation.x" class="input input-bordered">
+                              </div>
+                              <div class="form-control">
+                                <label class="label">
+                                  <span class="label-text">Y</span>
+                                </label>
+                                <input type="number" v-model.number="selectedEntity.transform.translation.y" class="input input-bordered">
+                              </div>
+                              <div class="form-control">
+                                <label class="label">
+                                  <span class="label-text">Z</span>
+                                </label>
+                                <input type="number" v-model.number="selectedEntity.transform.translation.z" class="input input-bordered">
+                              </div>
+                            </div>
+                          </div>
+                          
+                          <div>
+                            <h4 class="font-medium mb-2">缩放</h4>
+                            <div class="space-y-2">
+                              <div class="form-control">
+                                <label class="label">
+                                  <span class="label-text">X</span>
+                                </label>
+                                <input type="number" v-model.number="selectedEntity.transform.scale3d.x" class="input input-bordered">
+                              </div>
+                              <div class="form-control">
+                                <label class="label">
+                                  <span class="label-text">Y</span>
+                                </label>
+                                <input type="number" v-model.number="selectedEntity.transform.scale3d.y" class="input input-bordered">
+                              </div>
+                              <div class="form-control">
+                                <label class="label">
+                                  <span class="label-text">Z</span>
+                                </label>
+                                <input type="number" v-model.number="selectedEntity.transform.scale3d.z" class="input input-bordered">
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      
+                      <!-- 属性标签页 -->
+                      <div v-if="activeTab === 'properties'">
+                        <h3 class="text-lg font-semibold mb-3">属性编辑</h3>
+                        <div class="overflow-x-auto">
+                          <table class="table table-zebra">
+                            <thead>
+                              <tr>
+                                <th>名称</th>
+                                <th>类型</th>
+                                <th>值</th>
+                                <th>操作</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr v-for="(value, key) in selectedEntity.properties" :key="key">
+                                <td>
+                                  <input 
+                                    type="text" 
+                                    v-model="value.name"
+                                    class="input input-bordered input-sm"
+                                  >
+                                </td>
+                                <td>
+                                  <select v-model="value.ueType" class="select select-bordered select-sm">
+                                    <option value="FloatProperty">FloatProperty</option>
+                                    <option value="IntProperty">IntProperty</option>
+                                    <option value="ObjectProperty">ObjectProperty</option>
+                                    <option value="StructProperty">StructProperty</option>
+                                  </select>
+                                </td>
+                                <td>
+                                  <input 
+                                    v-if="value.ueType === 'FloatProperty' || value.ueType === 'IntProperty'"
+                                    type="number" 
+                                    v-model.number="value.value"
+                                    class="input input-bordered input-sm"
+                                  >
+                                  <textarea 
+                                    v-else-if="value.ueType === 'ObjectProperty' || value.ueType === 'StructProperty'"
+                                    v-model="objectProperties[key]"
+                                    class="textarea textarea-bordered textarea-sm w-full"
+                                    rows="3"
+                                  ></textarea>
+                                  <input 
+                                    v-else
+                                    type="text" 
+                                    v-model="value.value"
+                                    class="input input-bordered input-sm"
+                                  >
+                                </td>
+                                <td>
+                                  <button @click="deleteProperty(key)" class="btn btn-error btn-xs">删除</button>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        
+                        <div class="mt-4 p-4 bg-base-200 rounded-lg">
+                          <h4 class="font-medium mb-2">添加新属性</h4>
+                          <div class="grid grid-cols-1 md:grid-cols-4 gap-2">
+                            <div class="form-control">
+                              <input type="text" v-model="newProperty.name" placeholder="属性名称" class="input input-bordered">
+                            </div>
+                            <div class="form-control">
+                              <select v-model="newProperty.type" class="select select-bordered">
+                                <option value="FloatProperty">FloatProperty</option>
+                                <option value="IntProperty">IntProperty</option>
+                                <option value="ObjectProperty">ObjectProperty</option>
+                                <option value="StructProperty">StructProperty</option>
+                              </select>
+                            </div>
+                            <div class="form-control">
+                              <input 
+                                v-if="newProperty.type === 'FloatProperty' || newProperty.type === 'IntProperty'"
+                                type="number" 
+                                v-model.number="newProperty.value"
+                                placeholder="值"
+                                class="input input-bordered"
+                              >
+                              <input 
+                                v-else
+                                type="text" 
+                                v-model="newProperty.value"
+                                placeholder="值"
+                                class="input input-bordered"
+                              >
+                            </div>
+                            <div>
+                              <button @click="addProperty" class="btn btn-primary w-full">添加</button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      
+                      <!-- 组件标签页 -->
+                      <div v-if="activeTab === 'components'">
+                        <h3 class="text-lg font-semibold mb-3">组件编辑</h3>
+                        <textarea 
+                          v-model="componentsJson" 
+                          class="textarea textarea-bordered w-full h-96 font-mono"
+                        ></textarea>
+                        <div class="mt-3 flex justify-end">
+                          <button @click="updateComponents" class="btn btn-primary">更新组件</button>
+                        </div>
+                      </div>
+                      
+                      <!-- 附属组件标签页 -->
+                      <div v-if="activeTab === 'attached'">
+                        <h3 class="text-lg font-semibold mb-3">附属组件</h3>
+                        
+                        <div class="space-y-2">
+                          <div 
+                            v-for="(comp, index) in attachedComponents" 
+                            :key="index"
+                            class="collapse bg-base-200 border border-base-300 rounded-box"
+                          >
+                            <input type="checkbox" />
+                            <div class="collapse-title font-semibold">
+                              {{ comp.instanceName ? comp.instanceName.split('.').pop() : '未命名组件' }}
+                              <span class="badge badge-sm badge-neutral ml-2">{{ comp.typePath ? comp.typePath.split('/').pop() : '未知类型' }}</span>
+                            </div>
+                            <div class="collapse-content">
+                              <textarea 
+                                v-model="attachedComponentJson[index]" 
+                                class="textarea textarea-bordered w-full h-64 font-mono mb-4"
+                              ></textarea>
+                              <div class="flex justify-end">
+                                <button @click="updateAttachedComponent(index)" class="btn btn-primary">更新组件</button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  
+                  <div v-else class="card bg-base-100 shadow-xl">
+                    <div class="card-body">
+                      <div class="text-center py-10">
+                        <div class="text-2xl mb-2">👋</div>
+                        <p>请从左侧选择一个实体进行编辑</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
-
-      <!-- 合并数据 -->
-      <div class="collapse collapse-arrow bg-base-200 border border-base-300 rounded-box">
-        <input type="checkbox" class="peer" /> 
-        <div class="collapse-title font-medium">
-          <span>合并数据 ({{ combinedData ? combinedData.length/2 : 0 }}字节)</span>
-        </div>
-        <div class="collapse-content"> 
-          <div class="mockup-code">
-            <pre data-prefix=">"><code>合并后的HEX数据：</code></pre>
-            <pre><code>{{ combinedData || '无数据' }}</code></pre>
-          </div>
+        
+        <div class="text-center mt-8 text-sm opacity-70">
+          <p>使用 @etothepii/satisfactory-file-parser 库 | 支持 Satisfactory U8+ 版本</p>
         </div>
       </div>
     </div>
@@ -189,330 +834,738 @@
 </template>
 
 <script>
+import { ref, computed, watch } from 'vue';
+import { Parser } from '@etothepii/satisfactory-file-parser';
+
 export default {
-  data() {
-    return {
-      selectedFile: null,
-      parsedData: null,
-      loading: false,
-      error: null,
-      combinedData: null
+  name: 'BlueprintEditor',
+  setup() {
+    // 文件输入引用
+    const fileInput = ref(null);
+    
+    // 状态
+    const uploadedFiles = ref([]);
+    const statusMessages = ref([]);
+    const progress = ref(0);
+    const error = ref('');
+    const exportStatus = ref('');
+    const isParsing = ref(false);
+    const isExporting = ref(false);
+    const showObjects = ref(false);
+    const activeVisualTab = ref('basic');
+    const isParsed = ref(false);
+    
+    // 蓝图数据对象
+    const blueprintData = ref({
+      name: '',
+      compressionInfo: {
+        chunkHeaderVersion: 0,
+        packageFileTag: 0,
+        maxUncompressedChunkContentSize: 0,
+        compressionAlgorithm: 0
+      },
+      header: {
+        headerVersion: 0,
+        saveVersion: 0,
+        buildVersion: 0,
+        designerDimension: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        recipeReferences: [],
+        itemCosts: []
+      },
+      config: {
+        configVersion: 0,
+        description: '',
+        color: {
+          r: 0,
+          g: 0,
+          b: 0,
+          a: 1
+        },
+        iconID: 0,
+        referencedIconLibrary: '',
+        iconLibraryType: '',
+        lastEditedBy: [{
+          accountId: "",
+          displayName: "",
+          platformName: ""
+        }]
+      }
+    });
+    
+    // Objects 数据
+    const rawObjects = ref([]); // 原始读取到的Objects
+    const newObjects = ref([]); // 编辑后的Objects
+    
+    // 使用轻量级对象存储文件信息
+    const fileInfo = ref({
+      blueprintName: '',
+      mainFileName: '',
+      configFileName: ''
+    });
+    
+    // 第一个文件编辑器的状态
+    const selectedEntityIndex = ref(null);
+    const activeTab = ref('raw');
+    const newProperty = ref({
+      name: '',
+      type: 'FloatProperty',
+      value: 0
+    });
+    const tabs = ref([
+      { id: 'raw', label: '原始JSON' },
+      { id: 'position', label: '位置' },
+      { id: 'properties', label: '属性' },
+      { id: 'components', label: '组件' },
+      { id: 'attached', label: '附属组件' }
+    ]);
+    const objectProperties = ref({});
+    const attachedComponentJson = ref([]);
+    
+    // 计算属性
+    const canParse = computed(() => {
+      return fileInfo.value.mainFileName; // 只需要主文件存在
+    });
+    
+    const mainFileName = computed(() => fileInfo.value.mainFileName);
+    const configFileName = computed(() => fileInfo.value.configFileName);
+    const blueprintName = computed(() => fileInfo.value.blueprintName);
+    
+    // 第一个文件编辑器的计算属性
+    const filteredEntities = computed(() => {
+      return newObjects.value.filter(entity => 
+        entity && entity.type === 'SaveEntity'
+      );
+    });
+    
+    const selectedEntity = computed(() => {
+      if (selectedEntityIndex.value === null) return null;
+      return filteredEntities.value[selectedEntityIndex.value] || null;
+    });
+    
+    const entityJson = computed({
+      get: () => {
+        return selectedEntity.value 
+          ? JSON.stringify(selectedEntity.value, null, 2) 
+          : '';
+      },
+      set: (value) => {
+        // 将在更新按钮点击时处理
+      }
+    });
+    
+    const componentsJson = computed({
+      get: () => {
+        return selectedEntity.value && selectedEntity.value.components
+          ? JSON.stringify(selectedEntity.value.components, null, 2) 
+          : '';
+      },
+      set: (value) => {
+        // 将在更新按钮点击时处理
+      }
+    });
+    
+    const attachedComponents = computed(() => {
+      if (!selectedEntity.value) return [];
+      
+      return newObjects.value.filter(e => 
+        e && e.type === 'SaveComponent' && 
+        e.parentEntityName === selectedEntity.value.instanceName
+      );
+    });
+    
+    // 计算属性：根据开关状态决定显示的JSON内容
+    const displayedJson = computed({
+      get: () => {
+        if (!isParsed.value) return '';
+        
+        // 创建当前JSON的副本
+        const jsonObj = {
+          ...blueprintData.value,
+          // 根据showObjects决定是否包含objects
+          objects: showObjects.value ? newObjects.value : undefined
+        };
+        
+        return JSON.stringify(jsonObj, null, 2);
+      },
+      set: (value) => {
+        // 仅存储JSON字符串，不自动更新数据模型
+        // 用户需要手动点击"更新数据"按钮来应用更改
+      }
+    });
+    
+    // 方法
+    const triggerFileInput = () => {
+      fileInput.value.click();
     };
-  },
-  methods: {
-    updateMaterial(index, field, value) {
-      this.parsedData.materials[index][field] = value;
-      this.updateMaterialRawData(index);
-      this.combineData();
-    },
     
-    updateMaterialRawData(index) {
-      const mat = this.parsedData.materials[index];
-      
-      // 更新raw_path
-      mat.raw_path = this.stringToHex(mat.path) + "00";
-      
-      // 更新raw_data_hex
-      const pathHex = this.stringToHex(mat.path);
-      const pathLengthHex = this.intToHexLE(pathHex.length / 2 + 1); // +1 for null terminator
-      const amountHex = this.intToHexLE(mat.amount);
-      const attributeHex = this.intToHexLE(mat.attribute);
-      
-      mat.raw_data_hex = pathLengthHex.slice(0, 8) + pathHex + "00" + amountHex.slice(0, 8) + attributeHex.slice(0, 8);
-    },
+    const handleFileChange = (e) => {
+      const files = Array.from(e.target.files);
+      processFiles(files);
+    };
     
-    addMaterial() {
-      const newMaterial = {
-        path: "",
-        amount: 0,
-        attribute: 0,
-        raw_path: "",
-        raw_data_hex: ""
+    const handleDrop = (e) => {
+      e.preventDefault();
+      const files = Array.from(e.dataTransfer.files);
+      processFiles(files);
+    };
+    
+    const processFiles = (files) => {
+      error.value = '';
+      const validFiles = files.filter(file => 
+        file.name.endsWith('.sbp') || file.name.endsWith('.sbpcfg')
+      );
+      
+      if (validFiles.length === 0) {
+        error.value = '请上传有效的蓝图文件 (.sbp 或 .sbpcfg)';
+        return;
+      }
+      
+      // 只存储文件名，不存储文件内容
+      const sbpFile = validFiles.find(f => f.name.endsWith('.sbp'));
+      const sbpcfgFile = validFiles.find(f => f.name.endsWith('.sbpcfg'));
+      
+      fileInfo.value = {
+        blueprintName: sbpFile.name.split('.')[0],
+        mainFileName: sbpFile.name,
+        configFileName: sbpcfgFile ? sbpcfgFile.name : ''
       };
       
-      this.parsedData.materials.push(newMaterial);
-      this.updateMaterialRawData(this.parsedData.materials.length - 1);
-      this.updateHeaderCount();
-      this.combineData();
-    },
+      // 只存储文件引用，不存储内容
+      uploadedFiles.value = validFiles;
+    };
     
-    removeMaterial(index) {
-      this.parsedData.materials.splice(index, 1);
-      this.updateHeaderCount();
-      this.combineData();
-    },
+    const resetFiles = () => {
+      uploadedFiles.value = [];
+      fileInfo.value = {
+        blueprintName: '',
+        mainFileName: '',
+        configFileName: ''
+      };
+      statusMessages.value = [];
+      progress.value = 0;
+      error.value = '';
+      exportStatus.value = '';
+      isParsing.value = false;
+      isExporting.value = false;
+      showObjects.value = false;
+      activeVisualTab.value = 'basic';
+      isParsed.value = false;
+      rawObjects.value = [];
+      newObjects.value = [];
+      selectedEntityIndex.value = null;
+      activeTab.value = 'raw';
+    };
     
-    updateHeaderCount() {
-      if (!this.parsedData?.header) return;
+    const parseBlueprint = async () => {
+      if (!canParse.value || isParsing.value) return;
       
-      // 更新header中的material_count
-      this.parsedData.header.material_count = this.parsedData.materials.length;
-      
-      // 更新header_raw_hex中的material_count (位于第7个int32，偏移24字节)
-      if (this.parsedData.header_raw_hex) {
-        try {
-          const headerBytes = this.hexToBytes(this.parsedData.header_raw_hex);
-          const view = new DataView(headerBytes.buffer);
-          view.setUint32(24, this.parsedData.materials.length, true);
-          
-          this.parsedData.header_raw_hex = Array.from(new Uint8Array(headerBytes.buffer))
-            .map(b => b.toString(16).padStart(2, '0'))
-            .join('');
-        } catch (e) {
-          console.error('更新header_raw_hex失败:', e);
-          this.error = '更新文件头数据失败';
-        }
-      }
-    },
-    
-    stringToHex(str) {
-      let hex = "";
-      for (let i = 0; i < str.length; i++) {
-        hex += str.charCodeAt(i).toString(16).padStart(2, '0');
-      }
-      return hex;
-    },
-    
-    intToHexLE(num, bytes = 4) {
-      let hex = "";
-      for (let i = 0; i < bytes; i++) {
-        hex += ((num >> (i * 8)) & 0xFF).toString(16).padStart(2, '0');
-      }
-      return hex;
-    },
-    
-    hexToBytes(hexString) {
-      const cleanHex = hexString.replace(/\s/g, '');
-      
-      if (!/^[0-9a-fA-F]*$/.test(cleanHex)) {
-        throw new Error('无效的HEX字符串');
-      }
-      
-      if (cleanHex.length % 2 !== 0) {
-        throw new Error('HEX字符串长度应为偶数');
-      }
-      
-      const bytes = new Uint8Array(cleanHex.length / 2);
-      for (let i = 0; i < cleanHex.length; i += 2) {
-        bytes[i/2] = parseInt(cleanHex.substr(i, 2), 16);
-      }
-      return bytes;
-    },
-    
-    combineData() {
-      if (!this.parsedData) {
-        this.combinedData = null;
-        return '';
-      }
-      
-      let combined = '';
-      
-      // 添加header_raw_hex
-      if (this.parsedData.header_raw_hex) {
-        combined += this.parsedData.header_raw_hex;
-      }
-      
-      // 添加所有材料的raw_data_hex
-      if (this.parsedData.materials && this.parsedData.materials.length > 0) {
-        this.parsedData.materials.forEach(mat => {
-          if (mat.raw_data_hex) {
-            combined += mat.raw_data_hex;
-          }
-        });
-      }
-      combined += "00000000"; // 材料数据结束标志
-      
-      // 添加所有配方的raw_data_hex
-      if (this.parsedData.recipes && this.parsedData.recipes.length > 0) {
-        this.parsedData.recipes.forEach(recipe => {
-          if (recipe.raw_data_hex) {
-            combined += recipe.raw_data_hex;
-          }
-        });
-      }
-      combined += "22222222"; // 配方数据结束标志
-      
-      // 添加压缩数据
-      if (this.parsedData.compressed_data_hex) {
-        combined += this.parsedData.compressed_data_hex;
-      }
-      
-      this.combinedData = combined;
-      return combined;
-    },
-    
-    downloadCombinedData() {
       try {
-        const data = this.combinedData || this.combineData();
-        if (!data) {
-          this.error = '没有可下载的数据';
-          return;
+        // 重置状态
+        isParsing.value = true;
+        statusMessages.value = [];
+        progress.value = 0;
+        error.value = '';
+        selectedEntityIndex.value = null;
+        activeTab.value = 'raw';
+        rawObjects.value = [];
+        newObjects.value = [];
+        
+        // 获取主文件
+        const sbpFile = uploadedFiles.value.find(f => f.name.endsWith('.sbp'));
+        const sbpcfgFile = uploadedFiles.value.find(f => f.name.endsWith('.sbpcfg'));
+        
+        // 读取文件为ArrayBuffer
+        const readFileAsArrayBuffer = (file) => {
+          return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = reject;
+            reader.readAsArrayBuffer(file);
+          });
+        };
+        
+        const sbpBuffer = await readFileAsArrayBuffer(sbpFile);
+        let sbpcfgBuffer = null;
+        
+        if (sbpcfgFile) {
+          sbpcfgBuffer = await readFileAsArrayBuffer(sbpcfgFile);
+          statusMessages.value.push('检测到配置文件，将一起解析...');
+        } else {
+          statusMessages.value.push('未检测到配置文件，将仅解析主文件...');
         }
         
-        const bytes = this.hexToBytes(data);
-        const blob = new Blob([bytes], { type: 'application/octet-stream' });
-        const url = URL.createObjectURL(blob);
+        // 更新状态
+        statusMessages.value.push('开始解析蓝图文件...');
         
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'blueprint.sbp';
-        document.body.appendChild(a);
-        a.click();
+        // 解析蓝图
+        const blueprint = await Parser.ParseBlueprintFiles(
+          fileInfo.value.blueprintName,
+          sbpBuffer,
+          sbpcfgBuffer,
+          {
+            onProgressCallback: (p, msg) => {
+              progress.value = p * 100;
+              statusMessages.value.push(`进度: ${Math.round(p * 100)}% - ${msg}`);
+            }
+          }
+        );
         
+        // 存储原始objects数据
+        rawObjects.value = blueprint.objects || [];
+        
+        // 初始化newObjects为rawObjects的副本
+        newObjects.value = JSON.parse(JSON.stringify(rawObjects.value));
+        
+        // 提取蓝图数据
+        blueprintData.value = {
+          name: blueprint.name || '',
+          compressionInfo: {
+            chunkHeaderVersion: blueprint.compressionInfo?.chunkHeaderVersion || 0,
+            packageFileTag: blueprint.compressionInfo?.packageFileTag || 0,
+            maxUncompressedChunkContentSize: blueprint.compressionInfo?.maxUncompressedChunkContentSize || 0,
+            compressionAlgorithm: blueprint.compressionInfo?.compressionAlgorithm || 0
+          },
+          header: {
+            headerVersion: blueprint.header?.headerVersion || 0,
+            saveVersion: blueprint.header?.saveVersion || 0,
+            buildVersion: blueprint.header?.buildVersion || 0,
+            designerDimension: {
+              x: blueprint.header?.designerDimension?.x || 0,
+              y: blueprint.header?.designerDimension?.y || 0,
+              z: blueprint.header?.designerDimension?.z || 0
+            },
+            recipeReferences: blueprint.header?.recipeReferences || [],
+            itemCosts: blueprint.header?.itemCosts || []
+          },
+          config: {
+            configVersion: blueprint.config?.configVersion || 0,
+            description: blueprint.config?.description || '',
+            color: {
+              r: blueprint.config?.color?.r || 0,
+              g: blueprint.config?.color?.g || 0,
+              b: blueprint.config?.color?.b || 0,
+              a: blueprint.config?.color?.a || 1
+            },
+            iconID: blueprint.config?.iconID || 0,
+            referencedIconLibrary: blueprint.config?.referencedIconLibrary || '',
+            iconLibraryType: blueprint.config?.iconLibraryType || '',
+            lastEditedBy: blueprint.config?.lastEditedBy || [{ 
+              accountId: "",
+              displayName: "",
+              platformName: ""
+            }]
+          }
+        };
+        
+        statusMessages.value.push('蓝图文件解析完成！');
+        isParsed.value = true;
+        progress.value = 100;
+        
+      } catch (err) {
+        console.error('解析错误:', err);
+        error.value = `解析错误: ${err.message}`;
+        statusMessages.value.push('解析失败！');
+      } finally {
         setTimeout(() => {
+          isParsing.value = false;
+        }, 1000);
+      }
+    };
+    
+    const exportBlueprint = async () => {
+      if (!isParsed.value || isExporting.value) return;
+      
+      try {
+        isExporting.value = true;
+        exportStatus.value = '开始导出蓝图文件...';
+        
+        // 创建当前JSON对象
+        const currentJson = {
+          ...blueprintData.value,
+          // 根据showObjects状态决定使用哪个objects数据
+          objects: showObjects.value ? newObjects.value : rawObjects.value
+        };
+        
+        // 准备导出变量
+        let mainFileHeader = null;
+        const mainFileBodyChunks = [];
+        
+        // 导出蓝图
+        const summary = await Parser.WriteBlueprintFiles(
+          currentJson,
+          header => {
+            mainFileHeader = header;
+          },
+          chunk => {
+            mainFileBodyChunks.push(chunk);
+          }
+        );
+        
+        // 组合主文件
+        const mainFileData = new Uint8Array([
+          ...mainFileHeader,
+          ...mainFileBodyChunks.flatMap(chunk => [...chunk])
+        ]);
+        
+        // 创建下载链接
+        const downloadFile = (data, filename, type) => {
+          const blob = new Blob([data], { type });
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = filename;
+          document.body.appendChild(a);
+          a.click();
           document.body.removeChild(a);
           URL.revokeObjectURL(url);
-        }, 100);
-      } catch (error) {
-        this.error = '下载失败: ' + error.message;
-        console.error('下载错误:', error);
-      }
-    },
-    
-    handleFileUpload(event) {
-      this.selectedFile = event.target.files[0];
-      this.parsedData = null;
-      this.combinedData = null;
-      this.error = null;
-      
-      if (this.selectedFile) {
-        this.parseBlueprint();
-      }
-    },
-    
-    async parseBlueprint() {
-      if (!this.selectedFile) return;
-      
-      this.loading = true;
-      this.error = null;
-      this.parsedData = null;
-      this.combinedData = null;
-      
-      try {
-        const arrayBuffer = await this.readFileAsArrayBuffer(this.selectedFile);
-        this.parsedData = this.parseBinaryData(arrayBuffer);
-        this.combineData();
-      } catch (error) {
-        console.error(error);
-        this.error = '解析蓝图文件时出错: ' + error.message;
+        };
+        
+        // 下载文件
+        downloadFile(mainFileData, `${blueprintName.value}.sbp`, 'application/octet-stream');
+        downloadFile(summary.configFileBinary, `${blueprintName.value}.sbpcfg`, 'application/octet-stream');
+        
+        exportStatus.value = '蓝图文件导出成功！';
+        
+      } catch (err) {
+        console.error('导出错误:', err);
+        exportStatus.value = `导出错误: ${err.message}`;
       } finally {
-        this.loading = false;
+        isExporting.value = false;
       }
-    },
+    };
     
-    readFileAsArrayBuffer(file) {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(reader.result);
-        reader.onerror = reject;
-        reader.readAsArrayBuffer(file);
-      });
-    },
+    const formatJson = () => {
+      try {
+        const obj = JSON.parse(displayedJson.value);
+        displayedJson.value = JSON.stringify(obj, null, 2);
+      } catch (e) {
+        error.value = 'JSON格式错误，无法格式化';
+      }
+    };
     
-    parseBinaryData(arrayBuffer) {
-      const view = new DataView(arrayBuffer);
-      let offset = 0;
-      
-      // 1. 解析头部 (32字节)
-      const header = {
-        version: view.getUint32(offset, true),
-        header_size: view.getUint32(offset + 4, true),
-        timestamp: view.getUint32(offset + 8, true),
-        unknown1: view.getUint32(offset + 12, true),
-        unknown2: view.getUint32(offset + 16, true),
-        unknown3: view.getUint32(offset + 20, true),
-        material_count: view.getUint32(offset + 24, true),
-        reserved: view.getUint32(offset + 28, true)
+    // 刷新JSON显示
+    const refreshJson = () => {
+      // 创建一个新的JSON对象，根据showObjects状态决定是否包含objects
+      const jsonObj = {
+        ...blueprintData.value,
+        objects: showObjects.value ? newObjects.value : undefined
       };
-      offset += 32;
       
-      // 保存原始头部数据
-      const headerBytes = new Uint8Array(arrayBuffer.slice(0, 32));
-      const header_raw_hex = Array.from(headerBytes).map(b => b.toString(16).padStart(2, '0')).join('');
-      
-      // 2. 解析材料部分
-      const materials = [];
-      for (let i = 0; i < header.material_count; i++) {
-        const pathLength = view.getUint32(offset, true);
-        offset += 4;
+      displayedJson.value = JSON.stringify(jsonObj, null, 2);
+    };
+    
+    // 从JSON更新数据
+    const updateDataFromJson = () => {
+      try {
+        const editedObj = JSON.parse(displayedJson.value);
         
-        // 读取路径字符串
-        const pathBytes = new Uint8Array(arrayBuffer.slice(offset, offset + pathLength - 1));
-        const path = new TextDecoder().decode(pathBytes);
-        offset += pathLength;
-        
-        const amount = view.getUint32(offset, true);
-        const attribute = view.getUint32(offset + 4, true);
-        offset += 8;
-        
-        // 生成原始数据HEX表示
-        const pathHex = Array.from(pathBytes).map(b => b.toString(16).padStart(2, '0')).join('');
-        const pathLengthHex = this.intToHexLE(pathLength, 4);
-        const amountHex = this.intToHexLE(amount, 4);
-        const attributeHex = this.intToHexLE(attribute, 4);
-        
-        materials.push({
-          path,
-          amount,
-          attribute,
-          raw_path: pathHex + "00",
-          raw_data_hex: pathLengthHex + pathHex + "00" + amountHex + attributeHex
-        });
-      }
-      
-      // 检查材料部分结束标记 (4字节0)
-      const materialEnd = view.getUint32(offset, true);
-      offset += 4;
-      
-      // 3. 解析建筑部分
-      const recipes = [];
-      while (true) {
-        // 检查是否到达建筑部分结束标记
-        if (view.getUint32(offset, true) === 0x22222222) {
-          offset += 4;
-          break;
+        // 更新blueprintData（除了objects）
+        for (const key in editedObj) {
+          if (key !== 'objects') {
+            blueprintData.value[key] = editedObj[key];
+          }
         }
         
-        const pathLength = view.getUint32(offset, true);
-        offset += 4;
+        // 如果JSON中包含objects字段，则更新newObjects
+        if (editedObj.objects) {
+          newObjects.value = editedObj.objects;
+        }
         
-        // 读取路径字符串
-        const pathBytes = new Uint8Array(arrayBuffer.slice(offset, offset + pathLength - 1));
-        const path = new TextDecoder().decode(pathBytes);
-        offset += pathLength;
+        statusMessages.value.push('数据已从JSON更新！');
+      } catch (e) {
+        console.error('JSON更新错误:', e);
+        error.value = '更新数据失败：JSON解析错误';
+      }
+    };
+    
+    // 第一个文件编辑器的方法
+    const selectEntity = (index) => {
+      selectedEntityIndex.value = index;
+      activeTab.value = 'raw';
+      initObjectProperties();
+      initAttachedComponentJson();
+    };
+    
+    const updateEntityFromJson = () => {
+      try {
+        const updatedEntity = JSON.parse(entityJson.value);
+        // 找到实体在原始数组中的位置
+        const originalIndex = newObjects.value.findIndex(
+          e => e.instanceName === selectedEntity.value.instanceName
+        );
         
-        const attribute = view.getUint32(offset, true);
-        offset += 4;
+        if (originalIndex !== -1) {
+          newObjects.value[originalIndex] = updatedEntity;
+          initObjectProperties();
+        }
+      } catch (error) {
+        alert('更新实体错误: ' + error.message);
+      }
+    };
+    
+    const updateComponents = () => {
+      try {
+        const updatedComponents = JSON.parse(componentsJson.value);
+        if (selectedEntity.value) {
+          selectedEntity.value.components = updatedComponents;
+        }
+      } catch (error) {
+        alert('更新组件错误: ' + error.message);
+      }
+    };
+    
+    const updateAttachedComponent = (index) => {
+      try {
+        const updatedComponent = JSON.parse(attachedComponentJson.value[index]);
+        const compIndex = newObjects.value.findIndex(e => 
+          e && e.instanceName === attachedComponents.value[index].instanceName
+        );
         
-        // 生成原始数据HEX表示
-        const pathHex = Array.from(pathBytes).map(b => b.toString(16).padStart(2, '0')).join('');
-        const pathLengthHex = this.intToHexLE(pathLength, 4);
-        const attributeHex = this.intToHexLE(attribute, 4);
-        
-        recipes.push({
-          path,
-          attribute,
-          raw_data_hex: pathLengthHex + pathHex + "00" + attributeHex
-        });
+        if (compIndex !== -1) {
+          newObjects.value[compIndex] = updatedComponent;
+          attachedComponentJson.value[index] = JSON.stringify(updatedComponent, null, 2);
+        }
+      } catch (error) {
+        alert('更新附属组件错误: ' + error.message);
+      }
+    };
+    
+    const deleteProperty = (key) => {
+      if (selectedEntity.value && selectedEntity.value.properties && selectedEntity.value.properties[key]) {
+        delete selectedEntity.value.properties[key];
+        delete objectProperties.value[key];
+      }
+    };
+    
+    const addProperty = () => {
+      if (!newProperty.value.name || !selectedEntity.value) return;
+      
+      // 处理ObjectProperty类型
+      let value = newProperty.value.value;
+      if (newProperty.value.type === 'ObjectProperty') {
+        try {
+          value = JSON.parse(newProperty.value.value);
+        } catch (e) {
+          value = { levelName: "", pathName: "" };
+        }
       }
       
-      // 4. 读取压缩数据
-      const compressedData = new Uint8Array(arrayBuffer.slice(offset));
-      const compressed_data_hex = Array.from(compressedData).map(b => b.toString(16).padStart(2, '0')).join('');
+      // 确保properties对象存在
+      if (!selectedEntity.value.properties) {
+        selectedEntity.value.properties = {};
+      }
       
-      return {
-        header,
-        header_raw_hex,
-        materials,
-        recipes,
-        compressed_data_hex,
-        compressed_data_size: compressedData.length
+      selectedEntity.value.properties[newProperty.value.name] = {
+        type: newProperty.value.type,
+        ueType: newProperty.value.type,
+        name: newProperty.value.name,
+        value: value
       };
-    }
+      
+      // 初始化新属性的JSON字符串
+      if (newProperty.value.type === 'ObjectProperty' || newProperty.value.type === 'StructProperty') {
+        objectProperties.value[newProperty.value.name] = JSON.stringify(value, null, 2);
+      }
+      
+      // 重置表单
+      newProperty.value = {
+        name: '',
+        type: 'FloatProperty',
+        value: 0
+      };
+    };
+    
+    const initObjectProperties = () => {
+      if (!selectedEntity.value || !selectedEntity.value.properties) return;
+      
+      objectProperties.value = {};
+      for (const key in selectedEntity.value.properties) {
+        const prop = selectedEntity.value.properties[key];
+        if (prop.ueType === 'ObjectProperty' || prop.ueType === 'StructProperty') {
+          objectProperties.value[key] = JSON.stringify(prop.value, null, 2);
+        }
+      }
+    };
+    
+    const initAttachedComponentJson = () => {
+      attachedComponentJson.value = [];
+      attachedComponents.value.forEach(comp => {
+        attachedComponentJson.value.push(JSON.stringify(comp, null, 2));
+      });
+    };
+    
+    // 图形化编辑器方法
+    const addRecipe = () => {
+      blueprintData.value.header.recipeReferences.push({
+        pathName: ""
+      });
+    };
+    
+    const removeRecipe = (index) => {
+      blueprintData.value.header.recipeReferences.splice(index, 1);
+    };
+    
+    const addItemCost = () => {
+      blueprintData.value.header.itemCosts.push([
+        { pathName: "" },
+        0
+      ]);
+    };
+    
+    const removeItemCost = (index) => {
+      blueprintData.value.header.itemCosts.splice(index, 1);
+    };
+    
+    // 监听newObjects变化
+    watch(newObjects, () => {
+      // 当newObjects变化时，刷新附属组件
+      if (selectedEntity.value) {
+        initAttachedComponentJson();
+      }
+    }, { deep: true });
+    
+    return {
+      // 文件操作相关
+      fileInput,
+      uploadedFiles,
+      blueprintName,
+      displayedJson,
+      statusMessages,
+      progress,
+      error,
+      exportStatus,
+      isParsing,
+      isExporting,
+      showObjects,
+      activeVisualTab,
+      blueprintData,
+      canParse,
+      mainFileName,
+      configFileName,
+      isParsed,
+      
+      // 第一个文件编辑器相关
+      filteredEntities,
+      selectedEntityIndex,
+      activeTab,
+      newProperty,
+      tabs,
+      objectProperties,
+      attachedComponentJson,
+      selectedEntity,
+      entityJson,
+      componentsJson,
+      attachedComponents,
+      
+      // 方法
+      triggerFileInput,
+      handleFileChange,
+      handleDrop,
+      resetFiles,
+      parseBlueprint,
+      exportBlueprint,
+      formatJson,
+      refreshJson,
+      updateDataFromJson,
+      addRecipe,
+      removeRecipe,
+      addItemCost,
+      removeItemCost,
+      
+      // 第一个文件编辑器方法
+      selectEntity,
+      updateEntityFromJson,
+      updateComponents,
+      updateAttachedComponent,
+      deleteProperty,
+      addProperty
+    };
   }
-};
+}
 </script>
 
 <style scoped>
-/* 使用 DaisyUI 的类，无需额外样式 */
+.container {
+  min-height: 100vh;
+}
+
+.card-title {
+  margin-bottom: 1rem;
+}
+
+.progress {
+  transition: width 0.3s ease;
+}
+
+.json-editor {
+  min-height: 400px;
+  font-family: 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.alert {
+  margin-top: 1rem;
+}
+
+.badge {
+  margin-left: 0.5rem;
+}
+
+.large-file-warning {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4); }
+  70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
+}
+
+.dimension-input {
+  width: 80px;
+}
+
+.color-preview {
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+}
+
+.recipe-item {
+  border-radius: 4px;
+  padding: 8px;
+  margin-bottom: 8px;
+}
+
+.item-cost {
+  border-radius: 4px;
+  padding: 8px;
+  margin-bottom: 8px;
+}
+
+.editor-tabs .tab {
+  padding: 12px 20px;
+}
+
+.tab[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.object-list-item {
+  transition: all 0.2s;
+}
+
+.object-list-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
 </style>
\ No newline at end of file