From e8cacc2c7a7664024535a05192d56180758da6c0 Mon Sep 17 00:00:00 2001 From: gaoziman <2942894660@qq.com> Date: Fri, 7 Nov 2025 22:35:47 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E7=8A=B6=E6=80=81=E7=AE=A1=E7=90=86):=20?= =?UTF-8?q?=E6=89=A9=E5=B1=95=20Redux=20store=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=A1=B5=E7=8A=B6=E6=80=81=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 tabs 状态字段到 GlobalState - 实现标签页增删改查的 reducer 逻辑 - 支持添加标签、移除标签、设置激活标签 - 支持关闭左侧、右侧、其他标签的批量操作 - 自动处理标签关闭后的激活状态切换 --- src/store/index.ts | 135 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 135 insertions(+) diff --git a/src/store/index.ts b/src/store/index.ts index 84f0e03..4301f13 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,4 +1,6 @@ import defaultSettings from '../settings.json'; +import { TabItem, TabsState } from '@/types/tabs'; + export interface GlobalState { settings?: typeof defaultSettings; userInfo?: { @@ -11,6 +13,7 @@ export interface GlobalState { permissions: Record; }; userLoading?: boolean; + tabs?: TabsState; } const initialState: GlobalState = { @@ -18,6 +21,10 @@ const initialState: GlobalState = { userInfo: { permissions: {}, }, + tabs: { + activeKey: '', + tabs: [], + }, }; export default function store(state = initialState, action) { @@ -37,6 +44,134 @@ export default function store(state = initialState, action) { userInfo, }; } + // 添加标签页 + case 'tabs/addTab': { + const newTab: TabItem = action.payload; + const existingTab = state.tabs.tabs.find((tab) => tab.key === newTab.key); + + if (existingTab) { + // 如果标签已存在,只更新激活状态 + return { + ...state, + tabs: { + ...state.tabs, + activeKey: newTab.key, + }, + }; + } + + // 添加新标签 + return { + ...state, + tabs: { + activeKey: newTab.key, + tabs: [...state.tabs.tabs, newTab], + }, + }; + } + // 移除标签页 + case 'tabs/removeTab': { + const targetKey: string = action.payload; + const { tabs, activeKey } = state.tabs; + const targetIndex = tabs.findIndex((tab) => tab.key === targetKey); + + if (targetIndex === -1) { + return state; + } + + const newTabs = tabs.filter((tab) => tab.key !== targetKey); + let newActiveKey = activeKey; + + // 如果关闭的是当前激活的标签,需要激活相邻标签 + if (activeKey === targetKey && newTabs.length > 0) { + // 优先激活右侧标签,如果没有则激活左侧 + if (targetIndex < tabs.length - 1) { + newActiveKey = tabs[targetIndex + 1].key; + } else { + newActiveKey = tabs[targetIndex - 1].key; + } + } + + return { + ...state, + tabs: { + activeKey: newActiveKey, + tabs: newTabs, + }, + }; + } + // 设置激活的标签页 + case 'tabs/setActiveTab': { + const activeKey: string = action.payload; + return { + ...state, + tabs: { + ...state.tabs, + activeKey, + }, + }; + } + // 关闭左侧标签页 + case 'tabs/closeLeftTabs': { + const targetKey: string = action.payload; + const targetIndex = state.tabs.tabs.findIndex( + (tab) => tab.key === targetKey + ); + + if (targetIndex <= 0) { + return state; + } + + const newTabs = state.tabs.tabs.filter((tab, index) => { + return index >= targetIndex || !tab.closable; + }); + + return { + ...state, + tabs: { + ...state.tabs, + tabs: newTabs, + }, + }; + } + // 关闭右侧标签页 + case 'tabs/closeRightTabs': { + const targetKey: string = action.payload; + const targetIndex = state.tabs.tabs.findIndex( + (tab) => tab.key === targetKey + ); + + if (targetIndex === -1 || targetIndex === state.tabs.tabs.length - 1) { + return state; + } + + const newTabs = state.tabs.tabs.filter((tab, index) => { + return index <= targetIndex || !tab.closable; + }); + + return { + ...state, + tabs: { + ...state.tabs, + tabs: newTabs, + }, + }; + } + // 关闭其他标签页 + case 'tabs/closeOtherTabs': { + const targetKey: string = action.payload; + const newTabs = state.tabs.tabs.filter((tab) => { + return tab.key === targetKey || !tab.closable; + }); + + return { + ...state, + tabs: { + activeKey: targetKey, + tabs: newTabs, + }, + }; + } default: return state; }