优化SlideView和Footer组件

src/components/slide/SlideView.vue

@@ -1,6 +1,10 @@
 <script lang="ts" setup>
 import SlideViewTitle from '@/components/slide/SlideViewTitle.vue'
-import { ref, onMounted, onUnmounted, inject, computed } from 'vue'
+import { useDisplay } from 'vuetify'
+
+// 判断是否可以触摸
+const display = useDisplay()
+const isTouch = computed(() => display.mobile.value)
 
 // 元素
 const slideview_content = ref<HTMLElement | null>(null)
@@ -142,26 +146,32 @@ onActivated(() => {
       </div>
 
       <!-- 左侧导航按钮 -->
-      <button
+      <VBtn
         class="nav-button nav-button-left"
         @click.stop="slideNext(false)"
-        v-show="disabled !== 0 && disabled !== 3"
+        v-show="disabled !== 0 && disabled !== 3 && !isTouch"
+        variant="text"
+        icon
+        color="secondary"
       >
         <svg width="24" height="24" viewBox="0 0 24 24">
           <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
         </svg>
-      </button>
+      </VBtn>
 
       <!-- 右侧导航按钮 -->
-      <button
+      <VBtn
         class="nav-button nav-button-right"
         @click.stop="slideNext(true)"
-        v-show="disabled !== 2 && disabled !== 3"
+        v-show="disabled !== 2 && disabled !== 3 && !isTouch"
+        variant="text"
+        icon
+        color="secondary"
       >
         <svg width="24" height="24" viewBox="0 0 24 24">
           <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
         </svg>
-      </button>
+      </VBtn>
     </div>
   </div>
 </template>
@@ -189,26 +199,27 @@ onActivated(() => {
 
 .view-all-button {
   .arrow-svg {
-    fill: currentColor;
+    fill: currentcolor;
+    margin-inline-start: 2px;
     transition: transform 0.3s ease;
-    margin-left: 2px;
   }
 
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   border-radius: 8px;
-  padding: 5px 12px;
   background-color: transparent;
   color: rgb(var(--v-theme-primary));
   font-size: 0.85rem;
   font-weight: 500;
+  padding-block: 5px;
+  padding-inline: 12px;
   text-decoration: none;
   transition: all 0.25s ease;
 
   &:hover {
-    background-color: rgba(var(--v-theme-primary), 0.08);
     border-color: rgba(var(--v-theme-primary), 0.5);
+    background-color: rgba(var(--v-theme-primary), 0.08);
     transform: translateY(-1px);
 
     .arrow-svg {
@@ -234,40 +245,37 @@ onActivated(() => {
 
 .nav-button {
   position: absolute;
-  top: 50%;
+  z-index: 20;
-  transform: translateY(-50%);
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background-color: rgba(var(--v-theme-background), 0.8);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 0;
+  border-radius: 50%;
+  backdrop-filter: blur(8px);
+  background-color: rgba(var(--v-theme-background), 0.3);
+  block-size: 36px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 8%);
   cursor: pointer;
-  z-index: 20;
+  inline-size: 36px;
-  color: rgb(var(--v-theme-on-surface));
+  inset-block-start: 50%;
   opacity: 0;
   pointer-events: none;
+  transform: translateY(-50%);
   transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease,
     box-shadow 0.3s ease, border-color 0.3s ease;
 
   svg {
-    fill: currentColor;
+    block-size: 22px;
+    fill: currentcolor;
+    filter: none;
+    inline-size: 22px;
     opacity: 0.7;
     transition: all 0.3s ease;
-    width: 22px;
-    height: 22px;
-    filter: none;
   }
 
   &:hover {
-    background-color: rgba(var(--v-theme-background), 0.95);
-    transform: translateY(-50%) scale(1.05);
     color: rgb(var(--v-theme-primary));
+    transform: translateY(-50%) scale(1.05);
 
     svg {
       opacity: 1;
@@ -276,11 +284,11 @@ onActivated(() => {
 }
 
 .nav-button-left {
-  left: 8px;
+  inset-inline-start: 8px;
 }
 
 .nav-button-right {
-  right: 8px;
+  inset-inline-end: 8px;
 }
 
 .slider-content {

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>
+                <VIcon :icon="menu.icon" :size="isEnglish ? 32 : 24"></VIcon>
-                <span class="text-xs">{{ menu.title }}</span>
+                <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>
+                <VIcon icon="mdi-dots-horizontal" :size="isEnglish ? 32 : 24"></VIcon>
-                <span class="btn-text">{{ t('nav.more') }}</span>
+                <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

@@ -39,13 +39,11 @@ const scrollTabs = (direction: 'left' | 'right') => {
   if (!el) return
 
   const scrollAmount = 200 // 可以根据需要调整滚动量
-  const scrollPosition = direction === 'left' 
+  const scrollPosition = direction === 'left' ? el.scrollLeft - scrollAmount : el.scrollLeft + scrollAmount
-    ? el.scrollLeft - scrollAmount 
-    : el.scrollLeft + scrollAmount
 
   el.scrollTo({
     left: scrollPosition,
-    behavior: 'smooth'
+    behavior: 'smooth',
   })
 }
 
@@ -93,14 +91,8 @@ onUnmounted(() => {
 </script>
 <template>
   <div class="tab-header rounded-t-lg">
-    <VBtn 
+    <VBtn v-if="showLeftButton" class="scroll-button left-button" @click="scrollTabs('left')" variant="text" icon>
-      v-if="showLeftButton" 
+      <VIcon icon="tabler-chevron-left" size="small" color="secondary" />
-      class="scroll-button left-button"
-      @click="scrollTabs('left')"
-      variant="text"
-      icon
-    >
-      <VIcon icon="tabler-chevron-left" size="small" />
     </VBtn>
 
     <div ref="tabsContainerRef" class="header-tabs" :class="{ 'show-indicator': showTabsScrollIndicator }">
@@ -116,14 +108,8 @@ onUnmounted(() => {
       </div>
     </div>
 
-    <VBtn 
+    <VBtn v-if="showRightButton" class="scroll-button right-button" @click="scrollTabs('right')" variant="text" icon>
-      v-if="showRightButton" 
+      <VIcon icon="tabler-chevron-right" size="small" color="secondary" />
-      class="scroll-button right-button"
-      @click="scrollTabs('right')"
-      variant="text"
-      icon
-    >
-      <VIcon icon="tabler-chevron-right" size="small" />
     </VBtn>
 
     <slot name="append" />
@@ -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;
   }
 }
 

src/pages/login.vue

@@ -180,12 +180,7 @@ onMounted(async () => {
   <div class="relative flex min-h-screen flex-col items-center justify-center">
     <!-- 登录表单 -->
     <div class="auth-wrapper d-flex align-center justify-center">
-      <VCard
+      <VCard class="auth-card px-7 py-3 w-full h-full" max-width="24rem" border>
-        class="auth-card px-7 py-3 w-full h-full"
-        :class="{ 'opacity-75': globalTheme.name.value !== 'transparent' }"
-        max-width="24rem"
-        border
-      >
         <VCardItem class="justify-center">
           <template #prepend>
             <div class="d-flex pe-0">