refactor: ♻️ 抽屉适配移动端自适应调整宽度

src/views/system/menu/index.vue

@@ -112,7 +112,12 @@
       </el-table>
     </el-card>
 
-    <el-drawer v-model="dialog.visible" :title="dialog.title" size="50%" @close="handleCloseDialog">
+    <el-drawer
+      v-model="dialog.visible"
+      :title="dialog.title"
+      :size="drawerSize"
+      @close="handleCloseDialog"
+    >
       <el-form ref="menuFormRef" :model="formData" :rules="rules" label-width="100px">
         <el-form-item label="父级菜单" prop="parentId">
           <el-tree-select
@@ -330,13 +335,18 @@
 </template>
 
 <script setup lang="ts">
+import { useAppStore } from "@/store/modules/app.store";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+
+import MenuAPI, { MenuQuery, MenuForm, MenuVO } from "@/api/system/menu.api";
+import { MenuTypeEnum } from "@/enums/system/menu.enum";
+
 defineOptions({
   name: "SysMenu",
   inheritAttrs: false,
 });
 
-import MenuAPI, { MenuQuery, MenuForm, MenuVO } from "@/api/system/menu.api";
-import { MenuTypeEnum } from "@/enums/system/menu.enum";
+const appStore = useAppStore();
 
 const queryFormRef = ref();
 const menuFormRef = ref();
@@ -347,6 +357,7 @@ const dialog = reactive({
   visible: false,
 });
 
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
 // 查询参数
 const queryParams = reactive<MenuQuery>({});
 // 菜单表格数据