feat: 个人设置弹窗适配移动端

Author: hooray

src/components/AccountButton/index.vue

@@ -73,7 +73,7 @@ const isProfileShow = ref(false)
       </div>
     </FaButton>
   </FaDropdown>
-  <FaModal v-model="isProfileShow" align-center :header="false" :footer="false" :close-on-click-overlay="false" :close-on-press-escape="false" class="h-500px min-w-600px overflow-hidden" content-class="min-h-full p-0 flex">
+  <FaModal v-model="isProfileShow" align-center :header="false" :footer="false" :close-on-click-overlay="false" :close-on-press-escape="false" class="h-500px max-w-xl overflow-hidden" content-class="min-h-full p-0 flex">
     <Profile />
   </FaModal>
 </template>

src/components/AccountButton/profile.vue

@@ -16,8 +16,8 @@ const tabs = ref([
 
 <template>
   <div class="min-h-full w-full">
-    <div class="fixed inset-s-0 bottom-0 top-0 h-full w-40 border-e">
-      <div v-for="(tab, index) in tabs" :key="index" class="cursor-pointer px-4 py-3 transition-background-color space-y-2 hover-bg-accent/50" :class="{ 'bg-accent hover-bg-accent!': active === index }" @click="active = index">
+    <div class="fixed right-0 top-0 z-1 flex flex-row overflow-auto border-b border-e bg-background md:(inset-s-0 bottom-0 h-full w-40 flex-col)">
+      <div v-for="(tab, index) in tabs" :key="index" class="flex-shrink-0 cursor-pointer px-4 py-3 transition-background-color space-y-2 hover-bg-accent/50" :class="{ 'bg-accent hover-bg-accent!': active === index }" @click="active = index">
         <div class="text-base text-accent-foreground leading-tight">
           {{ tab.title }}
         </div>
@@ -26,7 +26,7 @@ const tabs = ref([
         </div>
       </div>
     </div>
-    <div class="ms-40 min-h-full flex-col-center p-10">
+    <div class="min-h-full flex-col-center p-10 pt-20 md:(ms-40 pt-10)">
       <div v-if="active === 0">
         请开发者自行扩展
       </div>