feat: 添加透明主题支持及背景图片轮换功能

- 在 App.vue 中引入 API 获取背景图片，并实现背景图片的轮换功能。
- 更新主题切换逻辑，支持透明主题，并在主题变化时更新 HTML 属性。
- 在样式中添加透明主题的特定样式，确保各个组件在透明主题下的显示效果。

src/layouts/components/HeaderTab.vue

@@ -70,7 +70,7 @@ onUnmounted(() => {
 })
 </script>
 <template>
-  <div class="tab-header">
+  <div class="tab-header rounded-lg">
     <div ref="tabsContainerRef" class="header-tabs" :class="{ 'show-indicator': showTabsScrollIndicator }">
       <div
         v-for="(item, index) in items"
@@ -94,7 +94,6 @@ onUnmounted(() => {
   align-items: center;
   justify-content: space-between;
   backdrop-filter: blur(10px);
-  background-color: rgba(var(--v-theme-background), 0.8);
   border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.05);
   inset-block-start: 0;
   margin-block-end: 16px;
@@ -127,7 +126,7 @@ onUnmounted(() => {
   &::after {
     position: absolute;
     z-index: 1; // Ensure it's above the tabs but below other header elements if needed
-    background: linear-gradient(to left, rgba(var(--v-theme-background), 1) 30%, transparent);
+    background: linear-gradient(to left, rgba(var(--v-theme-background), 10.3) 30%, transparent);
     content: '';
     inline-size: 40px; // Width of the fade effect
     inset-block: 0;
@@ -136,11 +135,6 @@ onUnmounted(() => {
     pointer-events: none; // Allow interaction with content behind it
     transition: opacity 0.2s ease-in-out;
   }
-
-  // Show the indicator when the class is present
-  &.show-indicator::after {
-    opacity: 1;
-  }
 }
 
 .header-tab-icon {

src/layouts/components/NavbarThemeSwitcher.vue

@@ -19,9 +19,14 @@ const themes: ThemeSwitcherTheme[] = [
   },
   {
     name: 'purple',
-    title: '紫韵幽兰',
+    title: '幻紫',
     icon: 'mdi-brightness-4',
   },
+  {
+    name: 'transparent',
+    title: '透明',
+    icon: 'mdi-gradient-vertical',
+  },
 ]
 </script>