diff --git a/public/media_control_client_product.js b/public/media_control_client_product.js
index 0a5a8ac..123ec32 100644
--- a/public/media_control_client_product.js
+++ b/public/media_control_client_product.js
@@ -1,3 +1,5 @@
 window.media_control_client_product = "LED_PLAYER";
 // window.media_control_client_product = "SPECIAL_VIDEO";
 // window.media_control_client_product = "RK_3568";
+
+window.media_control_client_custom_title = "SmartPlayer";
diff --git a/src/common/ClientConnection.ts b/src/common/ClientConnection.ts
index 97e1df6..b9a3f6a 100644
--- a/src/common/ClientConnection.ts
+++ b/src/common/ClientConnection.ts
@@ -1519,6 +1519,15 @@ export default class ClientConnection {
       console.error(e);
     }
   }
+  public async CheckModeIndex(mode_index:number) {
+    try {
+      return await this.doRpc<Protocol.RpcCheckModeIndexResponseEntity>(
+        new Protocol.RpcCheckModeIndexRequestEntity(mode_index)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
 }
 
 export interface NotifyMessage {
diff --git a/src/components/BackgroundImageDialog.vue b/src/components/BackgroundImageDialog.vue
index 6b6df9c..46d69be 100644
--- a/src/components/BackgroundImageDialog.vue
+++ b/src/components/BackgroundImageDialog.vue
@@ -1,256 +1,226 @@
-<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: 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("background image") }}
-            </div>
-            <div class="col-1">
-              <q-btn
-                :loading="loading"
-                flat
-                round
-                icon="close"
-                :disable="loading"
-                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 background image') + ':'"
-                  :accept="$store.state.isSpecialVideo() ? '.svdoj' : 'image/*'"
-                  :hide-upload-btn="true"
-                  @uploaded="onUploaded"
-                  @failed="onFailed"
-                  @added="(files) => files && (file_count += files.length)"
-                  @removed="(files) => files && (file_count -= files.length)"
-                />
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-card-section>
-
-        <q-separator />
-
-        <q-card-actions align="left">
-          <q-btn
-            v-if="$store.state.isLedPlayer()"
-            flat
-            no-caps
-            :loading="loading"
-            color="primary"
-            @click="showBackgroundImage"
-            :label="$t('view current background image')"
-          />
-          <q-space />
-          <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-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: "ComponentBackgroundImageDialog",
-
-  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 file_count = ref(0);
-
-    return {
-      show_dialog,
-      loading,
-      upload_url,
-      uploader,
-      file_count,
-      loga(a: any) {
-        console.log(a);
-      },
-      generatorFileUploadHeaders(files: File[]) {
-        if (files.length > 0) {
-          return [
-            {
-              name: HttpProtocol.kHeaderXProductName,
-              value: HttpProtocol.getProductName($store),
-            },
-            {
-              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.UploadTypeBackgroundImage
-          );
-          upload_url.value = url.toString();
-        }
-      },
-      resetData() {
-        loading.value = false;
-        upload_url.value = "";
-        file_count.value = 0;
-      },
-      showBackgroundImage() {
-        const temp_port =
-          GlobalData.getInstance().applicationConfig?.httpserver_port ??
-          HttpProtocol.DefaultHttpPort.toString();
-        try {
-          const url = new URL(
-            GlobalData.getInstance().getCurrentClient()?.url ??
-              "http://127.0.0.1:" + temp_port
-          );
-          url.protocol = "http";
-          url.port = temp_port.toString();
-          url.pathname = "/static/background_image.png";
-          viewerApi({
-            options: {
-              toolbar: true,
-              url: "data-source",
-              initialViewIndex: 0,
-            },
-            images: [
-              {
-                src: url.toString(),
-                "data-source": url.toString(),
-              },
-            ],
-          });
-        } catch {}
-      },
-      async onSubmit() {
-        if (file_count.value <= 0) {
-          $q.notify({
-            type: "warning",
-            message: $t.t("please select file first") + "!",
-            position: "top",
-            timeout: 1500,
-          });
-          return;
-        }
-        loading.value = true;
-        try {
-          $q.dialog({
-            title: $t.t("Confirm"),
-            message: $t.t("use this image to background image") + "?",
-            ok: {
-              label: $t.t("ok"),
-              noCaps: true,
-              flat: true,
-            },
-            cancel: {
-              label: $t.t("cancel"),
-              noCaps: true,
-              flat: true,
-            },
-            persistent: true,
-          })
-            .onOk(() => {
-              uploader.value.upload();
-            })
-            .onCancel(() => {
-              loading.value = false;
-            });
-        } catch {}
-      },
-      onUploaded() {
-        $q.notify({
-          type: "positive",
-          message: $t.t("upload background image") + $t.t("success") + "!",
-          position: "top",
-          timeout: 1500,
-        });
-        loading.value = false;
-        show_dialog.value = false;
-      },
-      onFailed(info: any) {
-        console.log(info);
-        $q.notify({
-          type: "warning",
-          message: $t.t("upload background image") + $t.t("fail") + "!",
-          position: "top",
-          timeout: 1500,
-        });
-        loading.value = false;
-      },
-    };
-  },
-});
-</script>
+<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: 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("background image") }}
+            </div>
+            <div class="col-1">
+              <q-btn
+                :loading="loading"
+                flat
+                round
+                icon="close"
+                :disable="loading"
+                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"
+                  :label="$t('select background image') + ':'"
+                  :accept="$store.state.isSpecialVideo() ? '.svdoj' : 'image/*'"
+                  :hide-upload-btn="true"
+                  @uploaded="onUploaded"
+                  @failed="onFailed"
+                  @added="(files) => files && (file_count += files.length)"
+                  @removed="(files) => files && (file_count -= files.length)"
+                />
+                <!-- :headers="generatorFileUploadHeaders" -->
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="left">
+          <q-btn
+            v-if="$store.state.isLedPlayer()"
+            flat
+            no-caps
+            :loading="loading"
+            color="primary"
+            @click="showBackgroundImage()"
+            :label="$t('view current background image')"
+          />
+          <q-space />
+          <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-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: "ComponentBackgroundImageDialog",
+
+  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 file_count = ref(0);
+
+    return {
+      show_dialog,
+      loading,
+      upload_url,
+      uploader,
+      file_count,
+      loga(a: any) {
+        console.log(a);
+      },
+      showDialog() {
+        show_dialog.value = true;
+        let url = GlobalData.getInstance().createCurrentRequestUrl();
+        if (url) {
+          url.pathname = "/upload_background_image_file";
+          upload_url.value = url.toString();
+        }
+      },
+      resetData() {
+        loading.value = false;
+        upload_url.value = "";
+        file_count.value = 0;
+      },
+      showBackgroundImage() {
+        try {
+          let url = GlobalData.getInstance().createCurrentRequestUrl();
+          if (url) {
+            url.pathname = "/get_background_image_file";
+            viewerApi({
+              options: {
+                toolbar: true,
+                url: "data-source",
+                initialViewIndex: 0,
+              },
+              images: [
+                {
+                  src: url.toString(),
+                  "data-source": url.toString(),
+                },
+              ],
+            });
+          }
+        } catch {}
+      },
+      async onSubmit() {
+        if (file_count.value <= 0) {
+          $q.notify({
+            type: "warning",
+            message: $t.t("please select file first") + "!",
+            position: "top",
+            timeout: 1500,
+          });
+          return;
+        }
+        loading.value = true;
+        try {
+          $q.dialog({
+            title: $t.t("Confirm"),
+            message: $t.t("use this image to background image") + "?",
+            ok: {
+              label: $t.t("ok"),
+              noCaps: true,
+              flat: true,
+            },
+            cancel: {
+              label: $t.t("cancel"),
+              noCaps: true,
+              flat: true,
+            },
+            persistent: true,
+          })
+            .onOk(() => {
+              uploader.value.upload();
+            })
+            .onCancel(() => {
+              loading.value = false;
+            });
+        } catch {}
+      },
+      onUploaded() {
+        $q.notify({
+          type: "positive",
+          message: $t.t("upload background image") + $t.t("success") + "!",
+          position: "top",
+          timeout: 1500,
+        });
+        loading.value = false;
+        show_dialog.value = false;
+      },
+      onFailed(info: any) {
+        console.log(info);
+        $q.notify({
+          type: "warning",
+          message: $t.t("upload background image") + $t.t("fail") + "!",
+          position: "top",
+          timeout: 1500,
+        });
+        loading.value = false;
+      },
+    };
+  },
+});
+</script>
diff --git a/src/components/FileManageDialog.vue b/src/components/FileManageDialog.vue
index 098f259..22d4d9e 100644
--- a/src/components/FileManageDialog.vue
+++ b/src/components/FileManageDialog.vue
@@ -346,14 +346,12 @@
             style="height: 69vh; width: 70%"
             :disable="uploader_loading"
             :url="getUrl"
-            method="post"
-            :headers="generatorFileUploadHeaders"
+            multiple
+            method="POST"
             :label="$t('select file') + ':'"
             :accept="uploader_accept"
             @start="onStartUpload"
-            @uploaded="onUploaded"
-            @failed="onFailed"
-            @added="/*onFileAdded*/ null"
+            @finish="onFailed"
           >
           </q-uploader>
           <q-space />
@@ -687,7 +685,6 @@ export default defineComponent({
       loading.value = false;
     };
 
-
     const refresh_file_list_async = async () => {
       const response = await _request_list_files(path.value);
       _show_files(response);
@@ -882,21 +879,6 @@ export default defineComponent({
           resolve = _resolve;
         });
       },
-      generatorFileUploadHeaders(files: File[]) {
-        if (files.length > 0) {
-          return [
-            {
-              name: HttpProtocol.kHeaderXProductName,
-              value: HttpProtocol.getProductName($store),
-            },
-            {
-              name: HttpProtocol.kHeaderXFileLength,
-              value: files[0].size,
-            },
-          ];
-        }
-        return [];
-      },
       resetData() {
         loading.value = false;
         uploading.value = false;
@@ -912,67 +894,135 @@ export default defineComponent({
         resolve_value = null;
       },
       async onCreateNewFolder() {
-          $q.dialog({
-            title: $t.t("create folder"),
-            message: $t.t("input folder name") + ":",
-            prompt: {
-              model: "",
-              isValid: (val: string) => !!val && val.trim().length > 0,
-              type: "text",
-            },
-            ok: {
-              label: $t.t("ok"),
-              noCaps: true,
-              flat: true,
-            },
-            cancel: {
-              label: $t.t("cancel"),
-              noCaps: true,
-              flat: true,
-            },
-            persistent: true,
-          }).onOk(async (data: string) => {
-              const response = await GlobalData.getInstance()
-                .getCurrentClient()
-                ?.CreateDirectoryFileManager(path.value, data);
-              if (response && response.success) {
-                refresh_file_list();
-                $q.notify({
-                  type: "positive",
-                  message: $t.t("create folder") + $t.t("success") + "!",
-                  position: "top",
-                  timeout: 1500,
-                });
-              } else {
-                $q.notify({
-                  type: "warning",
-                  message:
-                    $t.t("create folder") +
-                    $t.t("fail") +
-                    "!" +
-                    (response ? response.error_message : ""),
-                  position: "top",
-                  timeout: 1500,
-                });
-              }
-          });
-      },
-
-      selectFile,
-      async deleteFile(file: FileEntity) {
-          let response = null;
-          try {
-            response = await GlobalData.getInstance()
-              .getCurrentClient()
-              ?.DeleteFileManager(path.value, file.name);
-          } catch (e) {
-            console.log(e);
-          }
+        $q.dialog({
+          title: $t.t("create folder"),
+          message: $t.t("input folder name") + ":",
+          prompt: {
+            model: "",
+            isValid: (val: string) =>
+              !!val && val.trim().length > 0&& val.indexOf(".") != 0 ,
+            type: "text",
+          },
+          ok: {
+            label: $t.t("ok"),
+            noCaps: true,
+            flat: true,
+          },
+          cancel: {
+            label: $t.t("cancel"),
+            noCaps: true,
+            flat: true,
+          },
+          persistent: true,
+        }).onOk(async (data: string) => {
+          const response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.CreateDirectoryFileManager(path.value, data);
+          console.log(response);
           if (response && response.success) {
             refresh_file_list();
             $q.notify({
               type: "positive",
-              message: $t.t("delete file") + $t.t("success") + "!",
+              message: $t.t("create folder") + $t.t("success") + "!",
+              position: "top",
+              timeout: 1500,
+            });
+          } else {
+            // if (
+            //   response?.error_message ==
+            //   "the folder name cannot start with a '.'"
+            // ) {
+            //   $q.notify({
+            //     type: "warning",
+            //     message:
+            //       $t.t("create folder") +
+            //       $t.t("fail") +
+            //       "!" +
+            //       $t.t("the folder name cannot start with a '.'"),
+            //     position: "top",
+            //     timeout: 1500,
+            //   });
+            // }
+            //  else {
+            if (response) {
+              $q.notify({
+                type: "warning",
+                message:
+                  $t.t("create folder") +
+                  $t.t("fail") +
+                  "! " +
+                  $t.t(response.error_message),
+                position: "top",
+                timeout: 1500,
+              });
+            }
+          }
+        });
+      },
+
+      selectFile,
+      async deleteFile(file: FileEntity) {
+        let response = null;
+        try {
+          response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.DeleteFileManager(path.value, file.name);
+        } catch (e) {
+          console.log(e);
+        }
+        if (response && response.success) {
+          refresh_file_list();
+          $q.notify({
+            type: "positive",
+            message: $t.t("delete file") + $t.t("success") + "!",
+            position: "top",
+            timeout: 1500,
+          });
+        } else {
+          $q.notify({
+            type: "warning",
+            message:
+              $t.t("delete file") +
+              $t.t("fail") +
+              "!" +
+              (response ? response.error_message : ""),
+            position: "top",
+            timeout: 1500,
+          });
+        }
+      },
+      renameFile(file: FileEntity) {
+        $q.dialog({
+          title: $t.t("rename"),
+          message: $t.t("input new file name") + ":",
+          prompt: {
+            model: file.name,
+            isValid: (val: string) => !!val && val.trim().length > 0,
+            type: "text",
+          },
+          ok: {
+            label: $t.t("ok"),
+            noCaps: true,
+            flat: true,
+          },
+          cancel: {
+            label: $t.t("cancel"),
+            noCaps: true,
+            flat: true,
+          },
+          persistent: true,
+        }).onOk(async (data: string) => {
+          if (data == file.name) {
+            return;
+          }
+          let response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.RenameFileManager(path.value, file.name, data);
+          if (response && response.success) {
+            refresh_file_list();
+            $q.notify({
+              type: "positive",
+              message: $t.t("file rename") + $t.t("success") + "!",
               position: "top",
               timeout: 1500,
             });
@@ -980,7 +1030,7 @@ export default defineComponent({
             $q.notify({
               type: "warning",
               message:
-                $t.t("delete file") +
+                $t.t("file rename") +
                 $t.t("fail") +
                 "!" +
                 (response ? response.error_message : ""),
@@ -988,55 +1038,7 @@ export default defineComponent({
               timeout: 1500,
             });
           }
-      },
-      renameFile(file: FileEntity) {
-          $q.dialog({
-            title: $t.t("rename"),
-            message: $t.t("input new file name") + ":",
-            prompt: {
-              model: file.name,
-              isValid: (val: string) => !!val && val.trim().length > 0,
-              type: "text",
-            },
-            ok: {
-              label: $t.t("ok"),
-              noCaps: true,
-              flat: true,
-            },
-            cancel: {
-              label: $t.t("cancel"),
-              noCaps: true,
-              flat: true,
-            },
-            persistent: true,
-          }).onOk(async (data: string) => {
-            if (data == file.name) {
-              return;
-            }
-              let response = await GlobalData.getInstance()
-                .getCurrentClient()
-                ?.RenameFileManager(path.value, file.name, data);
-              if (response && response.success) {
-                refresh_file_list();
-                $q.notify({
-                  type: "positive",
-                  message: $t.t("file rename") + $t.t("success") + "!",
-                  position: "top",
-                  timeout: 1500,
-                });
-              } else {
-                $q.notify({
-                  type: "warning",
-                  message:
-                    $t.t("file rename") +
-                    $t.t("fail") +
-                    "!" +
-                    (response ? response.error_message : ""),
-                  position: "top",
-                  timeout: 1500,
-                });
-              }
-          });
+        });
       },
       copyStringToClipboard(value: string) {
         copyToClipboard(value);
@@ -1068,8 +1070,8 @@ export default defineComponent({
       getUrl(file: File[]) {
         let url = GlobalData.getInstance().createCurrentRequestUrl();
         if (url) {
-          url.pathname = HttpProtocol.RequestUploadFile;
-          url.searchParams.append("type", HttpProtocol.HttpUploadTypeNormal);
+          url.pathname = "/upload_media_file"; //HttpProtocol.RequestUploadFile;
+          // url.searchParams.append("type", HttpProtocol.HttpUploadTypeNormal);
           url.searchParams.append("base_dir", path.value);
           return url.toString();
         }
@@ -1078,99 +1080,20 @@ export default defineComponent({
       onStartUpload() {
         loading.value = true;
       },
-      async onFileAdded(files: File[] | File) {
-        setTimeout(async () => {
-          const onError = async (file: File | null) => {
-            await nextTick(() => {});
-            uploader.value.reset();
-
+      async onFailed(info: any) {
+        let file_list: any = await _request_list_files(path.value);
+        setTimeout(() => {
+          if (files.value.length != file_list.files.length) {
             $q.notify({
-              color: "negative",
-              icon: "warning",
-              message: $t.t("load file error") + "!",
+              type: "positive",
+              message: $t.t("file upload") + $t.t("finish") + "!",
               position: "top",
-              timeout: 3000,
+              timeout: 1500,
             });
-          };
-
-          let file: File | null = null;
-
-          try {
-            if (Array.isArray(files)) {
-              if (files.length > 0) {
-                file = files[0];
-              }
-            } else {
-              file = files;
-            }
-            if (file) {
-              const file_name = file.name;
-              const blob = file.slice(0, 1024 * 1024 * 1); // 1 MB
-              uploader_loading.value = true;
-
-              try {
-                let url = GlobalData.getInstance().createCurrentRequestUrl();
-                if (url) {
-                  url.pathname = HttpProtocol.RequestPathCheckFileSupport;
-
-                  // if (FileSuffixHelper.isVideoPath(file_name)) {
-
-                  // }
-                  const data = new FormData();
-                  data.append(
-                    "file",
-                    new File([blob], file_name, {
-                      lastModified: file.lastModified,
-                    })
-                  );
-                  const response = await api.post(url.toString(), data, {
-                    headers: {
-                      "Content-Type": "multipart/form-data",
-                    },
-                  });
-                  if (response && response.data && response.data.is_support) {
-                  } else {
-                    onError(file);
-                  }
-                } else {
-                  throw "";
-                }
-              } catch (e) {
-                console.error(e);
-                onError(file);
-              }
-              uploader_loading.value = false;
-              return;
-            }
-          } catch (e) {
-            console.error(e);
-            onError(file);
+            loading.value = false;
+            uploading.value = false;
           }
-        }, 1);
-      },
-      onUploaded() {
-        uploading.value = false;
-        uploader.value.reset();
-        refresh_file_list();
-
-        $q.notify({
-          type: "positive",
-          message: $t.t("file upload") + $t.t("success") + "!",
-          position: "top",
-          timeout: 1500,
-        });
-        loading.value = false;
-      },
-      onFailed(info: any) {
-        console.log(info);
-        $q.notify({
-          type: "warning",
-          message: $t.t("file upload") + $t.t("fail") + "!",
-          position: "top",
-          timeout: 1500,
-        });
-        loading.value = false;
-        loading.value = false;
+        }, 500);
       },
       copyFile(file: FileEntity) {
         if (file) {
diff --git a/src/components/ModeDialog.vue b/src/components/ModeDialog.vue
index d218726..be459a0 100644
--- a/src/components/ModeDialog.vue
+++ b/src/components/ModeDialog.vue
@@ -1,537 +1,541 @@
-<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: 45vw">
-      <q-form @submit="onSubmit">
-        <q-card-section class="q-ma-none q-pa-sm">
-          <div class="row">
-            <div class="col-auto text-h6">
-              {{
-                type == 1
-                  ? $t("add mode")
-                  : type == 2
-                  ? $t("edit mode")
-                  : $t("add mode")
-              }}
-            </div>
-            <q-space />
-            <div>
-              <q-btn
-                :loading="loading"
-                flat
-                round
-                icon="close"
-                :disable="loading"
-                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: 45vw" class="scroll">
-          <q-list>
-            <q-item>
-              <q-item-label>{{ $t("parent group") }}:</q-item-label>
-            </q-item>
-            <q-item class="q-pa-none q-ma-none">
-              <q-item-section style="padding-right: 10px">
-                <q-tree
-                  ref="tree"
-                  class="scroll"
-                  :class="loading ? 'disable_tree' : ''"
-                  v-model:selected="selected"
-                  :nodes="tree_nodes"
-                  default-expand-all
-                  node-key="uuid"
-                  labelKey="name"
-                  filter="group filter"
-                  :filter-method="treeNodesFilter"
-                >
-                  <template v-slot:default-header="prop">
-                    <q-item
-                      class="full-width"
-                      :class="
-                        prop.tree.selected == prop.key ? 'item-selected-bg' : ''
-                      "
-                    >
-                      <q-item-section avatar>
-                        <q-icon
-                          :name="'img:source_icon/group.png'"
-                          color="orange"
-                          size="28px"
-                          class="q-mr-sm"
-                        />
-                      </q-item-section>
-                      <q-item-section>
-                        <div class="text-weight-bold text-primary">
-                          {{ prop.node.name }}
-                        </div>
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-tree>
-              </q-item-section>
-            </q-item>
-            <q-item>
-              <q-item-section>
-                <q-input
-                  autofocus
-                  :loading="loading"
-                  :disable="loading"
-                  filled
-                  v-model="name"
-                  :label="$t('mode name')"
-                  :hint="$t('please input mode name')"
-                  lazy-rules
-                  :rules="[
-                    (val) =>
-                      (val && val.length > 0) || $t('Please type something'),
-                  ]"
-                  @keydown="
-                    (evt) => {
-                      if (evt.keyCode == 13) {
-                        $refs?.accept?.click();
-                      }
-                    }
-                  "
-                >
-                  <template v-if="name" v-slot:append>
-                    <q-icon
-                      name="cancel"
-                      @click.stop="name = null"
-                      class="cursor-pointer"
-                    />
-                  </template>
-                </q-input>
-              </q-item-section>
-            </q-item>
-            <q-item>
-              <q-item-section>
-                <q-input
-                  autofocus
-                  :loading="loading"
-                  :disable="loading"
-                  filled
-                  type="number"
-                  min="0"
-                  max="65535"
-                  v-model.number="index"
-                  :label="$t('mode index')"
-                  :hint="$t('please input mode index')"
-                  lazy-rules
-                  :rules="[checkIndex]"
-                  @keydown="
-                    (evt) => {
-                      if (evt.keyCode == 13) {
-                        $refs?.accept?.click();
-                      }
-                    }
-                  "
-                >
-                </q-input>
-              </q-item-section>
-            </q-item>
-            <q-item
-              v-show="
-                !$store.state.custom_defines.is_custom_isv ||
-                $store.state.advanced_debug
-              "
-            >
-              <q-card class="full-width" style="height: 25vh">
-                <q-card-section
-                  ><span>{{ $t("joint action equipment") }}</span>
-                  <q-btn
-                    style="float: right; top: -10px"
-                    round
-                    flat
-                    icon="add"
-                    color="green"
-                    @click="addEquipment"
-                  >
-                    <q-tooltip>{{ $t("add") }}</q-tooltip>
-                  </q-btn>
-                </q-card-section>
-                <q-separator />
-                <q-scroll-area style="height: 19vh" class="full-width scroll">
-                  <q-list class="fit">
-                    <q-item v-for="(item, index) of equipments" :key="index">
-                      <q-item-section avatar class="q-mr-md">
-                        {{ $t("equipment") }}:
-                      </q-item-section>
-                      <q-item-section>
-                        <q-select
-                          :options="equipment_options"
-                          emit-value
-                          map-options
-                          v-model="item.key"
-                          option-value="key"
-                          option-label="value"
-                          lazy-rules
-                        />
-                        <!-- {{ getEquipmentName(item.key) }} -->
-                      </q-item-section>
-                      <q-item-section avatar class="q-mr-md">
-                        {{ $t("mode") }}:
-                      </q-item-section>
-                      <q-item-section>
-                        <q-input v-model="item.value"></q-input>
-                      </q-item-section>
-                      <q-space />
-                      <q-item-section avatar>
-                        <q-btn
-                          @click="deleteEquipment(index)"
-                          round
-                          flat
-                          icon="delete"
-                          color="red"
-                        >
-                          <q-tooltip>{{ $t("delete") }}</q-tooltip>
-                        </q-btn>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-scroll-area>
-              </q-card>
-            </q-item>
-          </q-list>
-        </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-form>
-    </q-card>
-  </q-dialog>
-  <list-joint-action-equipment-dialog
-    ref="list_joint_action_equipment_dialog"
-  />
-</template>
-
-<style scoped>
-.disable_tree {
-  background: #9e9e9e;
-  cursor: wait;
-  pointer-events: none;
-}
-</style>
-
-<script lang="ts">
-import { defineComponent, ref, watch, computed, Ref } from "vue";
-import { useStore } from "src/store";
-import GlobalData from "src/common/GlobalData";
-import { useQuasar } from "quasar";
-import { useI18n } from "vue-i18n";
-import { api } from "boot/axios";
-import { HttpProtocol } from "src/entities/HttpProtocol";
-import { StringKeyValueEntity } from "src/entities/StringKeyValueEntity";
-import ListJointActionEquipmentDialog from "src/components/ListJointActionEquipmentDialog.vue";
-import JointActionEquipmentTableEntity from "src/entities/JointActionEquipmentTableEntity";
-import EventBus, { EventNamesDefine } from "src/common/EventBus";
-
-export default defineComponent({
-  name: "ComponentModeDialog",
-
-  components: { ListJointActionEquipmentDialog },
-
-  setup() {
-    let $store = useStore();
-    let $q = useQuasar();
-    let $t = useI18n();
-
-    let show_dialog = ref(false);
-    let type = ref(1);
-    let name = ref(null);
-    let backup_index = 0;
-    let index = ref(0);
-    let uuid = ref("");
-    const selected: any = ref(null);
-    let loading = ref(false);
-
-    const equipments: Ref<StringKeyValueEntity[]> = ref([]);
-    const list_joint_action_equipment_dialog: Ref<any> = ref(null);
-
-    const equipment_options: Ref<StringKeyValueEntity[]> = ref([]);
-
-    const tree_nodes = computed({
-      get: () => $store.state.mode_tree,
-      set: (val) => {},
-    });
-
-    watch(
-      () => selected.value,
-      (newValue, oldValue) => {
-        if (newValue == null) {
-          selected.value = "";
-        }
-      }
-    );
-
-    const requestAddMode = async () => {
-      let response = await GlobalData.getInstance()
-        .getCurrentClient()
-        ?.addMode(
-          selected.value,
-          name.value ?? "",
-          index.value,
-          equipments.value
-        );
-      if (response) {
-        $q.notify({
-          color: response.success ? "positive" : "negative",
-          icon: response.success ? "done" : "warning",
-          message:
-            $t.t("add mode") +
-            (response.success ? $t.t("success") : $t.t("fail")) +
-            "!",
-          position: "top",
-          timeout: 1500,
-        });
-      }
-    };
-
-    const requestEditMode = async () => {
-      let response = await GlobalData.getInstance()
-        .getCurrentClient()
-        ?.editMode(
-          uuid.value,
-          name.value ?? "",
-          index.value,
-          selected.value,
-          equipments.value
-        );
-      if (response) {
-        $q.notify({
-          color: response.success ? "positive" : "negative",
-          icon: response.success ? "done" : "warning",
-          message:
-            $t.t("edit mode") +
-            (response.success ? $t.t("success") : $t.t("fail")) +
-            "!",
-          position: "top",
-          timeout: 1500,
-        });
-      }
-    };
-
-    const updateEquipmentOptions = () => {
-      GlobalData.getInstance()
-        .getCurrentClient()
-        ?.getJointActionEquipments()
-        .then((response) => {
-          if (response && Array.isArray(response.entities)) {
-            equipment_options.value = [];
-            for (const item of response.entities) {
-              if (item) {
-                equipment_options.value.push({
-                  key: item.uuid,
-                  value: item.name,
-                });
-              }
-            }
-          }
-        });
-    };
-
-    EventBus.getInstance().on(
-      EventNamesDefine.RefreshJointActionEquipmentList,
-      () => {
-        updateEquipmentOptions();
-      }
-    );
-
-    return {
-      show_dialog,
-      type,
-      name,
-      index,
-      uuid,
-      selected,
-      loading,
-      tree_nodes,
-      equipments,
-      equipment_options,
-
-      list_joint_action_equipment_dialog,
-
-      showDialog(options: any) {
-        if (options) {
-          type.value = options.type ?? 1;
-          if (type.value == 2) {
-            name.value = options.data?.name ?? null;
-            selected.value = options.data?.item_data?.group_uuid ?? null;
-            uuid.value = options.data?.item_data?.uuid ?? null;
-            index.value = options.data?.item_data?.number ?? 0;
-            backup_index = index.value;
-            equipments.value =
-              options.data?.item_data?.joint_action_equipments ?? [];
-          } else {
-            selected.value = options.data?.uuid ?? null;
-            uuid.value = options.data?.uuid ?? null;
-            index.value = 0;
-          }
-
-          updateEquipmentOptions();
-          equipments.value = [];
-          {
-            let obj = null;
-            if (
-              typeof options.data?.item_data?.joint_action_equipments ==
-              "string"
-            ) {
-              try {
-                obj = JSON.parse(
-                  options.data?.item_data?.joint_action_equipments
-                );
-              } catch (e) {
-                console.error(e);
-              }
-            }
-            if (Array.isArray(obj)) {
-              for (const item of obj) {
-                if (item && typeof item != "undefined") {
-                  const temp_item = item as StringKeyValueEntity;
-                  if (temp_item) {
-                    const f = equipment_options.value.find(
-                      (element) => element && element.key == temp_item.key
-                    );
-                    if (f) {
-                      equipments.value.push(temp_item);
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-        show_dialog.value = true;
-      },
-      resetData() {
-        loading.value = false;
-        equipments.value = [];
-        selected.value = null;
-        name.value = null;
-        type.value = 1;
-        backup_index = 0;
-      },
-      treeNodesFilter(node: any, filter: any) {
-        return node.is_group;
-      },
-      checkIndex(val: number) {
-        return new Promise(async (resolve, reject) => {
-          if (val < 0) {
-            resolve($t.t("Please type 0~65535"));
-          } else {
-            try {
-              let url = GlobalData.getInstance().createCurrentRequestUrl();
-              if (!url) {
-                url = new URL(window.location.hostname);
-              }
-              url.pathname = HttpProtocol.RequestCheckModeIndex;
-              url.searchParams.append("index", index.value.toString());
-              let response = (await api.get(url.toString())).data as boolean;
-              if (typeof response != "boolean") {
-                try {
-                  response = JSON.parse(response);
-                } catch {
-                  response = false;
-                }
-              }
-              if (index.value == backup_index) {
-                response = true;
-              }
-              if (!response) {
-                resolve($t.t("index exised") + "!");
-              } else {
-                resolve(true);
-              }
-            } catch (e) {
-              resolve($t.t("check error"));
-            }
-          }
-        });
-      },
-      async onSubmit() {
-        loading.value = true;
-        try {
-          await (type.value == 2 ? requestEditMode() : requestAddMode());
-          show_dialog.value = false;
-        } catch {}
-        loading.value = false;
-      },
-      async addEquipment() {
-        const response = await GlobalData.getInstance()
-          .getCurrentClient()
-          ?.getJointActionEquipments();
-        if (response && Array.isArray(response.entities)) {
-          if (response.entities.length) {
-            const v = new StringKeyValueEntity();
-            v.key = response.entities[0].uuid;
-            v.value = "mode name";
-            equipments.value.push(v);
-          } else {
-            $q.notify({
-              color: "warning",
-              icon: "warning",
-              message: $t.t(
-                "joint action equipment is empty! please add equipment first!"
-              ),
-              position: "top",
-              timeout: 1500,
-            });
-
-            if (list_joint_action_equipment_dialog.value) {
-              list_joint_action_equipment_dialog.value.showDialog();
-            }
-          }
-        } else {
-          $q.notify({
-            color: "negative",
-            icon: "warning",
-            message: "data error!",
-            position: "top",
-            timeout: 1500,
-          });
-        }
-      },
-      deleteEquipment(index: number) {
-        equipments.value.splice(index, 1);
-      },
-    };
-  },
-});
-</script>
+<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: 45vw">
+      <q-form @submit="onSubmit">
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-auto text-h6">
+              {{
+                type == 1
+                  ? $t("add mode")
+                  : type == 2
+                  ? $t("edit mode")
+                  : $t("add mode")
+              }}
+            </div>
+            <q-space />
+            <div>
+              <q-btn
+                :loading="loading"
+                flat
+                round
+                icon="close"
+                :disable="loading"
+                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: 45vw" class="scroll">
+          <q-list>
+            <q-item>
+              <q-item-label>{{ $t("parent group") }}:</q-item-label>
+            </q-item>
+            <q-item class="q-pa-none q-ma-none">
+              <q-item-section style="padding-right: 10px">
+                <q-tree
+                  ref="tree"
+                  class="scroll"
+                  :class="loading ? 'disable_tree' : ''"
+                  v-model:selected="selected"
+                  :nodes="tree_nodes"
+                  default-expand-all
+                  node-key="uuid"
+                  labelKey="name"
+                  filter="group filter"
+                  :filter-method="treeNodesFilter"
+                >
+                  <template v-slot:default-header="prop">
+                    <q-item
+                      class="full-width"
+                      :class="
+                        prop.tree.selected == prop.key ? 'item-selected-bg' : ''
+                      "
+                    >
+                      <q-item-section avatar>
+                        <q-icon
+                          :name="'img:source_icon/group.png'"
+                          color="orange"
+                          size="28px"
+                          class="q-mr-sm"
+                        />
+                      </q-item-section>
+                      <q-item-section>
+                        <div class="text-weight-bold text-primary">
+                          {{ prop.node.name }}
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-tree>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-input
+                  autofocus
+                  :loading="loading"
+                  :disable="loading"
+                  filled
+                  v-model="name"
+                  :label="$t('mode name')"
+                  :hint="$t('please input mode name')"
+                  lazy-rules
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || $t('Please type something'),
+                  ]"
+                  @keydown="
+                    (evt) => {
+                      if (evt.keyCode == 13) {
+                        $refs?.accept?.click();
+                      }
+                    }
+                  "
+                >
+                  <template v-if="name" v-slot:append>
+                    <q-icon
+                      name="cancel"
+                      @click.stop="name = null"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </q-input>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-input
+                  autofocus
+                  :loading="loading"
+                  :disable="loading"
+                  filled
+                  type="number"
+                  min="0"
+                  max="65535"
+                  v-model.number="index"
+                  :label="$t('mode index')"
+                  :hint="$t('please input mode index')"
+                  lazy-rules
+                  :rules="[checkIndex]"
+                  @keydown="
+                    (evt) => {
+                      if (evt.keyCode == 13) {
+                        $refs?.accept?.click();
+                      }
+                    }
+                  "
+                >
+                </q-input>
+              </q-item-section>
+            </q-item>
+            <q-item
+              v-show="
+                !$store.state.custom_defines.is_custom_isv ||
+                $store.state.advanced_debug
+              "
+            >
+              <q-card class="full-width" style="height: 25vh">
+                <q-card-section
+                  ><span>{{ $t("joint action equipment") }}</span>
+                  <q-btn
+                    style="float: right; top: -10px"
+                    round
+                    flat
+                    icon="add"
+                    color="green"
+                    @click="addEquipment"
+                  >
+                    <q-tooltip>{{ $t("add") }}</q-tooltip>
+                  </q-btn>
+                </q-card-section>
+                <q-separator />
+                <q-scroll-area style="height: 19vh" class="full-width scroll">
+                  <q-list class="fit">
+                    <q-item v-for="(item, index) of equipments" :key="index">
+                      <q-item-section avatar class="q-mr-md">
+                        {{ $t("equipment") }}:
+                      </q-item-section>
+                      <q-item-section>
+                        <q-select
+                          :options="equipment_options"
+                          emit-value
+                          map-options
+                          v-model="item.key"
+                          option-value="key"
+                          option-label="value"
+                          lazy-rules
+                        />
+                        <!-- {{ getEquipmentName(item.key) }} -->
+                      </q-item-section>
+                      <q-item-section avatar class="q-mr-md">
+                        {{ $t("mode") }}:
+                      </q-item-section>
+                      <q-item-section>
+                        <q-input v-model="item.value"></q-input>
+                      </q-item-section>
+                      <q-space />
+                      <q-item-section avatar>
+                        <q-btn
+                          @click="deleteEquipment(index)"
+                          round
+                          flat
+                          icon="delete"
+                          color="red"
+                        >
+                          <q-tooltip>{{ $t("delete") }}</q-tooltip>
+                        </q-btn>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-scroll-area>
+              </q-card>
+            </q-item>
+          </q-list>
+        </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-form>
+    </q-card>
+  </q-dialog>
+  <list-joint-action-equipment-dialog
+    ref="list_joint_action_equipment_dialog"
+  />
+</template>
+
+<style scoped>
+.disable_tree {
+  background: #9e9e9e;
+  cursor: wait;
+  pointer-events: none;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, ref, watch, computed, Ref } from "vue";
+import { useStore } from "src/store";
+import GlobalData from "src/common/GlobalData";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+import { api } from "boot/axios";
+import { HttpProtocol } from "src/entities/HttpProtocol";
+import { StringKeyValueEntity } from "src/entities/StringKeyValueEntity";
+import ListJointActionEquipmentDialog from "src/components/ListJointActionEquipmentDialog.vue";
+import JointActionEquipmentTableEntity from "src/entities/JointActionEquipmentTableEntity";
+import EventBus, { EventNamesDefine } from "src/common/EventBus";
+
+export default defineComponent({
+  name: "ComponentModeDialog",
+
+  components: { ListJointActionEquipmentDialog },
+
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+    let type = ref(1);
+    let name = ref(null);
+    let backup_index = 0;
+    let index = ref(0);
+    let uuid = ref("");
+    const selected: any = ref(null);
+    let loading = ref(false);
+
+    const equipments: Ref<StringKeyValueEntity[]> = ref([]);
+    const list_joint_action_equipment_dialog: Ref<any> = ref(null);
+
+    const equipment_options: Ref<StringKeyValueEntity[]> = ref([]);
+
+    const tree_nodes = computed({
+      get: () => $store.state.mode_tree,
+      set: (val) => {},
+    });
+
+    watch(
+      () => selected.value,
+      (newValue, oldValue) => {
+        if (newValue == null) {
+          selected.value = "";
+        }
+      }
+    );
+
+    const requestAddMode = async () => {
+      let response = await GlobalData.getInstance()
+        .getCurrentClient()
+        ?.addMode(
+          selected.value,
+          name.value ?? "",
+          index.value,
+          equipments.value
+        );
+      if (response) {
+        $q.notify({
+          color: response.success ? "positive" : "negative",
+          icon: response.success ? "done" : "warning",
+          message:
+            $t.t("add mode") +
+            (response.success ? $t.t("success") : $t.t("fail")) +
+            "!",
+          position: "top",
+          timeout: 1500,
+        });
+      }
+    };
+
+    const requestEditMode = async () => {
+      let response = await GlobalData.getInstance()
+        .getCurrentClient()
+        ?.editMode(
+          uuid.value,
+          name.value ?? "",
+          index.value,
+          selected.value,
+          equipments.value
+        );
+      if (response) {
+        $q.notify({
+          color: response.success ? "positive" : "negative",
+          icon: response.success ? "done" : "warning",
+          message:
+            $t.t("edit mode") +
+            (response.success ? $t.t("success") : $t.t("fail")) +
+            "!",
+          position: "top",
+          timeout: 1500,
+        });
+      }
+    };
+
+    const updateEquipmentOptions = () => {
+      GlobalData.getInstance()
+        .getCurrentClient()
+        ?.getJointActionEquipments()
+        .then((response) => {
+          if (response && Array.isArray(response.entities)) {
+            equipment_options.value = [];
+            for (const item of response.entities) {
+              if (item) {
+                equipment_options.value.push({
+                  key: item.uuid,
+                  value: item.name,
+                });
+              }
+            }
+          }
+        });
+    };
+
+    EventBus.getInstance().on(
+      EventNamesDefine.RefreshJointActionEquipmentList,
+      () => {
+        updateEquipmentOptions();
+      }
+    );
+
+    return {
+      show_dialog,
+      type,
+      name,
+      index,
+      uuid,
+      selected,
+      loading,
+      tree_nodes,
+      equipments,
+      equipment_options,
+
+      list_joint_action_equipment_dialog,
+
+      showDialog(options: any) {
+        if (options) {
+          type.value = options.type ?? 1;
+          if (type.value == 2) {
+            name.value = options.data?.name ?? null;
+            selected.value = options.data?.item_data?.group_uuid ?? null;
+            uuid.value = options.data?.item_data?.uuid ?? null;
+            index.value = options.data?.item_data?.number ?? 0;
+            backup_index = index.value;
+            equipments.value =
+              options.data?.item_data?.joint_action_equipments ?? [];
+          } else {
+            selected.value = options.data?.uuid ?? null;
+            uuid.value = options.data?.uuid ?? null;
+            index.value = 0;
+          }
+
+          updateEquipmentOptions();
+          equipments.value = [];
+          {
+            let obj = null;
+            if (
+              typeof options.data?.item_data?.joint_action_equipments ==
+              "string"
+            ) {
+              try {
+                obj = JSON.parse(
+                  options.data?.item_data?.joint_action_equipments
+                );
+              } catch (e) {
+                console.error(e);
+              }
+            }
+            if (Array.isArray(obj)) {
+              for (const item of obj) {
+                if (item && typeof item != "undefined") {
+                  const temp_item = item as StringKeyValueEntity;
+                  if (temp_item) {
+                    const f = equipment_options.value.find(
+                      (element) => element && element.key == temp_item.key
+                    );
+                    if (f) {
+                      equipments.value.push(temp_item);
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        show_dialog.value = true;
+      },
+      resetData() {
+        loading.value = false;
+        equipments.value = [];
+        selected.value = null;
+        name.value = null;
+        type.value = 1;
+        backup_index = 0;
+      },
+      treeNodesFilter(node: any, filter: any) {
+        return node.is_group;
+      },
+      checkIndex(val: number) {
+        return new Promise(async (resolve, reject) => {
+          if (val < 0) {
+            resolve($t.t("Please type 0~65535"));
+          } else {
+            try {
+              // let url = GlobalData.getInstance().createCurrentRequestUrl();
+              // if (!url) {
+              //   url = new URL(window.location.hostname);
+              // }
+              // url.pathname = HttpProtocol.RequestCheckModeIndex;
+              // url.searchParams.append("index", index.value.toString());
+              // let response = (await api.get(url.toString())).data as boolean;
+              // console.log(url)
+              let response= (await GlobalData.getInstance().getCurrentClient()?.CheckModeIndex(index.value))?.success as boolean;
+              // let response:boolean;
+              // console.log(res)
+              if (typeof response != "boolean") {
+                try {
+                  response = JSON.parse(response);
+                } catch {
+                  response = false;
+                }
+              }
+              if (index.value == backup_index) {
+                response = true;
+              }
+              if (!response) {
+                resolve($t.t("index exised") + "!");
+              } else {
+                resolve(true);
+              }
+            } catch (e) {
+              resolve($t.t("check error"));
+            }
+          }
+        });
+      },
+      async onSubmit() {
+        loading.value = true;
+        try {
+          await (type.value == 2 ? requestEditMode() : requestAddMode());
+          show_dialog.value = false;
+        } catch {}
+        loading.value = false;
+      },
+      async addEquipment() {
+        const response = await GlobalData.getInstance()
+          .getCurrentClient()
+          ?.getJointActionEquipments();
+        if (response && Array.isArray(response.entities)) {
+          if (response.entities.length) {
+            const v = new StringKeyValueEntity();
+            v.key = response.entities[0].uuid;
+            v.value = "mode name";
+            equipments.value.push(v);
+          } else {
+            $q.notify({
+              color: "warning",
+              icon: "warning",
+              message: $t.t(
+                "joint action equipment is empty! please add equipment first!"
+              ),
+              position: "top",
+              timeout: 1500,
+            });
+
+            if (list_joint_action_equipment_dialog.value) {
+              list_joint_action_equipment_dialog.value.showDialog();
+            }
+          }
+        } else {
+          $q.notify({
+            color: "negative",
+            icon: "warning",
+            message: "data error!",
+            position: "top",
+            timeout: 1500,
+          });
+        }
+      },
+      deleteEquipment(index: number) {
+        equipments.value.splice(index, 1);
+      },
+    };
+  },
+});
+</script>
diff --git a/src/components/RecoveryDatabaseDialog.vue b/src/components/RecoveryDatabaseDialog.vue
index a6dd0b4..26dbe07 100644
--- a/src/components/RecoveryDatabaseDialog.vue
+++ b/src/components/RecoveryDatabaseDialog.vue
@@ -1,247 +1,225 @@
-<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: 35vw">
-      <q-form @submit="onSubmit">
-        <q-card-section class="q-ma-none q-pa-sm">
-          <div class="row">
-            <div class="col-auto text-h6">
-              {{ $t("database import") }}
-            </div>
-            <q-space />
-            <div>
-              <q-btn
-                :loading="loading"
-                flat
-                round
-                icon="close"
-                :disable="loading"
-                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"
-                  @added="(files) => files && (file_count += files.length)"
-                  @removed="(files) => files && (file_count -= files.length)"
-                />
-              </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')"
-            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-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 file_count = ref(0);
-
-    return {
-      show_dialog,
-      loading,
-      upload_url,
-      uploader,
-      file_count,
-      generatorFileUploadHeaders(files: File[]) {
-        if (files.length > 0) {
-          return [
-            {
-              name: HttpProtocol.kHeaderXProductName,
-              value: HttpProtocol.getProductName($store),
-            },
-            {
-              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.UploadTypeDatabase);
-          upload_url.value = url.toString();
-        }
-      },
-      resetData() {
-        loading.value = false;
-        upload_url.value = "";
-        file_count.value = 0;
-      },
-      async onSubmit() {
-        if (file_count.value <= 0) {
-          $q.notify({
-            type: "warning",
-            message: $t.t("please select file first") + "!",
-            position: "top",
-            timeout: 1500,
-          });
-          return;
-        }
-        loading.value = true;
-        try {
-          $q.dialog({
-            title: $t.t("Confirm"),
-            message: $t.t("use this file to recovery data") + "?",
-            ok: {
-              label: $t.t("ok"),
-              noCaps: true,
-              flat: true,
-            },
-            cancel: {
-              label: $t.t("cancel"),
-              noCaps: true,
-              flat: 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: 1500,
-        });
-        $q.dialog({
-          title: $t.t("Confirm"),
-          message:
-            $t.t("data changes will take effect after the restart") +
-            "!" +
-            "<p class='text-red'>" +
-            $t.t("reboot now") +
-            "?" +
-            "</p>",
-          html: true,
-          ok: {
-            label: $t.t("ok"),
-            noCaps: true,
-            flat: true,
-          },
-          cancel: {
-            label: $t.t("cancel"),
-            noCaps: true,
-            flat: true,
-          },
-          persistent: true,
-        })
-          .onOk(() => {
-            GlobalData.getInstance().getCurrentClient()?.restartDevice();
-            $q.notify({
-              type: "positive",
-              message: $t.t("reboot device command sended") + "!",
-              position: "top",
-              timeout: 1500,
-            });
-          })
-          .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: 1500,
-        });
-        loading.value = false;
-      },
-    };
-  },
-});
-</script>
+<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: 35vw">
+      <q-form @submit="onSubmit">
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-auto text-h6">
+              {{ $t("database import") }}
+            </div>
+            <q-space />
+            <div>
+              <q-btn
+                :loading="loading"
+                flat
+                round
+                icon="close"
+                :disable="loading"
+                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"
+                  :label="$t('select data(DBP) file') + ':'"
+                  accept=".dbp"
+                  :hide-upload-btn="true"
+                  @uploaded="onUploaded"
+                  @failed="onFailed"
+                  @added="(files) => files && (file_count += files.length)"
+                  @removed="(files) => files && (file_count -= files.length)"
+                />
+              </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')"
+            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-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 file_count = ref(0);
+
+    return {
+      show_dialog,
+      loading,
+      upload_url,
+      uploader,
+      file_count,
+      showDialog() {
+        show_dialog.value = true;
+        let url = GlobalData.getInstance().createCurrentRequestUrl();
+        if (url) {
+          url.pathname = "/upload_db_file";
+          upload_url.value = url.toString();
+        }
+      },
+      resetData() {
+        loading.value = false;
+        upload_url.value = "";
+        file_count.value = 0;
+      },
+      async onSubmit() {
+        if (file_count.value <= 0) {
+          $q.notify({
+            type: "warning",
+            message: $t.t("please select file first") + "!",
+            position: "top",
+            timeout: 1500,
+          });
+          return;
+        }
+        loading.value = true;
+        try {
+          $q.dialog({
+            title: $t.t("Confirm"),
+            message: $t.t("use this file to recovery data") + "?",
+            ok: {
+              label: $t.t("ok"),
+              noCaps: true,
+              flat: true,
+            },
+            cancel: {
+              label: $t.t("cancel"),
+              noCaps: true,
+              flat: 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: 1500,
+        });
+        $q.dialog({
+          title: $t.t("Confirm"),
+          message:
+            $t.t("data changes will take effect after the restart") +
+            "!" +
+            "<p class='text-red'>" +
+            $t.t("reboot now") +
+            "?" +
+            "</p>",
+          html: true,
+          ok: {
+            label: $t.t("ok"),
+            noCaps: true,
+            flat: true,
+          },
+          cancel: {
+            label: $t.t("cancel"),
+            noCaps: true,
+            flat: true,
+          },
+          persistent: true,
+        })
+          .onOk(() => {
+            GlobalData.getInstance().getCurrentClient()?.restartDevice();
+            $q.notify({
+              type: "positive",
+              message: $t.t("reboot device command sended") + "!",
+              position: "top",
+              timeout: 1500,
+            });
+          })
+          .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: 1500,
+        });
+        loading.value = false;
+      },
+    };
+  },
+});
+</script>
diff --git a/src/components/UpgradeDialog.vue b/src/components/UpgradeDialog.vue
index d287d7c..74a1e50 100644
--- a/src/components/UpgradeDialog.vue
+++ b/src/components/UpgradeDialog.vue
@@ -61,7 +61,6 @@
                   ref="uploader_software"
                   :url="upload_url_software"
                   method="post"
-                  :headers="generatorFileUploadHeaders"
                   :label="$t('select software upgrade file') + ':'"
                   accept=".zip,.tar,.tar.gz"
                   :hide-upload-btn="true"
@@ -76,7 +75,6 @@
                   ref="uploader_rootfs"
                   :url="upload_url_rootfs"
                   method="post"
-                  :headers="generatorFileUploadHeaders"
                   :label="$t('select rootfs upgrade file') + ':'"
                   accept=".img"
                   :hide-upload-btn="true"
@@ -85,6 +83,7 @@
                   @added="(files) => files && (file_count += files.length)"
                   @removed="(files) => files && (file_count -= files.length)"
                 />
+                <!-- :headers="generatorFileUploadHeaders" -->
               </q-item-section>
             </q-item>
           </q-list>
@@ -92,9 +91,7 @@
 
         <q-separator />
 
-        <q-card-actions>
-          <q-item-section>V: {{ server_version }}</q-item-section>
-          <q-space />
+        <q-card-actions align="right">
           <q-btn
             :loading="loading"
             flat
@@ -146,7 +143,6 @@ export default defineComponent({
 
     let select_options = [$t.t("software"), $t.t("rootfs")];
     let upgrade_type = ref($t.t("software"));
-    const server_version = ref("unknow");
 
     return {
       show_dialog,
@@ -158,49 +154,18 @@ export default defineComponent({
       file_count,
       upgrade_type,
       select_options,
-      server_version,
-      generatorFileUploadHeaders(files: File[]) {
-        if (files.length > 0) {
-          return [
-            {
-              name: HttpProtocol.kHeaderXProductName,
-              value: HttpProtocol.getProductName($store),
-            },
-            {
-              name: HttpProtocol.kHeaderXFileLength,
-              value: files[0].size,
-            },
-          ];
-        }
-        return [];
-      },
       loga(a: any) {
         console.log(a);
       },
       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.UploadTypeRootFS);
-          upload_url_rootfs.value = url.toString();
-
-          url.searchParams.set("type", HttpProtocol.UploadTypeSoftware);
+        let url = GlobalData.getInstance().createCurrentRequestUrl();
+          if (url) {
+          url.pathname = "/upload_soft_file";
           upload_url_software.value = url.toString();
-          try {
-            client?.getBuildInfo()?.then((build_info) => {
-              if (build_info) {
-                server_version.value = build_info.version;
-              }
-            });
-            // console.log(build_info);
-          } catch {}
+          url.pathname = "/upload_root_fs_file";
+          upload_url_rootfs.value = url.toString();
         }
       },
       resetData() {
diff --git a/src/entities/HttpProtocol.ts b/src/entities/HttpProtocol.ts
index 9956eff..cf743e7 100644
--- a/src/entities/HttpProtocol.ts
+++ b/src/entities/HttpProtocol.ts
@@ -1,33 +1,33 @@
-export namespace HttpProtocol {
-  export const DefaultHttpPort = 80;
-  export const RequestUploadFile = "/upload_file";
-  export const RequestPathUpdateDBBackupFile = "/common/update_db_backup_file";
-  export const RequestPathDBBackup = "/db_backup";
-  export const RequestPathListFile = "/list_file";
-  export const RequestPathCreateDirectory = "/create_directory";
-  export const RequestPathCheckFileSupport = "/check_file_support";
-  export const RequestPathGetWebscoketPort = "/get_websocket_port";
-  export const RequestPathGetAllPort = "/get_all_port";
-  export const RequestPathDeleteFile = "/delete_file";
-  export const RequestPathRenameFile = "/rename_file";
-  export const RequestCheckModeIndex = "/check_mode_index";
-
-  export const HttpUploadTypeNormal = "U_T_Normal";
-  export const UploadTypeBackgroundImage = "U_T_BACKGROUND_IMAGE";
-  export const UploadTypeMedia = "U_T_MEDIA";
-  export const UploadTypeDatabase = "U_T_DATABASE";
-  export const UploadTypeRootFS = "U_T_ROOT_FS";
-  export const UploadTypeSoftware = "U_T_SOFTWARE";
-
-  export const kHeaderXFileLength = "X-File-Length";
-  export const kHeaderXFileMD5 = "X-File-MD5";
-  export const kHeaderXProductName = "X-Product-Name";
-  const kHeaderDefaultValueXProductName = "LED_PLAYER";
-
-  export const getProductName = ($store: any): String => {
-    if ($store && $store.state && $store.state.product_name) {
-      return $store.state.product_name;
-    }
-    return kHeaderDefaultValueXProductName;
-  };
-}
+export namespace HttpProtocol {
+  export const DefaultHttpPort = 80;
+  export const RequestUploadFile = "/upload_file";
+  export const RequestPathUpdateDBBackupFile = "/update_db_backup_file";
+  export const RequestPathDBBackup = "/download_db_backup_file";
+  export const RequestPathListFile = "/list_file";
+  export const RequestPathCreateDirectory = "/create_directory";
+  export const RequestPathCheckFileSupport = "/check_file_support";
+  export const RequestPathGetWebscoketPort = "/get_websocket_port";
+  export const RequestPathGetAllPort = "/get_all_port";
+  export const RequestPathDeleteFile = "/delete_file";
+  export const RequestPathRenameFile = "/rename_file";
+  export const RequestCheckModeIndex = "/check_mode_index";
+
+  export const HttpUploadTypeNormal = "U_T_Normal";
+  export const UploadTypeBackgroundImage = "U_T_BACKGROUND_IMAGE";
+  export const UploadTypeMedia = "U_T_MEDIA";
+  export const UploadTypeDatabase = "U_T_DATABASE";
+  export const UploadTypeRootFS = "U_T_ROOT_FS";
+  export const UploadTypeSoftware = "U_T_SOFTWARE";
+
+  export const kHeaderXFileLength = "X-File-Length";
+  export const kHeaderXFileMD5 = "X-File-MD5";
+  export const kHeaderXProductName = "X-Product-Name";
+  const kHeaderDefaultValueXProductName = "LED_PLAYER";
+
+  export const getProductName = ($store: any): String => {
+    if ($store && $store.state && $store.state.product_name) {
+      return $store.state.product_name;
+    }
+    return kHeaderDefaultValueXProductName;
+  };
+}
diff --git a/src/entities/WSProtocol.ts b/src/entities/WSProtocol.ts
index 5922bce..54f1711 100644
--- a/src/entities/WSProtocol.ts
+++ b/src/entities/WSProtocol.ts
@@ -534,6 +534,9 @@ export namespace Protocol {
     public static get kRpcFileManagerCreateDirectory() {
       return Commands.PROTOCOL_PREFIX + "RpcFileManagerCreateDirectory";
     }
+    public static get kRpcCheckModeIndex() {
+      return Commands.PROTOCOL_PREFIX + "RpcCheckModeIndex";
+    }
     static _all_commands = new Set([
       Commands.kUnKnowCommand,
       Commands.kSearchDevice,
@@ -668,6 +671,7 @@ export namespace Protocol {
       Commands.kRpcFileManagerRename,
       Commands.kRpcFileManagerDelete,
       Commands.kRpcFileManagerCreateDirectory,
+      Commands.kRpcCheckModeIndex,
     ]);
     public static get AllCommands() {
       return this._all_commands;
@@ -3541,4 +3545,21 @@ export namespace Protocol {
     error_message=""
     error_code=0;
   }
+  export class RpcCheckModeIndexRequestEntity extends PacketEntity{
+    constructor(mode_index:number,rpc_id = 0) {
+      super();
+      super.command = Commands.kRpcCheckModeIndex;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      this.mode_index=mode_index
+    }
+    mode_index = 0;
+  }
+  export class   RpcCheckModeIndexResponseEntity extends PacketEntity{
+    constructor() {
+      super();
+      super.flag = PacketEntity.FLAG_RESPONSE;
+    }
+    success = false;
+
+  }
 }
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 2914a8b..fcb4bb0 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -294,6 +294,7 @@ export default {
   "open left tool bar": "Open Left Tool Bar",
   "open right tool bar": "Open Right Tool Bar",
   fail: " Fail",
+  finish:"Finish",
   "edit group": "Edit Group",
   "open window": "Open Window",
   "close all windows": "Close All Windows",
@@ -444,4 +445,6 @@ export default {
   resize: "Resize",
   "export magic": "Export",
   "raster graph": "Raster Graph",
+  "the folder name cannot start with a '.'":"The Folder Name Cannot Start With a '.'",
+
 };
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index 6c3a6a4..d39045e 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -5,6 +5,7 @@ export default {
   " ": "",
   title: "MediaPlayerWebApp",
   failed: "失败",
+  finish:"完成",
   fail: "失败",
   error: "错误",
   Confirm: "确认",
@@ -712,4 +713,5 @@ export default {
   resize: "缩放",
   "export magic": "导出",
   "raster graph": "栅格图",
+  "the folder name cannot start with a '.'":"文件夹名称不能以“.” 开头",
 };
diff --git a/src/pages/TopToolBar.vue b/src/pages/TopToolBar.vue
index b5b625c..100000c 100644
--- a/src/pages/TopToolBar.vue
+++ b/src/pages/TopToolBar.vue
@@ -305,7 +305,10 @@
           <q-item
             clickable
             :disable="!$store.state.power_state"
-            v-if="$store.state.isLedPlayer()&&!$store.state.custom_defines.function_magic_wall"
+            v-if="
+              $store.state.isLedPlayer() &&
+              !$store.state.custom_defines.function_magic_wall
+            "
             v-close-popup
             @click="
               ($store.state.isSpecialVideo()
@@ -338,9 +341,6 @@
             </q-item-section>
           </q-item>
 
-
-
-
           <q-item
             clickable
             :disable="!$store.state.power_state"
@@ -447,7 +447,7 @@
               $refs.fusion_settings_dialog.showDialog();
               getconfig();
             "
-             v-if="$store.state.custom_defines.function_fusion"
+            v-if="$store.state.custom_defines.function_fusion"
           >
             <q-item-section avatar>
               <q-icon name="open_with" />
@@ -457,7 +457,6 @@
             </q-item-section>
           </q-item>
 
-
           <q-item
             clickable
             v-close-popup
@@ -505,7 +504,7 @@
       <q-item v-else>
         <q-item-section avatar style="margin-right: 0px; padding-right: 0px">
           <q-btn
-          flat
+            flat
             @click="isfullbtn()"
             :icon="isfull ? 'fullscreen_exit' : 'fullscreen'"
           />
@@ -711,9 +710,9 @@ export default defineComponent({
       show_device_list.value =
         typeof (<any>window).user_search?.hide_device_list == "undefined";
     });
-    let isfan=ref(true)
+    let isfan = ref(true);
     if ((window as any).$wujie) {
-      isfan.value=false
+      isfan.value = false;
     }
     return {
       show_advanced_menu,
@@ -738,8 +737,11 @@ export default defineComponent({
           console.log(url.toString());
           let response = await api.get(url.toString());
           if (response.status == 200 && response && response.data) {
-            url.pathname =
-              HttpProtocol.RequestPathDBBackup + "/" + response.data;
+            console.log(response.data);
+
+            url.pathname = HttpProtocol.RequestPathDBBackup;
+            url.searchParams.append("name", response.data);
+            console.log(url);
             openURL(url.toString());
           } else {
             $q.notify({
@@ -992,7 +994,7 @@ export default defineComponent({
         isfull.value = !isfull.value;
         if ((window as any).$wujie) {
           const $wujie = (window as any).$wujie as IWuJieInterface;
-            $wujie?.bus.$emit("isfull", isfull.value);
+          $wujie?.bus.$emit("isfull", isfull.value);
         }
       },
     };