feat(tasks): 切换页加「获取最新任务中」刷新状态 + 旋转动画，1.2s 后切换

- TaskDisplay.jsx：displayedPage 与 page 分离，页切换先置 switching 展示加载遮罩，SWITCH_MS(1200ms) 后再切到新页；task_refresh 亦播放一次。
- task-display.css：tasks-screen position:relative；+ tasks-switch-overlay / tasks-spinner(旋转) / tasks-switch-text。

Co-Authored-By: Claude <noreply@anthropic.com>

src/styles/task-display.css

@@ -8,6 +8,7 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
+  position: relative;   /* 供切换加载遮罩定位于此 */
   background: radial-gradient(ellipse at 20% 0%, rgba(79, 135, 255, 0.08), transparent 55%),
     radial-gradient(ellipse at 80% 100%, rgba(23, 178, 106, 0.06), transparent 55%);
 }
@@ -115,3 +116,35 @@
 .task-dots { display: flex; justify-content: center; gap: 8px; padding-bottom: 6px; }
 .task-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(29, 44, 68, 0.15); transition: all 0.25s; }
 .task-dot.on { background: var(--bd-blue, #2f6bff); width: 20px; border-radius: 999px; }
+
+/* ---- 切换/刷新加载遮罩：文字(获取最新任务中) + 旋转动画 ---- */
+.tasks-switch-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  background: rgba(255, 255, 255, 0.72);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+.tasks-spinner {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  border: 4px solid rgba(47, 107, 255, 0.18);
+  border-top-color: var(--bd-blue, #2f6bff);
+  animation: tasks-spin 0.8s linear infinite;
+}
+.tasks-switch-text {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--bd-blue, #2f6bff);
+  letter-spacing: 0.05em;
+}
+@keyframes tasks-spin {
+  to { transform: rotate(360deg); }
+}