From dc60c7a123593f295ca7d41db860cb901856321f Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Sun, 5 Apr 2026 01:22:37 +0800
Subject: [PATCH] feat: animate minimal summary text with color wave

---
 static/src/components/chat/MinimalBlocks.vue | 35 +++++++++++++++-----
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/static/src/components/chat/MinimalBlocks.vue b/static/src/components/chat/MinimalBlocks.vue
index 20835e1..1805416 100644
--- a/static/src/components/chat/MinimalBlocks.vue
+++ b/static/src/components/chat/MinimalBlocks.vue
@@ -11,7 +11,21 @@
           @click="toggleExpand(group.id)"
         >
           <div class="summary-content-wrapper">
-            <span class="summary-preview">{{ getSummaryPreview(group.actions) }}</span>
+            <span class="summary-preview">
+              <template v-if="isSummaryRunning(group.actions, group.id)">
+                <span
+                  v-for="(char, idx) in getAnimatedSummaryChars(getSummaryPreview(group.actions))"
+                  :key="`${group.id}-${idx}`"
+                  class="summary-char"
+                  :style="{ animationDelay: `${(idx + 1) * 0.12}s` }"
+                >
+                  {{ char === ' ' ? '\u00A0' : char }}
+                </span>
+              </template>
+              <template v-else>
+                {{ getSummaryPreview(group.actions) }}
+              </template>
+            </span>
           </div>
           <!-- 加载动画或完成图标 -->
           <div class="summary-status-icon">
@@ -141,6 +155,8 @@ const truncateSummaryPreview = (raw: string) => {
   return text;
 };
 
+const getAnimatedSummaryChars = (text: string) => Array.from(text || '');
+
 // 获取摘要组的加载动画组件（每次action类型切换时随机一次）
 const getSummaryLoader = (groupId: string) => {
   const group = blockGroups.value.find(g => g.id === groupId);
@@ -527,17 +543,20 @@ watch(() => props.actions, () => {
   height: 18px;
 }
 
-/* 运行中的发光效果 */
-.summary-line-text.running .summary-preview {
-  animation: textGlow 1.5s ease-in-out infinite !important;
+/* 运行中文本：按字符依次闪烁 */
+.summary-line-text.running .summary-char {
+  display: inline-block;
+  color: var(--claude-text-secondary);
+  animation: summaryPass 2s ease-in-out infinite;
 }
 
-@keyframes textGlow {
-  0%, 100% {
-    color: var(--claude-text-secondary) !important;
+@keyframes summaryPass {
+  0%,
+  100% {
+    color: var(--claude-text-secondary);
   }
   50% {
-    color: var(--claude-accent) !important;
+    color: var(--claude-accent);
   }
 }