diff --git a/public/login_background.png b/public/login_background.png
new file mode 100644
index 0000000..2b720e0
Binary files /dev/null and b/public/login_background.png differ
diff --git a/public/new_icon/center_control.png b/public/new_icon/center_control.png
index 5e70814..53ffe09 100644
Binary files a/public/new_icon/center_control.png and b/public/new_icon/center_control.png differ
diff --git a/public/new_icon/power_off.png b/public/new_icon/power_off.png
index 255c1c8..87687e8 100644
Binary files a/public/new_icon/power_off.png and b/public/new_icon/power_off.png differ
diff --git a/public/new_icon/power_on.png b/public/new_icon/power_on.png
index b1409c9..e36cc1a 100644
Binary files a/public/new_icon/power_on.png and b/public/new_icon/power_on.png differ
diff --git a/src/common/ClientConnection.ts b/src/common/ClientConnection.ts
index 0e5f610..641c90b 100644
--- a/src/common/ClientConnection.ts
+++ b/src/common/ClientConnection.ts
@@ -8,6 +8,8 @@ import SubtitleEntity from "src/entities/SubtitleEntity";
 import { Protocol } from "src/entities/WSProtocol";
 import EventBus, { EventNamesDefine } from "./EventBus";
 import { EdgeBlendingPoint } from "src/entities/EdgeBlendingEntities";
+import { ExternalControlTableEntity } from "src/entities/ExternalControlTableEntity";
+import { SerialPortConfigEntity } from "src/entities/SerialPortConfigEntity";
 
 class _RpcInfo {
   send_timestamp: number;
@@ -919,6 +921,49 @@ export default class ClientConnection {
     );
   }
 
+  public async getExternalControlDatas() {
+    return await this.doRpc<Protocol.RpcGetExternalControlDatasResponseEntity>(
+      new Protocol.RpcGetExternalControlDatasRequestEntity()
+    );
+  }
+
+  public async deleteExternalControlData(uuid: string) {
+    return await this.doRpc<Protocol.RpcDeleteExternalControlDataResponseEntity>(
+      new Protocol.RpcDeleteExternalControlDataRequestEntity(uuid)
+    );
+  }
+
+  public async editExternalControlData(entity: ExternalControlTableEntity) {
+    return await this.doRpc<Protocol.RpcEditExternalControlDataResponseEntity>(
+      new Protocol.RpcEditExternalControlDataRequestEntity(entity)
+    );
+  }
+
+  public async addExternalControlData(entity: ExternalControlTableEntity) {
+    return await this.doRpc<Protocol.RpcAddExternalControlDataResponseEntity>(
+      new Protocol.RpcAddExternalControlDataRequestEntity(entity)
+    );
+  }
+
+  public async getExternalControlSerialPortConfig() {
+    return await this.doRpc<Protocol.RpcGetExternalControlSerialPortConfigResponseEntity>(
+      new Protocol.RpcGetExternalControlSerialPortConfigRequestEntity()
+    );
+  }
+
+  public async setExternalControlSerialPortConfig(
+    config: SerialPortConfigEntity
+  ) {
+    return await this.doRpc<Protocol.RpcSetExternalControlSerialPortConfigResponseEntity>(
+      new Protocol.RpcSetExternalControlSerialPortConfigRequestEntity(config)
+    );
+  }
+
+  public callExternalControlData(uuid: string) {
+    this.ws?.send(
+      JSON.stringify(new Protocol.CallExternalControlDataRequestEntity(uuid))
+    );
+  }
   public setEdgeBlendingPoint(point: EdgeBlendingPoint) {
     this.ws?.send(
       JSON.stringify(new Protocol.SetEdgeBlendingPointRequestEntity(point))
diff --git a/src/components/CenterControlButtonDialog.vue b/src/components/CenterControlButtonDialog.vue
new file mode 100644
index 0000000..8ced2f3
--- /dev/null
+++ b/src/components/CenterControlButtonDialog.vue
@@ -0,0 +1,267 @@
+<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="max-width: 60vw">
+      <q-form @submit="onSubmit">
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-auto text-h6">
+              {{ dialog_status == 0 ? $t("add") : $t("edit")
+              }}{{ $t("button") }}
+            </div>
+            <q-space />
+            <div>
+              <q-btn
+                :loading="loading"
+                :disable="loading"
+                flat
+                round
+                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 class="scroll" style="width: 60vw; height: 50vh">
+          <q-list>
+            <q-item>
+              <q-item-section avatar class="header_label">
+                {{ $t("name") }}
+              </q-item-section>
+              <q-item-section>
+                <q-input
+                  v-model="button_name"
+                  :loading="loading"
+                  :disable="loading"
+                  lazy-rules
+                  :rules="[
+                    (val) =>
+                      (val && val.toString().length > 0) ||
+                      $t('Please type something'),
+                  ]"
+                />
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section avatar class="header_label">
+                {{ $t("command") }}
+              </q-item-section>
+              <q-item-section>
+                <q-input
+                  v-model="button_command"
+                  type="textarea"
+                  :loading="loading"
+                  :disable="loading"
+                  :rules="[
+                    (val) =>
+                      isHexStr(val) ||
+                      $t('Please input vaild hex str') +
+                        ' \t' +
+                        $t('example') +
+                        ': 0x00 0x01 0x02 0x03',
+                  ]"
+                  :hint="$t('example') + ': 0x00 0x01 0x02 0x03'"
+                />
+              </q-item-section>
+            </q-item>
+            <q-item v-if="false">
+              <q-item-section avatar class="header_label">
+                {{ $t("icon") }}
+              </q-item-section>
+              <q-item-section>
+                <q-input
+                  v-model="button_icon"
+                  :loading="loading"
+                  :disable="loading"
+                />
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn
+            ref="cancel"
+            flat
+            :label="$t('Cancel')"
+            :loading="loading"
+            v-close-popup
+            color="primary"
+          />
+
+          <q-btn
+            ref="accept"
+            flat
+            :label="$t('Accept')"
+            :loading="loading"
+            type="submit"
+            color="primary"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.header_label {
+  width: 10%;
+}
+.header_label_2 {
+  width: 10%;
+  align-items: center;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { useStore } from "src/store";
+import { useQuasar, copyToClipboard } from "quasar";
+import { useI18n } from "vue-i18n";
+
+import { ExternalControlTableEntity } from "src/entities/ExternalControlTableEntity";
+
+export default defineComponent({
+  name: "ComponentCenterControlButtonDialog",
+  components: {},
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+    let loading = ref(false);
+
+    const button_name = ref("");
+    const button_command = ref("");
+    const button_icon = ref("");
+    const dialog_status = ref(0); // 0: add 1: edit
+
+    let _reject: any = null;
+    let _resolve: any = null;
+
+    return {
+      show_dialog,
+      loading,
+      button_name,
+      dialog_status,
+      button_command,
+      button_icon,
+      copyToClipboard,
+      loga(a: any) {
+        console.log(a);
+      },
+      async showDialogAsync(in_data?: ExternalControlTableEntity) {
+        if (_resolve) {
+          _resolve(null);
+        } else if (_reject) {
+          _reject(null);
+        }
+        return new Promise((resolve, reject) => {
+          _reject = reject;
+          _resolve = resolve;
+          if (in_data) {
+            dialog_status.value = 1;
+            button_name.value =
+              in_data.name ?? $t.t("new button") + (in_data.number ?? 1);
+            const temp_command = in_data.command ?? "";
+            button_icon.value = "";
+
+            let target_show_command = "";
+            for (const item of temp_command) {
+              try {
+                let temp_str = item.toString(16).toUpperCase();
+                if (temp_str.length == 1) {
+                  temp_str = "0" + temp_str;
+                }
+                target_show_command += "0x" + temp_str + " ";
+              } catch {}
+            }
+            button_command.value = target_show_command;
+          } else {
+            dialog_status.value = 0;
+            button_name.value = $t.t("new button") + "1";
+            button_command.value = "";
+            button_icon.value = "";
+          }
+
+          show_dialog.value = true;
+        });
+      },
+      resetData() {
+        loading.value = false;
+        dialog_status.value = 0;
+        button_name.value = "";
+        button_command.value = "";
+        button_icon.value = "";
+        if (_resolve) {
+          _resolve(null);
+        } else if (_reject) {
+          _reject(null);
+        }
+        _reject = null;
+        _resolve = null;
+      },
+      onSubmit() {
+        const command = [];
+        for (const item of button_command.value.trim().split(" ")) {
+          try {
+            const v = parseInt(item);
+            if (!isNaN(v)) {
+              command.push(v);
+            }
+          } catch {}
+        }
+
+        const data = {
+          name: button_name.value,
+          command,
+          icon: button_icon.value,
+        };
+
+        if (_resolve) {
+          _resolve(data);
+        } else if (_reject) {
+          _reject(data);
+        }
+        show_dialog.value = false;
+      },
+      isHexStr(val: string) {
+        if (val != null && val != undefined && typeof val == "string") {
+          val = val.trim();
+          if (val.length == 0) {
+            return true;
+          }
+          for (const item of val.split(" ")) {
+            if (item.length > 4) {
+              return false;
+            }
+            if (!/^0[xX]?[A-Fa-f0-9]/.test(item)) {
+              return false;
+            }
+          }
+          return true;
+        }
+        return false;
+      },
+    };
+  },
+});
+</script>
diff --git a/src/components/CenterControlDialog.vue b/src/components/CenterControlDialog.vue
new file mode 100644
index 0000000..7d5f533
--- /dev/null
+++ b/src/components/CenterControlDialog.vue
@@ -0,0 +1,491 @@
+<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="max-width: 60vw">
+      <q-form>
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-auto text-h6">
+              {{ $t("center control") }}
+            </div>
+            <q-space />
+            <div>
+              <q-btn
+                :loading="loading"
+                :disable="loading"
+                flat
+                round
+                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 class="scroll" style="width: 60vw; height: 70vh">
+          <q-card class="fit">
+            <q-tabs
+              v-model="tab"
+              dense
+              class="text-grey"
+              active-color="primary"
+              indicator-color="primary"
+              align="justify"
+              narrow-indicator
+            >
+              <q-tab
+                name="center_control"
+                :label="$t('control')"
+                :disable="loading"
+              />
+              <q-tab
+                name="serial_port_setting"
+                :label="$t('serial port setting')"
+                :disable="loading"
+              />
+            </q-tabs>
+
+            <q-separator />
+
+            <q-tab-panels v-model="tab" animated class="q-pa-none q-ma-none">
+              <q-tab-panel name="center_control">
+                <q-scroll-area class="full-width" style="height: 58vh">
+                  <div
+                    class="row full-width q-pt-md"
+                    v-for="row of Math.ceil(buttons.length / 4)"
+                    :key="row"
+                  >
+                    <div class="col-3" v-for="col of 4" :key="col">
+                      <div
+                        class="fit q-px-md"
+                        v-if="buttons[(row - 1) * 4 + (col - 1)]"
+                      >
+                        <q-btn
+                          stretch
+                          outline
+                          ripple
+                          color="primary"
+                          class="fit"
+                          size="md"
+                          :label="buttons[(row - 1) * 4 + (col - 1)].name"
+                          @click="
+                            centerControlCommand(
+                              buttons[(row - 1) * 4 + (col - 1)].uuid
+                            )
+                          "
+                        >
+                          <q-popup-proxy context-menu>
+                            <q-list>
+                              <q-item
+                                clickable
+                                v-close-popup
+                                @click="
+                                  editCenterControlButton(
+                                    buttons[(row - 1) * 4 + (col - 1)]
+                                  )
+                                "
+                              >
+                                <q-item-section avatar>
+                                  <q-icon color="primary" name="edit" />
+                                </q-item-section>
+                                <q-item-section>{{
+                                  $t("edit")
+                                }}</q-item-section>
+                              </q-item>
+                            </q-list>
+                          </q-popup-proxy>
+                        </q-btn>
+                      </div>
+                    </div>
+                  </div>
+                </q-scroll-area>
+              </q-tab-panel>
+
+              <q-tab-panel
+                name="serial_port_setting"
+                class="q-pa-none q-ma-none fit"
+              >
+                <q-scroll-area style="height: 57vh">
+                  <q-list>
+                    <q-item>
+                      <q-item-section avatar class="header_label">
+                        {{ $t("baud rate") }}
+                      </q-item-section>
+                      <q-item-section>
+                        <q-select
+                          v-model="serial_port_setting.baud_rate"
+                          :loading="loading"
+                          :disable="loading"
+                          :options="[
+                            110, 300, 600, 1200, 2400, 4800, 9600, 14400, 19200,
+                            38400,
+                          ] /*[
+                          110, 300, 600, 1200, 2400, 4800, 9600, 14400, 19200,
+                          38400, 56000, 57600, 115200, 2304000, 380400, 460800,
+                          921600,
+                        ]*/"
+                        />
+                      </q-item-section>
+                    </q-item>
+                    <q-item>
+                      <q-item-section avatar class="header_label">
+                        {{ $t("character size") }}
+                      </q-item-section>
+                      <q-item-section>
+                        <q-select
+                          v-model="serial_port_setting.character_size"
+                          :loading="loading"
+                          :disable="loading"
+                          :options="[5, 6, 7, 8]"
+                        />
+                      </q-item-section>
+                    </q-item>
+                    <q-item>
+                      <q-item-section avatar class="header_label">
+                        {{ $t("parity") }}
+                      </q-item-section>
+                      <q-item-section>
+                        <q-select
+                          v-model="serial_port_setting.parity"
+                          :loading="loading"
+                          :disable="loading"
+                          emit-value
+                          map-options
+                          option-value="value"
+                          option-label="label"
+                          :options="[
+                            {
+                              label: 'NONE',
+                              value: 0,
+                            },
+                            {
+                              label: 'ODD',
+                              value: 1,
+                            },
+                            {
+                              label: 'EVEN',
+                              value: 2,
+                            },
+                          ]"
+                        />
+                      </q-item-section>
+                    </q-item>
+                    <q-item>
+                      <q-item-section avatar class="header_label">
+                        {{ $t("stop bits") }}
+                      </q-item-section>
+                      <q-item-section>
+                        <q-select
+                          v-model="serial_port_setting.stop_bits"
+                          :loading="loading"
+                          :disable="loading"
+                          emit-value
+                          map-options
+                          option-value="value"
+                          option-label="label"
+                          :options="[
+                            {
+                              label: '1 Bit',
+                              value: 0,
+                            },
+                            {
+                              label: '1.5 Bit',
+                              value: 1,
+                            },
+                            {
+                              label: '2 Bit',
+                              value: 2,
+                            },
+                          ]"
+                        />
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-scroll-area>
+                <q-separator />
+                <div class="row">
+                  <q-space />
+                  <div class="col-auto">
+                    <q-btn
+                      flat
+                      :label="$t('revert')"
+                      :loading="loading"
+                      color="primary"
+                      @click="onRevertSerialportConfig"
+                    />
+                  </div>
+                  <div class="col-auto">
+                    <q-btn
+                      flat
+                      :label="$t('submit')"
+                      :loading="loading"
+                      color="primary"
+                      @click="onSubmitSerialportConfig"
+                    />
+                  </div>
+                </div>
+              </q-tab-panel>
+            </q-tab-panels>
+          </q-card>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <center-control-button-dialog ref="center_control_button_dialog" />
+</template>
+
+<style scoped>
+.header_label {
+  width: 15%;
+}
+.header_label_2 {
+  width: 15%;
+  align-items: center;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, ref, Ref, reactive } from "vue";
+import { useStore } from "src/store";
+import { useQuasar, copyToClipboard } from "quasar";
+import { useI18n } from "vue-i18n";
+import GlobalData from "src/common/GlobalData";
+import { ExternalControlTableEntity } from "src/entities/ExternalControlTableEntity";
+import CenterControlButtonDialog from "src/components/CenterControlButtonDialog.vue";
+
+import {
+  ESerialPortFlowControlHelper,
+  ESerialPortParityHelper,
+  ESerialPortStopBitsHelper,
+  SerialPortConfigEntity,
+} from "src/entities/SerialPortConfigEntity";
+
+export default defineComponent({
+  name: "ComponentCenterControlDialog",
+  components: { CenterControlButtonDialog },
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+    let loading = ref(false);
+    let tab = ref("center_control");
+
+    const buttons: Ref<ExternalControlTableEntity[]> = ref([]);
+    const serial_port_setting: SerialPortConfigEntity = reactive(
+      new SerialPortConfigEntity()
+    );
+    const old_serial_port_setting = new SerialPortConfigEntity();
+
+    const center_control_button_dialog: Ref<any> = ref(null);
+
+    return {
+      show_dialog,
+      loading,
+      tab,
+      buttons,
+      serial_port_setting,
+      center_control_button_dialog,
+      copyToClipboard,
+      loga(a: any) {
+        console.log(a);
+      },
+      async showDialog() {
+        show_dialog.value = true;
+        loading.value = true;
+
+        try {
+          const response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.getExternalControlDatas();
+          if (response) {
+            const btns = response.datas;
+            const compare = (property: any) => {
+              return function (a: any, b: any) {
+                var value1 = a[property];
+                var value2 = b[property];
+                return value1 - value2;
+              };
+            };
+            btns.sort(compare("number"));
+            buttons.value = btns;
+          }
+        } catch {}
+        try {
+          const response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.getExternalControlSerialPortConfig();
+          if (response) {
+            serial_port_setting.baud_rate = response.config.baud_rate;
+            serial_port_setting.character_size = response.config.character_size;
+            serial_port_setting.parity = ESerialPortParityHelper.fromString(
+              (<unknown>response.config.parity) as string
+            );
+            serial_port_setting.stop_bits =
+              ESerialPortStopBitsHelper.fromString(
+                (<unknown>response.config.stop_bits) as string
+              );
+            serial_port_setting.flow_control =
+              ESerialPortFlowControlHelper.fromString(
+                (<unknown>response.config.flow_control) as string
+              );
+
+            old_serial_port_setting.baud_rate = serial_port_setting.baud_rate;
+            old_serial_port_setting.character_size =
+              serial_port_setting.character_size;
+            old_serial_port_setting.parity = serial_port_setting.parity;
+            old_serial_port_setting.stop_bits = serial_port_setting.stop_bits;
+            old_serial_port_setting.flow_control =
+              serial_port_setting.flow_control;
+          }
+        } catch {}
+
+        loading.value = false;
+      },
+      resetData() {
+        loading.value = false;
+      },
+
+      async onRevertSerialportConfig() {
+        serial_port_setting.baud_rate = old_serial_port_setting.baud_rate;
+        serial_port_setting.character_size =
+          old_serial_port_setting.character_size;
+        serial_port_setting.parity = old_serial_port_setting.parity;
+        serial_port_setting.stop_bits = old_serial_port_setting.stop_bits;
+        serial_port_setting.flow_control = old_serial_port_setting.flow_control;
+      },
+
+      async onSubmitSerialportConfig() {
+        loading.value = true;
+        let success = false;
+
+        try {
+          const request_param = new SerialPortConfigEntity();
+          request_param.baud_rate = serial_port_setting.baud_rate;
+          request_param.character_size = serial_port_setting.character_size;
+          (<any>request_param.parity) = ESerialPortParityHelper.toString(
+            serial_port_setting.parity
+          );
+          (<any>request_param.stop_bits) = ESerialPortStopBitsHelper.toString(
+            serial_port_setting.stop_bits
+          );
+          (<any>request_param.flow_control) =
+            ESerialPortFlowControlHelper.toString(
+              serial_port_setting.flow_control
+            );
+          const response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.setExternalControlSerialPortConfig(request_param);
+
+          if (response) {
+            success = response.success;
+            console.log(response);
+            console.log(success);
+
+            old_serial_port_setting.baud_rate = serial_port_setting.baud_rate;
+            old_serial_port_setting.character_size =
+              serial_port_setting.character_size;
+            old_serial_port_setting.parity = serial_port_setting.parity;
+            old_serial_port_setting.stop_bits = serial_port_setting.stop_bits;
+            old_serial_port_setting.flow_control =
+              serial_port_setting.flow_control;
+          }
+        } catch {}
+
+        $q.notify({
+          color: success ? "positive" : "negative",
+          icon: success ? "done" : "warning",
+          message:
+            $t.t("set serialport") +
+            (success ? $t.t("success") : $t.t("fail")) +
+            "!",
+          position: "top",
+          timeout: 1500,
+        });
+        loading.value = false;
+      },
+      centerControlCommand(uuid?: string) {
+        if (uuid) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.callExternalControlData(uuid);
+          $q.notify({
+            color: "positive",
+            icon: "done",
+            message: $t.t("send command") + $t.t("success") + "!",
+            position: "top",
+            timeout: 1500,
+          });
+        }
+      },
+      async editCenterControlButton(data?: ExternalControlTableEntity) {
+        if (data) {
+          if (center_control_button_dialog.value) {
+            const { name, command, icon } = data;
+            let success = false;
+            try {
+              const result =
+                await center_control_button_dialog.value.showDialogAsync(data);
+              if (result) {
+                if (result.name) {
+                  data.name = result.name;
+                }
+                if (result.command) {
+                  data.command = result.command;
+                }
+                if (result.icon) {
+                  data.icon = result.icon;
+                }
+                const response = await GlobalData.getInstance()
+                  .getCurrentClient()
+                  ?.editExternalControlData(data);
+                if (response) {
+                  success = response.success;
+                }
+              } else {
+                // cancel
+                return;
+              }
+            } catch {}
+            if (!success) {
+              data.name = name;
+              data.command = command;
+              data.icon = icon;
+            }
+            $q.notify({
+              color: success ? "positive" : "negative",
+              icon: success ? "done" : "warning",
+              message:
+                $t.t("edit button") +
+                (success ? $t.t("success") : $t.t("fail")) +
+                "!",
+              position: "top",
+              timeout: 1500,
+            });
+          } else {
+            console.log("center_control_button_dialog is null");
+          }
+        }
+      },
+    };
+  },
+});
+</script>
diff --git a/src/entities/ExternalControlTableEntity.ts b/src/entities/ExternalControlTableEntity.ts
index a31c149..8a7090e 100644
--- a/src/entities/ExternalControlTableEntity.ts
+++ b/src/entities/ExternalControlTableEntity.ts
@@ -2,7 +2,7 @@ import BaseEntity from "./BaseEntity";
 
 export class ExternalControlTableEntity extends BaseEntity {
   name = "";
-  command = "";
+  command: number[] = [];
   icon = "";
   number = 0;
 }
diff --git a/src/entities/SerialPortConfigEntity.ts b/src/entities/SerialPortConfigEntity.ts
index 650170e..17e5ffa 100644
--- a/src/entities/SerialPortConfigEntity.ts
+++ b/src/entities/SerialPortConfigEntity.ts
@@ -5,20 +5,20 @@ export enum ESerialPortParity {
 }
 
 export const kSerialPortParityMap = new Map<ESerialPortParity, string>([
-  [ESerialPortParity.None, "ESerialPortParity.None"],
-  [ESerialPortParity.Odd, "ESerialPortParity.Odd"],
-  [ESerialPortParity.Even, "ESerialPortParity.Even"],
+  [ESerialPortParity.None, "ESerialPortParity::None"],
+  [ESerialPortParity.Odd, "ESerialPortParity::Odd"],
+  [ESerialPortParity.Even, "ESerialPortParity::Even"],
 ]);
 
 export class ESerialPortParityHelper {
-  toString(e: ESerialPortParity) {
+  static toString(e: ESerialPortParity) {
     if (kSerialPortParityMap.has(e)) {
       return kSerialPortParityMap.get(e);
     }
-    return "ESerialPortParity.None";
+    return "ESerialPortParity::None";
   }
 
-  fromString(str: string) {
+  static fromString(str: string) {
     let ret = ESerialPortParity.None;
     for (const item of kSerialPortParityMap.entries()) {
       if (item && item[1] == str) {
@@ -37,20 +37,20 @@ export enum ESerialPortStopBits {
 }
 
 export const kSerialPortStopBitsMap = new Map<ESerialPortStopBits, string>([
-  [ESerialPortStopBits.One, "ESerialPortStopBits.One"],
-  [ESerialPortStopBits.OnePointFive, "ESerialPortStopBits.OnePointFive"],
-  [ESerialPortStopBits.Two, "ESerialPortStopBits.Two"],
+  [ESerialPortStopBits.One, "ESerialPortStopBits::One"],
+  [ESerialPortStopBits.OnePointFive, "ESerialPortStopBits::OnePointFive"],
+  [ESerialPortStopBits.Two, "ESerialPortStopBits::Two"],
 ]);
 
 export class ESerialPortStopBitsHelper {
-  toString(e: ESerialPortStopBits) {
+  static toString(e: ESerialPortStopBits) {
     if (kSerialPortStopBitsMap.has(e)) {
       return kSerialPortStopBitsMap.get(e);
     }
-    return "ESerialPortStopBits.One";
+    return "ESerialPortStopBits::One";
   }
 
-  fromString(str: string) {
+  static fromString(str: string) {
     let ret = ESerialPortStopBits.One;
     for (const item of kSerialPortStopBitsMap.entries()) {
       if (item && item[1] == str) {
@@ -72,20 +72,20 @@ export const kSerialPortFlowControlMap = new Map<
   ESerialPortFlowControl,
   string
 >([
-  [ESerialPortFlowControl.None, "ESerialPortFlowControl.None"],
-  [ESerialPortFlowControl.Software, "ESerialPortFlowControl.Software"],
-  [ESerialPortFlowControl.Hardware, "ESerialPortFlowControl.Hardware"],
+  [ESerialPortFlowControl.None, "ESerialPortFlowControl::None"],
+  [ESerialPortFlowControl.Software, "ESerialPortFlowControl::Software"],
+  [ESerialPortFlowControl.Hardware, "ESerialPortFlowControl::Hardware"],
 ]);
 
 export class ESerialPortFlowControlHelper {
-  toString(e: ESerialPortFlowControl) {
+  static toString(e: ESerialPortFlowControl) {
     if (kSerialPortFlowControlMap.has(e)) {
       return kSerialPortFlowControlMap.get(e);
     }
-    return "ESerialPortStopBits.One";
+    return "ESerialPortStopBits::One";
   }
 
-  fromString(str: string) {
+  static fromString(str: string) {
     let ret = ESerialPortFlowControl.None;
     for (const item of kSerialPortFlowControlMap.entries()) {
       if (item && item[1] == str) {
diff --git a/src/entities/WSProtocol.ts b/src/entities/WSProtocol.ts
index b939e75..052e6a9 100644
--- a/src/entities/WSProtocol.ts
+++ b/src/entities/WSProtocol.ts
@@ -2248,11 +2248,12 @@ export namespace Protocol {
   }
 
   export class RpcDeleteExternalControlDataRequestEntity extends PacketEntity {
-    constructor(rpc_id = 0) {
+    constructor(uuid: string, rpc_id = 0) {
       super();
       super.command = Commands.kRpcDeleteExternalControlData;
       super.flag = PacketEntity.FLAG_REQUEST;
       super.rpc_id = rpc_id;
+      this.uuid = uuid;
     }
 
     uuid = "";
@@ -2280,14 +2281,15 @@ export namespace Protocol {
   }
 
   export class RpcEditExternalControlDataRequestEntity extends PacketEntity {
-    constructor(rpc_id = 0) {
+    constructor(entity: ExternalControlTableEntity, rpc_id = 0) {
       super();
       super.command = Commands.kRpcEditExternalControlData;
       super.flag = PacketEntity.FLAG_REQUEST;
       super.rpc_id = rpc_id;
+      this.entity = entity;
     }
 
-    entity: ExternalControlTableEntity = new ExternalControlTableEntity();
+    entity: ExternalControlTableEntity;
   }
 
   export class RpcEditExternalControlDataResponseEntity extends PacketEntity {
@@ -2312,14 +2314,15 @@ export namespace Protocol {
   }
 
   export class RpcAddExternalControlDataRequestEntity extends PacketEntity {
-    constructor(rpc_id = 0) {
+    constructor(entity: ExternalControlTableEntity, rpc_id = 0) {
       super();
       super.command = Commands.kRpcAddExternalControlData;
       super.flag = PacketEntity.FLAG_REQUEST;
       super.rpc_id = rpc_id;
+      this.entity = entity;
     }
 
-    entity = new ExternalControlTableEntity();
+    entity: ExternalControlTableEntity;
   }
 
   export class RpcAddExternalControlDataResponseEntity extends PacketEntity {
@@ -2344,14 +2347,15 @@ export namespace Protocol {
   }
 
   export class CallExternalControlDataRequestEntity extends PacketEntity {
-    constructor(rpc_id = 0) {
+    constructor(uuid:string) {
       super();
       super.command = Commands.kCallExternalControlData;
       super.flag = PacketEntity.FLAG_REQUEST;
-      super.rpc_id = rpc_id;
+      super.rpc_id = 0;
+      this.uuid = uuid
     }
 
-    uuid = "";
+    uuid:string;
   }
 
   export class RpcGetExternalControlSerialPortConfigRequestEntity extends PacketEntity {
@@ -2376,14 +2380,15 @@ export namespace Protocol {
   }
 
   export class RpcSetExternalControlSerialPortConfigRequestEntity extends PacketEntity {
-    constructor(rpc_id = 0) {
+    constructor(config: SerialPortConfigEntity, rpc_id = 0) {
       super();
       super.command = Commands.kRpcSetExternalControlSerialPortConfig;
       super.flag = PacketEntity.FLAG_REQUEST;
       super.rpc_id = rpc_id;
+      this.config = config;
     }
 
-    config = new SerialPortConfigEntity();
+    config: SerialPortConfigEntity;
   }
 
   export class RpcSetExternalControlSerialPortConfigResponseEntity extends PacketEntity {
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index d9a8052..95ae568 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -440,4 +440,24 @@ export default {
   "center contorl": "中控",
   "power on": "开机",
   "power off": "关机",
+  "center control": "中控",
+  control: "控制",
+  "serial port setting": "串口设置",
+  "stop bits": "停止位",
+  parity: "校验位",
+  "character size": "数据位",
+  "baud rate": "波特率",
+  submit: "提交",
+  "set serialport": "设置串口",
+  "send command": "发送指令",
+  command: "命令",
+  name: "名称",
+  icon: "图标",
+  "new button": "新建按钮",
+  "edit button": "修改按钮",
+  example: "例",
+  "Please input vaild hex str": "请输入合法的十六进制字符串",
+  button: "按钮",
+  "send power on command": "发送开机指令",
+  "send power off command": "发送关机指令",
 };
diff --git a/src/pages/TopToolBar.vue b/src/pages/TopToolBar.vue
index 0a16725..42dea72 100644
--- a/src/pages/TopToolBar.vue
+++ b/src/pages/TopToolBar.vue
@@ -308,6 +308,7 @@
   <about-dialog ref="about_dialog" />
   <edge-blending-dialog ref="edge_blending_dialog" />
   <register-dialog ref="register_dialog" />
+  <center-control-dialog ref="center_control_dialog" />
 </template>
 
 <style scoped>
@@ -340,6 +341,7 @@ import SystemSettingDialog from "src/components/SystemSettingDialog.vue";
 import AboutDialog from "src/components/AboutDialog.vue";
 import EdgeBlendingDialog from "src/components/EdgeBlendingDialog.vue";
 import RegisterDialog from "src/components/RegisterDialog.vue";
+import CenterControlDialog from "src/components/CenterControlDialog.vue";
 
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
 import { Protocol } from "src/entities/WSProtocol";
@@ -369,6 +371,7 @@ export default defineComponent({
     AboutDialog,
     EdgeBlendingDialog,
     RegisterDialog,
+    CenterControlDialog,
   },
 
   setup() {
@@ -610,6 +613,16 @@ export default defineComponent({
             success = response?.success ?? false;
           }
         } catch {}
+        $q.notify({
+          color: success ? "positive" : "negative",
+          icon: success ? "done" : "warning",
+          message:
+            $t.t("send power off command") +
+            (success ? $t.t("success") : $t.t("fail")) +
+            "!",
+          position: "top",
+          timeout: 1500,
+        });
       },
       async powerOn() {
         let success = false;
@@ -621,6 +634,16 @@ export default defineComponent({
             success = response?.success ?? false;
           }
         } catch {}
+        $q.notify({
+          color: success ? "positive" : "negative",
+          icon: success ? "done" : "warning",
+          message:
+            $t.t("send power on command") +
+            (success ? $t.t("success") : $t.t("fail")) +
+            "!",
+          position: "top",
+          timeout: 1500,
+        });
       },
     };
   },