From d0a605693806a5a059ee756fe16e55bd3d32969e Mon Sep 17 00:00:00 2001 From: zichun Date: Mon, 1 Jun 2026 16:58:07 +0800 Subject: [PATCH] feat(fe-shell): 顶栏标签栈联动逻辑 useTabStack REQ-USR-003 --- frontend/src/layouts/AppLayout/useTabStack.ts | 81 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ frontend/tests/unit/useTabStack.test.tsx | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 140 insertions(+), 0 deletions(-) create mode 100644 frontend/src/layouts/AppLayout/useTabStack.ts create mode 100644 frontend/tests/unit/useTabStack.test.tsx diff --git a/frontend/src/layouts/AppLayout/useTabStack.ts b/frontend/src/layouts/AppLayout/useTabStack.ts new file mode 100644 index 0000000..c52d596 --- /dev/null +++ b/frontend/src/layouts/AppLayout/useTabStack.ts @@ -0,0 +1,81 @@ +// REQ-USR-003: 顶栏标签栈逻辑（复刻原型 tabsOpen/openTab/.close，BR4/BR5/BR6）。 +// 纯逻辑 hook：只管标签集合 + activeKey；路由跳转由调用方据 routePath 执行。 +import { useCallback, useMemo, useState } from 'react'; + +/** 业务标签 key（跨组件一致的合同级常量） */ +export type BizTabKey = 'userlist' | 'userdetail'; +export type TabKey = 'home' | BizTabKey; + +export interface TabItem { + key: string; + title: string; + closable: boolean; + routePath: string; +} + +/** 固定主页标签：不可关闭，恒在最左 */ +export const HOME_TAB: TabItem = { + key: 'home', + title: '主页', + closable: false, + routePath: '/', +}; + +/** 业务标签定义（标题 / 路由 / 可关闭） */ +export const BIZ_TABS: Record = { + userlist: { key: 'userlist', title: '用户列表', closable: true, routePath: '/usr/users' }, + userdetail: { key: 'userdetail', title: '用户信息单据', closable: true, routePath: '/usr/users/new' }, +}; + +export interface TabStack { + tabs: TabItem[]; + activeKey: string; + openTab: (key: BizTabKey) => void; + closeTab: (key: string) => void; + setActive: (key: string) => void; +} + +export function useTabStack(): TabStack { + // 已打开的业务标签集合（home 恒在，不入此集合） + const [userlistOpen, setUserlistOpen] = useState(false); + const [userdetailOpen, setUserdetailOpen] = useState(false); + const [activeKey, setActiveKey] = useState('home'); + + const tabs = useMemo(() => { + const list: TabItem[] = [HOME_TAB]; + if (userlistOpen) list.push(BIZ_TABS.userlist); + if (userdetailOpen) list.push(BIZ_TABS.userdetail); + return list; + }, [userlistOpen, userdetailOpen]); + + const openTab = useCallback((key: BizTabKey) => { + if (key === 'userlist') { + setUserlistOpen(true); + setActiveKey('userlist'); + } else if (key === 'userdetail') { + // 打开单据前先确保用户列表存在（BR6） + setUserlistOpen(true); + setUserdetailOpen(true); + setActiveKey('userdetail'); + } + }, []); + + const closeTab = useCallback((key: string) => { + if (key === 'userlist') { + // 关用户列表联动关用户信息单据并回主页（BR5） + setUserlistOpen(false); + setUserdetailOpen(false); + setActiveKey('home'); + } else if (key === 'userdetail') { + // 关用户信息单据回用户列表 + setUserdetailOpen(false); + setActiveKey('userlist'); + } + }, []); + + const setActive = useCallback((key: string) => { + setActiveKey(key); + }, []); + + return { tabs, activeKey, openTab, closeTab, setActive }; +} diff --git a/frontend/tests/unit/useTabStack.test.tsx b/frontend/tests/unit/useTabStack.test.tsx new file mode 100644 index 0000000..f0fe0f2 --- /dev/null +++ b/frontend/tests/unit/useTabStack.test.tsx @@ -0,0 +1,59 @@ +// REQ-USR-003: useTabStack 标签栈逻辑（BR4/BR5/BR6） +import { describe, it, expect } from 'vitest'; +import { act, renderHook } from '@testing-library/react'; +import { useTabStack } from '../../src/layouts/AppLayout/useTabStack'; + +describe('useTabStack', () => { + it('starts with fixed home tab only (closable false, leftmost)', () => { + const { result } = renderHook(() => useTabStack()); + expect(result.current.tabs.map((t) => t.key)).toEqual(['home']); + expect(result.current.activeKey).toBe('home'); + expect(result.current.tabs[0].closable).toBe(false); + expect(result.current.tabs[0].title).toBe('主页'); + expect(result.current.tabs[0].routePath).toBe('/'); + }); + + it('openTab userlist appends userlist and activates it', () => { + const { result } = renderHook(() => useTabStack()); + act(() => result.current.openTab('userlist')); + expect(result.current.tabs.map((t) => t.key)).toEqual(['home', 'userlist']); + expect(result.current.activeKey).toBe('userlist'); + const ul = result.current.tabs.find((t) => t.key === 'userlist')!; + expect(ul.closable).toBe(true); + expect(ul.routePath).toBe('/usr/users'); + expect(ul.title).toBe('用户列表'); + }); + + it('openTab userdetail ensures userlist exists then appends userdetail', () => { + const { result } = renderHook(() => useTabStack()); + act(() => result.current.openTab('userdetail')); + expect(result.current.tabs.map((t) => t.key)).toEqual(['home', 'userlist', 'userdetail']); + expect(result.current.activeKey).toBe('userdetail'); + const ud = result.current.tabs.find((t) => t.key === 'userdetail')!; + expect(ud.title).toBe('用户信息单据'); + expect(ud.closable).toBe(true); + }); + + it('closeTab userlist also removes userdetail and activates home', () => { + const { result } = renderHook(() => useTabStack()); + act(() => result.current.openTab('userdetail')); + act(() => result.current.closeTab('userlist')); + expect(result.current.tabs.map((t) => t.key)).toEqual(['home']); + expect(result.current.activeKey).toBe('home'); + }); + + it('closeTab userdetail activates userlist', () => { + const { result } = renderHook(() => useTabStack()); + act(() => result.current.openTab('userdetail')); + act(() => result.current.closeTab('userdetail')); + expect(result.current.tabs.map((t) => t.key)).toEqual(['home', 'userlist']); + expect(result.current.activeKey).toBe('userlist'); + }); + + it('open existing tab does not duplicate', () => { + const { result } = renderHook(() => useTabStack()); + act(() => result.current.openTab('userlist')); + act(() => result.current.openTab('userlist')); + expect(result.current.tabs.map((t) => t.key)).toEqual(['home', 'userlist']); + }); +}); -- libgit2 0.22.2