fix: 修改需求

src/view/case/draw/board/index.js

@@ -42,8 +42,8 @@ export const create = async (store, canvas) => {
     const method = Object.fromEntries(
       Object.keys(data).map((key) => [
         `set${key.slice(0, 1).toUpperCase() + key.slice(1)}`,
-        (value) => {
-          update({ [key]: value });
+        (value, save = true) => {
+          update({ [key]: value, save });
         },
       ])
     );
@@ -57,7 +57,6 @@ export const create = async (store, canvas) => {
       },
     };
     const update = (newData) => {
-      Object.assign(shape.data, newData);
       console.log("set", newData);
       layer.uiControl.setAttributes(type, "update", { ...newData, version: 2 });
     };
@@ -157,7 +156,7 @@ export const create = async (store, canvas) => {
 
       const cctx = $canvas.getContext("2d");
       cctx.rect(0, 0, $canvas.width, $canvas.height);
-      cctx.fillStyle = 'rgba(255,255,255,1)';
+      cctx.fillStyle = "rgba(255,255,255,1)";
       cctx.fill();
       cctx.drawImage(canvas, 0, 0, $canvas.width, $canvas.height);
 

src/view/case/draw/edit-shape/compass.vue

@@ -16,8 +16,9 @@
     <el-slider
       style="width: 100px"
       :model-value="value"
-      @update:model-value="val => setRotate(val as number)"
+      @update:model-value="val => setRotate(val as number, false)"
       :min="0"
+      @change="() => setRotate(value as number, true)"
       :max="360"
     />
   </el-form-item>
@@ -30,9 +31,8 @@ import { ElSlider } from "element-plus";
 const props = defineProps<{ shape: BoardShape }>();
 const emit = defineEmits<{ (e: "blur"): void }>();
 const value = ref<number>(props.shape.data.rotate);
-
-const setRotate = (edg: number) => {
+const setRotate = (edg: number, save: boolean) => {
   value.value = edg;
-  props.shape.setRotate(edg);
+  props.shape.setRotate(edg, save);
 };
 </script>

src/view/case/draw/edit-shape/image.vue

@@ -1,9 +1,22 @@
 <template>
   <el-form-item label="旋转：">
-    <el-slider style="width: 100px" v-model="rotate" :min="0" :max="360" />
+    <el-slider
+      style="width: 100px"
+      v-model="rotate"
+      :min="0"
+      :max="360"
+      @change="shape.setRotate(rotate, true)"
+    />
   </el-form-item>
   <el-form-item label="缩放：">
-    <el-slider style="width: 100px" v-model="scale" :min="0.5" :step="0.01" :max="5" />
+    <el-slider
+      style="width: 100px"
+      v-model="scale"
+      :min="0.5"
+      :step="0.01"
+      :max="5"
+      @change="shape.setRotate(scale, true)"
+    />
   </el-form-item>
 </template>
 <script setup lang="ts">
@@ -20,9 +33,9 @@ const emit = defineEmits<{
 const rotate = ref<number>(props.shape.data.rotate);
 const scale = ref<number>(props.shape.data.scale);
 watchEffect(() => {
-  props.shape.setRotate(rotate.value);
+  props.shape.setRotate(rotate.value, false);
 });
 watchEffect(() => {
-  props.shape.setScale(scale.value);
+  props.shape.setScale(scale.value, false);
 });
 </script>