feat: animate minimal summary text with color wave

This commit is contained in:
JOJO 2026-04-05 01:22:37 +08:00
parent 3328d968d5
commit dc60c7a123

View File

@ -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);
}
}