优化SlideView和Footer组件

src/layouts/components/Footer.vue

@@ -6,7 +6,10 @@ import { useI18n } from 'vue-i18n'
 
 const display = useDisplay()
 const appMode = inject('pwaMode') && display.mdAndDown.value
-const { t } = useI18n()
+const { t, locale } = useI18n()
+
+// 判断当前是否为英文环境
+const isEnglish = computed(() => locale.value === 'en-US')
 
 const route = useRoute()
 
@@ -114,8 +117,8 @@ const showDynamicButton = computed(() => {
               :value="menu.to"
             >
               <div class="btn-content">
-                <VIcon :icon="menu.icon" size="24"></VIcon>
-                <span class="text-xs">{{ menu.title }}</span>
+                <VIcon :icon="menu.icon" :size="isEnglish ? 32 : 24"></VIcon>
+                <span v-if="!isEnglish" class="text-xs">{{ menu.title }}</span>
               </div>
             </VBtn>
 
@@ -131,8 +134,8 @@ const showDynamicButton = computed(() => {
               value="/apps"
             >
               <div class="btn-content">
-                <VIcon icon="mdi-dots-horizontal" size="24"></VIcon>
-                <span class="btn-text">{{ t('nav.more') }}</span>
+                <VIcon icon="mdi-dots-horizontal" :size="isEnglish ? 32 : 24"></VIcon>
+                <span v-if="!isEnglish" class="btn-text">{{ t('nav.more') }}</span>
               </div>
             </VBtn>
           </VBtnToggle>
@@ -222,6 +225,18 @@ const showDynamicButton = computed(() => {
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    inline-size: 100%;
+
+    span {
+      overflow: hidden;
+      font-size: 0.75rem;
+      max-inline-size: 100%;
+      scale: var(--text-scale, 1);
+      text-overflow: ellipsis;
+      transform-origin: center;
+      transition: scale 0.2s ease;
+      white-space: nowrap;
+    }
   }
 }
 

src/layouts/components/HeaderTab.vue

@@ -37,15 +37,13 @@ const showRightButton = ref(false)
 const scrollTabs = (direction: 'left' | 'right') => {
   const el = tabsContainerRef.value
   if (!el) return
-  
+
   const scrollAmount = 200 // 可以根据需要调整滚动量
-  const scrollPosition = direction === 'left' 
-    ? el.scrollLeft - scrollAmount 
-    : el.scrollLeft + scrollAmount
-  
+  const scrollPosition = direction === 'left' ? el.scrollLeft - scrollAmount : el.scrollLeft + scrollAmount
+
   el.scrollTo({
     left: scrollPosition,
-    behavior: 'smooth'
+    behavior: 'smooth',
   })
 }
 
@@ -93,16 +91,10 @@ onUnmounted(() => {
 </script>
 <template>
   <div class="tab-header rounded-t-lg">
-    <VBtn 
-      v-if="showLeftButton" 
-      class="scroll-button left-button"
-      @click="scrollTabs('left')"
-      variant="text"
-      icon
-    >
-      <VIcon icon="tabler-chevron-left" size="small" />
+    <VBtn v-if="showLeftButton" class="scroll-button left-button" @click="scrollTabs('left')" variant="text" icon>
+      <VIcon icon="tabler-chevron-left" size="small" color="secondary" />
     </VBtn>
-    
+
     <div ref="tabsContainerRef" class="header-tabs" :class="{ 'show-indicator': showTabsScrollIndicator }">
       <div
         v-for="(item, index) in items"
@@ -115,17 +107,11 @@ onUnmounted(() => {
         <span>{{ item.title }}</span>
       </div>
     </div>
-    
-    <VBtn 
-      v-if="showRightButton" 
-      class="scroll-button right-button"
-      @click="scrollTabs('right')"
-      variant="text"
-      icon
-    >
-      <VIcon icon="tabler-chevron-right" size="small" />
+
+    <VBtn v-if="showRightButton" class="scroll-button right-button" @click="scrollTabs('right')" variant="text" icon>
+      <VIcon icon="tabler-chevron-right" size="small" color="secondary" />
     </VBtn>
-    
+
     <slot name="append" />
   </div>
 </template>
@@ -145,30 +131,24 @@ onUnmounted(() => {
 }
 
 .scroll-button {
+  z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 28px;
-  width: 28px;
-  border-radius: 50%;
-  background-color: rgba(var(--v-theme-primary), 0.1);
-  color: rgb(var(--v-theme-primary));
-  cursor: pointer;
   border: none;
+  border-radius: 50%;
+  block-size: 28px;
+  cursor: pointer;
+  inline-size: 28px;
   outline: none;
-  z-index: 2;
   transition: background-color 0.2s ease;
-  
-  &:hover {
-    background-color: rgba(var(--v-theme-primary), 0.2);
-  }
-  
+
   &.left-button {
-    margin-right: 6px;
+    margin-inline-end: 6px;
   }
-  
+
   &.right-button {
-    margin-left: 6px;
+    margin-inline-start: 6px;
   }
 }