魔墙：修复滑动条及输入控件随键盘而改变；加中心坐标变为3840*2160；修改主界面的魔墙颜色；

src/components/ControlPanelDialog.vue

@@ -73,7 +73,7 @@
       }
     "
   >
-    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
+    <q-card class="overflow-hidden" style="max-width: 60vw">
       <q-form @submit="onSubmit">
         <q-card-section class="q-ma-none q-pa-sm">
           <div class="row">
@@ -102,7 +102,8 @@
 
         <q-separator />
 
-        <q-card-section style="max-height: 80vh; width: 55vw" class="scroll">
+        <q-card-section style="max-height: 80vh; width: 55vw" class="q-pa-none">
+          <q-scroll-area style="height: 70vh">
             <q-card class="my-card" flat bordered>
               <q-card-section horizontal>
                 <q-card-section class="col-3" style="">
@@ -122,6 +123,7 @@
                           type="number"
                           min="0"
                           v-model="test_monitor_wall[current_index].angle"
+                          @keydown="testLog($event)"
                           oninput="if(value<0)value=0;if(value>360)value=360;"
                           hint=""
                           @update:model-value="changeAngle()"
@@ -146,7 +148,9 @@
                     </q-item>
                   </div>
                   <br />
-                <div class="text-h5">{{ $t("physical central location") }}</div>
+                  <div class="text-h5">
+                    {{ $t("physical central location") }}
+                  </div>
                   <q-separator />
                   <br />
                   <div class="row no-wrap items-center">
@@ -161,6 +165,7 @@
                           :min="min_x()"
                           v-model="test_monitor_wall[current_index].centerx"
                           @update:model-value="center_x()"
+                          @keydown="testLog($event)"
                           :max="max_x()"
                           :rules="[
                             (val) =>
@@ -210,6 +215,7 @@
                           :max="max_y()"
                           v-model="test_monitor_wall[current_index].centery"
                           @update:model-value="center_y()"
+                          @keydown="testLog($event)"
                           :rules="[
                             (val) =>
                               (val != null &&
@@ -249,7 +255,12 @@
                   @dragleave="onDragLeave"
                   @dragover="onDragOver"
                   @drop="onDrop"
-                style="max-height: 80vh; width: 55vw; position: relative"
+                  style="
+                    max-height: 80vh;
+                    width: 75%;
+                    position: relative;
+                    margin-top: 1.5vh; ;
+                  "
                 >
                   <div class="text-h6 row">
                     <div for="" class="col-2">{{ $t("resize") }}</div>
@@ -258,6 +269,7 @@
                       style="font-size: 0.7rem"
                       v-model="percenter"
                       @update:model-value="changePercenter()"
+                      @keydown.prevent.stop.capture="testLog($event)"
                       label
                       :label-value="percenter"
                       markers
@@ -334,7 +346,9 @@
                           <q-popup-proxy context-menu>
                             <q-list>
                               <q-item clickable v-close-popup>
-                              <q-item-section @click="closeWindow(item, index)">
+                                <q-item-section
+                                  @click="closeWindow(item, index)"
+                                >
                                   {{ $t("close this window") }}
                                 </q-item-section>
                               </q-item>
@@ -473,7 +487,9 @@
                       :style="{ lineHeight: box_line_height(item, j) }"
                     >
                       <div
-                      v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide"
+                        v-if="
+                          test_monitor_list[(item - 1) * 4 + (j - 1)].isHide
+                        "
                       ></div>
                       <div
                         v-else
@@ -523,7 +539,9 @@
                       :style="{ lineHeight: box_line_height(item, j) }"
                     >
                       <div
-                      v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide"
+                        v-if="
+                          test_monitor_list[(item - 1) * 4 + (j - 1)].isHide
+                        "
                       ></div>
                       <!-- :class="monitor_list_current_index==(item - 1) * 4 + (j - 1)?'list_select':''" -->
                       <div
@@ -568,6 +586,7 @@
             </q-card>
 
             <q-separator />
+          </q-scroll-area>
         </q-card-section>
         <q-separator />
         <q-card-actions>
@@ -910,6 +929,7 @@ export default defineComponent({
           getpx();
         }
       }
+
       const cloud_monitor_list = new MagicWallConfig();
       const wall_dom = wall.value;
       if (wall_dom && settings) {
@@ -949,8 +969,8 @@ export default defineComponent({
                 h: element.h / wall_dom.offsetHeight,
                 w: element.w / wall_dom.offsetWidth,
                 angle: parseInt(element.angle.toString()),
-                centerx: element.centerx / wall_dom.offsetWidth,
+      centerx: element.centerx / 3840,
-                centery: element.centery / wall_dom.offsetHeight,
+                  centery: element.centery / 2160,
               });
             }
           });
@@ -1012,39 +1032,43 @@ export default defineComponent({
       return { x, y };
     };
     const four_point = (item: test_monitor) => {
-      item.centerx = parseInt(item.centerx.toString());
+      const wall_dom = wall.value;
-      item.centery = parseInt(item.centery.toString());
+      let centerx: any, centery: any;
+      if (wall_dom) {
+        centerx = (item.centerx / 3840) * wall_dom.offsetWidth;
+        centery = (item.centery / 2160) * wall_dom.offsetHeight;
+      }
+      centerx = Math.round(centerx);
+      centery = Math.round(centery);
+      // item.centerx = Math.round((item.centerx));
+      // item.centery = Math.round(item.centery);
       const x2: number = item.currentx + item.w;
       const y2: number = item.currenty + item.h;
+      const x1: number = centerx;
+      const y1: number = centery;
       if (item.angle != 0) {
         const point_left_top = calculateCoordinates(
           item.currentx,
           item.currenty,
-          item.centerx,
+          x1,
-          item.centery,
+          y1,
           item
         );
         const point_left_bootom = calculateCoordinates(
           item.currentx,
           y2,
-          item.centerx,
+          x1,
-          item.centery,
+          y1,
           item
         );
         const point_right_top = calculateCoordinates(
           x2,
           item.currenty,
-          item.centerx,
+          x1,
-          item.centery,
+          y1,
-          item
-        );
-        const point_right_bottom = calculateCoordinates(
-          x2,
-          y2,
-          item.centerx,
-          item.centery,
           item
         );
+        const point_right_bottom = calculateCoordinates(x2, y2, x1, y1, item);
         const point_list = [
           point_left_top,
           point_left_bootom,
@@ -1095,12 +1119,16 @@ export default defineComponent({
             }
           });
           if (minx < 0) {
-            return Math.floor(item.w / 2 + item.currentx + Math.abs(minx));
+            return Math.round(
+              ((item.w / 2 + item.currentx + Math.abs(minx)) /
+                wall_dom.offsetWidth) *
+                3840
+            );
           } else {
-            return Math.floor(minx);
+            return Math.round((minx / wall_dom.offsetWidth) * 3840);
           }
         } else {
-          return Math.floor(item.w / 2);
+          return Math.round((item.w / 2 / wall_dom.offsetWidth) * 3840);
         }
       }
     };
@@ -1118,16 +1146,22 @@ export default defineComponent({
             }
           });
           if (maxx > wall_dom.offsetWidth) {
-            return Math.floor(
+            return Math.round(
-              item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)
+              ((item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)) /
+                wall_dom.offsetWidth) *
+                3840
             );
           } else {
-            return Math.floor(
+            return Math.round(
-              item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)
+              ((item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)) /
+                wall_dom.offsetWidth) *
+                3840
             );
           }
         } else {
-          return Math.floor(wall_dom.offsetWidth - item.w / 2);
+          return Math.round(
+            ((wall_dom.offsetWidth - item.w / 2) / wall_dom.offsetWidth) * 3840
+          );
         }
       }
     };
@@ -1159,12 +1193,16 @@ export default defineComponent({
             }
           });
           if (miny < 0) {
-            return Math.floor(item.h / 2 + item.currenty + Math.abs(miny));
+            return Math.round(
+              ((item.h / 2 + item.currenty + Math.abs(miny)) /
+                wall_dom.offsetHeight) *
+                2160
+            );
           } else {
-            return Math.floor(miny);
+            return Math.round((miny / wall_dom.offsetHeight) * 2160);
           }
         } else {
-          return Math.floor(item.h / 2);
+          return Math.round((item.h / 2 / wall_dom.offsetHeight) * 2160);
         }
       }
     };
@@ -1182,16 +1220,23 @@ export default defineComponent({
             }
           });
           if (maxy > wall_dom.offsetHeight) {
-            return Math.floor(
+            return Math.round(
-              item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)
+              ((item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)) /
+                wall_dom.offsetHeight) *
+                2160
             );
           } else {
-            return Math.floor(
+            return Math.round(
-              item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)
+              ((item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)) /
+                wall_dom.offsetHeight) *
+                2160
             );
           }
         } else {
-          return Math.floor(wall_dom.offsetHeight - item.h / 2);
+          return Math.round(
+            ((wall_dom.offsetHeight - item.h / 2) / wall_dom.offsetHeight) *
+              2160
+          );
         }
       }
     };
@@ -1211,12 +1256,17 @@ export default defineComponent({
       if (wall_dom) {
         item.h = item.InitialH * percenter.value;
         item.w = item.InitialW * percenter.value;
-      }
         item.active = true;
         item.currentx = rect.left;
         item.currenty = rect.top;
-      item.centerx = Math.floor(item.currentx + item.w / 2);
+        item.centerx = Math.round(
-      item.centery = Math.floor(item.currenty + item.h / 2);
+          ((item.currentx + item.w / 2) / wall_dom?.offsetWidth) * 3840
+        );
+        item.centery = Math.round(
+          ((item.currenty + item.h / 2) / wall_dom?.offsetHeight) * 2160
+        );
+      }
+
       if (Number.isNaN(rect.left || rect.left < 0)) {
         item.currentx = 0;
       }
@@ -1227,7 +1277,7 @@ export default defineComponent({
       const wall_dom = wall.value;
       if (item.angle != 0) {
         exceedrange(item);
-      } else {
+      } else if (wall_dom) {
         if (rect.left < 0) {
           item.currentx = 0;
         } else if (wall_dom && rect.left > wall_dom.offsetWidth - item.w) {
@@ -1242,8 +1292,12 @@ export default defineComponent({
         } else {
           item.currenty = rect.top;
         }
-        item.centerx = Math.floor(item.currentx + item.w / 2);
+        item.centerx = Math.round(
-        item.centery = Math.floor(item.currenty + item.h / 2);
+          ((item.currentx + item.w / 2) / wall_dom?.offsetWidth) * 3840
+        );
+        item.centery = Math.round(
+          ((item.currenty + item.h / 2) / wall_dom?.offsetHeight) * 2160
+        );
       }
       realtime_upload();
     };
@@ -1272,19 +1326,27 @@ export default defineComponent({
         });
         if (minx < 0) {
           item.currentx += Math.abs(minx);
-          item.centerx = item.w / 2 + item.currentx;
+          item.centerx = Math.round(
+            ((item.w / 2 + item.currentx) / wall_dom.offsetWidth) * 3840
+          );
         }
         if (maxx > wall_dom.offsetWidth) {
           item.currentx -= maxx - wall_dom.offsetWidth;
-          item.centerx = item.currentx + item.w / 2;
+          item.centerx = Math.round(
+            ((item.currentx + item.w / 2) / wall_dom.offsetWidth) * 3840
+          );
         }
         if (miny < 0) {
           item.currenty += Math.abs(miny);
-          item.centery = item.h / 2 + item.currenty;
+          item.centery = Math.round(
+            ((item.h / 2 + item.currenty) / wall_dom.offsetHeight) * 2160
+          );
         }
         if (maxy > wall_dom.offsetHeight) {
           item.currenty -= maxy - wall_dom.offsetHeight;
-          item.centery = item.currenty + item.h / 2;
+          item.centery = Math.round(
+            ((item.currenty + item.h / 2) / wall_dom.offsetHeight) * 2160
+          );
         }
       }
     };
@@ -1300,12 +1362,14 @@ export default defineComponent({
     const refresh_all = () => {
       test_monitor_wall.value = [];
       current_index.value = -1;
+      monitor_list_current_index.value=-1
       percenter.value = last_percenter.value;
       multiple_select.value = [];
       multiple.value = false;
       loading.value = false;
       test_monitor_list.value.forEach((element) => {
         element.isHide = false;
+        element.isactive=false;
       });
       last_wall.value.forEach((element) => {
         element.isShow = true;
@@ -1328,8 +1392,10 @@ export default defineComponent({
           let sizew = element.InitialW / tepw;
           element.currentx = element.currentx * sizew;
           element.currenty = element.currenty * sizeh;
-          element.centerx = Math.floor(element.currentx + element.w / 2);
+          element.centerx =
-          element.centery = Math.floor(element.currenty + element.h / 2);
+            Math.round(((element.currentx + element.w / 2) / wall_dom.offsetWidth) * 3840);
+          element.centery =
+            Math.round(((element.currenty + element.h / 2) / wall_dom.offsetHeight) * 2160);
         });
       }
     });
@@ -1380,12 +1446,13 @@ export default defineComponent({
           item.w = item.InitialW * percenter.value;
           item.resizew = item.InitialW / wall_dom.offsetWidth;
           item.resizeh = item.InitialH / wall_dom.offsetHeight;
-          item.centerx = Math.floor(item.currentx + item.w / 2);
+          item.centerx =
-          item.centery = Math.floor(item.currenty + item.h / 2);
+            Math.round(((item.currentx + item.w / 2) / wall_dom.offsetWidth) * 3840);
+          item.centery =
+            Math.round(((item.currenty + item.h / 2) / wall_dom.offsetHeight) * 2160);
           item.angle = element.angle;
           item.isShow = true;
           test_monitor_wall.value.push(JSON.parse(JSON.stringify(item)));
-          last_wall.value.push(JSON.parse(JSON.stringify(item)));
           test_monitor_list.value.forEach((ele) => {
             if (element.index == ele.id) {
               ele.isHide = true;
@@ -1394,6 +1461,140 @@ export default defineComponent({
         });
       }
     };
+    const sub_x = () => {
+      const wall_dom = wall.value;
+      let item = test_monitor_wall.value[current_index.value];
+      let minx = 1000;
+      if (wall_dom) {
+        if (multiple_select.value.length > 1) {
+          multiple_select.value.forEach((element) => {
+            if (element != -1) {
+              let tep_item = test_monitor_wall.value[element];
+              let min = min_x(tep_item) ?? 0;
+              if (tep_item.centerx > min) {
+                if (minx > tep_item.centerx && tep_item.angle != 0) {
+                  minx = tep_item.centerx;
+                  current_index.value = element;
+                }
+                tep_item.centerx--;
+                tep_item.currentx =
+                  (tep_item.centerx / 3840) * wall_dom.offsetWidth - tep_item.w/2;
+              }
+            }
+          });
+        } else {
+          let min = min_x() ?? 0;
+          if (item.centerx > min) {
+            item.centerx--;
+            item.currentx =
+                  (item.centerx / 3840) * wall_dom.offsetWidth - item.w/2;
+          }
+        }
+      }
+      realtime_upload();
+    };
+    const sub_y = () => {
+      const wall_dom = wall.value;
+      let item = test_monitor_wall.value[current_index.value];
+      let miny = 1000;
+      if (wall_dom) {
+        if (multiple_select.value.length > 1) {
+          multiple_select.value.forEach((element) => {
+            if (element != -1) {
+              let tep_item = test_monitor_wall.value[element];
+              let min = min_y(tep_item) ?? 0;
+              if (tep_item.centery > min) {
+                if (miny > tep_item.centery) {
+                  miny = tep_item.centery;
+                  current_index.value = element;
+                }
+                tep_item.centery--;
+                tep_item.currenty =
+                  (tep_item.centery / 2160) * wall_dom.offsetHeight -
+                  tep_item.h/2;
+              }
+            }
+          });
+        } else {
+          let min = min_y() ?? 0;
+          if (item.centery > min) {
+            item.centery--;
+            item.currenty =
+                  (item.centery / 2160) * wall_dom.offsetHeight -
+                  item.h/2;
+          }
+        }
+      }
+      realtime_upload();
+    };
+    const add_x = () => {
+      let item = test_monitor_wall.value[current_index.value];
+      let maxx = 0;
+      if (multiple_select.value.length > 1) {
+        multiple_select.value.forEach((element) => {
+          if (element != -1) {
+            let tep_item = test_monitor_wall.value[element];
+            let max = max_x(tep_item) ?? 0;
+            if (tep_item.centerx < max) {
+              if (maxx < tep_item.centerx && tep_item.angle != 0) {
+                maxx = tep_item.centerx;
+                current_index.value = element;
+              }
+              tep_item.centerx++;
+              const wall_dom = wall.value;
+              if (wall_dom) {
+                tep_item.currentx =
+                  (tep_item.centerx / 3840) * wall_dom.offsetWidth - tep_item.w/2;
+              }
+            }
+          }
+        });
+      } else {
+        let max = max_x() ?? 0;
+        if (item.centerx < max) {
+          item.centerx++;
+          const wall_dom = wall.value;
+          if (wall_dom) {
+            item.currentx =
+              (item.centerx / 3840) * wall_dom.offsetWidth - item.w/2;
+          }
+        }
+      }
+      realtime_upload();
+    };
+    const add_y = () => {
+      const wall_dom = wall.value;
+      let item = test_monitor_wall.value[current_index.value];
+      let maxy = 0;
+      if (wall_dom) {
+        if (multiple_select.value.length > 1) {
+          multiple_select.value.forEach((element) => {
+            if (element != -1) {
+              let tep_item = test_monitor_wall.value[element];
+              let max = max_y(tep_item) ?? 0;
+              if (tep_item.centery < max) {
+                if (maxy < tep_item.centery && tep_item.angle != 0) {
+                  maxy = tep_item.centery;
+                  current_index.value = element;
+                }
+                tep_item.centery++;
+                tep_item.currenty =
+                  (tep_item.centery / 2160) * wall_dom.offsetHeight -
+                  tep_item.h/2;
+              }
+            }
+          });
+        } else {
+          let max = max_y() ?? 0;
+          if (item.centery < max) {
+            item.centery++;
+            item.currenty =
+              (item.centery / 2160) * wall_dom.offsetHeight - item.h/2;
+          }
+        }
+      }
+      realtime_upload();
+    };
     EventBus.getInstance().on(
       EventNamesDefine.NotifyMessage,
       (notify: NotifyMessage) => {
@@ -1415,8 +1616,13 @@ export default defineComponent({
               ) as Protocol.SetApplicationConfigRequestEntity;
               if (temp.key == "magic_wall_config") {
                 const a = JSON.parse(temp.value).windows;
+                if (
+                  current_index.value == -1 ||
+                  multiple_select.value.length < 1
+                ) {
                   refresh_magic(a);
                 }
+              }
               break;
             }
           }
@@ -1426,6 +1632,10 @@ export default defineComponent({
       }
     );
     return {
+      sub_x,
+      sub_y,
+      add_x,
+      add_y,
       close_magic_switch,
       upload_magic_switch,
       magic_switch,
@@ -1469,6 +1679,7 @@ export default defineComponent({
         console.log(a);
       },
       async showDialog() {
+        monitor_list_current_index.value = -1;
         show_dialog.value = true;
         magic_switch.value = true;
         let client = GlobalData.getInstance().getCurrentClient();
@@ -1534,8 +1745,12 @@ export default defineComponent({
                 item.w = item.InitialW * percenter.value;
                 item.resizew = item.InitialW / wall_dom.offsetWidth;
                 item.resizeh = item.InitialH / wall_dom.offsetHeight;
-                item.centerx = Math.floor(item.currentx + item.w / 2);
+                item.centerx = Math.round(
-                item.centery = Math.floor(item.currenty + item.h / 2);
+                  ((item.currentx + item.w / 2) / wall_dom.offsetWidth) * 3840
+                );
+                item.centery = Math.round(
+                  ((item.currenty + item.h / 2) / wall_dom.offsetHeight) * 2160
+                );
                 item.angle = element.angle;
                 item.isShow = true;
                 test_monitor_wall.value.push(JSON.parse(JSON.stringify(item)));
@@ -1564,7 +1779,9 @@ export default defineComponent({
         last_wall.value = [];
         test_monitor_list.value.forEach((element) => {
           element.isHide = false;
+          element.isactive = false;
         });
+
         loading.value = false;
       },
       async onSubmit() {
@@ -1611,8 +1828,8 @@ export default defineComponent({
                   h: element.h / wall_dom.offsetHeight,
                   w: element.w / wall_dom.offsetWidth,
                   angle: parseInt(element.angle.toString()),
-                  centerx: element.centerx / wall_dom.offsetWidth,
+                  centerx: element.centerx / 3840,
-                  centery: element.centery / wall_dom.offsetHeight,
+                  centery: element.centery / 2160,
                 });
               }
             });
@@ -1655,6 +1872,8 @@ export default defineComponent({
           }
           item.active = true;
         }
+        item.active = true;
+
         current_index.value = index;
       },
       onDragStart(e: DragEvent, item: test_monitor) {
@@ -1708,8 +1927,12 @@ export default defineComponent({
             if (item.currenty > wall_dom?.offsetHeight - item.h) {
               item.currenty = wall_dom?.offsetHeight - item.h;
             }
-            item.centerx = Math.floor(item.currentx + item.w / 2);
+            item.centerx = Math.round(
-            item.centery = Math.floor(item.currenty + item.h / 2);
+              ((item.currentx + item.w / 2) / wall_dom?.offsetWidth) * 3840
+            );
+            item.centery = Math.round(
+              ((item.currenty + item.h / 2) / wall_dom?.offsetHeight) * 2160
+            );
             if (
               item.h > wall_dom.offsetHeight ||
               item.w > wall_dom.offsetWidth
@@ -1728,6 +1951,7 @@ export default defineComponent({
               }
               current_index.value = test_monitor_wall.value.length - 1;
               realtime_upload();
+              monitor_list_current_index.value = -1;
             }
           }
         }
@@ -1827,13 +2051,19 @@ export default defineComponent({
       center_x() {
         const wall_dom = wall.value;
         const item = test_monitor_wall.value[current_index.value];
-        item.currentx = item.centerx - item.w / 2;
+        if (wall_dom) {
+          item.currentx =
+            (item.centerx / 3840) * wall_dom?.offsetWidth - item.w / 2;
+        }
         realtime_upload();
       },
       center_y() {
         const wall_dom = wall.value;
         const item = test_monitor_wall.value[current_index.value];
-        item.currenty = item.centery - item.h / 2;
+        if (wall_dom) {
+          item.currenty =
+            (item.centery / 2160) * wall_dom?.offsetHeight - item.h / 2;
+        }
         realtime_upload();
       },
       changePercenter() {
@@ -1852,9 +2082,16 @@ export default defineComponent({
             if (ry > wall_dom.offsetHeight) {
               element.currenty = wall_dom.offsetHeight - element.h;
             }
+            element.centerx = Math.round(
+              ((element.currentx + element.w / 2) / wall_dom?.offsetWidth) *
+                3840
+            );
+            element.centery = Math.round(
+              ((element.currenty + element.h / 2) / wall_dom?.offsetHeight) *
+                2160
+            );
           }
-          element.centerx = Math.floor(element.currentx + element.w / 2);
+
-          element.centery = Math.floor(element.currenty + element.h / 2);
           if (element.isShow) {
             tep = true;
           }
@@ -1871,6 +2108,11 @@ export default defineComponent({
         }
         multiple_select.value = [];
         multiple.value = false;
+        if (monitor_list_current_index.value != -1) {
+          test_monitor_list.value[monitor_list_current_index.value].isactive =
+            false;
+          monitor_list_current_index.value = -1;
+        }
       },
       changeAngle() {
         const wall_dom = wall.value;
@@ -1878,115 +2120,6 @@ export default defineComponent({
         exceedrange(item);
         realtime_upload();
       },
-      sub_x() {
-        let item = test_monitor_wall.value[current_index.value];
-        let minx = 1000;
-        if (multiple_select.value.length > 1) {
-          multiple_select.value.forEach((element) => {
-            if (element != -1) {
-              let tep_item = test_monitor_wall.value[element];
-              let min = min_x(tep_item) ?? 0;
-              if (tep_item.centerx > min) {
-                if (minx > tep_item.centerx && tep_item.angle != 0) {
-                  minx = tep_item.centerx;
-                  current_index.value = element;
-                }
-                tep_item.currentx--;
-                tep_item.centerx--;
-              }
-            }
-          });
-        } else {
-          let min = min_x() ?? 0;
-          if (item.centerx > min) {
-            item.currentx--;
-            item.centerx--;
-          }
-        }
-        realtime_upload();
-      },
-      sub_y() {
-        let item = test_monitor_wall.value[current_index.value];
-        let miny = 1000;
-        if (multiple_select.value.length > 1) {
-          multiple_select.value.forEach((element) => {
-            if (element != -1) {
-              let tep_item = test_monitor_wall.value[element];
-              let min = min_y(tep_item) ?? 0;
-              if (tep_item.centery > min) {
-                if (miny > tep_item.centery) {
-                  miny = tep_item.centery;
-                  current_index.value = element;
-                }
-                tep_item.currenty--;
-                tep_item.centery--;
-              }
-            }
-          });
-        } else {
-          let min = min_y() ?? 0;
-          if (item.centery > min) {
-            item.currenty--;
-            item.centery--;
-          }
-        }
-        realtime_upload();
-      },
-      add_x() {
-        let item = test_monitor_wall.value[current_index.value];
-        let maxx = 0;
-        if (multiple_select.value.length > 1) {
-          multiple_select.value.forEach((element) => {
-            if (element != -1) {
-              let tep_item = test_monitor_wall.value[element];
-              let max = max_x(tep_item) ?? 0;
-
-              if (tep_item.centerx < max) {
-                if (maxx < tep_item.centerx && tep_item.angle != 0) {
-                  maxx = tep_item.centerx;
-                  current_index.value = element;
-                }
-                tep_item.currentx++;
-                tep_item.centerx++;
-              }
-            }
-          });
-        } else {
-          let max = max_x() ?? 0;
-          if (item.centerx < max) {
-            item.currentx++;
-            item.centerx++;
-          }
-        }
-        realtime_upload();
-      },
-      add_y() {
-        let item = test_monitor_wall.value[current_index.value];
-        let maxy = 0;
-        if (multiple_select.value.length > 1) {
-          multiple_select.value.forEach((element) => {
-            if (element != -1) {
-              let tep_item = test_monitor_wall.value[element];
-              let max = max_y(tep_item) ?? 0;
-              if (tep_item.centery < max) {
-                if (maxy < tep_item.centery && tep_item.angle != 0) {
-                  maxy = tep_item.centery;
-                  current_index.value = element;
-                }
-                tep_item.currenty++;
-                tep_item.centery++;
-              }
-            }
-          });
-        } else {
-          let max = max_y() ?? 0;
-          if (item.centery < max) {
-            item.currenty++;
-            item.centery++;
-          }
-        }
-        realtime_upload();
-      },
 
       changewidth() {
         let item = test_monitor_list.value[monitor_list_current_index.value];
@@ -2038,6 +2171,36 @@ export default defineComponent({
         });
         realtime_upload();
       },
+      testLog(a: any) {
+        if (current_index.value != -1 || multiple_select.value.length > 1) {
+          switch (a.key) {
+            case "ArrowRight":
+              {
+                a.preventDefault();
+                add_x();
+              }
+              break;
+            case "ArrowLeft":
+              {
+                a.preventDefault();
+                sub_x();
+              }
+              break;
+            case "ArrowUp":
+              {
+                a.preventDefault();
+                sub_y();
+              }
+              break;
+            case "ArrowDown":
+              {
+                a.preventDefault();
+                add_y();
+              }
+              break;
+          }
+        }
+      },
       export_magic_wall() {
         let res: string = "";
         test_monitor_wall.value.forEach((ele, index) => {

src/pages/WallPage.vue

@@ -245,7 +245,7 @@
 }
 .magic_wall {
   border: 1px solid black;
-  background-color: rgb(173, 228, 251);
+  background-color: rgb(50,130,246);
   position: absolute;
 }
 .magic_wall_select {