JOJO/agent-Specialization
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: animate minimal summary text with color wave

Browse Source
This commit is contained in:
JOJO 2026-04-05 01:22:37 +08:00
parent 3328d968d5
commit dc60c7a123
1 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
static/src/components/chat/MinimalBlocks.vue
View File

@ -11,7 +11,21 @@
@click="toggleExpand(group.id)" @click="toggleExpand(group.id)"
> >
<div class="summary-content-wrapper"> <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>
<!-- 加载动画或完成图标 --> <!-- 加载动画或完成图标 -->
<div class="summary-status-icon"> <div class="summary-status-icon">
@ -141,6 +155,8 @@ const truncateSummaryPreview = (raw: string) => {
return text; return text;
}; };
const getAnimatedSummaryChars = (text: string) => Array.from(text || '');
// 获取摘要组的加载动画组件（每次action类型切换时随机一次） // 获取摘要组的加载动画组件（每次action类型切换时随机一次）
const getSummaryLoader = (groupId: string) => { const getSummaryLoader = (groupId: string) => {
const group = blockGroups.value.find(g => g.id === groupId); const group = blockGroups.value.find(g => g.id === groupId);
@ -527,17 +543,20 @@ watch(() => props.actions, () => {
height: 18px; height: 18px;
} }
/* 运行中的发光效果 */ /* 运行中文本：按字符依次闪烁 */
.summary-line-text.running .summary-preview { .summary-line-text.running .summary-char {
animation: textGlow 1.5s ease-in-out infinite !important; display: inline-block;
color: var(--claude-text-secondary);
animation: summaryPass 2s ease-in-out infinite;
} }
@keyframes textGlow { @keyframes summaryPass {
0%, 100% { 0%,
color: var(--claude-text-secondary) !important; 100% {
color: var(--claude-text-secondary);
} }
50% { 50% {
color: var(--claude-accent) !important; color: var(--claude-accent);
} }
} }