diff --git a/src/components/ControlPanelDialog.vue b/src/components/ControlPanelDialog.vue
new file mode 100644
index 0000000..3579af3
--- /dev/null
+++ b/src/components/ControlPanelDialog.vue
@@ -0,0 +1,565 @@
+<template>
+  <q-dialog persistent v-model="show_dialog" @before-hide="resetData" @keydown="
+    (evt) => {
+      if (!loading && evt.keyCode == 27) {
+        show_dialog = false;
+      }
+    }
+  ">
+    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
+      <q-card-section class="q-ma-none q-pa-sm">
+        <div class="row">
+          <div class="col-auto text-h6">
+            {{ $t("magic wall") }}
+          </div>
+          <q-space />
+          <div>
+            <q-btn :loading="loading" flat round :disable="loading" icon="close" color="red" v-close-popup>
+              <q-tooltip>
+                {{ $t("close") }}
+              </q-tooltip>
+            </q-btn>
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-section style="max-height: 80vh; width: 55vw" class="scroll">
+
+        <q-card class="my-card" flat bordered>
+          <q-card-section horizontal>
+            <q-card-section class="col-3" style="">
+              <div class="text-h5">{{ $t("angle") }}</div>
+              <q-separator />
+              <br />
+              <div class="row no-wrap items-center">
+                <q-item>
+                  <q-item-section avatar>
+                    <span class="q-mb-md" style="font-size:1rem"> angle:</span>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-input v-if="(current_index > -1)" type="number" min="0"
+                      v-model="(test_monitor_wall[current_index].angle)"
+                      oninput="if(value<0)value=0;if(value>360)value=360;" hint="">
+                      <template v-slot:append>
+                        <span class="input_append">°</span>
+                      </template>
+                    </q-input>
+                    <q-input v-else type="number" min="0" :model-value="0" :disable="true" hint="">
+                      <template v-slot:append>
+                        <span class="input_append">°</span>
+                      </template>
+                    </q-input>
+                  </q-item-section>
+                </q-item>
+              </div>
+              <br />
+              <div class="text-h5">{{ $t("physical central location") }}</div>
+              <q-separator />
+              <br />
+              <div class="row no-wrap items-center">
+                <q-item>
+                  <q-item-section avatar>
+                    <span class="q-mb-md">X:</span>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-input v-if="(current_index > -1)" type="number" min="0"
+                      v-model="test_monitor_wall[current_index].currentx" :rules="[
+                        (val) =>
+                          (val != null &&
+                            val != undefined &&
+                            val.toString().length > 0) ||
+                          $t('Please type something'),
+                        (val) =>
+                          parseInt(val) >= 0 ||
+                          $t('the number must be greater than 0'),
+                      ]" lazy-rules hint="">
+                      <template v-slot:append>
+                        <span class="input_append text-h6">px</span>
+                      </template>
+                    </q-input>
+                    <q-input v-else type="number" min="0" :model-value="0" :disable="true" hint="">
+                      <template v-slot:append>
+                        <span class="input_append text-h6">px</span>
+                      </template>
+                    </q-input>
+                  </q-item-section>
+                </q-item>
+              </div>
+              <br />
+
+              <div class="row ">
+                <q-item>
+                  <q-item-section avatar>
+                    <span class="q-mb-md">Y:</span>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-input v-if="(current_index > -1)" :hint="''" type="number" min="0"
+                      v-model="test_monitor_wall[current_index].currenty" :rules="[
+                        (val) =>
+                          (val != null &&
+                            val != undefined &&
+                            val.toString().length > 0) ||
+                          $t('Please type something'),
+                        (val) =>
+                          parseInt(val) >= 0 ||
+                          $t('the number must be greater than 0'),
+                      ]" lazy-rules>
+                      <template v-slot:append>
+                        <span class="input_append text-h6">px</span>
+                      </template>
+                    </q-input>
+                    <q-input v-else type="number" min="0" :model-value="0" :disable="true" hint="">
+                      <template v-slot:append>
+                        <span class="input_append text-h6">px</span>
+                      </template>
+                    </q-input>
+                  </q-item-section>
+                </q-item>
+              </div>
+            </q-card-section>
+            <q-separator vertical></q-separator>
+
+            <q-card-section @dragenter="onDragEnter" @dragleave="onDragLeave" @dragover="onDragOver" @drop="onDrop"
+              style="max-height: 80vh; width: 55vw ; position: relative;">
+              <div class="text-h6">{{ $t("topology diagram") }}</div>
+              <div style="position: absolute;  height: 85%; width: 95%; text-align: center;"
+                :class="$store.state.power_state ? 'wall' : ''">
+                <div class="row" v-for="i in (64 / 8)" :key="i" style="height:12.5%;align-items: center;"
+                  :class="(i % 2) == 0 ? 'wall_row' : ''">
+                  <div class="col" v-for="j in 8" :key="j">
+                    {{ (i * j) }}
+                  </div>
+                </div>
+              </div>
+              <div id="monitors" ref="wall" v-if="$store.state.power_state"
+                style="position: absolute;  height: 85%; width: 95%; overflow: hidden;">
+                <div v-for=" (item, index) of test_monitor_wall">
+                  <vue3-resize-drag v-if="((item.id < 4) && item.uuid != '')" :w="($refs.wall?.offsetWidth * 0.5)"
+                    :h="($refs.wall?.offsetHeight * 0.5)"
+                    :x="((item.currentx) > $refs.wall?.offsetWidth - item.w ? item.currenty - item.w : item.currentx)"
+                    :y="((item.currenty) > $refs.wall?.offsetHeight - item.h ? item.currenty - item.h : item.currenty)"
+                    :resizeIconSize="8" :isActive="item.active" :isGuide="(true && item.angle == 0)" :rotate="item.angle"
+                    style="background-color: grey; opacity: 0.8; text-align: center;position: absolute; "
+                    @moveHandler="moveingMonitor(item, $event)" @moveEndHandler="moveMonitor(item, $event)"
+                    @mousedown="activeMouseDown(item, index)" @rotateHandler="rotateMonitor(item, $event)"
+                    :z-index="item.active ? 99 : 0">
+                    <div class="full-height full-width" :class="item.active ? 'monitor_selected' : ''"
+                      style="text-align:center;" :style="{ lineHeight: show_box_line_height($refs.wall?.offsetHeight) }">
+                      <q-popup-proxy context-menu>
+                        <q-list>
+                          <q-item clickable v-close-popup>
+                            <q-item-section @click="closeWindow(item, index)"> {{ $t("close this window") }}
+                            </q-item-section>
+                          </q-item>
+                          <q-item clickable v-close-popup>
+                            <q-item-section @click="closeOtherWindows(item, index)">
+                              {{ $t("close other windows") }}
+                            </q-item-section>
+                          </q-item>
+                          <q-item clickable v-close-popup>
+                            <q-item-section @click="closeAllWindows()"> {{ $t("close all windows") }} </q-item-section>
+                          </q-item>
+                        </q-list>
+                      </q-popup-proxy>
+                      {{ item.uuid }}
+                    </div>
+                  </vue3-resize-drag>
+                  <vue3-resize-drag v-else-if="(item.id < 8 && item.uuid != '')" :w="($refs.wall?.offsetWidth * 0.6)"
+                    :h="($refs.wall?.offsetHeight * 0.6)"
+                    :x="((item.currentx) > $refs.wall?.offsetWidth - item.w ? item.currenty - item.w : item.currentx)"
+                    :y="((item.currenty) > $refs.wall?.offsetHeight - item.h ? item.currenty - item.h : item.currenty)"
+                    :resizeIconSize="8" :isActive="item.active" :isGuide="(true && item.angle == 0)" :rotate="item.angle"
+                    style="background-color: grey; opacity: 0.8; text-align: center;position: absolute;"
+                    @moveHandler="moveingMonitor(item, $event)" @moveEndHandler="moveMonitor(item, $event)"
+                    @mousedown="activeMouseDown(item, index)" @rotateHandler="rotateMonitor(item, $event)"
+                    :z-index="item.active ? 99 : 0">
+                    <div class="full-height full-width" :class="item.active ? 'monitor_selected' : ''"
+                      style="text-align:center;" :style="{ lineHeight: show_box_line_height($refs.wall?.offsetHeight) }">
+                      <q-popup-proxy context-menu>
+                        <q-list>
+                          <q-item clickable v-close-popup>
+                            <q-item-section @click="closeWindow(item, index)"> {{ $t("close this window") }}
+                            </q-item-section>
+                          </q-item>
+                          <q-item clickable v-close-popup>
+                            <q-item-section @click="closeOtherWindows(item, index)">
+                              {{ $t("close other windows") }}
+                            </q-item-section>
+                          </q-item>
+                          <q-item clickable v-close-popup>
+                            <q-item-section @click="closeAllWindows()"> {{ $t("close all windows") }} </q-item-section>
+                          </q-item>
+                        </q-list>
+                      </q-popup-proxy>
+                      {{ item.uuid }}
+                    </div>
+                  </vue3-resize-drag>
+                </div>
+              </div>
+            </q-card-section>
+          </q-card-section>
+        </q-card>
+        <br />
+        <q-card class="my-card" flat bordered>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6">{{ $t("monitors list") }}</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-separator></q-separator>
+          <q-card-section horizontal>
+            <q-list key="uuid" class=" full-width">
+              <div v-for="item in (Math.ceil(test_monitor_list.length / 4))">
+                <div v-for="(j) in 4" style="display:inline-block"
+                  v-if="(item < test_monitor_list.length / 4 || (test_monitor_list.length % 4 == 0))"
+                  :style="{ lineHeight: box_height(item, j) }">
+                  <div v-if="test_monitor_list[(item - 1) * 4 + (j - 1)] == ''">
+
+                  </div>
+                  <div v-else style="background-color: grey; opacity: 0.5; border: 1px solid black;text-align: center;"
+                    :style="{ width: box_width(item, j), height: box_height(item, j) }" :draggable="$store.state.power_state"
+                    @dragstart="(evt) => onDragStart(evt, (test_monitor_list[(item - 1) * 4 + (j - 1)]))"
+                    @dragend="(evt) => onDragend(evt, item, j)">
+                    {{ (test_monitor_list[(item - 1) * 4 + (j - 1)].uuid) }}
+                  </div>
+                </div>
+                <div v-else v-for="j in (test_monitor_list.length) % 4" style="display:inline-block;text-align: center;"
+                  :style="{ lineHeight: box_height(item, j) }">
+                  <div v-if="test_monitor_list[(item - 1) * 4 + (j - 1)] == ''">
+
+                  </div>
+                  <div v-else style="background-color: grey; opacity: 0.5; border: 1px solid black;"
+                    :style="{ width: box_width(item, j), height: box_height(item, j) }" :draggable="$store.state.power_state"
+                    @dragstart="(evt) => onDragStart(evt, (test_monitor_list[(item - 1) * 4 + (j - 1)]))"
+                    @dragend="(evt) => onDragend(evt, item, j)">
+                    {{ (test_monitor_list[(item - 1) * 4 + (j - 1)].uuid) }}
+                  </div>
+                </div>
+              </div>
+
+            </q-list>
+          </q-card-section>
+        </q-card>
+
+        <q-separator />
+
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn :loading="loading" flat :label="$t('Cancel')" no-caps color="primary" v-close-popup />
+        <q-btn ref="accept" flat :label="$t('Accept')" no-caps :loading="loading" type="submit" color="primary" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.monitor_selected {
+  outline-style: dashed;
+  outline-color: #166fab;
+  background-color: dimgrey;
+}
+
+.wall {
+  border: 1px solid black;
+}
+
+.wall_row {
+  background-color: #166fab;
+}
+
+.drag-enter {
+  outline-style: dashed;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, ref, watch, computed, Ref, reactive } from "vue";
+import { useStore } from "src/store";
+import { useQuasar, extend } from "quasar";
+import { useI18n } from "vue-i18n";
+import GlobalData from "src/common/GlobalData";
+import { HttpProtocol } from "src/entities/HttpProtocol";
+import vue3ResizeDrag from "../third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
+import itemDrag from "src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/drag";
+
+class test_monitor {
+  uuid = "";
+  active = false;
+  start_x = 0;
+  start_y = 0;
+  w = 0;
+  h = 0;
+  currentx = 0;
+  currenty = 0;
+  angle = 0;
+  id = 0;
+  reset() {
+    this.uuid = "";
+    this.active = false;
+    this.start_x = 0;
+    this.start_y = 0;
+    this.w = 0;
+    this.h = 0;
+    this.currentx = 0;
+    this.currenty = 0;
+    this.angle = 0;
+    this.id = 0;
+  }
+}
+
+export default defineComponent({
+  name: "ComponentControlPanelDialog",
+  components: { vue3ResizeDrag },
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+    let loading = ref(false);
+    let upload_url = ref("");
+    let file_count = ref(0);
+    let show_windows_flag = ref(true); // 用于刷新 window 坐标
+    let wall: Ref<HTMLElement | null> = ref(null);
+    let current_index = ref(-1);
+    let window_rect = reactive({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      angle: 0,
+    });
+
+    const aw = 128; const ah = 72;
+    const bw = 160; const bh = 90;
+    let test_monitor_list: Ref<Object[]> = ref([
+      { id: 0, uuid: "01", active: false, start_x: 0, start_y: 0, w: aw, h: ah },
+      { id: 1, uuid: "02", active: false, start_x: 0, start_y: 0, w: aw, h: ah },
+      { id: 2, uuid: "03", active: false, start_x: 0, start_y: 0, w: aw, h: ah },
+      { id: 3, uuid: "04", active: false, start_x: 0, start_y: 0, w: aw, h: ah },
+      { id: 4, uuid: "05", active: false, start_x: 0, start_y: 0, w: bw, h: bh },
+      { id: 5, uuid: "06", active: false, start_x: 0, start_y: 0, w: bw, h: bh },
+      { id: 6, uuid: "07", active: false, start_x: 0, start_y: 0, w: bw, h: bh },
+      { id: 7, uuid: "08", active: false, start_x: 0, start_y: 0, w: bw, h: bh },
+    ]);
+    const delete_monitor_list: Ref<test_monitor[]> = ref([]);
+    interface show__Rect {
+      width: number;
+      height: number;
+      x: number;
+      y: number;
+      left: number;
+      top: number;
+      angle: number;
+
+    };
+    let showMonitor = reactive({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      active: false
+    })
+    let test_monitor_wall: Ref<test_monitor[]> = ref([]);
+    const moveingMonitor = (item: test_monitor, rect: show__Rect) => {
+      if (item.active) {
+        test_monitor_wall.value.forEach(element => {
+          element.active = false
+        });
+      }
+      item.active = true;
+      if (rect.left > 0) {
+        item.currentx = rect.left;
+      }
+      if (rect.top > 0) {
+        item.currenty = rect.top;
+      }
+    };
+    const rotateMonitor = (item: test_monitor, rect: show__Rect) => {
+      item.angle = rect.angle;
+    };
+    const moveMonitor = (item: test_monitor, rect: show__Rect) => {
+      let test = JSON.stringify(rect)
+      //计算是否超出，然后放回
+      //负方向
+      if (rect.left < 0) {
+        if (item.currentx == 0) {
+          item.currentx = 0.1
+        } else {
+          item.currentx = 0
+        }
+
+      } else {
+        item.currentx = rect.left
+      }
+      if (rect.top < 0) {
+        if (item.currenty == 0) {
+          item.currenty = 0.1
+        } else {
+          item.currenty = 0
+        }
+      } else {
+        item.currenty = rect.top
+      }
+    };
+    let test_delete_flag = false;
+    return {
+      show_dialog,
+      loading,
+      upload_url,
+      delete_monitor_list,
+      file_count,
+      window_rect,
+      current_index,
+      test_monitor_list,
+      test_monitor_wall,
+      moveMonitor,
+      moveingMonitor,
+      rotateMonitor,
+      loga(a: any) {
+        console.log(a);
+      },
+      aaa(x: any) {
+        console.log(x)
+      },
+      showDialog() {
+        show_dialog.value = true;
+        let client = GlobalData.getInstance().getCurrentClient();
+        if (client) {
+          let url = new URL(client.url);
+          url.port =
+            GlobalData.getInstance().applicationConfig?.httpserver_port ??
+            HttpProtocol.DefaultHttpPort.toString();
+          url.pathname = HttpProtocol.RequestUploadFile;
+          url.protocol = "http:";
+          url.searchParams.append(
+            "type",
+            HttpProtocol.UploadTypeBackgroundImage
+          );
+          upload_url.value = url.toString();
+        }
+      },
+      resetData() {
+        loading.value = false;
+        upload_url.value = "";
+        file_count.value = 0;
+      },
+
+      activeMouseDown(item: test_monitor, index: number) {
+        current_index.value = index;
+        if (item.active) {
+          test_monitor_wall.value.forEach(element => {
+            element.active = false
+          });
+        }
+        item.active = true;
+      },
+      onDragStart(e: DragEvent, item: test_monitor) {
+        item.start_x = e.offsetX;
+        item.start_y = e.offsetY;
+        item.active = false;
+        test_delete_flag = false;
+        e.dataTransfer?.setData("item", JSON.stringify(item));
+      },
+      onDragOver(e: DragEvent) {
+        e.preventDefault();
+
+      },
+      onDrop(e: DragEvent) {
+        if (e.dataTransfer?.getData("item") != "") {
+          let item = JSON.parse(e.dataTransfer?.getData("item") + "");
+          item.currentx = e.offsetX - item.start_x;
+          item.currenty = e.offsetY - item.start_y;
+          item.active = true;
+          item.angle = 0;
+          if (item.active) {
+            test_monitor_wall.value.forEach(element => {
+              element.active = false
+            });
+          }
+          if (item.currentx < 0) {
+            item.currentx = 0.1
+            window_rect.x = 0
+          } else {
+            window_rect.x = item.currentx
+          }
+          if (item.currenty < 0) {
+            item.currenty = 0.1
+            window_rect.y = 0
+          } else {
+            window_rect.y = item.currenty
+          }
+          test_delete_flag = false;
+          if (test_monitor_wall.value.indexOf(item) == -1) {
+            test_monitor_wall.value.push(item);
+            test_delete_flag = true;
+          }
+        }
+
+      },
+      onDragEnter(e: DragEvent, index: string) {
+        e.stopPropagation();
+        let target: HTMLElement | null = e.target as HTMLElement;
+        if (target && target.draggable !== true) {
+          while (
+            target &&
+            !target.classList.contains("window_flag") &&
+            !target.classList.contains("wall_item_flag")
+          ) {
+            target = target.parentElement;
+          }
+          target?.classList.add("drag-enter");
+        }
+      },
+      onDragend(e: DragEvent, row: number, col: number) {
+        let num = (row - 1) * 4 + (col - 1);
+        if (test_delete_flag) {
+          test_monitor_list.value[num] = ""
+        }
+      },
+      onDragLeave(e: DragEvent) {
+        let target: HTMLElement = e.target as HTMLElement;
+        target?.classList.remove("drag-enter");
+      },
+      closeWindow(item: test_monitor, index: number) {
+        current_index.value = -1;
+        test_monitor_list.value[item.id] = item;
+        test_monitor_wall.value[index] = new test_monitor;
+
+      },
+      closeOtherWindows(item: test_monitor, index: number) {
+        current_index.value = 0;
+        let tep = JSON.parse(JSON.stringify(item));
+        delete_monitor_list.value = test_monitor_wall.value;
+        delete_monitor_list.value.forEach(element => {
+          test_monitor_list.value[element.id] = element
+        })
+        test_monitor_list.value[item.id] = []
+        test_monitor_wall.value = [tep,];
+      },
+      closeAllWindows() {
+        current_index.value = -1;
+        delete_monitor_list.value = test_monitor_wall.value;
+        delete_monitor_list.value.forEach(element => {
+          test_monitor_list.value[element.id] = element
+        })
+        test_monitor_wall.value = [];
+      },
+      box_width(row: number, col: number) {
+        let tep = JSON.parse(JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)]))
+        return tep.w + "px"
+      },
+      box_height(row: number, col: number) {
+        let tep = JSON.parse(JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)]))
+        return tep.h + "px"
+      },
+      show_box_line_height(height: number) {
+        return height * 0.5 + "px"
+      }
+    };
+  },
+});
+</script>
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 8d9e02c..1f0690d 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -398,4 +398,9 @@ export default {
   "server commit hash": "Server Commit Hash",
   "edit user or password": "Edit User Or Password",
   "old password error": "Old Password Error",
+  "magic wall":"Magic Wall",
+  "angle":"Angle",
+  "topology diagram":"Topology Diagram",
+  "physical central location":"Central Location",
+  "monitors list":"Monitors List",  
 };
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index c090c28..2a607d5 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -668,4 +668,9 @@ export default {
   "new password": "新密码",
   "edit user or password": "修改用户名和密码",
   "old password error": "旧密码不匹配",
+  "magic wall":"魔墙",
+  "angle":"角度",
+  "topology diagram":"拓扑图", 
+  "physical central location":"物理中心位置", 
+  "monitors list":"显示器", 
 };
diff --git a/src/pages/TopToolBar.vue b/src/pages/TopToolBar.vue
index a761bb4..9399e19 100644
--- a/src/pages/TopToolBar.vue
+++ b/src/pages/TopToolBar.vue
@@ -310,6 +310,27 @@
             </q-item-section>
           </q-item>
 
+
+
+
+          <q-item
+            clickable
+            :disable="!$store.state.power_state"
+            v-close-popup
+            @click="$refs.control_panel_dialog.showDialog()"
+          >
+            <q-item-section avatar>
+              <!-- <q-icon name="image" /> -->
+              <q-icon name="img:new_icon/file_manager.png" />
+            </q-item-section>
+            <q-item-section>
+              {{ $t("magic wall") }}
+            </q-item-section>
+          </q-item>
+
+
+
+
           <q-item
             clickable
             :disable="!$store.state.power_state"
@@ -457,6 +478,7 @@
     v-if="$store.state.isSpecialVideo()"
     ref="special_video_grid_setting_dialog"
   />
+  <control-panel-dialog ref="control_panel_dialog" />
   <background-image-dialog ref="background_image_dialog" />
   <subtitle-dialog ref="subtitle_dialog" />
   <recovery-database-dialog ref="recovery_database_dialog" />
@@ -496,6 +518,9 @@ import { useStore } from "src/store";
 
 import GridSettingDialog from "src/components/GridSettingDialog.vue";
 import SpecialVideoGridSettingDialog from "src/components/SpecialVideoGridSettingDialog.vue";
+
+import ControlPanelDialog from "src/components/ControlPanelDialog.vue";
+
 import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
 import RecoveryDatabaseDialog from "src/components/RecoveryDatabaseDialog.vue";
 import UpgradeDialog from "src/components/UpgradeDialog.vue";
@@ -527,6 +552,9 @@ export default defineComponent({
   components: {
     GridSettingDialog,
     SpecialVideoGridSettingDialog,
+
+    ControlPanelDialog,
+
     BackgroundImageDialog,
     RecoveryDatabaseDialog,
     UpgradeDialog,