🎈 perf: 更新移动端用户主页

src/views/user/UserEditPage.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
-    <h4 class="p">编辑资料</h4>
-    <el-divider />
+    <template v-if="!smLess">
+      <h4 class="p">编辑资料</h4>
+      <el-divider />
+    </template>
     <div class="p outer flex">
       <el-avatar class="self-center" :size="100" :src="getAvatarURL(userStore.userInfo!.avatar)" />
       <div class="self-center flex gap-2">
@@ -51,6 +53,7 @@
 import { getAvatarURL, request } from '@/api';
 import { usernameLength } from '@/components/app/LoginRegisterDialog.vue';
 import { ordinarySchema, uploadAvatarRespSchema } from '@/schemas/response';
+import { useMediaStore } from '@/stores/media';
 import { useUserStore } from '@/stores/user';
 import { Close, Upload } from '@element-plus/icons-vue';
 import {
@@ -59,8 +62,10 @@ import {
   type FormRules,
   type UploadRequestHandler,
 } from 'element-plus';
+import { storeToRefs } from 'pinia';
 import { defineComponent, reactive, ref } from 'vue';
 import type { RouteLocationNormalized } from 'vue-router';
+const { smLess } = storeToRefs(useMediaStore());
 function validate({ params: { id } }: RouteLocationNormalized) {
   if (!useUserStore().isSelf(id as string)) {
     ElMessage.error('不能编辑其他用户哦');

src/views/user/UserPage.vue

@@ -46,7 +46,11 @@
               <user-menu :user-info="userInfo" />
             </el-card>
             <el-card class="main flex-1">
-              <router-view />
+              <router-view custom v-slot="{ Component }">
+                <keep-alive>
+                  <component :is="Component" />
+                </keep-alive>
+              </router-view>
             </el-card>
           </div>
         </template>
@@ -59,11 +63,24 @@
         </template>
       </div>
     </template>
-    <div class="m-t-150px flex-1 flex flex-col bg-white rounded-t-20px overflow-hidden" v-else>
+    <div class="m-t-150px flex-1 flex flex-col bg-light gap-10px rounded-t-20px" v-else>
       <template v-if="userInfo">
-        <user-menu :user-info="userInfo" mobile />
-        <div class="flex-1 bg-white">
-          <router-view />
+        <div class="relative flex h-200px bg-white p-20px rounded-t-20px">
+          <el-avatar
+            class="absolute border-2 border-solid border-light top--50px left-25px"
+            :size="100"
+            :src="getAvatarURL(userInfo.avatar)"
+          ></el-avatar>
+        </div>
+        <div class="flex-1 flex flex-col">
+          <user-menu :user-info="userInfo" mobile />
+          <div class="main flex-1 bg-white">
+            <router-view custom v-slot="{ Component }">
+              <keep-alive>
+                <component :is="Component" />
+              </keep-alive>
+            </router-view>
+          </div>
         </div>
       </template>
     </div>
@@ -91,6 +108,9 @@
 .main {
   --el-card-padding: 10px 0;
   --main-h-padding: 10px;
+  &:not(.el-card) {
+    padding: var(--el-card-padding);
+  }
 }
 </style>
 <script lang="ts" setup>