feat: 标签栏右键菜单 — 关闭其他/右侧/全部标签

新增功能:
- 右键点击标签弹出上下文菜单
- 关闭:关闭当前标签(带未保存确认)
- 关闭其他标签:保留当前,关闭其余(带未保存确认)
- 关闭右侧标签:关闭当前标签右边的所有标签
- 关闭全部标签:关闭所有标签(带未保存确认)
- 点击空白处自动关闭菜单

技术实现:
- tabStore 新增 closeOtherTabs/closeAllTabs/closeTabsToRight 方法
- TabBar 组件新增 ContextMenu 状态管理和右键事件处理
- CSS 新增 .tab-context-menu 样式(暗色主题兼容)
This commit is contained in:
thzxx
2026-05-27 20:56:56 +08:00
parent 959fde70e3
commit 2c681a4142
3 changed files with 175 additions and 1 deletions
+35
View File
@@ -9,6 +9,9 @@ interface TabState {
createTab: (filePath?: string | null, content?: string) => Tab
closeTab: (tabId: string) => void
closeOtherTabs: (tabId: string) => void
closeAllTabs: () => void
closeTabsToRight: (tabId: string) => void
switchToTab: (tabId: string) => void
updateTabContent: (tabId: string, content: string) => void
setModified: (tabId: string, modified: boolean) => void
@@ -79,6 +82,38 @@ export const useTabStore = create<TabState>((set, get) => ({
})
},
closeOtherTabs: (tabId) => {
set(state => {
const target = state.tabs.find(t => t.id === tabId)
if (!target) return state
return {
tabs: [target],
activeTabId: tabId,
mruStack: []
}
})
},
closeAllTabs: () => {
set({ tabs: [], activeTabId: null, mruStack: [] })
},
closeTabsToRight: (tabId) => {
set(state => {
const index = state.tabs.findIndex(t => t.id === tabId)
if (index === -1) return state
const newTabs = state.tabs.slice(0, index + 1)
const newActiveId = state.activeTabId && newTabs.find(t => t.id === state.activeTabId)
? state.activeTabId
: tabId
return {
tabs: newTabs,
activeTabId: newActiveId,
mruStack: state.mruStack.filter(id => newTabs.some(t => t.id === id))
}
})
},
switchToTab: (tabId) => {
set(state => {
if (state.activeTabId === tabId) return state