diff --git a/frontend/src/views/setting/snapshot/recover/index.vue b/frontend/src/views/setting/snapshot/recover/index.vue
new file mode 100644
index 000000000..1d68e27d5
--- /dev/null
+++ b/frontend/src/views/setting/snapshot/recover/index.vue
@@ -0,0 +1,89 @@
+<template>
+    <el-dialog
+        v-model="open"
+        :title="$t('commons.button.recover')"
+        width="40%"
+        :close-on-click-modal="false"
+        :before-close="handleClose"
+    >
+        <el-form ref="recoverForm" label-position="left" v-loading="loading">
+            <el-form-item :label="$t('setting.compressPassword')" style="margin-top: 10px">
+                <el-input v-model="recoverReq.secret" :placeholder="$t('setting.backupRecoverMessage')" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="handleClose" :disabled="loading">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button type="primary" @click="submit" :disabled="loading">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import i18n from '@/lang';
+import { MsgSuccess } from '@/utils/message';
+import { snapshotRecover } from '@/api/modules/setting';
+
+let loading = ref(false);
+let open = ref(false);
+const recoverForm = ref<FormInstance>();
+const emit = defineEmits<{ (e: 'search'): void; (e: 'close'): void }>();
+
+interface DialogProps {
+    id: number;
+    isNew: boolean;
+    reDownload: boolean;
+}
+
+let recoverReq = ref({
+    id: 0,
+    isNew: true,
+    reDownload: true,
+    secret: '',
+});
+
+const handleClose = () => {
+    open.value = false;
+};
+const acceptParams = (params: DialogProps): void => {
+    recoverReq.value = {
+        id: params.id,
+        isNew: params.isNew,
+        reDownload: params.reDownload,
+        secret: '',
+    };
+    open.value = true;
+};
+
+const submit = async () => {
+    loading.value = true;
+    await snapshotRecover({
+        id: recoverReq.value.id,
+        isNew: recoverReq.value.isNew,
+        reDownload: recoverReq.value.reDownload,
+        secret: recoverReq.value.secret,
+    })
+        .then(() => {
+            emit('search');
+            loading.value = false;
+            handleClose();
+            emit('close');
+            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+        })
+        .catch(() => {
+            loading.value = false;
+        });
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>
+<style scoped lang="scss"></style>
diff --git a/frontend/src/views/setting/snapshot/status/index.vue b/frontend/src/views/setting/snapshot/status/index.vue
index 82eba64f1..b29104126 100644
--- a/frontend/src/views/setting/snapshot/status/index.vue
+++ b/frontend/src/views/setting/snapshot/status/index.vue
@@ -10,9 +10,6 @@
                     <el-col :span="22">
                         <span class="card-title">{{ $t('setting.recover') }}</span>
                         <el-divider class="divider" />
-                        <el-form-item :label="$t('setting.compressPassword')" prop="secret">
-                            <el-input v-model="snapInfo.secret"></el-input>
-                        </el-form-item>
                         <div v-if="!snapInfo.recoverStatus && !snapInfo.lastRecoveredAt">
                             <el-alert center class="alert" style="height: 257px" :closable="false">
                                 <el-button size="large" round plain type="primary" @click="recoverSnapshot(true)">
@@ -166,6 +163,8 @@
             </template>
         </el-dialog>
     </div>
+
+    <SnapRecover ref="recoverRef" @close="handleClose" />
 </template>
 
 <script setup lang="ts">
@@ -174,9 +173,10 @@ import { Setting } from '@/api/interface/setting';
 import { ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
 import DrawerHeader from '@/components/drawer-header/index.vue';
-import { snapshotRecover, snapshotRollback } from '@/api/modules/setting';
+import { snapshotRollback } from '@/api/modules/setting';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { loadOsInfo } from '@/api/modules/dashboard';
+import SnapRecover from '@/views/setting/snapshot/recover/index.vue';
 
 const drawerVisible = ref(false);
 const snapInfo = ref();
@@ -184,6 +184,7 @@ const loading = ref();
 
 const dialogVisible = ref();
 const reDownload = ref();
+const recoverRef = ref();
 
 interface DialogProps {
     snapInfo: Setting.SnapshotInfo;
@@ -196,26 +197,17 @@ const emit = defineEmits(['search']);
 
 const handleClose = () => {
     drawerVisible.value = false;
+    dialogVisible.value = false;
 };
 
 const doRecover = async (isNew: boolean) => {
-    loading.value = true;
-    await snapshotRecover({
+    let params = {
         id: snapInfo.value.id,
         isNew: isNew,
         reDownload: reDownload.value,
         secret: snapInfo.value.secret,
-    })
-        .then(() => {
-            emit('search');
-            loading.value = false;
-            dialogVisible.value = false;
-            drawerVisible.value = false;
-            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-        })
-        .catch(() => {
-            loading.value = false;
-        });
+    };
+    recoverRef.value.acceptParams(params);
 };
 
 const recoverSnapshot = async (isNew: boolean) => {