feat: rebuild support workspace frontend

frontend/src/components/app/AppRouteTabs.test.tsx

@@ -0,0 +1,93 @@
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { AppRouteTabs } from '@/components/app/AppRouteTabs'
+
+function navigate(path: string) {
+  act(() => {
+    window.location.hash = path
+    window.dispatchEvent(new HashChangeEvent('hashchange'))
+  })
+}
+
+beforeEach(() => {
+  window.sessionStorage.clear()
+  window.location.hash = '#/tickets/42'
+})
+
+afterEach(() => cleanup())
+
+describe('已打开页面标签', () => {
+  it('只显示实际打开过的页面，并允许关闭非当前标签', async () => {
+    const user = userEvent.setup()
+    render(<AppRouteTabs />)
+
+    await waitFor(() => expect(screen.getAllByRole('tab')).toHaveLength(1))
+    expect(screen.getByRole('tab', { name: '工单详情' })).toHaveAttribute('data-state', 'active')
+
+    navigate('/knowledge')
+    await waitFor(() => expect(screen.getAllByRole('tab')).toHaveLength(2))
+    expect(screen.getByRole('tab', { name: '知识库' })).toHaveAttribute('data-state', 'active')
+
+    await user.click(screen.getByRole('button', { name: '关闭工单详情（/tickets/42）' }))
+    expect(screen.queryByRole('tab', { name: '工单详情' })).not.toBeInTheDocument()
+    expect(window.location.hash).toBe('#/knowledge')
+  })
+
+  it('关闭当前标签后切换到相邻页面，并在关闭最后一个标签时回到工作台', async () => {
+    const user = userEvent.setup()
+    render(<AppRouteTabs />)
+
+    navigate('/knowledge')
+    await waitFor(() => expect(screen.getAllByRole('tab')).toHaveLength(2))
+
+    await user.click(screen.getByRole('button', { name: '关闭知识库（/knowledge）' }))
+    expect(window.location.hash).toBe('#/tickets/42')
+    navigate('/tickets/42')
+    await waitFor(() => expect(screen.getByRole('tab', { name: '工单详情' })).toHaveAttribute('data-state', 'active'))
+
+    await user.click(screen.getByRole('button', { name: '关闭工单详情（/tickets/42）' }))
+    expect(window.location.hash).toBe('#/')
+    navigate('/')
+    await waitFor(() => expect(screen.getByRole('tab', { name: '工作台' })).toHaveAttribute('data-state', 'active'))
+  })
+
+  it('刷新式重新挂载后保留本次会话已打开的标签', async () => {
+    const { unmount } = render(<AppRouteTabs />)
+    navigate('/knowledge')
+    await waitFor(() => expect(screen.getAllByRole('tab')).toHaveLength(2))
+    unmount()
+
+    render(<AppRouteTabs />)
+    expect(screen.getByRole('tab', { name: '工单详情' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: '知识库' })).toBeInTheDocument()
+  })
+
+  it('标签溢出时隐藏原生滚动条，并提供左右切换和全部页面菜单', async () => {
+    const user = userEvent.setup()
+    const { container } = render(<AppRouteTabs />)
+    navigate('/knowledge')
+    await waitFor(() => expect(screen.getAllByRole('tab')).toHaveLength(2))
+
+    const scrollArea = container.querySelector('[data-slot="app-route-tabs-scroll"]') as HTMLDivElement
+    const scrollBy = vi.fn()
+    Object.defineProperties(scrollArea, {
+      clientWidth: { configurable: true, value: 320 },
+      scrollWidth: { configurable: true, value: 720 },
+      scrollLeft: { configurable: true, value: 0, writable: true },
+      scrollBy: { configurable: true, value: scrollBy }
+    })
+    fireEvent.scroll(scrollArea)
+
+    const nextButton = await screen.findByRole('button', { name: '向右查看已打开页面' })
+    expect(scrollArea).toHaveClass('scrollbar-hidden', 'scroll-fade-x')
+    expect(screen.getByRole('button', { name: '向左查看已打开页面' })).toBeDisabled()
+    await user.click(nextButton)
+    expect(scrollBy).toHaveBeenCalledWith(expect.objectContaining({ behavior: 'smooth' }))
+
+    await user.click(screen.getByRole('button', { name: '查看全部已打开页面，共 2 个' }))
+    expect(screen.getByRole('menuitem', { name: /工单详情/ })).toBeInTheDocument()
+    expect(screen.getByRole('menuitem', { name: /知识库.*当前/ })).toHaveAttribute('aria-current', 'page')
+  })
+})