From c0005b4bc9dcc5deb153c1662786b0ffd7ef5b2c Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sat, 16 Mar 2024 23:20:04 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E7=B3=BB=E7=BB=9F=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E3=80=81=E7=B3=BB=E7=BB=9F=E7=9B=91=E6=8E=A7=E5=85=BC=E5=AE=B9?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/monitor/logs/login/index.vue     |  2 +-
 src/views/monitor/logs/operation/index.vue |  2 +-
 src/views/monitor/logs/system/index.vue    |  2 +-
 src/views/monitor/online/index.vue         |  2 +-
 src/views/system/dept/index.vue            |  2 +-
 src/views/system/dept/utils/hook.tsx       |  3 ++-
 src/views/system/menu/index.vue            |  2 +-
 src/views/system/menu/utils/hook.tsx       |  3 ++-
 src/views/system/role/index.vue            |  2 +-
 src/views/system/role/utils/hook.tsx       |  3 ++-
 src/views/system/user/index.vue            | 11 +++++++----
 src/views/system/user/tree.vue             |  5 +++--
 src/views/system/user/utils/hook.tsx       | 12 +++++++++++-
 13 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/views/monitor/logs/login/index.vue b/src/views/monitor/logs/login/index.vue
index 729957026..c65e6dbff 100644
--- a/src/views/monitor/logs/login/index.vue
+++ b/src/views/monitor/logs/login/index.vue
@@ -39,7 +39,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="用户名" prop="username">
         <el-input
diff --git a/src/views/monitor/logs/operation/index.vue b/src/views/monitor/logs/operation/index.vue
index 1a95dba68..d36cb78e3 100644
--- a/src/views/monitor/logs/operation/index.vue
+++ b/src/views/monitor/logs/operation/index.vue
@@ -39,7 +39,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="所属模块" prop="module">
         <el-input
diff --git a/src/views/monitor/logs/system/index.vue b/src/views/monitor/logs/system/index.vue
index d563eed2f..6cb0ef31d 100644
--- a/src/views/monitor/logs/system/index.vue
+++ b/src/views/monitor/logs/system/index.vue
@@ -42,7 +42,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="所属模块" prop="module">
         <el-input
diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue
index 4b927155c..624a3f633 100644
--- a/src/views/monitor/online/index.vue
+++ b/src/views/monitor/online/index.vue
@@ -33,7 +33,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="用户名" prop="username">
         <el-input
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index d9d3e2e7a..917d52e5e 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -34,7 +34,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="部门名称：" prop="name">
         <el-input
diff --git a/src/views/system/dept/utils/hook.tsx b/src/views/system/dept/utils/hook.tsx
index 052fcee0b..465636a64 100644
--- a/src/views/system/dept/utils/hook.tsx
+++ b/src/views/system/dept/utils/hook.tsx
@@ -7,7 +7,7 @@ import { usePublicHooks } from "../../hooks";
 import { addDialog } from "@/components/ReDialog";
 import { reactive, ref, onMounted, h } from "vue";
 import type { FormItemProps } from "../utils/types";
-import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
+import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
 
 export function useDept() {
   const form = reactive({
@@ -120,6 +120,7 @@ export function useDept() {
       },
       width: "40%",
       draggable: true,
+      fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
       contentRenderer: () => h(editForm, { ref: formRef }),
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index fe40f7038..ebd0d1c40 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -35,7 +35,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="菜单名称：" prop="title">
         <el-input
diff --git a/src/views/system/menu/utils/hook.tsx b/src/views/system/menu/utils/hook.tsx
index bf6820ce8..af3023ed7 100644
--- a/src/views/system/menu/utils/hook.tsx
+++ b/src/views/system/menu/utils/hook.tsx
@@ -6,8 +6,8 @@ import { transformI18n } from "@/plugins/i18n";
 import { addDialog } from "@/components/ReDialog";
 import { reactive, ref, onMounted, h } from "vue";
 import type { FormItemProps } from "../utils/types";
-import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
 
 export function useMenu() {
   const form = reactive({
@@ -161,6 +161,7 @@ export function useMenu() {
       },
       width: "45%",
       draggable: true,
+      fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
       contentRenderer: () => h(editForm, { ref: formRef }),
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 540070246..6037ff079 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -96,7 +96,7 @@ onMounted(() => {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="角色名称：" prop="name">
         <el-input
diff --git a/src/views/system/role/utils/hook.tsx b/src/views/system/role/utils/hook.tsx
index eb627b41a..b589d35a9 100644
--- a/src/views/system/role/utils/hook.tsx
+++ b/src/views/system/role/utils/hook.tsx
@@ -4,11 +4,11 @@ import { handleTree } from "@/utils/tree";
 import { message } from "@/utils/message";
 import { ElMessageBox } from "element-plus";
 import { usePublicHooks } from "../../hooks";
-import { getKeyList } from "@pureadmin/utils";
 import { transformI18n } from "@/plugins/i18n";
 import { addDialog } from "@/components/ReDialog";
 import type { FormItemProps } from "../utils/types";
 import type { PaginationProps } from "@pureadmin/table";
+import { getKeyList, deviceDetection } from "@pureadmin/utils";
 import { getRoleList, getRoleMenu, getRoleMenuIds } from "@/api/system";
 import { type Ref, reactive, ref, onMounted, h, toRaw, watch } from "vue";
 
@@ -192,6 +192,7 @@ export function useRole(treeRef: Ref) {
       },
       width: "40%",
       draggable: true,
+      fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
       contentRenderer: () => h(editForm, { ref: formRef }),
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 8b97a28c1..0cfc100e7 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -32,6 +32,7 @@ const {
   selectedNum,
   pagination,
   buttonClass,
+  deviceDetection,
   onSearch,
   resetForm,
   onbatchDel,
@@ -50,20 +51,22 @@ const {
 </script>
 
 <template>
-  <div class="flex justify-between">
+  <div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
     <tree
       ref="treeRef"
-      class="min-w-[200px] mr-2"
+      :class="['mr-2', deviceDetection() ? 'w-full' : 'min-w-[200px]']"
       :treeData="treeData"
       :treeLoading="treeLoading"
       @tree-select="onTreeSelect"
     />
-    <div class="w-[calc(100%-200px)]">
+    <div
+      :class="[deviceDetection() ? ['w-full', 'mt-2'] : 'w-[calc(100%-200px)]']"
+    >
       <el-form
         ref="formRef"
         :inline="true"
         :model="form"
-        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
       >
         <el-form-item label="用户名称：" prop="username">
           <el-input
diff --git a/src/views/system/user/tree.vue b/src/views/system/user/tree.vue
index adcb76843..bcfa774b3 100644
--- a/src/views/system/user/tree.vue
+++ b/src/views/system/user/tree.vue
@@ -36,8 +36,9 @@ const defaultProps = {
 const buttonClass = computed(() => {
   return [
     "!h-[20px]",
+    "!text-sm",
     "reset-margin",
-    "!text-gray-500",
+    "!text-[var(--el-text-color-regular)]",
     "dark:!text-white",
     "dark:hover:!text-primary"
   ];
@@ -96,7 +97,7 @@ defineExpose({ onTreeReset });
   <div
     v-loading="props.treeLoading"
     class="h-full bg-bg_color overflow-auto"
-    :style="{ minHeight: `calc(100vh - 145px)` }"
+    :style="{ minHeight: `calc(100vh - 141px)` }"
   >
     <div class="flex items-center h-[34px]">
       <el-input
diff --git a/src/views/system/user/utils/hook.tsx b/src/views/system/user/utils/hook.tsx
index 4bc98c5c3..5cad74de3 100644
--- a/src/views/system/user/utils/hook.tsx
+++ b/src/views/system/user/utils/hook.tsx
@@ -10,7 +10,12 @@ import { usePublicHooks } from "../../hooks";
 import { addDialog } from "@/components/ReDialog";
 import type { PaginationProps } from "@pureadmin/table";
 import type { FormItemProps, RoleFormItemProps } from "../utils/types";
-import { hideTextAtIndex, getKeyList, isAllEmpty } from "@pureadmin/utils";
+import {
+  getKeyList,
+  isAllEmpty,
+  hideTextAtIndex,
+  deviceDetection
+} from "@pureadmin/utils";
 import {
   getRoleIds,
   getDeptList,
@@ -322,6 +327,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       },
       width: "46%",
       draggable: true,
+      fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
       contentRenderer: () => h(editForm, { ref: formRef }),
@@ -360,6 +366,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       width: "40%",
       draggable: true,
       closeOnClickModal: false,
+      fullscreen: deviceDetection(),
       contentRenderer: () =>
         h(croppingUpload, {
           ref: cropRef,
@@ -389,6 +396,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       width: "30%",
       draggable: true,
       closeOnClickModal: false,
+      fullscreen: deviceDetection(),
       contentRenderer: () => (
         <>
           <ElForm ref={ruleFormRef} model={pwdForm}>
@@ -471,6 +479,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       },
       width: "400px",
       draggable: true,
+      fullscreen: deviceDetection(),
       fullscreenIcon: true,
       closeOnClickModal: false,
       contentRenderer: () => h(roleForm),
@@ -507,6 +516,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
     selectedNum,
     pagination,
     buttonClass,
+    deviceDetection,
     onSearch,
     resetForm,
     onbatchDel,