diff --git a/frontend/src/views/app-store/detail/index.vue b/frontend/src/views/app-store/detail/index.vue
index 5d709ba82..484898f20 100644
--- a/frontend/src/views/app-store/detail/index.vue
+++ b/frontend/src/views/app-store/detail/index.vue
@@ -6,7 +6,7 @@
                     <el-col :span="3">
                         <el-avatar shape="square" :size="180" :src="'data:image/png;base64,' + app.icon" />
                     </el-col>
-                    <el-col :span="20">
+                    <el-col :span="18">
                         <div class="detail">
                             <div class="name">
                                 <span>{{ app.name }}</span>
@@ -78,7 +78,7 @@
                     </el-col>
                 </el-row>
             </div>
-            <div v-loading="loadingDetail">
+            <div v-loading="loadingDetail" style="margin-left: -32px">
                 <v-md-preview :text="appDetail.readme"></v-md-preview>
             </div>
         </template>
diff --git a/frontend/src/views/host/file-management/change-role/index.vue b/frontend/src/views/host/file-management/change-role/index.vue
index 755dc031a..f57ed531d 100644
--- a/frontend/src/views/host/file-management/change-role/index.vue
+++ b/frontend/src/views/host/file-management/change-role/index.vue
@@ -1,21 +1,21 @@
 <template>
-    <el-dialog
-        v-model="open"
-        :before-close="handleClose"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :title="$t('file.setRole')"
-        width="50%"
-        @open="onOpen"
-    >
-        <FileRole v-loading="loading" :mode="mode" @get-mode="getMode"></FileRole>
+    <el-drawer v-model="open" :before-close="handleClose" :close-on-click-modal="false" width="50%">
+        <template #header>
+            <DrawerHeader :header="$t('file.setRole')" :back="handleClose" />
+        </template>
+
+        <el-row>
+            <el-col :span="22" :offset="1">
+                <FileRole v-loading="loading" :mode="mode" @get-mode="getMode"></FileRole>
+            </el-col>
+        </el-row>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
                 <el-button type="primary" @click="submit()">{{ $t('commons.button.confirm') }}</el-button>
             </span>
         </template>
-    </el-dialog>
+    </el-drawer>
 </template>
 
 <script setup lang="ts">
@@ -26,33 +26,24 @@ import i18n from '@/lang';
 import { ElMessage } from 'element-plus';
 import FileRole from '@/components/file-role/index.vue';
 
-const props = defineProps({
-    open: {
-        type: Boolean,
-        default: false,
-    },
-    file: {
-        type: Object,
-        default: function () {
-            return {};
-        },
-    },
-});
-
+let open = ref(false);
 let form = ref<File.FileCreate>({ path: '', isDir: false, mode: 0o755 });
 let loading = ref<Boolean>(false);
 let mode = ref('0755');
 
 const em = defineEmits(['close']);
 const handleClose = () => {
+    open.value = false;
     em('close', false);
 };
 
-const onOpen = () => {
-    const f = props.file as File.FileCreate;
-    form.value.isDir = f.isDir;
-    form.value.path = f.path;
-    mode.value = String(f.mode);
+const acceptParams = (create: File.FileCreate) => {
+    open.value = true;
+    form.value.isDir = create.isDir;
+    form.value.path = create.path;
+    form.value.isLink = false;
+
+    mode.value = String(create.mode);
 };
 
 const getMode = (val: number) => {
@@ -70,4 +61,6 @@ const submit = async () => {
             loading.value = false;
         });
 };
+
+defineExpose({ acceptParams });
 </script>
diff --git a/frontend/src/views/host/file-management/code-editor/index.vue b/frontend/src/views/host/file-management/code-editor/index.vue
index 8618dabcc..438731149 100644
--- a/frontend/src/views/host/file-management/code-editor/index.vue
+++ b/frontend/src/views/host/file-management/code-editor/index.vue
@@ -2,11 +2,11 @@
     <el-dialog
         v-model="open"
         :title="$t('commons.button.edit')"
-        @opened="onOpen"
         :before-close="handleClose"
         destroy-on-close
         width="70%"
         draggable
+        @opened="onOpen"
     >
         <div>
             <div v-loading="loading">
@@ -16,43 +16,38 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="save()">{{ $t('commons.button.confirm') }}</el-button>
+                <el-button type="primary" @click="saveContent(true)">{{ $t('commons.button.confirm') }}</el-button>
             </span>
         </template>
     </el-dialog>
 </template>
 
 <script lang="ts" setup>
+import { SaveFileContent } from '@/api/modules/files';
+import i18n from '@/lang';
+import { ElMessage } from 'element-plus';
 import * as monaco from 'monaco-editor';
-import { reactive } from 'vue';
+import { ref } from 'vue';
 
 let editor: monaco.editor.IStandaloneCodeEditor | undefined;
 
-const props = defineProps({
-    open: {
-        type: Boolean,
-        default: false,
-    },
-    language: {
-        type: String,
-        default: 'json',
-    },
-    content: {
-        type: String,
-        default: '',
-    },
-    loading: {
-        type: Boolean,
-        default: false,
-    },
-});
+interface EditProps {
+    language: string;
+    content: string;
+    path: string;
+    name: string;
+}
 
-let data = reactive({
+let open = ref(false);
+let loading = ref(false);
+let language = ref('json');
+
+let form = ref({
     content: '',
-    language: '',
+    path: '',
 });
 
-const em = defineEmits(['close', 'qsave', 'save']);
+const em = defineEmits(['close']);
 
 const handleClose = () => {
     if (editor) {
@@ -61,14 +56,6 @@ const handleClose = () => {
     em('close', false);
 };
 
-const save = () => {
-    em('save', data.content);
-};
-
-const saveNotClose = () => {
-    em('qsave', data.content);
-};
-
 const initEditor = () => {
     if (editor) {
         editor.dispose();
@@ -76,26 +63,45 @@ const initEditor = () => {
     const codeBox = document.getElementById('codeBox');
     editor = monaco.editor.create(codeBox as HTMLElement, {
         theme: 'vs-dark', //官方自带三种主题vs, hc-black, or vs-dark
-        value: data.content,
+        value: form.value.content,
         readOnly: false,
         automaticLayout: true,
-        language: data.language,
+        language: language.value,
         folding: true, //代码折叠
         roundedSelection: false, // 右侧不显示编辑器预览框
     });
 
     editor.onDidChangeModelContent(() => {
         if (editor) {
-            data.content = editor.getValue();
+            form.value.content = editor.getValue();
         }
     });
 
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, saveNotClose);
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, quickSave);
+};
+
+const quickSave = () => {
+    saveContent(false);
+};
+
+const saveContent = (closePage: boolean) => {
+    loading.value = true;
+    SaveFileContent(form.value).finally(() => {
+        loading.value = false;
+        open.value = !closePage;
+        ElMessage.success(i18n.global.t('commons.msg.updateSuccess'));
+    });
+};
+
+const acceptParams = (props: EditProps) => {
+    form.value.content = props.content;
+    form.value.path = props.path;
+    open.value = true;
 };
 
 const onOpen = () => {
-    data.content = props.content;
-    data.language = props.language;
     initEditor();
 };
+
+defineExpose({ acceptParams });
 </script>
diff --git a/frontend/src/views/host/file-management/compress/index.vue b/frontend/src/views/host/file-management/compress/index.vue
index 5bfbc69c2..8580c24f4 100644
--- a/frontend/src/views/host/file-management/compress/index.vue
+++ b/frontend/src/views/host/file-management/compress/index.vue
@@ -1,52 +1,55 @@
 <template>
-    <el-dialog
+    <el-drawer
         v-model="open"
         :title="title"
         :destroy-on-close="true"
         :close-on-click-modal="false"
         :before-close="handleClose"
-        width="30%"
-        @open="onOpen"
+        size="50%"
     >
-        <el-form
-            ref="fileForm"
-            label-position="left"
-            :model="form"
-            label-width="100px"
-            :rules="rules"
-            v-loading="loading"
-        >
-            <el-form-item :label="$t('file.compressType')" prop="type">
-                <el-select v-model="form.type">
-                    <el-option v-for="item in options" :key="item" :label="item" :value="item" />
-                </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('file.name')" prop="name">
-                <el-input v-model="form.name">
-                    <template #append>{{ extension }}</template>
-                </el-input>
-            </el-form-item>
-            <el-form-item :label="$t('file.compressDst')" prop="dst">
-                <el-input v-model="form.dst" disabled>
-                    <template #append><FileList :path="props.dst" @choose="getLinkPath"></FileList></template>
-                </el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-checkbox v-model="form.replace" :label="$t('file.replace')"></el-checkbox>
-            </el-form-item>
-        </el-form>
+        <el-row>
+            <el-col :span="22" :offset="1">
+                <el-form
+                    ref="fileForm"
+                    label-position="top"
+                    :model="form"
+                    label-width="100px"
+                    :rules="rules"
+                    v-loading="loading"
+                >
+                    <el-form-item :label="$t('file.compressType')" prop="type">
+                        <el-select v-model="form.type">
+                            <el-option v-for="item in options" :key="item" :label="item" :value="item" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item :label="$t('file.name')" prop="name">
+                        <el-input v-model="form.name">
+                            <template #append>{{ extension }}</template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item :label="$t('file.compressDst')" prop="dst">
+                        <el-input v-model="form.dst" disabled>
+                            <template #append><FileList :path="form.dst" @choose="getLinkPath"></FileList></template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-checkbox v-model="form.replace" :label="$t('file.replace')"></el-checkbox>
+                    </el-form-item>
+                </el-form>
+            </el-col>
+        </el-row>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
                 <el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
             </span>
         </template>
-    </el-dialog>
+    </el-drawer>
 </template>
 
 <script setup lang="ts">
 import i18n from '@/lang';
-import { computed, reactive, ref, toRefs } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import { File } from '@/api/interface/file';
 import { ElMessage, FormInstance, FormRules } from 'element-plus';
 import { Rules } from '@/global/form-rules';
@@ -54,30 +57,12 @@ import { CompressExtention, CompressType } from '@/enums/files';
 import { CompressFile } from '@/api/modules/files';
 import FileList from '@/components/file-list/index.vue';
 
-const props = defineProps({
-    open: {
-        type: Boolean,
-        default: false,
-    },
-    files: {
-        type: Array,
-        default: function () {
-            return [];
-        },
-    },
-    type: {
-        type: String,
-        default: 'compress',
-    },
-    dst: {
-        type: String,
-        default: '',
-    },
-    name: {
-        type: String,
-        default: '',
-    },
-});
+interface CompressProps {
+    files: Array<any>;
+    dst: string;
+    name: string;
+    operate: string;
+}
 
 const rules = reactive<FormRules>({
     type: [Rules.requiredSelect],
@@ -85,18 +70,16 @@ const rules = reactive<FormRules>({
     name: [Rules.requiredInput],
 });
 
-const { open, files, type, dst, name } = toRefs(props);
 const fileForm = ref<FormInstance>();
 let loading = ref(false);
 let form = ref<File.FileCompress>({ files: [], type: 'zip', dst: '', name: '', replace: false });
 let options = ref<string[]>([]);
+let open = ref(false);
+let title = ref('');
+let operate = ref('compress');
 
 const em = defineEmits(['close']);
 
-const title = computed(() => {
-    return i18n.global.t('file.' + type.value);
-});
-
 const extension = computed(() => {
     return CompressExtention[form.value.type];
 });
@@ -106,26 +89,13 @@ const handleClose = () => {
         fileForm.value.resetFields();
     }
     em('close', open);
+    open.value = false;
 };
 
 const getLinkPath = (path: string) => {
     form.value.dst = path;
 };
 
-const onOpen = () => {
-    form.value = {
-        dst: dst.value,
-        type: 'zip',
-        files: files.value as string[],
-        name: name.value,
-        replace: false,
-    };
-    options.value = [];
-    for (const t in CompressType) {
-        options.value.push(CompressType[t]);
-    }
-};
-
 const submit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     await formEl.validate((valid) => {
@@ -146,4 +116,21 @@ const submit = async (formEl: FormInstance | undefined) => {
             });
     });
 };
+
+const acceptParams = (props: CompressProps) => {
+    form.value.files = props.files;
+    form.value.dst = props.dst;
+    form.value.name = props.name;
+
+    operate.value = props.operate;
+    options.value = [];
+    for (const t in CompressType) {
+        options.value.push(CompressType[t]);
+    }
+    open.value = true;
+
+    title.value = i18n.global.t('file.' + props.operate);
+};
+
+defineExpose({ acceptParams });
 </script>
diff --git a/frontend/src/views/host/file-management/create/index.vue b/frontend/src/views/host/file-management/create/index.vue
index 4af0a1387..5a9b95992 100644
--- a/frontend/src/views/host/file-management/create/index.vue
+++ b/frontend/src/views/host/file-management/create/index.vue
@@ -1,46 +1,54 @@
 <template>
-    <el-dialog
+    <el-drawer
         v-model="open"
         :before-close="handleClose"
         :destroy-on-close="true"
         :close-on-click-modal="false"
-        :title="$t('commons.button.create')"
-        width="50%"
-        @open="onOpen"
+        size="40%"
     >
-        <el-form
-            ref="fileForm"
-            label-position="left"
-            :model="addForm"
-            label-width="100px"
-            :rules="rules"
-            v-loading="loading"
-        >
-            <el-form-item :label="$t('file.path')" prop="path"><el-input v-model="getPath" disabled /></el-form-item>
-            <el-form-item :label="$t('file.name')" prop="name"><el-input v-model="addForm.name" /></el-form-item>
-            <el-form-item v-if="!addForm.isDir">
-                <el-checkbox v-model="addForm.isLink" :label="$t('file.link')"></el-checkbox>
-            </el-form-item>
-            <el-form-item :label="$t('file.linkType')" v-if="addForm.isLink" prop="linkType">
-                <el-radio-group v-model="addForm.isSymlink">
-                    <el-radio :label="true">{{ $t('file.softLink') }}</el-radio>
-                    <el-radio :label="false">{{ $t('file.hardLink') }}</el-radio>
-                </el-radio-group>
-            </el-form-item>
-            <el-form-item v-if="addForm.isLink" :label="$t('file.linkPath')" prop="linkPath">
-                <el-input v-model="addForm.linkPath">
-                    <template #append>
-                        <FileList @choose="getLinkPath"></FileList>
-                    </template>
-                </el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-checkbox v-if="addForm.isDir" v-model="setRole" :label="$t('file.setRole')"></el-checkbox>
-            </el-form-item>
-            <el-form-item>
+        <template #header>
+            <DrawerHeader :header="$t('commons.button.create')" :back="handleClose" />
+        </template>
+
+        <el-row>
+            <el-col :span="22" :offset="1">
+                <el-form
+                    ref="fileForm"
+                    label-position="top"
+                    :model="addForm"
+                    label-width="100px"
+                    :rules="rules"
+                    v-loading="loading"
+                >
+                    <el-form-item :label="$t('file.path')" prop="path">
+                        <el-input v-model="getPath" disabled />
+                    </el-form-item>
+                    <el-form-item :label="$t('file.name')" prop="name">
+                        <el-input v-model="addForm.name" />
+                    </el-form-item>
+                    <el-form-item v-if="!addForm.isDir">
+                        <el-checkbox v-model="addForm.isLink" :label="$t('file.link')"></el-checkbox>
+                    </el-form-item>
+                    <el-form-item :label="$t('file.linkType')" v-if="addForm.isLink" prop="linkType">
+                        <el-radio-group v-model="addForm.isSymlink">
+                            <el-radio :label="true">{{ $t('file.softLink') }}</el-radio>
+                            <el-radio :label="false">{{ $t('file.hardLink') }}</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item v-if="addForm.isLink" :label="$t('file.linkPath')" prop="linkPath">
+                        <el-input v-model="addForm.linkPath">
+                            <template #append>
+                                <FileList @choose="getLinkPath"></FileList>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-checkbox v-if="addForm.isDir" v-model="setRole" :label="$t('file.setRole')"></el-checkbox>
+                    </el-form-item>
+                </el-form>
                 <FileRole v-if="setRole" :mode="'0755'" @get-mode="getMode"></FileRole>
-            </el-form-item>
-        </el-form>
+            </el-col>
+        </el-row>
 
         <template #footer>
             <span class="dialog-footer">
@@ -48,11 +56,11 @@
                 <el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
             </span>
         </template>
-    </el-dialog>
+    </el-drawer>
 </template>
 
 <script setup lang="ts">
-import { toRefs, ref, reactive, computed } from 'vue';
+import { ref, reactive, computed } from 'vue';
 import { File } from '@/api/interface/file';
 import { ElMessage, FormInstance, FormRules } from 'element-plus';
 import { CreateFile } from '@/api/modules/files';
@@ -65,16 +73,18 @@ const fileForm = ref<FormInstance>();
 let loading = ref(false);
 let setRole = ref(false);
 
-const props = defineProps({
-    open: Boolean,
-    file: Object,
+interface CreateProps {
+    file: Object;
+}
+const propData = ref<CreateProps>({
+    file: {},
 });
-const { open, file } = toRefs(props);
 
 let addForm = reactive({ path: '', name: '', isDir: false, mode: 0o755, isLink: false, isSymlink: true, linkPath: '' });
-
+let open = ref(false);
 const em = defineEmits(['close']);
 const handleClose = () => {
+    open.value = false;
     if (fileForm.value) {
         fileForm.value.resetFields();
     }
@@ -126,16 +136,20 @@ const submit = async (formEl: FormInstance | undefined) => {
     });
 };
 
-const onOpen = () => {
-    const f = file?.value as File.FileCreate;
-    addForm.isDir = f.isDir;
-    addForm.path = f.path;
+const acceptParams = (create: File.FileCreate) => {
+    propData.value.file = create;
+    open.value = true;
+    addForm.isDir = create.isDir;
+    addForm.path = create.path;
     addForm.name = '';
     addForm.isLink = false;
+
     init();
 };
 
 const init = () => {
     setRole.value = false;
 };
+
+defineExpose({ acceptParams });
 </script>
diff --git a/frontend/src/views/host/file-management/decompress/index.vue b/frontend/src/views/host/file-management/decompress/index.vue
index 491c7b59a..f0a8f7ff6 100644
--- a/frontend/src/views/host/file-management/decompress/index.vue
+++ b/frontend/src/views/host/file-management/decompress/index.vue
@@ -1,44 +1,41 @@
 <template>
-    <div>
-        <el-dialog
-            v-model="open"
-            :title="$t('file.deCompress')"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :before-close="handleClose"
-            width="30%"
-            @open="onOpen"
+    <el-drawer
+        v-model="open"
+        :title="$t('file.deCompress')"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        :before-close="handleClose"
+        size="30%"
+    >
+        <el-form
+            ref="fileForm"
+            label-position="left"
+            :model="form"
+            label-width="100px"
+            :rules="rules"
+            v-loading="loading"
         >
-            <el-form
-                ref="fileForm"
-                label-position="left"
-                :model="form"
-                label-width="100px"
-                :rules="rules"
-                v-loading="loading"
-            >
-                <el-form-item :label="$t('file.name')">
-                    <el-input v-model="name" disabled></el-input>
-                </el-form-item>
-                <el-form-item :label="$t('file.deCompressDst')" prop="dst">
-                    <el-input v-model="form.dst" disabled>
-                        <template #append><FileList :path="props.dst" @choose="getLinkPath"></FileList></template>
-                    </el-input>
-                </el-form-item>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
-                </span>
-            </template>
-        </el-dialog>
-    </div>
+            <el-form-item :label="$t('file.name')">
+                <el-input v-model="name" disabled></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('file.deCompressDst')" prop="dst">
+                <el-input v-model="form.dst" disabled>
+                    <template #append><FileList :path="form.dst" @choose="getLinkPath"></FileList></template>
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
+            </span>
+        </template>
+    </el-drawer>
 </template>
 
 <script setup lang="ts">
 import i18n from '@/lang';
-import { reactive, ref, toRefs } from 'vue';
+import { reactive, ref } from 'vue';
 import { File } from '@/api/interface/file';
 import { ElMessage, FormInstance, FormRules } from 'element-plus';
 import { Rules } from '@/global/form-rules';
@@ -46,37 +43,23 @@ import { DeCompressFile } from '@/api/modules/files';
 import { Mimetypes } from '@/global/mimetype';
 import FileList from '@/components/file-list/index.vue';
 
-const props = defineProps({
-    open: {
-        type: Boolean,
-        default: false,
-    },
-    dst: {
-        type: String,
-        default: '',
-    },
-    path: {
-        type: String,
-        default: '',
-    },
-    name: {
-        type: String,
-        default: '',
-    },
-    mimeType: {
-        type: String,
-        default: '',
-    },
-});
+interface CompressProps {
+    files: Array<any>;
+    dst: string;
+    name: string;
+    path: string;
+    mimeType: string;
+}
 
 const rules = reactive<FormRules>({
     dst: [Rules.requiredInput],
 });
 
-const { open, dst, path, name, mimeType } = toRefs(props);
 const fileForm = ref<FormInstance>();
 let loading = ref(false);
 let form = ref<File.FileDeCompress>({ type: 'zip', dst: '', path: '' });
+let open = ref(false);
+let name = ref('');
 
 const em = defineEmits(['close']);
 
@@ -84,6 +67,7 @@ const handleClose = () => {
     if (fileForm.value) {
         fileForm.value.resetFields();
     }
+    open.value = false;
     em('close', open);
 };
 
@@ -99,14 +83,6 @@ const getLinkPath = (path: string) => {
     form.value.dst = path;
 };
 
-const onOpen = () => {
-    form.value = {
-        dst: dst.value,
-        type: getFileType(mimeType.value),
-        path: path.value,
-    };
-};
-
 const submit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     await formEl.validate((valid) => {
@@ -124,4 +100,14 @@ const submit = async (formEl: FormInstance | undefined) => {
             });
     });
 };
+
+const acceptParams = (props: CompressProps) => {
+    form.value.type = getFileType(props.mimeType);
+    form.value.dst = props.dst;
+    form.value.path = props.path;
+    name.value = props.name;
+    open.value = true;
+};
+
+defineExpose({ acceptParams });
 </script>
diff --git a/frontend/src/views/host/file-management/detail/index.vue b/frontend/src/views/host/file-management/detail/index.vue
index 4956930bb..c4185eaf8 100644
--- a/frontend/src/views/host/file-management/detail/index.vue
+++ b/frontend/src/views/host/file-management/detail/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="open" :title="$t('file.info')" :column="1" width="30%">
+    <el-drawer v-model="open" :title="$t('file.info')" :column="1" width="30%">
         <el-row>
             <el-col>
                 <el-descriptions :column="1" border>
@@ -16,7 +16,7 @@
                 </el-descriptions>
             </el-col>
         </el-row>
-    </el-dialog>
+    </el-drawer>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/host/file-management/download/index.vue b/frontend/src/views/host/file-management/download/index.vue
index e63d746a9..108dfd40f 100644
--- a/frontend/src/views/host/file-management/download/index.vue
+++ b/frontend/src/views/host/file-management/download/index.vue
@@ -1,80 +1,70 @@
 <template>
-    <div>
-        <el-dialog
-            v-model="open"
-            :title="$t('file.download')"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :before-close="handleClose"
-            width="30%"
-            @open="onOpen"
-        >
-            <el-form
-                ref="fileForm"
-                label-position="left"
-                :model="addForm"
-                label-width="100px"
-                :rules="rules"
-                v-loading="loading"
-            >
-                <el-form-item :label="$t('file.compressType')" prop="type">
-                    <el-select v-model="addForm.type">
-                        <el-option v-for="item in options" :key="item" :label="item" :value="item" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="$t('file.name')" prop="name">
-                    <el-input v-model="addForm.name">
-                        <template #append>{{ extension }}</template>
-                    </el-input>
-                </el-form-item>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
-                </span>
-            </template>
-        </el-dialog>
-    </div>
+    <el-drawer
+        v-model="open"
+        :title="$t('file.download')"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        :before-close="handleClose"
+        size="30%"
+    >
+        <el-row>
+            <el-col :span="11" :offset="1">
+                <el-form
+                    ref="fileForm"
+                    label-position="top"
+                    :model="addForm"
+                    label-width="100px"
+                    :rules="rules"
+                    v-loading="loading"
+                >
+                    <el-form-item :label="$t('file.compressType')" prop="type">
+                        <el-select v-model="addForm.type">
+                            <el-option v-for="item in options" :key="item" :label="item" :value="item" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item :label="$t('file.name')" prop="name">
+                        <el-input v-model="addForm.name">
+                            <template #append>{{ extension }}</template>
+                        </el-input>
+                    </el-form-item>
+                </el-form>
+            </el-col>
+        </el-row>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
+            </span>
+        </template>
+    </el-drawer>
 </template>
 
 <script setup lang="ts">
 import { FormInstance, FormRules } from 'element-plus';
 import { CompressExtention, CompressType } from '@/enums/files';
-import { computed, PropType, reactive, ref, toRefs } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import { DownloadFile } from '@/api/modules/files';
 import { File } from '@/api/interface/file';
 import { Rules } from '@/global/form-rules';
 
-const props = defineProps({
-    open: {
-        type: Boolean,
-        default: false,
-    },
-    paths: {
-        type: Array as PropType<string[]>,
-        default: function () {
-            return [];
-        },
-    },
-    name: {
-        type: String,
-        default: '',
-    },
-});
+interface DownloadProps {
+    paths: Array<string>;
+    name: string;
+}
 
 const rules = reactive<FormRules>({
     name: [Rules.requiredInput],
     type: [Rules.requiredInput],
 });
 
-const { open } = toRefs(props);
 const fileForm = ref<FormInstance>();
 const options = ref<string[]>([]);
 let loading = ref(false);
+let open = ref(false);
 
 const em = defineEmits(['close']);
 const handleClose = () => {
+    open.value = false;
     if (fileForm.value) {
         fileForm.value.resetFields();
     }
@@ -91,18 +81,18 @@ const extension = computed(() => {
     return CompressExtention[addForm.value.type];
 });
 
-const onOpen = () => {
-    addForm.value = {
-        type: 'zip',
-        paths: props.paths,
-        name: props.name,
-    };
-    console.log(addForm);
-    options.value = [];
-    for (const t in CompressType) {
-        options.value.push(CompressType[t]);
-    }
-};
+// const onOpen = () => {
+//     addForm.value = {
+//         type: 'zip',
+//         paths: props.paths,
+//         name: props.name,
+//     };
+//     console.log(addForm);
+//     options.value = [];
+//     for (const t in CompressType) {
+//         options.value.push(CompressType[t]);
+//     }
+// };
 
 const submit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
@@ -130,4 +120,16 @@ const submit = async (formEl: FormInstance | undefined) => {
             });
     });
 };
+const acceptParams = (props: DownloadProps) => {
+    addForm.value.paths = props.paths;
+    addForm.value.name = props.name;
+    addForm.value.type = 'zip';
+    options.value = [];
+    for (const t in CompressType) {
+        options.value.push(CompressType[t]);
+    }
+    open.value = true;
+};
+
+defineExpose({ acceptParams });
 </script>
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index b7d1adb6d..17d3d7b60 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -5,7 +5,7 @@
             <el-button :icon="Refresh" circle @click="search" />
         </el-col>
         <el-col :span="22">
-            <div style="background-color: #ffffff">
+            <div class="path">
                 <BreadCrumbs>
                     <BreadCrumbItem @click="jump(-1)" :right="paths.length == 0">/</BreadCrumbItem>
                     <BreadCrumbItem
@@ -23,7 +23,7 @@
     <LayoutContent :title="$t('file.file')" v-loading="loading">
         <template #toolbar>
             <el-dropdown @command="handleCreate">
-                <el-button type="primary" icon="Plus">
+                <el-button type="primary">
                     {{ $t('commons.button.create') }}
                     <el-icon class="el-icon--right"><arrow-down /></el-icon>
                 </el-button>
@@ -114,55 +114,24 @@
             </ComplexTable>
         </template>
 
-        <CreateFile :open="filePage.open" :file="filePage.createForm" @close="closeCreate"></CreateFile>
-        <ChangeRole :open="modePage.open" :file="modePage.modeForm" @close="closeMode"></ChangeRole>
-        <Compress
-            :open="compressPage.open"
-            :files="compressPage.files"
-            :dst="compressPage.dst"
-            :name="compressPage.name"
-            @close="closeCompress"
-        ></Compress>
-        <Decompress
-            :open="deCompressPage.open"
-            :dst="deCompressPage.dst"
-            :path="deCompressPage.path"
-            :name="deCompressPage.name"
-            :mimeType="deCompressPage.mimeType"
-            @close="closeDeCompress"
-        ></Decompress>
-        <CodeEditor
-            :open="editorPage.open"
-            :language="'json'"
-            :content="editorPage.content"
-            :loading="editorPage.loading"
-            @close="closeCodeEditor"
-            @qsave="quickSave"
-            @save="saveContent"
-        ></CodeEditor>
-        <FileRename
-            :open="renamePage.open"
-            :path="renamePage.path"
-            :oldName="renamePage.oldName"
-            @close="closeRename"
-        ></FileRename>
-        <Upload :open="uploadPage.open" :path="uploadPage.path" @close="closeUpload"></Upload>
-        <Wget :open="wgetPage.open" :path="wgetPage.path" @close="closeWget"></Wget>
-        <Move :open="movePage.open" :oldPaths="movePage.oldPaths" :type="movePage.type" @close="clodeMove"></Move>
-        <Download
-            :open="downloadPage.open"
-            :paths="downloadPage.paths"
-            :name="downloadPage.name"
-            @close="closeDownload"
-        ></Download>
-        <Process :open="processPage.open" @close="closeProcess"></Process>
-        <Detail ref="detailRef"></Detail>
+        <CreateFile ref="createRef" @close="search" />
+        <ChangeRole ref="roleRef" @close="search" />
+        <Compress ref="compressRef" @close="search" />
+        <Decompress ref="deCompressRef" @close="search" />
+        <CodeEditor ref="codeEditorRef" @close="search" />
+        <FileRename ref="renameRef" @close="search" />
+        <Upload ref="uploadRef" @close="search" />
+        <Wget ref="wgetRef" @close="closeWget" />
+        <Move ref="moveRef" @close="search" />
+        <Download ref="downloadRef" @close="search" />
+        <Process :open="processPage.open" @close="closeProcess" />
+        <Detail ref="detailRef" />
     </LayoutContent>
 </template>
 
 <script setup lang="ts">
 import { onMounted, reactive, ref } from '@vue/runtime-core';
-import { GetFilesList, DeleteFile, GetFileContent, SaveFileContent, ComputeDirSize } from '@/api/modules/files';
+import { GetFilesList, DeleteFile, GetFileContent, ComputeDirSize } from '@/api/modules/files';
 import { computeSize, dateFormat, getIcon, getRandomStr } from '@/utils/util';
 import { File } from '@/api/interface/file';
 import { useDeleteData } from '@/hooks/use-delete-data';
@@ -195,19 +164,29 @@ let req = reactive({ path: '/', expand: true, showHidden: false, page: 1, pageSi
 let loading = ref(false);
 const paths = ref<string[]>([]);
 
-const filePage = reactive({ open: false, createForm: { path: '/', isDir: false, mode: 0o755 } });
-const modePage = reactive({ open: false, modeForm: { path: '/', isDir: false, mode: 0o755 } });
-const compressPage = reactive({ open: false, files: [''], name: '', dst: '' });
-const deCompressPage = reactive({ open: false, path: '', name: '', dst: '', mimeType: '' });
-const editorPage = reactive({ open: false, content: '', loading: false });
+const fileCreate = reactive({ path: '/', isDir: false, mode: 0o755 });
+const fileCompress = reactive({ files: [''], name: '', dst: '', operate: 'compress' });
+const fileDeCompress = reactive({ path: '', name: '', dst: '', mimeType: '' });
+const fileEdit = reactive({ content: '', path: '', name: '' });
 const codeReq = reactive({ path: '', expand: false, page: 1, pageSize: 100 });
-const uploadPage = reactive({ open: false, path: '' });
-const renamePage = reactive({ open: false, path: '', oldName: '' });
-const wgetPage = reactive({ open: false, path: '' });
-const movePage = reactive({ open: false, oldPaths: [''], type: '' });
-const downloadPage = reactive({ open: false, paths: [''], name: '' });
+const fileUpload = reactive({ path: '' });
+const fileRename = reactive({ path: '', oldName: '' });
+const fileWget = reactive({ path: '' });
+const fileMove = reactive({ oldPaths: [''], type: '' });
+const fileDownload = reactive({ paths: [''], name: '' });
 const processPage = reactive({ open: false });
+
+const createRef = ref();
+const roleRef = ref();
 const detailRef = ref();
+const compressRef = ref();
+const deCompressRef = ref();
+const codeEditorRef = ref();
+const renameRef = ref();
+const uploadRef = ref();
+const wgetRef = ref();
+const moveRef = ref();
+const downloadRef = ref();
 
 const paginationConfig = reactive({
     currentPage: 1,
@@ -269,12 +248,12 @@ const jump = async (index: number) => {
 };
 
 const handleCreate = (commnad: string) => {
-    filePage.createForm.path = req.path;
-    filePage.createForm.isDir = false;
+    fileCreate.path = req.path;
+    fileCreate.isDir = false;
     if (commnad === 'dir') {
-        filePage.createForm.isDir = true;
+        fileCreate.isDir = true;
     }
-    filePage.open = true;
+    createRef.value.acceptParams(fileCreate);
 };
 
 const delFile = async (row: File.File | null) => {
@@ -304,39 +283,24 @@ const getIconName = (extension: string) => {
     return getIcon(extension);
 };
 
-const closeCreate = () => {
-    filePage.open = false;
-    search();
-};
-
 const openMode = (item: File.File) => {
-    modePage.modeForm = item;
-    modePage.open = true;
-};
-
-const closeMode = () => {
-    modePage.open = false;
-    search();
+    roleRef.value.acceptParams(item);
 };
 
 const openCompress = (items: File.File[]) => {
-    compressPage.open = true;
     const paths = [];
     for (const item of items) {
         paths.push(item.path);
     }
-    compressPage.files = paths;
+    fileCompress.files = paths;
     if (paths.length === 1) {
-        compressPage.name = items[0].name;
+        fileCompress.name = items[0].name;
     } else {
-        compressPage.name = getRandomStr(6);
+        fileCompress.name = getRandomStr(6);
     }
-    compressPage.dst = req.path;
-};
+    fileCompress.dst = req.path;
 
-const closeCompress = () => {
-    compressPage.open = false;
-    search();
+    compressRef.value.acceptParams(fileCompress);
 };
 
 const openDeCompress = (item: File.File) => {
@@ -345,48 +309,36 @@ const openDeCompress = (item: File.File) => {
         return;
     }
 
-    deCompressPage.open = true;
-    deCompressPage.name = item.name;
-    deCompressPage.path = item.path;
-    deCompressPage.dst = req.path;
-    deCompressPage.mimeType = item.mimeType;
-};
+    fileDeCompress.name = item.name;
+    fileDeCompress.path = item.path;
+    fileDeCompress.dst = req.path;
+    fileDeCompress.mimeType = item.mimeType;
 
-const closeDeCompress = () => {
-    deCompressPage.open = false;
-    search();
+    deCompressRef.value.acceptParams(fileDeCompress);
 };
 
 const openCodeEditor = (row: File.File) => {
     codeReq.path = row.path;
     codeReq.expand = true;
     GetFileContent(codeReq).then((res) => {
-        editorPage.content = res.data.content;
-        editorPage.open = true;
+        fileEdit.content = res.data.content;
+        fileEdit.path = res.data.path;
+        fileEdit.name = res.data.name;
+        codeEditorRef.value.acceptParams(fileEdit);
     });
 };
 
-const closeCodeEditor = () => {
-    editorPage.open = false;
-};
-
 const openUpload = () => {
-    uploadPage.open = true;
-    uploadPage.path = req.path;
-};
-
-const closeUpload = () => {
-    uploadPage.open = false;
-    search();
+    fileUpload.path = req.path;
+    uploadRef.value.acceptParams(fileUpload);
 };
 
 const openWget = () => {
-    wgetPage.open = true;
-    wgetPage.path = req.path;
+    fileWget.path = req.path;
+    wgetRef.value.acceptParams(fileWget);
 };
 
 const closeWget = (submit: any) => {
-    wgetPage.open = false;
     search();
     if (submit) {
         openProcess();
@@ -402,29 +354,19 @@ const closeProcess = () => {
 };
 
 const openRename = (item: File.File) => {
-    renamePage.open = true;
-    renamePage.path = req.path;
-    renamePage.oldName = item.name;
-};
-
-const closeRename = () => {
-    renamePage.open = false;
-    search();
+    fileRename.path = req.path;
+    fileRename.oldName = item.name;
+    renameRef.value.acceptParams(fileRename);
 };
 
 const openMove = (type: string) => {
-    movePage.type = type;
+    fileMove.type = type;
     const oldpaths = [];
     for (const s of selects.value) {
         oldpaths.push(s['path']);
     }
-    movePage.oldPaths = oldpaths;
-    movePage.open = true;
-};
-
-const clodeMove = () => {
-    movePage.open = false;
-    search();
+    fileMove.oldPaths = oldpaths;
+    moveRef.value.acceptParams(fileMove);
 };
 
 const openDownload = () => {
@@ -432,31 +374,31 @@ const openDownload = () => {
     for (const s of selects.value) {
         paths.push(s['path']);
     }
-    downloadPage.paths = paths;
-    downloadPage.name = getRandomStr(6);
-    downloadPage.open = true;
+    fileDownload.paths = paths;
+    fileDownload.name = getRandomStr(6);
+    downloadRef.value.acceptParams(fileDownload);
 };
 
-const closeDownload = () => {
-    downloadPage.open = false;
-    search();
-};
-const saveContent = (content: string) => {
-    editorPage.loading = true;
-    SaveFileContent({ path: codeReq.path, content: content }).finally(() => {
-        editorPage.loading = false;
-        editorPage.open = false;
-        ElMessage.success(i18n.global.t('commons.msg.updateSuccess'));
-    });
-};
+// const closeDownload = () => {
+//     downloadPage.open = false;
+//     search();
+// };
+// const saveContent = (content: string) => {
+//     editorPage.loading = true;
+//     SaveFileContent({ path: codeReq.path, content: content }).finally(() => {
+//         editorPage.loading = false;
+//         editorPage.open = false;
+//         ElMessage.success(i18n.global.t('commons.msg.updateSuccess'));
+//     });
+// };
 
-const quickSave = (content: string) => {
-    editorPage.loading = true;
-    SaveFileContent({ path: codeReq.path, content: content }).finally(() => {
-        editorPage.loading = false;
-        ElMessage.success(i18n.global.t('commons.msg.updateSuccess'));
-    });
-};
+// const quickSave = (content: string) => {
+//     editorPage.loading = true;
+//     SaveFileContent({ path: codeReq.path, content: content }).finally(() => {
+//         editorPage.loading = false;
+//         ElMessage.success(i18n.global.t('commons.msg.updateSuccess'));
+//     });
+// };
 
 const openDetail = (row: File.File) => {
     detailRef.value.acceptParams({ path: row.path });
@@ -508,8 +450,7 @@ onMounted(() => {
 
 <style>
 .path {
-    height: 30px;
-    margin-bottom: 5px;
+    background-color: #ffffff;
 }
 
 .search-button {
diff --git a/frontend/src/views/host/file-management/move/index.vue b/frontend/src/views/host/file-management/move/index.vue
index 4880ca7af..0448422d6 100644
--- a/frontend/src/views/host/file-management/move/index.vue
+++ b/frontend/src/views/host/file-management/move/index.vue
@@ -1,12 +1,11 @@
 <template>
-    <el-dialog
+    <el-drawer
         v-model="open"
         :title="title"
         :destroy-on-close="true"
         :close-on-click-modal="false"
         :before-close="handleClose"
-        width="30%"
-        @open="onOpen"
+        size="30%"
     >
         <el-form
             ref="fileForm"
@@ -30,7 +29,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </el-drawer>
 </template>
 
 <script lang="ts" setup>
@@ -38,32 +37,21 @@ import { MoveFile } from '@/api/modules/files';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElMessage, FormInstance, FormRules } from 'element-plus';
-import { toRefs, ref, reactive, PropType, computed } from 'vue';
+import { ref, reactive, computed } from 'vue';
 import FileList from '@/components/file-list/index.vue';
 
-const props = defineProps({
-    open: {
-        type: Boolean,
-        default: false,
-    },
-    oldPaths: {
-        type: Array as PropType<string[]>,
-        default: () => {
-            return [];
-        },
-    },
-    type: {
-        type: String,
-        default: '',
-    },
-});
+interface MoveProps {
+    oldPaths: Array<string>;
+    type: string;
+}
 
-const { open } = toRefs(props);
 const fileForm = ref<FormInstance>();
 const loading = ref(false);
+let open = ref(false);
+let type = ref('cut');
 
 const title = computed(() => {
-    if (props.type === 'cut') {
+    if (type.value === 'cut') {
         return i18n.global.t('file.move');
     } else {
         return i18n.global.t('file.copy');
@@ -83,6 +71,7 @@ const rules = reactive<FormRules>({
 const em = defineEmits(['close']);
 
 const handleClose = () => {
+    open.value = false;
     if (fileForm.value) {
         fileForm.value.resetFields();
     }
@@ -111,8 +100,12 @@ const submit = async (formEl: FormInstance | undefined) => {
     });
 };
 
-const onOpen = () => {
+const acceptParams = (props: MoveProps) => {
     addForm.oldPaths = props.oldPaths;
     addForm.type = props.type;
+    type.value = props.type;
+    open.value = true;
 };
+
+defineExpose({ acceptParams });
 </script>
diff --git a/frontend/src/views/host/file-management/rename/index.vue b/frontend/src/views/host/file-management/rename/index.vue
index 429bbf4af..33303aa06 100644
--- a/frontend/src/views/host/file-management/rename/index.vue
+++ b/frontend/src/views/host/file-management/rename/index.vue
@@ -1,53 +1,50 @@
 <template>
-    <el-dialog v-model="open" :before-close="handleClose" :title="$t('file.setRole')" width="30%" @open="onOpen">
-        <el-form
-            ref="fileForm"
-            label-position="left"
-            :model="addForm"
-            label-width="100px"
-            :rules="rules"
-            v-loading="loading"
-        >
-            <el-form-item :label="$t('file.path')" prop="path">
-                <el-input v-model="props.path" disabled />
-            </el-form-item>
-            <el-form-item :label="$t('file.name')" prop="newName"><el-input v-model="addForm.newName" /></el-form-item>
-        </el-form>
+    <el-drawer v-model="open" :before-close="handleClose" :title="$t('file.rename')" size="30%">
+        <el-row>
+            <el-col :span="22" :offset="1">
+                <el-form
+                    ref="fileForm"
+                    label-position="top"
+                    :model="addForm"
+                    label-width="100px"
+                    :rules="rules"
+                    v-loading="loading"
+                >
+                    <el-form-item :label="$t('file.path')" prop="path">
+                        <el-input v-model="addForm.path" disabled />
+                    </el-form-item>
+                    <el-form-item :label="$t('file.name')" prop="newName">
+                        <el-input v-model="addForm.newName" />
+                    </el-form-item>
+                </el-form>
+            </el-col>
+        </el-row>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
                 <el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
             </span>
         </template>
-    </el-dialog>
+    </el-drawer>
 </template>
 
 <script lang="ts" setup>
 import { RenameRile } from '@/api/modules/files';
 import { Rules } from '@/global/form-rules';
 import { ElMessage, FormInstance, FormRules } from 'element-plus';
-import { reactive, ref, toRefs } from 'vue';
+import { reactive, ref } from 'vue';
 import { File } from '@/api/interface/file';
 import i18n from '@/lang';
 
-const props = defineProps({
-    open: {
-        type: Boolean,
-        default: false,
-    },
-    oldName: {
-        type: String,
-        default: '',
-    },
-    path: {
-        type: String,
-        default: '',
-    },
-});
+interface RenameProps {
+    path: string;
+    oldName: string;
+}
 
-const { open } = toRefs(props);
 const fileForm = ref<FormInstance>();
 const loading = ref(false);
+let open = ref(false);
+const oldName = ref('');
 
 const addForm = reactive({
     newName: '',
@@ -60,6 +57,7 @@ const rules = reactive<FormRules>({
 
 const em = defineEmits(['close']);
 const handleClose = () => {
+    open.value = false;
     if (fileForm.value) {
         fileForm.value.resetFields();
     }
@@ -78,8 +76,8 @@ const submit = async (formEl: FormInstance | undefined) => {
 
         let addItem = {};
         Object.assign(addItem, addForm);
-        addItem['oldName'] = getPath(props.path, props.oldName);
-        addItem['newName'] = getPath(props.path, addForm.newName);
+        addItem['oldName'] = getPath(addForm.path, oldName.value);
+        addItem['newName'] = getPath(addForm.path, addForm.newName);
         loading.value = true;
         RenameRile(addItem as File.FileRename)
             .then(() => {
@@ -92,7 +90,12 @@ const submit = async (formEl: FormInstance | undefined) => {
     });
 };
 
-const onOpen = () => {
+const acceptParams = (props: RenameProps) => {
+    oldName.value = props.oldName;
     addForm.newName = props.oldName;
+    addForm.path = props.path;
+    open.value = true;
 };
+
+defineExpose({ acceptParams });
 </script>
diff --git a/frontend/src/views/host/file-management/upload/index.vue b/frontend/src/views/host/file-management/upload/index.vue
index f9bea047f..db3548afd 100644
--- a/frontend/src/views/host/file-management/upload/index.vue
+++ b/frontend/src/views/host/file-management/upload/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="open" :title="$t('file.upload')" :before-close="handleClose" width="30%" :file-list="files">
+    <el-drawer v-model="open" :title="$t('file.upload')" :before-close="handleClose" size="40%" :file-list="files">
         <el-upload
             action="#"
             :auto-upload="false"
@@ -21,7 +21,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </el-drawer>
 </template>
 
 <script setup lang="ts">
@@ -30,24 +30,20 @@ import { ElMessage, UploadFile, UploadFiles, UploadInstance } from 'element-plus
 import { UploadFileData } from '@/api/modules/files';
 import i18n from '@/lang';
 
-const props = defineProps({
-    open: {
-        type: Boolean,
-        default: false,
-    },
-    path: {
-        type: String,
-        default: '',
-    },
-});
+interface UploadProps {
+    path: string;
+}
 
 const uploadRef = ref<UploadInstance>();
 const files = ref();
 const loading = ref(false);
 let uploadPrecent = ref(0);
+let open = ref(false);
+let path = ref();
 
 const em = defineEmits(['close']);
 const handleClose = () => {
+    open.value = false;
     uploadRef.value!.clearFiles();
     em('close', false);
 };
@@ -70,7 +66,7 @@ const submit = () => {
             formData.append('file', file.raw);
         }
     }
-    formData.append('path', props.path);
+    formData.append('path', path.value);
     loading.value = true;
     UploadFileData(formData, { onUploadProgress: onProcess })
         .then(() => {
@@ -81,4 +77,11 @@ const submit = () => {
             loading.value = false;
         });
 };
+
+const acceptParams = (props: UploadProps) => {
+    path.value = props.path;
+    open.value = true;
+};
+
+defineExpose({ acceptParams });
 </script>
diff --git a/frontend/src/views/host/file-management/wget/index.vue b/frontend/src/views/host/file-management/wget/index.vue
index bed28f35e..b7533f1c6 100644
--- a/frontend/src/views/host/file-management/wget/index.vue
+++ b/frontend/src/views/host/file-management/wget/index.vue
@@ -1,34 +1,38 @@
 <template>
-    <el-dialog v-model="open" :before-close="handleClose" :title="$t('file.download')" width="30%" @open="onOpen">
-        <el-form
-            ref="fileForm"
-            label-position="left"
-            :model="addForm"
-            label-width="100px"
-            :rules="rules"
-            v-loading="loading"
-        >
-            <el-form-item :label="$t('file.downloadUrl')" prop="url">
-                <el-input v-model="addForm.url" @input="getFileName" />
-            </el-form-item>
-            <el-form-item :label="$t('file.path')" prop="path">
-                <el-input v-model="addForm.path" disabled>
-                    <template #append><FileList :path="path" @choose="getPath"></FileList></template>
-                </el-input>
-            </el-form-item>
-            <el-form-item :label="$t('file.name')" prop="name">
-                <el-input v-model="addForm.name"></el-input>
-            </el-form-item>
-        </el-form>
+    <el-drawer v-model="open" :before-close="handleClose" :title="$t('file.download')" size="50%">
+        <el-row>
+            <el-col :span="22" :offset="1">
+                <el-form
+                    ref="fileForm"
+                    label-position="top"
+                    :model="addForm"
+                    label-width="100px"
+                    :rules="rules"
+                    v-loading="loading"
+                >
+                    <el-form-item :label="$t('file.downloadUrl')" prop="url">
+                        <el-input v-model="addForm.url" @input="getFileName" />
+                    </el-form-item>
+                    <el-form-item :label="$t('file.path')" prop="path">
+                        <el-input v-model="addForm.path" disabled>
+                            <template #append><FileList :path="addForm.path" @choose="getPath"></FileList></template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item :label="$t('file.name')" prop="name">
+                        <el-input v-model="addForm.name"></el-input>
+                    </el-form-item>
+                </el-form>
+            </el-col>
+        </el-row>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="handleClose(false)" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button @click="handleClose()" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
                 <el-button type="primary" @click="submit(fileForm)" :disabled="loading">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </el-drawer>
 </template>
 
 <script lang="ts" setup>
@@ -36,22 +40,17 @@ import { WgetFile } from '@/api/modules/files';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElMessage, FormInstance, FormRules } from 'element-plus';
-import { reactive, ref, toRefs } from 'vue';
+import { reactive, ref } from 'vue';
 import FileList from '@/components/file-list/index.vue';
 
-const props = defineProps({
-    open: {
-        type: Boolean,
-        default: false,
-    },
-    path: {
-        type: String,
-        default: '',
-    },
-});
-const { open } = toRefs(props);
+interface WgetProps {
+    path: string;
+}
+
 const fileForm = ref<FormInstance>();
 const loading = ref(false);
+let open = ref(false);
+let submitData = ref(false);
 
 const rules = reactive<FormRules>({
     name: [Rules.requiredInput],
@@ -67,15 +66,12 @@ const addForm = reactive({
 
 const em = defineEmits(['close']);
 
-const handleClose = (submit: boolean) => {
+const handleClose = () => {
     if (fileForm.value) {
         fileForm.value.resetFields();
     }
-    if (submit != true) {
-        em('close', false);
-    } else {
-        em('close', true);
-    }
+    open.value = false;
+    em('close', submitData);
 };
 
 const getPath = (path: string) => {
@@ -92,7 +88,8 @@ const submit = async (formEl: FormInstance | undefined) => {
         WgetFile(addForm)
             .then(() => {
                 ElMessage.success(i18n.global.t('file.downloadStart'));
-                handleClose(true);
+                submitData.value = true;
+                handleClose();
             })
             .finally(() => {
                 loading.value = false;
@@ -105,7 +102,10 @@ const getFileName = (url: string) => {
     addForm.name = paths[paths.length - 1];
 };
 
-const onOpen = () => {
+const acceptParams = (props: WgetProps) => {
     addForm.path = props.path;
+    open.value = true;
 };
+
+defineExpose({ acceptParams });
 </script>