refactor: enhance mobile responsiveness and UI components across various pages

src/components/Panel.vue

@@ -24,7 +24,7 @@ provide('tabIndex', computed(() => tabIndex))
           <Close @click="settingStore.showPanel = false"/>
         </Tooltip>
       </header>
-      <div class="flex-1 overflow-hidden">
+      <div class="flex-1 overflow-auto">
         <slot></slot>
       </div>
     </div>
@@ -48,15 +48,20 @@ provide('tabIndex', computed(() => tabIndex))
   .panel {
     width: 90vw;
     max-width: 400px;
-    max-height: 80vh;
+    max-height: 90vh;
+    height: auto;
     border-radius: 0.4rem;
-    
-    header {
-      padding: 0.5rem 0.5rem;
-      
-      .color-main {
-        font-size: 0.9rem;
-      }
+  }
+
+  .panel > div.flex-1 {
+    max-height: calc(90vh - 3.2rem);
+  }
+
+  .panel header {
+    padding: 0.5rem 0.5rem;
+
+    .color-main {
+      font-size: 0.9rem;
     }
   }
 }
@@ -65,14 +70,18 @@ provide('tabIndex', computed(() => tabIndex))
 @media (max-width: 480px) {
   .panel {
     width: 95vw;
-    max-height: 85vh;
-    
-    header {
-      padding: 0.3rem 0.3rem;
-      
-      .color-main {
-        font-size: 0.8rem;
-      }
+    max-height: 94vh;
+  }
+
+  .panel > div.flex-1 {
+    max-height: calc(94vh - 3rem);
+  }
+
+  .panel header {
+    padding: 0.3rem 0.3rem;
+
+    .color-main {
+      font-size: 0.8rem;
     }
   }
 }

src/components/PracticeLayout.vue

@@ -13,7 +13,7 @@ defineProps<{
     <div class="wrap">
       <slot name="practice"></slot>
     </div>
-    <div class="panel-wrap" :style="{left:panelLeft}" :class="{'has-panel': settingStore.showPanel}">
+    <div class="panel-wrap" :style="{left:panelLeft}" :class="{'has-panel': settingStore.showPanel}" @click.self="settingStore.showPanel = false">
       <slot name="panel"></slot>
     </div>
     <div class="footer-wrap">
@@ -41,8 +41,9 @@ defineProps<{
 
 .footer-wrap {
   position: fixed;
-  bottom: 0.8rem;
+  bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
   transition: all var(--anim-time);
+  z-index: 999;
 }
 
 .panel-wrap {
@@ -67,12 +68,12 @@ defineProps<{
     }
     
     .footer-wrap {
-      bottom: -4rem;
+      bottom: calc(-4rem + env(safe-area-inset-bottom, 0px));
     }
   }
   
   .footer-wrap {
-    bottom: 0.5rem;
+    bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
     left: 0.5rem;
     right: 0.5rem;
     width: auto;
@@ -81,13 +82,11 @@ defineProps<{
   .panel-wrap {
     position: fixed;
     top: 0;
-    left: 0;
-    right: 0;
+    left: 0 !important;
+    right: 0 !important;
     bottom: 0;
     height: 100vh;
     z-index: 1000;
-    
-    // 面板内容居中显示
     display: flex;
     align-items: center;
     justify-content: center;
@@ -119,13 +118,15 @@ defineProps<{
   }
   
   .footer-wrap {
-    bottom: 0.3rem;
+    bottom: calc(0.3rem + env(safe-area-inset-bottom, 0px));
     left: 0.3rem;
     right: 0.3rem;
   }
   
   .panel-wrap {
     padding: 0.5rem;
+    left: 0 !important;
+    right: 0 !important;
   }
 }
 </style>