From 421714dfa3b22020e07a7bd9f8e87bb8c639f720 Mon Sep 17 00:00:00 2001 From: oudecheng <13802883547@139.com> Date: Thu, 18 Jun 2026 16:15:08 +0800 Subject: [PATCH] =?UTF-8?q?style(TodoPanel):=20=E4=BC=98=E5=8C=96=E5=BE=85?= =?UTF-8?q?=E5=8A=9E=E9=9D=A2=E6=9D=BF=E5=8A=A8=E7=94=BB=E5=92=8C=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E7=BB=86=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增待办卡片及条目动画效果，提升界面动感 - 添加待办分组折叠内容展开/收起过渡样式 - 优化按钮尺寸及颜色悬浮效果，提升交互体验 - 自动展开新待办项，空列表时自动收起 - 调整待办面板大小、圆角及阴影效果，增强视觉层次 - 改进待办标题栏排版及交互样式，支持拖动操作手感 - 为无待办状态提供占位展示及提示文字 - 优化待办分组标题样式及折叠箭头动画 - 改进待办条目列表项样式，支持悬浮高亮显示 - 移除消息气泡中的冗余子智能体标签显示内容 --- web/src/components/Chat/MessageBubble.tsx | 5 -- web/src/components/Panel/TodoPanel.tsx | 89 +++++++++++++---------- web/src/index.css | 54 ++++++++++++++ 3 files changed, 105 insertions(+), 43 deletions(-) diff --git a/web/src/components/Chat/MessageBubble.tsx b/web/src/components/Chat/MessageBubble.tsx index 0c9b9bd..fc1de64 100644 --- a/web/src/components/Chat/MessageBubble.tsx +++ b/web/src/components/Chat/MessageBubble.tsx @@ -395,11 +395,6 @@ export function MessageBubble({ message, onNavigateToSubAgent, showThinking = tr 子智能体·{subagentType} )} - {!isTaskTool && isSubAgent && ( - - 子智能体 - - )} {formatTime(message.timestamp)}
{ const newIds = new Set(todos.map(t => t.id)) - const hasNewItems = todos.some(t => !prevTodoIdsRef.current.has(t.id)) - if (hasNewItems && todos.length > 0) setExpanded(true) + if (todos.length === 0) { + setExpanded(false) + } else { + const hasNewItems = todos.some(t => !prevTodoIdsRef.current.has(t.id)) + if (hasNewItems) setExpanded(true) + } prevTodoIdsRef.current = newIds }, [todos]) @@ -152,26 +156,23 @@ export function TodoPanel({ todos, requestTodoList, sendCommand }: TodoPanelProp >
@@ -186,29 +187,44 @@ export function TodoPanel({ todos, requestTodoList, sendCommand }: TodoPanelProp className="absolute z-30" style={{ top: `${16 + pos.y}px`, right: `${16 + pos.x}px` }} > -
+
{/* title bar (drag handle) */}
- ⠿ - - 待办 - {totalCount} + ⠿ + + 待办 + {totalCount} {inProgressCount > 0 && }
- -
{/* list */} -
+
+ {totalCount === 0 && ( +
+
+
+ +
+

+ 暂无待办事项 +

+

+ AI 助手可在对话中创建和管理待办 +

+
+ )} + {GROUP_ORDER.map(status => { const items = grouped.get(status) if (!items || items.length === 0) return null @@ -220,31 +236,28 @@ export function TodoPanel({ todos, requestTodoList, sendCommand }: TodoPanelProp
- {!isCollapsed && ( -
+
+
{items.map(item => ( -
- - +
+ + {item.content}
))}
- )} +
) })} diff --git a/web/src/index.css b/web/src/index.css index 4997e93..5f8339d 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -258,6 +258,60 @@ body { .animate-fade-in { animation: fade-in 0.2s ease-out; } .animate-scale-in { animation: scale-in 0.3s ease-out; } +/* ============================================ + TodoPanel animations + ============================================ */ +@keyframes todo-card-in { + from { + opacity: 0; + transform: scale(0.92) translateY(-8px); + } + to { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +@keyframes todo-item-in { + from { + opacity: 0; + transform: translateX(-6px); + max-height: 0; + } + to { + opacity: 1; + transform: translateX(0); + max-height: 40px; + } +} + +@keyframes todo-ring-pulse { + 0%, 100% { + box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); + } + 50% { + box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); + } +} + +.animate-todo-card-in { animation: todo-card-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } +.animate-todo-item-in { animation: todo-item-in 0.2s ease-out forwards; } +.animate-todo-ring-pulse { animation: todo-ring-pulse 2s ease-in-out infinite; } + +/* 分组折叠内容展开/收起 */ +.todo-group-body { + overflow: hidden; + transition: max-height 0.25s ease, opacity 0.2s ease; +} +.todo-group-body-open { + max-height: 600px; + opacity: 1; +} +.todo-group-body-closed { + max-height: 0; + opacity: 0; +} + @keyframes thinking-reveal { from { max-height: 0; opacity: 0; } to { max-height: 300px; opacity: 1; }