diff --git a/src/common/ClientConnection.ts b/src/common/ClientConnection.ts
index 7a22123..d0e3b13 100644
--- a/src/common/ClientConnection.ts
+++ b/src/common/ClientConnection.ts
@@ -387,6 +387,10 @@ export default class ClientConnection {
     );
   }
 
+  public restartDevice() {
+    this.ws?.send(JSON.stringify(new Protocol.RestartDeviceRequestEntity()));
+  }
+
   private _destoryed = false;
   public destory() {
     this._destoryed = true;
diff --git a/src/components/RecoveryDatabaseDialog.vue b/src/components/RecoveryDatabaseDialog.vue
new file mode 100644
index 0000000..a49a09e
--- /dev/null
+++ b/src/components/RecoveryDatabaseDialog.vue
@@ -0,0 +1,204 @@
+<template>
+  <q-dialog persistent v-model="show_dialog" @before-hide="resetData">
+    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 35vw">
+      <q-form @submit="onSubmit">
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-11 text-h6">
+              {{ $t("data import") }}
+            </div>
+            <div class="col-1">
+              <q-btn
+                :loading="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 style="max-height: 50vh; width: 35vw" class="scroll">
+          <q-list>
+            <q-item>
+              <q-item-section>
+                <q-uploader
+                  class="full-width"
+                  ref="uploader"
+                  :url="upload_url"
+                  method="post"
+                  :headers="generatorFileUploadHeaders"
+                  :label="$t('select data(DBP) file') + ':'"
+                  accept=".dbp"
+                  :hide-upload-btn="true"
+                  @uploaded="onUploaded"
+                  @failed="onFailed"
+                />
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            :loading="loading"
+            flat
+            :label="$t('Cancel')"
+            color="primary"
+            v-close-popup
+          />
+          <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></style>
+
+<script lang="ts">
+import { defineComponent, ref, watch, computed } from "vue";
+import { useStore } from "src/store";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+import GlobalData from "src/common/GlobalData";
+import { HttpProtocol } from "src/entities/HttpProtocol";
+import { api as viewerApi } from "v-viewer";
+
+export default defineComponent({
+  name: "ComponentRecoveryDatabaseDialog",
+
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+    let uploader: any = ref(null);
+    let loading = ref(false);
+    let upload_url = ref("");
+
+    let select_options = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+    return {
+      show_dialog,
+      loading,
+      upload_url,
+      uploader,
+      select_options,
+      generatorFileUploadHeaders(files: File[]) {
+        if (files.length > 0) {
+          return [
+            {
+              name: HttpProtocol.kHeaderXProductName,
+              value: HttpProtocol.kHeaderDefaultValueXProductName,
+            },
+            {
+              name: HttpProtocol.kHeaderXFileLength,
+              value: files[0].size,
+            },
+          ];
+        }
+        return [];
+      },
+      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.HttpUploadTypeDatabase);
+          upload_url.value = url.toString();
+        }
+      },
+      resetData() {
+        loading.value = false;
+        upload_url.value = "";
+      },
+      async onSubmit() {
+        loading.value = true;
+        try {
+          $q.dialog({
+            title: "Confirm",
+            message: $t.t("use this file to recovery data") + "?",
+            cancel: true,
+            persistent: true,
+          })
+            .onOk(() => {
+              uploader.value.upload();
+            })
+            .onCancel(() => {
+              loading.value = false;
+            });
+        } catch {}
+      },
+      onUploaded() {
+        $q.notify({
+          type: "positive",
+          message: $t.t("data import") + $t.t("success") + "!",
+          position: "top",
+          timeout: 1000,
+        });
+        $q.dialog({
+          title: "Confirm",
+          message: $t.t(
+            $t.t("data changes will take effect after the restart") +
+              "!" +
+              "<p class='text-red'>" +
+              $t.t("reboot now") +
+              "?" +
+              "</p>"
+          ),
+          html: true,
+          cancel: true,
+          persistent: true,
+        })
+          .onOk(() => {
+            GlobalData.getInstance().getCurrentClient()?.restartDevice();
+            $q.notify({
+              type: "positive",
+              message: $t.t("reboot device command sended") + "!",
+              position: "top",
+              timeout: 1000,
+            });
+          })
+          .onDismiss(() => {
+            loading.value = false;
+            show_dialog.value = false;
+          });
+      },
+      onFailed(info: any) {
+        console.log(info);
+        $q.notify({
+          type: "warning",
+          message: $t.t("data import") + $t.t("fail") + "!",
+          position: "top",
+          timeout: 1000,
+        });
+        loading.value = false;
+      },
+    };
+  },
+});
+</script>
diff --git a/src/entities/HttpProtocol.ts b/src/entities/HttpProtocol.ts
index a108a83..b760ca3 100644
--- a/src/entities/HttpProtocol.ts
+++ b/src/entities/HttpProtocol.ts
@@ -1,9 +1,13 @@
 export namespace HttpProtocol {
   export const DefaultHttpPort = 61429;
   export const RequestUploadFile = "/upload_file";
+  export const RequestPathUpdateDBBackupFile = "/common/update_db_backup_file";
+  export const RequestPathDBBackup = "/db_backup";
 
   export const UploadTypeBackgroundImage = "U_T_BACKGROUND_IMAGE";
   export const UploadTypeMedia = "U_T_MEDIA";
+  export const HttpUploadTypeDatabase = "U_T_DATABASE";
+
   export const UploadTypeRootFS = "U_T_ROOT_FS";
 
   export const kHeaderXFileLength = "X-File-Length";
diff --git a/src/entities/WSProtocol.ts b/src/entities/WSProtocol.ts
index 00ba3ec..00503c4 100644
--- a/src/entities/WSProtocol.ts
+++ b/src/entities/WSProtocol.ts
@@ -93,6 +93,10 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "SetApplicationConfig";
     }
 
+    public static get kRestartDeviceCommand() {
+      return Commands.PROTOCOL_PREFIX + "RestartDeviceCommand";
+    }
+
     static _all_commands = new Set([
       Commands.kUnKnowCommand,
       Commands.kSearchDevice,
@@ -500,4 +504,15 @@ export namespace Protocol {
     key: string = "";
     value: string = "";
   }
+
+  export class RestartDeviceRequestEntity extends Protocol.PacketEntity {
+    timestamp: number;
+    constructor() {
+      super();
+      this.timestamp = new Date().getUTCMilliseconds();
+      this.command = Protocol.Commands.kRestartDeviceCommand;
+      this.flag = Protocol.PacketEntity.FLAG_REQUEST;
+      this.rpc_id = 0;
+    }
+  }
 }
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index 7fe3494..657ba5e 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -71,4 +71,9 @@ export default {
   "use this image to background image": "确定使用这张图片作为背景图片吗",
   "upload background image": "上传图片",
   "view current background image": "查看当前底图",
+  "select data(DBP) file": "选择数据(DBP)文件",
+  "use this file to recovery data": "使用这个文件恢复数据",
+  "data changes will take effect after the restart": "数据更改将在重启后生效",
+  "reboot now": "现在重启",
+  "reboot device command sended": "重启指令已发送",
 };
diff --git a/src/pages/TopToolBar.vue b/src/pages/TopToolBar.vue
index 2b8752a..6299441 100644
--- a/src/pages/TopToolBar.vue
+++ b/src/pages/TopToolBar.vue
@@ -31,6 +31,7 @@
         icon="backup"
         :label="$t('data import')"
         class="q-mr-sm"
+        @click="$refs.recovery_database_dialog.showDialog()"
       />
       <q-btn
         stretch
@@ -38,6 +39,7 @@
         icon="restore"
         :label="$t('data export')"
         class="q-mr-sm"
+        @click="backupDB"
       />
 
       <q-space />
@@ -61,6 +63,7 @@
   </div>
   <grid-setting-dialog ref="grid_setting_dialog" />
   <background-image-dialog ref="background_image_dialog" />
+  <recovery-database-dialog ref="recovery_database_dialog" />
 </template>
 
 <script lang="ts">
@@ -69,18 +72,29 @@ import { useStore } from "src/store";
 
 import GridSettingDialog from "src/components/GridSettingDialog.vue";
 import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
+import RecoveryDatabaseDialog from "src/components/RecoveryDatabaseDialog.vue";
 
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
 import { Protocol } from "src/entities/WSProtocol";
 import GlobalData from "src/common/GlobalData";
+import { api } from "boot/axios";
+import { HttpProtocol } from "src/entities/HttpProtocol";
+import { openURL, useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   name: "PageTopToolBar",
 
-  components: { GridSettingDialog, BackgroundImageDialog },
+  components: {
+    GridSettingDialog,
+    BackgroundImageDialog,
+    RecoveryDatabaseDialog,
+  },
 
   setup() {
     let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
 
     interface _ResponseMessage {
       packet: Protocol.PacketEntity;
@@ -119,7 +133,34 @@ export default defineComponent({
       }
     );
 
-    return {};
+    return {
+      async backupDB() {
+        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.RequestPathUpdateDBBackupFile;
+          url.protocol = "http:";
+          console.log(url.toString());
+          let response = await api.get(url.toString());
+          console.log(response.data);
+          if (response.status == 200 && response && response.data) {
+            url.pathname =
+              HttpProtocol.RequestPathDBBackup + "/" + response.data;
+            openURL(url.toString());
+          } else {
+            $q.notify({
+              type: "warning",
+              message: $t.t("data export ") + $t.t("fail") + "!",
+              position: "top",
+              timeout: 1000,
+            });
+          }
+        }
+      },
+    };
   },
 });
 </script>