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>({});
 // 菜单表格数据

src/views/system/role/index.vue

@@ -143,7 +143,7 @@
     <el-drawer
       v-model="assignPermDialogVisible"
       :title="'【' + checkedRole.name + '】权限分配'"
-      size="500"
+      :size="drawerSize"
     >
       <div class="flex-x-between">
         <el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单权限名称">
@@ -203,13 +203,18 @@
 </template>
 
 <script setup lang="ts">
+import { useAppStore } from "@/store/modules/app.store";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+
+import RoleAPI, { RolePageVO, RoleForm, RolePageQuery } from "@/api/system/role.api";
+import MenuAPI from "@/api/system/menu.api";
+
 defineOptions({
   name: "Role",
   inheritAttrs: false,
 });
 
-import RoleAPI, { RolePageVO, RoleForm, RolePageQuery } from "@/api/system/role.api";
-import MenuAPI from "@/api/system/menu.api";
+const appStore = useAppStore();
 
 const queryFormRef = ref();
 const roleFormRef = ref();
@@ -234,6 +239,9 @@ const dialog = reactive({
   title: "",
   visible: false,
 });
+
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
+
 // 角色表单
 const formData = reactive<RoleForm>({
   sort: 1,

src/views/system/user/index.vue

@@ -162,6 +162,7 @@
       v-model="dialog.visible"
       :title="dialog.title"
       append-to-body
+      :size="drawerSize"
       @close="handleCloseDialog"
     >
       <el-form ref="userFormRef" :model="formData" :rules="rules" label-width="80px">
@@ -237,8 +238,10 @@
 </template>
 
 <script setup lang="ts">
-import UserAPI, { UserForm, UserPageQuery, UserPageVO } from "@/api/system/user.api";
+import { useAppStore } from "@/store/modules/app.store";
+import { DeviceEnum } from "@/enums/settings/device.enum";
 
+import UserAPI, { UserForm, UserPageQuery, UserPageVO } from "@/api/system/user.api";
 import DeptAPI from "@/api/system/dept.api";
 import RoleAPI from "@/api/system/role.api";
 
@@ -249,6 +252,9 @@ defineOptions({
   name: "User",
   inheritAttrs: false,
 });
+
+const appStore = useAppStore();
+
 const queryFormRef = ref();
 const userFormRef = ref();
 
@@ -265,6 +271,7 @@ const dialog = reactive({
   visible: false,
   title: "新增用户",
 });
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
 
 const formData = reactive<UserForm>({
   status: 1,