Merge pull request #589 from AnNingUI/main

fix: 添加对非startViewTransition支持的浏览器添加一个回退的主题切换动画

frontend_nuxt/assets/global.css

@@ -7,7 +7,8 @@
   --header-background-color: white;
   --header-border-color: lightgray;
   --header-text-color: black;
-	--menu-background-color: white;
+  /* 加一个app前缀防止与firefox的userChrome.css中的--menu-background-color冲突 */
+  --app-menu-background-color: white;
   --background-color: white;
   /* --background-color-blur: rgba(255, 255, 255, 0.57); */
   --background-color-blur: var(--background-color);
@@ -31,14 +32,14 @@
   --activity-card-background-color: #fafafa;
 }
 
-[data-theme="dark"] {
+[data-theme='dark'] {
   --header-background-color: #2b2b2b;
   --header-border-color: #555;
   --primary-color: rgb(17, 182, 197);
   --primary-color-hover: rgb(13, 137, 151);
   --new-post-icon-color: rgba(10, 111, 120, 0.598);
   --header-text-color: white;
-	--menu-background-color: #333;
+  --app-menu-background-color: #333;
   --background-color: #333;
   /* --background-color-blur: #333333a4; */
   --background-color-blur: var(--background-color);
@@ -61,7 +62,7 @@
 body {
   margin: 0;
   padding: 0;
-	font-family: "Roboto", sans-serif;
+  font-family: 'Roboto', sans-serif;
   background-color: var(--normal-background-color);
   color: var(--text-color);
   /* 禁止滚动 */
@@ -151,7 +152,7 @@ body {
   font-size: 13px;
   position: sticky;
   flex-shrink: 0;
-	font-family: "Maple Mono", monospace;
+  font-family: 'Maple Mono', monospace;
   margin: 1em 0;
   color: #888;
   border-right: 1px solid #888;
@@ -166,7 +167,7 @@ body {
 }
 
 .info-content-text code {
-	font-family: "Maple Mono", monospace;
+  font-family: 'Maple Mono', monospace;
   font-size: 13px;
   border-radius: 4px;
   white-space: no-wrap;
@@ -226,7 +227,7 @@ body {
   font-weight: 600;
 }
 
-[data-theme="dark"] .info-content-text thead th {
+[data-theme='dark'] .info-content-text thead th {
   background-color: var(--primary-color-hover); /* 暗色稍暗一点 */
 }
 
@@ -234,7 +235,7 @@ body {
   background-color: rgba(208, 250, 255, 0.25); /* 斑马纹 */
 }
 
-[data-theme="dark"] .info-content-text tbody tr:nth-child(even) {
+[data-theme='dark'] .info-content-text tbody tr:nth-child(even) {
   background-color: rgba(255, 255, 255, 0.05);
 }
 
@@ -320,11 +321,11 @@ body {
   z-index: 2147483646;
 }
 
-[data-theme="dark"]::view-transition-old(root) {
+[data-theme='dark']::view-transition-old(root) {
   z-index: 2147483646;
 }
 
-[data-theme="dark"]::view-transition-new(root) {
+[data-theme='dark']::view-transition-new(root) {
   z-index: 1;
 }
 

frontend_nuxt/components/Dropdown.vue

@@ -114,7 +114,7 @@
 </template>
 
 <script>
-import { ref, computed, watch, onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useIsMobile } from '~/utils/screen'
 
 export default {
@@ -312,7 +312,7 @@ export default {
   border: none;
   outline: none;
   margin-left: 5px;
-  background-color: var(--menu-background-color);
+  background-color: var(--app-menu-background-color);
   color: var(--text-color);
 }
 
@@ -352,7 +352,7 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--menu-background-color);
+  background-color: var(--app-menu-background-color);
   z-index: 1300;
   display: flex;
   flex-direction: column;

frontend_nuxt/components/DropdownMenu.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 export default {
   name: 'DropdownMenu',
   props: {
@@ -61,6 +61,7 @@ export default {
   position: relative;
   display: inline-block;
 }
+
 .dropdown-trigger {
   cursor: pointer;
   display: inline-flex;
@@ -71,7 +72,7 @@ export default {
   position: absolute;
   top: 100%;
   right: 0;
-  background-color: var(--menu-background-color);
+  background-color: var(--app-menu-background-color);
   border: 1px solid var(--normal-border-color);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   border-radius: 8px;
@@ -84,6 +85,7 @@ export default {
   white-space: nowrap;
   cursor: pointer;
 }
+
 .dropdown-item:hover {
   background-color: var(--menu-selected-background-color);
 }

frontend_nuxt/components/MenuComponent.vue

@@ -117,7 +117,7 @@
       </div>
 
       <!-- 解决动态样式的水合错误 -->
-      <ClientOnly v-if='!isMobile'>
+      <ClientOnly v-if="!isMobile">
         <div class="menu-footer">
           <div class="menu-footer-btn" @click="cycleTheme">
             <i :class="iconClass"></i>
@@ -129,11 +129,11 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from 'vue'
-import { themeState, cycleTheme, ThemeMode } from '~/utils/theme'
+import { computed, onMounted, ref, watch } from 'vue'
 import { authState } from '~/utils/auth'
 import { fetchUnreadCount, notificationState } from '~/utils/notification'
 import { useIsMobile } from '~/utils/screen'
+import { cycleTheme, ThemeMode, themeState } from '~/utils/theme'
 
 const isMobile = useIsMobile()
 
@@ -232,7 +232,7 @@ const gotoTag = (t) => {
   position: sticky;
   top: var(--header-height);
   width: 220px;
-  background-color: var(--menu-background-color);
+  background-color: var(--app-menu-background-color);
   height: calc(100vh - 20px - var(--header-height));
   border-right: 1px solid var(--menu-border-color);
   display: flex;

frontend_nuxt/components/SearchDropdown.vue

@@ -37,10 +37,10 @@
 </template>
 
 <script setup>
-import { useIsMobile } from '~/utils/screen'
+import { ref, watch } from 'vue'
 import Dropdown from '~/components/Dropdown.vue'
 import { stripMarkdown } from '~/utils/markdown'
-import { ref, watch } from 'vue'
+import { useIsMobile } from '~/utils/screen'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 
@@ -135,7 +135,7 @@ defineExpose({
 }
 
 .text-input {
-  background-color: var(--menu-background-color);
+  background-color: var(--app-menu-background-color);
   color: var(--text-color);
   border: none;
   outline: none;

frontend_nuxt/utils/theme.js

@@ -28,7 +28,9 @@ function apply(mode) {
   // 更新 meta 标签
   const androidMeta = document.querySelector('meta[name="theme-color"]')
   const iosMeta = document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]')
-  const themeColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim();
+  const themeColor = getComputedStyle(document.documentElement)
+    .getPropertyValue('--background-color')
+    .trim()
   const themeStatus = newMode === 'dark' ? 'black-translucent' : 'default'
 
   if (androidMeta) {
@@ -106,10 +108,54 @@ function withViewTransition(event, applyFn, direction = true) {
       })
       .catch(console.warn)
   } else {
-    applyFn()
+    fallbackThemeTransition(applyFn)
   }
 }
 
+function fallbackThemeTransition(applyFn) {
+  if (!import.meta.client) return
+
+  const root = document.documentElement
+  const computedStyle = getComputedStyle(root)
+
+  // 获取当前背景色用于过渡
+  const currentBg = computedStyle.getPropertyValue('--background-color').trim()
+
+  // 创建过渡元素
+  const transitionElement = document.createElement('div')
+  transitionElement.style.cssText = `
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: ${currentBg};
+    z-index: 9999;
+    pointer-events: none;
+    backdrop-filter: blur(1px);
+  `
+  document.body.appendChild(transitionElement)
+
+  // 使用 Web Animations API 实现淡出动画
+  const animation = transitionElement.animate([{ opacity: 1 }, { opacity: 0 }], {
+    duration: 300,
+    easing: 'ease-out',
+  })
+
+  // 应用主题变更
+  applyFn()
+
+  // 动画完成后清理
+  animation.finished
+    .then(() => {
+      document.body.removeChild(transitionElement)
+    })
+    .catch(() => {
+      // 降级处理
+      document.body.removeChild(transitionElement)
+    })
+}
+
 function getSystemTheme() {
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 }