判断了一下元素itemName

src/views/Editor/CanvasRight/Components/ElementPermission.vue

@@ -20,13 +20,11 @@
     <el-divider style="margin: 12px 0"/>
 
     <el-row>
-      <el-col :span="7" class="slider-name"
-      >元素别名：
-      </el-col
-      >
+      <el-col :span="7" class="slider-name">元素名称：
+      </el-col>
       <el-col :span="3"></el-col>
       <el-col :span="14">
-        <el-input v-model="handleElement.itemName" @change="eleChange">
+        <el-input v-model="handleElement.itemName" @change="itemNameChange">
         </el-input>
       </el-col>
     </el-row>
@@ -41,6 +39,7 @@ import {useMainStore} from "@/store";
 import * as fabric from "fabric";
 import useCanvas from "@/views/Canvas/useCanvas";
 import {CanvasElement} from "@/types/canvas";
+import {ElMessage} from "element-plus";
 
 const props = defineProps({
   eleType: {
@@ -106,6 +105,15 @@ const eleChange = () => {
   canvas.renderAll();
 }
 
+const itemNameChange = () => {
+  if (!handleElement.value) return;
+  const objects = canvas.getObjects().filter((object) => !["WorkSpaceMaskType", "WorkSpaceClipType", "WorkSpaceSafeType", "WorkSpaceClipType"].includes(object.id));
+  if (objects.findIndex((object) => (object.itemName == handleElement.value.itemName) && (object.id != handleElement.value.id)) >= 0) {
+    ElMessage.error('元素名称重复,请设置新的元素名称')
+    return
+  }
+}
+
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/CanvasRight/index.vue

@@ -80,12 +80,14 @@ import useCanvasExport from "@/hooks/useCanvasExport";
 import {updateDesignTemplate} from "@/api/template";
 import {ElMessage, FormInstance} from "element-plus";
 import {getToken} from "@/utils/js-cookie";
+import useCanvas from "@/views/Canvas/useCanvas";
 
 const templatesStore = useTemplatesStore()
 const {getJSONData} = useCanvasExport()
 
 const {t} = useI18n();
 
+
 const mainStore = useMainStore();
 const {canvasObject, rightState} = storeToRefs(mainStore);
 const exportFileDialog = ref(false)
@@ -118,6 +120,25 @@ const onSaveTemplate = () => {
     ElMessage.error('当前用户未登录,设计无法保存')
     return
   }
+  //检查一下是否每个元素都给了itemName
+  const [canvas] = useCanvas()
+  const objects = canvas.getObjects().filter((object) => !["WorkSpaceMaskType", "WorkSpaceClipType", "WorkSpaceSafeType", "WorkSpaceClipType"].includes(object.id));
+  if (objects.findIndex((object) => !object.itemName) >= 0) {
+    ElMessage.error('部分元素未设置名称,请设置元素名称后保存')
+    return
+  }
+  const groupByItemName = objects.reduce((acc, item) => {
+    if (!acc[item.itemName]) {
+      acc[item.itemName] = [];
+    }
+    acc[item.itemName].push(item);
+    return acc;
+  }, {});
+  if (Object.keys(groupByItemName).length < objects.length) {
+    ElMessage.error('部分元素名称重复,请保证各个元素名称唯一')
+    return
+  }
+
 
   formData.templateName = templatesStore.templateName
   showSaveDlg.value = true