fix: improve todo tool status icon visibility and colors (#11323)

This commit is contained in:
defi-failure 2025-11-17 14:01:27 +08:00 committed by GitHub
parent 139950e193
commit 096c36caf8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,4 +1,3 @@
import { cn } from '@renderer/utils'
import type { CollapseProps } from 'antd' import type { CollapseProps } from 'antd'
import { Card } from 'antd' import { Card } from 'antd'
import { CheckCircle, Circle, Clock, ListTodo } from 'lucide-react' import { CheckCircle, Circle, Clock, ListTodo } from 'lucide-react'
@ -11,23 +10,27 @@ const getStatusConfig = (status: TodoItem['status']) => {
switch (status) { switch (status) {
case 'completed': case 'completed':
return { return {
color: 'success' as const, color: 'var(--color-status-success)',
icon: <CheckCircle className="h-3 w-3" /> opacity: 0.6,
icon: <CheckCircle className="h-4 w-4" strokeWidth={2.5} />
} }
case 'in_progress': case 'in_progress':
return { return {
color: 'primary' as const, color: 'var(--color-primary)',
icon: <Clock className="h-3 w-3" /> opacity: 0.9,
icon: <Clock className="h-4 w-4" strokeWidth={2.5} />
} }
case 'pending': case 'pending':
return { return {
color: 'default' as const, color: 'var(--color-border)',
icon: <Circle className="h-3 w-3" /> opacity: 0.4,
icon: <Circle className="h-4 w-4" strokeWidth={2.5} />
} }
default: default:
return { return {
color: 'default' as const, color: 'var(--color-border)',
icon: <Circle className="h-3 w-3" /> opacity: 0.4,
icon: <Circle className="h-4 w-4" strokeWidth={2.5} />
} }
} }
} }
@ -64,10 +67,8 @@ export function TodoWriteTool({
<div className="p-2"> <div className="p-2">
<div className="flex items-center justify-center gap-3"> <div className="flex items-center justify-center gap-3">
<div <div
className={cn( className="flex items-center justify-center rounded-full border p-1"
'flex items-center justify-center rounded-full border bg-opacity-50 p-2', style={{ backgroundColor: statusConfig.color, opacity: statusConfig.opacity }}>
`bg-${statusConfig.color}`
)}>
{statusConfig.icon} {statusConfig.icon}
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">