diff --git a/frontend/src/views/FactoryManage.vue b/frontend/src/views/FactoryManage.vue
index b26effb..ba957e5 100644
--- a/frontend/src/views/FactoryManage.vue
+++ b/frontend/src/views/FactoryManage.vue
@@ -47,13 +47,19 @@
       />
     </div>
 
-    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="640px" class="dialog-scroll">
+    <el-drawer
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      size="50%"
+      :close-on-click-modal="false"
+      class="factory-drawer"
+    >
       <FactoryForm ref="factoryFormRef" v-model="form" mode="edit" />
       <template #footer>
         <el-button @click="dialogVisible = false">取消</el-button>
         <el-button type="primary" @click="onSubmit">保存</el-button>
       </template>
-    </el-dialog>
+    </el-drawer>
   </div>
 </template>
 
@@ -180,9 +186,12 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.dialog-scroll :deep(.el-dialog__body) {
-  max-height: 60vh;
-  overflow: auto;
-  padding-right: 8px;
+.factory-drawer :deep(.el-drawer__body) {
+  padding: 20px 24px;
+  overflow-y: auto;
+}
+
+.factory-drawer :deep(.el-drawer__footer) {
+  padding: 12px 24px;
 }
 </style>
diff --git a/frontend/src/views/MaterialManage.vue b/frontend/src/views/MaterialManage.vue
index a1205d6..774a803 100644
--- a/frontend/src/views/MaterialManage.vue
+++ b/frontend/src/views/MaterialManage.vue
@@ -75,20 +75,20 @@
       />
     </div>
 
-    <el-dialog
-      v-if="dialogVisible"
+    <el-drawer
       v-model="dialogVisible"
       :title="dialogTitle"
-      width="720px"
-      class="dialog-scroll"
+      size="60%"
       :close-on-click-modal="false"
+      :destroy-on-close="true"
+      class="material-drawer"
     >
       <MaterialForm ref="materialFormRef" v-model="form" mode="edit" />
       <template #footer>
         <el-button @click="dialogVisible = false">取消</el-button>
         <el-button type="primary" @click="onSave">保存</el-button>
       </template>
-    </el-dialog>
+    </el-drawer>
 
     <el-dialog v-model="importDialogVisible" title="导入材料" width="420px">
       <div class="import-dialog">
@@ -427,9 +427,12 @@ onMounted(() => {
   gap: 12px;
 }
 
-.dialog-scroll :deep(.el-dialog__body) {
-  max-height: 60vh;
-  overflow: auto;
-  padding-right: 8px;
+.material-drawer :deep(.el-drawer__body) {
+  padding: 20px 24px;
+  overflow-y: auto;
+}
+
+.material-drawer :deep(.el-drawer__footer) {
+  padding: 12px 24px;
 }
 </style>