标题状态更新

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixivmanager",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "private": true,
   "type": "module",
   "engines": {

ui/src/App.vue

@@ -10,6 +10,7 @@ import DownloadProgressWidget from '@/components/common/DownloadProgressWidget.v
 import WatchlistWidget from '@/components/common/WatchlistWidget.vue'
 import RegistryWidget from '@/components/common/RegistryWidget.vue'
 import UpdateChecker from '@/components/common/UpdateChecker.vue'
+import TitleStatusWatcher from '@/components/common/TitleStatusWatcher.vue'
 
 const route = useRoute()
 const authStore = useAuthStore()
@@ -93,6 +94,9 @@ onMounted(async () => {
           <!-- 更新检查器 -->
           <UpdateChecker />
 
+          <!-- 页面标题状态监听（无UI，仅逻辑） -->
+          <TitleStatusWatcher />
+
           <!-- GitHub 链接 -->
           <a href="https://github.com/kjqwer/pixiv-D" target="_blank" rel="noopener noreferrer" class="github-link"
             title="查看项目源码">

ui/src/components/common/TitleStatusWatcher.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, watch, ref } from 'vue'
+import { useDownloadStore } from '@/stores/download'
+
+const downloadStore = useDownloadStore()
+
+const baseTitle = ref(document.title)
+const wasDownloadingWhenHidden = ref(false)
+const animationTimer = ref<number | null>(null)
+let marqueeIndex = 0
+
+const clearAnimation = () => {
+  if (animationTimer.value) {
+    clearInterval(animationTimer.value)
+    animationTimer.value = null
+  }
+}
+
+const startDownloadingAnimation = () => {
+  // 滚动字幕效果（标题跑马灯）
+  clearAnimation()
+  const text = '   作品下载中...   '
+  marqueeIndex = 0
+  animationTimer.value = window.setInterval(() => {
+    const rotated = text.slice(marqueeIndex) + text.slice(0, marqueeIndex)
+    document.title = rotated
+    marqueeIndex = (marqueeIndex + 1) % text.length
+  }, 250)
+}
+
+const startCompletedAnimation = () => {
+  // 轻微脉冲效果：在“下载完成”和“下载完成 ✓”之间切换
+  clearAnimation()
+  const frames = ['下载完成', '下载完成 ✓']
+  let idx = 0
+  animationTimer.value = window.setInterval(() => {
+    document.title = frames[idx]
+    idx = (idx + 1) % frames.length
+  }, 800)
+}
+
+const updateTitleForHidden = () => {
+  const len = downloadStore.downloadingTasks.length
+  if (len > 0) {
+    startDownloadingAnimation()
+    wasDownloadingWhenHidden.value = true
+  } else {
+    if (wasDownloadingWhenHidden.value) {
+      startCompletedAnimation()
+    } else {
+      clearAnimation()
+      document.title = baseTitle.value
+    }
+  }
+}
+
+const handleVisibilityChange = () => {
+  if (document.visibilityState === 'hidden') {
+    updateTitleForHidden()
+  } else {
+    document.title = baseTitle.value
+    wasDownloadingWhenHidden.value = false
+    clearAnimation()
+  }
+}
+
+onMounted(() => {
+  baseTitle.value = document.title
+  
+  document.addEventListener('visibilitychange', handleVisibilityChange)
+  
+  watch(
+    () => downloadStore.downloadingTasks.length,
+    () => {
+      if (document.visibilityState === 'hidden') {
+        updateTitleForHidden()
+      }
+    },
+    { immediate: false }
+  )
+})
+
+onUnmounted(() => {
+  document.removeEventListener('visibilitychange', handleVisibilityChange)
+  clearAnimation()
+})
+</script>
+
+<template>
+  <!-- 纯逻辑组件，不渲染任何内容 -->
+</template>