优化 ThemeSwitcher 组件，移除主题切换动画并在更新主题时刷新页面，以提升用户体验。同时，更新 Footer 组件的样式，添加指示器以增强导航效果。调整 UserProfile 组件的链接，更新为系统设定。对应用中心页面进行重构，按分组展示应用，提升可用性和视觉效果。

src/layouts/components/Footer.vue

@@ -1,98 +1,197 @@
 <script setup lang="ts">
 import { SystemNavMenus } from '@/router/menu'
 import { useDisplay } from 'vuetify'
-import { VMenu } from 'vuetify/lib/components/index.mjs'
 
 const display = useDisplay()
 const appMode = inject('pwaMode') && display.mdAndDown.value
 
 const route = useRoute()
 
-const moreMenuDialog = ref(false)
-
-const moreMemus = computed(() => SystemNavMenus.filter(menu => !menu.footer))
-
-const activeState = computed(() => {
-  return {
-    home: route.path === '/dashboard',
-    recommend: route.path === '/recommend',
-    movie: route.path === '/subscribe/movie',
-    tv: route.path === '/subscribe/tv',
-  }
+// 过滤出底部菜单项（排除电影和电视剧，因为我们会合并它们）
+const footerMenus = computed(() => {
+  return SystemNavMenus.filter(menu => menu.footer === true)
 })
 
+// 为每个底部菜单创建激活状态
+const activeState = computed(() => {
+  const activeStates: Record<string, boolean> = {}
+
+  footerMenus.value.forEach(menu => {
+    const pathKey = menu.to.replace(/\//g, '_')
+    activeStates[pathKey] = route.path.startsWith(menu.to)
+  })
+
+  return activeStates
+})
+
+// 更多按钮的激活状态
 const moreActiveState = computed(() => {
   return !Object.values(activeState.value).some(v => v)
 })
 
-const currentPath = computed(() => route.path)
+// 用于动画的状态和方法
+const indicator = ref<HTMLElement | null>(null)
+const activeButton = ref<HTMLElement | null>(null)
+
+// 更新指示器位置的方法
+const updateIndicatorPosition = async () => {
+  await nextTick()
+  const activeEl = document.querySelector('.footer-nav-btn-active') as HTMLElement
+  if (activeEl && indicator.value) {
+    // 获取按钮的完整尺寸和位置信息
+    const rect = activeEl.getBoundingClientRect()
+    const parentRect = indicator.value.parentElement!.getBoundingClientRect()
+
+    // 计算相对于父容器的位置
+    const relativeLeft = rect.left - parentRect.left
+
+    // 设置指示器宽度和位置
+    indicator.value.style.width = `${rect.width}px`
+    indicator.value.style.left = `${relativeLeft}px`
+
+    activeButton.value = activeEl
+  }
+}
+
+// 监听路由变化
+watch(
+  () => route.path,
+  async () => {
+    updateIndicatorPosition()
+  },
+  { immediate: false },
+)
+
+// 在组件挂载后初始化指示器位置
+onMounted(() => {
+  updateIndicatorPosition()
+})
 </script>
 
 <template>
-  <div v-if="appMode" class="w-100">
-    <VBottomNavigation
-      grow
-      horizontal
-      color="primary"
-      class="footer-nav border-t"
-      style="block-size: calc(3.5rem + env(safe-area-inset-bottom))"
-      :z-index="9998"
-    >
-      <VBtn to="/dashboard" :ripple="false">
-        <VIcon v-if="activeState.home" size="28">mdi-home</VIcon>
-        <VIcon v-else size="28">mdi-home-outline</VIcon>
-      </VBtn>
-      <VBtn to="/recommend" :ripple="false">
-        <VIcon v-if="activeState.recommend" size="28">mdi-star</VIcon>
-        <VIcon v-else size="28">mdi-star-outline</VIcon>
-      </VBtn>
-      <VBtn to="/subscribe/movie" :ripple="false">
-        <VIcon v-if="activeState.movie" size="28">mdi-movie-open</VIcon>
-        <VIcon v-else size="28">mdi-movie-open-outline</VIcon>
-      </VBtn>
-      <VBtn to="/subscribe/tv" :ripple="false">
-        <VIcon v-if="activeState.tv" size="28">mdi-television-play</VIcon>
-        <VIcon v-else size="28">mdi-television</VIcon>
-      </VBtn>
-      <VBtn :ripple="false">
-        <VIcon
-          size="28"
-          :icon="moreMenuDialog ? 'mdi-close' : 'mdi-dots-horizontal'"
-          :color="moreActiveState ? 'primary' : ''"
-        />
-        <VMenu v-model="moreMenuDialog" close-on-content-click activator="parent" scrim>
-          <VList lines="one">
-            <VListSubheader class="bg-transparent"> 更多 </VListSubheader>
-            <VListItem
-              class="pe-20 ps-5"
-              v-for="(menu, index) in moreMemus"
-              :key="index"
-              :prepend-icon="menu.icon"
-              nav
+  <Teleport to="body">
+    <div class="footer-nav-container">
+      <VCard class="footer-nav-card" rounded="pill">
+        <VCardText class="footer-card-content">
+          <!-- 添加指示器 -->
+          <div ref="indicator" class="nav-indicator"></div>
+          <VBtnToggle class="footer-btn-group" :mandatory="false">
+            <!-- 遍历底部菜单项 -->
+            <VBtn
+              v-for="menu in footerMenus"
+              :key="menu.to"
               :to="menu.to"
-              :base-color="currentPath === menu.to ? 'primary' : undefined"
+              variant="plain"
+              :ripple="false"
+              color="primary"
+              class="footer-nav-btn"
+              rounded="pill"
+              :class="{ 'footer-nav-btn-active': activeState[menu.to.replace(/\//g, '_')] }"
             >
-              <VListItemTitle>
-                <span class="text-base">{{ menu.title }}</span>
-              </VListItemTitle>
-            </VListItem>
-          </VList>
-        </VMenu>
-      </VBtn>
-    </VBottomNavigation>
-  </div>
+              <div class="btn-content">
+                <VIcon :icon="menu.icon" size="24"></VIcon>
+                <span class="text-xs">{{ menu.title }}</span>
+              </div>
+            </VBtn>
+
+            <!-- 更多按钮 -->
+            <VBtn
+              variant="plain"
+              :ripple="false"
+              color="primary"
+              to="/apps"
+              rounded="pill"
+              class="footer-nav-btn"
+              :class="{ 'footer-nav-btn-active': moreActiveState }"
+            >
+              <div class="btn-content">
+                <VIcon icon="mdi-dots-horizontal" size="24"></VIcon>
+                <span class="btn-text">更多</span>
+              </div>
+            </VBtn>
+          </VBtnToggle>
+        </VCardText>
+      </VCard>
+    </div>
+  </Teleport>
 </template>
 
 <style lang="scss">
-.footer-nav {
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
-  background-color: rgb(var(--v-theme-surface), 0.8);
-  padding-block-end: env(safe-area-inset-bottom);
+.footer-nav-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9998;
+  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
 }
 
-.footer-nav .v-btn--variant-text .v-btn__overlay {
-  background-color: transparent !important;
+.footer-nav-card {
+  pointer-events: auto;
+  overflow: hidden;
+  background-color: rgba(var(--v-theme-surface), 0.8);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(var(--v-theme-primary), 0.1);
+  position: relative;
+}
+
+.footer-card-content {
+  padding: 6px 8px;
+  position: relative;
+}
+
+.nav-indicator {
+  position: absolute;
+  height: 48px;
+  background-color: rgba(var(--v-theme-primary), 0.1);
+  border-radius: 100px;
+  z-index: 1;
+  top: 6px;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+  pointer-events: none;
+}
+
+.footer-btn-group {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  background-color: transparent;
+  border: none;
+  position: relative;
+}
+
+.footer-nav-btn {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 0;
+  position: relative;
+  background-color: transparent;
+
+  &.v-btn--active {
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  .btn-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
 }
 </style>

src/layouts/components/UserProfile.vue

@@ -113,11 +113,11 @@ const userLevel = computed(() => userStore.level)
             <VListItemTitle>个人信息</VListItemTitle>
           </VListItem>
 
-          <VListItem link @click="router.push('/apps')" class="mb-1 rounded-lg" hover>
+          <VListItem link @click="router.push('/setting')" class="mb-1 rounded-lg" hover>
             <template #prepend>
-              <VIcon icon="mdi-view-grid-outline" />
+              <VIcon icon="mdi-cog-outline" />
             </template>
-            <VListItemTitle>功能视图</VListItemTitle>
+            <VListItemTitle>系统设定</VListItemTitle>
           </VListItem>
 
           <!-- 👉 Site Auth -->