支持布局持久化

smsb-plus-ui/src/views/smsb/itemProgram/EditProgram.vue

@@ -95,7 +95,8 @@
           </div>
         </template>
       </div>
-      <el-button type="primary" class="save-btn" @click="handleSave">保存</el-button>
+      <el-button type="primary" class="save-btn" :loading="saveLoading" :disabled="saveLoading"
+        @click="handleSave">保存</el-button>
     </div>
 
     <!-- 右侧属性栏 -->
@@ -192,7 +193,7 @@ function getMaxDepth() {
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import { ArrowLeft } from '@element-plus/icons-vue';
-import { getItemProgram } from '@/api/smsb/source/item_program';
+import { getItemProgram, updateItemProgram } from '@/api/smsb/source/item_program';
 
 const route = useRoute();
 
@@ -248,15 +249,21 @@ onMounted(async () => {
     if (data && data.resolutionRatio) {
       resolutionRatio = data.resolutionRatio;
     }
-    // 初始化 elements
-    let parsed = json_str ? JSON.parse(json_str) : { elements: [] };
+    // 优先使用后端返回的 itemJsonStr 字段
+    let parsed = { elements: [] };
+    if (data && data.itemJsonStr) {
+      try {
+        parsed = JSON.parse(data.itemJsonStr);
+      } catch (err) {
+        // 解析失败则回退到空布局
+        parsed = { elements: [] };
+      }
+    }
     editorContent.value = parsed;
-    // 只在拿到分辨率后调用一次 ensureCanvasAndDepth
     ensureCanvasAndDepth(editorContent.value.elements, resolutionRatio);
   } catch (e) {
     // fallback: 初始化 elements 并插入默认画布
-    let parsed = json_str ? JSON.parse(json_str) : { elements: [] };
-    editorContent.value = parsed;
+    editorContent.value = { elements: [] };
     ensureCanvasAndDepth(editorContent.value.elements);
   }
 });
@@ -457,12 +464,22 @@ const canvasScale = computed(() => {
   return Math.min(boxW / cW, boxH / cH, 1);
 });
 
-// 已移除多余的 return 和重复代码，仅保留 canvasScale 的 computed 实现
-
-const handleSave = () => {
-  program.value.content = JSON.stringify(editorContent.value);
-  ElMessage.success('保存成功，内容已写入 program');
-  // 可在此处调用 API 更新 program
+const saveLoading = ref(false);
+const handleSave = async () => {
+  saveLoading.value = true;
+  try {
+    // 先获取后端原始数据，避免遗漏字段
+    const res = await getItemProgram(id.value);
+    const data = res.data || {};
+    // 用最新 JSON 覆盖
+    data.itemJsonStr = JSON.stringify(editorContent.value);
+    await updateItemProgram(data);
+    ElMessage.success('保存成功，所有数据已同步到数据库');
+  } catch (e) {
+    ElMessage.error('保存失败，请重试');
+  } finally {
+    saveLoading.value = false;
+  }
 };
 
 const goBack = () => {