From 1d4b5854c64dfefa51f474947df568c2bf357932 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Thu, 11 Apr 2024 16:52:03 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=85=BC?=
 =?UTF-8?q?=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/accountManagement.vue          |  8 +++++-
 .../components/preferences.vue                |  8 +++++-
 .../account-settings/components/profile.vue   |  9 +++++--
 .../components/securityLog.vue                |  8 +++++-
 src/views/account-settings/index.vue          | 27 ++++++++++++++++---
 5 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/views/account-settings/components/accountManagement.vue b/src/views/account-settings/components/accountManagement.vue
index 25f2daf41..eb85d2c2d 100644
--- a/src/views/account-settings/components/accountManagement.vue
+++ b/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">
diff --git a/src/views/account-settings/components/preferences.vue b/src/views/account-settings/components/preferences.vue
index 17eac0c5d..46f119647 100644
--- a/src/views/account-settings/components/preferences.vue
+++ b/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">
diff --git a/src/views/account-settings/components/profile.vue b/src/views/account-settings/components/profile.vue
index a96e22706..63c47a992 100644
--- a/src/views/account-settings/components/profile.vue
+++ b/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"
diff --git a/src/views/account-settings/components/securityLog.vue b/src/views/account-settings/components/securityLog.vue
index 02cec6a96..554a25e43 100644
--- a/src/views/account-settings/components/securityLog.vue
+++ b/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"
diff --git a/src/views/account-settings/index.vue b/src/views/account-settings/index.vue
index 7130b7f24..86e96c1f5 100644
--- a/src/views/account-settings/index.vue
+++ b/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>