chore: 移动端兼容

src/views/account-settings/components/accountManagement.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { message } from "@/utils/message";
+import { deviceDetection } from "@pureadmin/utils";
 
 const list = ref([
   {
@@ -32,7 +33,12 @@ function onClick(item) {
 </script>
 
 <template>
-  <div class="ml-[120px] min-w-[180px] max-w-[70%]">
+  <div
+    :class="[
+      'min-w-[180px]',
+      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
+    ]"
+  >
     <h3 class="my-8">账户管理</h3>
     <div v-for="(item, index) in list" :key="index">
       <div class="flex items-center">

src/views/account-settings/components/preferences.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { message } from "@/utils/message";
+import { deviceDetection } from "@pureadmin/utils";
 
 const list = ref([
   {
@@ -27,7 +28,12 @@ function onChange(val, item) {
 </script>
 
 <template>
-  <div class="ml-[120px] min-w-[180px] max-w-[70%]">
+  <div
+    :class="[
+      'min-w-[180px]',
+      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
+    ]"
+  >
     <h3 class="my-8">偏好设置</h3>
     <div v-for="(item, index) in list" :key="index">
       <div class="flex items-center">

src/views/account-settings/components/profile.vue

@@ -7,7 +7,7 @@ import CroppingUpload from "@/views/system/user/upload.vue";
 import type { FormInstance, FormRules } from "element-plus";
 import { formUpload } from "@/api/mock";
 import { message } from "@/utils/message";
-import { createFormData } from "@pureadmin/utils";
+import { createFormData, deviceDetection } from "@pureadmin/utils";
 import { getMine, UserInfo } from "@/api/user";
 const { userAvatar, getLogo, username } = useNav();
 const cropRef = ref();
@@ -122,7 +122,12 @@ function querySearchEmail(queryString, callback) {
 </script>
 
 <template>
-  <div class="ml-[120px] min-w-[180px] max-w-[70%]">
+  <div
+    :class="[
+      'min-w-[180px]',
+      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
+    ]"
+  >
     <h3 class="my-8">个人信息</h3>
     <el-form
       ref="userInfoFormRef"

src/views/account-settings/components/securityLog.vue

@@ -2,6 +2,7 @@
 import dayjs from "dayjs";
 import { getMineLogs } from "@/api/user";
 import { reactive, ref, onMounted } from "vue";
+import { deviceDetection } from "@pureadmin/utils";
 import type { PaginationProps } from "@pureadmin/table";
 
 const loading = ref(true);
@@ -67,7 +68,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="ml-[120px] min-w-[180px] max-w-[70%]">
+  <div
+    :class="[
+      'min-w-[180px]',
+      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
+    ]"
+  >
     <h3 class="my-8">安全日志</h3>
     <pure-table
       row-key="id"

src/views/account-settings/index.vue

@@ -2,12 +2,13 @@
 import { getMine } from "@/api/user";
 import { useRouter } from "vue-router";
 import { ref, onBeforeMount } from "vue";
-import { useGlobal } from "@pureadmin/utils";
 import { ReText } from "@/components/ReText";
 import Profile from "./components/profile.vue";
 import Preferences from "./components/preferences.vue";
 import SecurityLog from "./components/securityLog.vue";
+import { useGlobal, deviceDetection } from "@pureadmin/utils";
 import AccountManagement from "./components/accountManagement.vue";
+import TopCollapse from "@/layout/components/sidebar/topCollapse.vue";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 
 import leftLine from "@iconify-icons/ri/arrow-left-s-line";
@@ -21,6 +22,7 @@ defineOptions({
 });
 
 const router = useRouter();
+const isOpen = ref(deviceDetection() ? false : true);
 const { $storage } = useGlobal<GlobalPropertiesApi>();
 onBeforeMount(() => {
   useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
@@ -67,8 +69,9 @@ getMine().then(res => {
 <template>
   <el-container class="h-full">
     <el-aside
+      v-if="isOpen"
       class="settings-sidebar px-2 dark:!bg-[var(--el-bg-color)]"
-      width="240px"
+      :width="deviceDetection() ? '180px' : '240px'"
     >
       <el-menu :default-active="witchPane" class="settings-menu">
         <el-menu-item
@@ -95,7 +98,14 @@ getMine().then(res => {
           v-for="item in panes"
           :key="item.key"
           :index="item.key"
-          @click="witchPane = item.key"
+          @click="
+            () => {
+              witchPane = item.key;
+              if (deviceDetection()) {
+                isOpen = !isOpen;
+              }
+            }
+          "
         >
           <div class="flex items-center z-10">
             <el-icon><IconifyIconOffline :icon="item.icon" /></el-icon>
@@ -105,7 +115,16 @@ getMine().then(res => {
       </el-menu>
     </el-aside>
     <el-main>
-      <component :is="panes.find(item => item.key === witchPane).component" />
+      <TopCollapse
+        v-if="deviceDetection()"
+        class="px-0"
+        :is-active="isOpen"
+        @toggleClick="isOpen = !isOpen"
+      />
+      <component
+        :is="panes.find(item => item.key === witchPane).component"
+        :class="[!deviceDetection() && 'ml-[120px]']"
+      />
     </el-main>
   </el-container>
 </template>