Merge remote-tracking branch 'origin/main'

Author: qqqqqf-q

src/apps/web/src/__tests__/appUI.test.tsx

@@ -1,9 +1,9 @@
-import { act } from 'react'
+import { act, useEffect, useState } from 'react'
 import { createRoot } from 'react-dom/client'
 import { MemoryRouter } from 'react-router-dom'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { AppUIProvider, useSidebarUI } from '../contexts/app-ui'
+import { AppUIProvider, useSettingsUI, useSidebarUI, useTitleBarRightPanelUI } from '../contexts/app-ui'
 import { AuthContextBridge, type AuthContextValue } from '../contexts/auth'
 import { DesktopTitleBar } from '../components/DesktopTitleBar'
 import { LocaleProvider } from '../contexts/LocaleContext'
@@ -33,6 +33,41 @@ function SidebarProbe() {
   )
 }
 
+function SettingsProbe() {
+  const { settingsOpen, settingsInitialTab } = useSettingsUI()
+
+  return (
+    <div>
+      <span data-testid="settings-open">{settingsOpen ? 'open' : 'closed'}</span>
+      <span data-testid="settings-tab">{settingsInitialTab}</span>
+    </div>
+  )
+}
+
+function RightPanelShortcutProbe() {
+  const { rightPanelOpen, setRightPanelOpen } = useSidebarUI()
+  const { setTitleBarRightPanelClick } = useTitleBarRightPanelUI()
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    setTitleBarRightPanelClick(() => {
+      setVisible((open) => !open)
+    })
+    return () => setTitleBarRightPanelClick(null)
+  }, [setTitleBarRightPanelClick])
+
+  useEffect(() => {
+    setRightPanelOpen(visible)
+  }, [visible, setRightPanelOpen])
+
+  return (
+    <div>
+      <span data-testid="right-panel-visible">{visible ? 'open' : 'closed'}</span>
+      <span data-testid="right-panel-icon">{rightPanelOpen ? 'open' : 'closed'}</span>
+    </div>
+  )
+}
+
 describe('AppUIProvider sidebar state', () => {
   const authValue: AuthContextValue = {
     me: null,
@@ -43,11 +78,13 @@ describe('AppUIProvider sidebar state', () => {
   }
 
   const originalInnerWidth = window.innerWidth
+  const originalNavigatorPlatform = Object.getOwnPropertyDescriptor(window.navigator, 'platform')
   const originalActEnvironment = (globalThis as typeof globalThis & {
     IS_REACT_ACT_ENVIRONMENT?: boolean
   }).IS_REACT_ACT_ENVIRONMENT
 
   beforeEach(() => {
+    desktopMock.isDesktop.mockReturnValue(true)
     vi.useFakeTimers()
     vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => setTimeout(() => cb(0), 0))
     vi.stubGlobal('cancelAnimationFrame', (id: number) => clearTimeout(id))
@@ -78,6 +115,11 @@ describe('AppUIProvider sidebar state', () => {
         IS_REACT_ACT_ENVIRONMENT?: boolean
       }).IS_REACT_ACT_ENVIRONMENT = originalActEnvironment
     }
+    if (originalNavigatorPlatform) {
+      Object.defineProperty(window.navigator, 'platform', originalNavigatorPlatform)
+    } else {
+      Reflect.deleteProperty(window.navigator, 'platform')
+    }
   })
 
   it('保留手动折叠状态，即使跨过宽度断点后再回来', async () => {
@@ -148,6 +190,112 @@ describe('AppUIProvider sidebar state', () => {
     })
     container.remove()
   })
+
+  it('全局设置快捷键打开 settings 页签并可再次关闭', async () => {
+    desktopMock.isDesktop.mockReturnValue(false)
+    Object.defineProperty(window.navigator, 'platform', {
+      configurable: true,
+      value: 'Win32',
+    })
+
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={['/']}>
+          <AuthContextBridge value={authValue}>
+            <AppUIProvider>
+              <SettingsProbe />
+            </AppUIProvider>
+          </AuthContextBridge>
+        </MemoryRouter>,
+      )
+    })
+
+    expect(container.querySelector('[data-testid="settings-open"]')?.textContent).toBe('closed')
+    expect(container.querySelector('[data-testid="settings-tab"]')?.textContent).toBe('account')
+
+    let event = new KeyboardEvent('keydown', {
+      key: ',',
+      code: 'Comma',
+      ctrlKey: true,
+      bubbles: true,
+      cancelable: true,
+    })
+    await act(async () => {
+      window.dispatchEvent(event)
+    })
+
+    expect(event.defaultPrevented).toBe(true)
+    expect(container.querySelector('[data-testid="settings-open"]')?.textContent).toBe('open')
+    expect(container.querySelector('[data-testid="settings-tab"]')?.textContent).toBe('settings')
+
+    event = new KeyboardEvent('keydown', {
+      key: ',',
+      code: 'Comma',
+      ctrlKey: true,
+      bubbles: true,
+      cancelable: true,
+    })
+    await act(async () => {
+      window.dispatchEvent(event)
+    })
+
+    expect(container.querySelector('[data-testid="settings-open"]')?.textContent).toBe('closed')
+
+    act(() => {
+      root.unmount()
+    })
+    container.remove()
+  })
+
+  it('右侧面板快捷键复用标题栏回调路径', async () => {
+    desktopMock.isDesktop.mockReturnValue(false)
+    Object.defineProperty(window.navigator, 'platform', {
+      configurable: true,
+      value: 'Win32',
+    })
+
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={['/']}>
+          <AuthContextBridge value={authValue}>
+            <AppUIProvider>
+              <RightPanelShortcutProbe />
+            </AppUIProvider>
+          </AuthContextBridge>
+        </MemoryRouter>,
+      )
+    })
+
+    expect(container.querySelector('[data-testid="right-panel-visible"]')?.textContent).toBe('closed')
+    expect(container.querySelector('[data-testid="right-panel-icon"]')?.textContent).toBe('closed')
+
+    await act(async () => {
+      window.dispatchEvent(new KeyboardEvent('keydown', {
+        key: 'b',
+        code: 'KeyB',
+        altKey: true,
+        ctrlKey: true,
+        bubbles: true,
+        cancelable: true,
+      }))
+    })
+
+    expect(container.querySelector('[data-testid="right-panel-visible"]')?.textContent).toBe('open')
+    expect(container.querySelector('[data-testid="right-panel-icon"]')?.textContent).toBe('open')
+
+    act(() => {
+      root.unmount()
+    })
+    container.remove()
+  })
 })
 
 describe('DesktopTitleBar update entry', () => {

src/apps/web/src/__tests__/shortcuts.test.ts

@@ -0,0 +1,71 @@
+import { afterEach, describe, expect, it } from 'vitest'
+
+import { SHORTCUTS, formatShortcut, matchesShortcut } from '../shortcuts'
+
+const originalPlatform = navigator.platform
+
+afterEach(() => {
+  Object.defineProperty(navigator, 'platform', {
+    configurable: true,
+    value: originalPlatform,
+  })
+})
+
+function setPlatform(platform: string) {
+  Object.defineProperty(navigator, 'platform', {
+    configurable: true,
+    value: platform,
+  })
+}
+
+describe('shortcuts', () => {
+  it('区分侧栏和右侧面板的 B 快捷键', () => {
+    setPlatform('MacIntel')
+
+    const sidebarEvent = new KeyboardEvent('keydown', { key: 'b', metaKey: true })
+    const rightPanelEvent = new KeyboardEvent('keydown', { key: 'b', altKey: true, metaKey: true })
+
+    expect(matchesShortcut(sidebarEvent, SHORTCUTS.toggleSidebar)).toBe(true)
+    expect(matchesShortcut(sidebarEvent, SHORTCUTS.toggleRightPanel)).toBe(false)
+    expect(matchesShortcut(rightPanelEvent, SHORTCUTS.toggleRightPanel)).toBe(true)
+    expect(matchesShortcut(rightPanelEvent, SHORTCUTS.toggleSidebar)).toBe(false)
+  })
+
+  it('使用物理按键匹配 Option 改写后的字符', () => {
+    setPlatform('MacIntel')
+
+    const rightPanelEvent = new KeyboardEvent('keydown', {
+      key: '∫',
+      code: 'KeyB',
+      altKey: true,
+      metaKey: true,
+    })
+
+    expect(matchesShortcut(rightPanelEvent, SHORTCUTS.toggleRightPanel)).toBe(true)
+  })
+
+  it('拒绝混入非当前平台的主修饰键', () => {
+    setPlatform('MacIntel')
+    expect(matchesShortcut(new KeyboardEvent('keydown', {
+      key: ',',
+      code: 'Comma',
+      ctrlKey: true,
+      metaKey: true,
+    }), SHORTCUTS.openSettings)).toBe(false)
+
+    setPlatform('Win32')
+    expect(matchesShortcut(new KeyboardEvent('keydown', {
+      key: ',',
+      code: 'Comma',
+      ctrlKey: true,
+      metaKey: true,
+    }), SHORTCUTS.openSettings)).toBe(false)
+  })
+
+  it('按平台显示修饰键', () => {
+    expect(formatShortcut(SHORTCUTS.toggleSidebar.binding, 'mac')).toEqual(['⌘', 'B'])
+    expect(formatShortcut(SHORTCUTS.toggleRightPanel.binding, 'mac')).toEqual(['⌥', '⌘', 'B'])
+    expect(formatShortcut(SHORTCUTS.toggleSidebar.binding, 'other')).toEqual(['Ctrl', 'B'])
+    expect(formatShortcut(SHORTCUTS.toggleRightPanel.binding, 'other')).toEqual(['Alt', 'Ctrl', 'B'])
+  })
+})