fix: 修复极光光流条未声明变量导致透明静止、重构流光动效为显式光晕与平滑位移

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tallynote",
-  "version": "1.1.36",
+  "version": "1.1.37",
   "private": true,
   "type": "module",
   "packageManager": "pnpm@9.0.6",

web-next/src/styles/theme.css

@@ -766,6 +766,8 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
 }
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
+  /* Active loading indicators must retain continuous movement so users know tasks are progressing */
+  .tn-beam-bar::after, .tn-spin { animation-duration: 2s !important; animation-iteration-count: infinite !important; }
 }
 
 /* ==========================================================================
@@ -1647,7 +1649,7 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
-  gap: 16px !important;
+  gap: 14px !important;
   padding: 40px 20px !important;
   width: 100% !important;
   height: 100% !important;
@@ -1657,49 +1659,51 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
 }
 .tn-beam-bar {
   width: 140px;
-  height: 4px;
-  background: #e2e8f0;
-  border-radius: 4px;
+  height: 5px;
+  background: var(--td-brand-color-1, #e8f0ff);
+  border-radius: 9999px;
   overflow: hidden;
   position: relative;
+  display: block;
+  margin: 0 auto;
+  box-shadow: inset 0 1px 2px rgba(23, 92, 211, 0.08);
 }
 .tn-beam-bar::after {
   content: "";
   position: absolute;
   top: 0;
-  left: -60px;
-  width: 60px;
+  left: 0;
+  width: 50%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, var(--tn-blue-600), transparent);
-  border-radius: 4px;
-  animation: tn-beam-flow 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  background: linear-gradient(90deg, rgba(23, 92, 211, 0) 0%, rgba(61, 123, 229, 0.95) 45%, var(--td-brand-color, #175cd3) 70%, rgba(23, 92, 211, 0) 100%);
+  box-shadow: 0 0 10px rgba(23, 92, 211, 0.55), 0 0 4px rgba(61, 123, 229, 0.9);
+  border-radius: 9999px;
+  animation: tn-beam-flow 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  will-change: transform;
 }
 
 .tn-beam-bar-sm {
   width: 60px !important;
-  height: 3px !important;
-  display: inline-block;
+  height: 3.5px !important;
+  display: inline-block !important;
   vertical-align: middle;
+  margin: 0 6px !important;
 }
 .tn-beam-bar-sm::after {
-  width: 30px;
-  animation: tn-beam-flow-sm 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  width: 50%;
+  animation: tn-beam-flow 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }
 
 @keyframes tn-beam-flow {
-  0% { left: -60px; }
-  100% { left: 140px; }
-}
-
-@keyframes tn-beam-flow-sm {
-  0% { left: -30px; }
-  100% { left: 60px; }
+  0% { transform: translateX(-150%); }
+  100% { transform: translateX(280%); }
 }
 
 .tn-beam-text {
   font-size: 13.5px;
-  color: var(--tn-text-secondary);
-  letter-spacing: 0.4px;
+  color: var(--tn-navy-700, #344054);
+  font-weight: 500;
+  letter-spacing: 0.3px;
 }
 
 /* 彻底隐去 TDesign 默认圆环旋转圈圈，统一切换为沉稳光流 */