| import { Zap, ScrollText, Cpu } from 'lucide-react' |
| import { useLayoutStore, type BottomTab } from '../../stores/layout-store' |
| import { useWorkflowStore } from '../../stores/workflow-store' |
| import { useTranslation } from 'react-i18next' |
|
|
| |
| |
| |
| |
| |
| export default function BottomToolWindowBar() { |
| const { t } = useTranslation('layout') |
| const bottomTab = useLayoutStore(s => s.bottomTab) |
| const setBottomTab = useLayoutStore(s => s.setBottomTab) |
| const activeRuns = useWorkflowStore(s => s.activeRuns) |
|
|
| |
| const bottomTabs: Array<{ id: BottomTab; icon: typeof Zap; label: string }> = [ |
| { id: 'tasks', icon: Zap, label: t('statusBar.tasksLabel') }, |
| { id: 'log', icon: ScrollText, label: t('bottomPanel.tabs.log') }, |
| { id: 'models', icon: Cpu, label: t('bottomPanel.tabs.models') }, |
| ] |
|
|
| return ( |
| <div |
| className="no-select flex flex-col items-center justify-start h-full py-0.5" |
| style={{ |
| width: 'var(--width-bottom-bar)', /* 28px */ |
| backgroundColor: 'var(--color-activity-bar)', |
| borderRight: '1px solid var(--color-border)', |
| flexShrink: 0, |
| }} |
| > |
| {bottomTabs.map(({ id, icon: Icon, label }) => { |
| const isActive = bottomTab === id |
| // 任务Tab：任何工作流运行中时显示脉冲小点 |
| const hasRunning = activeRuns.some(r => r.status === 'running') |
| const hasWaiting = activeRuns.some(r => r.status === 'waiting') |
| const showPulse = id === 'tasks' && (hasRunning || hasWaiting) |
| |
| return ( |
| <div key={id} className="relative w-full"> |
| <button |
| onClick={() => setBottomTab(id)} |
| title={label} |
| className="bottom-tool-btn" |
| style={{ |
| boxShadow: isActive |
| ? 'inset -2px 0 0 var(--color-accent)' |
| : 'none', |
| color: isActive |
| ? 'var(--color-accent)' |
| : 'var(--color-activity-icon)', |
| }} |
| > |
| <Icon size={13} strokeWidth={isActive ? 2 : 1.5} /> |
| </button> |
| {/* 状态脉冲点（工作流运行中） */} |
| {showPulse && ( |
| <span |
| className="absolute top-[3px] right-[3px] w-[5px] h-[5px] rounded-full animate-pulse pointer-events-none" |
| style={{ |
| backgroundColor: hasWaiting && !hasRunning |
| ? 'var(--color-warning)' |
| : 'var(--color-accent)', |
| }} |
| /> |
| )} |
| </div> |
| ) |
| })} |
| </div> |
| ) |
| } |
|
|
