From 3c4ee302e730bba9234ff5bb86359eda66601ab2 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 19 Apr 2025 20:29:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20ThemeSwitcher=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E7=A7=BB=E9=99=A4=E4=B8=BB=E9=A2=98=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=8A=A8=E7=94=BB=E5=B9=B6=E5=9C=A8=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E6=97=B6=E5=88=B7=E6=96=B0=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=8C=E4=BB=A5=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C=E3=80=82=E5=90=8C=E6=97=B6=EF=BC=8C=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=20Footer=20=E7=BB=84=E4=BB=B6=E7=9A=84=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=8C=87=E7=A4=BA=E5=99=A8=E4=BB=A5?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E5=AF=BC=E8=88=AA=E6=95=88=E6=9E=9C=E3=80=82?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=20UserProfile=20=E7=BB=84=E4=BB=B6=E7=9A=84?=
 =?UTF-8?q?=E9=93=BE=E6=8E=A5=EF=BC=8C=E6=9B=B4=E6=96=B0=E4=B8=BA=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=BE=E5=AE=9A=E3=80=82=E5=AF=B9=E5=BA=94=E7=94=A8?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2=E8=BF=9B=E8=A1=8C=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=EF=BC=8C=E6=8C=89=E5=88=86=E7=BB=84=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=EF=BC=8C=E6=8F=90=E5=8D=87=E5=8F=AF=E7=94=A8?=
 =?UTF-8?q?=E6=80=A7=E5=92=8C=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@core/components/ThemeSwitcher.vue |  64 +------
 src/@layouts/styles/_variables.scss    |   2 +-
 src/@layouts/types.d.ts                |   1 +
 src/layouts/components/Footer.vue      | 241 +++++++++++++++++--------
 src/layouts/components/UserProfile.vue |   6 +-
 src/pages/appcenter.vue                | 139 ++++++++------
 src/router/menu.ts                     |   6 +-
 7 files changed, 268 insertions(+), 191 deletions(-)

diff --git a/src/@core/components/ThemeSwitcher.vue b/src/@core/components/ThemeSwitcher.vue
index b6b822fa..86daaf24 100644
--- a/src/@core/components/ThemeSwitcher.vue
+++ b/src/@core/components/ThemeSwitcher.vue
@@ -36,76 +36,16 @@ const customCSS = ref('')
 // 编辑器主题
 const editorTheme = computed(() => (currentThemeName.value === 'light' ? 'github' : 'monokai'))
 
-// 主题切换动画
-function themeTransition() {
-  const x = performance.now()
-  for (let i = 0; i++ < 1e7; (i << 9) & ((9 % 9) * 9 + 9));
-  const cost = performance.now() - x
-  if (cost > 10) return
-
-  const el: HTMLElement = document.querySelector('[data-v-app]')!
-  const children = el.querySelectorAll('*') as NodeListOf<HTMLElement>
-
-  children.forEach(el => {
-    if (hasScrollbar(el)) {
-      el.dataset.scrollX = String(el.scrollLeft)
-      el.dataset.scrollY = String(el.scrollTop)
-    }
-  })
-
-  const copy = el.cloneNode(true) as HTMLElement
-  copy.classList.add('app-copy')
-  const rect = el.getBoundingClientRect()
-  copy.style.top = `${rect.top}px`
-  copy.style.left = `${rect.left}px`
-  copy.style.width = `${rect.width}px`
-  copy.style.height = `${rect.height}px`
-
-  const targetEl = document.activeElement as HTMLElement
-  const targetRect = targetEl.getBoundingClientRect()
-  const left = targetRect.left + targetRect.width / 2 + window.scrollX
-  const top = targetRect.top + targetRect.height / 2 + window.scrollY
-  el.style.setProperty('--clip-pos', `${left}px ${top}px`)
-  el.style.removeProperty('--clip-size')
-
-  nextTick(() => {
-    el.classList.add('app-transition')
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        el.style.setProperty('--clip-size', `${Math.hypot(window.innerWidth, window.innerHeight)}px`)
-      })
-    })
-  })
-
-  document.body.append(copy)
-  ;(copy.querySelectorAll('[data-scroll-x], [data-scroll-y]') as NodeListOf<HTMLElement>).forEach(el => {
-    el.scrollLeft = +el.dataset.scrollX!
-    el.scrollTop = +el.dataset.scrollY!
-  })
-
-  function onTransitionend(e: TransitionEvent) {
-    if (e.target === e.currentTarget) {
-      copy.remove()
-      el.removeEventListener('transitionend', onTransitionend)
-      el.removeEventListener('transitioncancel', onTransitionend)
-      el.classList.remove('app-transition')
-      el.style.removeProperty('--clip-size')
-      el.style.removeProperty('--clip-pos')
-    }
-  }
-  el.addEventListener('transitionend', onTransitionend)
-  el.addEventListener('transitioncancel', onTransitionend)
-}
-
 // 更新主题
 function updateTheme() {
   const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
   const theme = currentThemeName.value === 'auto' ? autoTheme : currentThemeName.value
   globalTheme.name.value = theme
   savedTheme.value = theme
-  themeTransition()
   // 保存主题到本地
   saveLocalTheme(theme, globalTheme)
+  // 刷新页面
+  location.reload()
 }
 
 // 切换主题
diff --git a/src/@layouts/styles/_variables.scss b/src/@layouts/styles/_variables.scss
index 7f332913..72dba9e2 100644
--- a/src/@layouts/styles/_variables.scss
+++ b/src/@layouts/styles/_variables.scss
@@ -19,7 +19,7 @@ $layout-horizontal-nav-layout-navbar-z-index: 11 !default;
 $layout-boxed-content-width: 90rem !default;
 
 //  👉Footer
-$layout-vertical-nav-footer-height: 3.5rem !default;
+$layout-vertical-nav-footer-height: 8rem !default;
 
 // 👉 Layout overlay
 $layout-overlay-z-index: 11 !default;
diff --git a/src/@layouts/types.d.ts b/src/@layouts/types.d.ts
index 35b55293..67eaa66c 100644
--- a/src/@layouts/types.d.ts
+++ b/src/@layouts/types.d.ts
@@ -114,6 +114,7 @@ export interface NavLinkProps {
 
 export interface NavLink extends NavLinkProps, Partial<AclProperties> {
   title: string
+  full_title?: string
   icon?: unknown
   badgeContent?: string
   badgeClass?: string
diff --git a/src/layouts/components/Footer.vue b/src/layouts/components/Footer.vue
index 52ee0e0e..d746fbb3 100644
--- a/src/layouts/components/Footer.vue
+++ b/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>
diff --git a/src/layouts/components/UserProfile.vue b/src/layouts/components/UserProfile.vue
index d14f9d90..fc2acb47 100644
--- a/src/layouts/components/UserProfile.vue
+++ b/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 -->
diff --git a/src/pages/appcenter.vue b/src/pages/appcenter.vue
index 046b0814..406cdd24 100644
--- a/src/pages/appcenter.vue
+++ b/src/pages/appcenter.vue
@@ -2,70 +2,107 @@
 import { NavMenu } from '@/@layouts/types'
 import { SystemNavMenus } from '@/router/menu'
 import { useUserStore } from '@/stores'
-import draggable from 'vuedraggable'
 
 // 从 Store 中获取superuser信息
 const superUser = useUserStore().superUser
 
-// APP图标顺序
-const appOrder = ref<string[]>([])
+// 应用分组（以header分组）
+const appGroups = ref<Record<string, NavMenu[]>>({})
 
-// 根据分类获取菜单列表
-const getMenuList = () => {
-  return SystemNavMenus.filter((item: NavMenu) => !item.admin || superUser)
-}
-
-// APP列表
-const appList = ref<NavMenu[]>(getMenuList())
-
-// 保存APP图标顺序到localStorage
-function saveAppsOrder() {
-  appOrder.value = appList.value.map(app => app.title)
-  localStorage.setItem('MP_APPS_ORDER', JSON.stringify(appOrder.value))
+// 根据header属性对应用进行分类
+function categorizeApps() {
+  // 获取可见的菜单项
+  const menus = SystemNavMenus.filter((item: NavMenu) => (!item.admin || superUser) && !item.footer)
+
+  // 按header属性分组
+  const groupedMenus: Record<string, NavMenu[]> = {}
+
+  menus.forEach(menu => {
+    const header = menu.header || '其他'
+    if (!groupedMenus[header]) {
+      groupedMenus[header] = []
+    }
+    groupedMenus[header].push(menu)
+  })
+
+  // 将分组结果赋值给响应式变量
+  appGroups.value = groupedMenus
 }
 
+// 页面加载时对应用进行分类
 onMounted(() => {
-  const localOrder = localStorage.getItem('MP_APPS_ORDER')
-  if (localOrder) {
-    appOrder.value = JSON.parse(localOrder)
-    // 对appList进行排序
-    appList.value.sort((a, b) => {
-      const aIndex = appOrder.value.findIndex(item => item === a.title)
-      const bIndex = appOrder.value.findIndex(item => item === b.title)
-      return (aIndex === -1 ? 999 : aIndex) - (bIndex === -1 ? 999 : bIndex)
-    })
-  }
+  categorizeApps()
 })
 </script>
 <template>
-  <div class="ps ps--active-y mx-3 appcenter-grid" tabindex="0">
-    <draggable
-      v-model="appList"
-      item-key="title"
-      tag="VRow"
-      delay="300"
-      @end="saveAppsOrder"
-      :component-data="{ 'class': 'ma-0 mt-n1' }"
-    >
-      <template #item="{ element }">
-        <VCol cols="6" md="3" lg="2" class="text-center cursor-pointer shortcut-icon select-none">
-          <VCard class="pa-4" :to="element.to" variant="flat">
-            <VAvatar size="64" variant="text">
-              <VIcon size="48" :icon="element.icon" color="primary" />
-            </VAvatar>
-            <h6 class="text-base font-weight-medium mt-2 mb-0">{{ element.full_title || element.title }}</h6>
-          </VCard>
-        </VCol>
-      </template>
-    </draggable>
+  <div class="app-settings-container">
+    <VContainer>
+      <!-- 遍历所有分组 -->
+      <div v-for="(apps, header) in appGroups" :key="header" class="mb-3">
+        <!-- 分组内容 - 使用卡片包装 -->
+        <VCard variant="flat" class="settings-section-card">
+          <VList lines="one" class="settings-list">
+            <VListItem
+              v-for="(app, appIndex) in apps"
+              :key="appIndex"
+              :to="app.to || ''"
+              color="primary"
+              class="settings-list-item"
+              rounded="0"
+            >
+              <template #prepend>
+                <VAvatar size="42" color="primary" variant="text" class="me-3">
+                  <VIcon :icon="app.icon as string" size="24"></VIcon>
+                </VAvatar>
+              </template>
+
+              <VListItemTitle class="font-weight-medium">
+                {{ app.full_title || app.title }}
+              </VListItemTitle>
+
+              <VListItemSubtitle v-if="app.description">
+                {{ app.description }}
+              </VListItemSubtitle>
+
+              <template #append>
+                <VIcon icon="mdi-chevron-right"></VIcon>
+              </template>
+            </VListItem>
+          </VList>
+        </VCard>
+      </div>
+    </VContainer>
   </div>
 </template>
 
-<style type="scss" scoped>
-.appcenter-grid .v-card {
-  /* 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);
+<style lang="scss" scoped>
+.app-settings-container {
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.settings-section-card {
+  overflow: hidden;
+  background-color: rgb(var(--v-theme-surface));
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.settings-list {
+  padding: 0;
+}
+
+.settings-list-item {
+  padding: 12px 16px;
+  transition: background-color 0.2s;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid rgba(var(--v-border-color), 0.12);
+  }
+
+  &:hover {
+    background-color: rgba(var(--v-theme-primary), 0.05);
+  }
 }
 </style>
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 7223c55e..48f66153 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -29,7 +29,7 @@ export const SystemNavMenus = [
     to: '/discover',
     header: '发现',
     admin: false,
-    footer: false,
+    footer: true,
   },
   {
     title: '电影',
@@ -38,7 +38,7 @@ export const SystemNavMenus = [
     to: '/subscribe/movie',
     header: '订阅',
     admin: false,
-    footer: true,
+    footer: false,
   },
   {
     title: '电视剧',
@@ -47,7 +47,7 @@ export const SystemNavMenus = [
     to: '/subscribe/tv',
     header: '订阅',
     admin: false,
-    footer: true,
+    footer: false,
   },
 
   {