39 lines
2.4 KiB
TypeScript
39 lines
2.4 KiB
TypeScript
import { useTabs } from './tab-store';
|
|
import { useStore } from '../../store';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export function TabBar() {
|
|
const { tabs, activeId, setActive, closeTab, togglePin } = useTabs();
|
|
const { openDoc, currentPath } = useStore();
|
|
const [hoveredTab, setHoveredTab] = useState<string | null>(null);
|
|
|
|
// 当 activeId 变化，加载对应标签的文档
|
|
useEffect(() => {
|
|
const tab = tabs.find(t => t.id === activeId);
|
|
if (tab && tab.path !== currentPath) openDoc(tab.path);
|
|
}, [activeId]);
|
|
|
|
if (tabs.length === 0) return null;
|
|
return (
|
|
<div data-testid="tabbar" style={{ display: 'flex', borderBottom: '1px solid var(--control-border)', background: 'var(--bg-secondary)', overflowX: 'auto' }}>
|
|
{tabs.map(t => (
|
|
<div key={t.id} onClick={() => setActive(t.id)}
|
|
onMouseEnter={() => setHoveredTab(t.id)} onMouseLeave={() => setHoveredTab(null)}
|
|
style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 10px', cursor: 'pointer',
|
|
borderBottom: activeId === t.id ? '2px solid var(--accent)' : '2px solid transparent',
|
|
background: activeId === t.id ? 'var(--bg-secondary)' : 'transparent', fontSize: 12, color: activeId === t.id ? 'var(--text-primary)' : 'var(--text-tertiary)', whiteSpace: 'nowrap' }}>
|
|
{t.pinned && <span style={{ color: 'var(--accent)' }}>★</span>}
|
|
<span>{t.path.split('/').pop()?.replace(/\.md$/, '')}</span>
|
|
{t.pinned ? (
|
|
// FR-T4：固定标签悬停时浮现关闭按钮
|
|
<span onClick={e => { e.stopPropagation(); closeTab(t.id); }} style={{ color: 'var(--text-tertiary)', cursor: 'pointer', fontSize: 12, opacity: hoveredTab === t.id ? 1 : 0 }} onMouseEnter={e => (e.currentTarget.style.color = '#f88')} onMouseLeave={e => (e.currentTarget.style.color = 'var(--text-tertiary)')}>x</span>
|
|
) : (
|
|
<span onClick={e => { e.stopPropagation(); closeTab(t.id); }} style={{ color: 'var(--text-tertiary)', cursor: 'pointer', fontSize: 12 }} onMouseEnter={e => (e.currentTarget.style.color = '#f88')} onMouseLeave={e => (e.currentTarget.style.color = 'var(--text-tertiary)')}>x</span>
|
|
)}
|
|
<span onClick={e => { e.stopPropagation(); togglePin(t.id); }} style={{ color: t.pinned ? 'var(--accent)' : 'var(--text-tertiary)', cursor: 'pointer', fontSize: 10 }} title={t.pinned ? '取消固定' : '固定'}>●</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|