feat: animate minimal summary text with color wave
This commit is contained in:
parent
3328d968d5
commit
dc60c7a123
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user